Geek Meet Stockholm With Chris Heilmann of Yahoo

Some key takeaways and links from Chris Heilmann’s excellent and fun talk, mostly on front-end design and optimization, but also touching on many other fun, interesting, creative, and playful subjects. Thanks to him, Robert, Creuna, and all the people who made this event possible, including the participants, of course.  This was my second Geek Meet (first one here).

Background information, Chris’ slides, and my notes are below.  Please add whatever you like to the comments, such names and links to your favorite resources, tools, etc.

Background:

• What/Where: Geek Meet Stockholm
• Featuring: Chris Heilmann (his blog)
• When: December 4, 2008
• Organizer: Robert Nyman (his blog)
• Sponsor: Creuna

Chris’s Slides (on SlideShare.net)

• Playing With the Web
• Shifting Gears

Some Highlights
(in somewhat chronological order)

• cURL: Command line tool for transferring files with URL syntax.
• Yahoo Pipes: Aggregate, manipulate, and mashup content from around the web.
• Yahoo Query Language: The guide is here.
• GreaseMonkey: Customize the way a webpage displays using JavaScript.
• FireBug Firefox Add-on: See all FireBug extensions here on mozilla.org.
• YSlow: Analyzes web pages and tells you why they’re slow based on these rules for high performance web sites.
• Prime Number Shitting Bear: Like it says (really).
• SteveSouders.com: Steve is a high-performance dude and this is his site.
• Hammerhead: This is one of Steve’s tools. It adds a tab to Firebug for measuring the load time of web pages.
• “Delayed Script Execution” in Opera: Techniques for loading scripts without blocking other downloads and rendering.
• Non-blocking JavaScript Downloads: From the YUI blog.
• CSS Sprite Generator: Like it says!  From website-performance.org.
• Smush it: Image optimization tool.
• ImageLoader Utility: allows you as an implementer to delay the loading of images on your web page until such a time as the your user is likely to see them (as seen on shine.yahoo.com).
• SWFObject: An easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.

Some of my random notes (CH’s images)
(might not make sense to you unless you were at the Geek Meet and/or have already gone through Chris’s slides)

Some JavaScript up top, the rest at the bottom. First script set class js on the body of the document. Lets you define two styles: one for scripting version and one for dynamic. In the dynamic one, you hide all the problematic elements that could be activated prematurely. Once the functionality has been added, add another element that undoes this:

Chunk JS into several includes:

Don’t need all as single includes. Can write a backend script that does that for you:

Fun things to do with this:

Run it through JSLint, Minify, replace all strings with an array object to stop IE from creating a string object for each string. Instead of doing this every time the page is loaded, make it part of a build process. Don’t forget to cache the result! Get a script that does most of this at Adding JSMin to my CSS/JS merging script.

Other option is lazy loading: Only load things if and when needed. Your base.js could test for all the things that should work. And if they do, create script nodes automatically to the other, chunkier parts. Creates problems because don’t know what is loading when and can have dependency problems. See Keeping JavaScript Dependencies At Bay.

Images: Cut down on them. Best way is with CSS Sprite Generator. Upload a zip of images and it creates the sprite and CSS for you.

See this presentation for the rest of it:
http://www.slideshare.net/cheilmann/shifting-gears-presentation

Update

I know this is going to look like a Yahoo! love fest, but here are some links for you:

Intro Links:

• Introducing YUI – The Rising Giant: From smashingmagazine.com
• The YUI Library (Yahoo! Course @NCU): From slideshare.net

Yahoo! Links:

• The Yahoo! User Interface Library (YUI)
• The YUI Blog
• Building Your Own Widget Library with YUI (a YUI Blog post)
• Yahoo! Developer Network Forum
• Yahoo! UI Library: YUI Theater
• Yahoo YUI Design Pattern Library
• Yahoo Gallery
• Page Inlink Analyzer: Yahoo Gallery Editor’s Pick (SEO tool)
• Yahoo Gallery: YUI
• Yahoo! Query Language
• Yahoo!’s Social APIs
• Yahoo! Application Platform
  
• Yahoo! Stencil Kit
• Yahoo! Welcome to the Ruby Developer Center
• Yahoo! Groups: YUI and Dreamweaver CS4

Off-Yahoo! Links:

• Yahoo! UI Library (YUI) Plugin: From grails.org
• How To Work With The YUI: From rubyonrails.org
• Design Patterns Collection (of screenshots): From Chris Messina (aka FactoryJoe)
• Using Yahoo’s User Interface Library Treeview in Rails: From buildingwebapps.com
• Ten Useful Techniques To Improve Your User Interface Designs: From smashingmagazine.com

Mahalo Answers Q&A

Best tools for designing web: 1) sitemaps, 2) wireframes, 3) flow charts (for interaction & software design)? That is my Mahalo question and there’s some good info and links there, including the following:

• Paper Prototyping: A List Apart article
• Comapping: An online mind mapping tool
• Violet: A free, easy, cross-platform UML editor
• Axure: tool for wireframes, prototypes and specifications
• OmniOutliner: A program for creating, collecting, and organizing information
• OmniGraffle: If you are a designer with a Mac, you know already have this

Adobe Fireworks Links

• Adobe Fireworks Development Center
• Adobe TV
  • Learn Fireworks CS4: Creating Interactive Prototypes for Reviews
  • Fireworks Tips and Tricks
    • The Complete Design Process
    • Fireworks Tips and Tricks: Information and Interaction Design
    • Fireworks Tips and Tricks: Rapid Prototyping
• FireworksZone.com: All kinda Fireworks stuff!

Subscribe to this blog via RSS or email.
Check out the latest BuzPal t-shirts here!