Issue #458 (async/await, CSS/HTML, Media, Uncats)04/28/22
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.
 |
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.
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.
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?
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 all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
