Yesterday evening I went to Holborn in London to attend the London Web Standards Pick’n’Mix event.
The place (a room under a bar with an own bar – win!) was packed and actually amazingly warm. The sound was good (except for the handheld mic which turned Jim O’Donnell’s announcements into Jungle remixes) and people were eager to hear about cool new stuff.
One thing I really liked was that instead of the normal thanking of the sponsors the organisers also listed job offers before the first talk – pretty clever way to advertise your job. If you need a London web geek, contact them!
How we’ll layout websites in 2016 – Peter Gasston
Peter was the first to take the stage with a 5 minute lighting talk about CSS layout models. He had written an article with the same title on CSS3.info in 2006 and covered what had improved since then (not much, really). His slides are available on Slideshare.
Peter did a good job (considering also that this was his first public presentation) on covering the basics of CSS layouts. What we use now, like Floats, Absolute positioning or JavaScript (Masonry.js) and what is there to come:
Peter rightfully claimed that layout is now the new challenge for CSS and browser vendors to tackle.
How to write jQueryJavaScript that doesn’t suck – Ross Bruniges
Ross is a regular in the UK scene and and overall great guy. One of those loud, drinking but also silent types that doesn’t get the credit he deserves for helping web standards rock the city. He has a special way about him which also showed in the fact that he gave out mini pork pie as prizes for questions! Ross gave a great reminder talk covering best practices in JavaScript development if you want your code to work and be taken over by other developers without calling you names. The slides and links are available on his posterous.
The first point was to organise your stuff as you you will hand over to other developers.
JSLint was next on his list, first and foremost as it helps you find simple problems with your code, like:
- semicolon insertion which can lead to wrongly returned values (yes, { should not be on a new line in JS, sorry)
- Double equals instead of triple equals – you should check type and value
Personally I use the JSTools Textmate Bundle which lints my JS when I save it – very simple reminder to do the right thing.
Ross then explained that long chains in JQuery are tempting but also hard to read and debug. One trick to use is to split the chain at the full stop and insert a newline and tab in front of it.
He then continued to explain that using Patterns in your JavaScript is a great idea, especially the revealing module pattern (what can I say, the man has taste) and showed off Addy Osmani’s free Essential JavaScript Design Patterns ebook.
YAGNI - you ain’t gonna need it – was next and on the back of this the reminder to create smaller, aptly named functions that do one task well instead of all-encompassing monster methods. This can also be achieved by looking at your functions once you are done, detect duplicate tasks and move them out into an own helper method.
Custom events were the next great tip and I can only agree that there is nothing better for separating your functionality from your source and allowing other developers to extend your widgets.
Commenting code is one of Ross’ fetishes and he praised the usefulness of JSDoc and Documentation driven design, as described by Frances Berriman in this year’s 24 ways.
Then we moved on to performance and that there is nothing worse than optimising prematurely and forgetting about old browsers when you think about performance testing.
For starters it is very important to write good selectors in jQuery as the sizzle engine parses your strings from right to left. This means that $('#foo div') makes IE read all DIV elements, loops through them and checks which ones have a parent with the ID foo instead of doing a getElementById and then a getElementsByTagName to achieve the same.
In the same vein it is important to cache results in variables to avoid IE doing this over and over again and to return false when elements can’t be found as jQuery is very adamant in trying to find them.
Event Delegation was the next big thing on the menu and again I can’t agree more – it is very elegant and makes your JS independent of HTML changes. It is much less expensive having one event listener than using each() to apply lots of them throughout the document. One gotcha Ross mentioned is that jQuery’s live() always goes all the way up to the document leverl whilst delegate() allows you to define a scope like “only in this DIV”. There’s a good overview at Brandon Aaron’s blog.
Reflow and repainting issues were next on the performance menu, which in essence means that you shouldn’t touch the DOM too much and instead create long HTML strings and inject them into hidden elements before showing them.
Accessibility was another topic, which started with Ross reminding us that CSS styles for hover should also get focus and blur styles and that instead of using hover you should use .bind(mouseenter focus) and mouseleave blur in jQuery.
Another reminder was that invalid markup is invalid markup – even when you add it with JavaScript and that you should play nice with screenreaders and dynamic changes by using tabindex and focus in addition to a hidden form field or – even better – ARIA live regions.
The next thing was not to forget the edge cases as things will go wrong when they can go wrong. This means using $.ajax() instead of $.getJSON() as it allows you to define timeouts and error cases (and doesn’t break caches because of callback parameters).
Ross’ last points were about sending HTML5 to IE and bewaring of HTML5shiv as it means you do the job CSS should do with JavaScript. Instead it might make more sense to use a DIV with a class around each new semantic element.
All in all Ross did a great job and I hope he inspired some of you to dig deeper (hence also my notes and more links here).
Kornel Lesinski – Hypertext Transport Protocol
With the last talk of the day just before the merriment of beverages and conversation, Kornel changed the pace a bit and also shifted the focus from front-end technologies to the server and even further into the infrastructure of the web itself.
He talked in detail about:
- MIME type issues when serving files on the web
- How sending headers on the servers makes a lot more sense than using a META tag
- How to properly force a download of a file using
Content-Disposition: attachment - Bugs in IE - especially around caching and filename attributes
- How faking MIME types seems to be a quick solution but will bite us further down the line
- html vs application/xhtml+xml
I am not quite sure of the percentage of people in the audience understanding what was going on but I for one was very impressed with the research and the cool no-nonsense presentation style. Bad encoding of files on the web is a big issue and can make or break your web site as in the end you want to show users files in the way they were intended to be shown.
Summary
All in all it was a great evening and I am looking forward to the next meeting of this group. My advice would be to change the structure a bit to one big talk and several lightning talks to give more people the chance to show what they are doing. This is a great meetup to get your first experiences in speaking and the audience is knowledgable and sympathetic.
