Bruce Lefebvre blefebvre

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:

JSConf Slides, Codes and Notes

These are all the JSConf 2014 slides, codes, and notes I was able to cull together from twitter. Thanks to the speakers who posted them and thanks to @chantastic for posting his wonderful notes.

Modular frontend with NPM - Jake Verbaten (@Raynos)

looking for book recommendations. please comment with books and what level (beginner, advanced, etc) thnx babes

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

	/*
	Copyright 2011 Martin Hawksey

	Licensed under the Apache License, Version 2.0 (the "License");
	you may not use this file except in compliance with the License.
	You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software

	var parser = document.createElement('a');
	parser.href = "http://example.com:3000/pathname/?search=test#hash";

	parser.protocol; // => "http:"
	parser.hostname; // => "example.com"
	parser.port; // => "3000"
	parser.pathname; // => "/pathname/"
	parser.search; // => "?search=test"
	parser.hash; // => "#hash"
	parser.host; // => "example.com:3000"

	/*
	THIS GIST IS OUT OF DATE AND NOT MONITORED
	PLEASE SEE https://github.com/leecrossley/cordova-plugin-shake-detection
	*/

	var shake = (function () {
	var shake = {},
	watchId = null,
	options = { frequency: 300 },
	previousAcceleration = { x: null, y: null, z: null },

	#!/bin/bash
	PATH=$1
	echo "Monitoring $1/logs/access.log"

	/usr/bin/tail -f "$PATH/logs/access.log" \| \
	GREP_COLOR='01;32' /usr/bin/grep --line-buffered --color=always 'high\\|medium\\|low\\|full\\|adapt\.' \|\
	/usr/bin/cut -d ' ' -f 6,7

	// Pre-requisites:
	// 1. Device core plugin
	// 2. Splashscreen core plugin (3.1.0)
	// 3. config.xml: <preference name="AutoHideSplashScreen" value="false" />
	// 4. config.xml: <preference name="DisallowOverscroll" value="true" />

	function onDeviceReady() {
	if (parseFloat(window.device.version) >= 7.0) {
	document.body.style.marginTop = "20px";
	// OR do whatever layout you need here, to expand a navigation bar etc

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };