Forem: Punit Soni

Custom React Hook: useResizeObserver

Punit Soni — Thu, 01 Aug 2024 12:39:10 +0000

In this post, I'll share a custom React hook called useResizeObserver. This hook helps you observe and get the bounding client rect of a DOM element, updating the rect whenever the element is resized. It's part of my React library, react-helper-hooks, which contains many useful hooks to save developers time.

Source Code

import { useEffect, useRef, useState } from 'react';

type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;

export default function useResizeObserver(): Array<any> {
  const ref = useRef<any>(null);
  const [rect, setRect] = useState<ObserverRect>();

  useEffect(() => {
    const observer = new ResizeObserver(() => {
      if (ref.current) {
        const boundingRect = ref.current.getBoundingClientRect();
        setRect(boundingRect);
      }
    });
    observer.observe(ref.current);

    return () => observer.disconnect();
  }, [ref]);

  return [ref, rect];
}

How It Works

The useResizeObserver hook leverages the ResizeObserver API to track size changes of a DOM element. It returns a ref to be attached to the target element and the current bounding client rect of that element.

Example Usage

Here's an example of how to use the useResizeObserver hook in a functional component:

import React from 'react';
import useResizeObserver from './useResizeObserver';

function ExampleComponent() {
  const [ref, rect] = useResizeObserver();

  return (
    <>
       <textarea ref={ref} style={{ resize: 'both', height: 100, width: 300 }}>
           Resize this element to see the changes:
       </textarea>

      {rect && (
        <div>
          <p>Top: {rect.top}</p>
          <p>Left: {rect.left}</p>
          <p>Width: {rect.width}</p>
          <p>Height: {rect.height}</p>
        </div>
      )}
    </>
  );
}

export default ExampleComponent;

In this example, a textarea element is made resizable. The useResizeObserver hook tracks its dimensions, which are displayed outside the textarea.

About `react-helper-hooks`

The useResizeObserver hook is part of my React library, react-helper-hooks. This library includes a collection of custom hooks designed to save developers time and effort. Hooks like useResizeObserver provide reusable, efficient solutions for common tasks in React applications.

Feel free to check out the library and contribute or suggest new hooks!

Let me know if you need any changes or additional information!

Follow me on X ( Twitter ) - https://twitter.com/punitsonime
Let's connect on linked in - https://www.linkedin.com/in/punitsonime/

Mastering `aria-activedescendant` in HTML!

Punit Soni — Tue, 19 Dec 2023 06:12:36 +0000

🚀✨ Elevate your web app's accessibility by understanding and implementing this powerful attribute. Let's explore together! 💻🔍 #AriaActiveDescendantThread #WebAccessibility

1/ 🤔 What is `aria-activedescendant`?

aria-activedescendant is an attribute in HTML that establishes a relationship between a widget and its currently active descendant. It's particularly useful for enhancing the accessibility of dynamic or complex user interfaces. #Accessibility #AriaActiveDescendant

2/ 💡 Why use `aria-activedescendant`?

Navigation Control: Facilitates navigation within complex widgets.
Dynamic Content: Ideal for components with changing content.
Screen Reader Support: Improves the experience for users relying on screen readers. #A11y #WebDevelopment

3/ 🌐 Basic Example:

<div role="listbox" aria-activedescendant="option1">
  <div id="option1" role="option" tabindex="0">Option 1</div>
  <div id="option2" role="option">Option 2</div>
  <div id="option3" role="option">Option 3</div>
</div>

In this example, the listbox has an active descendant (option1) indicating the currently focused option. #HTML #AriaActiveDescendantExample

4/ 🎨 Enhancing Navigation:

<input
  type="text"
  role="combobox"
  aria-activedescendant="suggestion1"
  aria-controls="suggestions"
/>
<ul id="suggestions" role="listbox">
  <li id="suggestion1" role="option" tabindex="-1">Suggestion 1</li>
  <li id="suggestion2" role="option" tabindex="-1">Suggestion 2</li>
  <li id="suggestion3" role="option" tabindex="-1">Suggestion 3</li>
</ul>

In a search input with suggestions, aria-activedescendant assists in managing the active suggestion. #Accessibility #WebDevTips

5/ ⚙️ Managing Focus:

const combobox = document.querySelector('[role="combobox"]');
combobox.addEventListener('keydown', (event) => {
  // Handle arrow keys to update aria-activedescendant
});

JavaScript can be used to manage focus within the widget, updating aria-activedescendant accordingly. #JavaScript #FocusManagement

6/ 🚀 Best Practices:

Consistency: Ensure a consistent and predictable experience.
Dynamic Updates: Keep aria-activedescendant in sync with the widget's state.
Testing: Verify your implementation with screen readers and keyboard navigation. #A11yTesting #BestPractices

7/ 🌟 Real-world Impact:

Accessible Menus: Create accessible dropdown menus or suggestion lists.
Rich Interfaces: Power dynamic and interactive components.
Legal Compliance: Contribute to meeting accessibility standards. #InclusiveDesign #WebAccessibility

8/ 🚦 Conclusion:

aria-activedescendant is a game-changer for accessible UIs. Let's build interfaces that everyone can navigate with ease! 🌐💙 #AriaActiveDescendant #AccessibilityChampion

Share your thoughts, examples, and experiences with aria-activedescendant below! Let's foster an inclusive web together! 💬🌐 #WebDevCommunity #A11yAwareness

Follow me on X ( Twitter ) - https://twitter.com/punitsonime
Let's connect on linked in - https://www.linkedin.com/in/punitsonime/

🌐🔍 Unveiling the Power of `aria-label` in HTML!

Punit Soni — Mon, 18 Dec 2023 05:49:49 +0000

Enhance your website's accessibility with this simple yet impactful attribute. Let's dive in! 🚀💻

1/ 🤔 What is `aria-label`?

aria-label is an attribute in HTML that provides a screen reader with a concise label, improving accessibility for users with visual impairments. It's a crucial tool for making your web content more inclusive. #AriaLabel #WebAccessibility

2/ 💡 Why use `aria-label`?

Screen Reader Support: Enables screen readers to announce a custom label.
Icon-Only Elements: Perfect for icons or images without descriptive text.
Dynamic Content: Useful for dynamic content updates where traditional labels might be insufficient. #AccessibilityForAll #InclusiveDesign

3/ 🌐 Basic Example:

<button aria-label="Close" onclick="closePopup()">X</button>

In this example, the button has an aria-label providing context to screen reader users, even though the visible text is just 'X'. #HTML #AriaLabelExample

4/ 🎨 Customizing `aria-label`:

<input type="text" aria-label="Search input" placeholder="Search...">

Enhance user experience by combining aria-label with placeholders, ensuring clarity for both visual and non-visual users. #WebDesign #AccessibilityMatters

5/ ⚙️ Dynamic Content Example:

<div id="dynamicContent" aria-label="Live update: "></div>

When content updates dynamically, aria-label keeps screen reader users informed about the changes. Dynamically set the label as content updates. #DynamicContent #WebDevelopment

6/ 🚀 Best Practices:

Be Descriptive: Craft labels that convey the purpose of the element.
Avoid Redundancy: Use aria-label sparingly, especially if visible text already conveys the same information.
Testing: Validate your implementation with screen reader tools for a comprehensive check. #A11yTesting #BestPractices

7/ 🌐 When to Use `aria-label`:

Icons: When using icon-only buttons or links.
Interactive Elements: Enhance labels for interactive elements.
Dynamic Content: Keep users informed with dynamic content. #WebDevTips #AriaLabelBestPractices

8/ 🌟 Real-world Impact:

Better User Experience: Improved accessibility benefits all users.
Legal Compliance: Many regions require websites to meet certain accessibility standards.
Increased User Base: Attract a wider audience by making your site accessible. #WebAccessibility #InclusiveWeb

9/ 🚦 Conclusion:

Implementing aria-label is a small step with a big impact. Let's make the web more inclusive, one aria-label at a time! 💙🌐 #AriaLabel #AccessibilityChampion

Share your thoughts, experiences, and examples of aria-label below! Let's learn and grow together! 🌐💬 #WebDevCommunity #AccessibilityAwareness

Follow me on X ( Twitter ) - https://twitter.com/punitsonime
Let's connect on linked in - https://www.linkedin.com/in/punitsonime/

Unleashing the Power of JavaScript Speech Synthesis! 🚀🔊

Punit Soni — Thu, 14 Dec 2023 05:57:09 +0000

Hey Dev.to community! 👋 In this post, we're diving into the exciting world of JavaScript Speech Synthesis, exploring its capabilities and how you can leverage it to enhance user experiences on the web.

What is Speech Synthesis in JavaScript?

JavaScript's SpeechSynthesis API allows you to convert text into spoken words, opening up a myriad of possibilities for interactive and engaging web applications.

Getting Started

Before diving in, ensure that the Speech Synthesis API is supported in the browser:

if ('speechSynthesis' in window) {
  // Speech Synthesis is supported
} else {
  // Handle unsupported case
}

Basic Example

Let's start with a simple function to make your web app talk:

function speak(text) {
  const utterance = new SpeechSynthesisUtterance(text);
  speechSynthesis.speak(utterance);
}

// Usage
speak("Hello, World!");

Customizing Utterances

The SpeechSynthesisUtterance object allows you to customize speech:

const utterance = new SpeechSynthesisUtterance("Customizing Utterances!");
utterance.rate = 1.5; // Speed
utterance.pitch = 0.8; // Pitch
utterance.volume = 0.7; // Volume
speechSynthesis.speak(utterance);

Events and Callbacks

Hook into various stages of the speech synthesis process with events:

utterance.onstart = () => console.log("Speech started");
utterance.onend = () => console.log("Speech ended");
utterance.onerror = (event) => console.error("Speech error", event.error);

Voices and Languages

Explore available voices and set language preferences:

const voices = speechSynthesis.getVoices();
utterance.voice = voices.find(voice => voice.lang === 'en-US');

Real-World Applications

Accessibility features for visually impaired users.
Interactive chatbots with spoken responses.
Educational platforms enhancing learning experiences.
Voice-guided navigation in web applications.

Conclusion

JavaScript Speech Synthesis is a versatile tool for creating engaging and accessible web experiences. Experiment with different voices, speeds, and pitches to craft unique interactions!

Demystifying JavaScript Property Descriptors: A Deep Dive

Punit Soni — Thu, 17 Aug 2023 08:37:37 +0000

Hello, fellow developers! 🚀 Have you ever encountered the term "property descriptor" in JavaScript and wondered what it actually means and how it impacts your code? In this post, we're going to take a deep dive into the world of JavaScript property descriptors, demystifying their significance and shedding light on how they can be leveraged to wield greater control over your objects' properties.

Understanding Property Descriptors:

In JavaScript, every object property is associated with a set of attributes that define its behavior. These attributes collectively form what is known as a property descriptor. A property descriptor comprises the following attributes:

Value: The actual value of the property.
Writable: A boolean indicating whether the property's value can be changed.
Enumerable: A boolean indicating whether the property can be iterated over in a loop.
Configurable: A boolean indicating whether the property's attributes can be modified and the property can be deleted.

Creating Property Descriptors:

Property descriptors can be created using the Object.defineProperty() method or the Object.defineProperties() method for defining multiple properties at once.

const obj = {};

// Using Object.defineProperty()
Object.defineProperty(obj, 'name', {
  value: 'Punit',
  writable: true,
  enumerable: true,
  configurable: true
});

Use Cases and Advantages:

Controlled Immutability: By setting the writable attribute to false, you can create properties that cannot be reassigned, effectively enforcing immutability for certain parts of your objects.
Hidden Properties: Properties with the enumerable attribute set to false won't show up when using methods like Object.keys() or for...in loops, providing a way to hide internal implementation details.
Protection Against Modification: The configurable attribute can be set to false to prevent accidental modification or deletion of properties, adding an extra layer of security to your objects.
Getters and Setters: Property descriptors are essential when creating properties with custom getters and setters, enabling you to add custom logic whenever a property is accessed or modified.
Object Sealing and Freezing: You can use property descriptors along with Object.seal() and Object.freeze() to control the level of modification allowed for an object and its properties.

Example Use Case:

Consider a scenario where you're building a class to manage user data. You want to ensure that the user's ID remains unchangeable, their password is hidden, and the data can't be tampered with:

class User {
  constructor(id, password) {
    this.id = id;
    Object.defineProperty(this, 'password', {
      value: password,
      writable: false,
      enumerable: false,
      configurable: false
    });
  }
}

