Issue #59  (Function.length, Sass Tools, JS Libs, Uncats)09/04/14

Support one of this week's sponsors: Collaborative 'Google Docs' for Code Collaborative "Google Docs" for Code is an online collaborative code editor. Just paste in your code and you get a unique URL to share with anyone. Edit the same code together with built in Video & Voice chat. Free to use, but get Pro features for 68% off now.
Create a Collaborative File for Free on

In Issue #46 I discussed the arguments object that's available in any function body. Using the length property on the arguments object lets us see the number of arguments that actually got passed in.

But here's another similar use of the length property:

function doSomething (a, b) {
  console.log(arguments.length); // 4
  // function body...

doSomething(1, 2, 3, 4);

console.log(doSomething.length); // 2

Notice inside the function body, we're logging the length of the arguments object. Because we called the doSomething() function with four arguments, the log produces "4".

But at the bottom, outside the function, we're also logging the length value of the function itself. Here the log output is "2". What's this?

The length property on a function tells us how many parameters the function is expecting. In this case, the function is declared with two parameters (a, b). But because JavaScript doesn't really care if we actually pass in the correct number of arguments, we're passing in four values instead of two.

So the length property can be used in both of these ways — not only to find out the size of the arguments object (the values passed in) but also to get the number of parameters the function is declared with.

Function.length on MDN

Now on to this week's tools!

Sass Tools

A simple breakpoint mixin for media queries.

"Jacket is a Compass component that prints or hides styles based on context variables you set in your stylesheet. "

An online generator to convert your CSS to Sass, creating mixins and variables where it deems appropriate.

A 12-column grid using flexbox and SCSS.

Sassy Starter
"A starter toolkit based on Scalable and Modular Architecture for CSS SMACSS for Sass (SCSS) projects."

"A simple Flexbox layout extension for Compass."

"A set of SASS & Bourbon mixins to power up your stylesheets."

Sass Color Helpers
"A collection of Sass color helpers (and some related math helpers) to make it easier and more fool-proof to implement a target design."

"Syntactically Awesome Style Sheets Automated Service" to help automate direct and inline conversion.

Automatically builds documentation in HTML format for your Sass projects.

A layout engine to provide you with tools to build a custom grid framework according to the needs of your website.

Support Web Tools Weekly:   384 pages of CSS for $7

JavaScript Libraries and Frameworks

"A blazing-fast single page application engine that provides several low-level APIs that allows you to build modern web-based applications with only ~8KB of JavaScript without any dependency."

"A set of AngularJS directives to help with responsive design."

"Backbone-Inspired models and collections for Angular."

"Whether you want to have an aggregated overview of your users behaviour, or look at thousands of events distributed on a map, heatmap.js has all your heatmap visualization needs covered."

A JavaScript charting library that can work with multi-dimensional data sets and can create animated and interactive charts.

"By using modern HTML5 specifications, we enable you to do real-time color tracking, face detection and much more — all that with a lightweight core (~7 KB) and intuitive interface."

"A tiny library that abstracts some pain points when working with native Javascript and DOM. Because if you are not supporting bad browsers you do not need the shims that were created to support them."

An  open source JavaScript/jQuery UI library that lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser.

From YouTube. "Structured Page Fragments — or SPF for short — is a lightweight framework that handles navigation and updates of page sections."

"An experimental selector language for JSON. It makes it easy to access data in complex JSON documents. It feels like CSS."

"Load models and collections data while loading Backbone."

A lightweight HTML5 canvas library.


The Uncategorizables

"A modular and lightweight CMS built with modern technologies like Symfony components and Doctrine."

Now at 1.0, an open platform for distributed applications for developers and sysadmins.

HackerNews charts, data, and statistics.

"Welcome to the cloud built for front-end devs."

"A free application that synchronizes files and folders between locations." For Windows machines.

A PC app manager.

Support Web Tools Weekly:   384 pages of CSS for $7

A Tweet for Thought

Addy Osmani has some good advice on picking a framework.


Suggestions / Corrections

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.


Before I Go...

If you love Markdown, you might want to check out CommonMark, a movement to promote "a standard, unambiguous syntax specification for Markdown".

Thanks to all for subscribing and reading!

Keep tooling,
Copyright © Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp