|
|
|
|
Issue #42 (call/apply, Sass, jQuery, Mobile)05/08/14
Support this week's main sponsor:
For this week's tip I'm excited to have a guest contributor, Derick Bailey. Derick is an author, blogger, and speaker and he produces JavaScript screencasts at WatchMeCode. Be sure to check that out and use discount code webtoolsweekly to get 35% off the subscription price.
In issue #39 of Web Tools Weekly, Louis introduced several methods of function invocation. He showed how various invocation patterns change the value of this inside of methods, and left off with a mention of the .call() and .apply() methods. These methods exist on all functions — that's right, every JavaScript function has functions attached to it. The purpose of these methods is to let you execute a function with a specified context and also to let you supply parameters to the function in two different ways.
Using .call()
When using .call() on a function, the first parameter will be the context or the this variable. Any additional parameters passed in will be passed as arguments to the original function.
function doStuff(b){
return this.a + b;
}
var myContext = {a: 1};
var result = doStuff.call(myContext, 2);
console.log(result); //=> 3
|
(Demo) You can supply any number of arguments to the .call() method, and all of them will be passed to the original function after setting the context.
doStuff.call(myContext, 1, 2, [... n]);
|
The .call() method is most often used when you need to dynamically call a function with a given context and a set of values that you already have as variables.
Using .apply()
The use of .apply() is essentially the same, except you pass in an array as the second parameter and that array gets passed through to the original object as the list of arguments.
function doStuff(b, c){
return this.a + b + c;
}
var myContext = {a: 1};
var result = doStuff.apply(myContext, [2, 3]);
console.log(result); //=> 6
|
(Demo) If you try to pass more than 2 parameters to the .apply() method, you'll get an error.
The .apply() method is most often used when you need to dynamically call a function with a given context and a set of values in an array, such as splitting the arguments object from another function.
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!
Preprocessor Tools
Bourbon Neat
"A lightweight semantic grid framework for Sass and Bourbon."
Less Elements
"A set of basic mixins for the LESS CSS pre-processor. Most of these mixins focus on consolidating cross-browser prefixes into single, concise declarations."
True
"Testing tools for compass/sass."
Modular Scale
"Modular scale calculator built into your Sass."
SassyIcons
"Flexible system to manipulate icons, SVG, PNG, sprites. Works on top of compass sprite tools. It was designed to easily switch between SVG and PNG while working with icons as background-images."
otfeatures
"A Sass mix-in for turning OpenType features on and off in your embedded web fonts."
Hacking made easy
"A couple of Sass functions to ease the pain of dealing with special values for IE."
Saffron
"A simple sass mixin library for animations and transitions."
Breakup
"A Sass component that allows you to create multiple CSS files from a single Sass partial by wrapping your code within breakpoint blocks."
jQuery Plugins
imgLiquid
"jQuery plugin to resize images to fit in a container."
Carousel
"A responsive carousel for cycling through objects." Uses CSS transitions and works with slide or fade.
jQuery Panorama Viewer
"Embed interactive Panorama Pictures on your site with this simple plugin."
rangeslider.js
"Polyfill for the HTML5 <input type="range"> slider element."
BootstrapValidator
A form validation plugin, designed to be used with Bootstrap 3.
slick
"The last carousel you'll ever need. Fully responsive. Scales with its container. Separate settings per breakpoint. Uses CSS3 when available. Fully functional when not."
Textillate.js
"Combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text."
BttrLazyLoading
"Allows your web application to only load images within the viewport. It also allows you to have different version of an image for 4 different screen sizes."
CurvedText
Align text on a curve.
RWD and Mobile Tools
Restive.JS
"A jQuery Plugin that helps you quickly and easily add features to your Web Site to enable it respond and adapt to virtually every Web-enabled Device."
Android WebPagetest
A fork of WebPagetest.org specifically for Chrome on various Android devices.
Responsive Design Tester
Yet another responsive layout tester. Has some presets along with a two-paned adjustable view.
FlexNav
jQuery plugin for responsive menus. "A decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility."
Viewporter
"A simple in-browser tool created by developers at BBC Sport for checking how a responsive website responds to different screen sizes."
Ratchet
"Build mobile apps with simple HTML‚ CSS‚ and JS components."
rwd.images.js
"Yet another lightweight, customisable responsive image solution."
A Tweet for Thought
From Viljami Salminen, all the dashes in web typography.
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 use MailChimp, you might find Mailion useful. It's an app that lets you edit your subscriber lists super fast in bulk, multiple fields at a time.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
