Derek Reynolds derekr

SVG

Articles

A List Apart Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I
Mozilla Applying SVG effects to HTML content
Smashing Magazine Resolution Independence With SVG
Smashing Magazine Rethinking Responsive SVG
CSS Tricks http://css-tricks.com/svg-sprites-use-better-icon-fonts/

Description

This simple script will take a picture of a whiteboard and use parts of the ImageMagick library with sane defaults to clean it up tremendously.

The script is here:

#!/bin/bash
convert "$1" -morphology Convolve DoG:15,100,0 -negate -normalize -blur 0x1 -channel RBG -level 60%,91%,0.1 "$2"

Results

Core Principals

Read lots of code.
Write lots of code.
Don’t be afraid to throw it away.
Don’t be afraid to share it.
Find your happy place writing tests.
- You’ll probably spend more time writing tests and debugging than writing code. Embrace this. Make it a key part of your workflow.
- Tests are one of the first things I read in a module. That and the example(s). Probably before API docs.
Don’t know where to start. Write some tests for a module you like. This benefits everyone.

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

Put a closure on it

Sometimes you'll have objects that manage state along with event handling. This happens frequently in MVC apps. Let's start with a messy example:

var Launcher = function(rocket) {
  this.rocket = rocket
}

Launcher.prototype.isReady = function() {

Locate the section for your github remote in the .git/config file. It looks like this:

[remote "origin"]
	fetch = +refs/heads/*:refs/remotes/origin/*
	url = git@github.com:joyent/node.git

Now add the line fetch = +refs/pull/*/head:refs/remotes/origin/pr/* to this section. Obviously, change the github url to match your project's URL. It ends up looking like this:

Routing in Ember

In Ember, the application's state manager handles routing. Let's take a look at a simple example:

App.stateManager = Ember.StateManager.create({
  start: Ember.State.extend({
    index: Ember.State.extend({
      route: "/",

	<!DOCTYPE html>
	<html>
	<head>
	<title>Stupid Map</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
	<style type="text/css">

	@media only screen and (min-width: 320px) {

	/* Small screen, non-retina */

	}

	@media
	only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
	only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
	only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),

	<figure class="quote">
	<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
	</figure>