Jeremy Keith adactio

Adaptive Image Element

This is an unofficial draft spec, not formally endorsed by the WHATWG. It is suitable only for reviewing the details of the proposed element.

This is a list of advanced JavaScript learning resources from people who responded to this [Tweet][13] and this [Tweet][20].

	/*
	* anchor-include pattern for already-functional links that work as a client-side include
	* Copyright 2011, Scott Jehl, scottjehl.com
	* Dual licensed under the MIT
	* Idea from Scott Gonzalez
	* to use, place attributes on an already-functional anchor pointing to content
	* that should either replace, or insert before or after that anchor
	* after the page has loaded
	* Replace: <a href="..." data-replace="articles/latest/fragment">Latest Articles</a>
	* Before: <a href="..." data-before="articles/latest/fragment">Latest Articles</a>

 <!doctype html>
 <!--
 WARNING!
 You probably shouldn't use this technique since images never show up
 if the script isn't loaded for one reason or another. Some reasons:
 - The content is viewed using a RSS reader
 - The content is viewed with a read-it-later service
 - The user has a flaky connection (hotel wifi, Dutch train, etc)
  -->

	Dear soon-to-be-former user,

	We've got some fantastic news! Well, it's great news for us anyway. You, on
	the other hand, are fucked.

	We've just been acquired by:

	[ ] Facebook
	[ ] Google
	[ ] Twitter

	<!DOCTYPE html>
	<!--[if IE 8]> <html lang="sv-SE" class="no-js ie8"> <![endif]-->
	<!--[if gt IE 8]><!--> <html lang="sv-SE" class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="UTF-8">
	<title>Breakpoint detection test</title>
	<style type="text/css" media="screen">
	@media screen and (min-width: 320px) {
	#page:after {
	content: 'smallest'; /* represent the current width-bracket */

	//addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
	(function(win, doc){
	if(win.addEventListener)return; //No need to polyfill

	function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}
	function addEvent(on, fn, self){
	return (self = this).attachEvent('on' + on, function(e){
	var e = e \|\| win.event;
	e.preventDefault = e.preventDefault \|\| function(){e.returnValue = false}
	e.stopPropagation = e.stopPropagation \|\| function(){e.cancelBubble = true}

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script>
	function async(url) {
	var a = document.createElement('script');
	a.async = true;
	a.src = url;
	var b = document.getElementsByTagName('script')[0];

	/fuck garbage/
	a[href^="http://bzfd.it"],
	a[href^="http://buzzfeed.com"],
	a[href^="http://www.buzzfeed.com"],
	a[href^="http://huff.to"],
	a[href^="http://huffingtonpost.com"],
	a[href^="http://www.huffingtonpost.com"],
	a[href^="http://gaw.kr"],
	a[href^="http://gawker.com"],
	a[href^="http://www.gawker.com"],

	// With the help of Jeremy Keith, I was able to create a fully scalable code sample that you can copy-paste into your project.
	// It will save the user input value on blur, this includes radio buttons, checkboxes and date inputs besides regular text/number inputs.
	// The only condition is that you give the form element on your page a data-attribute of data-form-topic="foo".
	// This code snippet saves the data-attribute as the key to the localStorage, and the value of it will be an object with key/value pairs of the respective inputs name and value.
	// Please refer to this gist somewhere in your code if you use it :)
	// Happy coding!

	// VARIABLE DECLARATIONS
	// objects
	let savedData = {};