Games, Programming, Web
Web
Essential JavaScript links
Jul 2nd
This is a continuously updated list of JavaScript articles and resources that I recommend to other Amazon developers.
- 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
Essential CSS links
Jun 13th
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
Getting started with Ruby on Rails
Apr 3rd
These are some of the tutorials and guides I’ve found most helpful while picking up Ruby on Rails 3.
Ruby language:
- http://strugglingwithruby.blogspot.com/2008/11/contents-page.html
- http://www.zenspider.com/Languages/Ruby/QuickRef.html
Installing Rails on Windows:
Best “my first app” walk-through:
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:
Get Chrome “Side Tabs” back (kind of)
Mar 13th
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.
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.
Understanding WebKit composite layers and iOS Safari performance
Jul 24th
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.
HTML5 DOM and CSS3 performance
Jul 16th
I ran across an awesome presentation by Paul Irish discussing DOM and CSS3 performance issues:
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
New Firebug feature: console.timeStamp
Jul 14th
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.
Optimal Apache compression and expire settings
Mar 20th
Below are compression and expiration settings for Apache that I’ve found optimal for StepMania. You can paste them into your .htaccess file.
- 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>
Rules for optimal web site performance
Nov 13th
I’ve been working to improve the performance a large site at Amazon. Steve Souders has written two excellent books that explain browser/http best practices. A few of the rules were new to me and very helpful (flushing/mod_deflate settings, different browser techniques to defer Javascript). The important take-away is that only a small fraction of typical page load time is bottlenecked by the server generation of a page.
| High Performance Web Sites (companion site)
|
Even Faster Web Sites (companion site)
|
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.
Free year of EC2 hosting on AWS
Oct 22nd
I put together my own co-located server for ChartPT, and I’ve been regretting it more and more each time AWS releases new features and drops prices. They just announced a new Free tier today.
- 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).
