DEV Community: faisal khan

Building Components in React: Accordion

faisal khan — Wed, 26 Jan 2022 08:43:18 +0000

An accordion is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them.

It is one of many ways you can expose content to users in a progressive manner. Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore.

Let's build an ideal Accordion component in react from basics to advance

Libraries used: classnames, react-transition-group, material-ui/icons

Creating a basic accordion
Animating the accordion
Making Accordion Accessible

1. Creating a basic accordion



import React, { useState } from 'react';
import classNames from 'classnames';

import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

const Accordion = ({ children, isAlreadyOpen, title, id, onOpen, onClose }) => {
  const [isOpen, setIsOpen] = useState(isAlreadyOpen);

  const onToggle = () => {
    if (!isOpen) {
      onOpen(id);
    } else {
      onClose(id);
    }
    setIsOpen((currentState) => !currentState);
  };

  return (
    <section>
      <div
        onClick={onToggle}
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          cursor: 'pointer',
        }}
      >
        <h4>{title}</h4>
        <span>
          <ExpandMoreIcon />
        </span>
      </div>
      {isOpen ? (
        <div>
          <section>
            <section>{children}</section>
          </section>
        </div>
      ) : null}
    </section>
  );
};

export default Accordion;

Output

We are keeping it simple in the above example by just toggling the visibility based upon a state variable.

2. Animating the accordion

The component that we created in our previous step was a very simple version of an accordion, which just hides and shows content on the toggle.

But for better UX, we should add animation while toggling the visibility of the content.

Using pure CSS to handle animation

This is a good and clean way to handle animations in accordion without any external library dependency

The idea behind this is that in the default state, the max height is set to 0, along with overflow: hidden, so that the content is not visible to the user.

When the accordion is open, we have max-height set to some arbitrarily large value (above 1000px based upon the content of your accordion), so that the content can be seen.

The reason we are using max-height, instead of height, is that we don’t know how tall the container needs to be. By using max-height, we allow the browser to resize the height dynamically when we open it.

The only problem it causes is in Accessibility, when we have multiple accordions and the content includes multiple focusable components then the tab order can be a problem.

Since the tab focus will also go to the component of an accordion which are in a closed state since the accordion component are mounted and are on DOM.

Example:

In the above image, the tab focus gets lost for a second because the focus goes to the button inside the content of the accordion even when it's not in expanded mode.

Ref and more on this here: https://javascript.plainenglish.io/how-to-create-a-simple-animated-accordion-in-react-303567a4ca9f

Using react-transition-group's CSSTransition component for handling animation

react-transition-group library provides us an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM.

This fits our case where in we need to mount and unmount content of the accordion-based upon a state variable at the same time also have animation while performing toggle action.

Let code it out!



import React, { useState } from 'react';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';

import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

import './styles.css';

const Accordion = ({ children, isAlreadyOpen, title, id, onOpen, onClose }) => {
  const [isOpen, setIsOpen] = useState(isAlreadyOpen);

  const onToggle = () => {
    if (!isOpen) {
      onOpen(id);
    } else {
      onClose(id);
    }
    setIsOpen((currentState) => !currentState);
  };

  return (
    <section className="accordion-wrapper">
      <div onClick={onToggle} className="accordion-wrapper__header">
        <h4>{title}</h4>
        <span
          className={classNames('accordion-wrapper__header-toggle-icon', {
            'accordion-wrapper__header-toggle-icon--isOpen': isOpen,
          })}
        >
          <ExpandMoreIcon />
        </span>
      </div>
      <div className="accordion-wrapper__content-wrapper">
        <CSSTransition
          in={isOpen}
          timeout={300}
          classNames="accordion-wrapper__content"
          unmountOnExit
        >
          <section>
            <section className="accordion-wrapper__content-body">
              {children}
            </section>
          </section>
        </CSSTransition>
      </div>
    </section>
  );
};

export default Accordion;



.accordion-wrapper {
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 2px solid transparent;
  transition: border 0.35s ease;
}

.accordion-wrapper__header {
  display: flex;
  flex: 1;
  cursor: pointer;
  padding: 20px 20px 0px;
  align-items: center;
  justify-content: space-between;
}

.accordion-wrapper__header-toggle-icon {
  background: none;
  border: none;
  display: flex;
}

.accordion-wrapper__header-toggle-icon svg {
  width: 32px;
  height: 32px;
  fill: black;
  transition: all 0.3s linear;
  margin-top: -7px;
}

.accordion-wrapper__header-toggle-icon--isOpen svg {
  transform: rotate(-180deg);
}

.accordion-wrapper__content-wrapper {
  padding: 0px 20px 20px;
}

.accordion-wrapper__content-body {
  padding-top: 24px;
}

/* CSSTransition specific classes starts here */
.accordion-wrapper__content-enter {
  overflow: hidden;
  max-height: 0;
}

.accordion-wrapper__content-enter-active {
  max-height: 1000px;
  transition: max-height 0.6s ease-in-out;
}

.accordion-wrapper__content-exit {
  max-height: 1000px;
}

