DEV Community: Tasfia Islam

A Guide To Web Accessibility Best Practices

Tasfia Islam — Mon, 06 May 2024 07:50:54 +0000

Web Accessibility is about removing barriers and providing equal access to digital technologies to all users creating an inclusive digital age for people with disabilities.
Let's learn how can we make our websites more inclusive and accessible to all.

1. Semantic HTML:

Semantic HTML such as <button>, <input>, <form>, <nav>, <header>, <footer> clearly describe what they mean to both the browser and developer. These play a crucial role in making your website accessible to people who rely on assistive technologies such as screen reader; whereas non-semantic elements like <div> and <span> tell us nothing about the content making it confusing for users relying on assistive technologies.
Embracing semantic HTML, makes your code cleaner and logical with enhanced SEO and improved Accessibility giving a positive user experience for everyone who interacts with your website.

2. Alt Text for Images:

Not adding Alt text to images can be disappointing for people with visual impairment who are navigating your website through assistive technologies. Moreover, alt text provides additional context for images creating better user experience and also improves the search engine optimization (SEO) of the website.

3. Add Keyboard Navigation:

Keyboard navigation ensures that people who cannot use a mouse and also people who travel with laptop can still have the best user experience. Make sure to maintain tab navigation for all interactive elements such as buttons, links, menus etc along with keyboard friendly actions like button click. Adding visible focus indicator, highlights are also helpful for user experience.

4. Contrast & Color Accessibility:

Contrast and color accessibility is crucial for individuals with visual impairment and color blindness. Contrast and color accessibility requirements should follow Web Content Accessibility Guidelines (WCAG) which suggest a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

5. Form Accessibility:

Accessible forms are easier to use for all users despite the complexity of forms providing better understanding of the form and how to complete it.
Some key considerations and best practices for forms are:

Using <label> to associate labels with form controls such as input fields, radio buttons and checkboxes.
Group and associate related form controls using <legend> and <fieldset>. This is important for complex forms with multiple sections.
Validate form using attributes like required , maxLength etc.
Provide proper instructions to the form areas and notifications upon submission.
Use proper keyboard navigation as mentioned before.

6. Focus Management:

People using a screen reader, keyboard or emulated keyboard should be able to use the interface without any difficulty.
Focus accessibility can be achieved by ensuring tab index and focus order, using custom css style for focus, trapping keyboard focus within a component, avoiding keyboard shortcuts etc. Read more

7. Aria Roles and Attributes:

ARIA (Accessible Rich Internet Applications) provide additional information regarding the element's purpose and functionality to assistive technologies. ARIA roles and labels are effective because these

help screen readers to grasp the web application better and make it more understandable for users with disabilities.
give purpose and meaning to HTML elements and the contents with role="button", role="alert" etc.
provide more information about the state, properties or behavior of the elements. Examples - aria-expanded, aria-hidden

As web developers, its our responsibility to ensure the fundamental principle of inclusivity and equality on the internet. Accessibility benefits all, not only people with disabilities; it enhances user experience for everyone and anyone can access and interact with our website easily.

Understanding NestJS Modules

Tasfia Islam — Sat, 19 Aug 2023 18:58:54 +0000

What is a module?

In NestJS, a module is a class which helps to organize other building blocks of the application like components, services etc. maintaining modularity with separate concerns.

Modules serve several key purposes in NestJS development.

Each module provides encapsulation and isolation to a closely related set of capabilities. This isolation helps to avoid naming conflicts and provides an effective way to organize the components.

A module class define providers and inject them into other components leveraging Dependency Injection.

Modules create way of reusability and scalability across the components and across projects and can also be nested within other modules creating a hierarchical structure.

An example module

Let's create a basic Module.

import { Module } from '@nestjs/common';
import { UserController } from './user.controller';
import { UserService } from './user.service';

@Module({
  controllers: [UserController],
  providers: [UserService],
  exports: [UserService],
})
export class UserModule {}

In this example UserModule encapsulates the UserService and UserController.

Seems confusing? Let's break down the parts of the module.

Breakdown of a module

decorators
We use the @Module decorator to create a module which takes a single object defining the module's properties.

providers
The provider that can be shared across other parts of the application and handles specific business logic and consists of service and other reusable components.

controllers
The set of Controllers which define end points and route handlers.

imports
The list of imported modules that export the providers required in this module.

exports
Modules export components available to be used outside the module.

Conclusion

Modules are the backbone of a reusable and well structured NestJS application enabling us to create well-organized, scalable and modular codebases. This was a brief introduction to modules.

Implement data fetching with urql and Next.js

Tasfia Islam — Sat, 08 Jul 2023 17:54:50 +0000

Urql

URQL is a versatile GraphQL client library which is a simplistic and lightweight alternative to other heavy client libraries such as Apollo or Relay. It can handle content heavy pages through Document caching and dynamic and data-heavy apps through Normalized caching.

Installation

Installing urql with Next JS is very simple with your choice of package manager. We also need to install graphql package as a peer dependency.

yarn add urql
or
npm install urql

yarn add urql graphql
or
npm install graphql

Set up the client

urql gives us a Client class and we use it to create a new instance of the client with our API endpoint as the url. We create a file src/graphQL/client.ts to write the following code.

import { createClient } from "urql";

// YOUR API URL
const API_BASE_URL = "http://localhost:3000/graphql";

const client = createClient({
  url: API_BASE_URL,
});

export { client }

Provide the client

We need to wrap our component with Provider to use the client we previously defined so that every component within it can make use of GraphQL queries. We do this in out pages/_app.tsx component.

import { Provider as URQLProvider } from "urql";
import { client } from "../graphQL/client";

const App = () => {
  return (
    <URQLProvider value={client}>
      {/* Children component go here */}
    </URQLProvider>
  );
};

export default App;

Run a query

The useQuery hook of urql can be used to fetch data from a defined query. Let us first implement a simple query in a separate file src/graphQL/queries/profile.ts

import { gql } from "urql";

export const GET_PROFILE_QUERY = gql`
  query Profile {
    me {
      id
      username
      createdAt
    }
  }
`;

We can now use this query to fetch defined field values with the useQuery hook in a component and call this component in our app component.

import { useQuery } from "urql";
import { GET_PROFILE_QUERY } from "graphQL/queries/auth";
import { TextLoader } from "ui/components/CustomLoaders";
import ErrorMessage from "ui/components/ErrorMessage";

const Profile = () => {
  // useQuery hook
  const [result, reexecuteQuery] = useQuery({
    query: GET_PROFILE_QUERY,
  });
  const { data, fetching, error } = result;

  // Handle data fetching state with loader component
  if (fetching) return <TextLoader />;
  // Show error in the ui
  if (error) return <ErrorMessage />;

  // Show the received data
  return (
    <div>
      <span>{data.me.username}</span>
      <span>{data.me.createdAt}</span>
    </div>
  );
};

export default Profile;

Here, we have implemented a simple query to fetch data with graphQL.
The fetching state indicates when data is still being fetched and error contains data fetching error from API or any GraphQLError and data returns the data received from the query call.
The useQuery hook returns a tuple and also accepts parameters or variables.

React js drag and drop todo list

Tasfia Islam — Sat, 13 May 2023 18:19:07 +0000

In this blog I'll be showing how to build a draggable todo list with React beautiful dnd. If you're not familiar with React beautiful dnd, it's an amazing library to implement drag and drop functionality in your React application. In this step by step tutorial we'll be building a simple todo list with the ability to reorder items and drag and drop items to another column. Let's start by setting up a basic React app and the necessary components from React beautiful dnd.

Installation

Let us first install our react app with vite, then install tailwind css framework.
Next install react-beautiful-dnd for our drag and drop functionality.

Components

Let's walk through our components.
Create a droppable component to work with React Strict mode enabled.
details

Droppable Component



import { useEffect, useState } from "react";
import { Droppable, DroppableProps } from "react-beautiful-dnd";

const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    const animation = requestAnimationFrame(() => setEnabled(true));

    return () => {
      cancelAnimationFrame(animation);
      setEnabled(false);
    };
  }, []);

  if (!enabled) {
    return null;
  }

  return <Droppable {...props}>{children}</Droppable>;
};

export default StrictModeDroppable;

The Droppable component defines a drop zone for draggable items.
Learn more about Droppable

Draggable Card



import { Draggable } from "react-beautiful-dnd";

interface CardProps {
  id: number;
  title: string;
  draggableId: string;
  index: number;
}
const Card = ({ title, draggableId, index }: CardProps) => {
  return (
    <Draggable draggableId={draggableId} index={index}>
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          className={`${
            snapshot.isDragging ? "bg-gray-100" : "bg-white"
          } px-2 py-4 font-medium w-full h-24 shadow-md shadow-blue-300 rounded-md`}
        >
          {title}
        </div>
      )}
    </Draggable>
  );
};

export default Card;

We have a card component to show each task for our todo list which is wrapped in a Draggable component which is used to define a draggable item in a drag-and-drop context. It requires a draggableId and index to be passed as props. Learn more about Draggable

Column Component



import Card from "./card";

interface ItemsColumnProps {
  columnTitle: string;
  items: { id: number; title: string }[];
}

const ItemsColumn = ({ columnTitle, items }: ItemsColumnProps) => {
  return (
    <div
      className="h-[392px] scrollbar-thin scrollbar-thumb-blue-700 
    scrollbar-track-blue-300 overflow-y-auto
      p-4 rounded-md border border-blue-300"
    >
      <p className="inline-block py-1 px-2 text-lg font-semibold bg-blue-300 rounded-md">
        {columnTitle}
      </p>
      <div className=" pt-4 flex flex-col gap-y-3">
        {items &&
          items.length > 0 &&
          items.map((item, index) => (
            <Card
              key={item.id}
              draggableId={item.id.toString()}
              index={index}
              id={item.id}
              title={item.title}
            />
          ))}
      </div>
    </div>
  );
};

export default ItemsColumn;

Define interfaces and initial data



interface ITodoItem {
  id: number;
  title: string;
}

interface ColumnItem {
  id: number;
  title: string;
  items: {
    id: number;
    title: string;
  }[];
}

type ColumnType = { [key: string]: ColumnItem };

const initialTodoItems = [
  {
    id: 1,
    title: "Go for a walk",
  },
  {
    id: 2,
    title: "Take a nap",
  },
  {
    id: 3,
    title: "Read a book",
  },
  {
    id: 4,
    title: "Work out",
  },
  {
    id: 5,
    title: "Learn something new",
  },
];

const initialColumnData = {
  todoColumn: {
    id: 1,
    title: "To do",
    items: [...initialTodoItems],
  },
  doneColumn: {
    id: 2,
    title: "Done",
    items: [],
  },
};

Render the list component



import { useState } from "react";
import { DragDropContext, DropResult } from "react-beautiful-dnd";
import ItemsColumn from "./itemsColumn";
import Droppable from "./droppable";

const TodoList = () => {
  const [columnData, setColumnData] = useState<ColumnType>(initialColumnData);

const onDragEnd = (result: DropResult) => {
}

  return (
    <div className="w-[800px] mx-auto">
      <p className="py-12 text-3xl text-center font-semibold text-blue-800">
        Todo List
      </p>
      <div className="grid grid-cols-2  gap-x-4 justify-between">
        <DragDropContext onDragEnd={onDragEnd}>
          {Object.entries(columnData).map(([id, column]) => (
            <Droppable droppableId={id} key={id}>
              {(provided) => (
                <div {...provided.droppableProps} ref={provided.innerRef}>
                  <ItemsColumn
                    columnTitle={column.title}
                    items={column.items}
                  />
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          ))}
        </DragDropContext>
      </div>
    </div>
  );
};

export default TodoList;

DragDropContext wraps a Droppable component and enables drag drop functionality. Learn more about DragDropContext

Functions for re ordering and dropping elements



  const reorder = (
    list: Array<ITodoItem>,
    startIndex: number,
    endIndex: number
  ) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);

    return result;
  };

  const onDragEnd = (result: DropResult) => {
    const { source, destination } = result;

    // dropped outside the list
    if (!result.destination) {
      return;
    }

    const sInd = source.droppableId;
    const dInd = destination?.droppableId;

    // REORDER: if source and destination droppable ids are same
    if (dInd && sInd === dInd) {
      const column = columnData[sInd];
      const reorderedItems = reorder(
        column.items,
        source.index,
        destination.index
      );

      setColumnData({
        ...columnData,
        [dInd]: {
          ...column,
          items: reorderedItems,
        },
      });
    }

    // DROP: if source and destination droppable ids are different
    if (dInd && dInd !== sInd) {
      const sourceColumn = columnData[sInd];
      const desColumn = columnData[dInd];

      const itemToDrop = sourceColumn.items.find(
        (item) => item.id.toString() == result.draggableId
      );

      //INSERT: dragged item to another column
      if (itemToDrop) {
        const sourceColumnItems = Array.from(sourceColumn.items);
        const destColumnItems = Array.from(desColumn.items);

        sourceColumnItems.splice(result.source.index, 1);
        destColumnItems.splice(result.destination.index, 0, itemToDrop);

        setColumnData({
          ...columnData,
          [sInd]: {
            ...sourceColumn,
            items: sourceColumnItems,
          },
          [dInd]: {
            ...desColumn,
            items: destColumnItems,
          },
        });
      }
    }
  };

onDragEnd function checks if the item being dragged is dropped in a valid droppable and reorders or drops upon checking the source and destination droppableId.

What we have built 👇

Create a datepicker in React js with 'react-datepicker'

Tasfia Islam — Sat, 15 Apr 2023 16:00:18 +0000

React Datepicker is reusable datepicker component for react. Let's see how we can use and style it with custom style and additional icon.

Install the package

Checkout the npm package. You can install it via npm npm install react-datepicker --save or via yarn yarn add react-datepicker.

Import the datepicker component and include the CSS file from the package



import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

Implementing Datepicker

Create ref for the datepicker component and state for date range; destruct fromDate and toDate from dateRange.



const datepickerRef = useRef(null);

const [dateRange, setDateRange] = useState<Array<Date | null>>([null, null]);
  const [fromDate, toDate] = dateRange;

Pass the fromDate, toDate values and the ref to the Datepicker component.



   <DatePicker
     startDate={fromDate}
     endDate={toDate}
     selectsRange
     shouldCloseOnSelect={true}
     onChange={handleDateRange}
     placeholderText="Choose date range"
     isClearable={true}
     ref={datepickerRef}
     dateFormat={"dd/MM/yyyy"}
    />

Add the handler function to set dates to our date range state which is passed to the onChange function



const handleDateRange = (dates: Array<Date | null>) => {
    setDateRange(dates);
  };

Add custom style and pass it to the className prop. I am using tailwind CSS in my code.



const customDateRangeStyle = `border border-blueBorder rounded-[10px] pl-2 pr-1 focus:outline-none text-[14px] font-semibold text-[#00156A]  border-[#BDD4FF] font-montserrat placeholder:font-[600] w-[230px] h-[48px] mb-0 bg-white w-full placeholder:text-[#D2D2D2]`;

<DatePicker
  startDate={fromDate}
  endDate={toDate}
  selectsRange
  shouldCloseOnSelect={true}
  className={customDateRangeStyle}
  onChange={handleDateRange}
  placeholderText="Choose date range"
  isClearable={true}
  ref={datepickerRef}
  dateFormat={"dd/MM/yyyy"}
 />

Let's add a custom icon to our Datepicker component.



<div className="relative cursor-pointer">
 <DatePicker
   startDate={fromDate}
   endDate={toDate}
   selectsRange
   shouldCloseOnSelect={true}
   className={customDateRangeStyle}
   onChange={handleDateRange}
   placeholderText="Choose date range"
   isClearable={true}
   ref={datepickerRef}
   dateFormat={"dd/MM/yyyy"}
  />         
  <span
   className="absolute right-2 top-1/2 transform -translate-y-1/2"
   onClick={handleOpenDatepicker}
  >
    <CalendarIcon />
  </span>
</div>

Handle opening date-picker by clicking on the icon ```javascript

const handleOpenDatepicker = () => {
const datepickerElement: any = datepickerRef.current;
if (datepickerElement) {
datepickerElement.setFocus(true);
}
};


### Let's see what we have built :smiley: :point_down:


![Datepicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3cn3eie8klsviqq1ccw.png)

Form validation with react hook form and yup

Tasfia Islam — Sun, 22 Jan 2023 13:18:10 +0000

Installation

Let's install the code dependencies

npm install react-hook-form @hookform/resolvers yup

Implementation

Create the schema for validation

import * as yup from "yup";

const Schema = yup
  .object({
    name: yup.string().required("Name is required."),
    model: yup.string().required("Model name is required."),
  })
  .required();

Get the following from the useForm() hook

import { FieldValues, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(Schema),
  });

Let's create a simple form

<form
    className="bg-white"
    onSubmit={handleSubmit(onSubmitHandler)}
    encType="multipart/form-data"
    id={formId}
  >
    <div className={formInputClass}>
      <Label label="Product Name" htmlFor="name" isRequired />
      <input
        className={customFieldStyle}
        id="name"
        {...register("name")}
        type="text"
        placeholder="Enter the product name"
      />
      <FormErrorText errorMsg={errors?.name?.message} />
    </div>

    <div className={formInputClass}>
      <Label label="Model" htmlFor="model" isRequired />
      <input
        className={customFieldStyle}
        id="model"
        {...register("model")}
        type="text"
        placeholder="Enter the model name"
      />
     <FormErrorText errorMsg={errors?.model?.message} />
    </div>
  </form>

Our submit handler which also resets our form after submission:

const onSubmitHandler = (values: FieldValues) => {
    console.log({ values});
    // after submit code
    reset();
  };

Our form looks like this

When we submit without filling out required fields we show these
validation messages:

Using GraphQL Codegen with Typescript and urql

Tasfia Islam — Thu, 13 Oct 2022 05:46:42 +0000

GraphQL codegen helps us to write queries, mutations, fragments and using hooks which are already typed.
read more about it

Assuming you already have urql , graphQL and typescript installed and setup in your project, (I am working on next.js project)
here is how you can install and use graphql codegen for typed variables throughout your project.

Installation



yarn add -D @graphql-codegen/typescript-urql

Add codegen CLI



yarn add -D @graphql-codegen/cli

Initialize codegen configuration



yarn run graphql-codegen init

This command will generate codegen configuration for you by asking for selecting your graphql endpoint, location of your graphql operation in the project, folder to write the output of codegen, script to run graphql codegen etc. You can also manually create the codegen.ts file and write the configuration there.

Use your graphQL api endpoint as schema.
read more about config

Run

Run yarn install and the script you have set up to run codegen.
Eg. yarn run codegen

To run in watchmode,



yarn run codegen --watch

Buttons with Tailwind CSS and React

Tasfia Islam — Thu, 17 Mar 2022 19:16:45 +0000

Responsive button design with single React component with Tailwind CSS.

Here I'll show how you can design different types of buttons for both light and dark mode with tailwind. I have used Gatsby, TypeScript in my project.

Props

import { Link } from 'gatsby';
import React, { ReactNode } from 'react';

interface Props {
  type?: 'primary' | 'secondary' | 'text';
  children: ReactNode;
  onClick?: () => void;
  isBlock?: boolean;
  disabled?: boolean;
  className?: string;
  href?: string;
  target?: string;
  width?: string;
}

Define the styles.

Added different text sizes and paddings for mobile and desktop devices. According to button type, text color, background and border are varied.

const textSize = 'text-base lg:text-lg';

const padding = 'px-7 lg:px-10 py-3 lg:py-4';

const color = {
  primary: 'text-white',
  secondary: 'text-slate-700 dark:text-slate-200',
  text: 'text-slate-700 hover:text-white dark:text-slate-200 dark:hover:text-white',
};

const backgroundColors = {
  primary: 'bg-blue-500',
  secondary: 'bg-transparent',
  text: 'bg-light-button hover:bg-blue-500 dark:bg-gray-800 dark:hover:bg-blue-500',
};

const border = {
  primary: 'border-none',
  secondary: 'border-2 border-gray-800 dark:border-white',
  text: 'border-none',
};

Button Component

I have used custom google font here. Check out this link if you like to add a custom google font to your tailwind project.

For button with links or href, I have used Gatsby Link.

const Button = ({
  type = 'primary',
  children,
  onClick,
  className = '',
  disabled = false,
  href,
  target,
  isBlock = true,
  width,
}: Props): JSX.Element => {
  const disabledStyle = disabled
    ? 'opacity-50 cursor-not-allowed'
    : 'transition ease-in-out duration-300 hover:cursor-pointer';

  let baseClasses = [
    'uppercase',
    'font-oswald',
    textSize,
    border[type],
    backgroundColors[type],
    color[type],
    padding,
    disabledStyle,
  ];

  if (className) {
    baseClasses = [...baseClasses, ...className.split(' ')];
  }
  if (isBlock) {
    baseClasses = [...baseClasses, 'block w-full'];
  }
  if (!!width) {
    baseClasses = [...baseClasses, width];
  }

  if (href) {
    let linkClasses = [...baseClasses, 'flex items-center justify-center whitespace-nowrap'];
    return (
      <Link to={href} target={target} onClick={onClick} className={linkClasses.join(' ')}>
        {children}
      </Link>
    );
  }

  return (
    <button onClick={onClick} className={baseClasses.join(' ')} disabled={disabled}>
      {children}
    </button>
  );
};

export default Button;

I have built the UI component with Storybook