jonathantneal

Simple Node Server

A demonstration of how simple it is to create a local server in Node.

This barebones example is here to help you understand how you could serve a simple static directory as a local site.

Usage

node .

nolanlawson

Progressive Web App stack:

• Service Worker
• Web App Manifest

Old-school offline webapp stack:

• Application Cache
• Touch Icons (apple-touch-icon etc.)
• apple-mobile-web-app-capable or mobile-web-app-capable

doismellburning

Conference User Stories

I want to gather user stories useful for running a conference (see linked blog post for more context).

Would you like to contribute? Please add a comment. This list is in no way exhaustive!

No guarantee that they'll be used, but all input is appreciated!

A common "template" is As a X, I want Y, so that Z, but use whatever feels most appropriate.

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

ericelliott

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

paulirish

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

1. Launch quicktime player
2. do Screen recording

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

brianloveswords

#!/bin/bash
file=$1
test -z $file && echo "file required." 1>&2 && exit 1
git filter-branch -f --index-filter "git rm -r --cached $file --ignore-unmatch" --prune-empty --tag-name-filter cat -- --all
git ignore $file
git add .gitignore
git commit -m "Add $file to .gitignore"

joaocunha

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;

mikekunze

{
  "directory"  : "public/components",
  "json"       : "component.json",
  "endpoint"   : "https://bower.herokuapp.com",
  "searchpath" : ["https://bower.herokuapp.com"]
}