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


Support one of this week's sponsors:

Kobra.io: Collaborative 'Google Docs' for Code Kobra.io: Collaborative "Google Docs" for Code

Kobra.io 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 Kobra.io

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


SassyBreakpoint
A simple breakpoint mixin for media queries.

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

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

scss-flex-grid
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."

Flexy
"A simple Flexbox layout extension for Compass."

Effica{CSS}
"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."

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

SassDoc
Automatically builds documentation in HTML format for your Sass projects.

Susy
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


Senna
"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."

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

Bonegular
"Backbone-Inspired models and collections for Angular."

heatmap.js
"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."

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

tracking.js
"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."

Cash
"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."

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

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

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

backbone-pegasus
"Load models and collections data while loading Backbone."

imagine.js
A lightweight HTML5 canvas library.


 

The Uncategorizables


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

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

hind-cite
HackerNews charts, data, and statistics.

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

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

Allmyapps
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,
Louis
webtoolsweekly.com
@WebToolsWeekly
Copyright © Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp