Web Tools #459 - JS Utilities, Build Tools, React

Advertisement

In last week's issue, I briefly covered async/await and how this relatively new ECMAScript feature has drastically improved how we write asynchronous JavaScript.

I happen to also recently stumble across a really great video from the folks over at UI.dev called The Story of Asynchronous JavaScript.

If you're new to JavaScript, it must be great to start using a feature like async/await without much thought of what came before – and you don't really need much of a history lesson. But in some cases, especially if you're working on legacy stuff, it's great to know how we got here.

The video is only about 10 minutes long so you should definitely check it out but here's a quick summary of the main points:

• Ajax changed the game for building dynamic web pages in the mid-2000s
• Callback functions helped aid our asynchronous code
• The nature of how JavaScript functions work are what made callback functions effective
• Callback functions eventually led to more complex code with what is known as callback hell
• Modular code was encouraged to improve on this
• Callbacks had the problem of 'inversion of control'
• Promises fixed this by giving control back where it belonged (the restaurant example in the video is excellent)
• Chaining promises improves on callback hell, but is still not without its problems
• The ultimate solution? Async/await along with JavaScript try/catch for an added bonus of error handling

Now on to this week's tools!
 

JavaScript Utilities

Stepsize – Issue Tracking Made for Engineers
Create and view code issues directly from your VSCode and JetBrains editors. Add technical issues to Jira, GitHub, Linear, and Azure DevOps. Link issues to code without context switching and make technical work visible in your codebase. Get a 50% discount for the first 3 months on the team plan using the WebToolsWeekly code. SPONSORED

follower-count
JavaScript API to get the follower count for Instagram, Twitter, TikTok, and YouTube accounts.

Feedback Fin
An open-source and fully flexible tiny widget to collect feedback anywhere on your website.

Wild Wild Path
An ES module that lets you set object property paths with wildcards and regular expressions.

Flatbush
A fast static spatial index for 2D points and rectangles in JavaScript, an improvement on a similar older project called RBush.

Universal Icon Picker
A small JavaScript Icon Picker for any icon library with no dependencies that lets you load any icon library from a single JSON file.

encoding.js
A JavaScript utility for converting and detecting character encodings that support Japanese character encodings such as Shift_JIS, EUC-JP, JIS, and Unicode such as UTF-8 and UTF-16.

Piling.js
A JavaScript library for interactive visual piling of small multiples. Lots of interactive demos you can try out.

striff
A simple string diffing utility. Given two strings, will return an object noting which characters were added or removed, and at which indices.

Rekwest
A package that provides a functional and easy-to-use abstraction on top of native http(s).request and http2.request.

Simpler Color
A color utility that lets you create your own complete color system fast and easy, from as little as one base color.

scroll-snap
A customizable CSS scroll-snap implementation that works in all modern browsers and uses requestAnimationFrame for smooth performance.

On the Release Radar:

• Hotkey – Keyboard shortcut library from GitHub now at version 2+
• parse-domain – Hostname splitting utility now at version 7+
• sharer.js – Custom vanilla JS social share buttons now at version 0.5+

Build Tools, Bundlers, etc.

Learn How You Can Build Fintech Applications Faster With Lower Maintenance Costs
Download Sencha free guide to learn how to build applications faster, with lower maintenance costs, using charts and dashboards. Make better decisions by building and deploying sophisticated-looking, elegant, and enterprise fintech apps.   SPONSORED

Chrome Extension CLI
A CLI build tool to create Chrome extensions and then prepare them for uploading to the Chrome Web Store.

projen
A package that synthesizes project configuration files such as package.json, tsconfig.json, .gitignore, GitHub Workflows, ESLint, Jest, etc., from a well-typed definition written in JavaScript.

dnt
Still in early development. A Deno to npm package build tool.

unimported
Find and fix dangling files and unused dependencies in your JavaScript projects.

Reactirator
A desktop application built with Electron to create and manage React applications easily.
 
corepack
A zero-runtime-dependency Node.js script that acts as a bridge between Node.js projects and the package managers they are intended to be used with during development (i.e. lets you use Yarn and pnpm without installing those tools).

Lerna Update Wizard
Command line interface for simplifying the process of bulk updating dependencies across multiple Lerna or Yarn Workspace packages.

create-nrd-app
A scaffolding tool to create Node-React-Docker apps easily.

veendor
A tool for storing your npm dependencies in arbitrary storage.

On the Release Radar:

• Rockpack – React build tool now at version 2+
• Hygen – Scalable code generator is at version 6+ for some time now

React Tools

Learn How You Can Build Fintech Applications Faster With Lower Maintenance Costs
Download Sencha free guide to learn how to build applications faster, with lower maintenance costs, using charts and dashboards. Make better decisions by building and deploying sophisticated-looking, elegant, and enterprise fintech apps.   SPONSORED

react-form-stepper
A simple React stepper component for multi-step forms inspired by the Stepper component from Material-UI.

React Textarea Code Editor
A simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.

rc-collapse
Collapsible accordion component for React with various API settings to customize the features.

React-Truncate-Text
React component to truncate multi-line text that can be shown/hidden by the user as needed.

wagmi
A collection of React Hooks containing everything you need to start working with Ethereum, the popular cryptocurrency tech.
 
React Click Away Listener
React component built with hooks to help you handle when the user clicks away from a UI element (e.g. a menu that needs to close).

react-custom-flag-select
A React component that uses country flag icons to indicate the desired phone country code format for a text input.

react-hydration-on-demand
Converts a server-rendered component to a 'hydrated' one (meaning converting from static to dynamic) to help improve performance.

EasyTimer React Hook
React hook to use easytimer.js, a JavaScript utility that lets you display a timer or countdown on a page.

ReactSearchAutocomplete
React component that adds a fully customizable search box to allow the user to type text and filter the results.

On the Release Radar:

• ReactPlayer – Media player component at version 2+
• React Webcam – Webcam component now at version 7+
• React Flow – Interactive diagrams for React now at version 10+
• React Redux – React bindings for Redux at version 8+

Commercial Tools and Classifieds

These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).

Sturdy – A low overhead version control platform for code collaboration.

Virtual Terms – Online service to get your NDAs signed in minutes.

vscode.email – Newsletter with tools/articles on VS Code & other IDEs.  AD 

Octane – A drop-in metered billing system for SaaS apps.

Bytes – A JavaScript newsletter that's informative and entertaining.  AD 

Zipy.ai – Debug instantly with session playback and monitoring in one.

Abralytics – Faster, better, and privacy-first web page analytics.
 

A Tweet for Thought

Stop-motion animator Kevin Parry recreated the Netflix intro with $30 worth of yarn. He realized that he could, but didn't stop to consider if he should. But it is pretty cool.

 

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...

Scan of the Month shows you CT scans of various common items (food packaging, Game Boys, AirPods, etc), essentially 'peeling back the skin' of these household items to see how they're built.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon  /  GitHub Sponsors  /  E-Books  /  $5 Tip  /  $1 Tip