Doug has been working on the new version of ThemeRoller for the jQuery UI site. In his talk, Doug aims to give you a peak of the code and show off some of the speed improvements that are being made. The new version of ThemeRoller is being built on top of the latest technologies like Canvas and HTML5. You will see how you can use client side technologies to reduce server load and maximize the speed of your app.

2. New Features
✓ Snow ThemeRoller
✓ Speed Improvements
★ Server Image Generation: 40 – 50x faster
★ Removed ImageMagick Dependency
★ Client Image & CSS Generation:
Almost Instant Feedback
✓ JSON Structure: Nested, Overridable
✓ Updated Bookmarklet
★ More Browser Support
★ Offline Support
Pixel Graphic Design Studio

3. Server Side Image Generation
✓ Removed ImageMagick dependency
★ PHP GD
★ Optipng
✓ Icons: Precompiled
Pixel Graphic Design Studio

4. Client Side CSS Generation
✓ Use Strategies
★ Inline Style Changes
$(".ui-icon").css({ ... })
★ Rule Editing
★ Style Tags
$("head").append("<style ...></style>")
Pixel Graphic Design Studio

5. Client Side CSS Generation
✓ Templating/Replacement
★ Simple Tokens
#aaaaaa/*{header.b}*/
normal/*{font.w}*/
★ Same as server replacement
Pixel Graphic Design Studio

6. Client Side CSS Generation
var file = $.Themeroller.CSS[version],
tokens = base.to_tokens(),
regex = /s+S+/*{([^}*/]+)}*//gi,
css = file.replace(regex, function(m,k,v){
return ' ' + tokens[k];
});
Pixel Graphic Design Studio

7. Client Side CSS Generation
var tokens = [
"header.bg.c" = "#fff",
"header.bg.i" = "#a00",
"header.bg.b" = "#00a",
"header.bg.tx.repeat" = "repeat-x"
...
];
Pixel Graphic Design Studio

8. Client Side CSS Generation
$("head #themeroller-stylesheet")
.replaceWith(
"<style type='text/css'
media='screen'
id='themeroller-stylesheet'>"
+ css +
"</style>");
Pixel Graphic Design Studio

9. Client Side Image Generation
✓ New Images
★ Stamping: Take an icon template, and change the colors
★ Layering: Merge a texture with a solid color
✓ Application to CSS
★ Needed the image in a URL format
Pixel Graphic Design Studio

10. Client Side Image Generation
✓ HTML5 Canvas
★ Supported Composite Modes
★ toDataURL
★ Built in PNG support
Pixel Graphic Design Studio

11. HTML5 Canvas Workflow
1. Load the template image
2. Create a canvas
3. Size the canvas (Clears existing content)
4. Set the composite mode and opacity
5. Draw the template image
6. Return the dataURL
7. Add the dataURL to the CSS
Pixel Graphic Design Studio

12. Creating the Icons
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
function makeImage( color ){
canvas.width = 100;
canvas.height = 100;
canvas.fillStyle = color;
canvas.fillRect(0, 0, 100, 100);
context.globalCompositeOperation = "destination-out";
context.drawImage(img, 0, 0);
return canvas.toDataURL('image/png')
}
Pixel Graphic Design Studio

13. http://github.com/dcneiner/html5-demo

14. Fallback Support
✓ Build the support on the server first
✓ Work out a clean URL strategy
✓ Use feature detection to test for Canvas support
✓ Since DataURL is a URL, you can use a real path and the
base64 data interchangeably.
Pixel Graphic Design Studio

15. Send as Little Data as Needed
✓ Send JSON, not HTML, wherever possible
✓ Provide overrides instead of full data wherever possible
★ You can override any default theme
★ Merge on the server
Pixel Graphic Design Studio

16. TWITTER @dougneiner
EMAIL doug@pixelgraphics.us
TUMBLR http://dougneiner.com
WEB http://pixelgraphics.us