Web Tools Weekly
What a Tool!

Issue #312  (JS Engines, JS Utils, Build Tools, React)

Advertisement via ThoughtLeaders
Your Job Search, Simplified.
Stop tooling around and let top companies such as Dropbox, WeWork, Grubhub and more apply to you. Get salary details upfront, before the interview. Choose the tech stack you want to work on. Make the salary you deserve.
Try Hired

I just came across an extensive article by Valentino Gagliardi that I think is worth a read for anyone building JavaScript web apps:

Lots of good info in a down-to-earth non-jargony manner that I think most can understand and benefit from (Valentino's English is not perfect, but that's not a problem in this case).

Subjects covered include the Call Stack, Synchronous vs. Asynchronous code, how Promises solve "callback hell", and tons more just on Promises. I think if the concept of Promises is something new to you, that alone might make this worth a read.

But overall, any improved understanding of how the browser executes JavaScript is going to be beneficial to those working worth JavaScript in a browser environment.

Now on to this week's tools!

JavaScript Utilities and Modules

Your Job Search, Simplified.
Stop tooling around and let top companies such as Dropbox, WeWork, Grubhub and more apply to you. Get salary details upfront, before the interview. Choose the tech stack you want to work on. Make the salary you deserve.    ad via ThoughtLeaders 

Declarative client-side transclusion, using Custom Elements V1. Perfect for Microfrontend architectures, in combination with server-side transclusion technologies like Edge-Side Includes.

A small set of helper functions to help do almost-library-free JavaScript.

Convert character encodings in pure JavaScript.

A library for deep (recursive) merging of JavaScript objects.

Now at version 1+. A popular JavaScript library that helps construct difficult regular expressions.

An easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.

A JavaScript PDF generation library for Node and the browser.

Iteration helpers that inline to native loops for performance.

A Promise-based API for setTimeout / clearTimeout.

URL Pages
Create, view, and edit web pages stored entirely in the URL. More of a proof-of-concept, but interesting to see that this can be done.

Smooth animation library for interpolating numbers.

JavaScript and CSS timeline-based animation library.

Build Tools, Bundlers, etc.

JavaScript & DOM Scripting E-Books Bundle - $12.99
350+ pages of JavaScript and DOM tips explained via 240+ interactive demos, all recently updated with ES6 syntax. promoted 

A library that organizes build tasks for your JavaScript projects.

Turns off all rules that are unnecessary or might conflict with Prettier.

Defines a standard interface for libraries that want to use compile-time code transformation without requiring the user to add a Babel plugin to their build system.

A lightweight private npm proxy registry.

A webpack bundle visualization, optimization and customization tool that helps developers streamline the size of their webpack bundle.

Use URLs in your Rollup imports . Avoid the need to use npm or Yarn clients to explicitly install your dependencies from the registry before you bundle.

Create Laravel projects really fast.

Promise-based task runner for the NodeJS ecosystem that's easy to use and easy to extend.

Automate the release process for your software. Software versioning, release notes, notifications, and publishing, all with one click.

React Tools

React Hook Form
React custom hook for form validation without the hassle.

ReactJS Datepicker
A simple and reusable datepicker component for React.

A collection of responsive, image magnifying React components for mouse and touch.

React Final Form
Now at version 5+ (details). High performance subscription-based form state management for React.

Social media share buttons and share counts for React.

React Smooth Input Range
An animated input range component with an option for a really neat looking popup effect.

React Email Autocomplete
Autocomplete React component for email input fields.

React Sizes
A higher-order component with a strong performance that transforms window sizes (width and height) into props.

Cross-browser, multi-line text ellipsis for React.

A circular progress indicator component.

Brushable Histogram
Renders a time histogram with a preview of the whole data below it that can be used both to pan and zoom in on specific intervals as well as to see an overview of the distribution of the data.

Now at version 5+. A React.js based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.

A Tweet for Thought

This timeline of front-end tools is certainly not complete but it demonstrates how the industry has changed and the direction front-end tooling has taken over the past ~15 years.

Send Me Your Tools!

Made something? Send links via Direct Message on 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...

Jolly Code is a collection of fun programming projects. And more importantly? This might be the most appropriate use of Comic Sans in any developer-facing project ever.

Thanks to all for subscribing and reading!

Keep tooling,