Themeroller 2.0: Refactoring for Speed
Upcoming SlideShare
Loading in...5
×
 

Themeroller 2.0: Refactoring for Speed

on

  • 2,724 views

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. ...

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.

Statistics

Views

Total Views
2,724
Views on SlideShare
2,227
Embed Views
497

Actions

Likes
1
Downloads
11
Comments
0

11 Embeds 497

http://dougneiner.com 238
http://feeds.feedburner.com 215
http://speakerrate.com 20
http://www.slideshare.net 13
http://danielchicaiza.es.tl 3
http://hostaljared.es.tl 2
http://theoldreader.com 2
http://www.tumblr.com 1
http://translate.googleusercontent.com 1
http://www.linkedin.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Rule editing: browser differences <br />
  • Rule editing: browser differences <br />
  • Rule editing: browser differences <br />
  • Rule editing: browser differences <br />
  • Rule editing: browser differences <br />
  • Rule editing: browser differences <br />
  • Rule editing: browser differences <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Themeroller 2.0: Refactoring for Speed Themeroller 2.0: Refactoring for Speed Presentation Transcript

  • TWITTER @dougneiner EMAIL doug@pixelgraphics.us TUMBLR http://dougneiner.com WEB http://pixelgraphics.us
  • New Features Pixel Graphic Design Studio
  • New Features ✓ Snow ThemeRoller Pixel Graphic Design Studio
  • New Features ✓ Snow ThemeRoller ✓ Speed Improvements Pixel Graphic Design Studio
  • New Features ✓ Snow ThemeRoller ✓ Speed Improvements ★ Server Image Generation: 40 – 50x faster Pixel Graphic Design Studio
  • New Features ✓ Snow ThemeRoller ✓ Speed Improvements ★ Server Image Generation: 40 – 50x faster ★ Removed ImageMagick Dependency Pixel Graphic Design Studio
  • New Features ✓ Snow ThemeRoller ✓ Speed Improvements ★ Server Image Generation: 40 – 50x faster ★ Removed ImageMagick Dependency ★ Client Image & CSS Generation: Almost Instant Feedback Pixel Graphic Design Studio
  • 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 Pixel Graphic Design Studio
  • 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 Pixel Graphic Design Studio
  • 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 Pixel Graphic Design Studio
  • 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
  • Server Side Image Generation ✓ Removed ImageMagick dependency ★ PHP GD ★ Optipng ✓ Icons: Precompiled Pixel Graphic Design Studio
  • Client Side CSS Generation Pixel Graphic Design Studio
  • Client Side CSS Generation ✓ Use Strategies Pixel Graphic Design Studio
  • Client Side CSS Generation ✓ Use Strategies ★ Inline Style Changes $(".ui-icon").css({ ... }) Pixel Graphic Design Studio
  • Client Side CSS Generation ✓ Use Strategies ★ Inline Style Changes $(".ui-icon").css({ ... }) ★ Rule Editing Pixel Graphic Design Studio
  • Client Side CSS Generation ✓ Use Strategies ★ Inline Style Changes $(".ui-icon").css({ ... }) ★ Rule Editing ★ Style Tags $("head").append("<style ...></style>") Pixel Graphic Design Studio
  • Client Side CSS Generation Pixel Graphic Design Studio
  • Client Side CSS Generation ✓ Templating/Replacement Pixel Graphic Design Studio
  • Client Side CSS Generation ✓ Templating/Replacement ★ Simple Tokens #aaaaaa/*{header.b}*/ normal/*{font.w}*/ Pixel Graphic Design Studio
  • Client Side CSS Generation ✓ Templating/Replacement ★ Simple Tokens #aaaaaa/*{header.b}*/ normal/*{font.w}*/ ★ Same as server replacement Pixel Graphic Design Studio
  • 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
  • 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
  • Client Side CSS Generation $("head #themeroller-stylesheet") .replaceWith( "<style type='text/css' media='screen' id='themeroller-stylesheet'>" + css + "</style>"); Pixel Graphic Design Studio
  • Client Side Image Generation Pixel Graphic Design Studio
  • Client Side Image Generation ✓ New Images Pixel Graphic Design Studio
  • Client Side Image Generation ✓ New Images ★ Stamping: Take an icon template, and change the colors Pixel Graphic Design Studio
  • Client Side Image Generation ✓ New Images ★ Stamping: Take an icon template, and change the colors ★ Layering: Merge a texture with a solid color Pixel Graphic Design Studio
  • 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 Pixel Graphic Design Studio
  • 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
  • Client Side Image Generation ✓ HTML5 Canvas ★ Supported Composite Modes ★ toDataURL ★ Built in PNG support Pixel Graphic Design Studio
  • 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
  • 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
  • http://github.com/ dcneiner/html5-demo
  • 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
  • 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
  • TWITTER @dougneiner EMAIL doug@pixelgraphics.us TUMBLR http://dougneiner.com WEB http://pixelgraphics.us