Skip to content

Instantly share code, notes, and snippets.

View adactio's full-sized avatar

Jeremy Keith adactio

View GitHub Profile
@joshje
joshje / fontloading.html
Created October 30, 2012 11:36
Load Fontdeck fonts asynchronously with hidden text timeout
<!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];
@wolverina
wolverina / user-stylesheet.css
Created October 26, 2013 15:20
Hide the worst of the web
/*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"],
@emilbjorklund
emilbjorklund / breakpoints_via_css.html
Created April 24, 2012 16:03
Width detection via sneaky CSS rules
<!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 */
@vasilisvg
vasilisvg / responsive-context-images.html
Created September 7, 2011 10:50
Responsive context aware images without cookies or server logic
<!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)
-->

Adaptive Image Element

Author:

Mat Marquis

Status of this Document

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

Table of Contents

@panicsteve
panicsteve / gist:1641705
Created January 19, 2012 18:26
Form letter template for acquired startups
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
@eirikbacker
eirikbacker / addEventListener-polyfill.js
Created June 3, 2012 19:30
addEventListener polyfill for IE6+
//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}
@scottjehl
scottjehl / anchorinclude.js
Created May 20, 2011 17:04
Anchor-include Pattern
/*
* 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>
@rosemulazada
rosemulazada / script.js
Last active April 7, 2024 05:32
SCALABLE: Save form data to localStorage and auto-complete on refresh
// 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 = {};

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].

  • [You Don't Know JS][3]

  • [Frontend Masters courses by Kyle Simpson][12]

  • [@mpjme][6]'s [YouTube videos][5]