John Ericson pinkhominid

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

AngularJS Directive Attribute Binding Explanation

When using directives, you often need to pass parameters to the directive. This can be done in several ways. The first 3 can be used whether scope is true or false. This is still a WIP, so validate for yourself.

Raw Attribute Strings

<div my-directive="some string" another-param="another string"></div>

Directory structure for JavaScript/Node Projects

While the following structure is not an absolute requirement or enforced by the tools, it is a recommendation based on what the JavaScript and in particular Node community at large have been following by convention.

Beyond a suggested structure, no tooling recommendations, or sub-module structure is outlined here.

Directories

lib/ is intended for code that can run as-is
src/ is intended for code that needs to be manipulated before it can be used

	DO WTF YOU WANT TO PUBLIC LICENSE
	Version 2, December 2004

	Copyright (C) 2011 Alexey Silin <[email protected]>

	Everyone is permitted to copy and distribute verbatim or modified
	copies of this license document, and changing it is allowed as long
	as the name is changed.

	DO WTF YOU WANT TO PUBLIC LICENSE

	/* ---------------------------------------------------------- */
	/* */
	/* A media query that captures: */
	/* */
	/* - Retina iOS devices */
	/* - Retina Macs running Safari */
	/* - High DPI Windows PCs running IE 8 and above */
	/* - Low DPI Windows PCs running IE, zoomed in */
	/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
	/* - Android hdpi devices and above */

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>HMAC-SHA256 Example</title>
	</head>
	<body>
	<script src="http://crypto.stanford.edu/sjcl/sjcl.js"></script>
	<script>
	var sharedSecret, query, signature, hmac, xhr;

	var crypto = require('crypto');
	// Added for safer string equality checking
	var bufferEq = require('buffer-equal-constant-time');
	var url = require('url');
	var SHARED_SECRET = "sup3rs3cr3t!!";

	function verifySignature(string_to_sign, signature, shared_secret) {
	var hmac = crypto.createHmac('sha512', shared_secret);
	hmac.write(string_to_sign);
	hmac.end()

	/**
	* Simple debounce function; usage:
	*
	* Create a function that only can be called once every 500 ms
	*
	* var df = debounce(function() {
	* ... func body ...
	* }, 500)
	*
	* Bind the function to an event

	var Middleware = function() {};

	Middleware.prototype.use = function(fn) {
	var self = this;

	this.go = (function(stack) {
	return function(next) {
	stack.call(self, function() {
	fn.call(self, next.bind(self));
	});