Issue #223 (setTimeout args, Productivity, Databases, Charting Libs)10/26/17
JavaScript's window.setTimeout() method is commonly used to create a delay before executing another bit of code. The first two parameters it takes are the function to be called when the delay is complete and the length of the delay in milliseconds:
|
// 3-second delay before executing doSomething()
window.setTimeout(doSomething, 3000);
|
Fairly straightforward and many of you have probably used that before. You can also use an anonymous function in there instead of pointing to a named one. And of course, you can also use clearTimeout() to cancel a timeout that's in progress.
A lesser-known feature available with setTimeout() is the fact that it takes an unlimited number of optional parameters after the delay value. These optional arguments are supported in all browsers including IE10+. These allow you to pass values into the called function:
|
btn.addEventListener('click', () => {
let a = 5,
b = 7;
setTimeout(doSomething, 2000, a, b);
});
function doSomething (a, b) {
op.innerHTML = a + b;
}
|
The code above assumes a button and output element are cached. You can try it out in this JS Bin demo. Notice the "a" and "b" variables that are passed as parameters inside setTimeout(), which are then used inside the doSomething() function.
Of course, this wasn't impossible to do before (e.g. you can use an anonymous function, which then calls another function that passes in arguments), but this is a much cleaner way to accomplish the same thing.
Now on to this week's tools!
|
Productivity Tools
Fenêtre
Picture in picture for your Mac, the future of multitasking.
ExtensionFind & Replace for Text Editing
Chrome extension. Allows you to search and replace text in input areas, useful for long emails, blog articles, forum posts, etc.
Buttercup
A beautifully-simple, secure, cross-platform password manager.
Takt
Time tracking and task management app with offline capabilities.
Dovetail
Organize research data and user feedback, analyze it together, and share insights with your team.
Astrobot
End inbox overload. Modern email apps for Mac, iOS, Android, Slack, and Amazon Alexa, powered by artificial intelligence.
Workspaces
Mac app that remembers what files, resources, etc. are associated with a single project, allowing you to quickly open all resources at once.
AudioNotes
A macOS menu bar app that helps you record and share audio messages really easily.
Manageyum
Manage multiple Slack, WhatsApp, Zendesk, Trello, and more from a single place.
|
Databases, Content, etc.
TablePlus
Native Mac app that helps you easily edit database data and structure. Includes native libssh and TLS to encrypt your connection.
GraphCMS
Build a GraphQL content API in minutes. Lets you build a hosted GraphQL backend for your apps and gives you all the tools you need to manage your content.
mongoist
Node.js module for MongoDB built with async/await in mind, that emulates the official MongoDB API as much as possible.
Dexie.js
Now at version 2+. The easiest way to use IndexedDB. A lightweight, minimalistic wrapper that provides a straightforward API for developers using IndexedDB.
Quilt
A data package manager that lets you manage data like code.
Page.REST
HTTP API to extract content from any web page as JSON. You can get the title, description, from a given public URL.
SQL Notebook
A free Windows app for exploring and manipulating tabular data.
ZangoDB
MongoDB-like interface for IndexedDB that supports most of the familiar filtering, projection, sorting, updating and aggregation features of MongoDB.
Lists
A gallery of real content available in JSON format, ready to populate your mockups.
Kajero
Interactive JavaScript notebooks with clever graphing. This looks great for creating interactive documentation.
|
Charting Libraries, Dataviz, etc.
luma.gl
High-performance WebGL2 components for GPU-powered data visualization and computation.
maptalks
Open-source JavaScript library for integrated 2D/3D maps.
AnyChart
Now at version 8+. JavaScript charts designed to be embedded and integrated.
Rappid
Formerly JointJS, now at version 2+. Diagramming framework for advanced applications, delivering the best of HTML 5 + SVG.
nivo
Provides a rich set of data visualization components, built on top of D3.js and React.
|
A Tweet for Thought
Sara Soueidan's thoughts on writing CSS without a framework. See also the follow up comments in the thread.
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...
Borderline is a marketplace for selling apps that makers have lost interest in or maybe don't have time to maintain or improve. Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
