SlideShare a Scribd company logo
1 of 13
Download to read offline
FRONTEERS ’10
                           21 oktober — Netlash — Johan Ronsse




Thursday 2 December 2010
What did I learn?


Thursday 2 December 2010
Google Chrome Frame for IE
                           installable without administrator
                           access on XP
                           Landed in Chrome trunk




Thursday 2 December 2010
Fig 1: actual error encountered on almost any Netlash project




                                         JSLint
                           Javascript validation: less mistakes?
Thursday 2 December 2010
Thursday 2 December 2010
Smush.it
                            Make PNGs smaller
                           (But not so much: worth it if automated?)



Thursday 2 December 2010
Use Google’s CDN for performance
                                      Adjusted code from HTML5 boilerplate


             {* Grab Google CDN's jQuery and jQuery UI. fall back to local if necessary *}
             <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
             jquery/1.4.2/jquery.min.js"></script>
             <script type="text/javascript">!window.jQuery && document.write('<script
             src="/modules/core/js/jquery/jquery-1.4.2.min.js" type="text/javacript"></
             script>')</script>

             <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
             jqueryui/1.8.2/jquery-ui.min.js"></script>
             <script type="text/javascript">!window.jQuery && document.write('<script
             src="/modules/core/js/jquery-ui.js" type="text/javacript"></script>')</
             script>




Thursday 2 December 2010
To summarize, if you worry about
                           performance, don't use conditional
                           comments.
                                                Stoyan Stefanov
                                                                phpied.com




Thursday 2 December 2010
Empty conditional comments = non-blocking


     <html lang="{$LANG}">
     <head>
         <!--[if IE]><![endif]-->
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />




                           (Also note: stepping away from IE=IE7, always use latest version. Use Chrome frame if available. Advance the web!)
                                              http://www.phpied.com/conditional-comments-block-downloads/


Thursday 2 December 2010
Better: don’t include files in conditional comments at all
                                                       Code from HTML5 boilerplate




                           <!--[if    lt IE 7 ]> <body class="ie6">                    <![endif]-->
                           <!--[if    IE 7 ]>    <body class="ie7">                    <![endif]-->
                           <!--[if    IE 8 ]>    <body class="ie8">                    <![endif]-->
                           <!--[if    IE 9 ]>    <body class="ie9">                    <![endif]-->
                           <!--[if    (gt IE 9)|!(IE)]><!--> <body>                    <!--<![endif]-->




                              http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Thursday 2 December 2010
-webkit-line-clamp

                           <p style="
                              overflow : hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;
                           ">
                              WebKit Browsers will clamp the number of lines
                              in this paragraph to 2. Lorem ipsum dolor sit amet,
                              consectetur adipisicing elit, sed do eiusmod tempor
                           </p>




                                   http://dropshado.ws/post/1015351370/webkit-line-clamp

Thursday 2 December 2010
Questions?



Thursday 2 December 2010
johan@johanronsse.be
                           http://www.netlash.com



Thursday 2 December 2010

More Related Content

What's hot

Cookie & Session In ASP.NET
Cookie & Session In ASP.NETCookie & Session In ASP.NET
Cookie & Session In ASP.NET
ShingalaKrupa
 
Iniciar un servicio__start_service_linux
Iniciar un servicio__start_service_linuxIniciar un servicio__start_service_linux
Iniciar un servicio__start_service_linux
James Jara
 
Firefox 3.1 in 3.1 minutes
Firefox 3.1 in 3.1 minutesFirefox 3.1 in 3.1 minutes
Firefox 3.1 in 3.1 minutes
Thomas Bassetto
 
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Mario Heiderich
 
HTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the UglyHTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the Ugly
Mario Heiderich
 
Cookies: HTTP state management mechanism
Cookies: HTTP state management mechanismCookies: HTTP state management mechanism
Cookies: HTTP state management mechanism
Jivan Nepali
 

What's hot (20)

Banquet 36
Banquet 36Banquet 36
Banquet 36
 
Azure - The Next Frontier
Azure - The Next FrontierAzure - The Next Frontier
Azure - The Next Frontier
 
Tips Menulis Kode yang Konsisten di JavaScript: Metode ESLint! - Dimas maulan...
Tips Menulis Kode yang Konsisten di JavaScript: Metode ESLint! - Dimas maulan...Tips Menulis Kode yang Konsisten di JavaScript: Metode ESLint! - Dimas maulan...
Tips Menulis Kode yang Konsisten di JavaScript: Metode ESLint! - Dimas maulan...
 
Weblogposts and Metadata
Weblogposts and MetadataWeblogposts and Metadata
Weblogposts and Metadata
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Introduction to node.js
Introduction to  node.jsIntroduction to  node.js
Introduction to node.js
 
Mang may tinh
Mang may tinhMang may tinh
Mang may tinh
 
Cookie & Session In ASP.NET
Cookie & Session In ASP.NETCookie & Session In ASP.NET
Cookie & Session In ASP.NET
 
OPTIMERA STHLM! Isac Lagerblad
OPTIMERA STHLM! Isac LagerbladOPTIMERA STHLM! Isac Lagerblad
OPTIMERA STHLM! Isac Lagerblad
 
Iniciar un servicio__start_service_linux
Iniciar un servicio__start_service_linuxIniciar un servicio__start_service_linux
Iniciar un servicio__start_service_linux
 
Intro to HTML 5
Intro to HTML 5Intro to HTML 5
Intro to HTML 5
 
Firefox 3.1 in 3.1 minutes
Firefox 3.1 in 3.1 minutesFirefox 3.1 in 3.1 minutes
Firefox 3.1 in 3.1 minutes
 
Let s Enjoy Node.js
Let s Enjoy Node.jsLet s Enjoy Node.js
Let s Enjoy Node.js
 
Jenkins 17 IL - JavaScript CI/CD
Jenkins 17 IL - JavaScript CI/CDJenkins 17 IL - JavaScript CI/CD
Jenkins 17 IL - JavaScript CI/CD
 
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
 
ECMAScript 6 from an Attacker's Perspective - Breaking Frameworks, Sandboxes,...
ECMAScript 6 from an Attacker's Perspective - Breaking Frameworks, Sandboxes,...ECMAScript 6 from an Attacker's Perspective - Breaking Frameworks, Sandboxes,...
ECMAScript 6 from an Attacker's Perspective - Breaking Frameworks, Sandboxes,...
 
HTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the UglyHTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the Ugly
 
谁在使用Memcahed
谁在使用Memcahed谁在使用Memcahed
谁在使用Memcahed
 
Mozilla
MozillaMozilla
Mozilla
 
Cookies: HTTP state management mechanism
Cookies: HTTP state management mechanismCookies: HTTP state management mechanism
Cookies: HTTP state management mechanism
 

Similar to Wolf fronteers 2010

Web UI performance tuning
Web UI performance tuningWeb UI performance tuning
Web UI performance tuning
Andy Pemberton
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Tuning web performance
Tuning web performanceTuning web performance
Tuning web performance
George Ang
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web Performance
Eric ShangKuan
 

Similar to Wolf fronteers 2010 (20)

Web UI performance tuning
Web UI performance tuningWeb UI performance tuning
Web UI performance tuning
 
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpOptimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Creative Web 01 - Introduction to the web & web development
Creative Web 01 - Introduction to the web & web developmentCreative Web 01 - Introduction to the web & web development
Creative Web 01 - Introduction to the web & web development
 
Tuning web performance
Tuning web performanceTuning web performance
Tuning web performance
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web Performance
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
 
Gradle como alternativa a maven
Gradle como alternativa a mavenGradle como alternativa a maven
Gradle como alternativa a maven
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
HTML5와 모바일
HTML5와 모바일HTML5와 모바일
HTML5와 모바일
 
Webpack packing it all
Webpack packing it allWebpack packing it all
Webpack packing it all
 
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowPacking it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to now
 
Webpack
Webpack Webpack
Webpack
 
DotNet Cologne 2015 - Windows 10 AppDev, Teil3: Schönes für Entwickler - (Dan...
DotNet Cologne 2015 - Windows 10 AppDev, Teil3: Schönes für Entwickler - (Dan...DotNet Cologne 2015 - Windows 10 AppDev, Teil3: Schönes für Entwickler - (Dan...
DotNet Cologne 2015 - Windows 10 AppDev, Teil3: Schönes für Entwickler - (Dan...
 

More from Johan Ronsse

jQuery for designers
jQuery for designersjQuery for designers
jQuery for designers
Johan Ronsse
 

More from Johan Ronsse (11)

What is Bedrock?
What is Bedrock?What is Bedrock?
What is Bedrock?
 
iOS design: a case study
iOS design: a case studyiOS design: a case study
iOS design: a case study
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfaces
 
Design for developers
Design for developersDesign for developers
Design for developers
 
The jump to freelance
The jump to freelanceThe jump to freelance
The jump to freelance
 
CSS3 now
CSS3 nowCSS3 now
CSS3 now
 
Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/Sass
 
jQuery for designers
jQuery for designersjQuery for designers
jQuery for designers
 
Workflow
WorkflowWorkflow
Workflow
 
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
 
Webdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenWebdesign De Middelmaat Overstijgen
Webdesign De Middelmaat Overstijgen
 

Recently uploaded

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 

Wolf fronteers 2010

  • 1. FRONTEERS ’10 21 oktober — Netlash — Johan Ronsse Thursday 2 December 2010
  • 2. What did I learn? Thursday 2 December 2010
  • 3. Google Chrome Frame for IE installable without administrator access on XP Landed in Chrome trunk Thursday 2 December 2010
  • 4. Fig 1: actual error encountered on almost any Netlash project JSLint Javascript validation: less mistakes? Thursday 2 December 2010
  • 6. Smush.it Make PNGs smaller (But not so much: worth it if automated?) Thursday 2 December 2010
  • 7. Use Google’s CDN for performance Adjusted code from HTML5 boilerplate {* Grab Google CDN's jQuery and jQuery UI. fall back to local if necessary *} <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript">!window.jQuery && document.write('<script src="/modules/core/js/jquery/jquery-1.4.2.min.js" type="text/javacript"></ script>')</script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jqueryui/1.8.2/jquery-ui.min.js"></script> <script type="text/javascript">!window.jQuery && document.write('<script src="/modules/core/js/jquery-ui.js" type="text/javacript"></script>')</ script> Thursday 2 December 2010
  • 8. To summarize, if you worry about performance, don't use conditional comments. Stoyan Stefanov phpied.com Thursday 2 December 2010
  • 9. Empty conditional comments = non-blocking <html lang="{$LANG}"> <head> <!--[if IE]><![endif]--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" /> (Also note: stepping away from IE=IE7, always use latest version. Use Chrome frame if available. Advance the web!) http://www.phpied.com/conditional-comments-block-downloads/ Thursday 2 December 2010
  • 10. Better: don’t include files in conditional comments at all Code from HTML5 boilerplate <!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> <!--[if IE 7 ]> <body class="ie7"> <![endif]--> <!--[if IE 8 ]> <body class="ie8"> <![endif]--> <!--[if IE 9 ]> <body class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]--> http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ Thursday 2 December 2010
  • 11. -webkit-line-clamp <p style=" overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; "> WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </p> http://dropshado.ws/post/1015351370/webkit-line-clamp Thursday 2 December 2010
  • 13. johan@johanronsse.be http://www.netlash.com Thursday 2 December 2010