Daniel Lewandowski dlewand691

OBSOLETE

This entire guide is based on an old version of Homebrew/Node and no longer applies. It was only ever intended to fix a specific error message which has since been fixed. I've kept it here for historical purposes, but it should no longer be used. Homebrew maintainers have fixed things and the options mentioned don't exist and won't work.

I still believe it is better to manually install npm separately since having a generic package manager maintain another package manager is a bad idea, but the instructions below don't explain how to do that.

Fixing npm On Mac OS X for Homebrew Users

Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.

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

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

My Sketch Plugins

First, download Sketch Runner to help you install these plugins easier. It's like Spotlight (or Alfred) for Sketch.

These are the plugins I can count on to get the job done. Now, since there is such a huge variety, don't feel like you have to take my word and download every single one. Even I don't have every one of these installed on my machine right now 🙃

This was compiled for the attendees of "A Really Good Beginner Sketch Workshop for Designers" for the Columbus Web Group, but why not share the love?

Alrighty, on the with the show 🎉

	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/jquery.radios-to-slider.js"></script>

	<script>
	$(document).ready( function(){
	$("#radios").radiosToSlider();
	});
	</script>

	<div id="radios">

	$base-font-size: 16px;
	$base-line-height: 1.5;

	// this value may vary for each font
	// unitless value relative to 1em
	$cap-height: 0.68;


	@mixin baseline($font-size, $scale: 2) {

	<div>
	<label for="sort-by">Sort by</label>
	<select id="sort-by">
	<option value="manual">Featured</option>
	<option value="price-ascending">Price: Low to High</option>
	<option value="price-descending">Price: High to Low</option>
	<option value="title-ascending">A-Z</option>
	<option value="title-descending">Z-A</option>
	<option value="created-ascending">Oldest to Newest</option>
	<option value="created-descending">Newest to Oldest</option>

	var selector = 'img' // Replace this with the selector for the element you want to make transformable


	jQuery.getScript('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', function() {
	jQuery.getScript('//cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js', function() {

	(function() {
	var $, applyTransform, getTransform, makeTransformable;

	$ = jQuery;

	function isScrolledIntoView(elem)
	{
	var $elem = $(elem);
	var $window = $(window);

	var docViewTop = $window.scrollTop();
	var docViewBottom = docViewTop + $window.height();

	var elemTop = $elem.offset().top;
	var elemBottom = elemTop + $elem.height();