Web Tools Weekly
Tools for Web Developers

Issue #483  (VSCode Updates, Frameworks, Git/CLI, JS Utils)10/20/22


Advertisement
Meet the Tesla of Productivity Apps
Sunsama helps you prioritize and focus on the work that matters, instead of dumping everything on a to-do list. With weekly objectives, daily planning, and shutdown rituals, you can create ‘atomic habits’ that propel you towards success.

Get Your 14-day Free Access Here
Sunsama

Visual Studio Code is a massively used piece of software whose popularity hinges on one thing: It's free.

Sure, it's also cross-platform, feature-rich, gets constant updates, and takes feedback from the community on improvements. But none of that would matter as much if it wasn't a free product. It would still be a decent paid product, but the fact that it's been free and open-source has catapulted it into the top code editor or IDE in the world.

VS Code is the top IDE in the world

Even the fact that it's owned by Microsoft hasn't stopped it! :)

I'm actually pretty amazed at the number of features it continues to pump out, something I've been keeping more of an eye on lately. Here are some examples of stuff VS Code has added in recent months:

  • Improved autoscroll behaviour – This improves the editor's behaviour when you click and drag to select a long piece of text that spans multiple screens.
  • Explorer rename selection improvements – This allows you to use the F2 key to cycle through three different types of file renames: file name only, entire selection, and file extension only.
  • Editor sticky scroll – This improves the editor UI to show scope during scrolling. For example, you can immediately see which class, namespace, function, constructor, etc. you're in within your document.
  • Toggle between Light and Dark themes – This allows you to use a single command to switch between your preferred dark and light themes.
That's just one feature from each of the past four monthly releases. Each month normally has 8 or more new significant feature improvements, along with various minor bug fixes.

There has been some controversy, as there always will be with free software that's owned by a large corporation. For example, VS Code collects data from users and there may be legal issues with using its open-source code.

As you might know, I used to occasionally include VS Code extensions in this newsletter as part of a "Text Editors and IDEs" category. You can click the "Text Editors" filter on the Web Tools Weekly archives if you want to see old issues with those tools.

But I recently decided to splinter off all IDE-related tools into a new newsletter called VSCode.Email, which I've now been running regularly for about 6 months now. The newsletter is relatively brief but includes tools, extensions, the latest news, articles, and tutorials on VS Code. There's also a short section that includes about 3 links related to other IDEs.
 
VSCode.Email

Will VS Code one day be overtaken? Maybe, but not anytime soon. The fact that it's still free after all these years seems to be continuing to win over developers worldwide.

Now on to this week's tools!
 

Front-end Frameworks

Meet the Tesla of Productivity Apps
Sunsama helps you prioritize and focus on the work that matters, instead of dumping everything on a to-do list. With weekly objectives, daily planning, and shutdown rituals, you can create ‘atomic habits’ that propel you towards success.    SPONSORED 

El
A minimal JavaScript application framework, based on Web Components and inspired by React, Vue, and lit-element.

Harmaja
An experimental web framework that uses JSX syntax, is written in TypeScript, and is based on function components only.

Hope UI
An open source, enterprise grade multi-purpose admin template with 100+ ready-to-use components and elements and includes light, dark, and RTL modes.

Vercel Templates
A categorized directory of prebuilt templates from the Vercel team. Includes templates that use Next.js, Gatsby, Svelte, React, Tailwind, Material UI, various database solutions, and more.

Dracula UI
A dark-first collection of UI patterns and components and includes a highly configurable design system, and integration with VS Code snippets.

Dracula UI

a17t
A Tailwind CSS plugin that provides atomic components like field, button, and card in a neutral design language that scales with your project.

React Native Zephyr
A Tailwind-inspired styling library for React Native that includes styling utilities and an extendable theming system.

NeoPOP
A library of React components and utility methods, based on the design system of a financial company called CRED.

WindUI
Expertly-made, responsive, accessible components in React and HTML, ready to be dropped into your Tailwind CSS project.

Leafjs
A simple API, based on Web Components, for building websites, component libraries, and more.

Reactist
An open-source set of 30+ accessible React components and design system elements. All elements include multiple examples in the docs.
 

Git, GitHub, and CLI Tools

Get IT Industry News with Ease
Keeping up with the latest news across the IT industry can be tough. IT Brew does the hard work for you, distilling top news and insights into a free, quick-to-read email newsletter delivered every Monday, Wednesday & Friday. Check it out!   SPONSORED 

GitStory
Enter a GitHub repository and this tool will display a commit history in calendar form that you can examine as a sort of repo time machine.

Sampler
A tool for executing, visualizing, and alerting shell commands, configured with a simple YAML file.

Release Please Action
A GitHub action to automate releases using the Conventional Commits specification standards.

Tweet CLI
A JavaScript-based Node CLI for sending Tweets, intended for use in CI systems, to automate Twitter notifications.

emgithub
An online tool and services that lets you embed any file from a GitHub repository the same way you can embed GitHub Gists.

emgithub

Linear-GitHub Sync
An app that lets you sync GitHub issues with tickets in Linear, the product roadmap and issues software for apps.

jot
A note management tool built in Rust for taking notes via the terminal, similar to the popular Obsidian.

pdfgrep
A command-line utility to search text in PDF files, compatible with GNU Grep, and able to search multiple PDFs.

cifuzz
A Go-based CLI tool that helps you to integrate and run fuzzing based tests into your project.

zxb
A script manager for zx (the Bash alternative) to help you write, use, edit and even share zx scripts quickly.
 

JavaScript Utilities

Get IT Industry News with Ease
Keeping up with the latest news across the IT industry can be tough. IT Brew does the hard work for you, distilling top news and insights into a free, quick-to-read email newsletter delivered every Monday, Wednesday & Friday. Check it out!   SPONSORED 

Mineflayer
Create Minecraft bots with a powerful, stable, and high level JavaScript API.

discordx
A JavaScript module that's an extension of discord.js, to create a Discord bot with TypeScript and Decorators.

μFuzzy
A tiny, efficient fuzzy search library designed to match a relatively short search phrase (needle) against a large list of short-to-medium phrases (haystack).

flat
A utility to take a nested JavaScript object and flatten it, or unflatten an object with delimited keys.

ZipMonster
A reliable and free JavaScript solution for working with US zip codes and addresses.

colorgrad-js
A high-performance JavaScript color gradient library and API powered by Rust  and WebAssembly.

colorgrad-js

messagepipe
A utility that formats message strings with number, date, plural, and select placeholders to create localized messages.

The Guard
An open-source enterprise-ready authentication solution with support for React, Vue, and Angular, to quickly launch a secure, customizable login flow.

Providence
A state abstraction library that aims to make state management with tools like Redux and Vuex much easier.

once
A magic memoization function that uses a PHP 8 Weakmap under the hood.
 

Commercial Apps and Classifieds

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

Sktch.io – Create functional and data-driven websites with no code.

Frontdrop – Figma plugin to convert Figma designs to HTML and CSS.

GitPaid – A paywall service that allows you to monetize your GitHub repos.

Hatica – Engineering Analytics to boost developer productivity.

My WebSite is Online – Uptime monitoring service for web artisans.
 

A Tweet for Thought

This is so great, a video of a 4-year old explaining how a while loop works. Gives new meaning to the phrase 'explain it like I'm 5'!
 
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...

If you're planning a vacation soon, you might want to check out Wikivoyage, a Wikipedia-like travel guide, part of the Wikimedia family.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris