Web Tools Weekly Issue #56 (Array.map(), jQuery Plugins, JS Utils)

Issue #56 (Array.map(), jQuery Plugins, JS Utils)08/14/14

The Array.prototype.map() method is supported everywhere including IE9+. It's a simple and easy to understand method that adds a little extra to array manipulation. Here's some example code:

var myArray = [5, 20, 34, 45, 65, 98, 123],
    mapArray;

mapArray = myArray.map(function (a) {
  return a*a;
});

console.log(mapArray);
// new array:
// [25, 400, 1156, 2025, 4225, 9604, 15129]

(Demo) Here we have an array of random numbers, then we call the map() method on our array, creating a new array called mapArray. The map() method passes each of the original array's elements into the supplied function, and returns a new array containing the elements as modified by the function. In this case, we're multiplying each element by itself.

The returned array, as mentioned, is a new array, and, unless the function itself does something to manipulate the original array, it does not affect the original array's elements. If the original array had missing elements, the new array would mirror this, having the same length and same missing elements. Also, if the number of elements in the original array changes after map() is invoked, the function will not act on those new values; it will act only on the elements of the original array, before map() was invoked.

As with other methods, map() takes an optional second argument that defines the value of this when executing the function.

Be sure to check out the MDN article, which has some neat examples along with a polyfill for IE8.

Now on to this week's tools!

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

jQuery Plugins

smoothState.js
"Lets you add transitions to eliminate the hard cuts and white flashes of page loads that deface the beauty of the user experience."

Justified.js
Lets you create a "justified" image gallery, even when the images are of varying widths.

MagicSuggest
"Multiple selection combobox built for bootstrap themes."

Points Of Interest
"Highlight the points of interest of your products. Just a click to open a brief description of each point, allowing your user to get a deep and fast understanding of your product features."

Tooltipster
"A powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS."

MobileMenu
A tiny very customizable jQuery plugin that creates an off-canvas menu that can hold different types of content.

Trumbowyg
"A light, translatable and customisable jQuery plugin. Beautiful design, generates semantic code, comes with a powerful API."

Dense
"Offers an easy way to serve device pixel ratio aware images, bringing in retina support to your website. Clear the blurry, images be crisp."

Selectize
"The hybrid of a textbox and select box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on."

NumberProgressBar
A nice looking progress bar plugin that uses numbers indicating the progress reached.

Stellar.js
A parallax scrolling plugin.

Selectonic
"For making any list of items selectable by mouse and keyboard."

Mr.JsonTable
"HTML table from JSON data with paging sorting and hideable columns."

SideComments.js
An interface component to give your website Medium-style comments.

JavaScript Utilities and Mini Libraries

Countable.js
"Add live paragraph-, word- and character-counting to an HTML element. Countable is a zero-dependency library and comes in at 1KB when minified and gzipped."

baguetteBox.js
"Simple and easy to use lightbox script written in pure JavaScript."

Rome
"Customizable date (and time) picker. Opt-in UI, no jQuery!"

elq.js
"A Tiny library that can parse CSS, detect element-queries, and implement them in JavaScript."

Reactable
"Fast, flexible, and simple data tables in React."

underscore-s
"Pythonic array slicing in JavaScript."

Papa Parse
"Powerful CSV (delimited text) parser that gracefully handles large files and malformed input."

Springy
"A force directed graph layout algorithm in JavaScript."

Is
"A better way to write JavaScript conditional statements and still have pretty code."

scrollFrame
"Retain your scroll position between pages using an iframe. Especially helpful for infinite scrolling views."

Blast.js
"Separates text in order to facilitate typographic manipulation."

smallworld.js
"For generating map overviews using GeoJSON and HTML Canvas. It was created out of a need to render simple map previews, quickly and efficiently, without strict Terms of Use and without heavy client libraries."

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

A Tweet for Thought

Nicholas Zakas' quotes Pamela Fox at VelocityConf on how browsers should handle loading of below-the-fold resources.

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

I couldn't help but laugh at how seriously this question was taken on StackOverflow: How to pair socks from a pile efficiently?

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly