Web Tools Weekly - Web Tools #358

A few weeks ago I came across this Tweet by Joel Thoms where he provides a quick JavaScript tip. In it he solves a problem with a forEach() loop, which doesn't allow you to 'break' when a certain condition is reached. His alternative uses a completely different JavaScript method: Array.some().

I like the idea of tips like this, because it shows how interesting a programming language can be when you think outside the box. But I'm on the side of many in the thread that suggest that this isn't something you'd want to do in a team environment where code needs to be maintained (or in any production code, for that matter).

One user said:

"I personally dislike this use of some() and would request changes in a PR."

And other users pointed out that you can do something similar using for... of.

I think it's great that the JavaScript community have mostly embraced straightforward, readable code. I often see comments on tips like this that claim that "cleverness" is a novelty but shouldn't exist in production.

Like others, I avoid this kind of stuff in production because it just doesn't make sense to me. I mean, I've tried to maintain really straightforward code, and that's hard enough!

Anyways, Joel did acknowledge multiple times in the thread that he wouldn't recommend that for production code (he's got lots of discussion like that on his Twitter, so be sure to follow him if you like JavaScript).
 

Now on to this week's tools!
 

Front-end Frameworks

Blunt
A CSS framework that helps with layouts and leaves your styling alone.  It only provides helper classes to make positioning and responsive design easier.

Tailblocks
A set of Tailwind UI components divided into 15 categories and ready to use.

Minimal Electron, React and Webpack Boilerplate
Electron, React, PostCSS, and webpack boilerplate to get a new project started easily.

generic-components
A collection of easy-to-use generic web components with a focus on accessibility and ease of styling.

PUXL
Open-source and eco-friendly library to help you accessible and responsive sites with lightweight HTML.

Radius
A collection of open-source tools and libraries that allow you to accelerate your design system

Mercurio
An HTML, CSS, and JavaScript e-commerce template, based on CodyHouse's front-end framework. Includes 90 components and 28 pages.

React NodeGui
Build performant, native, cross platform desktop apps with React.

cra-template-redux-typescript
The official Redux+TypeScript template for Create React App.

Gestalt
Now at version 1.5+. A set of React UI components that supports Pinterest’s design language.

express-auth
A boilerplate for building Express and MongoDB apps with REST API authentication.

Deque Code Library
A library of accessible widgets (accordion, alert, datepicker, progress bar, etc.) based on principles taught in a course on creating custom JS/ARIA widgets.

Testing and Debugging Tools

Quokka
A rapid prototyping playground for JavaScript and TypeScript. Currently discounted 40% with 10% of proceeds donated to charities in support of COVID-19. (Read my review of the product here.)

Snapfont
Chrome or Firefox extension. The fastest way to test Google fonts or local fonts on any website.

Fast or Slow
Website speed profiler that shows multi-tiered results based on tests from multiple geographic locations. You can also sign up via email for regular monitoring of a URL.

Visualize Browser Sizes
Online tool that uses your Google Analytics data to show what percentage of users view your pages at different browser widths.

equal-access
IBM Equal Access Accessibility Checker. Contains tools to automate accessibility checking from a browser or in a continuous development/build environment.

Responsively App
A native Linux, Mac, and Windows modified browser that displays multiple mirrored device views with a built-in element inspector for faster development and debugging.

Pico
Take browser screenshots in JavaScript. Different from something like Puppeteer in that it works entirely client-side.

Chromatic
Automates gathering UI feedback, visual testing, and documentation, so developers can iterate faster with less manual work.

Baseliner
Chrome extension that adds a fully customisable CSS layer on top of any website to help you align your design and ensure your grid is in place.

ESLint
The popular JavaScript linting tool is now now at version 7+.

Automated Screenshot Scheduler
Capture screenshots at defined time intervals automatically and receive the results via email.

Axe Linter
Based on the popular Axe accessibility tools. Analyzes GitHub pull requests and provides reports of issues and recommends changes before pull requests get reviewed and the code is merged.

Ply
Older project that I just came across. A lightweight DOM and CSS inspector that introduces novel CSS analysis techniques to help less-experienced developers inspect and learn from production websites.

JSON, Databases, GraphQL, etc.

Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity.   promoted

JWT
JSON Web Tokens (JWT) are an open, industry standard method for representing claims securely between two parties. This website allows you to decode, verify, and generate JWT.

Beekeeper Studio
Open source SQL editor and database manager that allows you to query and manage your relational databases (MySQL, Postgres, SQLite, and SQL Server).

Pantry
A free JSON storage API that provides perishable data storage for small projects. Data is securely stored for as long as you and your users need it and is deleted after a period of inactivity.

DrawSQL
Create, visualize and collaborate on your database entity relationship diagrams.

Postgrest JS
Isomorphic JavaScript client for PostgREST. The goal of the library is to make an "ORM-like" restful interface.

Graphite
Build an app by entering a GraphQL endpoint then customizing the app with a built-in editor.

Visual SQL
A visual version of SQL that lets anyone explore and query data from almost any source, no coding required.

Geoman
An editor for GeoJSON data (a format for encoding geo data) and a geometry editing tool for Leaflet maps (a JS library for interactive maps).

ksqlDB
An event streaming database built for stream processing applications.

Ajv
A fast JSON Schema validator for Node and the browser.

A Tweet for Thought

Apparently now your default browser can be anything. If you want some technical details on this quirk, this Hacker News thread might help.
 

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're looking to do some form of technical writing (which is easy work to get remotely), Who Pays Technical Writers has an alphabetical list of websites that pay for articles, each with the amount paid (if known), main topics of interest, and a link to the website for more info.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly