Simon Vreeman simonvreeman

## markdown.css
* {
    font-size: 12pt;
    font-family: monospace;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: black;
    cursor: default;
}

## noncritcss.md

      
              1 file
            
          
              10 forks
            
          
              44 comments
            
          
              215 stars
            
          
                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:

  
## optimizelyspytool
jQuery.getScript("//dl.dropboxusercontent.com/s/ci08683w66ud4s0/optimizelyspytool.js");

## Boilerplate.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Boilerplate</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
    <link rel="dns-prefetch" href="https://www.google-analytics.com">
    <style>
      :root {

## criticalcss-bookmarklet-devtool-snippet.js
(function() {
  var CSSCriticalPath = function(w, d, opts) {
    var opt = opts || {};
    var css = {};
    var pushCSS = function(r) {
      if(!!css[r.selectorText] === false) css[r.selectorText] = {};
      var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
      for(var i = 0; i < styles.length; i++) {
        if(!!styles[i] === false) continue;
        var pair = styles[i].split(": ");

## abtest.js
/*

  Usage:

  When generating a page:
    var abTest = new AbTest('your-test-slug');

    if (abTest.variation == 0)
      $('#thediv').addClass('red');
    else if (abTest.variation == 1)

## frontendDevlopmentBookmarks.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                remkus
                / frontendDevlopmentBookmarks.md
            
            
              Created
              June 22, 2013 10:23
                — forked from dypsilon/frontendDevlopmentBookmarks.md
            
          
    Frontend Development

Attention: if you attempt to fork this gist, github will think that you are a spammer and you will have to confirm that you are human with them. Apparantly there are too many links in this list. Also I update it rather frequently (see revisions on the left), so it's probably wise to not fork it anyway.

Guides

Hack Design
Designer School
TheExpressiveWeb
Talks To Help You Become A Better Front-End Engineer In 2013


Web Development Teaching Materials


## multiple-3rd-party-widgets.js
(function() {

    var script,
        scripts = document.getElementsByTagName('script')[0];

    function load(url) {
      script = document.createElement('script');
      script.async = true;
      script.src = url;
      scripts.parentNode.insertBefore(script, scripts);

## snippet.js
/*
 * Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
 * Better handling of scripts without supplied ids.
 *
 * N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
 */

(function(doc, script) {
    var js,
        fjs = doc.getElementsByTagName(script)[0],

## CSS cross browser transparency.css
/* Cross browser transparency */
.transparent_class {
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity: 0.5;
   opacity: 0.5;
}
	* {
	font-size: 12pt;
	font-family: monospace;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: black;
	cursor: default;
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Boilerplate</title>
	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
	<link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
	<link rel="dns-prefetch" href="https://www.google-analytics.com">
	<style>
	:root {
	(function() {
	var CSSCriticalPath = function(w, d, opts) {
	var opt = opts \|\| {};
	var css = {};
	var pushCSS = function(r) {
	if(!!css[r.selectorText] === false) css[r.selectorText] = {};
	var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
	for(var i = 0; i < styles.length; i++) {
	if(!!styles[i] === false) continue;
	var pair = styles[i].split(": ");
	/*

	Usage:

	When generating a page:
	var abTest = new AbTest('your-test-slug');

	if (abTest.variation == 0)
	$('#thediv').addClass('red');
	else if (abTest.variation == 1)
	(function() {

	var script,
	scripts = document.getElementsByTagName('script')[0];

	function load(url) {
	script = document.createElement('script');
	script.async = true;
	script.src = url;
	scripts.parentNode.insertBefore(script, scripts);
	/*
	* Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
	* Better handling of scripts without supplied ids.
	*
	* N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
	*/

	(function(doc, script) {
	var js,
	fjs = doc.getElementsByTagName(script)[0],
	/* Cross browser transparency */
	.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	}