const user = new User('123', 'secretpassword');
console.log(user.id); // Output: 123
console.log(user.password); // Output: undefined

Conclusion:

JavaScript property descriptors provide a powerful mechanism for fine-tuning the behavior of object properties. By manipulating attributes like writable, enumerable, and configurable, you can tailor the properties to your exact needs. Whether you're aiming for controlled immutability, data hiding, or enhanced security, property descriptors offer a way to achieve these goals while maintaining flexibility and control in your code.

Give property descriptors a try in your next JavaScript project, and unlock a whole new level of control over your objects' properties! If you have questions or insights to share, feel free to drop them in the comments below. Happy coding! 💻🔑

Stay curious and keep exploring the fascinating world of JavaScript!

Building a Custom React Hook: useIsAppOffline

Punit Soni — Sun, 13 Aug 2023 10:31:05 +0000

Hey fellow developers! 👋 Let's dive into creating a handy custom React hook that can help you easily determine whether your app is offline or online. We'll call it useIsAppOffline. Whether you're building a progressive web app, a mobile application using React Native, or a traditional web app, this custom hook can be a lifesaver when it comes to handling different network states.

import { useState } from 'react';

export default function useIsAppOffline() {
  const [isAppOffline, setIsAppOffline] = useState(!navigator.onLine);

  window.addEventListener('online', function (e) {
    setIsAppOffline(false);
  });

  window.addEventListener('offline', function (e) {
    setIsAppOffline(true);
  });

  return isAppOffline;
}

How It Works:

This custom hook, useIsAppOffline, leverages the useState hook from React to manage the state of whether your app is offline or online. It starts by setting the initial state based on the value of navigator.onLine, which indicates if the user's device is currently connected to the internet.

The hook then adds event listeners to the window object for the online and offline events. These events are triggered whenever the network status changes. When the app transitions from an offline to an online state, the online event is fired, and we update the state to reflect that the app is online. Similarly, when the app goes from online to offline, the offline event is triggered, and we update the state to indicate that the app is offline.

By using this custom hook in your components, you can easily react to changes in the app's network status and provide appropriate user feedback or take specific actions based on the network state.

Example Usage:

import React from 'react';
import useIsAppOffline from './useIsAppOffline';

function App() {
  const isOffline = useIsAppOffline();

  return (
    <div>
      {isOffline ? (
        <p>Your app is currently offline.</p>
      ) : (
        <p>Your app is online and ready to go!</p>
      )}
    </div>
  );
}

export default App;

Benefits:

Simplicity: The useIsAppOffline hook abstracts away the complexities of monitoring the network status, making it easy to integrate into your application.

Reactivity: Your UI will instantly respond to changes in network connectivity, enhancing the user experience.

Customization: You can easily extend the hook to implement additional functionality, such as triggering actions on network state changes.

Conclusion:

In this post, we've explored the creation of a custom React hook, useIsAppOffline, which helps you keep track of your app's network status. By encapsulating this functionality into a hook, you can effortlessly handle different network states and provide a more seamless experience for your users. Feel free to integrate this hook into your projects and enhance the way your apps respond to changing network conditions!

Use cases

The useIsAppOffline hook can be incredibly useful in a variety of scenarios where you need to respond to changes in network connectivity. Here are some use cases where this custom hook could come in handy:

Offline Indicator:
Display a visual indicator to users when your application goes offline, helping them understand that their device has lost connectivity. This can prevent confusion and frustration, as users will know that the lack of data is due to network issues rather than a problem with your app.
Data Syncing:
If your app involves data synchronization with a server, you can use the useIsAppOffline hook to pause or delay data syncing when the app goes offline. This prevents unnecessary attempts to sync data when the network is unavailable, reducing potential conflicts or errors.
Form Handling:
When users are filling out forms, you can disable certain functionality or provide warnings when the app is offline. For example, you might prevent users from submitting forms until connectivity is restored or display a message explaining that their form data will be submitted once the app is online again.
Caching Strategies:
If your app relies on caching data for offline access, you can use the hook to determine whether to use cached data or fetch fresh data from the network. This can help improve the user experience by providing some level of functionality even when the app is offline.
Real-time Collaboration:
In collaborative applications, you can temporarily disable certain real-time features (like live chat or collaborative editing) when the app goes offline. This prevents data inconsistencies and ensures a smooth experience once connectivity is restored.
Background Tasks:
Some apps perform background tasks, such as fetching notifications or updates while in the background. You can utilize the hook to manage when these tasks should be paused or resumed based on network availability.
Progressive Web Apps (PWAs):
For Progressive Web Apps, the useIsAppOffline hook can help manage the transition from offline to online mode. You might want to display a message indicating that the app is ready for offline use when the user goes offline, and then update the UI when the app reconnects.
Error Handling:
When network requests fail due to lack of connectivity, you can handle those errors gracefully by showing a user-friendly message and providing options for retrying the request once the app is back online.

These are just a few examples of how the useIsAppOffline hook can be applied in different scenarios. By encapsulating network status monitoring into a custom hook, you can easily adapt your app to various network conditions, enhancing user experience and preventing potential issues caused by connectivity fluctuations.

Give it a try and let me know how it works for you. Happy coding! 💻🚀

Have questions or suggestions? Drop them in the comments below!

Enhancing Accessibility of HTML Text Input Elements with ARIA Attributes

Punit Soni — Thu, 04 May 2023 10:36:26 +0000

Learn how to improve the accessibility of text input elements in HTML by using ARIA attributes. This article covers various ARIA attributes that can be used to make text input elements more accessible, including aria-label, aria-labelledby, aria-describedby, aria-required, and more. By implementing these attributes, you can make your web forms and applications more inclusive and accessible to users with disabilities.

1. aria-label:

This property can be used to provide a label for the input element, which can be read by screen readers. It should be used when a visible label cannot be provided.

Example:

<input type="text" aria-label="Enter your name">

2. aria-labelledby:

This property can be used to associate the input element with a label in the page, which can be read by screen readers.

Example:

<label for="name">Enter your name:</label>
<input type="text" id="name" aria-labelledby="name">

3. aria-describedby:

This property can be used to associate the input element with additional descriptive text, such as a hint or a help message.

Example:

<input type="text" aria-describedby="name-help">
<span id="name-help">Enter your full name, including your last name.</span>

4. aria-invalid:

This property can be used to indicate whether the input value is invalid.

Example:

<input type="text" required aria-invalid="true" aria-describedby="error-message">
<span class="validation-message" id="">This field is required</span>

5. aria-autocomplete:

This property can be used to specify whether the input should provide suggestions, and what type of suggestions should be provided.

Example:

<input type="text" aria-autocomplete="list">

6. aria-expanded:

This property can be used to indicate whether the input's associated dropdown or list is expanded or collapsed.

Example:

<input type="text" aria-controls="dropdownList" aria-expanded="false">
<ul id="dropdownList">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
</ul>

7. aria-required:

This attribute can be used to indicate that the input is required, and that a value must be provided by the user.

Example:

<input type="text" aria-required="true">

8. aria-placeholder:

This attribute can be used to provide a hint or an example value for the input element.

Example:

<input type="text" aria-placeholder="Enter your email address">

9. aria-controls:

This attribute can be used to associate the input element with a related element, such as a dropdown or a list.

Example:

<input type="text" aria-controls="emailSuggestions">
<ul id="emailSuggestions">
  <li>example1@example.com</li>
  <li>example2@example.com</li>
  <li>example3@example.com</li>
</ul>

10. aria-selected:

This attribute can be used to indicate whether an option in a list or a dropdown is currently selected.

Example:

<input type="text" aria-controls="colorList">
<ul id="colorList">
  <li aria-selected="true">Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

11. aria-disabled:

This attribute can be used to indicate that the input element is disabled and cannot be interacted with.

Example:

<input type="text" aria-disabled="true">

These ARIA attributes can help improve the accessibility of input elements by providing additional information to assistive technologies such as screen readers and also help improve the accessibility of text input elements, making it easier for users with disabilities to understand and interact with them.

Follow me on

Twitter
Github
LinkedIn

How to Make Your Website More Accessible with prefers-reduced-motion

Punit Soni — Tue, 02 May 2023 09:54:52 +0000

Introduction:

If you're building websites or web applications, it's important to make sure that everyone can use them, regardless of any accessibility challenges they may face. One accessibility issue that can affect some users is motion sickness or discomfort caused by animations and other motion effects on the page. That's where prefers-reduced-motion comes in.

Understanding `prefers-reduced-motion`

prefers-reduced-motion is a media query that can be used in CSS to detect whether the user has requested reduced motion on their device or browser. The possible values for prefers-reduced-motion are no-preference and reduce. If the user has requested reduced motion, any animations or other motion effects on the page should be disabled or scaled back.

Here's an example of how to use prefers-reduced-motion in CSS:

@media (prefers-reduced-motion) {
  /* Disable or scale back animations and motion effects */
}

Examples of `prefers-reduced-motion` in action

Here are some examples of how you can use prefers-reduced-motion to create a more accessible user experience:

If you have a slideshow or carousel on your page, you can disable automatic animation when prefers-reduced-motion is set to reduce, so that the user can manually advance the slides without being bombarded with automatic motion effects.
If you have a navigation menu that slides in and out of view, you can disable the sliding animation when prefers-reduced-motion is set to reduce, so that the menu appears instantly without any motion effects.
If you have a hover effect on your links or buttons, you can disable the effect or change it to a more subtle effect when prefers-reduced-motion is set to reduce, so that the user doesn't experience any sudden or distracting motion.

prefers-reduced-motion demo

You can see the smooth scroll animation if you operating system's Animation is enabled.
If you disable the operating system's Animation, smooth scrolling will no longer visible

Enable Disable Animation in Windows

Conclusion:

By using prefers-reduced-motion in your CSS, you can make your website or web application more inclusive and accessible to users who may experience discomfort or motion sickness from animations and other motion effects. It's a simple but powerful tool that can help you create a more welcoming and inclusive online experience.

Follow me on

Twitter
Github
LinkedIn

Forem: Punit Soni

Custom React Hook: useResizeObserver

Source Code

How It Works

Example Usage

About react-helper-hooks

Mastering `aria-activedescendant` in HTML!

1/ 🤔 What is aria-activedescendant?

2/ 💡 Why use aria-activedescendant?

3/ 🌐 Basic Example:

4/ 🎨 Enhancing Navigation:

5/ ⚙️ Managing Focus:

6/ 🚀 Best Practices:

7/ 🌟 Real-world Impact:

8/ 🚦 Conclusion:

🌐🔍 Unveiling the Power of `aria-label` in HTML!

1/ 🤔 What is aria-label?

2/ 💡 Why use aria-label?

3/ 🌐 Basic Example:

4/ 🎨 Customizing aria-label:

5/ ⚙️ Dynamic Content Example:

6/ 🚀 Best Practices:

7/ 🌐 When to Use aria-label:

8/ 🌟 Real-world Impact:

9/ 🚦 Conclusion:

Unleashing the Power of JavaScript Speech Synthesis! 🚀🔊

What is Speech Synthesis in JavaScript?

Getting Started

Basic Example

Customizing Utterances

Events and Callbacks

Voices and Languages

Real-World Applications

Conclusion

Further Reading

X ( Twitter ) - https://twitter.com/PunitSoniME

Demystifying JavaScript Property Descriptors: A Deep Dive

Building a Custom React Hook: useIsAppOffline

How It Works:

Benefits:

Conclusion:

Use cases

Enhancing Accessibility of HTML Text Input Elements with ARIA Attributes

1. aria-label:

Example:

2. aria-labelledby:

Example:

3. aria-describedby:

Example:

4. aria-invalid:

Example:

5. aria-autocomplete:

Example:

6. aria-expanded:

Example:

7. aria-required:

Example:

8. aria-placeholder:

Example:

9. aria-controls:

Example:

10. aria-selected:

Example:

11. aria-disabled:

Example:

Follow me on

How to Make Your Website More Accessible with prefers-reduced-motion

Introduction:

Understanding prefers-reduced-motion

Examples of prefers-reduced-motion in action

Conclusion:

Follow me on

About `react-helper-hooks`

1/ 🤔 What is `aria-activedescendant`?

2/ 💡 Why use `aria-activedescendant`?

1/ 🤔 What is `aria-label`?

2/ 💡 Why use `aria-label`?

4/ 🎨 Customizing `aria-label`:

7/ 🌐 When to Use `aria-label`:

Understanding `prefers-reduced-motion`

Examples of `prefers-reduced-motion` in action