Web Tools #458 - async/await, CSS Tools, SVG, Uncats

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #458 • April 28, 2022

Advertisement
Retool is the Fast Way to Build an Interface for any Database
Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

Get Started For Free Today
Retool

Async functions are pretty well-known in the JavaScript community and there are plenty of resources that cover the subject in depth. If you haven't looked into their use, I'll briefly introduce them here.

JavaScript promises helped to solve problems inherent in using callback functions, but promises themselves weren't enough, so the ECMAScript spec added async functions.

Here's an example that demonstrates async function syntax:

function myAsyncFunc () {
  return new Promise(resolve => {
    setTimeout(() => resolve('Finished'), 4000);
  });
};

async function doSomething () {
  console.log(await myAsyncFunc());
}

doSomething();

The async function in the above example is the doSomething() function, indicated by the async keyword in front of it. This function also uses the await keyword, used in front of another function call. You can try it in this CodePen example.  The message will display in the console after the assigned time has elapsed.

The await keyword must be used inside an async function, and it's used before a call to a function that returns a promise. This causes the code to 'wait' until the promise has been fulfilled, which it then returns. An async function always returns a promise, even if you don't explicitly define a promise in the return.

MDN summarizes the purpose for async/await nicely:

"The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains."

So the functionality of async/await isn't new in itself, but it makes the syntax easier to write and maintain compared to using the alternatives (i.e. promises and generators or, if you go back even further in JavaScript history, multiple nested callbacks).

Essentially what async/await (and its predecessor techniques) are practical for is writing asynchronous code that appears to be running synchronously but doesn't block the main thread. So you don't have the problem of stuff taking place in the background (asynchronously) while other lines of code continue to run in the main thread. As mentioned, there were old techniques to do this previously, but these additions to the language make it much easier.
 

Now on to this week's tools!
 

 

CSS and HTML Tools

Retool is the Fast Way to Build an Interface for any Database
Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. SPONSORED

tailwindpdf
Online tool to build page elements using Tailwind classes, then export the output as an image or PDF. You can also enter a URL to convert to PDF.

Reasonable Colors
An open-source color system, based on CSS variables, for building accessible and appealing color palettes.

Detergent
Online tool to prepare text to paste into HTML. This does a lot including adding non-breaking space characters and `br` elements where they are implied via white space.

Style Guide Generator for Tailwind CSS
Get a beautiful, auto-generated style guide based on your Tailwind CSS configuration settings. Either paste the content of your tailwind.config.js file, or load the configuration file from an open-source GitHub repository.

skippy-links
A small and easy to use web component to provide dynamic skip links to any page, thus improving the website's accessibility.

Loaders
A unique set of loading spinners built with HTML and CSS, available for React or plain HTML/CSS.

Loaders

Cascade
A live-coding environment that runs in the web browser, turning CSS rules into sound.

Color Morph
Online tool that randomly generates mesh gradients that you can download as SVG or copy as CSS.

Almond.CSS
A collection of class-less CSS styles to make simple websites look better. It normalizes styles for better cross-browser behaviour along with some extra styles that can be customized.

react-flex-ready
A Flexbox grid for React that's ready, easy to implement and customize, and includes TypeScript support.

Sprinkles
Zero-runtime atomic CSS framework for vanilla-extract, the popular stylesheets-in-TypeScript solution.

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

Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today!   SPONSORED

CryptoFont
An icon font set of 1500+ icons that are themed around cryptocurrencies and related themes.

phosphor-react
React version of the Phosphor icon set, useful for interfaces, diagrams, presentations, etc.

Flowchart Fun
An app for making flowcharts (and other graphs) from text that's displayed in a real-time preview.

screenshot
A zero-dependency browser-native way to take screenshots powered by the native web MediaDevices API.

Pintora
An extensible text-to-diagrams library that works in both the browser and Node.js.

Wavesurfer React
A simple React wrapper around wavesurfer.js, an audio waveform visualization library, to provide an abstraction over the wavesurfer.js API.

Vanta.js
A gallery of customizable, animated 3D backgrounds you can add to any project. Of course, you would likely not add these to many projects, if any.
 
Vanta.js

Ribbet.ai
A free photo-editing tool with various AI-based features for doing photo manipulation.

libSquoosh
An experimental way to run all the codecs from Squoosh (the online tool for image optimization) directly inside your own JavaScript program.

ssspill
A fun SVG generator to make shapes that seem to be spilling or melting from the top.

react-leaflet-fullscreen
Full-screen control for react-leaflet, the React components library for Leaflet maps.
 

The Uncategorizables

Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today!   sponsored 

Regex Vis
An online tool to edit and visualize regular expressions and regular expression literals.

MojoAuth
Easily add passwordless authentication to your app. Includes a pretty good free plan.

Yaade
An open-source, self-hosted, collaborative API development environment.

Nexe
Create a single, self-contained, executable out of your Node.js apps.

MyBrowserAddon
A community site that is a directory of categorized, open-source browser add-ons and extensions.

Security List
A curated lists of tools, tips and resources for protecting digital security and privacy.
 
Security List

curlconverter
Online tool to convert curl commands to Python, JavaScript, PHP, R, Go, Rust, Elixir, Java, Dart, JSON, and more.

Gladys Assistant
A privacy-first, open-source home assistant, designed for performance and security.

Anno
Online tool that lets you annotate, comment on, and collaborate on videos that you can upload or link to from YouTube, GDrive, etc.

Mutagen
Real-time file synchronization and flexible network forwarding for developers.

Gephi
Visualization and exploration software for all kinds of graphs and networks. Like Photoshop for graphs.

R2Devops
An open source CI/CD hub and GitLab pipeline that uses centralized and open source jobs developed by the community.
 

Commercial Tools and Classifieds

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

Cloudimage – An image CDN for fast and optimized content delivery.

Semplates – Email templates on AWS SES without coding.

vscode.email – Just launched. Tools and articles on VS Code & other IDEs. ad 

Drawtify – A user-friendly online vector graphic design app.

Bytes – A JavaScript newsletter that's informative and entertaining. ad 

Podvertise – Directory to find podcasts to advertise on.

Berkeley Mono – A font that's a love letter to the golden era of computing.
 

A Tweet for Thought

I like this joke because my tech experience was birthed during the time that computers would do such screaming. As a side point, I wonder how many people didn't get this joke?

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

I don't know what the next hot social network app is going to be, but I think BeReal is a cool idea. Every day at a different time, all your friends are notified simultaneously to capture and share a Photo in two minutes.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  Patreon  /  GitHub Sponsors  E-Books  /  $5 Tip  /  $1 Tip

Older messages

Web Tools #457 - Front-end Frameworks, SVG, React Native

Thursday, April 21, 2022

Web Tools Weekly WEB VERSION Issue #457 • April 21, 2022 Advertisement Retool is the Fast Way to Build an Interface for any Database Custom dashboards, admin panels, CRUD apps—build any internal tool

Web Tools #455 - CSS/HTML, JSON, Databases, Vue

Thursday, April 7, 2022

Web Tools Weekly WEB VERSION Issue #455 • April 7, 2022 Advertisement Retool is the Fast Way to Build an Interface for any Database Custom dashboards, admin panels, CRUD apps—build any internal tool

Web Tools #454 - Array.at, React, Git/CLI, Uncats

Thursday, March 31, 2022

Web Tools Weekly WEB VERSION Issue #454 • March 31, 2022 Advertisement Mojeek: A Crawler-Index Search Engine Most alternative search engines just source results from Google or Bing, not Mojeek! We have

Web Tools #453 - IE11 to Edge, JS Utilities, SVG, React Native

Thursday, March 24, 2022

Web Tools Weekly WEB VERSION Issue #453 • March 24, 2022 Advertisement Choosing the Best WYSIWYG Editor for Styling Tables Tables are perfect for representing data and information in an organized way,

Web Tools #452 - JS One-liners, VS Code, Testing, Uncats

Thursday, March 17, 2022

Web Tools Weekly WEB VERSION Issue #452 • March 17, 2022 Advertisement The All-in-One Modern Data Platform You Need Get everything you need to combine, organize, and transform your data for analysis,

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your