Yesterday I was one of the speakers at Paris Web and my talk was “Working in the now”:
[slideshare id=749394&doc=workinginthenow-1226584706289320-9&w=425]

Originally I meant to talk about HTML5 goodies and how to simulate them with Flash and DHTML right now (writing a small abstraction library) but seeing the latest rounds of crashes and layoffs I changed my stance and talked about things that we could be doing now to both secure our jobs and not lose all the momentum the standards movement got in the last few years.

I’ve explained the reasons and my thoughts on the subject in detail in another post here. In the talk I advocated re-using components and systems we already have to work faster, deliver better and have less hardware and software overhead in doing so.

These are:

• Design Patterns, Design Pattern Stencils
• CSS frameworks: YUI grids, YAML, 960, Blueprint
• Exceptional Performance Tips, YSlow, Hammerhead
• Fix your picture sizes with smushit.com
• Page widgets (things that HTML doesn’t have): YUI, jQuery UI
• Build an own search engine with Yahoo BOSS
• YouTube API
• Amazon S3 for storage
• Batch video conversion with Amazon S3 and EC2
• Captioning on a shoestring with CastingWords
• Mechanical Turk

The feedback so far was great, but there was also a lot of “yeah this is open source, but what if the company running it goes down and how can I trust it” questions. I will write something longer abut this soon, it is just very interesting to see that there is a big problem with free things and trust.

I just spent several splendid days at the Ajax Experience in Boston, MA and was asked to deliver a talk about the YUI. Here’s what I went for: I wanted to make very clear that while YUI is a library much like the others, the real power of it lies in the control it gives you over the whole frontend development process from start to end.

• The CSS components make sure that creating CSS based layouts and typography are as easy cross-browser as libraries make JavaScript development
• The YUI DOM control allows you to monitor the size of the browser window, the position of the document in the window and the dimensions of any element. You can use this power to control things like fixed positioning and element overlap and even monitor font resizing.
• I explained the concept of Custom Events and how the -debug versions of YUI will notify you as a developer at any moment of execution about the internal happenings.
• I showed the development tools – the YUI logger, profiler and test suite and how they make your development process much less random.

The slides are available on slideshare and here are the code examples mentioned in the slides for browsing and to download as a zip.

[slideshare id=631005&doc=yui-for-control-freaks-a-presentation-at-the-ajax-experience-631005-1473&w=425]

This was a question from one of the attendees of my JavaScript course, and here is one solution:

 function getIDsAndClasses(elm,parent){
   var elm = elm || '*';
   if(typeof parent !== 'undefined'){
     if(typeof parent === 'string'){
       var parent = document.getElementById(parent) || document;
     }
   } else {
     var parent = document;
   }
   var elms = parent.getElementsByTagName(elm);
   var ids = [];
   var classesFilter = {};
   var i = elms.length;while(i--){
     if(elms[i].id !== ''){
       ids.push(elms[i].id);
     }
     if(elms[i].className !== ''){
       var singles = elms[i].className.split(' ');
       var j = singles.length;while(j--){
         classesFilter[singles[j]] = singles[j];
       }
     }
   }
   var classes = [];
   for(var i in classesFilter){
    classes[classes.length]=classesFilter[i];
   }
   return {ids:ids,classes:classes}
 }

You can call this method either with no parameters or filter it down by providing an element name and a parent element. The parent element could be a DOM reference or a string, both work.

In any case, the output is an object with a property of ids containing an array of ID names and a property called classes with an array of class names.

The script filters out duplicate classes and gets all applied classes – provided they are space separated.

You can see it in action (in the FireBug console) here: Test getIDsAndClasses

I tried using regex to get the IDs and classes, but that turned out to be a mess in JavaScript.

Any faster way?

Nate Skulic just emailed me about CSSPP, a CSS preprocessor inspired by my CSS wishlist and CSS constants article.

Nate’s done a great job writing a CSS preprocessor that could be handled by mod_rewrite and allows for:

• constants in CSS (define a colour or setting and call it by name)
• variables in CSS (define a setting and override it with URL parameters – I got to check if this is safely filtering out XSS nasties)
• inheritance (nesting selectors)

I especially like that he allows for classes to be added to the parent selector or applied as a child by using a single or double full stop:

body {

..blue {

background:blue;

}

	
..red {

background:red;

}
	
.box {

background:green;

}
	
h1 {

font-size:1.6em;

}
	
h2 {

font-size:1.4em;

}
	
}

Produces the following:

body.blue {

background:blue;

}

	
body.red {

background:red;

}
	
body .box {

background:green;

}
	
body h1 {

font-size:1.6em;

}
	
body h2 {

font-size:1.4em;

}
	

Top to off the usefulness the systems also comes with a smart caching system. Nice job!

I almost didn’t hear about Adobe’s on Air conference until it was upon us and the list of attendees was full. Luckily I got hold of one of the organizers and got a ticket that way (thanks Mike !).

I have to admit that I was dreading the whole thing to be a terrible marketing-driven show and tell of out-of-the-box solutions that solve every problem web development throws at you. This was my experience with a lot of large product company shows in the past – I was proven wrong.

The onAir tour was a great experience, both in terms of organization and content. For a whole day (doors opening at 9.15am and the event closing at 6pm) several speakers told us all about Air – from low level command line building via using different IDEs all the way to deployment, automated update and security of your applications.

The schedule was very tight with a few breaks in between and a larger lunch break. There was no feeling of boredom ever as all speakers kept their presentations snappy and hands-on. If you got in a lull, the rock-steady wireless could keep you busy (although I realized that live-twittering what is going on angers folk though).

People already versed in the “Flash/Flex scene” that came to the conference said that for them a lot was not news, but I think the idea of the onAir tour was not to preach to the Flash crowd but to expand the developer community for the product. Talking to several “Adobe virgins” I got the impression they met their goal. Sam Clark for example told me he came with very low expectations but very strongly considers getting into Air development now.

Of course all of this is post-show enthusiasm, but there are a lot of things Air does that really makes it interesting for web developers:

• you can use the technologies you are already using (HTML/CSS/JS)
• you don’t have to worry about cross-browser and cross-platform incompatibilities (you work with WebKit, which also gives you alpha transparency, rounded corners and all the other CSS goodies we so crave to have cross-browser)
• as a JavaScript developer you have reach you never had before – you can access the file system, create and access SQLite Databases or access 10MB of encrypted storage for your application (I remember messing around with .hta and COM objects to do this in JS once, not fun)
• You have full access to the native windows and menus of the operating system, thus being able to write applications that look and feel exactly like any other the user is already familiar with.
• The security model is much more sophisticated than what we have to deal with in JavaScript and browsers. That said, the option to be able to re-assign file associations for your application does sound potentially dangerous.

Of course not all is rosy about Air and the only presentation that showed the issues when implementing it on a large scale was the one by the BBC.

• Air applications need to be installed, which is something that does spook out users paranoid about viruses. Ironically this is the only way to keep them secure – but it is a hurdle. The web installer badges are a nice way to ease this process.
• The accessibility support is bad, this needs to get fixed, starting with proper keyboard support
• Air applications seem to take up a lot of RAM when they run for a long time. According to Jonathan Snook this is largely caused by the library that creates growl windows and once this is fixed we’ll have less problems.
• The installer is only available in English and needs to be i18n ready.

It is very interesting to see how all the web technologies seem to merge sooner or later with the common denominator being JavaScript. Seeing what Flash developers do with almost the same language I’ve used for years but unhindered by browser restrictions is pretty interesting and looks like a good challenge to marry the best practice quality ideas we found in the hostile browser world with this “let’s try if we can do it” attitude.

I also very much like the fact that Adobe promised to release all the presentation videos on their site after the road show and that they even provide an API to access all the media accumulated during the ride.

Of course there was schwag to go, in this case T-shirts and some goodies that were given out using raffle tickets. There was a tad of an embarrassing moment when I won twice, once with my own ticket and secondly with Steve Webster’s (who had to finish a project and couldn’t come). Hence I drew another winner and gave my prize away.

Good job, I am looking forward to the next event.