This is a list of advanced JavaScript learning resources from people who responded to this [Tweet][13] and this [Tweet][20].
-
[You Don't Know JS][3]
-
[Frontend Masters courses by Kyle Simpson][12]
-
[@mpjme][6]'s [YouTube videos][5]
Jeremy Keith adactio
rosemulazada
/ script.js
Last active
December 3, 2024 16:18
SCALABLE: Save form data to localStorage and auto-complete on refresh
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 = {}; |
amysimmons
/ advanced-js-resources.md
Last active
December 9, 2024 07:43
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*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"], |
joshje
/ fontloading.html
Created
October 30, 2012 11:36
Load Fontdeck fonts asynchronously with hidden text timeout
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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]; |
eirikbacker
/ addEventListener-polyfill.js
Created
June 3, 2012 19:30
addEventListener polyfill for IE6+
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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} |
emilbjorklund
/ breakpoints_via_css.html
Created
April 24, 2012 16:03
Width detection via sneaky CSS rules
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 */ |
Wilto
/ respimg.md
Created
March 22, 2012 15:45
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 file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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: | |
vasilisvg
/ responsive-context-images.html
Created
September 7, 2011 10:50
Responsive context aware images without cookies or server logic
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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) | |
| --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * 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> |
NewerOlder