13
FRONTEERS ’10 21 oktober — Netlash — Johan Ronsse Thursday 2 December 2010

Wolf fronteers 2010

Embed Size (px)

DESCRIPTION

Some things I learned at the 2010 Fronteers conference. Originally an internal Netlash presentation.

Citation preview

Page 1: Wolf fronteers 2010

FRONTEERS ’1021 oktober — Netlash — Johan Ronsse

Thursday 2 December 2010

Page 2: Wolf fronteers 2010

What did I learn?

Thursday 2 December 2010

Page 3: Wolf fronteers 2010

Google Chrome Frame for IE installable without administrator access on XPLanded in Chrome trunk

Thursday 2 December 2010

Page 4: Wolf fronteers 2010

JSLintJavascript validation: less mistakes?

Fig 1: actual error encountered on almost any Netlash project

Thursday 2 December 2010

Page 5: Wolf fronteers 2010

Thursday 2 December 2010

Page 6: Wolf fronteers 2010

Smush.itMake PNGs smaller

(But not so much: worth it if automated?)

Thursday 2 December 2010

Page 7: Wolf fronteers 2010

{* 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>

Use Google’s CDN for performanceAdjusted code from HTML5 boilerplate

Thursday 2 December 2010

Page 8: Wolf fronteers 2010

Stoyan Stefanovphpied.com

To summarize, if you worry about performance, don't use conditional comments.

Thursday 2 December 2010

Page 9: Wolf fronteers 2010

<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" />

Empty conditional comments = non-blocking

http://www.phpied.com/conditional-comments-block-downloads/

(Also note: stepping away from IE=IE7, always use latest version. Use Chrome frame if available. Advance the web!)

Thursday 2 December 2010

Page 10: Wolf fronteers 2010

<!--[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]-->

Better: don’t include files in conditional comments at all

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

Code from HTML5 boilerplate

Thursday 2 December 2010

Page 11: Wolf fronteers 2010

http://dropshado.ws/post/1015351370/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>

-webkit-line-clamp

Thursday 2 December 2010

Page 12: Wolf fronteers 2010

Questions?

Thursday 2 December 2010