The other day I was asked to write a foreword for a book on CSS by someone I inspired, so here is what I wrote.

When Cascading Style Sheets got supported by browsers, a lot of things changed. I remember the first article I read about them was saying that using them could increase the speed of your web sites tenfold and your development and maintenance time will be cut in half.

That was totally true, as this was a time when connecting to the internet sounded like Dubstep sounds now and 56k connections were luxury. In order to style things we needed images, background colours, table layouts and font elements. And of course lots and lots of spacer gifs and   to create padding.

Fast forward to now, and you will see that it is almost impossible to think of any web design without CSS. In the last year alone we got so many cool new features to play with that animation and transformations with JavaScript can soon be as forgotten as spacer gifs are now. We can set colours in various formats, we can add our own fonts, create patterns and gradients, we have transformations and transitions and we can define animations. We can generate content in CSS in case we need it only for a visual effect and we have all kind of interaction selectors when the user hovers over something, clicks it or even selects text in the page.

A lot of this comes with a price: we have to repeat a lot of settings to support all the browsers (and those coming in the future) and there are differences in implementation that can make our life harder. This, however, is a temporary problem. Sadly enough it doesn’t stop people from repeating mistakes of the past like favouring one browser without providing fallbacks for others and older ones. We did that already with IE6 which is why now a lot of our products are hard to maintain and upgrade.

In general, the ubiquity of CSS in our development world made it a bit less magical. We actually see it as a given and there is hardly any thought and documentation out there how to write well-structured, clean and simple CSS that does the job. Our high speed connections, caching and a plain disregard of CSS amongst “real developers” made our style sheets a dumping ground rather than getting the same love we give our Python or JavaScript. Want proof? Github, a rather simple looking site loads 400KB of CSS in over 20000 lines of code. Facebook used to have over 2MB of CSS before some friends of mine re-engineered the CSS using an “object oriented approach” and last but not least a new bug in Internet Explorer got discovered: it only loads 32 external style sheets before giving up.

Now, as an old-school, hand-craft developer I shook my head at the mere thought of 32 style sheets, but the fact of the matter is that CMS and other systems create a sheet for each module on a large site and instead of concatenating them just add them to the template as a new link element.

I once wrote a 300 line CSS document for a massive, international web site. When I left the company, I looked at it half a year later and it grew to a whopping 3800 lines with massive selector chains and very specific class names like “headingright3c6bold”. In order to create a visual change the poor maintainers who obviously had no clue how CSS works (or didn’t care) added random HTML elements to the templates to have a handle to increase the specificity and many other crimes against CSS were committed before my very eyes.

That is why I am happy that there is a new movement, a desire to clean up the CSS we write and make it snappy and fast again, going full circle to the original promise of CSS.

This book is part of this movement, and the writer shows insight, foresight and interest in a topic that many consider too confusing to care about. I for one am very happy to see it come out and hope that by reading it you get inspired to put the art and the magic of speed back into your style sheets.

Every since I played around with the sidebar here on the blog giving it a slight tilt in 3D I get a lot of questions how it was done. Well, there is no dark magic at play, just some 3D CSS transformations and a transition.

So I recorded a quick screencast showing you how it is done (also showing some of the Firefox devtools). You can see it on YouTube or in higher quality on vid.ly.

The code is very simple:

<div class="yui-b" id="sb">
  <div id="rot">
    ...
  </div>
</div>

#sb {
  position: relative;
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
      -ms-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}
#rot {
  -webkit-transform: rotateY(-15deg);
     -moz-transform: rotateY(-15deg);
      -ms-transform: rotateY(-15deg);
       -o-transform: rotateY(-15deg);
          transform: rotateY(-15deg);
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
      -ms-transition: -ms-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
}
#rot:hover {
  -webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
       -o-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

You can play with 3D transforms using the 3D CSS Tester and don’t forget that this month’s Mozilla Dev Derby is about 3D transforms.

Last week I was a bit more silent than usual (some said I appeared to be human rather than a news/tech/kittens/puppies feed). The reason was that I was at mobile world congress in Barcelona, Spain and got roped into doing booth duty on top of my presentation there.

Mothereffing Boot to Gecko!

The main reason though was that I finally got my hand on a boot to gecko phone and not the best horses or king’s men could stop me from showing it to anyone who was even marginally interested.

The presentation that made the rounds was the one on Engadget:

So before going back to my MWC experience, here are the quick points about this:

• Boot to Gecko is a fully open phone stack
• It has a Linux core and its Gaia interface is written in HTML5 – so there is no need to learn any Java or C++ to write apps for it or customise the OS itself
• The phone features a full telephony and messaging stack
• It also runs WebGL with 60fps smoothly
• By the end of the year Telefonica want to release a phone running it and we are in talks with others to do the same (I am off to Hannover on Wednesday for Cebit for that)
• As the OS is incredibly light-weight it boots in 12 seconds:

In other words: it kicks ass and it allows me as a web developer to build things for phones with the same technologies that I build web sites in. The interesting thing was that this option doesn’t transpire that easily to mobile developers.

HTML5 concerns of mobile developers and entrepreneurs

Whilst showing off mobile Firefox on various tablets and mobile phones I got a lot of feedback and questions about HTML5 from people. They were incredibly interesting as we assume as web developers that mobile HTML5 development is easier – as you know the browser that is in use if you target a certain phone. However, I realised that web development and mobile development are still very much different worlds. We had the same experience during a discussion round at the WIP Jam. I was lucky enough to partner with Wolfram Kriesing of uxebu to answer the concerns of mobile developers. Some of those made it into my talk.

• When is HTML5 ready for use? This was a very big one. Coming from a world of IDEs, SDKs and builds this is a predictable question but as web developers we know that our tech is constantly moving (I am writing a big post/talk on that soon)
• How can I protect my code? A common concern was that HTML5/CSS and JS are open and can be simply copied. So a lot of entrepreneurs wondered how they can stop people from doing that. My advice was to go to the Android store and search for “Angry” and see that the same happens in native code. The energy you put into protecting your code just to find it ripped you might as well put into creating a great user experience and let your lawyers worry about plagiarism.
• Do you need to be online to use HTML5 games? It was amazing how unknown the local storage options of HTML5 are. Again, I showed the native Angry Birds seasons which loads each and every level and thus is pointless offline. It is not a problem of the technology, it means you implemented it wrongly.
• What tools do I use to build HTML5? Another big one. Whilst as web developers we are very happy to go into the code in a text editor, it seems alien to a lot of developers out there. Which means that tooling is a very necessary task for us HTML5 aficionados right now and it is cool to see uxebu and cloud9ide going there.

Reacting to question and presenting on HTML5

During the WIP Jam at MWC Joe Stagner and me gave a 1.5 hour “workshop” on HTML5 and sat on the table all day answering questions (and handing out a lot of shirts and stickers). I recorded our talk and – despite a few technical issues with the projector and the room giving a good impression of the boiler room of the Titanic (32 degrees) it went really well:

Noteworthy is that by using Mortadelo y Filemón in my slides, I made quite a few people happy, so happy actually that @martuishere got me a copy of one of their books (which I had in German when I grew up).

The rocky road ahead

All in all we have quite a rocky road ahead of us if we want to get the mobile world to embrace HTML5. A lot of it is not really technical issues but have to do with attitude and environments. In the past we were lucky as web developers as nobody understood and cared what we did. Now everybody wants to play in our sandbox but they expect laser guided shovels and shiny clean sand that smells of roses rather than getting their fingers dirty diving deep. A big one was comparing HTML5 to native code – something that is limiting web development a lot. Of course a native app is snappier. A formula one car is faster than a hovercraft, but it fails miserably on water. Great web apps should change and adapt to their environments – something that is very uncommon in native code. Funnily enough only developers played with B2G and said it is a bit laggy. Users of phones and managers didn’t realise any difference – actually they asked if it is a windows phone as our Gaia app icons are rectangular rather than rounded squares.

The conference as a whole

All in all I dreaded the conference. It is an overpriced, hyped sales show complete with everything I hate about conferences: booth babes who smile and show a lot of flesh rather than knowledge, tons of printed out marketing material to throw away a day later, amazingly stupid taglines (as reported by The Register with my favourite being “Applying Thought”), bad catering (I more or less lived on omelette sandwiches), the whiff of lots and lots of money being spent all over the place, and a big pile of business cards for me to wade through which could have been quick emails we could have sent each other from our fancy phones (they do have that feature).

That said, some of the people there really made it worth while – most of them I knew beforehand, but I met a lot of locals that I will so come back to.

I love working for Mozilla

The main thing that made it worth while for me to go were my colleagues in Mozilla. The B2G and Mobile Firefox team did not sleep at all getting the demos and the system ready, everybody was switched on 100% of the time and happy to help each other and the people not at the conference did a grand job blogging our exploits (or linking to the open tech we talked about), monitoring the press and answering comments. It was exhausting, taxing and a lot of work to do, but it worked out and it is incredible to see that a conference I thought Mozilla would be very alien at and belittled as “those web guys” got rocked to its core by Boot to Gecko and suddenly a lot more people start believing when we say “the web is the platform”.

Lately I got into watching TED movies in the gym (free video podcast, 20 minutes, perfect length for a crosstrainer session). Today I checked out Salman Khan’s introduction to the Khan academy and its beginnings:

All in all a great talk and I am a big fan of the Khan academy as a way to give a kick up the backside of education. As Salman explains in the video, most of the time of teachers nowadays is wasted on not interacting with the students. Instead, we apply a “one size fits all” approach to teaching that leaves a lot to be desired and a lot of students in limbo of knowing things. We teach to measure, not to bring knowledge.

What annoyed me about the talk was how US centric it was. Whilst I agree that education is a big issue in the US (which is very ironic seeing how prosperous the country depicts itself) I think a project like that could have even more impact in areas where education is not free and easy to come by. Instead of fighting a system that happily stays inefficient (as it means not learning new things, ironically) this could be a blueprint for areas where you can start from zero.

Khan talks about this briefly at the end explaining that a street kid from Calcutta could watch these movies at night as it needs to work during the day to make money for its family instead of going to school. That makes no sense whatsoever to me. If the family is too poor to have food then surely they won’t have money for a computer and a fast enough connection to see these movies – let alone have the computer literacy for it.

This could work immensely well if Khan academy and others would start facilities like that. Have public libraries and buildings with computers and a connection (this could be chrome books) where people can go and learn. I could see internet cafes world-wide dedicating one sponsored computer to Khan teaching for example.

Saying the content is available to all is not enough – we need also to make the system available. There is already a good start being made by subtitling the videos in other languages. Fun ahead. I think I sign up as a volunteer there.

I am right now writing a post on how to use :target selectors for image galleries. As always, older IE are the fly in the ointment there as only IE9 supports the selector. So I thought about a way to serve the CSS only to the browsers in the know. The options were of course conditional comments, adding a selector IE < 9 doesn’t understand to every selector I want to filter out (like using
body:last-child article the same way we used html>body to filter out IE6) but then it came to me: media queries are only supported in IE9 and above. So you can simply do a:

.foo {
  // ... styles for ALL THE BROWSERS
}
@media screen and (min-width: 400px) {
  .foo {
    // ... styles for newer browsers
  }
}

A test of a 400 pixel wide browser window should be more than enough, right? Discuss on Google+