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)

Some Highlights
(in somewhat chronological order)

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:

Yahoo! Links:

Off-Yahoo! Links:

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

AddThis Social Bookmark Button AddThis Feed Button
Subscribe to this blog via RSS or email.
Check out the latest BuzPal t-shirts here!

Advertisements

5 Responses to “Geek Meet Stockholm With Chris Heilmann of Yahoo”

  1. A few more handy links:

    Cheat Sheets for Front-end Web Developers
    http://sixrevisions.com/resources/cheat_sheets_web_developer/

    15 Tools to Help You Develop Faster Web Pages
    http://sixrevisions.com/tools/faster_web_page/

    Optimizing Page Load Time
    http://www.die.net/musings/page_load_time/

    Best Text Editors
    http://lifehacker.com/385929/best-text-editors

    Reminds me to ask, What is your favorite text editor? What is your favorite IDE, if you use one?

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: