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

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #427 • September 23, 2021

Advertisement
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!
Sencha

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:

if (!--pending)
  done(null, results);

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?

--pending;
pending = !pending;

if (pending === true) {
  done(null, results);
}

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!

Starback.js

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:

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

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

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.

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

Key phrases

Older messages

Web Tools #426 - Learning Tools, Frameworks, Testing, Uncats

Thursday, September 16, 2021

Web Tools Weekly WEB VERSION Issue #426 • September 16, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

Web Tools #425 - CSS Tools, Media/SVG, React

Thursday, September 9, 2021

Web Tools Weekly WEB VERSION Issue #425 • September 9, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

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

Thursday, September 2, 2021

Web Tools Weekly WEB VERSION Issue #424 • September 2, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

Web Tools #423 - URL Structure, Media Tools, JSON, React

Thursday, August 26, 2021

Web Tools Weekly WEB VERSION Issue #423 • August 26, 2021 Advertisement Free PDF Generation API Use pdflayer to automate PDF generation on your website. This free API renders HTML to PDF quickly and

Web Tools #422 - CSS Modules, JS Libraries, Build Tools, React Native

Thursday, August 19, 2021

Web Tools Weekly WEB VERSION Issue #422 • August 19, 2021 Advertisement Web Scraping API Extract the data you need with scrapestack's powerful web scraping API. Get Your Free API Key! Web Scraping

You Might Also Like

Infographic | How Small Investments Make a Big Impact Over Time 📈

Thursday, March 28, 2024

Compound interest is a powerful force in building wealth. Here's how it impacts even the most modest portfolio over the long term. View Online | Subscribe Presented by: EnergyX's groundbreaking

Fully Autonomous Development, AI .NET Components, Data Visualization ML Tutorial, More

Thursday, March 28, 2024

Home | News | How To | Webcasts | Whitepapers | Advertise .NET Insight March 28, 2024 THIS ISSUE SPONSORED BY: ■ Visual Studio Live! Chicago: .NET Developer Training Conference ■ dtSearch® - INSTANTLY

Daily Coding Problem: Problem #1395 [Hard]

Thursday, March 28, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Implement an LRU (Least Recently Used) cache. It should be able to be

72 x $99 tickets left for virtual product conference (May 2)

Thursday, March 28, 2024

​ACT FAST!​ ONLY 72 TICKETS AVAILABLE AT THE DISCOUNTED RATE OF $99! MAY 2, 2024 | ONLINE ACROSS THE WORLD Join product people from around the world on Thursday, May 2, for INDUSTRY, the #1 Virtual

⚙️ "I'm a GPT builder" 😎

Thursday, March 28, 2024

Plus: Elon's Grok will be available to all ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🔒 The Vault Newsletter: March issue 🔑

Thursday, March 28, 2024

Get the latest business security news, updates, and advice from 1Password. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

📑 Discover The Power of AI With UPDF — 63% Off For a Limited Time

Thursday, March 28, 2024

Digitally Read/Sign/Edit/Summarize PDFs Seamlessly. Available Now at a Huge Discount! How-To Geek Logo March 28, 2024 Tired of Dealing With PDFs? Try AI-Powered UPDF With the Biggest Discount of the

Issue 310 - New Autopark looks awesome!

Thursday, March 28, 2024

View this email in your browser If you are just now finding out about Tesletter, you can subscribe here! If you already know Tesletter and want to support us, check out our Patreon page Issue 310 - New

Programmer Weekly - Issue 199

Thursday, March 28, 2024

View this email in your browser Programmer Weekly Welcome to issue 199 of Programmer Weekly. Let's get straight to the links this week. Quote of the Week "Optimization hinders evolution.

wpmail.me issue#660

Thursday, March 28, 2024

wpMail.me wpmail.me issue#660 - The weekly WordPress newsletter. No spam, no nonsense. - March 27, 2024 Is this email not displaying correctly? View it in your browser. News & Articles What's