artibella

// example Express server using the custom Fractal view engine
const express = require('express');
const path = require('path');
const appRoot = path.normalize(path.join(__dirname, '..'));
const app = express();
const fractalEngine = require(path.join(appRoot, 'lib/fractal-engine'));
const loadComponents = require(path.join(appRoot, 'middleware/load-components'));

// register custom Fractal rendering engine
app.engine('fractal', fractalEngine);

mxstbr

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
2. Add these lines of code to your keymap:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':

nathansmith

CSS Pre-Processing

When it comes to languages that power the web, CSS is a double-edged sword. Often heralded for being quick to learn, like chess it takes awhile to master. Due to its simplicity, it is easy to get to a point where CSS files become unruly, mired by code repetition and lack of consistency.

Enter CSS pre-processors (and post-processors). Of all the CSS pre-processing approaches, Sass (Syntactically Awesome Style Sheets) is the clear front-runner.

http://sass-lang.com

Metaphorically, Sass is to CSS what jQuery is to JavaScript. Not only that, Sass gives CSS a seat at the table of first-class programming languages.

paulirish

/* bling.js */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
}

NodeList.prototype.__proto__ = Array.prototype;

bradfrost

Answering the Front-end developer JavaScript interview questions to the best of my ability.

• Explain event delegation

Sometimes you need to delegate events to things.

• Explain how this works in JavaScript

This references the object or "thing" defined elsewhere. It's like "hey, thing I defined elsewhere, I'm talkin' to you."

• Explain how prototypal inheritance works.

gruber

#!/usr/bin/env perl
#
# http://daringfireball.net/2007/03/javascript_bookmarklet_builder

use strict;
use warnings;
use URI::Escape qw(uri_escape_utf8);
use open  IO  => ":utf8",		# UTF8 by default
		  ":std";				# Apply to STDIN/STDOUT/STDERR

necolas

See: A simple Git deployment strategt for static sites

badsyntax

#!/usr/bin/env bash
#
# Approach:
# 1. Find variable declaration in the form of "$my-var: anyvalue"
# 2. Loop through found variables and find occurrences of each variable in all sass files
# 3. Filter out vars that occurred only once

if [ -z "$1" ]; then
	echo "Please specify a directory as the first argument."
	exit 1

SamSamskies

jQuery and jQuery-ujs

When using Rails 3.0 and later we already get jquery-rails for free. Look in the gemfile and you'll see:

gem "jquery-rails"

You can view the full documentation here: source: https://github.com/indirect/jquery-rails

If you take a look in APP_DIR/app/assets/javascripts/application.js, you'll notice the following lines of code:

madrobby

@media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi),
       (min-resolution: 1.5dppx) {

/* Retina rules! */

}