Web Tools Weekly
Tools for Web Developers

Issue #407  (Parcel.js, Frameworks, Testing, JS Utils)05/06/21


Advertisement
The Key to a Healthy Lifestyle
Noom is not a diet – it's a personalized program designed to create sustainable weight loss and behavior change. You'll partner with a Noom specialist, who is trained in psychology and will help you create a personalized action plan based on your goals, current progress, and individual life circumstances.
Learn more about Noom
Noom

I've never really been a super-expert when it comes to bundling tools, task runners, or similar tooling. I've used Grunt and Gulp for doing simple stuff like minifying files and cache busting and I've recently also gotten into some more modern options that are popular in the community.

As you've noticed, the industry has moved away from straight task runners to what we refer to now as module bundlers. Two of the most popular ones over the past few years are Parcel.js and webpack.

In a previous issue I had briefly mentioned that I wrote a beginner's tutorial on Parcel.js, over on CodeinWP. Following up on that, I recently (finally!) delved into webpack and I wrote up a pretty easy to follow introductory article on that super-popular bundler:

Webpack Tutorial for Beginners

If you've never touched webpack, I think you'll find it a good easy-to-follow starting point. It's definitely one of those articles that I myself will often refer back to when working with webpack in the future. I think I Google my own articles weekly! 😄

In terms of bundlers, I suppose the next one I'll have to get into is Snowpack, as that seems to be the hottest one over the past year or so (and it's already at version 3). Hope you enjoy the article.
 

Now on to this week's tools!

Front-end Frameworks

The Key to a Healthy Lifestyle
Noom is not a diet – it's a personalized program designed to create sustainable weight loss and behavior change. You'll partner with a Noom specialist, who is trained in psychology and will help you create a personalized action plan based on your goals, current progress, and individual life circumstances.  sponsored 

tailwind-dashboard-template
A free admin dashboard template built on top of Tailwind CSS and fully coded in React.

DevUI
An open-source front-end component library, icon set, admin template, and more for enterprise-level apps.

Inkline
A customizable Vue UI/UX library with a consistent and expressive API, designed for creating flawless responsive web apps.

Inkline

nine4
A set of three free templates with a CC v1.0 license, built with Next.js and Tailwind.

Soft UI Dashboard
An innovative Bootstrap 5 dashboard template with numerous full-coded elements and components.

full-stack-ethereum
An opinionated full-stack starter for building Ethereum apps (the starter kit goes along with a tutorial linked in the repo).

node-express-boilerplate
A boilerplate for building production-ready RESTful APIs using Node.js, Express, and Mongoose.

Flatlogic
Beautifully designed web and mobile application templates built with React, Vue, Angular, React Native, and Bootstrap.

volt-react-dashboard
A React admin dashboard template and UI library based on Bootstrap 5.

VueTailwind
Open-source collection of fully responsive and beautiful HTML components made with Vue and Tailwind.

Ream
A framework for building server-rendered or statically-generated web apps in Vue 3, heavily inspired by Next.js and SvelteKit.

Podium
An easy to use server-side composition library for building apps using the microfrontends architecture pattern.
 

Testing and Debugging Tools

Run Linux Software Faster and Safer with Unikernels
Easily run unikernels today with free / open source. Build your first unikernel in minutes!  sponsored 

git-split-diffs
GitHub-style split diffs with syntax highlighting in your terminal.

Monito
Not free. A browser extension that records everything happening in a web app so you can find bugs and generate test reports.

Backlink Checker
Enter a URL to find all backlinks to a page, useful for SEO and related testing and optimization.

Lighthouse Metrics
Provides Lighthouse metrics for a web page by running tests from multiple locations for a more accurate global performance check.

Lighthouse Metrics

Thunder Client
VS Code extension. A hand-crafted lightweight REST client for testing APIs.

Prism
An open-source HTTP mock and proxy server. Accelerate API development with realistic mock servers, powered by OpenAPI documents.

Style Check
Import a CSS library or choose from the selected options and this page will show you the effects of that library on all HTML elements.

Shapecatcher
Draw something in the box and this tool will help you to find unicode characters that closely match what you drew.

DeepSource
Automatic code analysis tool to help you find bugs, fix security flaws, and more, with a decent free plan.

On the Release Radar:

JavaScript Utilities

Run Linux Software Faster and Safer with Unikernels
Easily run unikernels today with free / open source. Build your first unikernel in minutes!  sponsored 

MathicallJS
A fast JavaScript math library designed for simulation and data processing.

Necktie
A simple DOM binding tool that binds your logic to DOM elements in an easy way, taking its powers from document.querySelector and MutationObserver capabilities.

Combine-Promises
Like Promise.all(array) but with an object instead of an array.

WinBox.js
A customizable and dependency-free library for creating apps with windows – kind of like modals, but with more of a similarity to OS window functionality.
 
WinBox.js

betterator
A better sync and async iterator API.

Poulette
A proof of concept for a color mixer interface.

unctx
A utility to allow you to easily implement a Vue-like Composition API pattern in your vanilla JavaScript projects.

movy.js
An easy-to-use animation engine based on Three.js and GSAP.

Steno
A specialized fast async file writer that makes it fast and safe to write to the same file often/concurrently.

grfn
A tiny (~400B) utility that executes a dependency graph of async functions as concurrently as possible.

next-mdx
A fast and TypeScript-ready set of helper functions for fetching and rendering local MDX files that handles relational data and supports custom components.

p5i
p5.js, but with more friendly instance mode APIs.
 

A Tweet for Thought

If you like Dad-joke style humour, you'll enjoy this response to Bill and Melinda Gates's latest news.

A Tweet for Thought
 

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 want nostalgia with the benefits of modern technology, you'll want to check out the Open Source Rotary Cellphone.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris