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

Llama.cpp 30B runs with only 6GB of RAM now — and CDC team studying East Palestine train derailment fell ill during investigation

Saturday, April 1, 2023

Issue #1089 — Top 20 stories of April 02, 2023 Issue #1089 — April 02, 2023 You receive this email because you are subscribed to Hacker News Digest. You can open it in the browser if you prefer. 1

Daily Coding Problem: Problem #1062 [Easy]

Saturday, April 1, 2023

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given the head of a singly linked list, swap every two nodes and return its head

Animated Map | The Largest Cities Throughout History 🌃

Saturday, April 1, 2023

Where were the largest cities in the world throughout history? This video shows the rise (and fall) of the most populated cities from 3000 BCE. View Online | Subscribe FEATURED STORY The Largest Cities

How to Enable Dark Mode in Real Life

Saturday, April 1, 2023

Did You Know?: Graphene was first observed, via electron microscope, in 1962 and studied only while supported on metal surfaces. The material was later rediscovered, isolated, and characterized in 2004

Noonification: The Birth of an AI Martyr

Saturday, April 1, 2023

Top Tech Content sent at Noon! Invest in the company that's democratizing VC How are you, @hacker? 🪐 What's happening in tech this week: The Noonification by HackerNoon has got you covered with

Week in Review - Virgin Orbit runs low on cash, ByteDance pushes a TikTok replacement, and Canoo settles with the SEC

Saturday, April 1, 2023

TechCrunch Newsletter TechCrunch logo Week in Review logo By Kyle Wiggers Saturday, April 01, 2023 It's the weekend, party people, and you know what that means: It's Week in Review (WiR) time.

Startups Weekly - Always be prompting

Saturday, April 1, 2023

TechCrunch Newsletter TechCrunch logo Startups Weekly logo By Natasha Mascarenhas Saturday, April 01, 2023 Welcome to Startups Weekly, a nuanced take on this week's startup news and trends by

🐍 New Python tutorials on Real Python

Saturday, April 1, 2023

Hey there, There's always something going on over at realpython.com as far as Python tutorials go. Don't miss out on the opportunity to learn something new and sharpen your Python skills.

A Musical War of the Worlds 🛸

Saturday, April 1, 2023

The story of perhaps the most audacious rock opera of all time. Here's a version for your browser. Hunting for the end of the long tail • April 01, 2023 Hey all, Ernie here with a fresh one from

Cacti, Realtek, and IBM Aspera Faspex Vulnerabilities Under Active Exploitation

Saturday, April 1, 2023

The Hacker News Daily Updates Newsletter cover 7 Key Takeaways to Passwordless Authentication Moving Past Passwords (At Last!) Download Now Sponsored LATEST NEWS Apr 1, 2023 Microsoft Fixes New Azure