Skip to content

Instantly share code, notes, and snippets.

View derekjohnson's full-sized avatar

derekjohnson

15 followers · 18 following
View GitHub Profile
@scottjehl
scottjehl / head.html
Created February 20, 2013 17:18
simple & qualified async script load
<head>
....
</head>
<script>
(function( w ){
var doc = w.document,
// quick async script inject
ref = doc.getElementsByTagName( "script" )[0],
loadJS = function( src ){
var elem = doc.createElement( "script" );
@madrobby
madrobby / gist:5033549
Created February 25, 2013 21:35
/*
Older email clients and (some) webmail clients (Gmail!) will apply
this rule. Some clients (like older Lotus Notes) don't
support background-color on links, so I didn't want white
links on a white background.
*/
a.button {
background-color: #FFFFFF;
color: #d9286b;
}
@MattWilcox
MattWilcox / wp-config.php
Created March 18, 2013 14:38
Bits to add to wp-config.php to make things sane when developing in a real development system (local > stage > live) instead of developing directly on a live server. Which is what WP is set up to do and which is ridiculous.
/* Lets not rely on paths in the database, they can be very wrong when moving between dev/stage/live environments */
/* The following two variables are backward to my thinking, but hey, what ya gonna do? */
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . ''); // This is NOT the 'wordpress admin area' home, but the site's home
define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/SECRETDIRECTORY'); // This isn't the site's URL but the WordPress admin area URL
/* MySQL settings */
switch($_SERVER['SERVER_NAME']){
// Your local machine's settings
case 'mysite.local':
define('DB_NAME', 'dev_mysite');
@marcusandre
marcusandre / gen_appcache.md
Last active December 15, 2015 07:59
Generate Appcache (incl. xhr) in Chrome DevTools

Generate Appcache Manifest (incl. xhr) in Chrome DevTools

  1. Open your Chrome Developer Tools
  2. Navigate to the Network tab
  3. Just right click into the panel and choose Copy ALL as HAR (maybe the page needs a reload)
  4. Switch to the console tab and save your HAR data in a variable. (var data = cmd + v)
  5. Now let's create the cache manifest:
console.log('CACHE MANIFEST\n\nCACHE:');
@scottjehl
scottjehl / fonts.js
Created April 17, 2013 19:04
current font loading snippet
...
// test for font-face version to load via Data URI'd CSS
// Basically, load WOFF unless it's android's default browser, which needs TTF, or ie8-, which needs eot
var fonts = ns.files.css.fontsWOFF,
ua = win.navigator.userAgent;
// android webkit browser, non-chrome
if( ua.indexOf( "Android" ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ){
fonts = ns.files.css.fontsTTF;
}
@andreasbovens
andreasbovens / data-uri-context-menu-mac.md
Last active December 3, 2018 10:59
How to quickly create a "Convert to data URI" context menu option on Mac

Setup

  1. Download https://gist.github.com/jsocol/1089733 and unpack
  2. Rename data-uri.py to data-uri and copy to /usr/local/bin/
  3. Open Terminal, cd /usr/local/bin/ and and then chmod +x data-uri (enter password when prompted)
  4. Open Automator, choose New > Service.
  5. Set up the service as follows:
    Service receives selected files or folders in Finder.app
    which is connected to a Run Shell Script action, with the following settings:
@LeaVerou
LeaVerou / js-under-pressure.js
Last active December 25, 2015 06:49
My answers to http://toys.usvsth3m.com/javascript-under-pressure/
// DISCLAIMER: This is not necessarily good code. It’s just code that I wrote
// as quickly as possible to do each task.
// 1
return 2*i;
// 2
return !(i%2);
@WebReflection
WebReflection / ietouches.md
Last active December 27, 2015 10:49
moved to a repo instead of a gist
@joecritch
joecritch / gist:a60f7f09fecf6d86f7e3
Created May 21, 2014 11:42
BEM SASS trick
.module {
some: stuff;
&__child {
blah: blah;
}
&--modifier {
modify: me;
}
}
@scottjehl
scottjehl / noncritcss.md
Last active August 12, 2023 16:57
Comparing two ways to load non-critical CSS

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner: