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

imjasonh

* {
    font-size: 12pt;
    font-family: monospace;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: black;
    cursor: default;
}

schilke

<?php
// This is the cleaner code per request of a thread in the LinkedIn group "WordPress"

// ...

// register and enqueue loadCSS
function load_scripts_and_styles() {
    
    // register loadCSS
    wp_register_script( 'load-css-async', get_stylesheet_directory_uri() . '/path/to/js/loadCSS.js', array(), '', false );

dmolsen

Earlier today @_beneverard tweeted about a common problem with managing style guides. He said:

For those who have created extensive pattern libraries, how do you go about using that CSS in a project? Manually copy it across?

I started thinking about how we could encourage this in Pattern Lab. A lot of my recent work on PL has revolved around creating packages for Composer and it seemed like this was a similar problem. After playing around I'm curious if folks would think the following process was an onerous workflow. Let's say we're going to track our styles and grunt/gulp uses public/styles/ as a target directory:

1. Delete all files under public/styles
2. Commit the deletion
3. Add public/styles to .gitignore
4. Create a new repo just for your production styles

teybannerman

http://api-public.addthis.com/url/shares.json?url=http%3A%2F%2Fwww.twitter.com

gruber

#!/usr/bin/env perl
#
# http://daringfireball.net/2007/03/javascript_bookmarklet_builder

use strict;
use warnings;
use URI::Escape qw(uri_escape_utf8);
use open  IO  => ":utf8",		# UTF8 by default
		  ":std";				# Apply to STDIN/STDOUT/STDERR

dergachev

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

johntyree

#!/usr/bin/env sh

# Download lists, unpack and filter, write to stdout
curl -s https://www.iblocklist.com/lists.php \
  | sed -n "s/.*value='\(http:.*=bt_.*\)'.*/\1/p" \
  | xargs wget -O - \
  | gunzip \
  | egrep -v '^#'

liamcurry

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

jlong

var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"