Web Tools #447 - CSS Tools, Testing, Jamstack, CMS's

Advertisement

Instead of covering a single coding tip like I often do in this newsletter's intro, I thought I would link to a small handful of coding-related articles that I thought you would enjoy. These are topics similar to what I might cover here, but are much better in a longer format.

If you've ever wanted a good post that demystifies the overly-complicated sounding term Higher-order Functions in JavaScript, you'll enjoy this one by Tapas Adhikary:

Higher-Order Functions (HoF) in JavaScript - Explain Like I'm Five

As the author explains:

"For every new operation, you need to change the logic of the core function. It makes your function polluted and will increase the chance of code smells. Let's use the Higher-Order function to solve this problem."

Another one that recently caught my eye:

Sorting in JavaScript

Rupert McKay does a good job of covering just about anything you need to know from a practical standpoint on sorting arrays and objects, with lots of useful code examples.

And thirdly, this one was originally published almost a year ago, but I only saw it for the first time in the past week or so:

Modern Javascript: Everything you missed over the last 10 years

The author, Sandro Turriate, explains:

"JavaScript has come a long way since I knew it as the 'D' in DHTML. For anyone like me, who’s been reluctant to use the latest syntax that could require polyfills or a transpiler, I’ve written this cheatsheet to get you caught up on all the goodness that’s widely supported in modern browsers."

He doesn't cover everything that's new in the last 10 years, but he includes quite a bit of the relevant stuff accompanied by interactive examples.

Now on to this week's tools!

CSS and HTML Tools

The Easiest Modern Data Stack to Set Up
Sign up for a 14-day free trial of Mozart Data’s data stack. Get set up in under an hour and organize all your data in one place for faster, better analysis. sponsored 

Style Dictionary
A build system for creating cross-platform styles. Provides a single place to create and edit your styles, and exports these tokens to iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc.

MDB Fancy Border Radius Generator
A tool to generate unusual shapes by incorporating the 8-value syntax for the border-radius property.

lite-youtube
A web component that renders YouTube embeds faster. The ShadowDom web component version of Paul Irish's lite-youtube-embed.

Griffel
From Microsoft, a CSS-in-JS solution with near-zero runtime, SSR support and styles defined with JavaScript objects.

rasterizeHTML.js
A script to render HTML onto the a canvas element, which apparently bypasses the usual limitations on this sort of thing.

CSS Gradient Generator
Josh W. Comeau's gradient generator that lets you build attractive gradients that don't have the ugly 'gray dead zone' where the colors change.

CSS Speedrun
Interactive tool to test your knowledge of using different CSS selectors, getting progressively more difficult.

Colourpallete
A gallery of pretty colors for inspiration, built by an 11-year old developer.

metaSEO
Online tool to generate all your SEO and social media meta tags to drop into the head of your document.
 

Testing and Debugging Tools

Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today!  sponsored 

ParrotBay.io
Service to inspect and mock your REST API requests and response payloads and headers.

Toxiproxy
A framework for simulating network conditions made specifically to work in testing, CI, and development environments.

SLA & Uptime Calculator
Useful if you're including an uptime guarantee (e.g. 99%) and you want to know how much downtime that means daily, weekly, monthly, etc.

json-graphql-server
Get a full fake GraphQL API with zero coding in less than 30 seconds, so you can start learning GraphQL without too much headache.

PrivacyTests.org
Online guide to understand in detail what data each web browser is leaking and which web browsers offer the best privacy protections.
 
hiccupFX.js
More of a parody than an actual test script, but you can add this script to a page to mimic a loading website whose elements are shifting around annoyingly.

vite-plugin-inspect
Inspect the intermediate state of Vite plugins. Useful for debugging and authoring plugins.

eslint-plugin-jsx-a11y
Static abstract syntax tree (AST) checker for accessibility rules on JSX elements.

Canvas Engines Comparison
A module you can use to compare the performance of different canvas-based JavaScript engines (PixiJS, Two.js, Paper.js, Fabric.js, Pencil.js, etc).
 

Jamstack, CMS's, etc.

Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today!  sponsored 

Platforms Starter Kit
A template site builders and low-code tools, an all-in-one starter kit for building platforms on Vercel.

Ivy
A small, elegant, and simple-to-use static website generator built in Python, suited for a documentation website.

Front Matter
A CMS that runs within VS Code that gives you the power and control of a full-blown CMS while providing you the flexibility and speed of the static site generator of your choice (Hugo, Jekyll, Hexo, Next.js, Gatsby).

Netlify Drop
Drag and drop a folder with a website’s HTML, CSS, and JS files and get a shareable public link of the working website.

Cromwell CMS
A WordPress-like open source headless TypeScript-based CMS for React/Next.js websites, with a powerful plugin/theming system.
 
DocPad
One of the original static site generator tools. No longer maintained but I've never linked to it, so here it is.

URLgApp
Free tool to convert any website to an Android app, to be ready to submit to the Google Play Store.

Lumen
A constantly evolving and thoughtful architecture for creating new static blogs.

Svekyll
The radical simplicity of Jekyll plus the futuristic power of Svelte.

Slinkity
Still in Alpha dev stage. The simplest way to handle styles and component frameworks on your Eleventy site.

FireCMS
A Firestore-based headless CMS and admin panel that integrates by default with Firebase and Firestore but it can be used with any back end.
 

Commercial Tools and Classifieds

These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).

Staat - Your engineering management mission control.

Mockswitch - An API gateway for fully mocked stateful API responses.

vscode.email - Newsletter featuring tips/tools for VS code, coming soon. ad 

packagecloud - Enterprise-level private npm registry and repository.

Advanced React - React course with 70+ HD videos across 11+ modules. ad 

DevTools for Tailwind - DevTools extension for debugging Tailwind sites.

Ayro UI - Bootstrap UI component snippets for apps and landing pages.
 

A Tweet for Thought

Copyright violations have reached the point of reductio ad absurdum.

 

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 doing a lot more home cooking due to more remote work, you might like Stovetop, a recipe search engine that scrapes from 7 different popular recipe destinations.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon  /  GitHub Sponsors  /  E-Books  /  $5 Tip  /  $1 Tip