Web Tools #442 - Git/CLI Tools, SVG Tools, JS Utilities

Advertisement

I recently came across a 2020 article by a developer named Robert Thompson covering something called the RORO pattern in JavaScript. This is the first I've heard of this pattern. His article does a great job of covering it, but I'll go over it briefly here.

The RORO pattern stands for Receive an Object, Return and Object. As Robert explains in his post:

"...functions should always accept an object as their parameters and they should always return an object as their result. We will then destructure the arguments and the return to have more expressive way of knowing what goes in and out of a function."

This makes a lot of sense for code maintenance and readability. As an example, a function call like the following looks fairly mysterious:

To figure out what the arguments do, of course, we would have to find the function definition and examine the parameters there. But how much easier would it be to use an object that clarifies this at every function call:

As you've probably noticed, this is commonly used in plugins and utilities. This way, the developer can easily define settings that are passed in to the function, to change defaults. But the idea here is to do this for every function definition.

As Robert points out in his post, with ES6's object destructuring, dealing with this object in the function definition is easy and elegant:

Note the set of curly braces inside the function head, which destructures the object that's passed in, so the result is the same as if we hadn't used an object in the first place.

I think this is a good suggestion, so be sure to check out Robert's full post for more examples and details on the pattern.

Now on to the this week's tools!
 

Git, GitHub, and CLI Tools

The Best Time to Build a Data Stack
A data stack is a collection of tools that allow you to efficiently organize and analyze your data so all of your teams can work on the same page. Is your company ready?  sponsored 

Sync Contribution Graph
Node script that generates empty commits to match contributions from other public GitHub accounts (e.g. to have work commits appear in your personal contribution graph).

Codeberg
GitHub alternative. A collaboration platform and Git hosting for free and open source software, content, and projects.

werf
An open-source CLI tool written in Go, designed to simplify and speed up the delivery of applications.

git-bug
A distributed, offline-first bug tracker embedded in Git. Still listed in early development, and the author is looking for help maintaining and improving it.

nodekeeper
A lightweight alternative to nodemon that helps build Node.js applications by automatically restarting the app when file changes in the directory are detected.

Alacritty
A fast, cross-platform, OpenGL terminal emulator that comes with sensible defaults but allows for extensive configuration.

GitHub Userscripts
A set of 40+ userscripts to add various improvements and functionality to GitHub.

Twitter, Together!
A GitHub Action that utilizes text files to publish tweets from a GitHub repository. Because why not.

git-branchless
High-velocity, monorepo-scale workflow for Git . A suite of tools to help you visualize, navigate, manipulate, and repair your commit graph.

@author.io/shell
A lightweight framework for building shell/CLI applications. Works in Node.js, Deno, and the browser.

mnswpr
A Minesweeper game for your terminal written with React and Ink.

Media Tools (SVG, Images, Video, etc.)

Screenshots Aren’t Photos. Until Now.
Turn screenshots into actual image assets. Screenstab lets you import screenshots, transform them into photo-realistic 3D renderings, and export high definition images that are perfect for sharing.  sponsored 

Online Gantt
A free online tool to create Gantt charts, no signup or download needed. You can even open and save .gantt files or export as Excel, PDF, or image.

Seek Vectors
A search engine for finding high-res versions of corporate/company logos in PNG, SVG, JPG, EPS, and AI format. The logos are copyright their respective owners.

Photoshop-Export-Layers-to-Files-Fast
A script allows you to export your Photoshop layers as individual files at a speed faster than the built-in script from Adobe.

3dicons
Beautifully crafted open source 3D icons, each available in four color styles and file formats for just about any app or design tool.

ffflux
An online generator to create SVG-based "fluid" gradient backgrounds. Tweak a number of different settings and choose from a gallery of predefined gradients.

WEBMIDI.js
JavaScript library that makes it easy to interact with MIDI instruments directly from a web browser or Node.js. It simplifies the control of physical or virtual MIDI instruments with user-friendly functions.
 
COBE
A lightweight (5kB) WebGL globe library, usable with React, Vue, or plain JavaScript. The demo page shows you the configuration options available.

tldraw
A really nice little online drawing tool with a modest set up tools and options and ability to save with its own file format. To export as SVG or JSON, select everything, then right-click.

SVGcode
Online tool to convert raster images to SVG. Includes a number of different settings you can adjust before exporting the SVG version.

Which Icon Is That?
Not sure how often people need to do this, but this online tool will let you upload an icon and it will tell you which of 7 popular icon sets it belongs to.

Lorem Faces
AI-generated photos of people's faces to use in mockups. Guaranteed to creep you the hell out and if you see yourself here that's purely a coincidence and has nothing to do with the government or the CIA or anything.
 

JavaScript Utilities

Screenshots Aren’t Photos. Until Now.
Turn screenshots into actual image assets. Screenstab lets you import screenshots, transform them into photo-realistic 3D renderings, and export high definition images that are perfect for sharing.  sponsored 

reading-time
A script to add a "reading time" estimation to an article, based on word count, similar to Medium. Works with plain text, Markdown, or HTML.

Floating UI
A low-level toolkit to position floating elements (tooltips, popovers, dropdowns, menus, etc.) while intelligently keeping them in view.

Bree
A powerful job scheduler for Node.js and JavaScript with support for cron, JS dates, Vercel's ms utility, and more.

MiniMasonry.js
A lightweight, dependency-free Masonry layout library that computes element position in JavaScript and updates positions using CSS's transform attribute, for better performance and rendering.

Browser or Node.js
A utility to check where a particular piece of code is running: in the browser or Node.js.

Execa
An npm package that improves Node.js's child_process methods with a variety of different features.

liqe
A lightweight and performant parser and search engine similar to Apache's Lucene search engine software.

Splide
A lightweight, flexible and accessible slider/carousel written in TypeScript with no dependencies and no Lighthouse errors. Lots of live examples on the home page.
 
deeplinks.js
Expands on the in-page links concept by allowing a page to deep link to any selection of text, not just defined headings with IDs.

SyncedStore
A library for building distributed, real-time collaborative web applications that sync automatically.

On the Release Radar:

• Tabulator - Interactive Tables and Data Grids at version 5+
• Marked - Markdown parser and compiler at version 4+
• file-type - File type detection at version 17+
• noUiSlider - Range slider component at version 15+

Commercial Apps and Classifieds

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

Mergify - Faster and safer code merging for GitHub.

Thumbsmith - Programmable “link preview” thumbnails.

vscode.email - Newsletter featuring tips/tools for VS code, coming soon. ad 

Img.Upscaler - Smart PNG / JPG image upscaler service.

Advanced React - React course of 70+ HD videos, currently half price. ad 

Flaticon - 6.3 million vector icons and graphics.
 

A Tweet for Thought

2022? This sounds like a typical website visit from the past 3 years. We hope this will change in 2022.

 

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

I don't usually care much for "CSS art", but I have to share Ben Evans' CodePen account because there are some incredible drawings and games here – all done purely in CSS.

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