SlideShare a Scribd company logo
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
       ✓ Use Strategies
            ★ Inline Style Changes
                  $(".ui-icon").css({ ... })

            ★ Rule Editing
            ★ Style Tags
                  $("head").append("<style ...></style>")




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

More Related Content

What's hot

アイドルだって WordPressが好き! ~アイドル公式サイトに見るテーマ実装例~
アイドルだって WordPressが好き! ~アイドル公式サイトに見るテーマ実装例~アイドルだって WordPressが好き! ~アイドル公式サイトに見るテーマ実装例~
アイドルだって WordPressが好き! ~アイドル公式サイトに見るテーマ実装例~
tecking
 
Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standardResponsive images, an html 5.1 standard
Responsive images, an html 5.1 standard
Andrea Verlicchi
 
Power your website with Windows Azure
Power your website with Windows AzurePower your website with Windows Azure
Power your website with Windows Azure
João Pedro Martins
 
2022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.02022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.0
Andrea Verlicchi
 
Images meet Web
Images meet WebImages meet Web
Images meet Web
傑倫 鍾
 
Html5 n css3
Html5 n css3Html5 n css3
Html5 n css3
Jindal Gohil
 
Html5
Html5Html5
The Ring programming language version 1.9 book - Part 49 of 210
The Ring programming language version 1.9 book - Part 49 of 210The Ring programming language version 1.9 book - Part 49 of 210
The Ring programming language version 1.9 book - Part 49 of 210
Mahmoud Samir Fayed
 
The status of living HTML (highlights)
The status of living HTML (highlights)The status of living HTML (highlights)
The status of living HTML (highlights)
ourmaninjapan
 
Html 5
Html 5Html 5
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentation
stephy123123
 
LinkedIn image and video specifications
LinkedIn image and video specifications LinkedIn image and video specifications
LinkedIn image and video specifications
Vanilla Skills
 
JS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-Native
JSFestUA
 
GWT.create 2013: Introduction to GXT
GWT.create 2013: Introduction to GXTGWT.create 2013: Introduction to GXT
GWT.create 2013: Introduction to GXT
niloc132
 

What's hot (14)

アイドルだって WordPressが好き! ~アイドル公式サイトに見るテーマ実装例~
アイドルだって WordPressが好き! ~アイドル公式サイトに見るテーマ実装例~アイドルだって WordPressが好き! ~アイドル公式サイトに見るテーマ実装例~
アイドルだって WordPressが好き! ~アイドル公式サイトに見るテーマ実装例~
 
Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standardResponsive images, an html 5.1 standard
Responsive images, an html 5.1 standard
 
Power your website with Windows Azure
Power your website with Windows AzurePower your website with Windows Azure
Power your website with Windows Azure
 
2022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.02022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.0
 
Images meet Web
Images meet WebImages meet Web
Images meet Web
 
Html5 n css3
Html5 n css3Html5 n css3
Html5 n css3
 
Html5
Html5Html5
Html5
 
The Ring programming language version 1.9 book - Part 49 of 210
The Ring programming language version 1.9 book - Part 49 of 210The Ring programming language version 1.9 book - Part 49 of 210
The Ring programming language version 1.9 book - Part 49 of 210
 
The status of living HTML (highlights)
The status of living HTML (highlights)The status of living HTML (highlights)
The status of living HTML (highlights)
 
Html 5
Html 5Html 5
Html 5
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentation
 
LinkedIn image and video specifications
LinkedIn image and video specifications LinkedIn image and video specifications
LinkedIn image and video specifications
 
JS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-Native
 
GWT.create 2013: Introduction to GXT
GWT.create 2013: Introduction to GXTGWT.create 2013: Introduction to GXT
GWT.create 2013: Introduction to GXT
 

Similar to Themeroller 2.0: Refactoring for Speed

Canvas in html5 - TungVD
Canvas in html5 - TungVDCanvas in html5 - TungVD
Canvas in html5 - TungVD
Framgia Vietnam
 
SharePoint Patterns & Practices - PnP Core and PnP PowerShell SIG - 7th of Oc...
SharePoint Patterns & Practices - PnP Core and PnP PowerShell SIG - 7th of Oc...SharePoint Patterns & Practices - PnP Core and PnP PowerShell SIG - 7th of Oc...
SharePoint Patterns & Practices - PnP Core and PnP PowerShell SIG - 7th of Oc...
SharePoint Patterns and Practices
 
New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3
Jamshid Hashimi
 
Next Steps in Responsive Design
Next Steps in Responsive DesignNext Steps in Responsive Design
Next Steps in Responsive Design
Justin Avery
 
HTML5 for ASP.NET Developers
HTML5 for ASP.NET DevelopersHTML5 for ASP.NET Developers
HTML5 for ASP.NET Developers
Justin Lee
 
PnP Webcast - Introduction to SharePoint Site Designs and Site Scripts
PnP Webcast - Introduction to SharePoint Site Designs and Site ScriptsPnP Webcast - Introduction to SharePoint Site Designs and Site Scripts
PnP Webcast - Introduction to SharePoint Site Designs and Site Scripts
SharePoint Patterns and Practices
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
Responsive WordPress workflow
Responsive WordPress workflowResponsive WordPress workflow
Responsive WordPress workflow
James Bundey
 
Viktor Tsykunov "Microsoft AI platform for every Developer"
Viktor Tsykunov "Microsoft AI platform for every Developer"Viktor Tsykunov "Microsoft AI platform for every Developer"
Viktor Tsykunov "Microsoft AI platform for every Developer"
Lviv Startup Club
 
Back to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static websiteBack to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static website
Yves Goeleven
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
Andy Stratton
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishing
Gilbert Guerrero
 
We All Live in a Yellow (Serverless) Submarine
We All Live in a Yellow (Serverless) SubmarineWe All Live in a Yellow (Serverless) Submarine
We All Live in a Yellow (Serverless) Submarine
FITC
 
Brand Your Community Using Less and Gulp
Brand Your Community Using Less and GulpBrand Your Community Using Less and Gulp
Brand Your Community Using Less and Gulp
shujiui
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith
 
Awesome html with ujs, jQuery and coffeescript
Awesome html with ujs, jQuery and coffeescriptAwesome html with ujs, jQuery and coffeescript
Awesome html with ujs, jQuery and coffeescript
Amir Barylko
 
Drawing images
Drawing imagesDrawing images
Drawing images
MfahamedaThabaseem
 
NZYP Project Casestudy using SilverStripe CMS
NZYP Project Casestudy using SilverStripe CMSNZYP Project Casestudy using SilverStripe CMS
NZYP Project Casestudy using SilverStripe CMS
Cam Findlay
 
Core Web Vitals Optimization for any website, especially WordPress
Core Web Vitals Optimization for any website, especially WordPressCore Web Vitals Optimization for any website, especially WordPress
Core Web Vitals Optimization for any website, especially WordPress
ClementYo
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
Anup Hariharan Nair
 

Similar to Themeroller 2.0: Refactoring for Speed (20)

Canvas in html5 - TungVD
Canvas in html5 - TungVDCanvas in html5 - TungVD
Canvas in html5 - TungVD
 
SharePoint Patterns & Practices - PnP Core and PnP PowerShell SIG - 7th of Oc...
SharePoint Patterns & Practices - PnP Core and PnP PowerShell SIG - 7th of Oc...SharePoint Patterns & Practices - PnP Core and PnP PowerShell SIG - 7th of Oc...
SharePoint Patterns & Practices - PnP Core and PnP PowerShell SIG - 7th of Oc...
 
New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3
 
Next Steps in Responsive Design
Next Steps in Responsive DesignNext Steps in Responsive Design
Next Steps in Responsive Design
 
HTML5 for ASP.NET Developers
HTML5 for ASP.NET DevelopersHTML5 for ASP.NET Developers
HTML5 for ASP.NET Developers
 
PnP Webcast - Introduction to SharePoint Site Designs and Site Scripts
PnP Webcast - Introduction to SharePoint Site Designs and Site ScriptsPnP Webcast - Introduction to SharePoint Site Designs and Site Scripts
PnP Webcast - Introduction to SharePoint Site Designs and Site Scripts
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Responsive WordPress workflow
Responsive WordPress workflowResponsive WordPress workflow
Responsive WordPress workflow
 
Viktor Tsykunov "Microsoft AI platform for every Developer"
Viktor Tsykunov "Microsoft AI platform for every Developer"Viktor Tsykunov "Microsoft AI platform for every Developer"
Viktor Tsykunov "Microsoft AI platform for every Developer"
 
Back to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static websiteBack to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static website
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishing
 
We All Live in a Yellow (Serverless) Submarine
We All Live in a Yellow (Serverless) SubmarineWe All Live in a Yellow (Serverless) Submarine
We All Live in a Yellow (Serverless) Submarine
 
Brand Your Community Using Less and Gulp
Brand Your Community Using Less and GulpBrand Your Community Using Less and Gulp
Brand Your Community Using Less and Gulp
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Awesome html with ujs, jQuery and coffeescript
Awesome html with ujs, jQuery and coffeescriptAwesome html with ujs, jQuery and coffeescript
Awesome html with ujs, jQuery and coffeescript
 
Drawing images
Drawing imagesDrawing images
Drawing images
 
NZYP Project Casestudy using SilverStripe CMS
NZYP Project Casestudy using SilverStripe CMSNZYP Project Casestudy using SilverStripe CMS
NZYP Project Casestudy using SilverStripe CMS
 
Core Web Vitals Optimization for any website, especially WordPress
Core Web Vitals Optimization for any website, especially WordPressCore Web Vitals Optimization for any website, especially WordPress
Core Web Vitals Optimization for any website, especially WordPress
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 

Recently uploaded

20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 

Recently uploaded (20)

20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 

Themeroller 2.0: Refactoring for Speed

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

Editor's Notes

  1. Rule editing: browser differences
  2. Rule editing: browser differences
  3. Rule editing: browser differences
  4. Rule editing: browser differences
  5. Rule editing: browser differences
  6. Rule editing: browser differences
  7. Rule editing: browser differences