Web Tools #434 - JS Quiz, React, Build Tools, Uncats

Advertisement

I know many of you enjoy unique little JavaScript tidbits, which I've often included in the intro of this newsletter. Well, in that case, you'll want to try out JavaScript Quiz, created by Marko Denic and Oliver Jumpertz.

Before reading on here, feel free to try out the quiz. What's cool about this one is that it's 10 questions, but the questions are chosen randomly from a larger pool of questions. So you can do the quiz over and over and get all sorts of different versions, testing your knowledge of some of JavaScript's little quirks and anomalies – especially when it comes to type coercion and how objects are concatenated in unconventional circumstances.

I believe the first time I did the quiz I was only able to get 4/10. The things the quiz covers aren't exactly stuff you're going to run into every day. This is more of the nerdy JS stuff that many of us have come across over the years.

Of course, a lot of the correct answers are puzzling at first glance so, as many of these types of quizzes do, there is an explanation for each correct answer, most of which aren't too difficult to digest even if you're a JavaScript beginner.

As shown in the image above, just click the "i" icon to get more info after you've submitted your answer (which is multiple choice, so you don't have to actually write any code or write out a full log).

And if you like those sorts of bizarre coding tidbids, you'll love Gary Berhardt's 2012 presentation that I never get tired of watching.

Now on to this week's tools!

React Tools

Need a Better Way to Test Your Web App? Testim's Advanced AI Automates UI Testing.
Your dynamic web application needs test automation that keeps pace. Testim’s fast authoring with code flexibility boosts coverage, AI-powered stability slashes maintenance, and TestOps helps scale your team and testing efficiently. sponsored 

react-burger-menu
An off-canvas sidebar menu triggered with a hamburger icon as a React component, with a collection of effects and styles using CSS transitions and SVG path animations.

React UI ScrollSpy
A customizable, easy-to-use, and lightweight ScrollSpy component for React that implements scrolling navigation functionality similar to the Bootstrap docs.

ReactDataGrid
A data grid component for React. The community version is free and includes quite a few features that might be enough for most projects.

react-collapsed
A custom hook for creating accessible expand/collapse components in React. Animates the height using CSS transitions from 0 to auto.

React Hover
React component to turn anything into a 'hoverable' object.

Iconsax React
1000 icons in 6 different styles (linear, outline, bold, two-tone, etc.) for React and React Native.

Reactronica
React audio components for making music in the browser, based on React's state management features.

react-simple-image-slider
A simple image slider component for React that can be customized with a number of options and styled via CSS.

React OxIDE
A simple IDE-like code editor interface that you can add to your React projects that includes a file pane, code pane, and preview pane.

Nice Modal
A small, zero-dependency utility to manage modals for React. It uses context to persist state globally to show/hide a modal easily.

react-signature-pad-wrapper
A React wrapper for Signature Pad, an old JavaScript utility that lets you embed a signature writing component for users to 'sign' and save a signature.

react-ux-form
A simple, fast, and opinionated form library for React and React Native with a focus on user experience.

Build Tools, Bundlers, etc.

Nudge
Are you building content-driven sites? You should check out Nudge. Nudge has built a privacy-first analytics stack for content marketers. With an easy to use dashboard, anyone can use it.  sponsored 

Arcsecond
A zero-dependency, parser combinator library for JavaScript, largely inspired by Haskell's Parsec.

create-vue
An easy way to start a Vue project, along the same lines as create-react-app and similar tools.

Node Version Manager
An older, but popular project that offers a POSIX-compliant Bash script to manage multiple active Node.js versions.

Loadr
Quickly attach multiple ESM Loaders and/or Require Hooks together but without the repetitive `--experimental-loader` and/or `--require` Node flags

webpack-json-access-optimizer
A webpack plugin to tree-shake and minify JSON modules, for example, JSON for internationalization.

JavaScript Bundling for Rails
Bundle and transpile JavaScript in Rails with esbuild, Rollup, or webpack.

Create Go App CLI
For Go language projects. Create a new production-ready projects with back end, front end, and automated deploys by running one CLI command.

Elecrue
A boilerplate generator for Electron that generates boilercode for React or Vue, with Bootstrap or Tailwind.
 
Agrippa
A CLI tool to assist React developers in creating components without the boilerplate. Can generate templates for React components of different compositions and in different environments.

Remix Auth
A complete open source authentication solution for Remix.run (which technically isn't available to the public yet, so I assume this is for those who have invites).

On the Release Radar:

• JavaScript Obfuscator is at version 3+
• Webpack Boilerplate is is also at version 3+
• Parcel is now at version 2+ (looks like a cool new site design too)
• Yarn, the package manager alternative is now at version 3+

The Uncategorizables

Content Measurement API
If you’re building content hubs, experiences, virtual events, you should check out the Nudge API. Nudge has created a content-first analytics stack, measure, get insight and take action with their API.   sponsored 

Google Dev Library
A platform from Google Developers to showcase projects and articles that developers have built with Google technologies.

TiddlyWiki
A complete interactive wiki in JavaScript that you can use as a non-linear personal web notebook.

Uptime Kuma
A fancy self-hosted open-source monitoring tool, similar to other commercial projects for uptime monitoring.

Extract Table
Extract a table from an image or a PDF using AWS Textract (a service provided by Amazon.

Denoflare
Develop, test, and deploy Cloudflare Workers with Deno.
 
PDM
A modern Python package manager. This might be the first Python tool I've included in 8 years, and maybe the last – so don't get too excited. :)

Quickemu
Quickly create and run optimized Windows, macOS, and Linux desktop virtual machines.

Scribe
An alternative front end for Medium. Just replace medium.com with scribe.rip in the URL and watch your stress levels disappear.

run-wasm
An API to easily execute WebAssembly code snippets on a web page, for example to include interactive code examples in a blog post.

Deta
A free cloud platform for learners and coders of all ages to deploy Node and Python projects quickly with no limits or other hassles.

Faust.js
A headless WordPress framework to make building front-end apps with WordPress as the headless CMS a pleasant experience for both developers and publishers.

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

Pirsch - A privacy-friendly, open-source alternative to Google Analytics.

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

ScrollingMockup.io - Create beautiful, scrolling mockup videos in 5 minutes.

MoonHome - Remote development environment service.

Wynter - Earn $90-$200/hr doing 10-15 min research surveys. ad 

positionstack - Geocoding and embeddable maps API.
 

A Tweet for Thought

Dan Hollick shares a 4-part graphic on how touch screens work. As one user points out, now you'll understand why they don't work with gloves on. :)

 

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

Feeds Mage is a service that lets you discover blogs and newsletters of the people you follow on Twitter. Requires some access to your Twitter account, but nothing major if you want to give it a try.

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