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'

You Might Also Like

Post from Syncfusion Blogs on 03/28/2024

Thursday, March 28, 2024

New blogs from Syncfusion Chart of the Week: Creating a .NET MAUI Column Chart to Visualize the Corporate Investment in AI By Saiyath Ali Fathima M Let's visualize the data on corporates'

New ZenHammer Attack Bypasses Rowhammer Defenses on AMD CPUs

Thursday, March 28, 2024

THN Daily Updates Newsletter cover Webinar: From Blind Spots to Bulletproof: Secure Your Apps with Shared Responsibility From oversight to overwatch: Discover the art of bulletproof app security with

Top Tech 🏆 Synology BeeStation NAS Review — Testing Anker's EverFrost Dual-Zone Powered Cooler

Thursday, March 28, 2024

Also: We Review the Arlo Essential Indoor Cam 2nd Gen, and More! How-To Geek Logo March 28, 2024 📩 Get the hottest deals, how-to's, breaking news, and more delivered directly to your inbox by

Last Chance

Thursday, March 28, 2024

Hello there, I wanted to follow up on our last email to let you know that our introductory iPhone Life Insider offer will expire tomorrow! Currently, a subscription to iPhone Life Insider costs $9.99/

Edge 381: Google DeepMind's PrompBreeder Self-Improves Prompts

Thursday, March 28, 2024

The method combines chain of thoughts, plan and solve and evolutionary algorithms in a single mthod. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Anthropic beats GPT-4 🤖, Pixel 9 leaks 📱, the fight for AI talent 👨‍💻

Thursday, March 28, 2024

Anthropic's Claude 3 Opus has surpassed OpenAI's GPT-4 for the first time on Chatbot Arena Sign Up|Advertise|View Online TLDR Together With Dollar Flight Club TLDR 2024-03-28 Exclusive offer:

From Request to Response: How APIs Work – Beginners Guide

Thursday, March 28, 2024

In the vast expanse of the digital ecosystem, APIs (Application Programming Interfaces) act as critical conduits, facilitating seamless conversations between different software platforms. From clicking

Elastic 8.13 is here: Amazon Bedrock in the AI Assistant for Observability

Thursday, March 28, 2024

Learn about Amazon Bedrock support within the Elastic AI Assistant for Observability ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ elastic | Search. Observe. Protect

A Creative Market Reset 🎨

Thursday, March 28, 2024

Adobe needed some real competition. Now it has some. Here's a version for your browser. Hunting for the end of the long tail • March 27, 2024 A Creative Market Reset Canva's purchase of

Fisker lost millions … then it got them back

Wednesday, March 27, 2024

More Fisker woes View this email online in your browser By Christine Hall Wednesday, March 27, 2024 Welcome back to TechCrunch PM! This afternoon, learn about some new Google features, a startup that