Giuseppe Caruso carusog

#Error management in gulp

Sucking at something is the first step to becoming sorta good at something

No one can assure you, that plugins will run smooth in any circumstances (except for tests - they could), so neither should you convince anyone, that your plugin will never break. Only thing, that you could possibly do (if something gone wrong) - is gracefully inform your plugin user, that something went wrong and die.

We are will use this plugin from beginning to demonstrate error management. Suppose you have a task in gulpfile.js that contains this code (we modified it a little bit to be closer to real-usage):

var coffee = require('gulp-coffee');

This is a more wordy, narrative accompaniment to my pretty bare presentation about d3 that I gave to the jQuery DC Meetup.

What is d3?

Not a chart library (though you can make charts with it)
Not a map library (though you can make maps with it)

Which is to say, d3 can be used for building things, but the 'atomic parts' are lower-level than bar graphs or projections or so on. This is a powerful fact. It also means that d3 is a good basis for simple interfaces, like Vega.js, that make its power accessible in other ways.

Not a compatibility layer (it doesn't work with bad browsers)

Intro

http://socialdriver.com/2012/07/20-best-responsive-websites/ lists 20 sites that are supposedly best-in-class when it comes to responsive design techniques. I had a look at the viewport meta tags used in these sites.

Findings

All sites use width=device-width, with in most cases an additional initial-scale=1. This is good practice.

However:

8 sites turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. While there are some corner use cases for this, it does not make sense to do this on text-heavy sites as it impairs accessibility.
3 sites use semi-colons as delimiters between viewport values. While this works in newer mobile browsers, it's not officially supported, and breaks in older mobile browser versions.
1 site has 2 viewport meta tags (with different values) in the source...

Step 0:

Get Homebrew installed on your mac if you don't already have it

Step 1:

Install highlight. "brew install highlight". (This brings down Lua and Boost as well)

	'use strict';

	// simple express server
	var express = require('express');
	var app = express();
	var router = express.Router();

	app.use(express.static('public'));
	app.get('/', function(req, res) {
	res.sendfile('./public/index.html');

	#!/bin/zsh
	#
	# Highlight a given file and copy it as RTF.
	#
	# Simon Olofsson <[email protected]>
	#

	set -o errexit
	set -o nounset

	# Note (November 2016):
	# This config is rather outdated and left here for historical reasons, please refer to prerender.io for the latest setup information
	# Serving static html to Googlebot is now considered bad practice as you should be using the escaped fragment crawling protocol

	server {
	listen 80;
	listen [::]:80;
	server_name yourserver.com;

	root /path/to/your/htdocs;

	// _decimal.scss \| MIT License \| gist.github.com/terkel/4373420

	// Round a number to specified digits.
	//
	// @param {Number} $number A number to round
	// @param {Number} [$digits:0] Digits to output
	// @param {String} [$mode:round] (round\|ceil\|floor) How to round a number
	// @return {Number} A rounded number
	// @example
	// decimal-round(0.333) => 0

	function! MyFoldText() " {{{
	let line = getline(v:foldstart)

	let nucolwidth = &fdc + &number * &numberwidth
	let windowwidth = winwidth(0) - nucolwidth - 3
	let foldedlinecount = v:foldend - v:foldstart

	" expand tabs into spaces
	let onetab = strpart(' ', 0, &tabstop)
	let line = substitute(line, '\t', onetab, 'g')