Web Tools #427 - JS Utilities, Jamstack/CMS's, VS Code

Advertisement

Stack Overflow questions like this 6-year old JavaScript question, or this similar one from 11 years ago for C/C++ remind us of the need to do everything in our power to keep code clean and easy to understand.

As you'll see in the JavaScript one, the user is asking about this part of the code he's pasted:

Let's leave out the fact that the curly braces are missing, which isn't my preference. In addition to that, the code is using !-- in a way that makes it appear as a valid operator the user wasn't familiar with.

If you're experienced with JavaScript, then you'll immediately know that this is not a new operator but, as the answers point out, a combination of operators: The not operator (!) and the decrement operator (--). Thus, the code is checking if the pending variable is true after it's been inverted as a Boolean and decremented by one.

Again, experienced JavaScript developers wouldn't have a problem with this. But imagine how this would look to someone somewhat new to programming or maybe even someone who's been writing JavaScript for 15 years but was out of the industry for the last 5 – for all they know, this is a new operator added to the ECMAScript spec. And good luck typing !-- into a search engine to get any meaningful results!

I haven't fully examined the code in the question's example, but I do feel like it could be better written by either adding a code comment or by being more explicit in what's taking place. For example, is this better?

Problem is, I still find this misleading because it would seem (according to one comment) that the code is basically saying 'when the pending variable is equal to zero run the done() function'. So why am I checking if its 'true' when it's supposed to be zero? Why not forget the inversion and check if its zero (or falsy)?

While one C programmer in the thread says this pattern looks totally fine, the top answer in the thread rightly says:

"This may be a common idiom in other programming languages, but for most declarative JavaScript programming this looks quite alien."

Again, I don't know the full context of the code, but the basic lesson here is to do everything to make code easier to process mentally for both experienced and less experienced developers who might have to maintain that code in the future.

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 

JSEncrypt
A JavaScript library to perform OpenSSL RSA encryption, decryption, and key generation.

svg2pdf.js
A JavaScript-only SVG to PDF conversion utility that runs in the browser, leveraging the popular jsPDF library.

parse-domain
Utility to split a hostname into subdomains, domain, and top-level domain.

simplex-noise.js
A fast "simplex noise" implementation in JavaScript. If you don't know what that means, just imagine your 1980s TV is not working.

Starback.js
Create and customize an animated falling-star background for any web page using a simple jQuery-like settings object. The demo is nice!

BigDecimal
A polyfill for the new ECMAScript decimal proposal, which adds a decimal type to JavaScript (e.g. for human-readable currency).

async-off
A utility to make asynchronous TypeScript code synchronous.

recoil-toolkit
A set of helpers, patterns, and best practices for Recoil, the next generation state management library.

fuzzball.js
Easy to use and powerful fuzzy string matching. A port of a Python library called TheFuzz.

On the Release Radar:

• on-change - Watch an object or array for changes at version 4+
• TypeIt - Animated typing effect at version 8+
• Uppy - JavaScript file uploader at version 2+
• Marked - Markdown parser and compiler at version 3+

Jamstack, CMS's, Site Builders, etc.

Get up to $10K 💰 to List Your Digital Product on AppSumo Between Now and November 17th
AppSumo is giving away $1 million from their Black Friday marketing budget to digital product creators. $1,000 bonus to the first 400 products to go live. $250 bonus to the next 2,000 products to go live. 10 lucky entrepreneurs can win a $10K bonus!  sponsored 

Medusa
An open-source headless commerce engine to build a flexible storefront that's easy to integrate with various commerce-related tools (Stripe, PayPal, etc).

Burdy
An open-source headless CMS written in Node, TypeScript, and React.

Pagic
An easy-to-configure static site generator powered by Deno and React, with support for Markdown, TypeScript, and React hooks.

Eleventy Serverless
A plugin to run Eleventy in a serverless function for server side rendering (e.g. previews in your CMS).

PRPL
A modular static site generator built for longevity that lets you interpolate content with a single HTML element with no bundlers, config, or underlying framework.

Desech Studio
A no-code visual HTML/CSS editor (Windows, Mac, Linux) that lets you import files from Figma, Sketch, and Adobe XD.
 
click|app
A drag-and-drop builder to create React + Bootstrap apps without coding, on top of a real data source.

Gatsby Templates
Fast, customizable templates for Gatsby including portfolio themes, documentation templates, blogs, and landing pages.

Berowra
An open-source CMS built for hackers and hobbyists that runs on Deta Space (a cloud service for apps).

Livemark
A Python-based static site generator that extends Markdown with interactive charts, tables, scripts, and other features.

ApostropheCMS
A full-featured, open-source CMS built with Node.js that combines in-context editing and headless architecture in a full-stack JavaScript environment.
 

VS Code, IDEs, Text Editors, etc.

Get up to $10K 💰 to List Your Digital Product on AppSumo Between Now and November 17th
AppSumo is giving away $1 million from their Black Friday marketing budget to digital product creators. $1,000 bonus to the first 400 products to go live. $250 bonus to the next 2,000 products to go live. 10 lucky entrepreneurs can win a $10K bonus!  sponsored 

LunarVim
An opinionated, extensible, and fast IDE layer for Neovim that takes advantage of the latest Neovim features.

Next.js Snippets
A VS Code extension that gives you access to various ready-to-use snippets in React and TypeScript for Next.js projects.

NVUI
A modern frontend for Neovim that includes a custom title bar, external command line, visual config options, and more.

Live Share
VS Code extension that enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or types of apps you're building.

Grok
VS Code extension that helps developers create code-centric documentation directly in the IDE.
 
NvChad
Plugin that adds improvements to Neovim including beautiful themes to choose from, distraction-free mode, smooth scrolling, Git diffs, and lots more.

SonarLint
An open-source IDE extension (VS Code, Eclipse, IntelliJ IDEA, and Clion, etc.) that identifies and helps you fix quality and security issues as you code.

Markdown All in One
VS Code extension that adds support for a whole slew of Markdown features in your editor.

VSCodeVim
A Vim emulator for VS Code. I don't know much about Vim but I assume it adds a bunch of Vim-like features.
 

Commercial Apps and Classifieds

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

Typedream - A no-code website builder and content manager

Death To The Office - A free weekly report to discover dream remote jobs ad 

Tuple - A remote pair programming app for Mac

Link Whisper - WordPress plugin to manage internal link building for SEO ad 

NaturalyCode - Transform boring lines of code into natural English

Framer for Developers - Extend Framer prototypes and designs with code
 

A Tweet for Thought

If you like adventurous Twitter threads, you'll enjoy Dan Guido's quest to find his stolen scooter that was able to be tracked using Apple's new Airtags.

 

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 enjoy made-up movies within movies or fake TV shows in TV shows, you'll love Nestflix. To give you an idea of what this means, here are some examples that I was familiar with: Threat Level Midnight from The Office, Dr. Acula from Scrubs, and Mac & C.H.E.E.S.E. from the show Friends.

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