Web Tools #437 - Learn RegEx, JS Libraries, Testing, React

Advertisement

Recently a link to a new interactive course on Regular Expressions was going around and the tool was discussed on Hacker News. Notice the top comment, which kind of surprised me, especially on a such a traditionally sophisticated programming discussion platform:

"I learn regex just before I need it. Every. Time. After 25 years, it just doesn't stick."

Many in the thread agreed. I'm definitely in the same boat. I've written many regular expressions over the years, and almost nothing from the syntax really sticks for longer than a few minutes. I mean, I guess I can recall a few things like how to escape certain characters and how to use the "global" flag. But not much else.

A lot of people seemed to agree with the overall sentiment of that top comment, with some pointing out other challenges like learning the variations in the RegEx syntax for different programming languages, which might be a factor in why it doesn't "stick" with us.

The top response to that above comment expands on how difficult retaining RegEx knowledge seems to be for a lot of people:

"I was excellent at regex early in my career... actually had a job where that's basically all I did for 9 months. Read the O'Reilly book Mastering Regular Expressions from cover to cover and referenced it multiple times per day. Doing regex at a high level was instinctual. Lost much of that knowledge within a couple years after leaving that job... was shocked how much wasn't retained when I stumbled into another project that required a fair bit of regex work."

Others point out that learning a programming language is much easier to retain than RegEx. In my opinion, I think this is directly related to the fact that programming languages have an intuitive, logical structure and they all include more or less the same basic components (variables, functions, etc.) – making it much easier to remember the different bits. Whereas RegEx just seems somewhat chaotic.

Whatever boat your in, maybe you'll enjoy Regex Learn, the tool discussed in the thread.

The rest of the Hacker News thread includes several articles and other helpful tools for writing RegEx, should you want to delve into the topic a little more.

Now on to this week's tools!

JavaScript Libraries and Frameworks

The New Tab Page You'll Actually Use
Replace your web browser’s new tab page with a minimal list of links, grouped and sorted how you like. A Fine Start is for fans of minimalism and nice typography.  sponsored 

LittleJS
A lightweight JavaScript game engine with a fast hybrid rendering system with features including rendering, physics, particles, sound effects, music, input handling, and debug tools.

Remix
Newly open sourced. A full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience.

Dust.js
A JavaScript templating engine that inherits its look from the ctemplate (C++/C) family of languages, and is designed to run asynchronously on both the server and the browser.

melonJS
An open source HTML5 game engine that empowers developers and designers to focus on content and provides a collection of composable entities and support for a number of third-party tools.

cannon-es
A lightweight 3D physics engine written in JavaScript, this one is a maintained fork of the old cannon.js project.

Yuka
A JavaScript library for developing Game AI with a number of different features (e.g. steering, navigation, perception, fuzzy logic, etc).

YoHa
A hand tracking engine built with the goal of being a versatile solution in practical scenarios where hand tracking is employed to add value to an application.

Fable
A compiler that brings F# into the JavaScript ecosystem.

Rakkas
A lightning-fast Next.js alternative powered by Vite, featuring SSR, SSG, file system-based routing, and more.

HerbsJS
A Node.js library for building microservices in a faster and future-proof manner.

On the Release Radar:

• Neutralinojs - Cross-platform app development at version 3+
• Angular - The app development platform is now at version 13+
• Node.js - The back-end JavaScript runtime is now at version 17+

Testing and Debugging Tools

Free tickets for Elevate Winter Summit
Want to learn from Engineering or Product leaders from companies like DocuSign, DoorDash, Facebook, or even Auth0? Grab your free tickets for Elevate Winter Summit with the promo code WTW21 to get a 100% discount on the 2-day pass.  sponsored 

dstp
Run common networking tests against your site, built with Go, available to install cross-platform.

Sorry Cypress
An open-source alternative Cypress dashboard, free if you self-host.

Hasty
A quick way to test the performance of JavaScript snippets to see which one will would be most efficient.

Core Web Vitals Checker
Online tool to check critical site speed and website quality metrics with one click then find out where to make improvements.

OpenReplay
An open-source session replay stack that lets you see and debug what users do on your web app, helping you troubleshoot issues faster.
 
jest-extended
Aims to add additional matchers (i.e. assertions) to Jest's defaults, making it easy to test everything.

SEO Analyzer
A JavaScript library to search an HTML file for SEO issues using 9 preset rules (title length, headings, alt text, etc).

React Native Test App
Provides React Native test apps for all platforms as a package.

Image Optimization Test
An online tool to enter a URL to see how well the images are optimized and what you can do to improve them.

react-performance-testing
A library for testing React or React Native runtime performance, works by counting the number of renders and the render time in a test environment.

On the Release Radar:

• React Native Testing Library - Testing utilities now at version 8+
• ESLint - Popular linting suite now at version 8+
• Sa11y - Accessibility quality assurance assistant now at version 2+

React Tools

Free tickets for Elevate Winter Summit
Want to learn from Engineering or Product leaders from companies like DocuSign, DoorDash, Facebook, or even Auth0? Grab your free tickets for Elevate Winter Summit with the promo code WTW21 to get a 100% discount on the 2-day pass.  sponsored 

React Hooks in Svelte
React hook examples ported to Svelte (useState, useEffect, useReducer, useContext, etc).

use-mui
React hooks for Material UI. For each state, each hook accepts an optional default state and returns a state-setting utility function.

Teaful
Tiny, easy-to-use, and powerful React state management library.

React Command Palette
Add a command palette to your app, like the one in Atom and Sublime, compliant with WAI-ARIA.
 
Suspend React
Async/await for React components.

React Freeze
A library that allows for freezing renders of the parts of the React component tree using the new Suspense mechanism introduced in React 17.

timeago-react
A simple and efficient React component to show dates using the format `*** time ago`, e.g. '3 hours ago', '20 minutes ago', etc.

Splitter
A React component that allows you to split views into resizable panels, similar to tabs in VS Code, for example.

react-codemirror
React component for CodeMirror, the popular library for including a code editor embedded in the browser.

ReactFire
Hooks, context providers, and components that make it easy to interact with Firebase.

React If
Render React components conditionally using a more readable, expressive format.

schummar-translate
A TypeScript-powered translation library for React and Node.js.
 

Commercial Apps and Classifieds

These are commercial (non-free) tools, paid classifieds, and affiliate links. You can submit a link for consideration or you can buy a classified link (will be marked "ad").

Beew - Schedule HTTP requests to any URL through a UI or REST API.

Morning Brew - A daily newsletter to keep you informed & entertained. ad 

WebVitalsRobot - Measure & monitor perf metrics and Core Web Vitals.

Visioun - Premium Ghost blog themes for your blog, magazine, or newsletter.

Alternative Assets - World’s largest alternative investment community. ad 

testmail.app - Platform for devs and QA teams to automate email tests.

Nightfall AI - Simple, effective cloud data protection.
 

A Tweet for Thought

With all the toxicity on Twitter, it's nice to just enjoy a duck running a marathon.

 

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

If you were miffed by YouTube's decision to remove the dislike button (which you should be, because it's a horrible move that's very anti-user), there are two browser extensions that aim to keep the dislike button alive: Return YouTube Dislike and YT-Dislikes-Viewer.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee