Web Tools #505 - Using bind(), React Tools, Testing, Uncats

Advertisement

Most programming features are a little vague when they aren't accompanied by real-world use cases. Let's look at the JavaScript bind() method along with a few quick examples to make clear how practical it is.

As you might know, JavaScript's bind() method creates a new function with a bound this value and, optionally, bound arguments. The this value is the object that the function is bound to, and it determines what the this keyword refers to inside the function. If that sounds too vague and general, some examples will help.

A common use case for the bind() method is to set the this value of a function to a specific object. This can be useful when you have a function that needs to operate on a specific object, but you don't want to modify the function itself.

Here's a code example to make it clear:

In the above example, I have a myPerson object with a msg() method that logs to the console using the this keyword to refer to the object. I also have another object otherPerson with its own name and age.

I then create a function boundMsg by calling the bind() method on the msg() method of the myPerson object, and I pass in otherPerson as the this value. This means that when boundMsg() is called, the this keyword inside the function will refer to otherPerson instead of myPerson.

As you can see, it's pretty cool to be able to use bind() to create a new function that operates on a different object without modifying or creating a copy of the original function.

Another use case for bind() is to create a function with pre-set arguments. To illustrate:

In this example, I have a simple add() function that takes two arguments and returns the sum. I then create a new function called addTen() by calling bind() on add(). I use null as the this value and 10 as the first argument.

This means that when addTen() is called, it will always add 10 to the argument passed in to the new function. Again, no need to modify the original function or create a copy of it, using bind() makes this easier.

You can try both the above code examples in this CodePen.

Now on to this week's tools!
 

React Tools

Bright
A React server component for adding syntax highlighting to pages that adds nothing to your bundle size and uses all the themes from VS Code.

@react-hookz/web
A library of general-purpose React hooks built with care and SSR compatibility in mind.

Developer Day: A Front-row Seat to What's New with Retool
Join our product and engineering leaders for a first look at what's new with Retool. We'll be diving deep into new GPT-powered features, Python support, and a brand-new way to rapidly deploy databases.   SPONSORED  

React Pro Sidebar
A set of React components for creating high-level and customizable side navigation.

react-ansi-animation
React components for displaying ANSI art. It can render either HTML text elements or into a canvas and can also output text for Ink-based CLI applications.

Evolu
A React Hooks library for local-first apps(opens in a new tab) with end-to-end encrypted backup and sync using SQLite(opens in a new tab) and CRDT.

react-curved-input
A small React component to turn any SVG path into a slider that the user can use to interactively animate an object across the shape of the SVG path.

Flexboard
A React component library for re-sizable sidebar panes, with options for draggability, min/max width, style, and more.

relay-nextjs
Relay Hooks integration for Next.js apps, designed for server rendering and uses React Suspense under the hood.

React Visual Grid
A React component to build image grids and masonry layouts, with good performance, support for different layouts, customizable thumbnail sizes, and more.

Conform
A progressive enhancement first form validation library for Remix and React Router.

On the Release Radar:

• Jotai – Global React state management, now at version 2+
• visx – Visualization primitives for React, now at version 3+
• Tamagui – Cross-platform React apps, now at version 1+
• SWR – React hooks for data fetching, now at version 2+
• React Tabs –  Accessible React tab component, now at version 6+
• React Cool Dimensions – Hook for responsive components at version 3+

Testing and Debugging Tools

trace.cafe
If you've downloaded a performance profile (i.e. a "trace", usually a JSON file) from your browser's developer tools, you can sue this tool to upload and examine the trace with the performance panel visible like in DevTools.

WebPerformance Report
This is a unique idea. Get a personalized report via email every week on the status of a website that you want to monitor for web performance and web optimization, with Core Web Vitals included, powered by WebPageTest.

XSSHunter
Use Docker and Dockery Compose to test and find blind cross-site scripting vulnerabilities.

Don’t Just Read The News—Make The News
Looking for an edge in business? Look no further than The Information. Their team of award-winning journalists provide exclusive insights into tech and finance, with original reporting, big interviews, and more that you won’t find anywhere else. Subscribe now and save 25%.   SPONSORED  

precloud
An open-source CLI that runs checks on infrastructure-as-code to catch potential deployment issues before deploying.

Rayst
Chrome extension that displays a side panel showing stats and technologies associated with any web page you're visiting.

tslog
A beautiful logging experience for TypeScript and JavaScript, for powerful, fast, and expressive logging.

swr-devtools
A developer tool for SWR, the React hooks library for data fetching, with support for SWR v1 or later.

tinybench
A simple and lightweight 7KB (2KB minified/gzip'd) benchmarking library that uses Web APIs (i.e. process.hrtime or performance.now) to run your code benchmarks in multiple JavaScript runtimes.

Carbon Neutral Website
A carbon emission calculator that takes into account the power consumption of device and server during browsing a web page.

spall
A profiler library and a web front end for exploring your code and digging into potential performance problems.

The Uncategorizables

Node.js Toolbox
Find actively maintained and popular libraries in the Node.js ecosystem, filterable by category.

Passwordless
API that makes passkeys and web authentication easy. Currently free while in Beta.

Eraser
A whiteboard for engineering teams that offers unlimited collaborators and up to 5 workspaces in the free plan.

filebrowser
A Go-based file managing interface within a specified directory that can be used to upload, delete, preview, rename, and edit your files.

CronTool
A free tool to debug, edit, learn and view crontab/cron expressions, no registration required.

Ai Tool Hunt
A searchable and categorized directory of 1400+ AI-based tools to help you discover the latest in AI apps and services.

Lotus
An open-source tool to optimize, test, and deploy usage-based, per-seat, or enterprise pricing and packaging models in minutes, to unlock the true value of your SaaS product.

Ask No Code
A Stack Overflow-like community where you can ask and answer questions related to no-code tools and processes.

Don’t Just Read The News—Make The News
Looking for an edge in business? Look no further than The Information. Their team of award-winning journalists provide exclusive insights into tech and finance, with original reporting, big interviews, and more that you won’t find anywhere else. Subscribe now and save 25%.   SPONSORED  

AXplorer
A "use-to-earn", private, fast and secure web browser with a free built-in VPN that includes an embedded crypto wallet.

OG Image Playground
A playground for experimenting and testing out social media image generation via the Open Graph Protocol and Vercel's og library.

Fragment Mono
A monospaced coding version of the classic Helvetica font, created by modifying and extending another font called Nimbus Sans.

Commercial Apps and Classifieds

A Tweet for Thought

An interesting thread from Lea Verou (with some further discussion on Mastodon) that puts forth the idea that the main purpose of Web Components has gone largely unrealized.
   

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

Is it cut short? is a website where you can find out if a TV show that was cancelled ended with a cliffhanger. Might help to decide if you want to start watching a series. But note that it only includes shows that were actually cut short, which makes sense. So if something isn't listed, then it's safe to watch without worrying that it ended and didn't resolve a main plotline.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly