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.
- 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)
(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.
- 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.
- 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).
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)
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.
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:
I know this is going to look like a Yahoo! love fest, but here are some links for you:
- Introducing YUI – The Rising Giant: From smashingmagazine.com
- The YUI Library (Yahoo! Course @NCU): From slideshare.net
- 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
- 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
- FireworksZone.com: All kinda Fireworks stuff!