Issue #502 (Promises, Media, Build Tools, React)03/02/23
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.
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.
 |
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.
 |
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.
 |
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.
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 all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
