Web Tools Weekly Issue #61 (Number to String, JS Utils, Mobile, Performance)

Issue #61 (Number to String, JS Utils, Mobile, Performance)09/18/14

JavaScript lets you convert any number to a string using the toString() method, but it also has three other number-to-string methods that give you a little more control over the string that results.

First we have Number.prototype.toFixed():

var num = 6723.765128;

console.log(num.toFixed(2)); // "6723.77"
console.log(num.toFixed()); // "6724"
console.log(num.toFixed(5)); // "6723.76513"

This converts the number to a string with a specified number of digits after the decimal point. Notice also the rounding that takes place. When the argument is omitted, it assumes zero digits after the decimal, with rounding.

Then there's Number.prototype.toExponential():

var num = 6723.765128;

console.log(num.toExponential()); // "6.723765128e+3"
console.log(num.toExponential(4)); // "6.7238e+3"
console.log(num.toExponential(10)); // "6.7237651280e+3"

Here the number is converted to a string in exponential notation. It always ends up with one digit before the decimal point, and the argument defines how many digits after the decimal point. Omitting the argument will use as many digits needed to display the number uniquely.

Finally, there's Number.prototype.toPrecision():

var num = 6723.765128;

console.log(num.toPrecision(5)); // 6723.8
console.log(num.toPrecision(2)); // 6.7e+3
console.log(num.toPrecision(11)); // 6723.7651280

In this case, the number is converted to a string with the specified number of significant digits, meaning the total digits before and after the decimal. So in the first example, the last 5 digits are stripped off and it's rounded. The second example converts to an exponent to display the integer portion (before the decimal) because the argument didn't provide enough digits. Also, a trailing "0" is added to the last example, to ensure it's 11 digits in total.

These methods have been around since ES3, so all three are supported in every browser, even back to IE6. Try them out in this JS Bin demo.

Now on to this week's tools!

JavaScript Utilities and Mini Libraries

Smalleditor
A small jQuery and AngularJS-based WYSIWYG editor with delta save, inspired by Medium.

Polyfill service
"Makes web development less frustrating by selectively polyfilling just what the browser needs. Use it on your own site, or as a service."

Timesheet.js
"Visualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well."

Ideal Image Slider
A vanilla JavaScript slider that has just the right amount of features, with no bloat and is easy to extend so that more features can be added as "extensions".

sweep.js
"A small JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HUSL spaces."

Resemble.js
"Analyse and compare images with Javascript and HTML5."

Marka
"Beautiful transformable icons built for the web."

Bubble.js
"Adds listeners to the root of our logical blocks. It uses the bubbling model and nicely catches elements' events."

Basil.js
"The missing Javascript smart persistence layer. Unified localstorage, cookie and session storage JavaScript API."

ngTagsInput
A tagging-based form input for Angular.

JogDial.js
A JavaScript dial-style controller.

DOM Comparator
"A JS Library that compares two DOM Nodes and outputs what changed between the two."

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

RWD and Mobile Tools

Chartist
Highly customizable responsive charts, and a product of a community that was disappointed in the abilities of other charting libraries.

Impulse
"Create high-performance interactions for the mobile web."

AppPresser
"Build iOS/Android apps using WordPress. AppPresser is the fastest and most affordable way to create a mobile app for any WordPress website."

Responsinator
"Helps website makers quickly get an indication of how their responsive site will look on the most popular devices."

nunchuck.js
"Easy multi-device data synchronization through the browser."

Kindling Grid
"A responsive grid system, with some trace elements of style and markup."

squeezr
Device-aware adaptive images and server-side CSS3 media queries.

Tablesaw
"A group of plugins for responsive tables."

Device Lab
This is pretty cool. It's a real physical stand that you can buy to help set up your own device lab for responsive and mobile testing.

pageres
"Capture screenshots of websites in various resolutions."

Tappy!
"A minimal normalized tap event that works with touch, mouse, keyboard, and probably other inputs too."

Performance Tools

PerfBar
"Simple way to collect and look at your website performance metrics quickly, that supports budgeting and adding custom metrics."

Pegasus
"Load your data in parallel with your other scripts."

Perfmonkey
"Makes it very simple to keep track of your website's rendering performance"

grunt-perfbudget
"Grunt task for performance budgeting."

grunt-devperf
Helps you keep an eye on performance metrics and get warnings for things you should optimize.

SpeedCurve
"Get continuous feedback on how your front-end code is affecting the performance of your website."

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

A Tweet for Thought

David J. Bland's reminder not to allow the thing you're building to fall into the Product Death Cycle. I have a feeling a lot of things people build have this problem.

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 like LEGO, you'll love Build with Chrome.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly