Web Tools #500 - assert(), Frameworks, JS Utils, Uncats

Advertisement

For the longest time, when debugging apps, many JavaScript developers have made use of something referred to as an assert() function. There's no native assert() method in JavaScript. Node.js offers a similar feature called an assertion module, so you might be familiar with that if you're a Node developer.

For JavaScript in the browser, the easiest way to use assert() is by means of console.assert(), which is one of the methods available in the Console API. Of course, you can roll your own assert method, which isn't too hard, but console.assert() works pretty well for most cases.

The purpose of assert() is to determine whether a given expression is true or false. An example looks as follows:

Here I'm simply iterating through an array of predefined numbers. The line with console.assert() will display the string along with the two values in the object in the console each time the assert fails. These will appear in red, just like any errors in the console.

The assert only shows in the console if some predefined condition has failed. In this case I'm using the modulus (or remainder) operator to see if the current number is an even number.

You can try the above example in this CodePen. You'll have to open your browser's console because asserts don't work in CodePen's console. Notice the loop displays a message for each number logged but the odd numbers also include the red error message executed by the assert.

The assert() method's first argument is the assertion. This should be some kind of expression that evaluates to either true or false. Passing or failing this will tell the method whether or not to log anything.

The remaining arguments can either be a list of one or more objects (to examine for debugging purposes) or a string containing substitutions, followed by one or more objects to substitute. In the above example, I'm writing a string that contains an object substitution. The final object with two values will be the one substituted for "%o" each time the assert fails.

Just to be a little more clear on the arguments, here's a simple assert example that doesn't use substitutions or objects:

In this case I'm forcing the first argument into a "false" state by simply using the value undefined. The next argument is a string that will output in the console in red, just like any error in the console. In this case, no objects are shown in the console, and there are no substitutions. Thus, this message is not that helpful outside of telling you the expression evaluates to false.

Admittedly, I've glossed over the use of substitutions when using assert(), but you can read up a little more on that concept on the Examples section of MDN's article on console.assert() and in MDN's article on the Console API, which has a section on substitutions.

Now on to this week's tools!
 

Web Frameworks

Nexth
An opinionated Next.js + Ethereum starter kit to quickly ship Web3 Apps, with Chakra UI, wagmi, ConnectKit, and more.

Svelte Headless-UI
An unofficial implementation of Tailwind HeadlessUI (the Tailwind component library for React and Vue) for Svelte.

The New Tab Page You’ll Actually Use
Text links on every new tab. Drag-n-drop grouping and sorting. Fast, free, and available for Chrome, Firefox, and Edge.   SPONSORED  

Tailwind Elements
A set of 500+ Bootstrap components recreated with Tailwind CSS, but with better design and more functionality.

SUID
A port of Material-UI (aka MUI, the popular React component library) for SolidJS.

Fest
A SaaS boilerplate built with Node.js and React that includes user auth, org management, and more.

Sailboat UI
A modern UI component library for Tailwind that includes 150+ open-source components and the components are searchable by name in the docs.

Mamba UI
A free, open-source collection of 100+ UI components and templates based on Tailwind CSS, with code examples for HTML, Vue, and JSX-based apps.

next-apollo-joy-starter
An opinionated starter kit for creating fully typed Next.js apps, that includes NextAuth.js, Apollo GraphQL, i18next, and lots more.

Flowbite Vue
A UI component library for Vue projects, powered by Flowbite and built with Tailwind CSS.

React Email
A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.

a2000
A UI library designed to capture the feel of the early web (i.e. Windows 2000-esque styles), while employing modern UX and web practices.

ecommerce-fastapi-stripe
An open-source mini e-commerce project, powered by FastAPI and Stripe, that loads products from JSON files saved in the templates directory (no database required) and uses a decent UI for page styling.
 

The Uncategorizables

He3
A free native cross-platform app that includes an all-in-one modern toolbox for developers with all sorts of little utilities, code converters, etc., for everyday tasks.

