Issue #43 (bind(), Testing, Productivity, JS Libs)05/15/14
(Skip to the tools section below)
Check out this week's main sponsor:
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 last issue of Web Tools Weekly, I briefly demonstrated the use of .call() and .apply() for function invocation. These methods allow you to specify the context of a function as well as any parameters needed for that function. There's one more method that let's you change the context for a function: The .bind() method.
Using .bind
The .bind() method call exists on all JavaScript functions, the same as .call() and .apply() (available since ES5). The major difference between .bind() and .call() / .apply(), is that .bind() will not invoke the function in question. Instead, it returns a new function to you. Invoking this new function will in turn invoke the original function with the context that was specified in the .bind() call.
In other words, .bind allows you to set the context of a function without invoking it.
function doStuff(b, c){
return this.a + b + c;
}
//bind the function to a context
var myContext = {a: 1};
var boundStuff = doStuff.bind(myContext);
// call the bound function with additional params
var result = boundStuff(2, 3);
console.log(result); //=> 6
|
(Demo) In this code, the original doStuff() function is "bound" to the myContext object as the context. This results in a new function referenced in the boundStuff variable. Now when the boundStuff function is invoked — and no matter how it is invoked — the this variable of the original function will always be set to the myContext object.
It's important to note that this is true only for invoking the boundStuff function, though. If you invoke the doStuff() method directly, you will still be able to set the context as needed.
But Wait! There's More!
This isn't all you can do with .bind, though. In next week's issues, I'll show you one more trick you can do with it.
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!
Testing and Debugging Tools
BrowserSync
"Makes your workflow faster by synchronising URLs, interactions and code changes across multiple devices."
Finch
"View your local websites on any internet connected device."
React Developer Tools
"A Chrome DevTools extension for the open-source React JavaScript library."
Debug Utils
Advanced JavaScript Debugging Utility Library. Log and break on object property access, custom JavaScript and DOM events, method calls, and callbacks.
Akbar
"A bookmarklet that will simulate various types of user experiences." Chrome and Safari only. Will mimic low vision, color blind, blind, and keyboard only use.
grunt-photobox
"Grunt plugin for creating screenshots of any site and compare them."
Huxley
"Huxley is a test-like system for catching visual regressions in Web applications. It watches you browse, takes screenshots, and tells you when they change."
DalekJS
"Automated cross browser testing with JavaScript."
Productivity Tools
uKeeper
"Just email your link to drops@ukeeper.com and uKeeper will send a full, clean webpage back. uKeeper helps to keep your web archives in any mailbox and preserve anything important or interesting you found on the Internet."
Pintask
"Make yourself a perfect task tracker."
Respondly
"Team inbox for Email & Twitter."
NowSpeak
"If you're tired of large-group conference calls where everyone speaks at the same time, and an awkward latency makes it hard for users to understand each other, NowSpeak could bring a viable solution to your problem."
friends incognito
"Completely anonymous discussions with friends."
Squirt
"Speed read the web, one word at a time."
Awesometalk
"Free video calling without the hassle." Also comes as a Chrome extension.
mailparser.io
"Stop your copy & paste routine. Pull data from incoming e-mails and automate your workflow within minutes."
JavaScript Libraries and Frameworks
QuoJS
"A micro, modular, Object-Oriented and concise JavaScript Library that simplifies HTML document traversing, event handling, and Ajax interactions for rapid mobile web development."
FluidJS
"A new Model View Controller (MVC) designed to make it easier for webapps to have smooth transitions and animations."
Matter.js
"A 2D physics engine for the web."
Mithril
A 3kb gzip'd library with no dependencies, a small API, and small learning curve.
Weya.coffee
"A lightweight library with no dependencies to generate DOM elements. We developed it to replace Coffeecup as a client side template engine."
Vue.js
"A library for building interactive web interfaces. It provides data-driven components with a simple and flexible API."
EdisonJS
"A JavaScript router that simplifies the structure of complex single-page applications by encouraging developers to organize their applications as a series of parent ("section") <-> child ("route") relationships."
Two.js
"A two-dimensional drawing api geared towards modern web browsers."
A Tweet for Thought
UX specialist Veronica Massoud reveals some interesting test results on Facebook's iOS app.
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...
Here's an interesting website: webcompat.com which aims to be a one-stop location for reporting and finding bugs for any website and any browser.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
