Forem: Reuven Hozias

Dev tools: Debug WebSocket Connections Fast

Reuven Hozias — Thu, 11 Sep 2025 10:37:07 +0000

WebSocket connections power real-time web apps—from chat applications to live trading platforms. But when they break, debugging can be frustrating and time-consuming.

A WebSocket Echo Tester makes troubleshooting simple.

What Does It Do?

This tool connects to any WebSocket server and echoes back your messages in real-time. It's perfect for testing connections, validating message formats, and debugging issues before they reach production.

Why Developers Love It

Instant Validation: Quickly check if your WebSocket server is reachable and responding correctly.
Real-Time Testing: Send messages and see responses immediately—no complex setup required.
Format Testing: Experiment with JSON, plain text, or binary data to ensure your messages are properly formatted.
Zero Setup: Browser-based tool that works instantly—just enter your WebSocket URL and start testing.

Common Use Cases

Test WebSocket APIs during development
Validate third-party service connections
Troubleshoot network and firewall issues
Monitor connection stability
Verify authentication mechanisms

How to Use It

Enter your WebSocket URL (e.g., wss://echo.websocket.org)
Click Connect
Send test messages and watch the real-time responses
Monitor connection status and error messages

Beyond Basic Echo Testing

While echo testing is fundamental, our tool also helps with:

Connection lifecycle management: Test how your application handles connection establishment, maintenance, and cleanup
Error handling: Simulate various error conditions to ensure your application responds gracefully
Message queuing: Understand how messages are handled when connections are temporarily unavailable
Authentication testing: Verify that your WebSocket authentication mechanisms work correctly

Start Testing Today

Stop wrestling with WebSocket connection issues. The WebSocket Echo Tester gives you the instant feedback you need to build reliable real-time applications.

About ToolzBay: High-quality web utilities that make developers' lives easier. From API testing tools to data converters, our growing collection of utilities is designed to solve real problems without the hassle of complex setups or subscriptions.

JavaScript in 2025: Your Roadmap to Modern Features

Reuven Hozias — Mon, 01 Sep 2025 14:43:29 +0000

Welcome to the first article in our comprehensive series exploring the latest JavaScript features that are reshaping how we write code in 2025.

Article 1: JavaScript in 2025: Your Roadmap to Modern Features
Article 2: ES2024's immutable array methods and when to use them
Article 3: Promise.withResolvers() and modern async patterns
Article 4: Set operations for elegant data manipulation
Article 5: Regular expression enhancements with the /v flag
Article 6: Advanced ArrayBuffer capabilities for performance-critical applications
Article 7: Preview of upcoming features in ES2025 and beyond
Article 8: Practical migration strategies for modernizing your codebase

Why Staying Current with JavaScript Matters

The JavaScript ecosystem moves fast, but not arbitrarily. Each new feature addresses real pain points that developers face daily. Consider how async/await transformed asynchronous programming, or how destructuring assignment simplified object and array manipulation. Today's new features continue this tradition of solving practical problems while improving code quality.

For your career: Modern JavaScript features are increasingly expected in job interviews and code reviews. Companies want developers who can leverage the latest language capabilities to write cleaner, more efficient code.

For your projects: New JavaScript features often provide better performance, enhanced security, and improved developer experience. Features like immutable array methods reduce bugs, while improved Promise utilities make async code more reliable.

For your team: Understanding modern JavaScript helps you
communicate better with other developers and contribute to more maintainable codebases that your future self (and colleagues) will thank you for.

The JavaScript Evolution Timeline: From ES2020 to ES2025

JavaScript's evolution follows a predictable yearly release cycle, but understanding where we've been helps us appreciate where we're going.

ES2020 Highlights (June 2020)

Optional Chaining (?.): Made property access safer
Nullish Coalescing (??): Provided better default value handling
BigInt: Enabled arbitrary-precision integer arithmetic
Dynamic Imports: Allowed conditional module loading

// ES2020 made this possible
const userName = user?.profile?.name ?? 'Anonymous';
const userModule = await import('./userModule.js');

ES2021 Highlights (June 2021)

Logical Assignment Operators (||=, &&=, ??=): Streamlined conditional assignments
WeakRef: Enabled weak references to objects
String.prototype.replaceAll(): Finally, a native way to replace all occurrences

// ES2021 simplified common patterns
apiUrl ||= 'https://api.example.com';
text = text.replaceAll('old', 'new'); // No more regex needed!

ES2022 Highlights (June 2022)

Top-level await: Made module initialization cleaner
Private Fields (#field): Brought true private properties to classes
Static Class Fields: Enabled class-level properties

// ES2022 enabled cleaner class design
class APIClient {
  #apiKey; // Private field
  static baseURL = 'https://api.example.com';

  constructor(apiKey) {
    this.#apiKey = apiKey;
  }
}

ES2023 Highlights (June 2023)

Array Methods: findLast(), findLastIndex(), toReversed(), toSorted(), toSpliced()
Hashbang Grammar: Better script execution support

ES2024: The Current State (June 2024)

ES2024 brought some of the most practical improvements we've seen in years:

Immutable Array Methods: with(), toReversed(), toSorted(), toSpliced()
Set Operations: Native mathematical operations like union(), intersection()
Promise.withResolvers(): Simplified promise creation patterns
Regular Expression /v Flag: Enhanced Unicode and set notation support

Looking Ahead: ES2025 and Beyond

While ES2025 specifications are still being finalized, several exciting features are advancing through the TC39 process:

Temporal API: A complete overhaul of date/time handling
Pattern Matching: Powerful conditional logic improvements
Import Attributes: Better support for importing JSON and other file types

Understanding the TC39 Process: How JavaScript Features Are Born

Ever wonder how JavaScript gets new features? The TC39 committee (Technical Committee 39) meets regularly to discuss proposals, with new specifications submitted for ratification each July.

Every JavaScript feature follows a structured path through five maturity stages:

Stage 0 (Strawperson): Initial ideas that are "planned to be presented to the committee by a TC39 champion"

Stage 1 (Proposal): The problem is formally described, and a general solution is outlined

Stage 2 (Draft): The syntax and semantics are precisely described in the specification language

Stage 3 (Candidate): Exciting features ready for implementation feedback, requiring at least one browser implementation

Stage 4 (Finished): Features with "at least two independent implementations that pass acceptance tests" are included in the next ECMAScript revision

This process ensures that features are thoroughly tested and refined before reaching your browser. TC39 meets "every two months to discuss proposals", making the evolution of JavaScript both predictable and collaborative.

Browser Support: Navigating the Modern Landscape

One of the biggest concerns developers have about adopting new features is browser support. The good news? Modern browsers implement features individually rather than entire ECMAScript versions, and "almost every modern browser is still missing features from ES2017-ES2020", but the features they do support are quite comprehensive.

Key Resources for Checking Support

Can I Use: Provides "up-to-date browser support tables for support of front-end web technologies"
MDN Compatibility Tables: Detailed browser support information with usage notes
TC39 Proposals Repository: Track feature progression through standardization stages

Practical Browser Support Strategy

For Production Code:

Target features with >90% browser support for critical functionality
Use progressive enhancement for newer features
Implement feature detection rather than browser detection

For Modern Development:

Leverage build tools like Babel for transpilation
Use TypeScript for an enhanced development experience
Consider polyfills for essential missing features

// Feature detection example
if ('withResolvers' in Promise) {
  // Use native Promise.withResolvers()
  const { promise, resolve, reject } = Promise.withResolvers();
} else {
  // Fallback implementation
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
  });
}

What's Here Now vs. What's Coming

Available Today (ES2024 and Earlier)

These features have solid browser support and can be used in production:

Immutable Array Operations:

const numbers = [1, 2, 3, 4, 5];
const updated = numbers.with(2, 99); // [1, 2, 99, 4, 5]
const sorted = numbers.toSorted((a, b) => b - a); // [5, 4, 3, 2, 1]
// Original array unchanged: [1, 2, 3, 4, 5]

Set Mathematical Operations:

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);
const union = setA.union(setB); // Set {1, 2, 3, 4, 5}
const intersection = setA.intersection(setB); // Set {3}

Enhanced Promise Patterns:

const { promise, resolve, reject } = Promise.withResolvers();
// Much cleaner than the traditional Promise constructor pattern

Coming Soon (ES2025 and Stage 3 Proposals)

Temporal API (Stage 3):

// Current Date API problems solved
const now = Temporal.Now.plainDateISO(); // Much better than new Date()
const meeting = Temporal.PlainDate.from('2025-03-15');

Pattern Matching (Stage 1, but promising):

// Potential future syntax
match (value) {
  when Number if value > 0 -> 'positive'
  when Number if value < 0 -> 'negative' 
  when 0 -> 'zero'
  when String -> 'text'
  when _ -> 'unknown'
}

Your Action Plan: Adopting Modern JavaScript

Immediate Steps (This Week)

Audit your current codebase for opportunities to use ES2022-ES2024 features
Update your development environment to support the latest JavaScript features
Review your transpilation setup to ensure you're targeting appropriate browser versions

Short-term Goals (Next Month)

Experiment with immutable array methods in non-critical code
Try Set operations for data manipulation tasks
Explore Promise.withResolvers() in async workflows

Long-term Strategy (Next Quarter)

Plan a gradual migration strategy for your team
Establish coding standards that incorporate modern JavaScript patterns
Stay informed about Stage 3 proposals that might affect your architecture decisions

Conclusion: JavaScript's Bright Future

JavaScript in 2025 represents the culmination of years of thoughtful language design and community feedback. The features we're seeing today solve real problems while maintaining backward compatibility and developer ergonomics.

The key to success isn't trying to learn everything at once, but rather understanding the landscape and adopting features strategically. Start with the most impactful changes for your specific use cases, and gradually expand your toolkit as you become comfortable with each new capability.

Modern JavaScript isn't just about new syntax—it's about writing code that's more maintainable, more performant, and more enjoyable to work with. Whether you're building a simple website or a complex application, these new features provide tools that will make your development experience better.

Ready to dive deeper? Next week, we'll explore ES2024's immutable array methods and see how they can eliminate entire categories of bugs while making your code more predictable and easier to reason about.

This article is part of our 8-part series on modern JavaScript features. Follow along as we explore the language's evolution and learn how to leverage its latest capabilities in your projects.

Next week: "ES2024 Deep Dive: Array Methods That Will Change Your Code"

CSS: @starting-style a new & cool at-rule

Reuven Hozias — Wed, 27 Nov 2024 17:33:04 +0000

The @starting-style CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e. when an element is first displayed on a previously loaded page.

Let's take a toast message as an example. To display it to the user, we will change its visibility, but the result will be that it appears immediately. Now we can use the new @starting-style rule to define the starting animation for this element.

Some simple examples

Let's use this baseline HTML, a simple rectangle:

.container {
  width: 10rem;
  height: 10rem;
  background-color: hotpink;  
}

Add initial `background-color` transition from blue to pink

.container {
  ...
  transition: background-color 4s; 
}

@starting-style {
  .container {
    background-color: blue;
  }
}

Add rotation to the previous example

.container {
  ...
  transition: transform 4s, background-color 4s;
  transform: rotate(0deg);} 
}

@starting-style {
  .container {
    background-color: blue;
    transform: rotate(360deg);
  }
}

Anyways, you get the idea.
Animate your popups, and menus or create an animated logo,
It's straightforward.

NOTE

This feature currently has limited availability.

CSS: Easy dark mode

Reuven Hozias — Thu, 14 Nov 2024 10:19:50 +0000

A dark mode is a display option that switches the color theme of a website or application from a light background (with dark text) to a dark background (with light text). This mode has grown popular for its benefits in reducing eye strain in low-light environments, saving energy on devices with OLED screens, and offering a visually appealing alternative to traditional light themes.
Usually, you can toggle between 3 modes: dark, light and System theme setting.

Old way

Till now we've used the prefers-color-scheme CSS media feature:

The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.

@media (prefers-color-scheme: dark) {
  .post {
    background: #753;
    color: #dcb;
  }
}

@media (prefers-color-scheme: light) {
  .post {
    background: #bcd;
    color: #334;
  }
}

As you can see, we need to maintain 2 themes, one for each mode.
Taking this approach in a large-scale application may be difficult.

New and better way

Luckily, CSS has introduced a new property to make our life easier, light-dark() and it is supported by all major browsers:

The light-dark() CSS function enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme - without needing to encase the theme colors within a prefers-color-scheme media feature query.

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#292524, #f5f5f4);
  background-color: light-dark(#f5f5f4, #292524);
}

Just use the light-dark() property on each element we wish to toggle between modes, that's it!

CSS: masonry layout

Reuven Hozias — Wed, 06 Nov 2024 08:51:12 +0000

What is masonry layout?

from MDN:

Masonry layout is a layout method where one axis uses a typical strict grid layout, most often columns, and the other a masonry layout. On the masonry axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise up to completely fill the gaps.

pinterest.com's layout is one classic example of it:

What can we use from our CSS toolbox?

`grid`

We use a simple HTML markup:

<div class="photos">
  <img src="./img/image-1.jpg" alt="sample">
  ...
  ...
</div>

My first shot was grid & grid-template-column

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;

  img{
    width: 100%;
  }
}

The responsiveness is great, but we have gaps below each image.

`column-count`

next, use the column-count CSS container property.

The column-count CSS property breaks an element's content into the specified number of columns.

.photos {
  column-count: 4;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

Not good.
The current layout looks as desired, but the images are scaled and not responsive. While we could use media queries to control responsiveness, we’re aiming for a more robust solution.

Using `columns`

The columns CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.

.photos {
  columns: 250px;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

A single line of code. Amazing!

How does this work?

Each column is given a minimum width of 250px. If there is extra space beyond 250px, the columns will expand to fill the space. If the space is reduced, the number of columns will decrease accordingly.

Extras

We can limit the number of columns by setting the layout to a maximum of X columns:

.photos {
  columns: 250px 2;
  ...
  ...
}

Using

columns
is not limited to masonry image layouts alone. We can also use it to style text columns: same CSS, different content.

Final thoughts

Was this helpful?
What was your use case?

CSS-only tooltip using popover & anchor

Reuven Hozias — Tue, 22 Oct 2024 08:27:09 +0000

To improve performance in a project I'm working on, I'm refactoring some components and replacing them with more native implementations.
In this post, I will start with a component that we use widely: the tooltip. I will use two relatively new features: the Popover API and Anchor CSS.

Popover API and Anchor CSS:

The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled declaratively using HTML attributes or JavaScript.

The anchor() CSS function can be used within an anchor-positioned element's inset property values, returning a length value relative to the position of the edges of its associated anchor element.

🤔

Our baseline

Let's start with a basic info icon that will serve as our tooltip opener,
Nothing fancy here:

<button class="info-icon"></button>

The Popover API

We're adding an information div, marking it as a popover and passing a unique id to it. popovertarget property is added to the icon, excepting the popover id string.
note that popovertarget can be only of type button or input:

<button popovertarget="info" class="info-icon"></button>
<div id="info" popover>Lorem ipsum dolor sit amet</div>

Clicking the info button toggles the popover visibility, and clicking outside closes it. This initial implementation results in a more modal-style element.

Let's go one step further, and position the tooltip using the anchor CSS.

Adding anchor CSS

The anchor CSS is still experimental but getting adopted quickly by all major browsers:

All major browser engines are working on implementing this spec.
Can be enabled via the #enable-experimental-web-platform-features flag in chrome://flags

We'll add the anchor property to our info div. It expects a string id of the element we're anchoring to:

<button id="info-opener"
        popovertarget="info"
        class="info-icon"></button>
<div id="info" popover="auto" anchor="info-opener">
  Lorem ipsum dolor sit amet
</div>

Placing the tooltip

To position the target tooltip beside the anchor (info icon), we'll use the anchor() CSS:

<button id="info-opener"
        popovertarget="info"
        class="info-icon"></button>
<div id="info"
     popover="auto"
     anchor="info-opener" class="info-tooltip left">
  Lorem ipsum dolor sit amet
</div>

.left {
  padding-left: .75rem;
  clip-path: polygon(
    100% 0%,
    100% 100%,
    5px 100%,
    5px calc(50% + 5px),
    0% 50%,
    5px calc(50% - 5px),
    5px 0%
  );
}

.info-tooltip[popover] {
  background: #007bff;
  color: #fff;
}

.info-tooltip[popover] {
  left: calc(anchor(right) + 2px);
  top: anchor(center);
  transform: translateY(-50%);
}

which results in:

Breaking it down

The .info-tooltip class styles the element and adds anchor-like functionality.

What does this anchoring do? It attaches the tooltip to a logical grid cell—one of a 3 by 3 grid representing our info element.

The left property aligns the tooltip's left side with the info element's right side, adding 2px of space. The top property centers the tooltip vertically to the tooltip's midpoint.

Some extras

The popover property accepts two values:

auto: This is the default behavior. Click anywhere on the page to
toggle: the popover visibility.
manual: Toggles the visibility only by clicking the opener element.

Another property that can be utilized from the opener element is popoverTargetAction:

toggle: This is the default action— as the name implies, it toggles the visibility.
show: Only triggers showing the popover; you can’t close it.
hide: Only hides the popover.

Conclusion

We briefly covered two relatively new features: the Popover API and the CSS anchor() feature. Both are extremely powerful and combining them can enable amazing, JavaScript-free functionality.

As mentioned, both are relatively new. The Popover API has wide browser support and can be safely used. The anchor() feature, on the other hand, is still experimental and is not yet recommended for use in production environments.

Next up

In upcoming posts, I’ll demonstrate more advanced usage of these features. Stay tuned!

CSS: select all siblings using not()

Reuven Hozias — Mon, 21 Oct 2024 15:51:44 +0000

Our UX team wanted me to create a navigation menu that dims the rest of the items instead of highlighting the hovered item.

CSS to the rescue!

The solution is quite simple when using the CSS not() pseudo-class:

The HTML

<div class="menu-items">
  <div>Home</div>
  <div>About</div>
  <div>Contact</div>
  <div>Services</div>
  <div>Blog</div>
  <div>Portfolio</div>
</div>

The SCSS

I've removed the styling properties so we can focus on the actual functionality:

1 .menu-items {    
2     visibility: hidden;
3 
4     & > * {
5         visibility: visible;
6         transition: opacity 500ms;
7     }
8 
9     &:hover > :not(:hover) {
10        opacity: 0.45;
11    }
12 }

We have a container with a .menu-items class.
In line #4, we're selecting all its child elements and adding an opacity animation transition to them.

Line #9 handles the hover effect on elements by setting the opacity of all non-hovered elements using the not() pseudo-class to a lower value.

And what's going on with the visibility property?
We're setting the visibility of the .menu-items container to hidden and then setting the child elements back to visible. This causes the effect to turn off when we hover between the elements.

That's it :)

React 19 new features - the 'use' hook

Reuven Hozias — Wed, 09 Oct 2024 06:14:55 +0000

React 19 (RC version—as of September 2024) is the latest release of the popular web development library.
V19 is a significant milestone, bringing many new features and hooks. This post will discuss one of these hooks, the use hook.

The `use` hook

This hook allows developers to suspend the rendering of a UI component until an asynchronous task, such as fetching data or loading resources, is completed by suspending the received promise, without the need for complex state management.

Fetching data example

Our simple component follows the classic approach, using the useEffect hook to fetch data from a mock API (MSW in my case). We manage the local state to store the data, along with isLoading and isError states to track the fetch status:

const [users, setUsers] = useState<any>(null);
const [isError, setIsError] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(true);

When the page first loads, we run this useEffect hook to fetch the data, store it, and update the various states:

const fetchData = async () => {
  const response = await fetch('/api/users');
  return response.json();
};


useEffect(() => {
  fetchData()
    .then(setUsers)
    .catch(() => setIsError(true))
    .finally(() => setIsLoading(false));
}, []);

We show some UI while the request is being processed or if we encounter an error:

if (isLoading) {
  return <h2>Loading...</h2>;
}
if (isError) {
  return <h2>Error</h2>;
}

and finally! We render the users list:

return ( 
  <>
    {users.map((user) => {
      return (
        <div>
          {user.lastName}, {user.firstName}
        </div>
      );
    })}
  </>
);

A lot of boilerplate code!

Now, let’s refactor!

Let’s remove the useState and useEffect hooks. We will keep the fetchData method as it is.
Now we will fetch the data using the new use hook, which takes a promise and returns either JSON data or an error:

const users = use(fetchData());

The way this hook works is similar to doing something like this:

const users = await fetchData();

Handling `isLoading` and `isError`

To handle these state changes, we’ll go to our App component. We’ll use the React Suspense component, which is designed to respond to asynchronous events. It displays a fallback UI until its children have finished loading.

For error handling when working with Suspense, it’s common practice to use an ErrorBoundary. We’ll add an ErrorBoundary component that implements React’s getDerivedStateFromError() method.

<ErrorBoundary fallback={<h2>Error</h2>}>
  <Suspense fallback={<h2>Loading...</h2>}>
    <UserList />
  </Suspense>
</ErrorBoundary>

The refactor phase is completed!

Some extra’s

The usual rules for hooks do not apply here — you can use this hook anywhere you'd like!

Unlike regular hooks, the use hook can be used conditionally with an if statement, allowing you to decide whether to trigger it or not. For example, if you want to wrap a new API request with a feature flag and toggle it for testing, simply pass the feature flag to the UserList component and wrap the use hook. It's that simple!

Let's modify the App component:

<ErrorBoundary fallback={<h2>Error</h2>}>
  <Suspense fallback={<h2>Loading...</h2>}>
    <UserList testNewApi={true} />
  </Suspense>
</ErrorBoundary>

Modify the UserList component:

let users = [];
if(testNewApi){
  user = use(fetchData());
}

You can also use this hook to obtain a Context object, rather than using the regular method:

const data = useContext(myContext);

You can use the use hook here, for example, if you want to retrieve the context based on a conditional statement.

Conclusion

In this article, I've outlined the syntax of the use hook and provided usage examples. This should help you grasp this hook and how to use it effectively. I hope you find this information beneficial for your future projects.

Forem: Reuven Hozias

Dev tools: Debug WebSocket Connections Fast

What Does It Do?

Why Developers Love It

Common Use Cases

How to Use It

Beyond Basic Echo Testing

Start Testing Today

JavaScript in 2025: Your Roadmap to Modern Features

Why Staying Current with JavaScript Matters

The JavaScript Evolution Timeline: From ES2020 to ES2025

ES2020 Highlights (June 2020)

ES2021 Highlights (June 2021)

ES2022 Highlights (June 2022)

ES2023 Highlights (June 2023)

ES2024: The Current State (June 2024)

Looking Ahead: ES2025 and Beyond

Understanding the TC39 Process: How JavaScript Features Are Born

Browser Support: Navigating the Modern Landscape

Key Resources for Checking Support

Practical Browser Support Strategy

For Production Code:

For Modern Development:

What's Here Now vs. What's Coming

Available Today (ES2024 and Earlier)

Immutable Array Operations:

Set Mathematical Operations:

Enhanced Promise Patterns:

Coming Soon (ES2025 and Stage 3 Proposals)

Temporal API (Stage 3):

Pattern Matching (Stage 1, but promising):

Your Action Plan: Adopting Modern JavaScript

Immediate Steps (This Week)

Short-term Goals (Next Month)

Long-term Strategy (Next Quarter)

Conclusion: JavaScript's Bright Future

CSS: @starting-style a new & cool at-rule

Some simple examples

Add initial background-color transition from blue to pink

Add rotation to the previous example

NOTE

CSS: Easy dark mode

Old way

New and better way

CSS: masonry layout

grid

column-count

Using columns

How does this work?

Extras

Final thoughts

CSS-only tooltip using popover & anchor

🤔

Our baseline

The Popover API

Adding anchor CSS

Placing the tooltip

Breaking it down

Some extras

Conclusion

Next up

CSS: select all siblings using not()

CSS to the rescue!

The HTML

The SCSS

React 19 new features - the 'use' hook

The use hook

Fetching data example

Now, let’s refactor!

Handling isLoading and isError

Some extra’s

Conclusion

Add initial `background-color` transition from blue to pink

`grid`

`column-count`

Using `columns`

The `use` hook

Handling `isLoading` and `isError`