joegoggins

" Use Vim settings, rather then Vi settings (much better!).
" This must be first, because it changes other options as a side effect.
set nocompatible

" ================ General Config ====================

set number                      "Line numbers are good
set backspace=indent,eol,start  "Allow backspace in insert mode
set history=1000                "Store lots of :cmdline history
set showcmd                     "Show incomplete cmds down the bottom

scottjehl

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:

kendellfab

Linux - create "Default (Linux).sublime-mousemap" in ~/.config/sublime-text-3/Packages/User
Mac - create "Default (OSX).sublime-mousemap" in ~/Library/Application Support/Sublime Text 3/Packages/User
Win - create "Default (Windows).sublime-mousemap" in %appdata%\Sublime Text 3\Packages\User

[
    {
        "button": "button1", 
        "count": 1, 
        "modifiers": ["ctrl"],
        "press_command": "drag_select",

kconragan

# Mac OS X Lion introduced a new, iOS-like context menu when you press and hold a key
# that enables you to choose a character from a menu of options. If you are on Lion
# try it by pressing and holding down 'e' in any app that uses the default NSTextField
# for input.
#
# It's a nice feature and continues the blending of Mac OS X and iOS features. However,
# it's a nightmare to deal with in Sublime Text if you're running Vintage (Vim) mode,
# as it means you cannot press and hold h/j/k/l to move through your file. You have
# to repeatedly press the keys to navigate.

btroncone

Comprehensive Introduction to @ngrx/store

By: @BTroncone

Also check out my lesson @ngrx/store in 10 minutes on egghead.io!

Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!

Table of Contents

pburtchaell

/**
 * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
 * 
 * To overcome this, create media queries that target the width, height, and orientation of iOS devices. 
 * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing 
 * the height of element `.foo` —which is a full width and height cover image.
 *
 * iOS Resolution Quick Reference: http://www.iosres.com/
 */
 

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

PaulKinlan

(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(": ");

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

ocean90

<!DOCTYPE html>
<html>
	<head>
		<title>Box Shadow</title>
		
		<style>
			.box {
				height: 150px;
				width: 300px;
				margin: 20px;