DEV Community: manka'a

Are CSS Frameworks Really Necessary? 🤔

manka'a — Sat, 21 Sep 2024 15:41:18 +0000

Introduction

CSS has evolved a lot in recent times. From making websites look good using fonts and colors to working with layouts, complex grid systems, transition, animations and many more. The introduction of CSS3 and its new features has made CSS a very powerful and indispensable tool for front-end web development.

You might have heard of CSS frameworks like Tailwind, Foundation, Bulma and many others. These are very popular and indeed useful but have you ever wondered if we really need them? if yes, then why?. Let's get into it

What Are CSS Frameworks?

Before we go any further, let's talk a little about what a CSS Framework is. A CSS framework is something like the skeleton of pre-written CSS code to build your web pages upon. These styles can then be reused within the entire project.

Advantages of Using CSS Frameworks

Let's quickly look at what CSS frameworks bring to the table when it comes to building web applications

1. Consistency

Having consistent components through out your website makes it look and feel a little more harmonized and aesthetically pleasing. It also gives room for re-usability. Imagine visiting a website and you see 10 different colors all over the place, different types of buttons on different pages, text sizes which are all over the place and so on. I am pretty sure you won't visit that website again because of how it looks.

CSS frameworks establish common design languages throughout your site. This means:

Users won't feel like they're lost in a maze
Your team is not going to go insane trying to maintain the codebase – Instead of explaining to your boss why every page on this site looks different

2. Speed

It can be quite traumatizing dealing with complex grid systems and especially building them from scratch. Thankfully, we don't have to go through all that hassle, because of CSS Frameworks. They speed up your entire development process helping you to focus on what makes your application unique instead of re-inventing the wheel.

<!-- Without CSS framework -->
<div class="custom-grid">
  <div class="custom-column">...</div>
  <div class="custom-column">...</div>
</div>

<!-- With framework (e.g., tailwind) -->
<div class="flex justify-center items-center">
  <div>...</div>
  <div>...</div>
</div>

3. Responsive Design becomes Easy

Now adays, people browse and visit websites on almost everything. So, making your website responsive has become a very crucial step in building web applications. CSS frameworks make this process a lot easier. Making websites responsive with normal CSS involves writing a lot of code which can sometimes become very messy, good thing we have CSS frameworks to ease the job.

/* Without CSS framework */
@media (max-width: 768px) {
  /* Mobile styles */
}
@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet styles */
}
@media (min-width: 1025px) {
  /* Desktop styles */
}

/* With framework( e.g tailwindcss) */
<div class='text-black sm:text-blue lg:flex-col'>...</div>

4. Browser Compatibility

Have you ever built a website and when testing it on different browsers, you realize some sections of the website appear differently or don't show at all on some browsers?. CSS frameworks helps in taking care of compatibility issues in advance. CSS frameworks often use normalize.css or other reset stylesheets to make sure that CSS styles work consistently across different browsers

Downsides of Using CSS Framework

1. Bloated Code

Using CSS frameworks involves loading styles for almost everything the frameworks has to offer which can significantly slow down your website and also affect its performance.

3. The Learning Curve

Learning CSS frameworks takes time as different frameworks handle things differently and you find yourself constantly referring to the documentation for implementation guide.

So, Do We Really Need CSS Frameworks?

The truth is, whether or not we need CSS frameworks depends on the specific requirements of your project.

For small projects, CSS frameworks are sometimes not really needed but can be very helpful in large projects since it can help to save time, maintain consistency and handle browser compatibility as mentioned above.

Conclusion

CSS frameworks won't fix everything about the way you style your web applications, but they will speed up your development process.
CSS frameworks are tools, and as tools, they are very valuable when used the right way.
After all, the best developers are masters of their tools but not slaves So, sometimes you should step outside the box and try something new like building your own CSS framework.
So, What do you think? Do you like CSS frameworks or do you prefer to write everything manually? Let me know in the comments! 👇

ReactJS Higher-Order Components(HOC) in a Nutshell

manka'a — Fri, 23 Aug 2024 09:30:22 +0000

Introduction

React has become one of the most popular libraries for building user interfaces, and with good reason. Its component-based architecture allows for reusable, modular code that's easy to understand and maintain. As your React applications grow in complexity, you might find yourself looking for ways to share component logic across your app. This is where Higher-Order Components (HOCs) come into play.
In this article, we'll explore Higher-Order Components, understand their purpose, and learn how to implement them using functional components in React. We'll cover the basics, dive into practical examples, and discuss best practices to help you use the power of HOCs in your React projects

What are Higher Order Component(HOC)

A Higher-Order Component is a function that takes a component as an argument and returns a new component with some additional functionality or properties. This new component is a modified version of the original component, with additional props, behavior, or functionality. It allows you to reuse component logic and can be used to add common functionalities to different components without repeating code.

Here's a simple representation of an HOC:

const withExtraProps = (WrappedComponent) => {
  return (props) => {
    return <WrappedComponent extraProp="I am an extra prop" {...props} />;
  };
};

In this example, withExtraProps is a Higher-Order Component that adds an extra prop to the component it wraps.

2.Why Use Higher-Order Components?

There are alot of benefits to use HOC's.

Code Reusability: HOCs enable developers to write reusable code that can be applied to multiple components.
Modularity: HOCs promote modularity by breaking down complex logic into smaller, independent functions.
Easier Maintenance: With HOCs, it's easier to maintain and update code, as changes can be made in a single place.
Improved Readability: HOCs make code more readable by abstracting away complex logic and presenting a simpler interface.

3.Use Cases for Higher-Order Components

Authentication: HOCs can be used to implement authentication logic, such as checking user roles or permissions.
Error Handling: HOCs can be used to catch and handle errors in a centralized manner.
Data Fetching: HOCs can be used to fetch data from APIs or databases, making it easier to manage data loading and caching.
Styling and Theming: HOCs can be used to apply consistent styling and theming across multiple components.

4.How to Create a Simple Higher-Order Component
Let's create a simple HOC that adds some additional props to a component. For this example, we'll create a withExtraInfo HOC that adds an extraInfo prop to the wrapped component.

Step 1: Define the Higher-Order Component

The HOC will be a function that takes a component and returns a new component with additional styling applied.

import React from 'react';

const withBorderAndBackground = (WrappedComponent) => {
  return (props) => {
    // Define additional styles
    const style = {
      border: '2px solid #000',
      backgroundColor: '#f0f0f0',
      padding: '10px',
      borderRadius: '5px',
    };

    // Render the wrapped component with additional style
    return <div style={style}><WrappedComponent {...props} /></div>;
  };
};

export default withBorderAndBackground;

Step 2: Create a Functional Component to be Wrapped

Here’s a simple functional component that we’ll enhance using the HOC.

import React from 'react';

// A basic functional component
const SimpleComponent = ({ text }) => {
  return <div>{text}</div>;
};

export default SimpleComponent;

Step 3: Use the Higher-Order Component Wrap the SimpleComponent with the withBorderAndBackground HOC to apply the styles.

import React from 'react';
import ReactDOM from 'react-dom';
import withBorderAndBackground from './withBorderAndBackground';
import SimpleComponent from './SimpleComponent';

// Wrap SimpleComponent with the HOC
const EnhancedComponent = withBorderAndBackground(SimpleComponent);

const App = () => {
  return (
    <div>
      <h1>Simple HOC Example</h1>
      <EnhancedComponent text="This component is styled by an HOC!" />
    </div>
  );
};

export default App

Explanation

withBorderAndBackground is the HOC that adds a border and background color to the wrapped component.
SimpleComponent is the base component that displays text.
EnhancedComponent is the result of applying the HOC to SimpleComponent, adding styling to it.

5.Let's look at a more complex example
Let's create a HOC that adds a loading prop to a component. This HOC will simulate a data fetching process and display a loading indicator while the data is being fetched.

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

const withLoading = (WrappedComponent) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const response = await fetch('https://example.com/api/data');
      const data = await response.json();
      setData(data);
      setLoading(false);
    };
    fetchData();
  }, []);

  return () => (
    <WrappedComponent
      loading={loading}
      data={data}
    />
  );
};

export default withLoading;

Using the withLoading HOC

Let's create a simple component that displays a list of items. We'll use the withLoading HOC to add the loading prop and simulate data fetching.

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

const ListItem = ({ item }) => <li>{item.name}</li>;

const List = ({ loading, data }) => {
  if (loading) {
    return <p>Loading...</p>;
  }
  return (
    <ul>
      {data.map((item) => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
};

const EnhancedList = withLoading(List);

export default EnhancedList;

6.Best Practices and Considerations

When working with HOCs, keep these best practices in mind:

Naming Conventions: Name HOCs with a with prefix (e.g., withLoading) to clearly indicate their purpose.
Avoid Prop Conflicts: Ensure HOCs do not accidentally overwrite props passed to the wrapped component.
Reusability: Design HOCs to be reusable across different components.
Documentation: Document the HOCs well to clarify what props are expected and what additional functionality they provide.

Conclusion

Higher-Order Components are a powerful pattern in React that allow you to reuse component logic across your application. By abstracting common functionality into HOCs, you can keep your components focused on their primary responsibilities while easily adding cross-cutting concerns like authentication, logging, or data loading.
As you've seen in the examples above, HOCs work well with functional components and can significantly enhance the modularity and reusability of your React code. While HOCs are not the only way to achieve code reuse in React (alternatives include render props and hooks), they remain a valuable tool in a React developer's toolkit.
Remember to use HOCs judiciously and always consider the specific needs of your project. With practice, you'll find that HOCs can greatly improve the structure and maintainability of your React applications.

13 VS Code extensions that every Frontend developer should have

manka'a — Wed, 21 Aug 2024 15:48:53 +0000

As a developer, having the right tools and extensions can significantly improve your productivity and workflow. Visual Studio Code (VS Code) has emerged as one of the most beloved code editors in recent years, thanks to its flexibility, extensive features, and vibrant community support. VS Code offers a wide range of extensions to enhance your coding experience, irrespective of your tech stack.
In this article, we'll explore some of the most popular and essential VS Code extensions that every developer should consider adding to their toolkit.

So, let's get into it.😊

1. Prettier

Prettier is a code formatter that automatically formats code according to a specified set of rules. It supports various languages including JavaScript, TypeScript, HTML, CSS, and more. With Prettier, developers can ensure consistent code formatting across their projects with minimal effort.

2. ESLint

ESLint is a widely used tool for detecting and reporting patterns in JavaScript and TypeScript code. It assists in identifying possible problems and upholds the standards of code quality, making sure that your codebase is organized and uniform. The ESLint extension in VS Code offers live linting, enabling you to identify and address issues while you write code.

3. Live Server

This extension was one of the first extensions i fell inlove with when i started my coding journey. It provides a local development server that automatically reloads your web pages whenever you save changes to your code. This extension eliminates the need to manually refresh your browser, saving you time and effort during the development process.

4. Git Lens

Git Lens is a fantastic tool for developers who are using Git version control. It offers a wide range of information and functionalities directly within VS Code, such as inline blame annotations, code lens, and a detailed side panel for navigating repositories and revisions. Using Git Lens, you can conveniently monitor code modifications, access commit histories, and enhance collaboration with your team.

5. Path Intellisense

The Path Intellisense extension is a lifesaver when working with file paths and imports in your codebase. It provides auto-completion suggestions for file paths, helping you quickly navigate and reference files across your project. This extension can save you time and reduce the risk of typos or broken import statements.

6. AutoClose Tags

This extension will save you the stress of manually closing your tags. It automatically closes HTML/XML tags when you type the opening tag. It works for HTML, XML, JavaScript, TypeScript, PHP, and more.

7. Code Runner

Code Runner is a handy extension that allows you to run code snippets or entire files directly within Visual Studio Code. It supports various programming languages, including JavaScript, Python, Ruby, C++, and more. With a simple keystroke or command, you can execute your code and see the output in the integrated terminal.

8. Color Highlight

As the name suggests, Color Highlight helps you visualize and identify color values in your code. It provides an in-editor preview of CSS/Web colors, making it easier to work with color codes. This extension is particularly useful when working with CSS stylesheets or designing user interfaces.

9. IntelliCode

IntelliCode is a powerful AI-assisted coding extension developed by Microsoft. It provides intelligent code completion suggestions based on machine learning models trained on billions of lines of code. This extension can save you time by suggesting relevant code snippets, APIs, and best practices based on your coding context.

10. indent-rainbow

The indent-rainbow extension makes it easier to visually distinguish different indentation levels in your code and improves code readability. It assigns different colors to each indentation level, helping you quickly identify the code structure and hierarchy. This can be particularly useful when working with deeply nested code or complex code bases.

11. Code Spell Checker

As the name implies, Code Spell Checker is an extension that checks for spelling mistakes in your code comments, strings, and other text elements. It helps you catch typos and spelling errors, which can be crucial for maintaining clean and readable code, especially when working on documentation or user-facing text.

12. Material Icon Theme

Material Icon Theme is a popular extension that provides a visually appealing and consistent set of file and folder icons in Visual Studio Code. These icons follow the Material Design guidelines, making it easier to identify different file types and folder structures at a glance. It enhances the overall aesthetic of your code editor.

13. Live Share

Live share extension is a powerful tool that enables real-time collaborative coding sessions. It allows multiple developers to share the same code editor, server, terminal, and more, regardless of their physical location.

This list just scratches the surface of the incredible extensions available for VS Code. With countless options in the VS Code Marketplace, you can set up your coding environment to fit your specific needs and preferences. Explore the marketplace, experiment with different extensions, and discover what works best for you. Happy coding!

How to create a reusable Button component in ReactJS

manka'a — Wed, 21 Aug 2024 15:48:13 +0000

Buttons are undeniably important UI Components of any react application, buttons might be used in scenarios such as submitting a form or opening a new page. You may build reusable button components in React.js that you can utilize throughout different sections of your application. As a result, maintaining your application will be simpler and your code will be kept DRY (Don't Repeat Yourself).

You must first create a new file in your components folder named Button.jsx in order to construct a reusable button component. The next step is to define the function "Button," which accepts the parameters text and onClick.

The text that will be displayed on the button is contained in the text prop. When the button is clicked, a function specified by the onClick prop will be called.

Finally, you must return a "button" element that has the text prop set to the text to be displayed on the button and the onClick prop set to the handler for the button's onclick event.

Here is an example of a reusable button component in React.js:


const Button = ({ text, onClick }) => {
  return (
    <button
      type="button"
      style={{
        margin: 10px,
      }}
      onClick={onClick}
    >
      {text}
    </button>
  );
};

export default Button;

Once you have created your reusable button component, you can import it into any other component that you want to use it in. For example, you could create a component called MyComponent that uses the Button component to render a button with the text "Click me!".

Here is an example of how to use the Button component in another component:

import Button from "../components/Button";

const MyComponent = () => {
  return (
    <div>
      <Button text="Click me!" onClick={() => console.log("Button clicked!")} />
    </div>
  );
};

export default MyComponent;

This will render a button with the text "Click me!". When the button is clicked, the console.log function will be called and the message "Button clicked!" will be logged to the console.

You can also use the Button component to create buttons with different styles. For example, you can add a class to the button element to apply a custom style. For example:

import Button from "../components/Button";

const MyComponent = () => {
  return (
    <div>
      <Button text="Click me!" onClick={() => console.log("Button clicked!")} className="my-custom-class" />
    </div>
  );
};

export default MyComponent;

This will render a button with the text "Click me!". The button will also have the class my-custom-class applied to it. You can use this class to style the button in your CSS file.