Jeremy Keith adactio

Advanced JavaScript Learning Resources

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

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

	// 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 = {};

	/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"],

	<!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];

	//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>
	<!--[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 */

	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>
 <!--
 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)
  -->

	/*
	* 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>