Skip to content

Instantly share code, notes, and snippets.

Avatar
🚀

Charlie Park charliepark

🚀
View GitHub Profile
@scottjehl
scottjehl / noncritcss.md
Last active Jan 27, 2022
Comparing two ways to load non-critical CSS
View noncritcss.md

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:

@jbenet
jbenet / simple-git-branching-model.md
Last active May 13, 2022
a simple git branching model
View simple-git-branching-model.md

a simple git branching model (written in 2013)

This is a very simple git workflow. It (and variants) is in use by many people. I settled on it after using it very effectively at Athena. GitHub does something similar; Zach Holman mentioned it in this talk.

Update: Woah, thanks for all the attention. Didn't expect this simple rant to get popular.

@charliepark
charliepark / simple_breakpoints.css
Created Sep 9, 2013
simple responsive breakpoints
View simple_breakpoints.css
/* via http://stackoverflow.com/questions/16443380/common-css-media-queries-break-points */
@media only screen and (min-width: 768px) {
/* tablets and desktop */
}
@media only screen and (max-width: 767px) {
/* phones */
}
@killercup
killercup / pandoc.css
Created Jul 3, 2013
Add this to your Pandoc HTML documents using `--css pandoc.css` to make them look more awesome. (Tested with Markdown and LaTeX.)
View pandoc.css
/*
* I add this to html files generated with pandoc.
*/
html {
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
View gist:4274202
Do What You Want
Those are the most frightening four words brought to us by the connection revolution.
If you want to sing, sing.
If you want to lead, lead.
If you want to touch, connect, describe, disrupt, give, support, build, question... do it.
You will not be picked.
But if you want to pick yourself, go for it.
The cost is that you own the results
@nrrrdcore
nrrrdcore / retina_bg.css
Created Nov 15, 2012
Retina-Ready Background Swatching (Minus the Bullshit)
View retina_bg.css
background-image: url('../images/greyfloral_@2X.png');
background-size: 150px 124px; /* size in px of image @1X */
@danro
danro / Custom.css
Created Sep 16, 2012
Improved webkit inspector toolbar
View Custom.css
#-webkit-web-inspector #toolbar {
background: #cdcdcd !important;
height: 36px !important;
}
#-webkit-web-inspector #main {
top: 36px !important;
}
#-webkit-web-inspector .toolbar-item.elements:hover:after {
content: "elements";
z-index: 9999;
@joshwand
joshwand / gist:1074244
Created Jul 10, 2011
How to fix "libiconv is missing" problem installing Nokogiri on 10.6 with MacPorts
View gist:1074244

When installing Nokogiri on 10.6 with macports, the build fails because libiconv is missing:


Building native extensions.  This could take a while...
ERROR:  Error installing nokogiri:
       ERROR: Failed to build gem native extension.

/Users/jmacdonald/.rvm/rubies/ruby-1.8.7-p174/bin/ruby extconf.rb
checking for libxml/parser.h... yes
@founddrama
founddrama / one-liner-array-sorts.js
Created Feb 11, 2011
Enough with the `if (a > b) { } else if (a < b) { } else { }` stuff, OK? If you've got numbers, you can sort with a one-liner as follows...
View one-liner-array-sorts.js
var arr = [10, 5, 6, 1, -2, 28];
function ascending(a, b){
return ( (a - b) / Math.abs(a - b) ) || 0;
}
function descending(a, b){
return ( (b - a) / Math.abs(b - a) ) || 0;
}
@drdrang
drdrang / smarten.js
Created Nov 18, 2010
A very simple quote and dash smartener in JS. Used to make my tweets look nicer.
View smarten.js
// Change straight quotes to curly and double hyphens to em-dashes.
function smarten(a) {
a = a.replace(/(^|[-\u2014/(\[{"\s])'/g, "$1\u2018"); // opening singles
a = a.replace(/'/g, "\u2019"); // closing singles & apostrophes
a = a.replace(/(^|[-\u2014/(\[{\u2018\s])"/g, "$1\u201c"); // opening doubles
a = a.replace(/"/g, "\u201d"); // closing doubles
a = a.replace(/--/g, "\u2014"); // em-dashes
return a
};