Skip to content

Instantly share code, notes, and snippets.

@chriseppstein
chriseppstein / _minified_filenaming.md
Last active November 26, 2019 07:40
compiling a minified version of css. This configures your compass project to emit files in minified form when compiling for production.
$ compass compile --environment production && compass compile

Afterwards you will have both the minified and non-minified versions in your output folder. Note that compass clean will not clean up your minified files.

@sheedy
sheedy / style-guides.md
Last active December 25, 2015 11:09
A list of "living" Style Guides

Style Guides

Add any links you want in this to the comments and I'll add them.

Grunt/JS/Handlebars

Generates styleguides from Markdown comments in CSS, SASS and LESS files using Handlebars

Node/JS

@PaulKinlan
PaulKinlan / criticalcss-bookmarklet-devtool-snippet.js
Last active April 2, 2024 02:45
CriticalCSS Bookmarklet and 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(": ");
@joaocunha
joaocunha / How To Hide The Select Arrow On Firefox.md
Last active December 10, 2023 13:05
How to hide <select> dropdown's arrow in Firefox when using "-moz-appearance: none;".

This is no longer a bug. I'm keeping the gist for historical reasons, as it helped to get it fixed. Make sure to read the notes by the end of the post.

How to remove hide the select arrow in Firefox using -moz-appearance:none;

TL;DR (or, the fix)

  1. Set -moz-appearance to none. This will "reset" the styling of the element;
  2. Set text-indent to 0.01px. This will "push" the text a tiny bit[1] to the right;
@asciidisco
asciidisco / dalek_flocke.js
Created August 6, 2013 10:39
Many screenshots from different pages in different resolutions
module.exports = {
'A lot of screenshots': function (test) {
var resolutions = [{width: 1280, height: 1024}, {width: 1024, height: 768}, {width: 800, height: 600}];
var pages = ['http://facebook.com', 'http://twitter.com', 'http://dalekjs.com'];
resolutions.forEach(function (res) {
pages.forEach(function (page) {
test.open(page)
.resize(res)
@anselmh
anselmh / target_blank--external.js
Created July 24, 2013 12:12
Open all external links (different hostname than current page) in new tab/window with plain vanilla JavaScript.
/**
* Open external links in new tab/window
*/
// All http:// links should open in new tab/window. Internal links are relative.
var anchors = document.querySelectorAll('a');
for (var i = 0; i < anchors.length; i++) {
if (anchors[i].host !== window.location.hostname) {
anchors[i].setAttribute('target', '_blank');
@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;
}
@tvandervossen
tvandervossen / environment.js
Last active April 2, 2024 20:18
Here’s an example of my current web app user agent, device, and/or feature detection approach. I tend to inline this in the page header just before the stylesheet as part of the distribution build. A benefit of this approach is that detection is done early without any external dependencies. It’s also straightforward to modify or extend while you…
env = (function() {
var flags = {}, ua = navigator.userAgent, el = document.createElement('div'), video = document.createElement('video'), audio = document.createElement('audio'), root = document.documentElement, i
function flag(names) {
names = names.split(' ')
for (i = 0; i < names.length; i++)
flags[names[i]] = true
}
function classnames() {
var names = [], name
for(name in flags) if (flags.hasOwnProperty(name))
@piscisaureus
piscisaureus / pr.md
Created August 13, 2012 16:12
Checkout github pull requests locally

Locate the section for your github remote in the .git/config file. It looks like this:

[remote "origin"]
	fetch = +refs/heads/*:refs/remotes/origin/*
	url = git@github.com:joyent/node.git

Now add the line fetch = +refs/pull/*/head:refs/remotes/origin/pr/* to this section. Obviously, change the github url to match your project's URL. It ends up looking like this:

@madrobby
madrobby / gist:3161015
Created July 22, 2012 20:43
Detect retina support. Tested on iOS, Android 2.x, Chrome for Android, Safari on MacBook Pro Retina, Firefox mobile (beta) for Android, Opera Mobile (Android)
function isRetina(){
return (('devicePixelRatio' in window && devicePixelRatio > 1) ||
('matchMedia' in window && matchMedia("(min-resolution:144dpi)").matches))
}