ryan neptune ryanve

Prolog

Google Chrome Developers says:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2

TTF to WOFF2 converting

http://www.fontsquirrel.com/tools/webfont-generator

Copyright (c) 4-digit year, Company or Person's Name

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

Source: http://opensource.org/licenses/ISC

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.

Fix SVG in `<img>` tags not scaling in IE9, IE10, IE11

IE9, IE10, and IE11 don't properly scale SVG files added with img tags when viewBox, width and height attributes are specified. View this codepen on the different browsers.

Image heights will not scale when the images are inside containers narrower than image widths. This can be resolved in 2 ways.

Use `sed` in bash to remove width and height attributes in SVG files

As per this answer on Stackoverflow, the issue can be resolved by removing just the width and height attributes.

People

`:bowtie:`	😄 `:smile:`	😆 `:laughing:`
😊 `:blush:`	😃 `:smiley:`	☺️ `:relaxed:`
😏 `:smirk:`	😍 `:heart_eyes:`	😘 `:kissing_heart:`
😚 `:kissing_closed_eyes:`	😳 `:flushed:`	😌 `:relieved:`
😆 `:satisfied:`	😁 `:grin:`	😉 `:wink:`
😜 `:stuck_out_tongue_winking_eye:`	😝 `:stuck_out_tongue_closed_eyes:`	😀 `:grinning:`
😗 `:kissing:`	😙 `:kissing_smiling_eyes:`	😛 `:stuck_out_tongue:`

This is a work in progress. If I missed something or someone, please let me know!

Best Practices

It's hard to recommend best practices in general without context, but basically, writing clean, readable code with lots of comments, and doing a lot of automated unit testing, followed by an automated build process using ANT or Grunt to concatenate and minify files is a start.

Twitter

I don't focus much on blogs any more. I focus more on Twitter. If the people I follow there recommend something, I'll go read it. Here's the best of my Twitter list, including developers, conferences, and interesting groups. There are other great developers on Twitter, but these tweet mostly about development:

Developers

Ben Alman

	// webpack is a module bundler
	// This means webpack takes modules with dependencies
	// and emits static assets representing those modules.

	// dependencies can be written in CommonJs
	var commonjs = require("./commonjs");
	// or in AMD
	define(["amd-module", "../file"], function(amdModule, file) {
	// while previous constructs are sync
	// this is async

	#!/bin/bash

	set -ex

	mkdir -p /tmp/repro-1489
	cd /tmp/repro-1489

	bundle env
	# Bundler 1.3.5
	# Ruby 2.0.0 (2013-06-27 patchlevel 247) [x86_64-darwin12.4.0]

	/**
	* Lea Verou's CSS Lightbox, taken on webplatform.org
	* For redistribution purposes
	* @author Lea Verou <lea@w3.org>
	*/
	#lightbox {
	visibility: hidden;
	position: fixed;
	top: 50%;
	left: 50%;

	var JSONP = {
	_jsonpcallbacks: {},
	request: function (url, data, callback) {
	var callbackName = Math.random();
	Ripple._jsonpcallbacks[callbackName] = callback;
	var script = document.createElement('script');
	script.src = url + '?callback=' + callbackName + '&data=' + encodeURIComponent(JSON.stringify(data));
	script.type = 'text/javascript';
	document.getElementsByTagName('head')[0].appendChild(script);
	}