Issue #235 (Func.length w/rest, Media, Databases, React)01/18/18
Here's a super-quick tip related to the rest operator, which is a new feature in ES6. As I discussed way back in issue #59, every function has a length property that allows you to expose the number of arguments that a function is expecting. For example:
|
function myFunc (a, b, c, d) { }
console.log(myFunc.length) // 4
|
The length property of this function has a value of 4 because, as shown in the code, the function is expecting four arguments. Simple enough, right? But what if you're using rest parameter syntax?
If you're familiar with rest syntax, this feature allows you to use three dots in front of the final argument to represent an indefinite number of arguments as an array. Here are a few examples that use the length property on the function while incorporating rest syntax:
|
function myFunc1 (a, ...b) { }
function myFunc2 (a, b, c, ...d) { }
function myFunc3 (...d) { }
console.log(myFunc1.length); // 1
console.log(myFunc2.length); // 3
console.log(myFunc3.length); // 0
|
JS Bin demo
As you can see, using rest syntax doesn't add to the function's length value. Whatever arguments are expected are the only ones counted, so even if a rest argument is the only argument, the length property has a value of zero.
Just something to keep in mind if you happen to get unexpected results when checking a function's length while incorporating rest syntax.
Now on to this week's tools!
|
Media Tools
Pantheon
Fast, reliable hosting for WordPress and Drupal sites with HTTPS and global CDN included with every plan. sponsored via Syndicate
Super Tiny Social Icons
Under 1kb SVG versions of various social network logos. The average size is under 550 bytes, 512x512 viewbox (fits a circle with a 256px radius).
Let's Enhance
Image upscaling supercharged. Remove JPEG artifacts, upscale 4X, preserve quality. One-click and free.
js-code-to-svg-flowchart
A visualization library to convert any JavaScript code into a beautiful SVG flowchart. Includes a live online code editor.
Trendy Sound Effects Editor
Add trendy sound effects directly to your video in just a few clicks. Choose from over 30 popular sound effects, from Pikachu to Pacman.
nanogl
A WebGL microframework.
Orion Icon Library
Online icon tool plus thousands of really nice looking free SVG icons.
Carbon
Create and share beautiful images of your source code. Paste some code in or drop a file onto the page. Great for presentations.
Frappé Charts
GitHub-inspired simple and modern charts for the web with zero dependencies.
SpeechBoard
Great idea to edit podcasts. Upload your audio file and this tool will spit out a transcript. When you edit the transcript, the edits will be reflected in the audio.
UI Avatars
An API to generate placeholder avatars with initials from names.
Tone.js
Framework for creating interactive music in the browser. Provides advanced scheduling capabilities, synths and effects, and intuitive musical abstractions built on top of the Web Audio API.
|
Database Tools, Content, etc.
SQL Operations Studio
Data management tool that enables you to work with SQL Server, Azure SQL DB and SQL DW from Windows, macOS and Linux.
GiraffQL
An interactive GraphQL exploration tool built with React.
Strongbox
A "secret" manager for AWS. Manage and access secrets (access tokens, encryption keys, private certificates, etc) via the GUI, CLI or Java SDK.
mocker-data-generator
Generate massive mock data based on a schema, using existing data generators, all in one tool to generate your fake data for testing.
Datasette
An instant JSON API for your SQLite databases.
PopSQL
Modern, collaborative SQL editor for your team. Write queries, visualize data, and share your results.
Lowdb
Small JSON database for Node, Electron and the browser. Powered by Lodash.
Amazon DynamoDB
Fast and flexible NoSQL database service for any scale. Pay only for the throughput and storage you need.
link.fish
Turn websites into structured data. Collect data from websites for research, marketing, competitor analysis, lead generation and much more.
|
React Tools
React Chartkick
Create beautiful JavaScript charts with one line of React.
unistore
A tiny ~650b centralized state container with component bindings for Preact and React.
React Spreadsheet Grid
Excel-like grid component for React with custom cell editors, performant scroll, and resizable columns.
React Scroll-To
Scroll to a position in React. A React component that makes scrolling easy. Provides a Higher Order Component, and Render Props implementation.
DraftJS Plugins
A set of plugins for Draft.js, the React-based rich text editor from the Facebook dev team.
React Idle
Notifies your app when the user is idle.
React-Sight
Chrome extension that extends DevTools, adding a sidebar that displays React component hierarchy.
i-chatbot
Simple and elegant component for building conversational interfaces in React.
|
A Tweet for Thought
Do what he says. I promise, you won't regret it.
Send Me Your Tools!
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...
If you're a fan of musician Neil Young, you'll want to check out the Neil Young Archives, a newly-launched site with all of his music.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
