othiym23

#!/bin/sh

set -e
set -x

for package in $(npm -g outdated --parseable --depth=0 | cut -d: -f3)
do
    npm -g install "$package"
done

lunelson

I did a talk the other night at Up Front Berlin about some use cases for features in Sass from the past year. The slides are here; but I wanted to publish some notes so this post is one part of those notes.

My talk focused on the map data-type, and specifically on combining maps with directives such as @content, @at-root, and unique-id() in interesting ways. One of these is a mixin design pattern that solves some problems with using @extendand placeholder (silent) selectors in Sass:

1. having placeholder extensions appear somewhere way up in the top of your code, because that's where you imported them; and
2. having to think about choosing @include vs. @extend in the first place.

This "self-aware" mixin works by creating (and extending) a placeholder selector for itself dynamically, the first time it is included, and uses a map to keep records of these includes, so when it is subsequently in

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

IainIsCreative

// Set up line-height and colour defaults for this mixin.
$line-height: 20px!default;
$line-color: #94d4ff!default;

/**
*
* Baseline Mixin
* Handy dandy mixin to provide a baseline for your typography.
*
* The mixin carries two arguments — the $baseline, which should match your line-height, and $baseline-color, the colour you want the lines to be.

RichardBronosky

// Photoshop Script to Create iPhone Icons from iTunesArtwork
// Original: https://gist.github.com/appsbynight/3681050

// Turn debugger on. 0 is off.
// $.level = 1;

try
{
  // Prompt user to select iTunesArtwork file. Clicking "Cancel" returns null.
  var iTunesArtwork = File.openDialog("Select a sqaure PNG file that is at least 1024x1024.", "*.png", false);

ryantbrown

/** 
 * Make sure Graphicsmagick is installed on your system
 * osx: brew install graphicsmagick
 * ubuntu: apt-get install graphicsmagick
 * 
 * Install these gulp plugins
 * glup, gulp-image-resize, gulp-imagemin and imagemin-pngquant
 * 
 * Group images according to their output dimensions. 
 * (ex: place all portfolio images into "images/portfolio"

mortenjust

1. Create a folder in Dropbox or Google Drive

We'll use ~/Dropbox/Macnotes in this example

2. Copy the notes folder to the new folder in Dropbox or Google Drive

We'll use Finder for this instead of terminal as the cp -r command also copies the contents of all aliases and the Notes folder has a lot of those. Quit notes Open terminal and enable hidden files in Finder:

defaults write com.apple.finder AppleShowAllFiles YES.

thegitfather

Vanilla JavaScript Quick Reference / Cheatsheet

Just migrated it from Codepen.io to markdown. Credit goes to David Conner.

Working with DOM	Working with JS	Working With Functions
Accessing Dom Elements	Add/Remove Array Item	Add Default Arguments to Function
Grab Children/Parent Node(s)	Add/Remove Object Properties	Throttle/Debounce Functions
Create DOM Elements	Conditionals

kevinpapst

Developer setup for Mac OS X 10.11 El Capitan

Inspired by a Gist from kevinelliott - thanks!

Software

Install from App Store

• Xcode - for command line tools required by Homebrew

brunob

#CACHE{0}
[(#HTTP_HEADER{Content-type: text/xml[; charset=(#CHARSET)]})]<?xml 
version="1.0"[ encoding="(#CHARSET)"]?>
<rss version="2.0" [(#REM) rss 2.0.9)]
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
>
[(#SET{channel,#ENV{url}|analyser_site})]
<channel[ xml:lang="(#LANG)"]>
		[<title>(#GET{channel}|table_valeur{nom_site}|textebrut|texte_backend)</title>]