.accordion-wrapper__content-exit-active {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

/* CSSTransition specific classes ends here */

In the above code we have used CSSTransition component (more info) for animation, this basically takes a class name and allows us to write the styles when the component will be in different states like enter, enter-active, exit, exit-active and may more states.

Output:

3. Making Accordion Accessible

The key to making accordions accessible is to toggle some ARIA properties and states on user click or focus events (e.g. aria-hidden, aria-expanded, etc.).

There are majorly two components in Accordion where we can use accessible ARIA properties

Accordion Buttons

Buttons are used as the accordions so that they are tab-able by keyboard users and accessible to screen readers.

Each accordion button has a unique id associated with its aria-controls (each button controls this particular id which references the hidden content beneath it).

Here, the aria-controls for each button is: aria-controls='content-{#}'

Each button has an aria-expanded attribute on it that is toggled between true and false.

Accordion Content

Every content area has an id that corresponds to the aria-controls for each button.

The content ids are: id='#content-{#}'

Each content area has an aria-hidden attribute that is toggled between true and false.

Let's make our accordion accessible



import React, { useState } from 'react';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';

import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

import './styles.css';

const Accordion = ({ children, isAlreadyOpen, title, id, onOpen, onClose }) => {
  const [isOpen, setIsOpen] = useState(isAlreadyOpen);

  const onToggle = () => {
    if (!isOpen) {
      onOpen(id);
    } else {
      onClose(id);
    }
    setIsOpen((currentState) => !currentState);
  };

  const handleOnKeyPress = (event) => {
    const keys = ['Enter', 'Spacebar', ' '];
    if (keys.includes(event.key)) {
      onToggle();
    }
  };

  return (
    <section className="accordion-wrapper">
      <div
        role="button"
        className="accordion-wrapper__header"
        aria-controls={`${id}-content`}
        aria-expanded={isOpen}
        onClick={onToggle}
        onKeyDown={handleOnKeyPress}
        tabIndex="0"
        aria-labelledby={`${id}-title`}
      >
        <h4 className="accordion-wrapper__header-title" id={`${id}-title`}>
          {title}
        </h4>
        <span
          className={classNames('accordion-wrapper__header-toggle-icon', {
            'accordion-wrapper__header-toggle-icon--isOpen': isOpen,
          })}
        >
          <ExpandMoreIcon />
        </span>
      </div>
      <div
        className="accordion-wrapper__content-wrapper"
        aria-hidden={!isOpen}
        id={`${id}-content`}
      >
        <CSSTransition
          in={isOpen}
          timeout={300}
          classNames="accordion-wrapper__content"
          unmountOnExit
        >
          <section>
            <section className="accordion-wrapper__content-body">
              {children}
            </section>
          </section>
        </CSSTransition>
      </div>
    </section>
  );
};

export default Accordion;

Here we have used role="button" on the accordion header along with onKeyPress to make it accessible, other ARIA attributes like aria-hidden, aria-controls and aria-expanded are also used to convey states of accordion.

More info on accessibility with accordion

Conclusion

Component creation often involves multiple points to be kept in mind, right from creating a basic structure to solving common and complex problems such as accessibility and usability.

The article covers most parts of an Accordion and its uses and can easily be integrated into a live project.

Why to use Maps over Objects in JS ?

faisal khan — Thu, 07 Oct 2021 04:57:24 +0000

In JavaScript, an object is a standalone entity, with properties and type.

Compare it with a cup, for example. A cup is an object, with properties. A cup has color, design, weight, and the material it is made of, etc.

Problems I faced while working with objects
Solution: Maps Data Structure
Comparison: Objects and Maps
Practical Example
Problems in Maps
Conclusion

1. Problems I faced while working with objects:

Only string or symbol could be used as key.
- Objects have a limitation that their keys have to be strings
```
   const names = {
     1: 'One',
     2: 'Two',
   };
   Object.keys(names); // => ['1', '2']
```
- The numbers 1 and 2 are keys in the names object. Later, when the object’s keys are accessed, it turns out that the numbers were converted to strings.
- Implicit conversion of keys is tricky because you lose the consistency of the types.
No proper helper methods to work with objects.
- In order to find the length of the object we need to either use Object.keys() or Object.values() and then find the length by accessing .length on the array returned.
- Similarly to iterate over it we have to use the same methods above to perform an iteration over the object.
Own object properties might collide with property keys inherited from the prototype (e.g. toString, constructor, etc).
- Any object inherits properties from its prototype object.
- The accidentally overwritten property inherited from the prototype is dangerous. Let’s study such a dangerous situation.
- Let’s overwrite the toString() property in an object actor:
```
   const actor = {
    name: 'Harrison Ford',
    toString: 'Actor: Harrison Ford' 
   /* 
   this will cause a problem since we are overriding the 
   toString method of the prototype chain
   */
  };
```
Deleting keys causes problem in large objects.
- Using delete causes various forms and magnitudes of a slowdown in many situations, because it tends to make things more complicated, forcing the engine (any engine) to perform more checks and/or fall off various fast paths.

2. Solution: Using Maps Data Structure

Maps is a collection of keyed data items, just like an object. But the main difference is that Map allows keys of any type.

Methods and properties are:

new Map() – creates the map.
map.set(key, value) – stores the value by the key.
map.get(key) – returns the value by the key, undefined if the key doesn’t exist in map.
map.has(key) – returns true if the key exists, false otherwise.
map.delete(key) – removes the value by the key.
map.clear() – removes everything from the map.
map.size – returns the current element count.

Code:

let map = new Map();

map.set('1', 'str1');   // a string key
map.set(1, 'num1');     // a numeric key
map.set(true, 'bool1'); // a boolean key

// remember the regular object? it would convert keys to string
// Map keeps the type, so these two are different:
alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

alert( map.size ); // 3

Maps have useful and intuitive helper methods which are used to perform different operations.

3. Comparison: Objects and Maps

Parameters	Object	Maps
Iteration	Object does not implement an iteration protocol, and so objects are not directly iterable using the JavaScript for...of statement (by default).	A Map is an iterable, so it can be directly iterated
Key Types	The keys of an object must be either a String or a Symbol.	A Map's keys can be any value (including functions, objects, or any primitive).
Size	The number of items in an object must be determined manually.	The number of items in a Map is easily retrieved from its size property.
Performance	Not optimized for frequent additions and removals of key-value pairs.	Performs better in scenarios involving frequent additions and removals of key-value pairs.

4. Practical Example

Let's take an example of implementing select all functionality.

const selectedItems = {}; 
// we will use object here for quick lookup since its search is O(1)

// adding item into selectedItems
selectedItems['image/png'] = true 
selectedItems['text/html'] = true

// removing item from selectedItems
selectedItems['application/pdf'] = false

The code seems simple, but if you notice we are not deleting the key here we are setting it to false.

So in order to change the header selection state either from partial to complete or vice versa.We need to traverse over the object and detect false and true values.

It would have been easy if we could have deleted items from an object and then had checked the length of the object to determine if the current state is partial or complete.

But delete has performance issues in our V8 engine especially when we want to do multiple deletions of keys.

Maps comes to the rescue, map has delete functionality as well as functionality to return size, unlike object where we need to convert to array and then find the length of it. All without causing performance bottleneck.

const selectedItems = new Map()

// adding item into selectedItems
selectedItems.set('image/png') 
selectedItems.set('text/html')

// removing item from selectedItems
selectedItems.delete('application/pdf')

One of the solutions was to set selectionItems to {} when we want to remove all the selected items, but that is not a scalable solution in certain situations.

When we do pagination in a table we have scenarios where select-all is performed to items specific to the current page and not on the items of the next or previous page.

In this case, if we set selectedItems = {} it will reset all the values, which is an incorrect solution.

Hence, maps are more scalable solution since it does not face any problem with respect to the deletion of the key.

5. Problems in Maps

Maps is not here to replace objects
- If we are only using string-based keys and need maximum read performance, then objects might be a better choice.
- This is because Javascript engines compile objects down to C++ classes in the background, and the access path for properties is much faster than a function call for Map().get().
- Adding or removing a property causes the shape of the class to change and the backing class to be re-compiled, which is why using an object as a dictionary with lots of additions and deletions is very slow, but reads of existing keys without changing the object are very fast.
Maps are not serializable
- Maps does not have native support for serialization or parsing
- Redux does not recommend using non-serializable data structures, since it can break the working of dev-tools and also will cause problems in rendering updates as expected: https://redux.js.org/style-guide/style-guide#do-not-put-non-serializable-values-in-state-or-actions

6. Conclusion

In review, while we will still rely heavily on JavaScript objects to do the job of holding structured data, they have some clear limitations

These limitations are solved by maps. Moreover, maps provide benefits like being iterators and allowing easy size look-up.

Objects are not good for information that’s continually updated, looped over, altered, or sorted. In those cases, use maps.

In conclusion, use maps with a purpose. Think of maps and objects similar to how let and const are used for our variables.

Building Components in React: Modals

faisal khan — Sat, 15 May 2021 08:41:25 +0000

A modal is a small UI element that will appear in the foreground of a website, usually triggered as a prompt for the user to do something

Let's build an ideal modal component in react from basics to advance

Creating a basic modal
Styling modal
Closing the modal
Hardware backbutton to close the modal
Making Modals More Usable And Accessible

1. Creating a basic modal

A basic modal involves creating an overlay and inside the overlay, we render the modal component which will include the children passed by the consumer.

const Modal = ({
  position, // set the position of modal on viewport
  isFullScreen,
  modalStyle,
  containerStyle,
  height,
  children,
}) => {
  return (
    <ModalOverlay style={containerStyle}>
      <ModalComponent
        position={position}
        isFullScreen={isFullScreen}
        customHeight={height}
        style={modalStyle}
      >
        {children}
      </ModalComponent>
    </ModalOverlay>
  );
};

Modal.defaultProps = {
  position: "center",
  isFullScreen: false,
  height: "auto",
  modalStyle: {},
  containerStyle: {},
};

Modal.propTypes = {
  position: PropTypes.oneOf(["center", "top", "bottom"]),
  isFullScreen: PropTypes.bool,
  height: PropTypes.string,
  modalStyle: PropTypes.shape({}),
  containerStyle: PropTypes.shape({}),
  children: PropTypes.node.isRequired,
};

2. Styling modal

For styling I have used styled-component

Since we have props such as position, height, isFullScreen we need to have conditional styling.

const ModalOverlay = styled.div`
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  opacity: 1;
  position: fixed;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgba(34, 34, 34, 0.8);
`;

const ModalComponent = styled.div`
  position: ${(props) =>
    props.position !== "center" ? "absolute" : "relative"};
  top: ${(props) => (props.position === "top" ? "0" : "auto")};
  bottom: ${(props) => (props.position === "bottom" ? "0" : "auto")};
  height: ${(props) => (props.isFullScreen ? "100%" : props.customHeight)};
  max-height: ${(props) => (props.isFullScreen ? "100%" : props.customHeight)};
  width: 100%;
`;

3. Closing the modal

There are three ways to close a modal

Pressing ESC key
Clicking outside of the modal body
Clicking on close icon or button on the modal body which closes the modal

const Modal = ({ close, children }) => {
  const modalRef = useRef();
  const modalOverlayRef = useRef();

const handleClose = () => {
    close();
  };

const handleClick = (event) => {
    if (modalRef.current && !modalRef.current.contains(event.target)) {
      handleClose();
    }
  };

const handleKeyDown = (event) => {
    if (event.keyCode === 13) {
      return handleClose();
    }
  };

useEffect(() => {
    const modalOverlayRefCurrent = modalOverlayRef.current;
    modalOverlayRefCurrent.addEventListener("click", handleClick);
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
      modalOverlayRefCurrent.removeEventListener("click", handleClick);
    };
  }, []);

return (
    <ModalOverlay ref={modalOverlayRef}>
      <ModalComponent ref={modalRef}>{children}</ModalComponent>
    </ModalOverlay>
  );
};

