Anselm Hannemann anselmh

On Feb. 6th, I published a proposal for a simplified <picture> design, in order to make the element accessible to end-users. After mailing list dicussion, the community was asked for a unified solution that doesn't sacrifice any functionality or performance present in original design.

Without breaking compatibility or usability of the current <picture> design, I believe the that we can also support a simplified, declarative model that focuses on use case 3.1, and is easier for end-users and content management systems to suppport. I introduced the unified proposal on Feb. 27th 2013 via the public-html-comments mailing list, and also notified respimg.

In lieu of duplicating all content from [my original proposal](https://gist.github.com/n

Sublime Text Plugins

All Autocomplete
Bower
Editor Config
Emmet
Grunt
Image2Base64
LESS

Setup Mac OS X

I've done the same process every couple years since 2013 (Mountain Lion, Mavericks, High Sierra, Catalina) and I updated the Gist each time I've done it.

I kinda regret for not using something like Boxen (or anything similar) to automate the process, but TBH I only actually needed to these steps once every couple years...

	gifify() {
	if [[ -n "$1" ]]; then
	if [[ $2 == '--good' ]]; then
	ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png
	time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png GIF:- \| gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif
	rm out-static*.png
	else
	ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - \| gifsicle --optimize=3 --delay=3 > $1.gif
	fi
	else

	@mixin retina($ratio: 1.5) {
	$dpi: $ratio * 96;
	$opera-ratio: $ratio * 100;

	@media only screen and (-webkit-min-device-pixel-ratio: #{$ratio}),
	only screen and ( -o-min-device-pixel-ratio: '#{$opera-ratio}/100'),
	only screen and ( min-resolution: #{$dpi}dpi),
	only screen and ( min-resolution: #{$ratio}dppx) {
	@content;
	}

	<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
	RewriteRule (.+)\.(jpe?g\|png)$ $1.webp [T=image/webp,E=accept:1]
	</IfModule>

	<IfModule mod_headers.c>
	Header append Vary Accept env=REDIRECT_accept
	</IfModule>

	Original file:
	Lena.png 512 x 512 Pixel 24 bit Color 386.301 Byte
	The standard for image compression tests.
	Might be highly optimized in some encoders.

	Goal: Get the most quality out of around 56KB.

	Look at http://benediktkastl.de/summary_lena.htm for the images.

	Metrics explained:

	file_put_contents($filename,base64_decode(str_replace(array(
	'data:image/jpeg;base64,',
	'data:image/png;base64,',
	'data:image/gif;base64,',
	),'',$datauri)));

	var tabbableElements = 'a[href], area[href], input:not([disabled]),' +
	'select:not([disabled]), textarea:not([disabled]),' +
	'button:not([disabled]), iframe, object, embed, *[tabindex],' +
	'*[contenteditable]';

	var keepFocus = function (context) {
	var allTabbableElements = context.querySelectorAll(tabbableElements);
	var firstTabbableElement = allTabbableElements[0];
	var lastTabbableElement = allTabbableElements[allTabbableElements.length - 1];

	/**
	* Open external links in new tab/window
	*/

	// All http:// links should open in new tab/window. Internal links are relative.
	var anchors = document.querySelectorAll('a');

	for (var i = 0; i < anchors.length; i++) {
	if (anchors[i].host !== window.location.hostname) {
	anchors[i].setAttribute('target', '_blank');