Web Tools #502 - Promises, Media/SVG, Build Tools, React

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #502 • March 2, 2023

Advertisement

Sharpen your Math, Data, and Computer Science Skills
Whether you’re a professional looking for an edge in your career or a lifelong learner sharpening your skills, Brilliant is the best way to learn the concepts driving our modern technological world.

What is Brilliant? Brilliant is the best way to learn key concepts in math and computer science through fun, interactive problem solving for learners of any level.

Brilliant

What else?

  • Explore thousands of lessons on topics ranging from AI and neural networks to data analysis.
  • Brilliant’s interactive, bite-sized approach is a more effective way to learn. You can try all of Brilliant’s lessons free for 30 days – plus, they add new content monthly.

Join over 10 million people learning on Brilliant.

Start your 30-day free trial today!

I've previously referenced the concept of JavaScript Promises with links to external sources, but until now I've never covered the topic directly. So let's do that now! If you're already familiar with Promises, this will be a simple review but if it's a new concept for you, this should give you a brief overview of what Promises are.

JavaScript Promises allow developers to handle asynchronous operations in a more organized and readable manner, replacing what we used to refer to as "callback hell". A Promise represents a value that may not be available yet, but will be resolved at some future time while executing the code.

A Promise can be in one of three states:

  • Pending: The initial state, before a Promise is resolved or rejected.
  • Resolved: The Promise has been successfully resolved with a value.
  • Rejected: The Promise has been rejected with an error.

Here's an example of a Promise that resolves after a 5-second delay:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise has resolved!");
  }, 5000);
});

The above example creates a new Promise using the Promise constructor, which takes a function with two arguments: resolve and reject. The resolve function is called when the Promise is successfully resolved, and the reject function is called when the operation fails in some way.

The setTimeout() method is used to simulate an asynchronous operation that takes 5 seconds to complete. When the operation is finished, the resolve function is called with the value "Promise has resolved!".

The above code won't do anything on its own, so I'll next use the Promise to handle the result of the asynchronous operation, as shown in the following code:

myPromise.then((result) => {
  console.log(result);
  // Log: "Promise resolved successfully!"
}).catch((error) => {
  console.error(error);
});

As you can see, the .then() method is used to handle the resolved value of the Promise. A function is passed as an argument, which will be called with the resolved value when the Promise is completed, which is indicated by the message sent to the console. The message being sent is just an example, but you would put whatever you want at this point in the code.

And lastly, to simulate what happens if the Promise is rejected, let's replace the first code snippet above with the following, which handles the error using the .catch() method:

const rejectedPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error("Promise rejected!"));
  }, 5000);
});

rejectedPromise.catch((error) => {
  console.error(error.message);
  // Log: "Promise rejected!"
});

The above example creates a Promise that rejects after a 5-second delay. The reject function is then used to reject the Promise with an Error object containing the error message. The rejection is subsequently handled using the .catch() method, which takes a function that will be called while passing in the error when the Promise is rejected.

You can try out the code from above in this CodePen demo. And one final thing I'll mention: As I've discussed previously, the async/await syntax is built on top of Promises, allowing you to deal with asynchronous code in an even cleaner fashion (which I covered briefly in a previous tip).

Hopefully that gives you a good overview of the subject if it was new to you or if you just needed a little refresher.

Now on to this week's tools!
 

Media Tools (SVG, Audio, etc.)

restorePhotos.io
An open-source online tool that attempts to use AI to restore or correct old, blurry, or damaged photos.

picjumbo
A stock photo resource for free stock photos, backgrounds and high-resolution images for personal and commercial use. Also has premium options.

Calligrapher.ai
An online tool for AI-generated handwriting samples that you can customize stroke width, legibility, and style, and download as SVG.

Sharpen Your Math, CS, and Data Skills In 15 Minutes A Day
For professionals and lifelong learners alike, Brilliant is one of the best ways to learn. The deets: Bite-sized interactive lessons make it easy to level up in everything from math and data science to AI and beyond. Join 10+ million people building skills every day.   SPONSORED  

SVG Chart Generator
A nicely designed and easy-to-use online tool to generate customized SVG-based charts and graphs.

Screen
A fast way to create screenshots of your app for product pages on Apple's App Store, Google Play Store, Microsoft Store, etc.

Riffusion App
An open-source app for real-time music generation with stable diffusion.

Circum Icons
An open-source library of 280+ SVG icons compatible with React, Vue, and Svelte, based on Google Material Design principles. Premium options also available.

Circum Icons

Img.cleaner
Online AI-based tool that lets you quickly and easily remove unwanted objects from images.

brushify.art
Upload a photo and this tool will convert it to an equivalent version but in watercolor art. Limited download size for the result, with option to buy a larger version for print.

ShortPixel
Another option for image optimization online, this one lets you do 100 images per month for free, 10MB per image, with options to convert to WebP and/or AVIF.

Vectr
A simple yet powerful free graphics editor that lets you design and edit vector graphics via a web UI or the optional desktop cross-platform app.
 

Build Tools, Bundlers, etc.

RemixKit
An alternative dev server and compiler for the Remix web framework, streamlined with Vite.

eslint-interactive
A CLI tool to fix huge number of ESLint errors, useful when introducing ESLint into an existing project, or when making big changes to the .eslintrc of a project.

Create JD App
A quick and efficient way to start a new full-stack, type-safe, web app based on Solid, Solid Start, TypeScript, and Zod.

style9-webpack
A framework-agnostic CSS-in-JS compiler inspired by Facebook's Stylex, with near-zero runtime, atomic CSS extraction, and TypeScript support.

Don’t Just Read The News—Make The News
Need to stay ahead of the curve in business? The Information Pro offers exclusive insights from the industry's top journalists. With unlimited access to their proprietary databases, org charts, surveys, and more, you'll always be in the know. Subscribe now and save 50% for a limited time.   SPONSORED  

Houston
This is practical use for AI! It's an AI chat bot that's been trained on the full docs for Astro, the popular build tool, so you can ask it how to do anything in Astro.

Statoscope
Generate a stats.json file from your Webpack build then upload your stats.json file here to analyze (or diff for multiple files) the stats in a dashboard.

Statoscope

pnpm-patch-i
A CLI wrapper for pnpm's `patch` command that provides a better interactive experience.

Snyk Open Source Advisor
A search engine for npm packages that shows you a 'package health score' with data on potential security problems and other info.

create-universal-app
An opinionated template for scaffolding a full-stack universal app with built-in auth for both mobile and web using Expo, NextJS, tRPC, Prisma, Tamagui, and Clerk. 

Nuxt.new
Similar to Google's "sheets.new", "docs.new", etc., an easy to remember URL where you can go to quickly open a Nuxt starter on CodeSandbox or StackBlitz.

vue3-base
A starter project for building out a Vue 3 project with Vue Router, Pinia, Vite Tailwind, and more.
 

React Tools

react-qrcode-logo
A React + Typescript component to generate a QR Code with custom colors and logo.

Sonner
An opinionated component for React-based toast notifications, with lots of options to customize the messages.

React Accordion
An unstyled, accordion library for React, with a headless UI, open/close animations, and is WAI-ARIA compliant.

Don’t Just Read The News—Make The News
Need to stay ahead of the curve in business? The Information Pro offers exclusive insights from the industry's top journalists. With unlimited access to their proprietary databases, org charts, surveys, and more, you'll always be in the know. Subscribe now and save 50% for a limited time.   SPONSORED  

React-Custom-Scroll
A customizable, cross browser React component for adding branded scrolling to an element. Not joking, there's a demo that uses a giraffe as the scroll bar!

React Snap Carousel
A DOM-first, headless carousel for React that leaves the DOM in charge of scrolling and simply computes derived state from the layout, allowing you to progressively enhance a scroll element with responsive carousel controls.

Megadraft
A rich text editor built on top of Facebook's Draft.js, featuring a nice default base of components and extensibility.

react-resizable-panels
React components for creating a layout of resizable panel groups (similar to how you would resize panels in a text editor or on something like CodePen).

@ts-react/form
A type-safe forms solution for React that handles the boilerplate involved when building forms using Zod and React Hook Form, without sacrificing customizability.

Material React Table
A React table component built with Material UI and TanStack Table for producing modern, high-quality, and performant data grids.

Material React Table

Lilush
A minimal, zero-dependency, TypeScript-first state manager for React.

Schedulely
A CSS-grid based React calendar with a focus on extensibility and small package size.
 

Commercial Apps and Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!
PixCap – Thousands of easy-to-use, drag-n-drop 3D designs you can export as image, video, or GIF.
JS E-Books Bundle – 4 e-books featuring more than 300 front-end coding tips and demos.   AD
Unicorn Icons – 100+ free playful and customizable animated icons, attribution required.
NPM Kiosk – A concept and associated Next.js template that uses Stripe to allow you to sell private npm packages.
Emerging Tech Brew – A 3-times-a-week newsletter with the latest tech news impacting you and your future. AD
IconifyAI – Create professional app icons with AI in seconds using some prompts.
Keyframes Studio – An online video editor designed for creating videos for TikTok and other social apps.

A Tweet for Thought

Speaking of React, here's a bit of a controversial but well-reasoned thread on why you should be using a React Framework.
 
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...

There are lots of projects where people can share the things they use (work stations, software, etc.) but how about Dockhunt, where Mac users can share a screenshot of their dock! Apparently over 1,300 people have submitted theirs already. The most useful thing about this is that you can click any app icon in any dock to filter by docks that include that same app.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Key phrases

Older messages

Web Tools #501 - FontFaceSet, JS Libraries, Databases, Jamstack

Thursday, February 23, 2023

Web Tools Weekly WEB VERSION Issue #501 • February 23, 2023 Advertisement Build Internal Tools, Remarkably Fast If you or your team are spending more time on boilerplate code and other redundant work

Web Tools #500 - assert(), Frameworks, JS Utils, Uncats

Friday, February 17, 2023

Web Tools Weekly WEB VERSION Issue #500 • February 16, 2023 Advertisement The New Tab Page You'll Actually Use Ah, the hyperlink. It's the single coolest thing on the web. There wouldn't

Web Tools #499 - JS Libraries, Git/CLI Tools, React

Thursday, February 9, 2023

Web Tools Weekly WEB VERSION Issue #499 • February 9, 2023 Advertisement Practical, No-nonsense UI Design Tips 🔥 If you do any design work, you might struggle to find actually practical UI advice that

Web Tools #498 - CSS Tools, Testing, SVG/Media

Thursday, February 2, 2023

Web Tools Weekly WEB VERSION Issue #498 • February 2, 2023 Advertisement Nothing Beats the Hyperlink Old school hyperlinks are the best. They were born with the web, and they will always be here. A

Web Tools #497 - JS Utilities, Git/CLI Tools, Uncats

Thursday, January 26, 2023

Web Tools Weekly WEB VERSION Issue #497 • January 26, 2023 Advertisement The Fast Way for Developers to Build Mobile Apps Build native iOS and Android apps with no mobile expertise—all you need is JS

You Might Also Like

Data Science Weekly - Issue 540

Friday, March 29, 2024

Curated news, articles and jobs related to Data Science, AI, & Machine Learning ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

This Week in Rust #540

Friday, March 29, 2024

Email isn't displaying correctly? Read this e-mail on the Web This Week in Rust issue 540 — 27 MAR 2024 Hello and welcome to another issue of This Week in Rust! Rust is a programming language

The Value Of A Promise 🤞

Friday, March 29, 2024

How much is a promise from a tech company really worth, anyway? Here's a version for your browser. Hunting for the end of the long tail • March 28, 2024 The Value Of A Promise When you hear a

New Elastic Security for SIEM Training Course

Friday, March 29, 2024

Detect and respond to evolving threats ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ elastic | Search. Observe. Protect Detect anomalies and malicious behavior March

SBF gets 25 years 

Thursday, March 28, 2024

Sam Bankman-Fried is sentenced View this email online in your browser By Christine Hall Thursday, March 28, 2024 Welcome back to TechCrunch PM! The editorial team spent a chunk of the day discussing

💎 Issue 410 - Being laid off in 2023-2024 as an early-career developer

Thursday, March 28, 2024

This week's Awesome Ruby Newsletter Read this email on the Web The Awesome Ruby Newsletter Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Ruby news, articles and

💻 Issue 403 - Microsoft defends .NET 9 features competing with open source ecosystem

Thursday, March 28, 2024

This week's Awesome .NET Weekly Read this email on the Web The Awesome .NET Weekly Issue » 403 Release Date Mar 28, 2024 Your weekly report of the most popular .NET news, articles and projects

💻 Issue 410 - Node.js TSC Confirms: No Intention to Remove npm from Distribution

Thursday, March 28, 2024

This week's Awesome Node.js Weekly Read this email on the Web The Awesome Node.js Weekly Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Node.js news, articles and

💻 Issue 410 - JSDoc as an alternative TypeScript syntax

Thursday, March 28, 2024

This week's Awesome JavaScript Weekly Read this email on the Web The Awesome JavaScript Weekly Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular JavaScript news, articles

📱 Issue 404 - Dependency Injection for Modern Swift Applications Part II

Thursday, March 28, 2024

This week's Awesome iOS Weekly Read this email on the Web The Awesome iOS Weekly Issue » 404 Release Date Mar 28, 2024 Your weekly report of the most popular iOS news, articles and projects Popular