|
|
|
|
Issue #176 (console.time(), CSS/HTML, JS Utils, Performance)12/01/16
| Check out this week's sponsor: |
 |
Test website w/ WAPT Pro
Have you ever tested the performance of your website? Do it now with WAPT Pro and learn how your website performs under various load conditions. Easy to use: The test is created in a matter of minutes. Customizable test report with over 20 tables. Get free 30-day trial. |
The book Secrets of the JavaScript Ninja is now in its second edition. If you're serious about making progress as a JavaScript developer, I highly recommend it. In the introductory sections, the authors introduce three primary best practices that are part of being an expert app developer. One of those is performance analysis.
To help with this, the book provides a simple example to demonstrate what they'll do in later examples to collect performance information. The example uses the console API to measure the time that it takes for a section of code to run. Here's an example similar to the one provided in the book:
|
console.time('My Operation');
for (var i=0;i<10000;i++) {
// perform operation here...
}
console.timeEnd('My Operation');
|
I'm sure many of you already know this technique, but for those of you who have only used the log() command of the console API, this is a new one you can add to your repertoire. The gist of it is that you sandwich the code you want to speed test between console.time() and console.timeEnd() calls.
The string passed into console.time() is a label parameter that needs to be exactly the same as that passed into console.timeEnd(), because this is the identifier for this particular timer. When the code finishes running, the console.timeEnd() call will spit out the time of the operation in the console.
You can test out my example in this demo where I'm toggling a class on the body element 10,000 times. Make sure to open up the real console in your browser's developer tools rather than the JS Bin one because JS Bin doesn't display the time. In my testing in Chrome, I got varying results between 5ms and 9ms.
The book mentions that it's common to do something like this where you perform a single operation thousands or maybe even millions of times to measure something so that you can get a reliable measurement. For example, toggling a class once would take maybe a fraction of a millisecond at most and so that wouldn't be very helpful.
Definitely grab a copy of the book if you want more tips like that.
Now on to this week's tools!
Buy my JavaScript/DOM e-book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
CSS and HTML Tools
CSSPIN
"CSS spinners and loaders – modular, customizable and single HTML element code."
grid-kiss
If this really works, this is brilliant. "PostCSS plugin aiming to replace the 24 new properties brought by CSS Grids with a single one that you immediately understand when you see it."
funcssion
"The atomic CSS library. funcssion is a set of really simple CSS classes, with a single purpose, inspired by the philosophy behind pure functions."
CSS Loader
"Simple loaders for your web applications using only one div and pure CSS."
Reshake
A React component that implements CSS Shake, a CSS library that allows you to add shake movements to DOM elements.
Normalize.css
The world's most popular CSS reset is now at version 5.x.
Gutenberg
A modern print style sheet framework.
postcss-resemble-image
PostCSS plugin to provide a gradient fallback for an image that loosely resembles the original.
HUE.css
"A pack of 49 photorealistic gradients that you can use as content backdrops in any part of your site. A little play with CSS blend modes too."
 |
Fundraise With Confidence
Raising capital is hard. Let Toptal hand-match you with on-demand finance experts to help navigate your next round of fundraising. No-risk trial.
(ads by LaunchBit)  |
|
JavaScript Utilities and Modules
Huebee
"A JavaScript library for creating user-centric color pickers. Huebee displays a limited set of colors so users view all colors at a glance, make clear decisions, and select a color with a single click."
vue-router
"The official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze.
welcome.js
"A tiny JavaScript file you can add to any web page to help novice users get the most out of the web."
Chartify
"Simple, ultra lightweight (<1kb!) & customizable React.js chart library."
snapper
"A CSS Snap-Points based carousel (and lightweight polyfill)."
Strelki.js
An array library that allows you to create arrays with multiple hash indexes and lets you join arrays similar to SQL's JOIN operator.
LoadJS
"A tiny async loading library for modern browsers (IE9+)."
edux-es5
"Redux, with just ES5. Fully supports connect bindings to React."
Smooth Scrollbar
"Customize scrollbar in modern browsers with smooth scrolling experience."
Performance Tools
turbo.js
"Offload complex parallel calculations to the GPU and get JS-accessible results with a single call. Crunch tens of millions of numbers at once."
GTmetrix
"Analyze your site’s speed and make it faster. GTmetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it."
pageAccelerator
"An agnostic library that uses Ajax and pushState to deliver a faster navigation experience. pageAccelerator is a very light version of turbolinks and pjax (our minified file is just 2.2KB)."
Speed Monitor
Website performance reports for Slack, Rocket.chat & Mattermost using the performance.timing API.
Turbolinks™
"Makes navigating your web application faster. Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework."
Vue Preload
"Preloading data for Vue." The live demo is worth checking out to see the speed difference.
InstantClick
Preloads links users are likely to click on. The previous tool above is inspired by this one, which is the original idea.
A Tweet for Thought
Anneliese wisely thinks it's ok for you to take a break.
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...
Blynker will notify you to look away from your screen every 20 minutes. Good advice to maintain eye health.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
