Web Tools Weekly
What a Tool!

Issue #260  (RegExp Trick, JSON/Data, Front-end Frameworks, Build Tools)

By the time you get this issue, I'll have finished a bit of a summer vacation, so I don't have a specific code tip to share this week. Instead, I'll direct you to a great article by a Google engineer named Surma:

If you love to nerd out on solving really specific regular expression problems, this is perfect for you. The author does a great job of discussing each step towards the end goal, and along the way describing a number of different RegExp features that you may not have used before, particularly if you're new to regular expressions.

And if that's not enough RegExp geekery for you, you can check out the Twitter thread the author started when linking to the article. There's lots more examples and discussion on different ways to approach that particular problem. Although a few people were being jerks about it (on the internet?? Shocking!), I'm sure you can look past that and learn a few things from the thread.

Now on to this week's tools!

JSON, Databases, Content, etc.

A microservice to store and display sales receipts.

Does the fact that sessionStorage/localStorage is shared across tabs have you down? Here's a strange but widely supported way to store 640kb of object data in a page's navigation state.

JavaScript data wrangling, transformation and analysis toolkit.

Single file write-once database that is valid JSON with efficient random access on bigger datasets.

A scalable blockchain database that combines enterprise capability with blockchain proof and security.

Reduces the size of GraphQL responses by consolidating duplicate values.

offers a free and secured JSON-based cloud datastore for small projects. Store your data just by sending us HTTP requests.

Plug&play SQL and C# support for Excel.

Easily encode complex JSON objects to CSV with a schema-like API.

Recommended Reading for Developers
Learning React Book   CSS Secrets Book   CSS in Depth Book

Front-end Frameworks

Lightweight mobile UI components built on Vue.

React Redux Saucepan
A minimal universal React Redux JavaScript stack using Flow (the static type checker), with hot reloading, linting and server-side rendering.

React Reduction
Free admin template built with React and Bootstrap 4.

A Vue-based, flexible, scalable, opinionated boilerplate for production-ready PWAs with focus on performance, development speed, and best practices.

UI library for creating web components with a simple and functional API.

UI composition and animation in pure HTML.

Fluent Kit
Bootstrap and Fluent Design (Microsoft's version of "Material Design") in a single toolkit.

Bootstrap 4 Buffet
A selection of Bootstrap 4 components with an easy to use code picker and code inspector.

An opinionated implementation of a React app using Google OAuth2 that demands a user be signed in before presenting a UI.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Build Tools, Module Bundlers, etc.

Webpack Deadcode Plugin
A webpack plugin to detect unused files and unused exports in used files.

A scriptable, configurable cache buster that renames your files with MD5 hash-based file names, replaces original file references, and can restore a project to a previous state.

A full-featured webpack + vue-loader setup with hot reload, linting, testing and CSS extraction.

A proof-of-concept for a lightweight, modular, and opinionated webpack CLI.

The mega-popular package manager is now at version 6+. Details.

Painless universal pre-rendering (i.e. producing static HTML at build time) for webpack.

A webpack plugin that inlines your app's critical CSS and lazy-loads the rest. Unlike other options, doesn't use a headless browser, so it's faster.

A markdown-driven task runner.

A super-fast alternative to Babel for when you can target a modern JavaScript runtime (e.g. Node.js 8 or latest Chrome).

A friendly web compiler. The easiest way to compile JavaScript, HTML and CSS.

A Tweet for Thought

Working with a new developer? Here are some great suggestions for getting along in your 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...

This CodePen by Jon Kantner is impressive. It's one of those test answer sheets (apparently referred to as a "Scranton Answer Sheet") created with CSS Grid Layout features.

Thanks to all for subscribing and reading!

Keep tooling,