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

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #471 • July 28, 2022

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

Learn More
Retool

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)

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


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

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


Tailwind CSS Tutorial for Beginners: A Guide to Get Started

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

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.

Lyra

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:

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.

Repo Trends

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.
 
💡 This week in VSCode.Email:
  • Dealing with 'preview mode' when opening files
  •  A lightweight Rest API client for VS Code
  • Useful VS Code Extensions for Front-end Developers
Check the archives for the latest issue, and subscribe for more!

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.

mdsvex

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?

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

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

Key phrases

Older messages

Web Tools #470 - JS Classes, Tailwind, CSS, SVG, Bundlers

Thursday, July 21, 2022

Web Tools Weekly WEB VERSION Issue #470 • July 21, 2022 Advertisement Meet Filestack: The All-In-One File Handling Service Filestack is the premier service designed to meet all your file handling needs

Web Tools #469 - React, Testing, Figma to Code, Uncats

Thursday, July 14, 2022

Web Tools Weekly WEB VERSION Issue #469 • July 14, 2022 Advertisement Meet Filestack: The All-In-One File Handling Service Filestack is the premier service designed to meet all your file handling needs

Web Tools #468 - Frameworks, JSON, Databases, JS Utilities

Thursday, July 7, 2022

Web Tools Weekly WEB VERSION Issue #468 • July 7, 2022 Advertisement Build Internal Tools 10x Faster with Retool Retool is the fast way for developers to build and share internal tools. Teams at

Web Tools #467 - CSS Tools, Git/CLI, React

Thursday, June 30, 2022

Web Tools Weekly WEB VERSION Issue #467 • June 30, 2022 Advertisement Meet Filestack: The All-In-One File Handling Service Filestack is the premier service designed to meet all your file handling needs

Web Tools #466 - WebPageTest, JS Libraries, Media Tools, Uncats

Thursday, June 23, 2022

Web Tools Weekly WEB VERSION Issue #466 • June 23, 2022 The following intro is a paid product review for WebPageTest, a suite of performance products and resources for developers and teams. If you'

HBO Max is pulling 36 shows this week — Here's the list

Thursday, August 18, 2022

TechCrunch Newsletter TechCrunch logo The Daily Crunch logo By Christine Hall and Haje Jan Kamps Thursday, August 18, 2022 G'day, crunch bunch! We're both starting to get a little bit excited

📱 Issue 320 - Structs, Classes, and Actors in iOS Interviews - Holy Swift

Thursday, August 18, 2022

This week's Awesome iOS Weekly Read this email on the Web The Awesome iOS Weekly Issue » 320 Release Date Aug 18, 2022 Your weekly report of the most popular iOS news, articles and projects Popular

💻 Issue 319 - Microsoft and Canonical announce native .NET availability in Ubuntu 22.04 hosts and containers

Thursday, August 18, 2022

This week's Awesome .NET Weekly Read this email on the Web The Awesome .NET Weekly Issue » 319 Release Date Aug 18, 2022 Your weekly report of the most popular .NET news, articles and projects

💎 Issue 326 - Requiring MFA on popular gem maintainers

Thursday, August 18, 2022

This week's Awesome Ruby Newsletter Read this email on the Web The Awesome Ruby Newsletter Issue » 326 Release Date Aug 18, 2022 Your weekly report of the most popular Ruby news, articles and

💻 Issue 326 - Building a chat app with Socket.io and React 🚀

Thursday, August 18, 2022

This week's Awesome Node.js Weekly Read this email on the Web The Awesome Node.js Weekly Issue » 326 Release Date Aug 18, 2022 Your weekly report of the most popular Node.js news, articles and

💻 Issue 326 - Introducing the Markdown Language Server

Thursday, August 18, 2022

This week's Awesome JavaScript Weekly Read this email on the Web The Awesome JavaScript Weekly Issue » 326 Release Date Aug 18, 2022 Your weekly report of the most popular JavaScript news, articles

💻 Issue 321 - Rust in Perspective

Thursday, August 18, 2022

This week's Awesome Rust Weekly Read this email on the Web The Awesome Rust Weekly Issue » 321 Release Date Aug 18, 2022 Your weekly report of the most popular Rust news, articles and projects

💻 Issue 244 - Building a chat app with Socket.io and React 🚀

Thursday, August 18, 2022

This week's Awesome React Weekly Read this email on the Web The Awesome React Weekly Issue » 244 Release Date Aug 18, 2022 Your weekly report of the most popular React news, articles and projects

📱 Issue 323 - DocC Interactive Tutorials — How to create an iOS framework Pt5

Thursday, August 18, 2022

This week's Awesome Swift Weekly Read this email on the Web The Awesome Swift Weekly Issue » 323 Release Date Aug 18, 2022 Your weekly report of the most popular Swift news, articles and projects

JSK Daily for Aug 18, 2022

Thursday, August 18, 2022

JSK Daily for Aug 18, 2022 View this email in your browser A community curated daily e-mail of JavaScript news Implementing Route Protection in Angular using CanActivate In any complex web application,