Jelmer jelmerdemaat

Creating a new element named picture or pic that mirrors the img element would allow for an easier responsive image element to polyfill.

When polyfilling srcN paired with the image element, legacy browsers which don't support srcN would download the image from the src attr and the matching srcN attr. This would result in dual downloads in legacy browser which need the srcN polyfill. These "legacy browsers" are every browser today.

A few ways around this would be to leave the img src attr empty. Or remove it all togher.

From Riloadr docs, Túbal Martín has some concerning notes about leaving the src attr empty on img elements.

Warning!: >Do not set an empty string for the value of src src="".

Make it useful

Install Package Control. For SublimeText 2, paste the following in Terminal:

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

From here on out, use Package Control to install everything. ⌘+Shift+P, then type Install to get a list of installable packages you can 'livesearch through. After installing plugins, they should be running.

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

	.lt-ie9 .top-bar {
	background: #2f2f2f;
	*zoom: 1;
	overflow: visible;
	}
	.lt-ie9 .top-bar:before, .lt-ie9 .top-bar:after {
	content: " ";
	display: table;
	}
	.lt-ie9 .top-bar:after { clear: both; }

	/**
	* CSS Mask (WebKit only)
	*/

	div {
	width: 300px;
	height: 200px;
	background: red;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
	}

	// Just before switching jobs:
	// Add one of these.
	// Preferably into the same commit where you do a large merge.
	//
	// This started as a tweet with a joke of "C++ pro-tip: #define private public",
	// and then it quickly escalated into more and more evil suggestions.
	// I've tried to capture interesting suggestions here.
	//
	// Contributors: @r2d2rigo, @joeldevahl, @msinilo, @_Humus_,
	// @YuriyODonnell, @rygorous, @cmuratori, @mike_acton, @grumpygiant,

	@mixin keyframes( $animationName ) {
	@-webkit-keyframes $animationName {
	@content;
	}
	@-moz-keyframes $animationName {
	@content;
	}
	@-o-keyframes $animationName {
	@content;
	}

	/*

	Minimal Facebook Messenger
	==========================

	1. Make a Fluid (http://fluidapp.com/) instance of https://facebook.com/messages/
	1. a. (You need to buy the paid version of Fluid to modify UserStyles)
	2. Apply the below CSS as a Userstyles stylesheet
	3. Like magic, you can now message without all the cruft of Full Facebook

	<a href="javascript:(function(){window.open('//developers.google.com/speed/pagespeed/insights/?url='+window.location);})()">
	Check page in Google PageSpeed
	</a>

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };