Web Tools Weekly Issue #44 (more bind(), Frameworks, Media, Command Line)

Issue #44 (more bind(), Frameworks, Media, Command Line)05/22/14

Just like last week, this week's tip comes from a guest contributor, Derick Bailey. Derick is an author, blogger, and speaker. Be sure to check out his JavaScript screencasts at WatchMeCode and use discount code webtoolsweekly to get 35% off the subscription price.

In the previous issue of Web Tools Weekly, I showed you how to use .bind() to bind the context of a function to an object of your choice. Using the .bind() call also allows you to specify a list of parameters for the original function call to use. This is commonly referred to as "partial function application", since you're applying a partial list of parameters to the function for later use.

Partially Apply a Function
To use partial application, you need to first bind the function to a context. After that, passing in additional parameters to the .bind() call withholds those parameters and applies them when the bound function is called.

function add(a, b){
  return a + b;
}

var addOne = add.bind(null, 1);

var result = addOne(2);
console.log(result); //=> 3

(Demo) In the above code, a generic add() function is set up to add two parameters. Just below that, the add() function is bound to a null context (since this is never used in the function) and has a value of 1 stored as the first parameter. The result of this .bind() call is a function that takes one parameter and applies it to the original function along with the specified context and parameter passed to the .bind() call.

Later, when the addOne() method is called, a single parameter is passed to it. Since the .bind() call provided the first parameter for the original function, calling addOne(2) passes the value of 2 to the b parameter of the original add() function. The result is then logged, with the expected value of 3.

Partial Application vs Currying?
Having seen partial function application, I've got a homework assignment for you. First off, watch out for people calling this technique "currying". While currying and partial function application can look similar on the surface, they are not the same thing. Your homework assignment, then, is to look into currying a function in JavaScript.

Do a bit of research to figure out what currying is and how it differs from partial function application. Then see if you can write a small library to do function currying in JavaScript.

For more on JavaScript, check out Derick's screencast series WatchMeCode. Use coupon code webtoolsweekly for 35% off.

Now on to this week's tools!

Front-end Frameworks

WinJS
From Microsoft, "This is a comprehensive toolkit for you to use with confidence in its performance and polish, whether as a standalone solution or with other frameworks and libraries."

Responsive
"A super lightweight HTML, CSS, and JavaScript framework for building responsive websites."

Assets
"Reusable, responsive, 508 compliant framework for beautiful, usable, rapid, and scalable deployment."

Layers CSS
"Lightweight. Unobtrusive. Style-agnostic. Build your look on the web, not Twitter's – and build it fluid."

Jeet Grid System
"Allows you to express your page grid the same way a human would describe it. No more needlessly nesting elements. No more rigid twelve column rules."

style
"A starting point for scalable, maintainable CSS architecture."

Source
"Combines Front-end building with documentation process, making it a powerful tool for productive development and teamwork."

Kickoff
"A lightweight front-end framework for creating scalable, responsive sites."

Unsemantic
"A fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it's entirely based on percentages."

Multimedia Tools

Color blind helper
"An attempt to help color blind people by adding hash patterns on colors."

Soc.js
"An easier way to create social icons."

Isomer
"An isometric graphics library for HTML5 canvas. Isomer allows you to draw isometric graphics with ease."

WebCode
OSX only. A native app that lets you draw vectors and then export them as HTML, CSS, JavaScript or SVG.

css-sprite
"A css sprite generator. Generates sprites and proper css files out of a directory of images. Supports retina sprites. Can inline base64 encoded sprites."

RealFaviconGenerator.net
"Generate the favicon pictures and HTML code that work on all major browsers and platforms."

mozjpeg
"This project's goal is to reduce the size of JPEG files without reducing quality or compatibility with the vast majority of the world's deployed decoders."

SVGMagic
"A simple jQuery plugin that searchs for SVG images (including background-images) on your website and creates PNG versions if the browser doesn't support SVG."

Git, GitHub, and Command Line Tools

postman
A command-line utility for batch sending email. Fast, templated, bulk emails, reads template attributes from CSV, works with any SMTP server.

SketchTool
A command-line app for exporting pages and slices out of documents created with Sketch, the Mac app.

GitCommitMsg
Sublime Text plugin that shows the git commit history for one or more lines of code.

GitPrint.com
"Simply view any Markdown file on GitHub, then in your URL bar replace the github.com part of the URL with gitprint.com — your markdown file will be rendered to a beautiful, printable PDF."

jsonwatch
"Track changes in JSON data from the command line."

HTML Preview
An easy way to preview an HTML file that's on GitHub or BitBucket.

Prose
"A content editor for GitHub designed for managing websites."

Glue
"A simple command line tool to generate sprites:"

Atom
Most have seen this by now, it's a Mac text editor built by the folks at GitHub.

A Tweet for Thought

In response to all the "You might not need jQuery" sentiments floating around nowadays, Addy Osmani has a different piece of advice.

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

This looks cool, it's called Lychee. It's a free photo management tool that runs on your own server.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly