A really short post today that gathers Dan’s presentation at TiConf 2013 where he talked about optimizing the code in order to speed up Titanium Appcelerator apps.

The video

The slides

Speed up your apps by Dan Tamas TiConf 2013 from dan_tamas

I hope I’ll be able to post a transcript of his speech sometimes next week.

This will probably be the last blog post for 2012 and I don’t want to end this year and begin another one without sending an invitation to all Titanium Appcelerators DeveLovers out there to come and meet each other at TiConf 2013.

Let’s meet next February 23th in Valencia (Spain), have a drink and chat about Titanium, NodeJs, SQLite, your latest Android phone, the latest SDK available or the last night’s tapas tour. Whatever makes you happy, just come – spring in Valencia is awesome and there will also be plenty of time to tour the city and its bars too.

Not sure about this?

These are the speakers: @boydleep, @ketan, @thewarpedcoder, @LizMyers, @xavierlacot, @iskugor, @olivier_morandi, @jrayon, @dan_tamas, @dmackintosh88, @2wheelsburning, Grant Smith, @joemaffia, @LearningTi, Antonio Calanducci and @pecdev and they will talk about Cross-Platform Titanium Apps & Drupal Web Services, Durable and Performant Apps, SQLite – Dynamic Data in Titanium & a Primer on JSONDB, Object Oriented Structures & Practices, Alloy, Titanium Game Development with Lanica Platino, Push Notification with ACS and of course, last night’s tapas tour.

For the developers who like to get dirty with code there will also be some parallel workshops about BlackBerry Apps, NodeJS, CommonJS and Native Modules for iOS & Android.

Sounds good? Buy your ticket and see you in Valencia!

The presentation is in Spanish and I am also attaching the slides, just in case.

The slides of the presentation

I have to admit that when I like the design of a website I check its CSS and HTML to see the code hoping to learn something new. I’m horrible at design and I cannot make a box even if I have it in front of me for 24 hours non stop but I love all kinds of tricks to make the content more appealing: rounded boxes, sexy quote marks, bubbles, everything.

What is really weird is that all these fancy design elements are usually cut as images and put as background-image for some DIV while the vast majority of them can be recreated with CSS. I admit, not all of them are simple but some do and today I’ll show you my latest experiment. I love a certain kind of box and I’m trying to make it using CSS3 only. After a little prayer to the CSS3 God let’s start.

If you’re not a patient person skip all this and go directly to the test page.

Let’s pick an image and apply some CSS3 love

I usually like these kind of boxes with rounded corners, some smooth gradient inside, maybe an inner shadow and definitely a drop shadow. Definitely! So here’s our guinea pig.

The problem with it is the drop shadow and I have a feeling that making it will be fun but seeing it in Internet Explorer will not.

The rounded corners and the gradient are piece of cake. With a little help from the Ultimate CSS Gradient Generator the code looks like this:

background: #f5f5f5; 
background: -moz-linear-gradient(top,  #f5f5f5 0%, #efefef 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f5f5f5 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f5f5f5 0%,#efefef 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f5f5f5 0%,#efefef 100%); /* IE10+ */
background: linear-gradient(top,  #f5f5f5 0%,#efefef 100%); /* W3C */
-pie-background: linear-gradient(top,  #f5f5f5 0%,#efefef 100%); 
border-radius: 7px;
border:1px solid #d8d8d8;

You noticed I used CSS PIE because I am really trying to make this work on Internet Explorer. There was also a grey border that we added.

The white inner border is an inner shadow actually, let’s create it:

box-shadow: 0px 0px 1px 1px white inset;

The outside shadow is a bit tricky, we could add it to the inner shadow cause box-shadow property allow elements to have multiple shadows:

box-shadow: 0px 0px 1px 1px white inset, 0px 23px 21px -33px #000;

The problem is that the shadow is not quite how the designer wanted it to be – and as you can see it for yourself it’s not even looking the same in all browsers (Internet Explorer simply killed it). It’s some sort of blurred copy of the box while our shadow is elliptical.

Almost the same is not acceptable. And you, as programmer, really have to make pixel-perfect websites, right???

Using the :after pseudo element

The idea is simple: we generate the box but when it comes to generating the shadow we just create an ellipse and apply the shadow to it. The ellipse stays behind the box (if we’re lucky) and its shadow drops under OUR fancy box.

I tried applying the :after element to our box directly and because it was really stubborn and did not want to go behind the box I had to create a wrapper and apply the shadow to it. The HTML is simple:

<div class="wrapper"><div class="box"></div></div>

The CSS is:

.wrapper{
	position:relative; 
}
 
.wrapper:after{
	content:'';
        width:300px;
        height:90px;
        border-radius: 50%;
        box-shadow: 0 20px 20px -20px #000;
        position:absolute;
        top:164px;
        left:320px;
}

The result is not bad.

The problem is that the mix of :after pseudo element, CSS PIE and the box-shadow is fatal for Internet Explorer 7 and 8 while IE9 generates the box a bit different.

So no crossbrowser solution here.

What if we break the rule and use an image for shadow?

We cut the shadow as image and use the :after pseudo element to position it. No wrapper needed this time and the CSS looks like this:

	background: url("../img/shadow.png") no-repeat bottom left; 
	width:299px;
	height:20px;
	position:absolute;
	top:584px;
	left:0px;
	content:'';

The box will look like the image because we actually hacked the shadow. I know, I’m ashamed but this time Internet Explorer finally behaves because IE8 supports pseudo elements. (IE7 not really)

A crossbrowser solution? Not quite!

But if we isolate Internet Explorer 8 and 9 and apply them the shadow-as-image solution, IE7 takes the shadow-as-image but no pseudo-elements and the rest (Mozilla, Chrome, Safari, Opera) the pure-CSS3-no-image solution then we have a deal!

I know it’s ugly but we save one HTTP request and do not load a 3Kb image for modern browsers and that is something! Multiply that with X boxes we usually use in a website and we have more than nothing there.

This is how Mozilla displays the boxes…

… but the fun part is this one: Internet Explorer 9 screenshots:

I’m the most annoying person on Appc’s QA forum, my name is Dan and this is how I can be found:

@dan_tamas
http://dan-tamas.me

Today I will try to talk about my experience as a freelancer that uses Titanium for all his mobile projects.

The community

This is the Appcelerator Community. I’d like to tell you about what drives me to spend so much time on the QA. I love the open source movement and I think that helping other people will make us better and we’ll finally achieve world peace.

WRONG! This is wrong, but not as in lying but as in not telling the whole truth, just like marketing does

Let’s take a client. Kevin (Whinnery) looks like he knows some stuff about Appcelerator and he wants a cross-platform application. Somehow he finds my website.

A freelancer’s life is usually governed by NDAs. Everybody wants an NDA as if their project will be the next Angry Birds. When you reach a certain level and people start to know you, you begin to have better and more complex / interesting / nicer projects. But we all know how this usually happens.

The X (big) company hires a Marketing company to take care of their image, website and of course mobile apps. But they need programmers for this, so they hire a programming company. Well the story is that the programming company is nothing more than a few guys in-house and the rest of the team is made by us, the freelancers. And as you suspected they will want an NDA, because they also have one from the Marketing company or they don’t want the world to know that somebody else did their job.

I can tell you that I have worked for 2 companies so big that everybody in this room heard about. But of course I cannot tell you who they are. You might believe me or not but Kevin, the client, surely won’t – he needs something to see and not just simple words.

So coming back to my portfolio what does the client see?

Some certification – everybody has one – a boring FunyABC app for kids, MotorSport – an auto magazine for a German publication, some books and of course the biggest hit: the divorce calculator.

Nothing fancy, nothing outstanding. But because I’m pretty in the picture he gives me a chance and asks me for an interview.

What can I come up with?

I come up with this: I’m number 2 in the Top Experts

And this: I’m an Enterprise user of the framework with access to professional support, free modules and… free beer of course

And I start to explain to the client that I’m a Titan, that I was chosen “Titan of the month” back in September, that I wrote some tutorials and, starting tomorrow, that I was invited to speak to an event organized by Appcelerator itself.

At this point there are very few clients that will discard me as a candidate for their project. If he’s not looking for cheap work or unless some other Titan manages to impress him better – like Aaron or Matt or any other guy spending his time on the QA forum – I’m all set.

How do you reach this level?

1. Spend some quality time on QA, giving answers to questions, but good answers.
2. Write articles and tutorials, people are searching for good Titanium tutorials.

Appcelerator as company is a little different because they are really helping the community, despite what some people complain on the forum. For example, most of the Titans have Pro accounts – for free – and the most active guys on QA are actually Appcelerator employees.

As you see, 1 hour ‘wasted’ on QA every day starts to bring something back.

Also reading other people’s answers makes you a better programmer, you learn for free just by reading their posts. And we have the whole stuff about clients impressed by this, as I just told you.

Bottom line

So bottom line – as a freelancer, build your business around the community. That one hour a day spent helping other people will have the best ROI you ever saw.

The Meetup in pictures

Meeting the Appcelerator guys

Dan Tamas speaking at Appcelerator Meetup Barcelona 2012

Javier Rayon speaking at Appcelerator Meetup Barcelona 2012

I was watching the other day the talk that Lea Verou gave at Fronteers 2011 (you can check the video on Fronteers Vimeo page) when she just proved that I don’t know CSS3 at all (I lived for a while with the sensation that I did know a little bit, I was wrong though).

One thing caught my attention: CSS3 patterns. She build some really crazy stuff there and I invite you to check more CSS3 patterns on her site, test the code and implement it in your future projects. Nothing is made with images, just pure CSS3 gradients and lots of brains.

Here’s how some of them look like:

Making some of my own was the next step. It’s a great way of learning the specs a bit better cause I must confess I never read them properly and never bothered with the small details.

I did not have to build patterns before and I am almost certain I won’t have to do that in the near future but maybe you’ll have to and these small chunks of code will inspire you to build something and learn the tricks yourselves.

Here’s what I did:

Violet flowers

The code is quite simple actually, I wanted to make the flowers with radial gradient and choose some fancy gradient inside but I could not find the right colors so in the end the code looks like this:

background:
radial-gradient(circle, #21052D, #21052D 8px, transparent 8px) -14px 35px,
radial-gradient(circle, #270A33, #270A33 14px, transparent 14px) -3px -30px,
radial-gradient(circle, #270A33, #270A33 14px, transparent 14px) -5px 25px,
radial-gradient(circle, #270A33, #270A33 14px, transparent 14px) -23px -30px, 
radial-gradient(circle, #270A33, #270A33 14px, transparent 14px) -23px -49px;
background-size: 67px 75px;
background-color: #20052B;

Add the vendor prefixes yourselves. Adding all of them here myself would have cluttered the page and made your understanding of it quite impossible. It won’t work the way it is written right now, it needs the vendor-prefixes. (CSS PIE with radial gradient did not seem to work in older versions of IE but the page degrades to a nice solid violet color as a background which is still ok with me)

The cools stuff is that you can increase or decrease the size of the flowers just by multiplying the numbers in there. I mean all of them. Be aware that small flowers won’t display as well, browsers struggled a little displaying them half this size.

Bio hazard

This one is a bit more complex, a mix of radial and linear gradients so you’ll just have to take it as it is:

background:
radial-gradient(circle, black 10px, transparent 10px) -25px 75px,
radial-gradient(circle, yellow, yellow 13px, transparent 13px) -25px 75px,
linear-gradient(300deg, black 22px, transparent 22px),
linear-gradient(60deg, black 22px, transparent 22px),
linear-gradient(300deg, black 22px, transparent 22px) 42px -25px,
linear-gradient(60deg, black 22px, transparent 22px) 42px 25px,
linear-gradient(300deg, black 22px, transparent 22px) 42px 25px,
linear-gradient(60deg, black 22px, transparent 22px) 42px -25px,
linear-gradient(120deg, yellow 22px, transparent 22px) 86px 0,
linear-gradient(240deg, yellow 22px, transparent 22px) 86px 0,
linear-gradient(120deg, yellow 22px, transparent 22px) 43px 25px,
linear-gradient(240deg, yellow 22px, transparent 22px) 43px 25px,
linear-gradient(120deg, yellow 22px, transparent 22px) 43px -25px,
linear-gradient(240deg, yellow 22px, transparent 22px) 43px -25px,
radial-gradient(circle, black , black 28px, transparent 28px) -10px -49px,
radial-gradient(circle, black , black 28px, transparent 28px) -54px 75px,
radial-gradient(circle, black , black 28px, transparent 28px) -10px 49px;
background-size: 135px 150px; 
background-color: yellow;

As same as with the flowers, add the vendor prefixes to make it work in your browsers, scale it if you need to and yes, CSS PIE won’t work. Sorry about that.

I wonder if somebody will have the time to do a Christmas tree with bubbles

After Appcelerator launched the Marketplace I managed to create and post an iOs only module that is able to create QR codes directly on the device without using an online service.

It can generate all types of codes (from 1 to 40) and with any level of correction (L, M, Q, H). You can also customize the size of the resulting QR code and it will try to adapt itself to this size to remain perfectly sharp and fully visible.

For now it’s able to generate these types of content:

• pure text
• SMS (phone number, message)
• phonecall (phone number)
• email ( to, subject, message)
• geo (lat, lon)
• url

You can buy it from the Marketplace: QR Generator module.

Most of the devices nowadays are equipped with an accelerometer that detect the orientation of the device or the movements the user is doing with it.

Titanium exposes this functionality through its APIs so let’s take advantage of that

The orientation

The device can report 7 states of the orientation and they are defined in Titanium as follows:

• Ti.UI.UNKNOWN – the app cannot detect the position
• Ti.UI.PORTRAIT
• Ti.UI.UPSIDE_PORTRAIT
• Ti.UI.LANDSCAPE_LEFT
• Ti.UI.LANDSCAPE_RIGHT
• Ti.UI.FACE_DOWN – like resting on a table with the screen downward
• Ti.UI.FACE_UP – like resting on a table but with the screen upward

While we have all this constants defined there are situations where they might not be available: in iOs when the user locks the orientation the device will report that orientation no matter how the device is held. On Android many devices can detect only the PORTRAIT and LANDSCAPE_LEFT orientations.

Since version 1.7.2 of the SDK the orientation API changed and is set per window (or activity). You can do this using the property orientationModes that accepts an array with the allowed orientation for that window. See this post on Appcelerator’s blog.

win.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_RIGHT];

There is also an event that triggers when the orientation changes allowing you to make the changes you might need (adapt the UI to the new orientation for example.)

Ti.Gesture.addEventListener('orientationchange',function(e) {
    alert(e.orientation);
});

The alert will show a number from 1 to 7 because the constants defined above are type INT. A good practice is to compare the orientation reported by the event with the constant and not directly with the number. In case something will change in the future this will assure you that the code will keep working.

You can find more about it in the docs page for Titanium.Gesture

The accelerometer

The accelerometer is a piece of hardware that is giving you the current position of the device in a 3D coordinates (x, y and z) vector. This can allow you for example to control the movements of an element on the screen.

To get this vector all you have to do is to catch the update event of the Titanium.Accelerometer APIs. It will return the vector we were talking about.

Ti.Accelerometer.addEventListener('update', function(e) {
    lbl.text = 'x: ' + e.x + 'y:' + e.y + 'z:' + e.z;
});

Again, it’s a good practice to remove the event when we don’t need it anymore to save some CPU cycles

Well, that’s it for Day 7. Code strong!

Recently I became a Titanium Certified Application Developer (TCAD) and I was thinking on giving some insights on the exam for those who want to take it.

The exam covers all the areas that exists in the process of developing an app with Titanium Appcelerator:

• Code Questions,
• Contacts and Social APIs,
• Cross-Platform Development in Titanium,
• Integrating Web Content,
• Media and the Filesystem,
• Using Location Services,
• Working with Local Data,
• Working With Remote Data,
• You’re a Native Application Developer Now,
• Zero To App Recap,
• UI Fundamentals,
• Deployment and Distribution.

To pass the exam you will need of course experience but the Appcelerator team has put online at Wiki the labs for each part of the exam. I strongly suggest you to take a good look at them, even at those that might look already known to you, because you might find some nice stuff inside and it will also remind you forgotten stuff at least.

Some of the courses have videos and also links to the downloadable projects.

The projects are a good point to start/learn how to do things “the right way” and explain pretty well some principles that apply to an Appcelerator app.

Don’t let the word “exam” scare you because it’s not really difficult – some of the questions are simple and common sense.

So go for it!

Inspired from the print world, people from Adobe and Microsoft are coming with new features that might (or might not) be embedded into future CSS specs. These new features – CSS Regions and CSS Exclusions – will allow text to flow into webpages pretty much like they do in newspapers and magazines.

You remember that the idea of text flowing into columns is another CSS3 proposal, CSS Multi-column Layout Module and web layouts imitating magazine layouts is CSS3 Paged Media Module

Let’s see some examples that Adobe implemented:

Content threads and shapes using CSS regions

Text could easily flow from one region to the other and we can also choose to imbricate regions or give them different widths, heights and positions in the layout (see picture below)

If you can set rectangular regions, why not come up with weird custom shapes?

Text will also flow from one region (shape in this case) to another.

The idea is super-cool and we waited for it for a while now, but I do wonder about its usability if we think about the way people are reading web content versus printed text (that might change the bottom-top L shaped reading order observed with eye tracking methods).

Content exclusion

The opposite idea is to exclude text from a certain region or regions. (rectangular or custom shape)

Possible real world implementations

Adobe came up with more complex examples (they work in their own version of WebKit based browser only since these features are still a draft and highly experimental).

Text can flow into custom shape areas and that will allow us create CSS accessible pie charts and complex layouts involving images and text that will behave well on devices with different screen sizes and resolutions.

Update: Stephen Hay talking about these features at Fronteers 2011

Stephen Hay | Go with the flow | Fronteers 2011 from Fronteers on Vimeo.

In this session, Stephen will introduce, discuss and give examples of CSS3 Regions.

Browsers have begun to introduce actual layout mechanisms like Flexible Box Layout and Grid/Template Layout. For this, we kneel humbly and are thankful. But while we’re at it, why settle for rudimentary layout tools when we can add content flow to the mix? CSS Regions attempts to bring the power of content flow from print to the Web. Think of Regions as Multi-column layout on adrenaline. Regions can be extremely powerful and useful on their own. When combined with other CSS3 modules they will give web designers and developers creative freedom which rivals that of printed media.