Your SlideShare is downloading. ×
0
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
...
New Features
       ✓ Snow ThemeRoller
       ✓ Speed Improvements
            ★ Server Image Generation: 40 – 50x faster
...
New Features
       ✓ Snow ThemeRoller
       ✓ Speed Improvements
            ★ Server Image Generation: 40 – 50x faster
...
New Features
       ✓ Snow ThemeRoller
       ✓ Speed Improvements
            ★ Server Image Generation: 40 – 50x faster
...
New Features
       ✓ Snow ThemeRoller
       ✓ Speed Improvements
            ★ Server Image Generation: 40 – 50x faster
...
New Features
       ✓ Snow ThemeRoller
       ✓ Speed Improvements
            ★ Server Image Generation: 40 – 50x faster
...
New Features
       ✓ Snow ThemeRoller
       ✓ Speed Improvements
            ★ Server Image Generation: 40 – 50x faster
...
Server Side Image Generation
       ✓ Removed ImageMagick dependency
            ★ PHP GD
            ★ Optipng
       ✓ I...
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(...
Client Side CSS Generation
       ✓ Use Strategies
            ★ Inline Style Changes
                  $(".ui-icon").css(...
Upcoming SlideShare
Loading in...5
×

Themeroller 2.0: Refactoring for Speed

1,972

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,972
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide












  • Rule editing: browser differences
  • Rule editing: browser differences
  • Rule editing: browser differences
  • Rule editing: browser differences
  • Rule editing: browser differences
  • Rule editing: browser differences
  • Rule editing: browser differences















  • Transcript of "Themeroller 2.0: Refactoring for Speed"

    1. 1. TWITTER @dougneiner EMAIL doug@pixelgraphics.us TUMBLR http://dougneiner.com WEB http://pixelgraphics.us
    2. 2. New Features Pixel Graphic Design Studio
    3. 3. New Features ✓ Snow ThemeRoller Pixel Graphic Design Studio
    4. 4. New Features ✓ Snow ThemeRoller ✓ Speed Improvements Pixel Graphic Design Studio
    5. 5. New Features ✓ Snow ThemeRoller ✓ Speed Improvements ★ Server Image Generation: 40 – 50x faster Pixel Graphic Design Studio
    6. 6. New Features ✓ Snow ThemeRoller ✓ Speed Improvements ★ Server Image Generation: 40 – 50x faster ★ Removed ImageMagick Dependency Pixel Graphic Design Studio
    7. 7. 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
    8. 8. 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
    9. 9. 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
    10. 10. 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
    11. 11. 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
    12. 12. Server Side Image Generation ✓ Removed ImageMagick dependency ★ PHP GD ★ Optipng ✓ Icons: Precompiled Pixel Graphic Design Studio
    13. 13. Client Side CSS Generation Pixel Graphic Design Studio
    14. 14. Client Side CSS Generation ✓ Use Strategies Pixel Graphic Design Studio
    15. 15. Client Side CSS Generation ✓ Use Strategies ★ Inline Style Changes $(".ui-icon").css({ ... }) Pixel Graphic Design Studio
    16. 16. Client Side CSS Generation ✓ Use Strategies ★ Inline Style Changes $(".ui-icon").css({ ... }) ★ Rule Editing Pixel Graphic Design Studio
    17. 17. Client Side CSS Generation ✓ Use Strategies ★ Inline Style Changes $(".ui-icon").css({ ... }) ★ Rule Editing ★ Style Tags $("head").append("<style ...></style>") Pixel Graphic Design Studio
    18. 18. Client Side CSS Generation Pixel Graphic Design Studio
    19. 19. Client Side CSS Generation ✓ Templating/Replacement Pixel Graphic Design Studio
    20. 20. Client Side CSS Generation ✓ Templating/Replacement ★ Simple Tokens #aaaaaa/*{header.b}*/ normal/*{font.w}*/ Pixel Graphic Design Studio
    21. 21. Client Side CSS Generation ✓ Templating/Replacement ★ Simple Tokens #aaaaaa/*{header.b}*/ normal/*{font.w}*/ ★ Same as server replacement Pixel Graphic Design Studio
    22. 22. 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
    23. 23. 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
    24. 24. Client Side CSS Generation $("head #themeroller-stylesheet") .replaceWith( "<style type='text/css' media='screen' id='themeroller-stylesheet'>" + css + "</style>"); Pixel Graphic Design Studio
    25. 25. Client Side Image Generation Pixel Graphic Design Studio
    26. 26. Client Side Image Generation ✓ New Images Pixel Graphic Design Studio
    27. 27. Client Side Image Generation ✓ New Images ★ Stamping: Take an icon template, and change the colors Pixel Graphic Design Studio
    28. 28. 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
    29. 29. 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
    30. 30. 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
    31. 31. Client Side Image Generation ✓ HTML5 Canvas ★ Supported Composite Modes ★ toDataURL ★ Built in PNG support Pixel Graphic Design Studio
    32. 32. 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
    33. 33. 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
    34. 34. http://github.com/ dcneiner/html5-demo
    35. 35. 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
    36. 36. 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
    37. 37. TWITTER @dougneiner EMAIL doug@pixelgraphics.us TUMBLR http://dougneiner.com WEB http://pixelgraphics.us
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×