DEV Community: Girish Sawant

Creating a Code Snippet in VS Code to Increase Productivity

Girish Sawant — Wed, 07 Aug 2024 20:41:32 +0000

Hi all,

Today, I am sharing some coding practices that have increased my productivity and time efficiency through the use of code snippets. I always prefer using smart tools over conventional ones to improve my workflow further.

Background

Let's start with a scenario from a React dashboard project where I frequently used drawer components. Each drawer had similar functionality for submitting form data. As a React developer, I had two options:

Create a reusable drawer component for multiple modules.
Create cloned drawer components specific to different application modules.

In this case, I chose the second option. I avoided creating a reusable drawer component because I anticipated needing to pass different props and logic in various instances.

However, copying and pasting the drawer component, removing unnecessary states, logic, and UI parts, and refactoring component and variable names became time-consuming.

Solution: Custom Snippets

I discovered that creating user-defined snippets could streamline this process. Here’s the snippet I created for a drawer component with a form:

{
    "React Drawer with Form": {
        "prefix": "drawer-form",
        "body": [
            "import { FileText, X } from \"@phosphor-icons/react\";",
            "import { Button, Drawer, Form } from \"antd\";",
            "import KeyboardButton from \"components/Commons/KeyboardButtons\";",
            "import { useState } from \"react\";",
            "import { useEventListener } from \"usehooks-ts\";",
            "",
            "type T$1Drawer = {",
            "    open: boolean;",
            "    onClose: () => void;",
            "};",
            "",
            "type TFormValues = {};",
            "",
            "const $1Drawer: React.FC<T$1Drawer> = ({ open, onClose }) => {",
            "    const [form] = Form.useForm<TFormValues>();",
            "    const [isSubmitting, setIsSubmitting] = useState(false);",
            "",
            "    const onFormFinish = async (values: TFormValues) => {",
            "        try {",
            "            setIsSubmitting(true);",
            "            await new Promise((resolve) => setTimeout(resolve, 1000));",
            "            console.log(values);",
            "        } finally {",
            "            setIsSubmitting(false);",
            "        }",
            "    };",
            "",
            "    useEventListener(\"keydown\", (e) => {",
            "        if (!open) return;",
            "        if ((e.ctrlKey || e.metaKey) && e.key === \"Enter\") form.submit();",
            "    });",
            "",
            "    return (",
            "        <Drawer",
            "            destroyOnClose",
            "            title={",
            "                <header className=\"w-full h-11 px-4 pt-3 pb-2 bg-gray-50 border-b border-gray-100 justify-between items-center inline-flex\">",
            "                    <div className=\"justify-start items-center gap-2.5 flex\">",
            "                        <div className=\"p-1 bg-white rounded-md shadow justify-start items-center gap-2 flex\">",
            "                            <FileText className=\"w-4 h-4 relative text-violet-600\" />",
            "                        </div>",
            "                        <div className=\"justify-start items-center gap-2 flex\">",
            "                            <div className=\"text-gray-900 text-base font-medium font-['Inter'] leading-normal\">$2</div>",
            "                        </div>",
            "                    </div>",
            "                    <X className=\"w-4 h-4 relative text-gray-400\" role=\"button\" tabIndex={0} onClick={onClose} />",
            "                </header>",
            "            }",
            "            footer={",
            "                <footer className=\"rounded-xl flex gap-3 justify-end items-center py-3 border-t border-t-solid border-t-gray-100 absolute bottom-0 left-0 right-0 px-3 bg-white\">",
            "                    <Button onClick={onClose}>",
            "                        Cancel",
            "                    </Button>",
            "                    <Button loading={isSubmitting} htmlType=\"submit\" type=\"primary\" onClick={form.submit}>",
            "                        Update",
            "                        <KeyboardButton className=\"ms-2\" keys={[\"ctrl/⌘\", \"⏎\"]} />",
            "                    </Button>",
            "                </footer>",
            "            }",
            "            className=\"[&_.ant-drawer-header]:p-0 [&_.ant-drawer-body]:p-4 [&_.ant-drawer-body]:pb-14 [&_.ant-drawer-body]:relative\"",
            "            closeIcon={false}",
            "            onClose={onClose}",
            "            open={open}",
            "        >",
            "            <div>",
            "                <Form layout=\"vertical\" form={form} onFinish={onFormFinish}>",
            "                    $3",
            "                </Form>",
            "            </div>",
            "        </Drawer>",
            "    );",
            "};",
            "",
            "export default $1Drawer;"
        ],
        "description": "React Drawer with Form"
    },
}

How to Use

To use this snippet, simply type the prefix "drawer-form" in an empty file, and your IDE will suggest this snippet. Press Enter, and the entire code will be inserted with multiple cursors on the dynamic variables ($1, $2, etc.). Enter the component name, press Tab, and the cursor will shift to the next variable. That's it! This way, you can quickly create multiple drawer components.

How to Create a Code Snippet

To create a custom code snippet in VS Code, follow these steps:

Open the Command Palette:
- Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette.
Select 'Preferences: Configure User Snippets':
- Type and select Preferences: Configure User Snippets.
Choose or Create a Snippet File:
- Select the language for which you want to create the snippet or choose New Global Snippets file for a global snippet.
Define the Snippet:
- Add your snippet in the JSON format, specifying the prefix, body, and description. See the example snippet above.

Sharing Snippets with Your Team

Workspace Snippets: Save the snippet JSON file in the .vscode folder of your project.
Git Repository: Commit the snippet JSON file to your project's repository.
Extensions: Create a custom VS Code extension containing your snippets and share it with your team.

By using these methods, you can ensure that your team has access to the same productivity-boosting snippets, making your workflow more efficient and consistent.

Conclusion

By using code snippets, you can significantly reduce the time spent on repetitive tasks, allowing you to focus more on the unique aspects of your project. This practice not only improves productivity but also helps maintain consistency and reduces the chance of errors.

I hope you find this tip useful! Happy coding!

CSS for Beginners: Building Responsive Web Layouts with Ease

Girish Sawant — Sat, 25 May 2024 03:51:09 +0000

Creating responsive and visually appealing web layouts is an essential skill for any frontend developer. In today's multi-device world, ensuring that your website looks great and functions well on all screen sizes is critical. This guide will take you through the basics of using CSS to construct responsive layouts, making your web pages look professional and user-friendly.

We'll start by understanding the fundamentals of CSS grid systems, which allow you to define the structure of a screen or container using columns and rows. Next, we'll dive into spacing and padding, crucial for achieving well-organized and aesthetically pleasing layouts. Finally, we'll explore positioning content within your layout using techniques like Flexbox and absolute positioning. By the end of this guide, you'll have a solid foundation for creating responsive designs with CSS.

1. Grid System

A CSS grid system defines the structure of a screen or container using a grid of columns and rows. Content on a web page is arranged within these grid cells, allowing for organized and responsive layouts.

As a frontend developer, it's essential to understand how content is distributed within the cells of a grid system. Let's illustrate this with an example:

Imagine a webpage with two sections. We'll highlight the parent container with a red border box and the content cells with green boxes. For section 1, we can envision a 1x8 cell grid, while for section 2, a 1x4 cell grid is suitable.

Now, let's discuss how to achieve this using CSS. Suppose our screen/container has a width of 800 units. To accommodate 8 cells within 800 units, we divide the width by the number of cells, resulting in 100 units per cell. The unit can be any CSS unit like pixels (px), rems (rem), ems (em), or percentages (%). For example, if the container width is 80%, each cell would take 10% of the width.

For section 2, let's consider a parent box width of 1200 units. Dividing this by 4 cells, each cell would be 300 units wide.

To implement this in code, we define the widths for the parent boxes and content cells using CSS classes or inline styling. Here's an example:

.section-1-parent-box {
    width: 800px;
}

.section-1-cell {
    width: 100px;
}

.section-2-parent-box {
    width: 1200px;
}

.section-2-cell {
    width: 300px;
}

Alternatively, you can utilize CSS frameworks like Bootstrap or Tailwind CSS, which provide predefined grid classes. In Bootstrap, you can use classes such as container, row, and col to create grid-based layouts (Bootstrap Grid System). In Tailwind CSS, you can use utilities like grid and specify the number of columns and rows using grid-cols-{number} and grid-rows-{number} classes (Tailwind CSS Grid).

In summary, creating a layout involves identifying the grid structure of content within the parent container and applying appropriate CSS styles to achieve the desired design. By understanding these concepts, frontend developers can create responsive and visually appealing web layouts efficiently.

2. Spacing and Padding in CSS

When designing web components, managing spacing and padding is crucial for achieving visually appealing and well-organized layouts. CSS provides several properties to control spacing and padding around and within components.

Gap Property

The gap property is used to create space between grid or flexbox items within a container. It's particularly useful for maintaining consistent spacing between components without resorting to margin or padding hacks.

.parent-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; 
    /* Creates a 20px gap between grid items */
}

Margin Property

The margin property is used to create space around an element's outside edges. It's commonly used to create spacing between components or between a component and its container.

.component {
    margin: 10px;
    /* Creates a 10px margin around the component */
}

Padding Property

The padding property is used to create space within an element, between its content and its border. It's useful for controlling the internal spacing of a component.

.component {
    padding: 20px;
    /* Creates a 20px padding within the component */
}

Combining Spacing and Padding

You can combine margin, padding, and gap properties to achieve the desired spacing both between and within components, as well as between components and their containers.

.component {
    margin: 10px;
    /* Creates a 10px margin around the component */
    padding: 20px;
    /* Creates a 20px padding within the component */
}

.parent-container {
    display: flex;
    gap: 20px;
    /* Creates a 20px gap between flex items */
}

By effectively utilizing these CSS properties, you can achieve consistent and aesthetically pleasing spacing and padding within your web components, resulting in a more polished and professional-looking layout.

3. Positioning the Content

Once we've implemented the layout, the next step is to arrange the content within its parent elements. To achieve this, we can use CSS properties such as Flexbox or positioning techniques like position: absolute with appropriate inset values (top, bottom, left, right).

Using Flexbox for Positioning

Flexbox provides a powerful way to align and distribute space among items in a container, even when their size is unknown or dynamic.

align-items: This property aligns items along the cross axis (vertically if the flex direction is row, horizontally if the flex direction is column).
- Values: flex-start, flex-end, center, baseline, stretch.

  .container {
      display: flex;
      align-items: center; 
      /* Aligns items vertically in the center */
  }

justify-content: This property aligns items along the main axis (horizontally if the flex direction is row, vertically if the flex direction is column).
- Values: flex-start, flex-end, center, space-between, space-around, space-evenly.

  .container {
      display: flex;
      justify-content: space-between; 
      /* Distributes items evenly with space between them */
  }

align-content: This property aligns lines of flex items when there is extra space in the cross-axis, similar to justify-content but for multiple lines.
- Values: flex-start, flex-end, center, space-between, space-around, stretch.

  .container {
      display: flex;
      flex-wrap: wrap; 
      /* Allows items to wrap onto multiple lines */
      align-content: center; 
      /* Aligns wrapped lines to the center */
  }

Using Absolute Positioning

Sometimes, you may need to position elements precisely within a container. In these cases, position: absolute can be very useful. When you set an element to position: absolute, you can use the top, bottom, left, and right properties to position it within its nearest positioned ancestor (an element with a position other than static).

position: absolute: Positions the element relative to its nearest positioned ancestor.

  .parent {
      position: relative; 
      /* The parent element needs a non-static position */
  }

  .child {
      position: absolute;
      top: 10px;  
      /* 10px from the top of the parent */
      left: 20px; 
      /* 20px from the left of the parent */
  }

Using these CSS properties, you can effectively position and align content within your layout, ensuring a responsive and visually appealing design.

Animating a Card Component Containing Subroutes with Resize Observer in React

Girish Sawant — Wed, 03 Apr 2024 18:40:41 +0000

In this blog post, we'll explore how to use the ResizeObserver API to animate changes in the height of a card component in a React application. This card contains subroutes, each with potentially different sizes, making it a perfect use case for the ResizeObserver.

What is Resize Observer?

The ResizeObserver API provides a way to observe changes to an element's dimensions. It's a powerful tool for creating responsive components that need to react to changes in their size.

Using Resize Observer in React

In our React component, we use a custom hook called useResizeObserver from a library. This hook simplifies the process of setting up and tearing down the observer.

Here's the relevant code:

const observedDivRef = useRef<HTMLDivElement>(null);
const targetDivRef = useRef<HTMLDivElement>(null);

useResizeObserver({
    ref: observedDivRef,
    onResize: ({ height }) => {
        if (targetDivRef.current && height) {
            targetDivRef.current.style.height = `${height + 40}px`;
        }
    }
});

In this code, we have two ref objects: observedDivRef and targetDivRef. We pass observedDivRef to useResizeObserver, which sets up a ResizeObserver on the element referenced by observedDivRef.

The onResize callback is invoked whenever the size of the observed element changes. In this callback, we check if targetDivRef.current is defined and if the height is not null. If both conditions are true, we update the height of the targetDivRef.current element.

This allows us to animate the height of the targetDivRef.current element in response to changes in the height of the observedDivRef.current element.

<div 
    ref={targetDivRef}
    className="card"
    style={{
        transition: 'height 0.2s ease-out, width 0.2s ease-out', 
        background: '#FCFCFD'
    }}
>
    <div ref={observedDivRef}>
        <Routes>
            {routes.map((props) => (
                <Route key={props.path} {...props} />
            ))}
        </Routes>
    </div>
</div>

In this code, targetDivRef is attached to the card div that we want to animate. The div has a style that includes a transition on the height and width properties, which will create the animation effect when the height or width changes.

The observedDivRef is attached to the inner div that contains the Routes component. The height of this div will change as different routes are rendered, each potentially having different sizes. The ResizeObserver will detect these changes and update the height of the targetDivRef div accordingly. This will trigger the height animation on the targetDivRef div.

Conclusion

The ResizeObserver API is a powerful tool for creating responsive components in React. By observing changes to an element's dimensions, we can create animations and other dynamic behaviors that respond to changes in the size of our components. This is particularly useful for components like cards that contain subroutes with different sizes, allowing the card to smoothly adjust its size as the user navigates through the application.