- 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
- Using event capturing to improve page load times - delay initialization for as long as possible
- Async JS with Deferreds – Express asynchronous logic concisely
This is a continuously updated list of CSS articles that I recommend to other Amazon developers.
- 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
Installing Rails on Windows:
Best “my first app” walk-through:
Using “remote” to ajaxify links and forms:
“Unobtrusive JS” library that ships with Rails 3:
Use Twitter Bootstrap with Rails:
Thousands of people, including myself, cried out in terror when Google removed the “Side Tabs” from Chrome. I tried for one month to settle into Firefox + Firebug + Tree Style Tabs as my main browser, but that combination is nowhere near is snappy as Chrome for my workload.
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.
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.
I’ve made a video showing how Webkit handles animating of CSS3 transforms very differently from animating of CSS position (left, top) or margin. The are several different conditions that will trigger the browser to use a “composite layer” which minimizes repaints and allows for hardware-accelerated composting. The benefits are especially dramatic in iOS Safari.
- 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:
Firebug recently added an awesome new API; console.timeStamp lets you to create named “events” in the Net panel:
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.
|High Performance Web Sites
|Even Faster Web Sites
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).