SEOfie
An online collection of SEO tools that includes tools for YouTube, text analysis, website tracking, and website management.

Indiekit
A Node.js server with all the parts needed to publish content to your personal website and share it on social networks.

Data is the Lifeblood of Modern Businesses
What are the most common mistakes companies make when it comes to managing and protecting sensitive user data? Read the guide now to learn how to move fast without breaking privacy.   SPONSORED  

Tolgee
A developer and translator-friendly web-based localization platform that's free for open-source projects on small to medium teams.

LocalSend
An open-source app for multiple mobile platforms that allows you to share files to nearby devices easily.

Databar
Access hundreds of APIs without writing a single line of code. Download custom datasets on finance, sports, and more in just a few clicks.

Plus
Build dashboards, connect apps, and share data without sharing logins and zero technical setup. Free for teams and individuals during the public beta.

Score
An open-source, developer-centric and platform-agnostic workload specification that ensures consistent configuration between local and remote environments.

Fancy Macbook App
A useful online tool to select and generate the CLI command needed to 'brew install' all your apps on a new Mac.

LinksforAll
An open-source option to set up your own bio links page, with optional category filtering and dark and light themes.

activepieces
An open-source alternative to Zapier, the business automation platform, to automate your work for free and without writing code, while your data stays on your machine.
 

JavaScript Utilities

nano-memoize
A small (780 Brotli bytes) and fast memoization utility for single and multiple argument functions.

Superdiff
A utility to compare two arrays or objects and return a complete diff of their differences in a readable format.

Mapkick.js
Create beautiful, interactive maps with one line of JavaScript, with support for Mapbox and MapLibre.

Data is the Lifeblood of Modern Businesses
What are the most common mistakes companies make when it comes to managing and protecting sensitive user data? Read the guide now to learn how to move fast without breaking privacy.   SPONSORED  

FeedbackPlus
An open-source JavaScript library that allows you to add screenshot taking and screenshot editing functionality to your feedback forms. This comes in handy where you want the user to take a screenshot of something when reporting an issue.

Domain Functions
Decouple your business logic from your controllers, with first-class type inference from end to end, by enforcing the parameters' types at runtime.

query-string
A utility to parse and stringify URL query strings with a number of different options available in an easy-to-use API.

simple-gpu
A utility that simplifies WebGPU programming by removing as much shared state as it can get away with by replacing the WebGPU API with two abstractions.

Taxi.js
A small and fast JavaScript library for adding slick PJAX (pushState + Ajax) navigation and beautiful transitions to your website.

TinyColor
A small, dependency-free library for color manipulation and conversion in JavaScript that allows multiple forms of input, while providing conversions and other color utility functions.

Typia
A Super-fast runtime validator (type checker), written in TypeScript, with all functions requiring only a single line of code.

winkNLP
A JavaScript library for natural language processing (NLP), designed to make development of NLP applications easier and faster.
 

Commercial Apps and Classifieds

A Tweet for Thought

If you're a fan of the movie Home Alone, you'll enjoy this thread from freelance writer Sean Kelly, where he debunks many of the supposed "plot holes" in the film. I'm almost ashamed to admit I've never actually watched the movie, but the thread made me want to give it a go! 😂
   

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

As you may have noticed, this is issue #500 of Web Tools Weekly. Amazing! I'm glad I've been able to keep up this project for all these years (almost 10 now!). And I'm happy I have a strong and engaged subscriber base.

To celebrate issue 500, here's one of my favourite songs of all time, from 1992: 500 Up by the Canadian alt-rock band Sloan. The low-budget video is also quite amusing featuring a plastic duck driving around in a Barbie car. 😂 If you're outside of Canada and have never heard of Sloan, just imagine the Pixies and Teenage Fanclub had a baby! (Although in their later years Sloan has been closer to 60s/70s rock).

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly