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

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #469 • July 14, 2022

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

Download Now
Filestack

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:

const myObj = { one: 1, two: 2, three: 3 };

Object.freeze(myObj);

// Attempt to change the "two" property
myObj.two = 5;

// Add a new property
myObj.four = 4;

// Output is "2" not "5"
console.log(myObj.two);

// undefined
console.log(myObj.four);

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.

const myObj2 = { four: 4, five: 5, six: 6 };

Object.seal(myObj2);

// Attempt to change the "five" property
myObj2.five = 55;

// Add a new property
myObj2.seven = 7;

// Output is 55
console.log(myObj2.five);

// undefined
console.log(myObj2.seven);

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.

RainbowKit

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.

Crocodile

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.
 
💡 This week in VSCode.Email:
  • Customizing the cursor in VS Code
  • An attractive dark theme based on a theme from JetBrains IDEs
  • Interactive lessons to learn Vim
Check the archives for the latest issue, and subscribe for more!

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.

Locofy

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.

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

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

Older messages

Web Tools #468 - Frameworks, JSON, Databases, JS Utilities

Thursday, July 7, 2022

Web Tools Weekly WEB VERSION Issue #468 • July 7, 2022 Advertisement Build Internal Tools 10x Faster with Retool Retool is the fast way for developers to build and share internal tools. Teams at

Web Tools #467 - CSS Tools, Git/CLI, React

Thursday, June 30, 2022

Web Tools Weekly WEB VERSION Issue #467 • June 30, 2022 Advertisement Meet Filestack: The All-In-One File Handling Service Filestack is the premier service designed to meet all your file handling needs

Web Tools #466 - WebPageTest, JS Libraries, Media Tools, Uncats

Thursday, June 23, 2022

Web Tools Weekly WEB VERSION Issue #466 • June 23, 2022 The following intro is a paid product review for WebPageTest, a suite of performance products and resources for developers and teams. If you'

Web Tools #465 - VS Code, Frameworks, Build Tools, React Native

Friday, June 17, 2022

Web Tools Weekly WEB VERSION Issue #465 • June 16, 2022 Advertisement Build Internal Tools 10x Faster with Retool Retool is the fast way for developers to build and share internal tools. Teams at

Web Tools #464 - Jamstack, JS Utilities, Git/CLI Tools

Thursday, June 9, 2022

Web Tools Weekly WEB VERSION Issue #464 • June 9, 2020 Advertisement Beautiful Link Previews Automagically Mugshot Bot creates stunning link previews automatically. No more fussing with design tools or

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your