Tom Byrer tomByrer

JavaScript function hoisting by example

Below are many examples of function hoisting behavior in JavaScript. Ones marked as works successfuly print 'hi!' without errors.

To play around with these examples (recommended) clone them with git and execute them with e.g. node a.js

Notes on hoisting

(I may be using incorrect terms below, please forgive me)

Social Share Links

console.log wrap resolving for your wrapped console logs

I've heard this before:

What I really get frustrated by is that I cannot wrap console.* and preserve line numbers

We enabled this in Chrome DevTools via blackboxing a bit ago.

If you blackbox the script file the contains the console log wrapper, the script location shown in the console will be corrected to the original source file and line number. Click, and the full source is looking longingly into your eyes.

There are three easy to make mistakes in go. I present them here in the way they are often found in the wild, not in the way that is easiest to understand.

All three of these mistakes have been made in Kubernetes code, getting past code review at least once each that I know of.

Loop variables are scoped outside the loop.

What do these lines do? Make predictions and then scroll down.

func print(pi *int) { fmt.Println(*pi) }

Pure CSS content filter

I saw some JS filter setups, so naturally I had to see if I could make a CSS one. Pretty simple.

A Pen by Sam Gordon on CodePen.

License.

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

Video stabilization using VidStab and FFMPEG

Examples here use the default settings, see the VidStab readme on GitHub for more advanced instructions.

Here's an example video I made

Install ffmpeg with the vidstab plugin from homebrew

brew install ffmpeg --with-libvidstab

How you can help reduce `node_modules` bloat

This recent reddit thread reveals discontent among the web development community about the sheer volume of stuff in a typical node_modules dir. 140MB in this case!

Is it a design flaw in npm?

Opinions in the thread varied from "I'm surprised npm even works" to "everything is fine". I'm not going to offer an opinion, just these two observations:

node_modules dirs typically do contain lots of stuff that doesn't need to be there.
The latest version mitigates overall size by flattening the dependency tree, but some of the bloat is beyond npm's control.

	exports.stripComments = function stripComments(toBeStrippedStr){
	//LEXER
	function Lexer () {
	this.setIndex = false;
	this.useNew = false;
	for (var i = 0; i < arguments.length; ++i) {
	var arg = arguments [i];
	if (arg === Lexer.USE_NEW) {
	this.useNew = true;
	}

	import StringIO
	import gzip
	import os
	import subprocess
	import time


	def compiler(path):
	cmd = 'java -jar compiler-latest/compiler.jar -O advanced'.split()
	cmd.append(path)