Issue #188 (func.props, CSS/HTML, Testing, Uncats)02/23/17
In the book Secrets of the JavaScript Ninja, the authors discuss a technique called memoization, in which they make use of a JavaScript feature I wasn't previously aware of.
If you want a good intro to memoization, this article by Addy Osmani is a good start or you can grab a copy of the aforementioned book. The specific feature I'm referring to, however, is used in the book and in Addy's article.
Briefly, memoization is a way to allow a function to remember previously computed results, so as to avoid repeating highly-intensive computations unnecessarily. So a memoization function will cache results and this can be done by taking advantage of the fact that functions are objects on which you can attach properties.
Below is a rudimentary example of the basic principle of using function properties to cache values so you'll know if the function has already been run. Note that this is not a proper memoization technique, this is just to demonstrate the properties-on-functions technique:
|
let id = 1;
function checkItOut (fn) {
if (fn.done) {
fn.done = id++;
console.log('Function run #' + fn.done);
} else {
fn.done = id++;
console.log('First function run (' + fn.done + ')');
}
}
function doSomething () {
// nothing needed here...
}
checkItOut(doSomething); // "First function run (1)" checkItOut(doSomething); // "Function run #2" checkItOut(doSomething); // "Function run #3"
|
Live demo here
In this code, the doSomething() function (paradoxically) does nothing. But each time I call it, I'm attaching the incrementing value of the id variable to that function's "done" property. This gives the function a sort of memory of itself, so I can tell how many times it's been called. In the demo you can see that each log has a new value.
As mentioned, this is not proper memoization, this is just a silly example to demonstrate that you can attach properties to functions, and how this might be useful. The book discusses this in greater detail and there are lots of sources online, including the aforementioned article, for a better understanding of memoization. You might also want to check out this memoization tool.
Now on to this week's tools!
|
CSS and HTML Tools
Accessible color palette builder
Online tool to help designers build color palettes with combinations that conform with accessibility standards.
wkhtmltopdf
Open source command line tools to render HTML into PDF.
gr8
FUNctional CSS shorthand utilities. Both a handy set of functional CSS utilities, as well as a handy tool for generating functional CSS utilities.
Luxbar
featherweight, responsive, CSS-only navigation bar.
Ensure Animation
A simple JS module to ensure a CSS animation plays continuously through to the end animation frame.
Vista
Uses generated CSS in single-page apps to provide declarative, URL-driven control of when (or how) any elements in your page are displayed.
Styletron
A universal CSS-in-JS engine built from the ground up for high-performance.
css-literal-loader
A webpack loader for extracting and processing CSS defined in other files.
CSSRooster
A bot that writes CSS classes for HTML with deep learning.
glamor
Inline CSS for React and similar UI libraries and frameworks.
|
Testing and Debugging Tools
Carte Blanche
An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.
Service Mocker
The next generation front-end API mocking framework.
accesslint.js
Include this script, then run your PhantomJS browser tests to get accessibility warning logs, or open your browser and get automatic warnings in the JavaScript console.
Backtrac
Catch visual bugs before they hit production. Compare your test environment with production.
pwmetrics
In beta. CLI tool and library to gather performance metrics via Lighthouse, Google's auditing and perf metrics tool for PWAs.
Prometheus
An open-source monitoring system with a dimensional data model, flexible query language, efficient time series database and modern alerting approach.
Keen IO
A set of powerful APIs that allow you to stream, compute, and visualize events from anything connected to the internet.
|
The Uncategorizables
Sizzle Analytics
Create interactive data visualizations with an easy-to-use, drag-and-drop designer.
hexspector
A tool for viewing hex dumps of buffers in your browser.
node-wpapi
An isomorphic JavaScript client for the WordPress REST API that makes it easy for your JavaScript application to request specific resources from a WordPress website.
Launchaco
Helps you name your business. Instantly search domains, social media handles and beautiful logotypes.
ChromeVox
The ChromeVox (Classic) screen reader is a Chrome extension that brings the speed, versatility, and security of Chrome to visually impaired users.
CyberChef
The Cyber Swiss Army Knife. A web app for encryption, encoding, compression, and data analysis.
FlyWeb
A Mozilla project focused on bringing a new set of APIs to the browser for advertising and discovering local-area web servers.
|
|
