I attended the Los Angeles HTML5/CSS3 meetup on 11/14/11 and it was awe-inspiring.
It was a packed house that didn’t end until after 11pm.
I wanted to share some highlights:
The first speaker was Stephanie Sullivan Rewis, an evangelist with Adobe. She provided quite an overview on the use of html5 and css3. She definitely had my attention. Image may be NSFW.
Clik here to view.
One key point she made:
ALL BROWSER EXPERIENCES SHOULD NOT BE IDENTICAL: for too many years we have been spending an inordinate amount of time making certain that the user experience is the same across all browsers and devices. That is old school. She and her husband, Greg Rewis (who also spoke) were very much against the use of “m.”whatever.com for mobile sites. Their point was that just because someone is on a mobile device or pad, does not mean that they necessarily want a “mobile” experience.
What I learned from her: non-prefix properties in our style sheets should FOLLOW those with prefixes. For example, where we use drop shadows and target the compatible browser engines, such as -webkit, -moz… those should be BEFORE the majority style. Does that make sense?
Stephanie also mentioned the use of Modernizer for browser feature detection, and pointed to this website: MikeTaylr.com, that gives an indication of browser compatibility with new html5 elements and attributes. She spoke about adaptive web design, progressive enhancement, and regressive enhancement. She also showed stats predicting Chrome adoption surpassing Firefox and IE worldwide within the next couple of years, perhaps sooner.
Also some VERY cool stuff with pseudo elements, specifically :before and :after, being used for decorators, WITHOUT ADDITIONAL MARKUP.
Also background transitions and shadows. She said to check these guys out: Nicolas Gallagher http://nicolasgallagher.com/ and David DeSandro http://desandro.com/
Her website: http://blog.w3conversions.com/
Twitter: @stefsull
Speaker number two was Elliott Sprehn from Google. Have you heard of AngularJS? This was a hobby project of one of their engineers that they decided to support with version 1 expected to roll out at the end of this year. He did some demos and it reminded me a lot of Backbone, only he professed it was more scalable. It has built-in support for Jasmine and a Scenario Test Runner.
There is a LOT of stuff behind the scenes to make development more maintainable. He also mentioned, that unlike Backbone, AngularJS avoids something he called “event storms”. This guy is a NERD and a smart one.
Here is one of his presentations: http://www.elliottsprehn.com/blog/files/presentations/Intro_to_AngularJS_JavaScript_Done_Right.pdf
Twitter: @ElliotZ
The third speaker, Neville Spiteri, from a company in Venice called Wemo Media, demoed a project called The Blu: http://theblu.com/
He spoke mostly about what he sees as the next wave in social interaction on the web for pro-sumers (producer/consumers).
Connected, peer-produced projects with intrinsic value.
You can sign up for beta with the access code: newweb
Last speaker was Greg Rewis. His schtick was responsive web design and media queries. Media queries have been around since CSS2, but they’ve been expanded now. One interesting thing he pointed out is that most devices, laptops, pad, and mobile phones lie to us when we query screen dimensions. http://assortedgarbage.com/presario/screentest_v.html This may be something that our mobile guys already know. He feels that every web experience should Adapt based on the medium upon which it is viewed. He showed off some REALLY helpful time saving tools in…DREAMWEAVER. But even though I was impressed with what it does now, I just can’t see myself going back. For example, he was able to create gradients and drop shadows in Fireworks and then export the cross-browser css to re-create it on a webpage…cool, but…
Something else he said that stuck in my mind: ALL style sheets are downloaded when a site is visited, regardless of the environment. The biggest threats to speedy interactions on a site are bandwidth and http requests. He feels that alternative styles should be contained in ONE single style sheet, surrounded by media queries, to reduce the http requests.
He did admit, that contrary to some, he doesn’t believe designing a site from scratch, designing for “mobile first” is easy to do, but philosophically it’s good to think about.
He suggested this guy’s book: http://www.lukew.com/ff/entry.asp?933
He mentioned that media (images) are only downloaded if needed, however “display:none” in a CSS media query does NOT prevent download. This can be a traumatic user experience on mobile devices. He highlighted some of the work of the Filament Group’s work with what they call responsive images: http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
He also covered the use of the HTML5 appcache, to assist users with offline browsing (does not work for php files). Oh, and I didn’t know that that manifest cache is NOT emptied when browser cache is cleared. (if I understood him correctly). Greg finished off with a bit on CSS shaders : http://www.adobe.com/devnet/html5/articles/css-shaders.html
and CSS regions: http://labs.adobe.com/technologies/cssregions/
Greg’s twitter: @garazi
All in all, it was definitely worth my time. All of the speakers were knowledgeable and informative. I learned a few things, and I even snagged a t-shirt. If you have the inclination, join me at the next LA HTML5 meetup:
http://www.html5la.com/