Forem: Sajid Sheikh

MistCSS : Create React components using CSS Only!! 🚀

Sajid Sheikh — Sun, 31 Mar 2024 11:52:38 +0000

Hey there, developers! Today, we're diving into the world of atomic React components and exploring a powerful tool called MistCSS by Typicode.

MistCSS offers a unique approach to building UI components using plain CSS, following the concept of JS-from-CSS. Let's break down what that means and how MistCSS can benefit your React development workflow.

What are Atomic Components? ⚛

Imagine creating your React components from the tiniest possible CSS building blocks. These fundamental units, often referred to as atomic classes, represent basic styles like colors, margins, paddings, and more. By combining these atomic classes, you can construct more complex components.

The beauty of atomic components lies in their reusability and composability. You can share these atomic classes across different components, promoting consistency and maintainability in your codebase.

MistCSS: CSS-powered React Components ⚡️

MistCSS empowers you to define component styles entirely within CSS files. This approach can potentially reduce the need for separate JavaScript files, streamlining your development process. Here's a glimpse into what MistCSS offers:

Simplified Styling: Write CSS classes that directly map to React components, promoting a clean separation of concerns.
Atomic Class Generation: Utilize MistCSS utilities to generate atomic classes based on your design specifications.
Theming Capabilities: Define themes within CSS and apply them to your components for a cohesive design system. Incorporating a YouTube Video for Visual Learners

To complement this written explanation, I've created a video that delves deeper into MistCSS and showcases its functionalities in action. Check it out here:

So, why not give MistCSS a try in your next React project?

Stay tuned for future posts where we'll explore MistCSS in more detail and delve into practical use cases!

Internationalization: Making Your Web App Accessible to Everyone 🌍

Sajid Sheikh — Fri, 28 Apr 2023 20:54:06 +0000

As the world becomes more connected, it's important to ensure that your web app can be accessed by users from different parts of the world. This is where internationalization comes into play.

Internationalization, or i18n for short, is the process of designing and developing your web app to support multiple languages and cultures. By doing this, you can reach a wider audience and provide a better user experience for non-native speakers of your app's default language.

There are several key aspects to consider when implementing i18n in your web app. Let's take a look at some of them.

Content Localization 🌐

The first step in i18n is to translate the content of your web app into different languages. This includes all text, images, videos, and other media that users interact with. You can either hire a professional translation service or use machine translation services like Google Translate to get started.

Date and Time Formatting 📅

Different countries have different date and time formats. For example, in the United States, the date is written as mm/dd/yyyy, while in Europe, it's written as dd/mm/yyyy. It's important to consider these differences and format your dates and times accordingly.

Number Formatting 🔢

Similarly, numbers are formatted differently in different parts of the world. For example, in the United States, a decimal point is used to separate the whole number from the decimal fraction (e.g. 1.234), while in Europe, a comma is used (e.g. 1,234). You'll need to make sure your app can handle these differences correctly.

Right-to-Left (RTL) Language Support 🔄

Some languages, such as Arabic and Hebrew, are written from right to left. This means that your web app needs to support RTL text formatting to display these languages correctly. This includes everything from text alignment to navigation and layout.

Accessibility ♿

Finally, it's important to ensure that your web app is accessible to users with disabilities. This includes providing alternative text for images, using proper heading tags, and making sure your app is keyboard accessible.

By implementing these key aspects of i18n, you can make your web app accessible to users from all over the world. This not only helps you reach a wider audience but also shows that you value inclusivity and diversity. So don't wait any longer, start making your web app accessible to everyone today! 🌎

TypeScript: A Strongly Typed Hero for Production-Grade Web Apps 🦸‍♂️

Sajid Sheikh — Fri, 28 Apr 2023 20:47:18 +0000

Are you tired of endless debugging sessions that lead to nowhere? Do you feel overwhelmed with maintaining large codebases? Fear not, TypeScript is here to save the day! 🚀

With TypeScript, you can add optional static typing to your JavaScript code, providing a safety net for your application. No more runtime errors to spoil your day, TypeScript will catch them before they even happen! 🔍

Let's take a look at an example of a function that calculates the area of a rectangle in JavaScript:

function calculateArea(width, height) {
  return width * height;
}

Now let's add some TypeScript magic to it:

function calculateArea(width: number, height: number): number {
  return width * height;
}

💥 Boom! 💥 You can now see the expected types of each argument and the return value. This will save you time and prevent errors that might arise from passing the wrong type of argument.

But wait, there's more! TypeScript also supports classes and interfaces, making it easier to write and maintain complex code. Let's take a look at an interface for a User object:

interface User {
  name: string;
  age: number;
  email: string;
}

Now you can use this interface to define the shape of your User objects, and TypeScript will make sure you don't stray away from it. 🔒

Moreover, TypeScript integrates well with popular frontend frameworks such as React, Angular, and Vue.js. This means you can take advantage of features like IntelliSense and improved code completion to speed up your development process. 💨

In conclusion, TypeScript is the hero you deserve for your production-grade web apps. It adds safety, readability, and maintainability to your codebase, and it's a joy to work with. So what are you waiting for? Add some TypeScript to your project today! 🙌

Free Production Ready Next.js Template

Sajid Sheikh — Fri, 28 Apr 2023 20:41:32 +0000

I am excited to announce the release of my latest open-source project - a free, production-ready Next.js template repository. This template repository provides a strong foundation for building performant, scalable, and maintainable web applications using Next.js.

With this template repository, developers can focus on building features and functionality for their web applications, without worrying about setting up the boilerplate code. The repository comes pre-configured with essential tools, such as Tailwind CSS, Prettier, ESLint, Jest, and Husky, to make the development process smoother and more efficient.

The Tailwind CSS integration enables developers to build responsive and modern UIs with ease. Prettier and ESLint enforce consistent code formatting and help maintain the code quality. Jest provides a robust testing framework, while Husky ensures that code commits and pushes meet predefined standards.

The template repository is licensed under the MIT License, allowing developers to use, modify, and distribute the code as they see fit. Additionally, contributions are welcome to improve the codebase, add new features, and fix any bugs or issues.

The repository is available on GitHub, and developers can easily use it as a starting point for their web applications. They can clone the repository, customize it to meet their needs, and get started with building their application features right away.

I invite developers to try out this template repository and contribute to the project. Together, we can make web development easier and more accessible for everyone.

Check Project Here