Web Tools #469 - React, Testing, Figma to Code, Uncats

Advertisement

If you're dealing with objects in JavaScript, you have access to two different methods that allow you to affect whether an object's properties can be changed: Object.freeze() and Object.seal().

Object.freeze() lets you freeze an object so that you can't add new properties, can't remove existing properties, and can't change the values of existing properties. Here's an example:

Try it on CodePen

Notice after I 'freeze' the object, I attempt to change a property's value and add a new property. The new value doesn't stick and the new property doesn't exist, thanks to freezing.

Whatever change you're attempting to make to a frozen object, the attempt will either fail silently or throw an error, depending on whether you're in strict mode. Try uncommenting the 'use strict' line at the top of the code example and you'll see the error thrown in the console.

Now what about Object.seal()? It bears some similarities to freeze but, as the name implies, it has a specific purpose and doesn't have the same limits on what you can do with the object. A sealed object's properties cannot be configured or converted to other property types. It can however have its property values changed.

Try it on CodePen

Notice here after the object is sealed, I still can't add a new property but I can change one of the values. Thus, there's more to these two methods than I've mentioned here, the primary difference between the two is the fact that only with Object.seal() can you change the property values.
 

Now on to this week's tools!
 

React Tools

Meet Filestack: The All-In-One File Handling Service
Filestack is the premier service designed to meet all your file handling needs, from improving upload speeds by a factor of 3.6 to providing swift and secure delivery. Give your app an instant upgrade today and download for free.    SPONSORED 

react-local-toast
A library that provides support for local (sometimes also called 'inline') toasts in React apps. These provide minor feedback linked to particular components (as opposed to toast libraries that provide 'global' feedback).

Verbum
A flexible text editor component library for React, based on Lexical, the new extensible text editor JavaScript framework.

Aspect Figma-to-React
An Figma plugin that works with Aspect, the visual React component editor. This one lets you export Figma designs as React code.

react-text-transition
React component to animate text using react-spring, the popular React spring physics animation library.

React Tidy
A collection of atomic, independent, typed, tested and documented React custom hooks.

RainbowKit
An intuitive, responsive and customizable React library that makes it easy to add wallet connection to your dApps.

React Hooks Library
A collection of hooks and utilities for React, written in TypeScript, server-side ready, and tree-shakable.

React Fast Accordion
A dynamic, fast, accessible, and zero-dependency accordion component for React.

React Link Preview
A React component that renders beautiful, fully-customizable on-page link previews (similar to the appearance of social cards).

react-spinner-animated
An animated, customizable loading spinner component for React. Includes an interactive demo where you can create different loaders.

useMousePosition
A lightweight, custom React hook  to easily track mouse position, useful for Tinder-style cards and other draggable elements.

react-paginate
A React component to easily add pagination to your React app. It assumes no styles, so you can add your own CSS to the look of the page numbers, arrows, etc.
 

Testing and Debugging Tools

Alternative Assets
WTF is an NFT? Alternative Assets demystifies and explains the hottest unique investment ideas out there. Collectibles, NFTs, Wine, Websites, even LEGOs. They don't just track the markets, they smash the markets.    SPONSORED 

Siteimprove Accessibility Checker
A Chrome extension that opens a sidebar on any web page to allow you to do various accessibility checks, with descriptions of the problems and potential solutions.

Jest-Image-Snapshot
A Jest matcher for image comparisons, commonly used for visual regression testing.

ScreenReader App
iOS and Android app that contains exercises to learn how to use VoiceOver and TalkBack gestures.

Can I DevTools?
A resource Like Can I Use but for browser developer tools features.

Crocodile
A code review tool, free for open-source projects, that improves on the default pull request and code review experience.

Devbox
Chrome extension that shows data from local storage for easy viewing and copy-paste of the data.

WebPageTest GitHub Action
A GitHub Action that lets you automatically run tests against WebPageTest on code changes.

Jest Preview
A Jest extension that initiates a server to serve your HTML in a browser so you can see your actual UI visually, helping you debug Jest tests faster.

mirrord
Rust-based tool that lets you  mirror traffic from your Kubernetes cluster to your development environment. It comes as both a VS Code extension and a CLI tool.

puppeteer-to-playwright
Automatically converts JavaScript Puppeteer scripts to Playwright, aiming to reduce the amount of manual work involved in such a migration.
 

The Uncategorizables

Alternative Assets
What is an NFT? Alternative Assets demystifies and explains the hottest unique investment ideas out there. Collectibles, NFTs, Wine, Websites, even LEGOs. They don't just track the markets, they smash the markets.    SPONSORED 

Hello
A search engine for developers that helps you find answers to specific technical queries. Results are sourced from various websites and forums and it even provides an AI-based code snippet to answer your question.

PocketBase
An open-source real-time Go-based back end for your next SaaS and mobile app, in a single file.

IMDB API
A high-performance, serverless IMDB API that lets you search titles, search by IMDB ID, and incorporate cacheable results, powered by Cloudflare workers.

Locofy
Figma plugin to convert designs into production-ready React, HTML/CSS, Next.js, or Gatsby code.

Akedo
A platform to build and play classic arcade-style games free that uses a beginner-friendly language for more readable code.

Wazuh
A free, open source and enterprise-ready security monitoring solution for threat detection, integrity monitoring, incident response, and compliance.

dns.toys
A DNS server that takes creative liberties with the DNS protocol to offer handy utilities and services that are easily accessible via the command line.

Untitled UI Free
A UI kit and design system for Figma, which is a slimmed down but free version of the Pro UI kit from the same company.

soketi
A simple, fast, and resilient open-source WebSockets server, built on uWebSockets.js and can be deployed on Cloudflare's infrastructure.

Umbrel
A personal server OS for self hosting to run a personal server in your home, self-host open source apps like Nextcloud and Bitcoin node, and have full control of your data.

CasaOS
Community-based open source software focused on delivering simple home cloud experience around the Docker ecosystem.

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

UTM – Securely run virtual machines for Windows and Linux on your Mac.

Jit – Automated product security for busy developers.

1440 Newsletter – Your impartial, comprehensive, daily news source.   AD 

Preflight – An intelligent no-code/low-code testing tool for agile teams.

The Sample – Curated articles from hundreds of blogs and newsletters.   AD 

Sidekick – Next-generation app monitoring meets production debugging.

Mathpix – AI-powered handwriting recognition and document conversion.
 

A Tweet for Thought

I'm glad I wasn't the only one who found the diagrams in Crockford's classic JavaScript book weird and confusing.

 

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

Here's an icon map of 425,000+ website favicons, because why not?

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly