Issue #312 (JS Engines, JS Utilities, Build Tools, React)
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.
Now on to this week's tools!
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.
An easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.
Iteration helpers that inline to native loops for performance.
A Promise-based API for setTimeout / clearTimeout.
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.
Build Tools, Bundlers, etc.
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 Hook Form
React custom hook for form validation without the hassle.
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.
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.
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!