Issue #60  (Array.reduce(), CSS/HTML, jQuery, Automation)09/11/14

Support one of this week's sponsors:

Ghost Inspector Ghost Inspector
Ghost Inspector is the automated website testing platform you've been waiting for! Record website tests with our Chrome extension, or build them manually with the GUI. Instantly sync your tests to the cloud. Run them continuously to check your website for issues. Try it free! 

All browsers, including IE9+, support the Array.reduce() and Array.reduceRight() methods. Here's an example of Array.reduce, using an array of numbers:
var myArray   = [2, 4, 6, 8, 10],
    myReduced = myArray.reduce(function (a, b) {
      return a + b;
    }, 0);

console.log(myReduced); // 30

(JS Bin demo)

What this does is "reduce" the original array to a single value. The first argument in reduce() is a function that performs the reduction operation. The second argument is an initial value that you want to pass into the reduce() function, which becomes the "a" variable in the example above.

For the example above to end up with the result of "30", the basic logic goes like this:
  • On first iteration, the function adds 0 + 2 (the second argument + the first array element)
  • On second iteration, the function adds 2 + 4 (result of previous iteration + second array element)
  • On third iteration, the function adds 6 + 6
  • And so on...
So in the above example, if the second argument was "10" instead of "0", then you'd end up with a final return of "40".

The Array.reduceRight() method does exactly the same thing, except it goes through the array values from right to left (starting with the last item). Here are some notes on Array.reduce() and reduceRight():
  • The second argument is optional. If it's omitted, the function simply begins with the first two values of the array.
  • If you call one of these methods on an array with a single element and with no second argument, it returns the single element.
  • The final "reduced" value is no longer an array. In the case above, it's of type "number".
  • These methods are not limited to math computations; they can reduce any kind of array and can use any kind of logic in the function to produce the final value.
  • There is no optional argument to define the value of this when invoking the function, but you can optionally use Function.bind() for that.
  • The callback function takes two further arguments: The third is the current index of the current array element, and the fourth is the array itself. So you can modify the original array inside the function if you want.
See Array.reduce() on MDN for more info.

Now on to this week's tools!

CSS and HTML Tools

"A JavaScript helper for cross-browser CSS Regions support. Lets you use CSS Regions content written for WebKit browsers in Internet Explorer 10 or later."

CSS Shapes Editor
A Chrome extension (requires Chrome 37+) that lets you create and adjust CSS Shapes values with an interactive editor overlapping the selected element. 

Tumblr-style Cog Loaders
"Tumblr-style cog loading animation made with CSS and SVG icons."

A CSS methodology that helps you author modular, reusable CSS components, rather than page-specific styles or abstract objects.

A GUI flexbox page layout composer that lets non-developers create flexbox layouts without needing to know much HTML or CSS.

"A fun CSS animation tool, powered by Rekapi. Quickly design your animation graphically, grab the generated CSS and go."

CSS Gradient Inspector
Chrome extension that "extends the Developer Tools, adding a sidebar that displays information about the gradients applied to the inspected element."

Chrome extension. "Character counter for helping to optimize line length (measure) between 45 and 75 characters."

A GUI tool to help you "establish a typographic system with modular scale and vertical rhythm."

In line with the latest craze in front-end performance, this tool finds the above-the-fold CSS for your page, and outputs it into a file.

"CSS selectors complexity and performance analyzer."

Agile CSS3 Engine
A simple, fast and easy to use engine that uses JavaScript-generated pure CSS3.

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

jQuery Plugins and Tools

"Interactive hints and tips for your website or app."

"Lightweight jQuery extension for dynamically changing font sizes according to screen / browser width. Intended to be used with responsive or adaptive CSS layouts."

jQuery Bootgrid
"Nice, sleek and intuitive. A grid control especially designed for bootstrap."

Attractive alerts and notifications.

jQuery FocusPoint
"For 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images."

"A parallax scroll effect plugin."

"A jQuery plugin for responsive navigation."

"Easy as hell jQuery plugin for video backgrounds."

Guesses which element is going to be hovered or clicked, based on mouse behaviour.

jQuery Accordion
"Responsive, CSS powered, jQuery accordion plugin."

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


Automation, Deployment, etc.

Grunt Email Design Workflow
"A Grunt workflow for designing and testing HTML email templates with SCSS."

"A next-generation package manager for the front-end."

"An all-in-one task runner that frees front-end developers of the little worries that come along with modern web development."

Gulp as an app, for OS X.

Statistical renaming, type inference, and deobfuscation for your scripts.

Gulp Fiction
"This is another approach to enable you to shorten the build setup with a graphical user interface for automatic gulp.js creation and file upload for Dropbox or direct download."

Phở Devstack
"Automated workflow for front-end developers in one tasty bowl of code. Compiling, minifying, auto-refreshing, CSS prefixing, image sprites…"

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

A Tweet for Thought

Web developer Adrian Holovaty shares one of the sad realities of CSS.


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

Tim Evko is compiling a resource called Free for Developers, that links to the pricing pages for apps and services that offer a free plan.

Thanks to all for subscribing and reading!

Keep tooling,
Copyright © Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp