Web Tools Weekly
What a Tool!

Issue #328  (Frameworks, Testing, JS Utils)10/31/19

By the time this issue arrives in your inbox, I'll be just about to return from a vacation overseas, so this intro won't have anything special in terms of tips or coding.

As always, I appreciate everyone's support in helping this newsletter stay afloat and there's even been some decent subscriber growth in my other weekly newsletter Tech Productivity, which I have a lot of fun doing because it helps me find some really interesting articles on teams, remote work, success, and so forth. So check it out if you haven't done so already – it's always a brief newsletter (10 links maximum).

I'll be back with a regular intro next week, but in the mean time, enjoy the usual awesome weekly list of tools!

Front-end Frameworks

JavaScript & DOM E-Books Bundle
200+ JavaScript and DOM coding tips in 3 e-books. EPUB, MOBI, and PDF formats, with 200+ interactive CodePen demos.     promotion 

React Bootstrap with Material Design
400+ material UI elements, 600+ material icons, 70+ CSS animations, Sass files, and more. Fully responsive and cross-browser.

Now at version 2+. A strong, independent CSS Framework. Only 2.7KB minified and gzipped.

JAMstack Themes
A list of themes and starters for JAMstack sites.

Modern CSS reset
A bare-bones CSS reset for modern web development.

The full-stack React+GraphQL framework.

Airframe React
Open source high quality dashboard based on Bootstrap 4 and React 16.

Nice Boys™️ Product Boilerplate
Quickly ship your apps with the power of code generation. A personal setup toolset from Brian Lovin and Max Stoiber (aka "Nice Boys").

Now at version 1+ (Beta). A minimal and fast library for functional user interfaces

Now at version 3.6. Official site for the Atomic CSS methodology, which includes Atomizer, the tool for building sites with Atomic CSS.

Testing and Debugging Tools

Tech Productivity Newsletter
A brief weekly newsletter featuring productivity tools, articles, and resources for tech pros.  promoted

Website Speed Test
Find out how much overhead your ad implementation adds to your website.

A suite of beautiful and open-source tools for debugging, testing and building with HTTP(S), on Windows, Linux, and Mac.

Live DOM Viewer
Visualizes the DOM based on entered HTML. Might be useful for testing how a browser is supposed to handled malformed HTML.

Refactor TypScript code programmatically using codemods.

A debug module that helps capture the debug context, plus object tracing information to help you better vizualise debug output.

A testing suite built specifically for Storybook (development environment and playground for UI components). It allows you to center both your development and testing around the stories you're already writing.

Svelte Inspector
Development helper for inspecting and opening Svelte components in your editor.

Custom jest matchers to test the state of the DOM.

Plugin for stylelint (the CSS linter) with accessibility rules.

JavaScript Modules and Utilities

Detect the running environment and context of the current script.

Lightweight SQL query builder. Makes it easy to compose safe parameterized SQL queries using template literals.

Lightweight currency conversion library, successor of money.js.

Copy to clipboard functionality with no dependencies.

Revocable Queue
Allows you to read/write a sequence of data values (aka, a queue) asynchronously, similar to streams or observables. But any data/event that is still pending can be revoked.

Now at version 2+. An HTML5 saveAs() FileSaver implementation.

The easiest way to do parallax with JavaScript. Simple and tiny JavaScript library that adds parallax animations on any images.

An auto-suggest component with accessibility and flexible styling.

Makes WebWorkers enjoyable. A tiny library (1.1kB) that removes the mental barrier of thinking about postMessage and hides the fact that you are working with workers.

A Tweet for Thought

How AI products actually work.

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

CJSS is an interesting experiment. It's a library that you can include in your page and then build your entire page using just CSS. Not recommended for real use, but interesting to poke around the code.

Thanks to all for subscribing and reading!

Keep tooling,