Web Tools #471 - CSS Articles, JS Utils, Git/CLI, Svelte

Advertisement

As many of you know, I don't feature articles as part of the tools lists in this newsletter. I only feature the tools themselves, no blog posts or similar content – even if the content is about a particular tool.

But I do a lot of writing outside this newsletter so once in a while I will share my own content in this intro, as I'll do in a moment.

As an aside here, if you have a quick front-end coding tip you'd like to share in this newsletter, I'd be happy to consider publishing it and you can also include links to anything you're currently promoting (blog, YouTube channel, etc.). Reach out using this form if you want to contribute something. We can even discuss payment for the content.

As far as my own writing: Over on the CodeinWP blog, as I've mentioned in previous issues of this newsletter, I've continued to write articles on lengthier topics compared to those on my own blog or in this newsletter.

I've written a bunch of stuff on CSS over the past year or so, including three beginners CSS articles that you might want to check out.

Beginner’s Guide to CSS Variables (aka CSS Custom Properties)

How to Use CSS Media Queries: A Complete Guide for Beginners

Tailwind CSS Tutorial for Beginners: A Guide to Get Started

If you're pretty new to CSS, you'll definitely find the content useful, and it might even help a few of you who are more seasoned with CSS. For example, maybe the Tailwind article is just the boost you need to give the controversial utility library a shot.

Finally, last week Smashing Magazine published a roundup that I put together for them:

Powerful Image Optimization Tools

That last article, as you might guess, includes a whole slew of tools I've already included in previous issues of this newsletter along with some others that I came up with while researching it.
 

Now on to this week's tools!
 

JavaScript Utilities

Internal Tools Are Built On Retool
Build interfaces fast with 100+ pre-built components. Then customize with JavaScript, SQL, HTML, and CSS. Read and write to any data source and API, like Snowflake, BigQuery, and 40+ more. Deploy apps in record time.    SPONSORED 

AG Grid
A full-featured and highly customizable JavaScript data grid with outstanding performance, no third-party dependencies, and integrates with all major JavaScript frameworks.

esm-import-transformer
Change import URLs in JavaScript code using import maps. e.g. `import * from "before"` to `import * from "after"`.

Wayne
A Service Worker routing library for in-browser HTTP requests, like Express.js inside a Service Worker.

trim-lines
A tiny utility that removes spaces and tabs around line endings for when you need to trim Markdown-like whitespace around line endings and don’t want to run into performance problems.

Lyra
A fast, in-memory, typo-tolerant, full-text search engine written in TypeScript.

TimelineJS
Build a rich, interactive timeline component that you can embed on a page. You can build via a Google Sheet or use code for a more customized look.

collect.js
A convenient and dependency-free wrapper for working with arrays and objects.

public-ip
A Node.js or browser module that can get a public IP address using a variety of services (OpenDNS, Google DNS, etc).

pretty-ms
A utility to convert milliseconds to a human readable string. For example, "1337000000" becomes "15d 11h 23m 20s".

minimatch
A minimal matching utility that's the matching library used internally by npm. It works by converting glob expressions into JavaScript RegExp objects.

fontkit
An advanced, multi-featured font engine for Node and the browser, used by PDFKit.

On the Release Radar:

• is-online – Check if the internet connection is up, at version 10+
• filesize.js – Human readable file sizes at version 9+
• spacetime – Time zone library now at version 7+

Git, GitHub, and CLI Tools

The Sample
Each morning, The Sample sends you one article from a random blog or newsletter that matches up with your interests. When you get one you like, you can subscribe with one click.    SPONSORED 

Deprank
Node-based CLI tool that uses Google's PageRank algorithm to find the most important files in your JavaScript or TypeScript codebase.

GitHub City
Enter a GitHub user name and this tool will use Three.js to display a 3D city based on the user's GitHub contributions.

Gitdash
A set of tools to quickly and easily perform actions on your repositories that would normally take a lot of steps and are sometimes hard to find.

Glow
A terminal-based markdown reader that can be used to discover markdown files, read documentation directly on the command line, and create private collections of files.

sake
A Go-based command runner for local and remote hosts. You define servers and tasks in a sake.yaml config file and then run the tasks on the servers.

Repo Trends
Search for any GitHub repo and get a visual representation of the repo's issues and pull requests over time.

Terminal Gif Maker
A customizable online tool to generate a GIF that emulates an animated terminal session. Enter each command as a single line, customize the look, then simulate the commands before exporting the GIF.

Infracost
Open source tool that shows you cloud cost estimates for Terraform in pull your requests.

changelogen
Generate a changelog using Conventional Commits, a specification for adding human and machine readable meaning to commit messages.

docs.page
Instant open source docs with zero configuration. Just add a docs directory to your GitHub repo, then create an index.mdx file inside it.
 

JavaScript Library Plugins

The Sample
Each morning, The Sample sends you one article from a random blog or newsletter that matches up with your interests. When you get one you like, you can subscribe with one click.    SPONSORED 

smoothscroller
A GreenSock (GSAP) plugin that provides a smooth scrolling addition to ScrollTrigger, leveraging native scrolling and integrating seamlessly with your GSAP animations.

Svelte Intl Precompile
An internationalization library for Svelte that analyzes your keys at build time for maximum performance and minimal footprint.

Remix SEO
A collection of SEO utilities (currently sitemap and robots.txt) that you can integrate as part of a Remix-based application.

ember-cli
Official Ember.js CLI to create, build, test, and serve the files that make up an Ember app or add-on.

ngx-tfjs
Angular bindings for TensorFlow.js models, to simplify using machine learning (ML) in the browser.

mdsvex
A Markdown preprocessor for Svelte projects.

Cashew
A flexible and straightforward library that caches HTTP requests in Angular.

Angular Email Editor
A drag-and-drop visual email editor component for Angular.

Svelte Carousel
A super lightweight, super simple carousel for Svelte. The repository also reminds you why you should almost never use carousels.

Forms Manager
A foundation for proper form management in Angular that allows typed forms, auto persists a form's state on navigation, provides an API, and more.

Helipopper
A powerful tooltip and popover library for Angular apps that's a wrapper for Tippy.js, a popular JavaScript tooltip solution.
 

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

AutoRegex – Build regular expressions with AI from regular English phrases.

Code Language Converter – Convert one programming language to another.

Bytes – An entertaining and informative modern JavaScript newsletter.  AD 

Mintlify – A back end that provides a platform for continuous documentation.

Malthus– Generate high-quality prospects and leads for your business.  AD 

Export SDK – A toolkit, API, and SDK to easily design and generate PDFs.

NoCodeAPI – The easiest way to connect with APIs without a back end.
 

A Tweet for Thought

Let's all 'like' this Tweet then do nothing to fix the problem. Deal?

 

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 Driving Simulator lets you drive a vehicle in a game-like manner on any location you pull up on Google Maps. Would be interesting if it was somehow programmed to only drive on roads or something, but it's nonetheless pretty neat.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly