Web Tools Weekly Issue #178 (Math.abs(), Frameworks, Productivity, JS Utils)

Issue #178 (Math.abs(), Frameworks, Productivity, JS Utils)12/15/16

Check out this week's sponsor:

Senior UI/JavaScript Frontend Engineer
Close.io is looking for experienced full-time, remote Frontend Developers who have a strong understanding of web technologies and want to help design, implement, and launch major user-facing features. Find out more here!.

I'm sure many of you have seen the Math.abs() method, which is one of the many properties and methods available on JavaScript's built-in Math object. Math.abs() returns the absolute value of a number (hence, "abs"). So you pass in something and it will either give you zero, NaN, or the absolute number of what's passed in.

Unlike other methods, this is not a constructor. So you can't call abs() on an object you've created. In the code example below, you'll see the results you get when you try passing in different things:

Math.abs(.57);       // 0.57

			Math.abs(4.65);      // 4.65

			Math.abs('-1');      // 1

			Math.abs(-2);        // 2

			Math.abs(null);      // 0

			Math.abs('');        // 0

			Math.abs([]);        // 0

			Math.abs([2]);       // 2

			Math.abs(Infinity);  // Infinity

			Math.abs(-Infinity); // Infinity

			Math.abs(3,000);     // 3

			Math.abs(3, 'd');    // 3

			Math.abs([1,2]);     // NaN

			Math.abs({});        // NaN

			Math.abs('5abc');    // NaN

			Math.abs();          // NaN

View on JS Bin

You'll notice that fractions using decimals are returned intact, while strings that are numbers will return the number correctly. Meanwhile non-number strings and objects return NaN. Also notice that multi-item arrays with all numbers will return Nan, while a single item array will return the number. A somewhat strange behavior is the fact that empty strings or empty arrays will return zero.

Also notice that when I tried to enter a number with a comma (which I doubt would ever happen), the digits after the comma are treated as a second argument, which is ignored, returning the absolute value of the first argument. And the same happens with a string as the second argument.

Now on to this week's tools!

Buy my JavaScript/DOM e-book:

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

Front-end Frameworks

Riot.js
Now at version 3.x. "Simple and elegant component-based UI library. Custom tags, enjoyable syntax, elegant API, tiny size."

Nuxt.js
"A minimalistic framework for server-rendered Vue.js applications."

egjs
"A set of UI interactions, effects and utilities components library."

Kendo UI
"The most complete UI library to speed up your HTML/JS development. Build rich, smart HTML5 and JavaScript apps for any platform, browser, or device."

iView
A high quality UI components library built with Vue.js.

React/Redux/SaSS/Webpack
"A super bare-bones boilerplate for this super common setup. No server-side code."

Material Design for Bootstrap
"400+ material UI elements, 600+ material icons, 74 CSS animations, SASS files, templates, tutorials and many more. All fully responsive. All compatible with different browsers."

Blueprint
"A collection of React UI components that cover the majority of the common interface elements, patterns, and interactions on the web."

Productivity Tools

Firefox Focus
"The privacy browser. Browse like no one’s watching. The new Firefox Focus automatically blocks a wide range of online trackers."

LessPass
"Next-gen open source password manager. Stop wasting your time synchronizing your encrypted vault. Remember one master password to access your passwords, anywhere, anytime. No sync needed."

Inbox When Ready for Gmail™
Chrome extension. "This extension hides your Gmail inbox by default, so you can search your archive or compose messages without getting distracted."

AccessURL
Chrome extension. "Share accounts without giving away your password."

Resilio
"Sync everything. Resilient, fast and scalable file synchronization for enterprise, workgroups and individuals."

Minbox
Connect to Dropbox, Google Drive, Box, Evernote, Slack, and OneDrive. Once a cloud is connected, you can sync specific files or folders with your Minbox that you can then share with your colleagues or clients.

Riot
"Allows teams to communicate across a wide range of collaboration apps. If some team members use Riot while others use IRC, Slack or Gitter, Riot will allow these team members to seamlessly work together."

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

JavaScript Utilities and Modules

Diæresis.js
"The preëminent JavaScript library for diacritical correctness."

Vuelidate
Simple, lightweight model-based form validation library for Vue.js 2.0.

Floating.js
Float a number of things up on a page (hearts, flowers, emojis, words...) Use with caution! :)

Angular 2 Idle Preload
"Angular 2 Idle Preload for preloading async/lazy routes using requestIdleCallback (or fallback to setTimeout which is run outside of zone.js)."

Amazon Autocomplete
"The full power of the Amazon autocompletion engine in your search input."

Immutable.js
"Immutable persistent data collections for JavaScript which increase efficiency and simplicity."

ng2-rest-api
"A REST API provider for Angular 2."

medium-draft
"A medium-like rich text editor built upon draft-js with an emphasis on eliminating mouse usage by adding relevant keyboard shortcuts."

384 Pages of CSS for $7 (PDF E-Book)

A Tweet for Thought

According to Alex Russell, something important is happening in JS land...

Suggestions / Corrections

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.

Before I Go...

You might want to take a look at Ashley Nolan's The State of Front-End Tooling 2016 survey results.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly