Sundar Joshi sundarj

JankyBrowser

The only cross-platform browser that fits in a Gist!

One line install. Works on Linux, MacOSX and Windows.

Local Install

$&gt; npm install http://gist.github.com/morganrallen/f07f59802884bcdcad4a/download

Whether you use 2 spaces or 4 spaces, there are a few simple things that can make your node.js code easier to read. We've been using them in all the hapi modules for over 4 years now to great results. This list is by no means complete but it highlights the most useful elements that will give you immediate value in reducing bugs.

Required modules

JavaScript makes it harder than most languages to know where variables are coming from. Variables assigned required modules are particularly important because they represent a singleton object shared with the entire application. There are also globals and module globals, along with function variables and arguments.

Traditionally, variables starting with an uppercase letter represent a class that must be instantiated using new. This was an important semantic in the early days of JavaScript but at this point, if you don't know Date requires new Date() you are probably very new. We have adopted Upper Camel Case variable names for all module global variables

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.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

Clojure Destructuring Tutorial and Cheat Sheet

(Related blog post)

Simply put, destructuring in Clojure is a way extract values from a datastructure and bind them to symbols, without having to explicitly traverse the datstructure. It allows for elegant and concise Clojure code.

Vectors

Composing styles

CSS Wizardry recently wrote a great post about styling: Contextual Styling: UI Components, Nesting, and Implementation Detail. He showed three ways to solve the problem of implementation details in a component's styles. I want to propose another way to solve this problem, one that uses composition.

The original styles of a .nav-primary component are:

.nav-primary {
  /* This is how the nav should always look: */
 margin: 0;

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>nest.key</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	(function(window){

	function slugify( title ) {
	return (title+'')
	.toLowerCase()
	.replace(/\s+/g, '-')
	.replace(/[!"'£$%\^&*()_+=\/\\|`¬/><.,{}[\]:;]/g, '')
	.replace(/\-\-+/g, '-')
	.replace(/^-+/, '')
	.replace(/-+$/, '')
	}

	#!/usr/bin/env node
	// ircd demo for jsconf.eu/2009
	// This was written with Node version 0.1.16. An earlier version will not
	// work with this script, however later versions might.

	port = 6667;
	serverName = "irc.nodejs.org";
	topic = "node.js ircd https://gist.github.com/a3d0bbbff196af633995";

	//
	// Regular Expression for URL validation
	//
	// Author: Diego Perini
	// Updated: 2010/12/05
	// License: MIT
	//
	// Copyright (c) 2010-2013 Diego Perini (http://www.iport.it)
	//
	// Permission is hereby granted, free of charge, to any person

	// Just before switching jobs:
	// Add one of these.
	// Preferably into the same commit where you do a large merge.
	//
	// This started as a tweet with a joke of "C++ pro-tip: #define private public",
	// and then it quickly escalated into more and more evil suggestions.
	// I've tried to capture interesting suggestions here.
	//
	// Contributors: @r2d2rigo, @joeldevahl, @msinilo, @_Humus_,
	// @YuriyODonnell, @rygorous, @cmuratori, @mike_acton, @grumpygiant,