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:

Related posts:

1. My own attempts to build CSS3 patterns

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

Related posts:

1. Dan Tamas speaking about Titanium Appcelerator at TheEvent 2011, Cáceres, Spain
2. QR Generator module for Titanium Appcelerator
3. Create a countdown timer with Titanium Appcelerator

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.

Related posts:

1. Create a countdown timer with Titanium Appcelerator
2. Making a combo-box in Titanium Appcelerator – code and video
3. Seven days with Titanium – day 7 – orientation and accelerometer

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!

Related posts:

1. Seven days with Titanium – day 0 – introduction
2. Seven days with Titanium – day 2 – tables and pickers
3. Seven days with Titanium – day 6 – animations and transforms

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!

Related posts:

1. Seven days with Titanium – day 0 – introduction

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.

Dan Tamas was invited to talk about Titanium Appcelerator at TheEvnt 2011 in Cáceres, Spain, May 14th and the purpose of this talk was to present the advantages of using this framework to develop applications for iPhone, iPad and Android devices.

It was an introductory talk in order to present to the Spanish developers an alternative to ObjectiveC and the very popular Java.

For now I can only embed the slides (in Spanish) but I promise I will soon try to give you a link to the HTML version and also embed the video of the presentation.

Related posts:

1. Dan’s presentation at Appcelerator Meetup @ Mobile World Congress 2012
2. Making a combo-box in Titanium Appcelerator – code and video
3. Create a countdown timer with Titanium Appcelerator

Titanium Appcelerator Mobile has implemented for iOs the Bonjour (or ZeroConf if you want) network protocol that allows you to connect to another device found in the same network.

Before starting with the boring part – I mean the code – let’s watch a video with a small demo showing 3 devices playing together

Networking with Titanium Mobile on iOs

I would like to mention that the iPod is a second generation one – so less capable (the delays are visible in the video) and somehow, sometimes, even seems to loose packets. I tested the same app with an iPad instead of the iPod and everything works just fine.

Bonjour

Based on the code found in KitchenSink I created a small function that creates the connection for us and returns an object to allow you to start it, close it and write to the socket.

Bonjour is a little weird to understand for those with less experience but shortly, things are like this:

• We need a socket in read-write mode that will be used by a localService to publish its presence.
• Each localService have to have its own unique name to be able to identify it in the network.

Besides this, we need a serviceBrowser to find other devices around (that published their presence, of course).

Since everything is asynchronous we’ll have to rely on events to capture the data sent by somebody or the changes in the number of devices connected.

The serviceBrowser has the updatedServices event where we can capture the published services. Here in this function we’ll try to catch the read event for each service that is the one who tells us what data is sent over the network.

Warning: Close the network connection the moment you don’t need it anymore.

The Network Connection Function

The function I created takes care of this so you will just have to use it as in the example below:

Titanium.include('bj.js');
 
var connection = bjnet('my_unique_name', function(data){
	var json_data = JSON.parse(data);
	//do something with this data;
});
 
connection.start();

In other point of your app, where you want to send over a message, just do:

	connection.write('my_message');

As I said before, don’t forget to clean everything:

win.addEventListener('close', function(e) {
	connection.stop();
});

What is going on in the demo?

The example in the video is pretty simple. Depending on what blob you touch (red, green or blue) you create a new connection with this name and start it. At this moment any message coming from the network is JSON parsed and a small blob is created with the specified coordinates and color.

On your turn, when you touch the screen you send over the network your coordinates and color so the other devices know what to draw. Every message is a JSON stringified object like the one below:

	{coords:{x:100,y:200},player:{name:'red', color:'#f00'}}

As an aside the demo uses zero images. None. Everything is native and I plan a future tutorial on how to do this

The code

The code is hosted on Github and you can download it from here. Everything is MIT licensed but I’d like to hear what you come up with.

Code strong!

PS. I’m allowed to say this cause I’m a titan

Check the Spanish version of this post:
Tutorial Avanzado de Titanium – Bonjour Networking

Related posts:

1. Seven days with Titanium – day 2 – tables and pickers
2. Create a countdown timer with Titanium Appcelerator
3. Making a combo-box in Titanium Appcelerator – code and video

Almost any UI element can be animated and transformed, allowing you to add to your application some eye candy or simply take advantage of predefined elements to give them a new role. For those familiar with CSS3 animations this will come very easy as the concept it’s pretty the same.

Animations

Pointless to say, an animation will change one or more properties of an element form the current stage to another (set by us) in a period of time.

var my_view =  Titanium.UI.createView({
    backgroundColor:'#f00',
    height:20
});
my_view.animate({height:100});

The simple code above will animate the height of my_view from 20 to 100.

You can complicate the things more adding more properties to animate (like the background color, opacity, etc), a duration (that needs to be in ms) and a curve (like ease-out or liniar, etc)

Some examples

var view = Titanium.UI.createView({
	width:100,
	height:20,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:300, 
	backgroundColor:'#00f', 
	duration:3000, 
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

If you need to make an animation to come back to the element’s original state and repeat it several times, there are 2 properties that might interest you :repeat and autoreverse

The below code will make the view “pulse” 3 times.

var view = Titanium.UI.createView({
	width:100,
	height:100,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:130,
	width:130,
	repeat:3,
	autoreverse:true,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

The animations have 2 events: start and complete.The complete event is very useful because we can chain more animations one after another or start some other actions when the current one stops.

Transforms

Similar to CSS3 transforms, in Titanium you can use 2D or 3D transforms.

Basically you create a 2D or a 3D matrix for the transform or use the predefined “shortcuts” – (like scale or rotate) and pass this transform to the object you are creating or to the animation.

An example with transforms

var tr_start = Titanium.UI.create2DMatrix();
tr_start = tr_start.rotate(30);
 
var tr_end = Titanium.UI.create2DMatrix();
tr_end = tr_end.rotate(-30);
tr_end = tr_end.scale(2);
 
var view = Titanium.UI.createView({
	width:100,
	height:100,
	transform:tr_start,
	backgroundColor:'#f00',
});
 
win.add(view);
 
view.animate({
	transform:tr_end,
	repeat:3,
	autoreverse:true,
	duration:500,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

The best resources to see how everything works are the examples provided by the Appcelerator team in the KitchenSink, the entry point being here:http://bit.ly/eiow0B

These animations and transforms are not suited to a very intensive usage (like games) but they can be used with success to improve the apps’ look and feel – and with this, the user experience.

As always, I wait for your questions, suggestions and what are you come up with
Check the Spanish version of this post:
Siete días con Titanium – día 6 – animaciones y transformaciones

Related posts:

1. Seven days with Titanium – day 1 – windows, views, navigation and tabs
2. Seven days with Titanium – day 0 – introduction
3. Seven days with Titanium – day 2 – tables and pickers