Web Tools #424 - JS Utilities, Git/CLI Tools, Vue.js

Advertisement

Once in a while you may want to take a look at what's in the pipeline when it comes to new JavaScript features (specifically in the ECMAScript spec).

The official GitHub account for Ecma International (the standards body that oversees advances in the language) has a proposals repository that includes tables showing some features that are at various stages of approval.

You might like to check out the stage 2 and stage 3 proposals that have not yet been rejected or completed (i.e. are still in progress, but far along). Here are some interesting ones in those tables:

• JSON Modules - Builds on another proposal called Import Assertions to add the ability to import a JSON module in a common way across JavaScript environments.
• Error Cause - Adds a cause property in an options parameter in the Error() constructor. This aims to simplify some complex debugging involving deep internal methods.
• Array find from last - Adds .findLast() and .findLastIndex() methods on arrays and typed arrays. These will help to find an element of an array from last to first with a condition function.
• New Set methods - For example, Set.intersection(), Set.union(), Set.isSubsetOf(), Set.isSupersetOf(), etc.
• Records & Tuples - Introduces two new deeply immutable data structures to JavaScript. One is object-like ( #{ x: 1, y: 2 } ) and the other is array-like ( #[1, 2, 3, 4] ).
• The Pipeline Operator - This operator (commonly found in other programming languages) looks like: |>  and will help to streamline chained function calls and provides a practical alternative to extending built-in prototypes.

There are lots of others listed in the repo and you'll also find links to other proposals that are at stage 0 or stage 1, and therefore are not too far along yet.

Now on to this week's tools!
 

JavaScript Utilities

Free Guide: The Evolution of JavaScript Tooling.
Frameworks and libraries have been created to ease the burden of writing complex UI code. Learn how to deliver applications faster, better, and on budget in our free guide. Download your free guide!  sponsored 

isomorphic-timers-promises
Timers/promises for client and server.

ts-gyb
A multi-purpose code generation tool based on TypeScript interfaces to generate production ready and well documented code from TypeScript code.

HyperFormula
An open-source calculation engine written in TypeScript that allows you to perform Excel-like calculations in your business applications and works with Vue, React, and Angular.

AutoMapper TypeScript
An object-object mapping solution by convention in TypeScript.

html-to-image
Utility to generate an image from a DOM node using HTML5 Canvas and SVG.

inLine
A free library to create a simple and small WYSIWYG text editor designed to fit into any layout, for web and mobile apps.

JavaScript Cookie
A simple, lightweight JavaScript API for handling browser cookies.

FZF for JavaScript
Do fuzzy matching using the FZF algorithm in JavaScript.

color
JavaScript library for immutable color conversion and manipulation with support for CSS color strings.

Mapus
A tool to explore and annotate collaboratively on a map. You can draw, add markers, lines, areas, find places to go, observe other users, and much more.

fzstd
High performance decompression in a pure JavaScript, 8kb package, using the Zstandard data compression algorithm.
 

Git, GitHub, and Command Line Tools

Elevate Fall Summit Free Tickets
Grab your free tickets for Elevate, the biggest conference for engineering and product leaders, with speakers like Reddit’s CTO or Slack’s VP Engineering. Use promo code WTW21 to get a 100% discount on the 3-day pass.   sponsored 

barchart
A small shell program to make bar charts in your terminal.

Noteli
A CLI based notes app built using TypeScript, MongoDB, and Auth0.

Mosh
Remote terminal application that allows roaming, supports intermittent connectivity, and provides intelligent local echo and line editing of user keystrokes.

GitHub Rater
Enter a GitHub user name and this tool will give you a score (similar to "PageSpeed Insights"). I got a 92/100 even though I'm not all that active on GitHub (though I do have a few popular repos).

Zellij
A Linux or Mac terminal workspace that has the base functionality of a terminal multiplexer (e.g. like tmux) but includes built-in features to extend it and create a personalized environment.
 
dotly
A simple, fast, dotfiles framework for improved productivity.

Fig
Adds VS Code-style autocomplete to your Mac terminal. As you type, pops up subcommands, options, and contextually relevant arguments in your existing terminal.

Cliffy
A command line framework for Deno for creating interactive command line tools.

On the Release Radar:

• Commander.js - Node CLI library now at version 8+
• Lepton - Gist-based snippet manager now at version 1.10

Vue Tools

Elevate Fall Summit Free Tickets
Grab your free tickets for Elevate, the biggest conference for engineering and product leaders, with speakers like Reddit’s CTO or Slack’s VP Engineering. Use promo code WTW21 to get a 100% discount on the 3-day pass.   sponsored 

vitesse-lite
A lightweight version of Vitesse, the opinionated Vite starter template.

nuxt/image
Plug-and-play image optimization for Nuxt.js apps. Resize and transform your images in your code using a built-in optimizer or your favorite CDN.

rovueing-tabindex
Add "roving" tabindex values to your Vue components. See the linked video for an explanation of what "roving" means in this context.

petite-vue
An alternative distribution of Vue optimized for progressive enhancement.

vue-grep
A command-line tool that lets you search your Vue codebase using CSS selector syntax (like querySelectorAll or jQuery), for navigating large code bases.

v-lazy-image
A Vue component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

vuex-persistedstate
Persist and rehydrate your Vuex state between page reloads.

Figma-Low-Code
An Open source project that allows you to use Figma designs directly in Vue applications.
 
vue3-sfc-loader
Single File Component loader for Vue. Load .vue files directly from your HTML with no Node.js environment and no build step.

vue-frag
Use Vue 3's Fragment feature in Vue 2 to return multiple root elements.

Splitpanes
A reliable, simple and touch-ready panes splitter and resizer for Vue apps.

vue-email-autocomplete
A configurable and lightweight Vue wrapper component that enables out-of- the-box email autocomplete/suggestions on input elements.

Commercial Apps and Classifieds

These are commercial (non-free) apps, paid classifieds, and affiliate links. You can submit a link for consideration or you can buy a classified link (will be marked "ad").

Vadootv - Video hosting and marketing made simple.

JS E-Books Bundle - 3 JS/DOM e-books in EPUB, PDF, MOBI formats $9. ad 

Rainforest - A complete QA platform for software releases.

React for Beginners - Course w/ 29 HD videos (~5 hours) to learn React. ad 

Hippobase - Self-host open source databases in one click.

BackgroundRemover.app - API to remove backgrounds from images.
 

A Tweet for Thought

Jason Miller with an interesting thread on what older devices/browsers we should or shouldn't support.

 

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 a Vue developer and want even more Vue tools, check out VueToolbox. The only problem is that the project seems to be abandoned. Nonetheless, there's still quite a few links there.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee