paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Rich-Harris

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

sergejmueller

Prolog

Google Chrome Developers says:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2

TTF to WOFF2 converting

• http://www.fontsquirrel.com/tools/webfont-generator

necolas

/*
 * Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
 * Better handling of scripts without supplied ids.
 *
 * N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
 */

(function(doc, script) {
    var js, 
        fjs = doc.getElementsByTagName(script)[0],

wesbos

320
321
322
323
324
325
326
327
328
329

scottjehl

/*
  * Normalized hide address bar for iOS & Android
  * (c) Scott Jehl, scottjehl.com
  * MIT License
*/
(function( win ){
	var doc = win.document;
	
	// If there's a hash, or addEventListener is undefined, stop here
	if( !location.hash && win.addEventListener ){

remy

/**
 * Note that this script is intended to be included at the *end* of the document, before </body>
 */ 
(function (window, document) {
if ('open' in document.createElement('details')) return; 
 
// made global by myself to be reused elsewhere
var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {

bavington

// Creare's 'Implied Consent' EU Cookie Law Banner v:2.4
// Conceived by Robert Kent, James Bavington & Tom Foyster
 
var dropCookie = true;                      // false disables the Cookie, allowing you to style the banner
var cookieDuration = 14;                    // Number of days before the cookie expires, and the banner reappears
var cookieName = 'complianceCookie';        // Name of our cookie
var cookieValue = 'on';                     // Value of cookie
 
function createDiv(){
    var bodytag = document.getElementsByTagName('body')[0];

roddds

To everyone who got here through Twitter or Facebook or Hacker News or whatever: THIS IS NOT ME.

The "Me" in this transcript is @raddevon, who shared his story first on reddit.

---

List of incompetent jackasses who can't check a source if their lives depended on it:

• geek.com
• nasdaq.com
• craveonline.com

alanhogan

$sprites: sprite-map("sprites/*.png");
$sprites-retina: sprite-map("sprites-retina/*.png");

@mixin sprite-background($name) {
  background-image: sprite-url($sprites);
  background-position: sprite-position($sprites, $name);
  background-repeat: no-repeat;
  display: block;
  height: image-height(sprite-file($sprites, $name));
  width: image-width(sprite-file($sprites, $name));