• MicroJS – a directory of JavaScript micro libraries
• PhantomJS – headless, scriptable WebKit for unit, integration, and load testing
• 10 things I learned from the jQuery source - a mini code walkthrough of jQuery
• When Automatic Semicolon Insertion goes bad
• ==, ===, and type coercion
• Guide to authoring jQuery plugins - good patterns and anti-patterns for jQuery plugins
• The JavaScript style guide used by jQuery Core - a short and sweet style guide
• Using event capturing to improve page load times - delay initialization for as long as possible
• Async JS with Deferreds – Express asynchronous logic concisely

• CSS3 units and their uses
• CSS selector specificity - determines the order in which rules are applied to an element
• SASS vs LESS throwdown - how to choose a CSS preprocessor
• Sassy Mother Effing Text Shadow - behold the power of SASS
• Twitter Bootstrap – lightweight, full-featured, componentized CSS library with awesome documentation
• SASS - popular CSS preprocessor with great documentation
• Compass home - a library full of reusable CSS best-practices, built on SASS
• When to use !important
• WebKit accelerated rendering and compositing - an explanation of WebKit’s RenderLayer tree and z-index tree
• Crazy Town – avoiding overly-specific selectors

Ruby language:

• http://strugglingwithruby.blogspot.com/2008/11/contents-page.html
• http://www.zenspider.com/Languages/Ruby/QuickRef.html

Installing Rails on Windows:

• http://railsinstaller.org/

Best “my first app” walk-through:

• http://guides.rubyonrails.org/getting_started.html

Using “remote” to ajaxify links and forms:

• http://www.alfajango.com/blog/rails-3-remote-links-and-forms/
• http://www.alfajango.com/blog/rails-3-remote-links-and-forms-data-type-with-jquery/

“Unobtrusive JS” library that ships with Rails 3:

• http://www.slideshare.net/philcrissman/ujs-in-rails-3-6775992
• http://www.alfajango.com/blog/rails-jquery-ujs-now-interactive/

Use Twitter Bootstrap with Rails:

• http://railscasts.com/episodes/328-twitter-bootstrap-basics

My workaround has been to use the most recent build of Chromium (Chrome’s open-source alter ego) that still contained the Side Tabs feature. Because there are no security updates available for this version, I use NoScript and whitelist scripting on sites as needed.

Chromium 15.0.862.0 – Windows: chrome-win32.zip, Mac: chrome-mac.zip

A major advantage of using Chromium instead of an old version of Chrome that has Side Tabs is that Chromium can be run side-by-side with the latest version of Chrome.

• Try the example and compare the behavior in your browser’s inspection tools
• A tweaked example for iOS that makes the performance difference very obvious: chrisdanford.com/public/transform/

This Chromium document explaining composite layers says that the following conditions all trigger a separate composite layer:

• Layer has 3D or perspective transform CSS properties
• Layer is used by video element using accelerated video decoding
• Layer is used by a canvas element with a 3D context
• Layer uses a CSS animation for its opacity or uses an animated webkit transform
• Layer has a descendant that has a compositing layer
• Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer)

See Rich Bradshaw’s awesome CSS3/Transforms page for some great examples.

The video: http://www.youtube.com/watch?v=q_O9_C2ZjoA
The slides: http://dl.dropbox.com/u/39519/talks/gperf/index.html
The blog post: http://paulirish.com/2011/dom-html5-css3-performance/

The top tips that were new to me:

• how to not trigger unnecessary layout/reflow
• iOS Safari: get massive compositing performance improvement by using CSS3′s translate3d(0,0,0) instead of translate(0,0)
• jsperf.com to conduct JavaScript profiling experiments: example

This technique requires manual instrumentation and isn’t as detailed as the Timeline panel in Chrome/Safari or a heavy-weight tool like dynaTrace, but it’s a nice, simple, uncluttered view compared to those other tools.

I used it today on a machine where I couldn’t install dynaTrace, I’ll surely be using it again. Unfortunately it isn’t supported in Firefox 3.6 and older.

• Don’t mess with PHP’s ob_gzhandler.  The settings below enable compression at the Apache module level, are the cleanest way to handle compression of non-PHP types, and are better performing to boot.
• If your PHP application has a option for compression (it’ll be using ob_gzhander), turn that off in favor of these settings.
• Web-Sniffer is useful for testing whether your compression and cache-control settings are taking effect. It’s also useful for troubleshooting HTTP error responses that Firefox and Chrome hide with pretty error pages.

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-httpd-eruby
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On

ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType audio/x-wav "access plus 1 month"
ExpiresByType audio/mpeg "access plus 1 month"
ExpiresByType video/mpeg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/quicktime "access plus 1 month"
ExpiresByType video/x-ms-wmv "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"

ExpiresByType text/css "access plus 1 hour"
ExpiresByType text/javascript "access plus 1 hour"
</IfModule>

My first round of optimizations just went into production and our metric that measures “time from click until critical feature shows up in the browser” dropped from 5.25s to 3.5s. It’s neat to multiply the savings and see that many weeks of end-user browser load time are saved each day.

• 750 hours of Amazon EC2 Linux Micro Instance usage (613 MB of memory and 32-bit and 64-bit platform support) – enough hours to run continuously each month*
• 750 hours of an Elastic Load Balancer plus 15 GB data processing*
• 10 GB of Amazon Elastic Block Storage, plus 1 million I/Os, 1 GB of snapshot storage, 10,000 snapshot Get Requests and 1,000 snapshot Put Requests*
• 5 GB of Amazon S3 storage, 20,000 Get Requests, and 2,000 Put Requests*
• 30 GB per of internet data transfer (15 GB of data transfer “in” and 15 GB of data transfer “out” across all services except Amazon CloudFront)*
• 25 Amazon SimpleDB Machine Hours and 1 GB of Storage**
• 100,000 Requests of Amazon Simple Queue Service**
• 100,000 Requests, 100,000 HTTP notifications and 1,000 email notifications for Amazon Simple Notification Service**

I use S3 and CloudFront as an edge cache for StepMania.com.  I’m waiting just a little longer for the transfer costs to drop so that I can move all of the file downloads to S3 (my current S3 bill would be ~$500/mo according to the AWS calculator).