4. Hardware backbutton to close the modal

One of the most searched questions on modals is how to close the modal by clicking the hardware back button on a mobile device.

One solution which I found to be working well is to leverage react-router in order to achieve it

We usually use state variable to show/hide the modal something like this

const [isModalVisible, setIsModalVisible] = useState(false)

const handleShowModal = () => {
  setIsModalVisible(true)
}

return isModalVisible ? <Modal/> : null

We need to change the way we show/hide the modal component, instead of changing the state variable we will push a new route with a state variable like this

import { useHistory } from 'react-router-dom'

const historyHook = useHistory()

const handleShowModal = () => {
  history.push(window.location.pathname, { isModalVisible: true })
}

return historyHook.location.state.isModalVisible ? <Modal /> : null

Now when the user clicks on to show the modal a new route is pushed with the same pathname but with a state variable named isModalVisible

Then, when a user clicks on the back button it will remove the route from the history stack thus closing the modal or we can simply call the below function

window.history.back() // closes the modal

5. Making Modals More Usable And Accessible

Basic accessibility is a prerequisite for usability.

An accessible modal dialog is one where keyboard focus is managed properly, and the correct information is exposed to screen readers.

HTML and WAI-ARIA((Web Accessibility Initiative - Accessible Rich Internet Applications)) can be used to provide the necessary semantic information, CSS the appearance, and Javascript the behavior.

Three basics point to achieve accessibility in modal are:

-> Basic semantics has to be followed

The modal itself must be constructed from a combination of HTML and WAI-ARIA attributes, as in this example:

<div id="dialog" role="dialog" aria-labelledby="title" aria-describedby="description">
  <h1 id="title">Title</h1>
  <p id="description">Information</p>
  <button id="close" aria-label="close">×</button>
</div>

Note the dialog role, which tells assistive technologies that the element is a dialog.

The aria-labelledby and aria-describedby attributes are relationship attributes that connect the dialog to its title and description explicitly.

So when the focus is moved to the dialog or inside it, the text within those two elements will be read in succession.

-> Saving last active element

When a modal window loads, the element that the user last interacted with should be saved.

That way, when the modal window closes and the user returns to where they were, the focus on that element will have been maintained.

let lastFocus;

function handleShowModal () {
  lastFocus = document.activeElement; // save activeElement
}

function handleCloseModal () {
  lastFocus.focus(); // place focus on the saved element
}

-> Shifting focus from main content to modal

When the modal loads, the focus should shift from the last active element either to the modal window itself or to the first interactive element in the modal, such as an input element.

const modal = document.getElementById('modal-id');

function modalShow () {
   modal.setAttribute('tabindex', '0');
   modal.focus();
}

Conclusion

Component creation often involves multiple points to be kept in mind, right from creating a basic structure to solving common and complex problems such as accessibility and usability.

The article covers most parts of a modal and its uses and can easily be integrated into a live project.

Smart solutions to avoid JS problems and hacks

faisal khan — Sat, 05 Dec 2020 12:51:55 +0000

In this day and age being a developer and being in a fast-paced environment we have to deliver as quickly as possible.

While trying to deliver quickly, we end up building functionality in an un-optimised way. We start using the first solution on stack-overflow which might not always be the most efficient or correct solution and may even be a hack.

I have listed down some of the inefficient code snippets and hacks that i have seen in multiple codebases and the correct way to tackle those. Let's Begin!

1. Native way to reset the window scroll position when navigating between web pages

Today many modern browsers have a tendency to remember the scroll position when navigation between pages on a website, while sometimes that can be very helpful, but at the same time it can cause a problem as well.

When you want to reset the page data or make a API call every time the page is loaded to keep the page updated, this can cause major problems.

Since the browser will always scroll to the previous scroll position and not on the top as expected.

Now in multiple codebases I have seen this handled using window.scrollTo(0,0) on the page mounts. It's a bit laggy since it works after the first paint has happened.

But if we can disable the functionality of the browser to remember the scroll position, then we don’t need to add the hack. That's it.

if (window.history.scrollRestoration) {
  window.history.scrollRestoration = 'manual'; //default is 'auto'
}

2. Easy and precise way to validate a URL without regex

I think one of the most searched questions and the most answered one is how to validate a basic URL in JS. And I have seen many different types of regex, string matching solutions for it.

But there is a simpler solution using new native URL constructor.

const validateURL = url => {
  try {
   new URL(url)
   return true
  } catch {
   return false
  }
}

3. Always add throttle or debounce on event listeners like scroll or resize

Whenever you’re listening for events on the page, it’s important to make sure that the event listeners don’t get overwhelmed with processing incoming requests.

Otherwise they can quickly become a bottleneck and cause an unnecessary performance hit.

Where this often turns into an issue is when you have listeners that fire off events in rapid succession, like for scroll on mouse-move or keydown events.

Since scroll events, for instance, can fire off at such a high rate, it’s critical to make sure that the event handler isn’t doing computationally expensive operations. Because if it is, it will be all the more difficult for the browser to keep up.

Throttled Version:

const throttle = (fn, wait) => {
    let time = Date.now()
    return () => {
        if ((time + wait - Date.now()) < 0) {
            fn()
            time = Date.now()
        }
    }
}

const cbFuncOnScroll = () => {
    console.log('scroll')
}

const throttledfunc = throttle(cbFuncOnScroll, 200)

document.addEventListener('scroll', throttledfunc)

Debounced Version:

const debounce = (func, delay) => {
    let timeout = ''
    return function() {
        clearTimeout(timeout)
        const context = this
        const args = arguments
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, delay || 500)
    }
}

const cbFuncOnScroll = () => {
    console.log('scroll')
}

const debouncedFunc = debounce(cbFuncOnScroll, 200)

document.addEventListener('scroll', debouncedFunc)

Bonus: Debounce with Window RequestAnimation Frame (Best)

const debounceUsingAnimationFrame = (fn, ...args) => {
    // Setup a timer
    let timeout
    // Return a function to run debounced
    return () => {
        // Setup the arguments
        const context = this

        // If there's a timer, cancel it
        if (timeout) {
            window.cancelAnimationFrame(timeout)
        }

        // Setup the new requestAnimationFrame()
        timeout = window.requestAnimationFrame(() => {
            fn.apply(context, args)
        })
    }
}

const cbFuncOnScroll = () => {
    console.log('scroll')
}

const debouncedAnimationFrameFunc = 
        debounceUsingAnimationFrame(cbFuncOnScroll, 200)

document.addEventListener('scroll', debouncedAnimationFrameFunc)

Protip: document.addEventListener('scroll', cbFuncOnScroll, { passive: true }), here passive which is set to true will tell the browser that you just want to do your stuff and you are not gonna call preventDefault. Here is the video showing the performance improvement caused by this property - https://youtu.be/NPM6172J22g

4. Cross browser styling can be achieved from CSS

Cross browser development is one of the most important skills that a Frontend developer should have, and we have always been there when we might need to tweak the styling of a component on a different browser, due to incompatibility of certain css properties.

What do you do to achieve this, the most common solution I have seen is via JS where we extract the UserAgent or Platform and based upon that, we apply styles on the component.

But is that the correct and only way to do it ?

Here is my solution

Safari target CSS query

@supports (-webkit-touch-callout: none) {
   // add styles here to override for safari
}

Mozilla target CSS query

@-moz-document url-prefix() {
   // add styles here to override for mozilla firefox
}

IE11 target CSS query

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  // add styles here to override for IE11
}

This is a simple way to override or add styles for specific browsers without JS.

5. Lazy render the components using CSS

We have worked on large components which consist of multiple small components, among those small components not every component is actually visible inside the viewport initially.

But only visible when a user scrolls, but we normally load all the components and render them on the viewport.

A good JS solution here is to use IntersectionObserver API to handle the rendering of the component only when they are in focus. This solution is a good one since Observers work on a different thread and not hamper the performance on the main thread.

But what if i tell you there is a better solution to it without using JS but only CSS.

Here comes content-visibility property which enables the user agent to skip an element's rendering work, including layout and painting, until it is needed.

Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster.

It also allows for faster interactions with the on-screen content. Pretty neat.

.element {
  content-visibility: auto;
}

Protip: Lots of detailed explanation on content-visibility - https://web.dev/content-visibility/

6. Avoid code redundancy when adding try catch to API side-effect calls

The most common task we always perform when developing features is to make API calls in order to fetch data to display it on the page.

But since it's a side-effect and we have dependency on other services.

We tend to always wrap our API calls inside a try and catch statement to be on the safer side and handle errors gracefully.

But don’t you feel it adds too much boiler-plate code to every API call that we make ?

Here is a simple promise based solution to avoid excessive use of try-catch block

const sideEffectAPIWrapper = (promise) =>
    promise
    .then(result => [result, null])
    .catch(err => [null, err])

const sampleFunc = async () => {
    const [result, error] = await sideEffectAPIWrapper(callAPI())
    if (result) {
        console.log('success')
        return
    }
    if (error) {
        console.log('failure')
        return
    }
}

Conclusion

All the points I have mentioned are problems that I have faced and seen in development of web applications. I am sure you might have also encountered these points in your codebases.

One simple way to avoid hacks and redundancy is to ask yourself can there be a better alternate way to achieve this functionality.

This simple question when you ask yourself while writing or reviewing the code will always help you make a good decision and avoid future problems on performance and code efficiency in your codebase.

That's all folks, adios amigos

Common Mistakes Made by Beginners in React Hooks

faisal khan — Sun, 09 Aug 2020 09:33:34 +0000

Introduction

Since the introduction of react-hooks in Reactv16.8, it has made the life of a react developer simpler than it has ever been with class components.

Problems with class components:

Confusing (both humans and machines, especially at binding and this keyword).
Lifecycle methods, logic spread over different lifecycle methods.
Hard to test compared to functional components.
Compiled code size and compile time.

All the above-mentioned problems are solved by react-hooks but they come up with their own set of problems.

Since design patterns and best practices are not explicitly mentioned in react hook documentation, mistakes are made by beginners during the initial phase of using hooks.

Familiarity with react hooks will help you understand the concept better and is a prerequisite for the article.

                Enough of theory, Lets Begin.

1. Avoid memoization on every single component

React.memo() is a great tool to memoize functional components.

It prevents components from rendering when previous and the next props are equal.

If react memo is not use correctly it can even hamper the application performance. Use React.memo() wisely.

When you wrap any functional component with a memo, react performs two operations:

Invokes the comparison function to determine whether the previous and next props are equal or not.
Based props comparison react perform the diff of previous and current render results.

Since the props of the component are react nodes, it will always render, hence memo here just creates a comparison overhead before re-rendering happens.

Similarly, when props are nested objects or arrays they will always cause re-render.

So where is it useful?

Here the props passed are string and passing the same props will always return the memoized react component because the comparison is straightforward and shallow.

Protip: Avoid adding memo on small components, since re-rendering will be faster then memoizing.

2. Avoid excessive use of useCallback hook

A common misconception is that useCallback prevents "function creation during render". It doesn’t.

What useCallback does is memoize the returned function object based on the provided dependencies.

This means that given the same dependencies (compared by reference) it returns the same function object.

If the component or hook to which you’re passing this useCallback()‘ed function doesn’t care about whether or not it has been given a new function.

So now instead of just creating a new function, you’ve now:

created a new function, created a new array of dependencies.
invoked a function (useCallback), and caused React to compare equality of the dependencies.
store the function and a new set of dependencies into memory.

This is more expensive than just creating and passing the new function as a prop - and often for no reason - the code would have functioned exactly the same with or without the useCallback!.

Protip: Here's an in-depth analysis of when and when not to use useCallback - https://royi-codes.now.sh/thousand-usecallbacks/

3. useRef hook has more usage than just to store DOM reference

useRef hook is used to store the DOM reference throughout the component's lifecycle

It is mutable and also does not changes on component re-render.

In class components, we have variables declared in the constructor which can be used throughout the component and will not change during re-render

If we try to achieve the same in react hooks by

count will always be 1 after each render. The problem here is that a new count variable will be created for every render.

But how can we achieve the same with hooks?

                    useRef hook to the rescue.

Here useRef hook is created with an initial value of 0, it is mutable and does not reset on re-render.

4. Always use hooks at the top level of your react component

Don’t call Hooks inside loops, conditions, or nested functions.

By following these rules, you ensure that hooks are always called in the same order each time a component renders.

That’s what allows React to correctly preserve the state of hooks between multiple useState and useEffect calls.

Let’s make a Biodata component which will have two states:

name
age

These states will have default truthy values, we’ll make use of the useEffect hook to print the name and age values.

function Biodata() {
  // 1. Use the name state variable
  const [name, setName] = useState('Hello world');

  // 2. Use an effect for printing the name
  useEffect(() => console.log(name) );

  // 3. Use the age state variable
  const [age, setAge] = useState(24);

  // 4. Use an effect for printing the age
  useEffect(() => console.log(age) );

  return (
   ... // logic to set name and age to falsy values
  )
}

Execution Stack:

[
  'hello world',
  () => console.log('hello world'),
  24,
  () => console.log(24)
]

But what happens if we put a hooks call inside a condition?

If the order of our hooks changes (which can be possible when they are called in loops or conditionals), React will have a hard time figuring out how to preserve the state of our component.

function Biodata() {
  // 1. Use the name state variable
  const [name, setName] = useState('Hello world');

  // 🔴 We're breaking the first rule by using a Hook in a 
  //    condition

  // 2. Use an effect for printing the name
  !!name && useEffect(() => console.log(name) );

  // 3. Use the age state variable
  const [age, setAge] = useState(24);

  // 🔴 We're breaking the first rule by using a Hook in a 
  //    condition

  // 4. Use an effect for printing the age
  !!age && useEffect(() => console.log(age) );

  return (
   ... //logic to set name and age to falsy values
  )
}

The !!name and !!age condition is true on the first render, so we run this Hook.

However, on the next render if the user set's the name or age from input taken by the user to null or any falsy value.

Now the Execution Stack is :

[
  '',
  0,
]

We have skipped two useEffect hooks during rendering, the order of the Hook calls becomes different, leading to bugs.

This is why hooks must be called on the top level of our components.

If we want to run an effect conditionally, we can put that condition inside our hook.

Conclusion:

Hooks have come in as a boon for react developers, but if you don't use them correctly they can quickly become a curse.

When creating an application on a larger scale, these small guidelines help achieve a scalable application for the future.

Instagram Like Play/Pause for Videos using React.js

faisal khan — Tue, 07 Jul 2020 09:36:35 +0000

A study states that users browsing the internet have short attention spans.

Videos allow users to consume more content, at a faster pace. Users are much more apt to engage with videos than with static text.

Instagram has videos that play when in focus and pause when goes out of focus. I have been working on a similar feature to play and pause videos but for the web.

In this article, I will help you to achieve this functionality and on native and any third-party web video player.

Here, we will be using a youtube video player. But, it will work with any video player.

TLDR; Here is the code sandbox working example:

Tech used

I will be using Youtube API with React.js to solve the problem.

It can also be achieved by other JS libraries or frameworks.

Youtube API:
It helps load Youtube iframe on the DOM.
The iframe plays a youtube video and Youtube API gives the power to handle multiple video controls.

Ref:
[https://developers.google.com/youtube/iframe_api_reference]

React.js: It's one of the best libraries for frontend development.

Ref: [https://reactjs.org/]

                  Enough Talks Lets Code

Steps:

1] Loading Youtube Script on DOM:

I have created a custom hook named useYoutubeScript which loads the script in our DOM and gives us a callback when done.

Please follow the comments in the code.


import { useState, useEffect } from "react";

// Iframe API Link
const YOUTUBE_PLAYER_API = "https://www.youtube.com/iframe_api";

export default function useYoutubeScript(scriptId) {
  // Keeping track of script loaded and error state
  const [state, setState] = useState({
    loaded: false,
    error: false
  });

  useEffect(
    () => {
      // if youtube is already available in window return.

      if (window.YT) {
        return [true, false];
      }

      // Create script tag, add ID and source to it.
      const script = document.createElement("script");
      script.id = scriptId;
      script.src = YOUTUBE_PLAYER_API;

      // Youtube promotes adding the script at the top.
      const firstScriptTag = document.getElementsByTagName("script")[0];
      firstScriptTag.parentNode.insertBefore(script, firstScriptTag);

      /* 
         Youtube API fires 'onYouTubeIframeAPIReady' when API 
         is loaded
      */

      window.onYouTubeIframeAPIReady = () => {
        // fire when script is loaded
        onScriptLoad();
      };

      const onScriptLoad = () => {
        setState({
          loaded: true,
          error: false
        });
      };

      const onScriptError = () => {
        setState({
          loaded: true,
          error: true
        });
      };

      // Listen when script has caused any error
      script.addEventListener("error", onScriptError);

      // Remove event listeners on cleanup
      return () => {
        script.removeEventListener("error", onScriptError);
      };
    },
    [scriptId] // Only re-run effect if script src changes
  );

  return [state.loaded, state.error];
}

2] Embedding Youtube Iframe and Video player on DOM:

For embedding a youtube player we have copy video ID from youtube.

After that, we have to pass the video ID to the youtube video player instance.

You can read more about the youtube player parameters https://developers.google.com/youtube/player_parameters

Please follow the comments in the code.

import React, { useRef, useEffect } from "react";
import useYoutubeScript from "./useYoutubeScript";

export default function App() {
  const [loaded, error] = useYoutubeScript("sample-youtube");
  const isPlayerReady = useRef(false);
  const player = useRef(null);
  const isPlayerAlreadySet = player && player.current;
  const hasYoutubeInWindow = typeof window.YT === "object" && window.YT.Player;

  useEffect(() => {
    const playerObject = player.current;
    // destroy player when unmounting
    return () => playerObject && playerObject.destroy && playerObject.destroy();
  }, []);

  useEffect(() => {
    /* This useEffect runs when youtube script is loaded on 
       DOM.
    */
    if (!isPlayerAlreadySet && hasYoutubeInWindow) {
      /* create a Youtube player and attach it to a div with 
         ID, apply player parameters and callback events
      */
      player.current = new window.YT.Player("youtube-iframe-id", {
        videoId: "PvtI_71FrF8",
        width: 400,
        height: 350,
        events: {
          onReady: onPlayerReady
        }
      });
    }
  }, [loaded]);

  if (!loaded || error) {
    // show loading when loaded is false or error is true
    return <div>Loading...</div>;
  }

  // this function is fired when player is ready for playing
  const onPlayerReady = () => {
    if (isPlayerReady && !!isPlayerReady.current) {
      return;
    }
    /* 
       It's important to mute the video before playing 
       since the browser does not allow autoplay with 
       sound on
    */
    player.current.mute && player.current.mute();
    // set player ready to true
    isPlayerReady.current = true;
  };

  return (
    <div className="App">
      <div>
        <div id="youtube-iframe-id" />
      </div>
    </div>
  );
}

3] Play and Pause Video based on Visibility:

Gone are the days we used to have scroll listener and complex calculation to detect if the component is in focus or not.

We have a new champ to help us out which is IntersectionObserver.

In short, it enables you to detect the visibility of an element, i.e. if it’s in the current viewport, and also the relative visibility of two elements in relationship to each other.

It does not run on the main thread hence does not hamper performance like a scroll listener used to.

Same as before we will be having a custom hook to detect the visibility of the component when a reference of the component is passed as a parameter to the hook.

The hook is named useIntersectionObserver.

Nowadays, most browsers support intersection-observer but still, there are some unsupported ones.

No worries we have you covered we have the polyfill for those browser's [https://www.npmjs.com/package/intersection-observer]

Please follow the comments in the code.

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

export default ({ root = null, rootMargin = '0px 0px 0px 0px', threshold = 0 }) => {
        // check if it running on client
    const isClient = typeof window === 'object'
    const [entry, updateEntry] = useState({})
    const [node, setNode] = useState(null)
    let observer = null

    if (isClient) {
        /*
           the root prop is of the parent element of the 
           component, if nothing is passed it will be the 
           viewport, the threshold is visibility percentage
        */
        observer = useRef(
            new window.IntersectionObserver(([intersectionEntry]) => updateEntry(intersectionEntry), {
                root,
                rootMargin,
                threshold
            })
        )
    }

    const unObserve = () => {
        const { current: currentObserver } = observer
        currentObserver.disconnect()
    }

    useEffect(() => {
        if (!isClient) {
            return false
        }
        const { current: currentObserver } = observer
        currentObserver.disconnect()

        if (node) currentObserver.observe(node)

        return () => currentObserver.disconnect()
    }, [node])

    return [setNode, entry, unObserve]
}

Usage

const [ref,entry] = useIntersectionObserver({ threshold: 0.8 })
// Should be 80% in the viewport 

if(entry.isIntersecting){
// returns when its equal to or more than 80% in viewport
 playVideo()
} else {
// when less than 80% in viewport
 pauseVideo()
}

<div ref={ref} />

Conclusion:

Creating a feed for the user includes multiple types of multimedia components like Images and Videos, where video auto-playing saves us a client interaction.

Intersection observer has solved multiple problems like lazy loading components, but video play pause is another really good use case for it.

Play and pause functionality can be achieved on any video player even on the native HTML5 video component.

Here is the code sandbox link -
https://codesandbox.io/s/playpauseyoutube-938i4

DEV Community: faisal khan

Building Components in React: Accordion

Table Of Contents

1. Creating a basic accordion

Output

2. Animating the accordion

3. Making Accordion Accessible

Conclusion

Why to use Maps over Objects in JS ?

Table Of Contents

1. Problems I faced while working with objects:

Only string or symbol could be used as key.

No proper helper methods to work with objects.

Own object properties might collide with property keys inherited from the prototype (e.g. toString, constructor, etc).

Deleting keys causes problem in large objects.

2. Solution: Using Maps Data Structure

3. Comparison: Objects and Maps

4. Practical Example

5. Problems in Maps

Maps is not here to replace objects

Maps are not serializable

6. Conclusion

Building Components in React: Modals

Table Of Contents

1. Creating a basic modal

2. Styling modal

3. Closing the modal

4. Hardware backbutton to close the modal

5. Making Modals More Usable And Accessible

-> Basic semantics has to be followed

-> Saving last active element

-> Shifting focus from main content to modal

Conclusion

Smart solutions to avoid JS problems and hacks

1. Native way to reset the window scroll position when navigating between web pages

2. Easy and precise way to validate a URL without regex

3. Always add throttle or debounce on event listeners like scroll or resize

4. Cross browser styling can be achieved from CSS

5. Lazy render the components using CSS

Protip: Lots of detailed explanation on content-visibility - https://web.dev/content-visibility/

6. Avoid code redundancy when adding try catch to API side-effect calls

Conclusion

Common Mistakes Made by Beginners in React Hooks

Introduction

Problems with class components:

Familiarity with react hooks will help you understand the concept better and is a prerequisite for the article.

1. Avoid memoization on every single component

If react memo is not use correctly it can even hamper the application performance. Use React.memo() wisely.

Protip: Avoid adding memo on small components, since re-rendering will be faster then memoizing.

2. Avoid excessive use of useCallback hook

Protip: Here's an in-depth analysis of when and when not to use useCallback - https://royi-codes.now.sh/thousand-usecallbacks/

3. useRef hook has more usage than just to store DOM reference

4. Always use hooks at the top level of your react component

Conclusion:

Instagram Like Play/Pause for Videos using React.js

Tech used

Steps:

1] Loading Youtube Script on DOM:

2] Embedding Youtube Iframe and Video player on DOM:

3] Play and Pause Video based on Visibility:

Usage

Conclusion: