Web Tools #426 - Learning Tools, Frameworks, Testing, Uncats

Advertisement

In case you missed it, a couple of weeks ago Smashing Magazine published an article of mine that you might want to bookmark if you're considering learning something new in the coming months:

Interactive Learning Tools for Front-End Developers

It's a pretty big collection of interactive tools and courses to learn tons of different developer-related skills including Flexbox, Grid, TypeScript, JavaScript, React, Regex, SQL, Vim, and more.

As a few people have pointed out when sharing the article on Twitter, many developers prefer to learn in a more interactive environment, similar to a game, rather than just doing straight reading or tutorials. I'm sure many of you feel the same way, so there's likely something for everyone in this post.

I haven't written much for Smashing Magazine lately, but I always liked Vitaly and the gang over there. Now that I'm back in touch with them, I'll likely be writing more often. This one was a roundup, which I do from time to time, but future articles will probably be more on a specific coding technique or tool.

Now on to this week's tools!
 

Front-end Frameworks

Free Guide: The Evolution of JavaScript Tooling
Frameworks and libraries have been created to ease the burden of writing complex UI code. Learn how to deliver applications faster, better, and on budget in our free guide. Download your free guide!  sponsored 

Lucid
A React UI component library that's been battle-tested in enterprise apps and includes D3.js-based SVG charts and human-readable CSS class names.

Tailwind Mobile
Pixel perfect mobile UI components built with Tailwind that includes iOS and Material Design-style components for React, Vue, and Svelte.

Ancestor
A suite of components for ReScript and React that works as unstyled layout primitives to develop responsive web apps, design systems, and style guides.

PrimeVue
Vue version of the PrimeFaces UI framework, offering simple to use, customizable, and performant UI components.

React Next Boilerplate
A starting template with an opinionated toolset for reducing configuration of projects built with Next.js and React.

vitesse-webext
A Vite-powered WebExtension starter template for building add-ons and extensions for Chrome, Firefox, etc.

Webrix.js
Building blocks for React-based web apps. Not a component bank, but a set of building blocks for creating your own unique component bank.

Admin.js
An auto-generated admin interface that can be plugged into your Node.js app. You provide database models and it generates UI that allows you to manage content.

Fronts
An easy-to-use, progressive framework for building apps using the micro-frontends architecture.

graphlatte
A Next.js template that includes a toolset for GraphQL, Urql, Prisma, Nexus, Tailwind, and more.

React Cool Starter
A starter boilerplate for a universal web app with the best development experience and a focus on performance and best practices.

Testing and Debugging Tools

Build Internal Tools in Minutes with Retool, Where Visual Programming Meets the Power of Real Code
Programming has gotten surprisingly hard. Building a simple form to POST data back to your API means wrangling with redux and thunks. Oh, and debouncing that submit button. Everything but solving the business problem.  sponsored 

running-playwright-on-aws-lambda
A Playwright implementation that runs hundreds of Playwright tests in a few seconds with AWS Lambda.

React Render Tracker
A tool to discover performance issues related to unintended re-renders and unmounts in React projects.

WAVE Evaluation Tool
Microsoft Edge extension for the popular accessibility testing tool (you could also do this by adding the Chrome extension now that Edge is Chromium based).

XState Visualizer
A visualization tool to build state machine diagrams using XState.

tracer-motion
A visual debugger for debugging animations built with Framer Motion, the React animation library.

SpeedVitals
Enter a URL to test a website from various locations and devices for Core Web Vitals scores.
 
WebPageTest for VS Code
VS Code extension to run tests against WebPageTest from inside the editor. Once the tests are complete, some of the performance metrics, a copy of the waterfall, screenshot, and a link to the full results will be displayed.

framework-info
Node.js utility or CLI tool that detects which frameworks a local project is using (might come in handy for new projects you're not familiar with).

Postcode
A VS Code extension that can be used to create and test simple and complex HTTP/s requests, as well as view responses.

jest-clean-console-reporter
A Jest Reporter to group, hide, and prettify spammy console warnings.
 

The Uncategorizables

Build Internal Tools in Minutes with Retool, Where Visual Programming Meets the Power of Real Code
Programming has gotten surprisingly hard. Building a simple form to POST data back to your API means wrangling with redux and thunks. Oh, and debouncing that submit button. Everything but solving the business problem.  sponsored 

JSPaint.exe
A cross-platform native desktop app that mimics JS Paint, the old web-based MS Paint remake.

GrowthBook
An open source experimentation platform designed for companies that want to bring A/B testing in-house, but don't want to build it themselves.

Flagsmith
Feature flag and remote config service. Release features with confidence. Manage feature flags across web, mobile, and server-side applications.

Forma
Static HTML forms service with a free plan that includes 2 forms, 100 email notifications, and unlimited submissions per month.

Bonsai
A web browser for Mac that makes it easier for programmers and researchers to find and organize stuff.
 
PolicyTrail
Host a privacy policy document for your website or app securely and free.

Pencil Project
An older project that's an open-source GUI prototyping tool for all platforms.

Claire
Chrome extension that indicates if a website is using Cloudflare and if it's using using modern technologies like HTTP/2, IPv6, and Cloudflare's Railgun.

Widelands.org
A free, open source real-time strategy game inspired by Settlers II.

Design Xstream
A categorized and searchable directory of design tools and resources.

security.txt
 A proposed standard to allow websites to define security policies using a security.txt file inside the .well-known directory.
 

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

Untree - Free HTML/CSS website templates that require attribution.

JS E-Books Bundle - 3 JS/DOM e-books in EPUB, PDF, MOBI formats $9. ad 

RepairRabbit - Hosted dashboard and ticketing app for a repair business.

Master Gatsby - 52 HD videos to learn Gatsby, React, GraphQL, etc. ad 

Feroot - Automated JavaScript scanning, monitoring, and controls.

Neeva - An ad-free, private search engine built by ex-Google execs.
 

A Tweet for Thought

The fact that this Tweet got so much traction and discussion from such a small account leads me to believe there's some truth to what was said.

 

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

Music Box Fun lets you create and share music box songs online. The  song library of user contributions includes the Jeopardy! theme, Beethoven's Für Elise, the Super Mario Bros. theme, and lots more.

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