Forem: Roman

JavaScript string manipulation technique Every Developer Should Know [Part 2]

Roman — Wed, 14 May 2025 17:30:00 +0000

In the previous article, we covered the core JavaScript string manipulation methods like slice(), substring(), replace(), and others. In this part 2, we’ll focus on more custom string manipulation functions that are particularly useful in complex or larger projects. These functions will help you handle tasks like masking sensitive information, formatting data, or performing advanced string operations.

1) Hide Credit Card Digits (Show Last 4 Digits)

When working with sensitive data such as credit card numbers, it’s important to mask the information, showing only the last four digits for security.

    function maskCreditCard(cardNumber) {
        return cardNumber.slice(-4).padStart(cardNumber.length, '*');
    }

    const creditCardNumber = "1234567812345678";
    console.log(maskCreditCard(creditCardNumber)); // "************5678"

2) Convert a String to Title Case

Sometimes you may need to format strings so that the first letter of each word is capitalized. This is common when working with user inputs, article titles, or names.

    function toTitleCase(str) {
        return str.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
    }

    const sentence = "hello world from javascript";
    console.log(toTitleCase(sentence)); // "Hello World From Javascript"

3) Truncate a String to a Specific Length

When dealing with large blocks of text, you might want to display a truncated version, followed by ellipses (...). This is useful for previews of articles or descriptions.

    function truncateString(str, length) {
        return str.length > length ? str.slice(0, length) + '...' : str;
    }

    const longText = "JavaScript is a versatile programming language used for both frontend and backend development.";
    console.log(truncateString(longText, 40)); // "JavaScript is a versatile programming lan..."

4) Extract the Domain Name from an Email Address

When working with email addresses, you may need to extract the domain name (everything after the @ symbol). This can be useful for validating email addresses or categorizing users based on their email provider.

    function getDomainFromEmail(email) {
        return email.slice(email.indexOf('@') + 1);
    }

    const email = "user@example.com";
    console.log(getDomainFromEmail(email)); // "example.com"

5) Remove Non-Alphanumeric Characters

In some cases, you may need to remove any non-alphanumeric characters (such as punctuation, spaces, or symbols) from a string using Regular Expressions. This can be helpful when sanitizing user input or creating URLs.

    function removeNonAlphanumeric(str) {
        return str.replace(/[^a-z0-9]/gi, '');
    }

    const messyString = "Hello! Welcome to @JavaScript_123.";
    console.log(removeNonAlphanumeric(messyString)); // "HelloWelcometoJavaScript123"

6) Count Occurrences of a Substring in a String

You might need to count how many times a specific substring appears within a larger string. This is useful when analyzing text, such as counting occurrences of a word or phrase.

    function countOccurrences(str, substring) {
        return str.split(substring).length - 1;
    }

    const text = "JavaScript is amazing. JavaScript is versatile. JavaScript is everywhere.";
    console.log(countOccurrences(text, "JavaScript")); // 3

7) Reverse a String

Reversing a string is a common coding exercise and can also be useful in certain algorithms, such as checking if a string is a palindrome (reads the same forwards and backward).

    function reverseString(str) {
        return str.split('').reverse().join('');
    }

    const originalString = "JavaScript";
    console.log(reverseString(originalString)); // "tpircSavaJ"

8) Validate if a String is a Palindrome

A palindrome is a string that reads the same forwards and backward. This function checks if a given string is a palindrome.

    function isPalindrome(str) {
        const cleanedStr = str.replace(/[^a-z0-9]/gi, '').toLowerCase();
        return cleanedStr === cleanedStr.split('').reverse().join('');
    }

    const word = "A man, a plan, a canal, Panama";
    console.log(isPalindrome(word)); // true

9) Generate a Random String (for Unique IDs or Tokens)

Often in web development, you’ll need to generate random strings for unique IDs, tokens, or temporary file names.

    function generateRandomString(length) {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let result = '';
        for (let i = 0; i < length; i++) {
            result += characters.charAt(Math.floor(Math.random() * characters.length));
        }
        return result;
    }

    console.log(generateRandomString(10)); // e.g., "A7cJk1nP0X"

10) Convert a Hyphenated or Underscored String to Camel Case

When working with variable names or CSS class names, converting a string from a hyphenated or underscored format to camelCase is a common requirement.

    function toCamelCase(str) {
        return str.replace(/[-_](.)/g, (_, char) => char.toUpperCase());
    }

    const example = "background-color";
    console.log(toCamelCase(example)); // "backgroundColor"

11) Escape HTML Special Characters

When working with user input in web applications, it’s important to escape special characters to prevent XSS attacks or rendering issues in HTML.

    function escapeHTML(str) {
        const map = {
            '&': '&',
            '<': '<',
            '>': '>',
            '"': '"',
            "'": '''
        };
        return str.replace(/[&<>"']/g, function(match) {
            return map[match];
        });
    }

    const rawHTML = "<div>Click 'here' & \"now\"</div>";
    console.log(escapeHTML(rawHTML)); // "<div>Click 'here' & "now"</div>"

12) Remove Duplicates from a String

If you want to remove duplicate characters from a string, you can use this custom function.

    function removeDuplicates(str) {
        return [...new Set(str)].join('');
    }

    const stringWithDuplicates = "aabbccddeeff";
    console.log(removeDuplicates(stringWithDuplicates)); // "abcdef"

13) Slugify a String

A useful method for converting a blog article, product, and any title into a URL-friendly slug.

    function slugify(str) {
      return str
        .toLowerCase()
        .trim()
        .replace(/[^a-z0-9 -]/g, "")
        .replace(/\s+/g, "-")
        .replace(/-+/g, "-");
    }

    console.log(slugify("Hello World from JavaScript!")); 
    // "hello-world-from-javascript"

14) Email Validation Using Regex

Validating email addresses is crucial for ensuring the data you receive is in the correct format. You can use a regular expression to validate email addresses.

    function validateEmail(email) {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
    }

    console.log(validateEmail("user@example.com")); // true
    console.log(validateEmail("user@.com")); // false

15) Copy to Clipboard

Copying text to the clipboard can enhance user experience, especially when sharing codes or links.

    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(() => {
            console.log('Text copied to clipboard!');
        }).catch(err => {
            console.error('Failed to copy: ', err);
        });
    }

    copyToClipboard("Hello, World!");

16) File Size Formatter

Formatting file sizes into a human-readable string (e.g., “505K”, “15Mb”, “1.5Gb”) is common in file upload/download scenarios.

    function formatFileSize(size) {
        const units = ['B', 'KB', 'MB', 'GB', 'TB'];
        const index = Math.floor(Math.log(size) / Math.log(1024));
        const formattedSize = (size / Math.pow(1024, index)).toFixed(2);
        return `${formattedSize} ${units[index]}`;
    }

    console.log(formatFileSize(505000)); // "493.68 KB"

17) Validate URL

Checking if a URL is valid and determining whether it’s a domain-only, sub-domain, or full URL is essential in web applications.

    function validateURL(url) {
        const regex = /^(https?:\/\/)?(www\.)?([a-zA-Z0-9-]+\.[a-zA-Z]{2,})(\/.*)?$/;
        const match = url.match(regex);
        if (match) {
            const domain = match[3];
            return {
                isValid: true,
                type: match[1] ? 'full' : (match[2] ? 'sub-domain' : 'domain-only'),
                domain: domain
            };
        }
        return { isValid: false };
    }

    console.log(validateURL("https://www.example.com")); // { isValid: true, type: 'full', domain: 'example.com' }
    console.log(validateURL("www.example.com")); // { isValid: true, type: 'domain-only', domain: 'example.com' }
    console.log(validateURL("example.com")); // { isValid: true, type: 'domain-only', domain: 'example.com' }
    console.log(validateURL("invalid-url")); // { isValid: false }

18) Encrypt & Decrypt Strings

Encrypting sensitive data is crucial for security. Here’s how you can encrypt and decrypt strings using the CryptoJS library.

First, make sure to include CryptoJS in your project. You can install it via npm:

    npm install crypto-js

Then, you can use the following functions:

    const CryptoJS = require("crypto-js");

    function encryptString(str, key) {
        return CryptoJS.AES.encrypt(str, key).toString();
    }

    function decryptString(cipherText, key) {
        const bytes = CryptoJS.AES.decrypt(cipherText, key);
        return bytes.toString(CryptoJS.enc.Utf8);
    }

    const secretKey = "mySecretKey";
    const originalText = "Hello, World!";
    const encryptedText = encryptString(originalText, secretKey);
    console.log(encryptedText); // Encrypted string
    console.log(decryptString(encryptedText, secretKey)); // "Hello, World!"

19) Generate UUID (Universally Unique Identifier)

UUIDs are often used to create unique identifiers for database entries, sessions, and other applications where uniqueness is required.

    function generateUUID() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            const r = Math.random() * 16 | 0;
            const v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

    console.log(generateUUID()); // e.g., "a3bb189e-8bf9-4888-bc14-21c5c6c5381d"

20) Format the Date to a Readable String

Formatting dates into user-friendly strings are common in web applications.

    function formatDate(date) {
        const options = { year: 'numeric', month: 'long', day: 'numeric' };
        return new Date(date).toLocaleDateString(undefined, options);
    }

    console.log(formatDate("2024-10-07")); // "October 7, 2024"

These methods are very useful while building an application using JavaScript. I have shared these custom string methods that help me build things faster and provide a more user-friendly experience.

If you have such a list of string manipulation, share it in the comment box. I’ll be happy to explore more options.

JavaScript string manipulation technique Every Developer Should Know [Part 1]

Roman — Tue, 13 May 2025 18:17:22 +0000

JavaScript is one of the most used programming languages, which enables us to build cross-platform apps. You as a developer, interact with javascript to write code that empowers your app. Most of the time we are stuck badly with requirements and we need a quick solution, string manipulation is one of them.

In this article, I’m going to share some very useful JavaScript string manipulation techniques. These string methods help you write code faster.

Wants to increase the productivity as developer? Here is a list of the Best Handpicked dev tools for developers to increase their productivity.

This article has two parts.

The first Part lists javascript core methods for string manipulation.
The second part lists custom functions for manipulating strings.

Strings are one of the most commonly used data types, and controlling them efficiently can help you create dynamic, interactive web applications.

1) Convert to Uppercase & Lowercase

You can easily convert string to all uppercase & lowercase letters using the [.uppercase()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) , and [.toLowerCase()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) method.

    const str = "This is a string";
    str.toUpperCase();       // OUTPUT: THIS IS A STRING
    str.toLowerCase();       // OUTPUT: this is a string

2) Extract a Substring with `substring()`

The [.substring()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring) javascript method extracts characters between two given indices (positions in the string, like array index).

    const str = "JavaScript";
    const subStr = str.substring(0, 4);
    console.log(subStr); // "Java"

3) Extract a Substring with `substr()`

Another method, [.substr()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr), extracts a part of the string based on a start position and a specific length.

    const str = "JavaScript";
    const result = str.substr(1, 4);
    console.log(result); // "avaS"

The difference between substr() and substring() is that substr() requires a starting index and a length, while substring() uses start and end indices.

4) Slice a string

The [.slice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) method is similar to substring(), but it can also accept negative values to count from the end of the string.

    const str = "JavaScript";
    const slicedStr = str.slice(1, 4);
    console.log(slicedStr); // "ava"

If you use a negative number, like str.slice(-3), it will return the last three characters from the string.

5) Split a String

The [.split()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) method divides a string into an array of substrings, based on a delimiter (a character or string that marks where to split).

This method is extremely useful when you want to break a string into individual words or elements, such as processing CSV data.

    const str = "apple,banana,cherry";
    const arr = str.split(",");
    console.log(arr); // ["apple", "banana", "cherry"]

6) Replace a Substring

The [.replace()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) method lets you replace the first occurrence of a substring with something else.

    const str = "Hello world";
    const newStr = str.replace("world", "JavaScript");
    console.log(newStr); // "Hello JavaScript"

7) Replace All Occurrences

The [.replaceAll()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll) method replaces every occurrence of a substring.

    const str = "Hello world world";
    const newStr = str.replaceAll("world", "JavaScript");
    console.log(newStr); // "Hello JavaScript JavaScript"

8) Trim Whitespace

The [.trim()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim) method removes any whitespace (spaces, tabs, etc.) from both the beginning and the end of a string.

This is useful when you want to clean up user input or handle string formatting issues.

    const str = "   Hello World   ";
    const trimmedStr = str.trim();
    console.log(trimmedStr); // "Hello World"

9) Remove Leading or Trailing Whitespace

You can also remove whitespace from only one side of the string using [.trimStart()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart) or [.trimEnd()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd).

    const str = "   Hello World   ";
    console.log(str.trimStart()); // "Hello World   "
    console.log(str.trimEnd());   // "   Hello World"

10) Get Character at a Specific Index

The [.charAt()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt) method returns the character at a specified index.

    const str = "JavaScript";
    console.log(str.charAt(3)); // "a"

You can also use bracket notation, like str[3], to achieve the same result.

11) Get the Unicode Value of the Character

The [.charCodeAt()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt) method returns the Unicode value of the character at a specific index.

This is helpful when you need to work with the underlying character codes (ASCII/Unicode).

    const str = "JavaScript";
    console.log(str.charCodeAt(0)); // 74 (for "J")

12) Search inside the String

The [.includes()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes) method checks if a string contains a specific sequence of characters.

    const str = "Hello JavaScript";
    console.log(str.includes("JavaScript")); // true

13) Find the Index of a Substring

The [.indexOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) method returns the first occurrence of a substring, and [.lastIndexOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf) returns the last occurrence.

    const str = "Hello world";
    console.log(str.indexOf("o")); // 4
    console.log(str.lastIndexOf("o")); // 7

14) Check if String Starts or Ends with a Substring

You can use [.startsWith()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith) and [.endsWith()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith) to check if a string starts or ends with a specific substring.

These methods are useful for validating string formats (e.g, checking if a URL starts with “http”).

    const str = "JavaScript";
    console.log(str.startsWith("Java")); // true
    console.log(str.endsWith("Script")); // true

15) Repeat a String

The [.repeat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat) method repeats a string a specified number of times.

    const str = "Hello";
    console.log(str.repeat(3)); // "HelloHelloHello"

16) Pad a String

You can add padding to the start or end of a string using [.padStart()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) and [.padEnd()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd).

    const str = "5";
    console.log(str.padStart(3, "0")); // "005"
    console.log(str.padEnd(3, "0"));   // "500"

17) Using Template Literals

Template literals, introduced in ES6, are a modern way to work with strings in JavaScript.

They allow you to create multi-line strings, embed variables, and perform string interpolation in a more readable and convenient way.

    const a = 10;
    const b = 20;
    console.log(`The sum of a and b is ${a + b}`); // "The sum of a and b is 30"

18) Formatting Currency Using `.toLocaleString()`

JavaScript’s [.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) method allows you to format numbers as strings with appropriate formatting for different locales, including currency formatting.

This is especially useful when you want to display prices or financial data in a user-friendly way.

    const amount = 2500;

    // Format as US Dollar currency
    const formattedUSD = amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
    console.log(formattedUSD); // "$2,500.00"

    // Format as Euro currency
    const formattedEUR = amount.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
    console.log(formattedEUR); // "2.500,00 €"

In part 2, I'll share some useful custom functions that help achieve some extra string manipulation, which is not possible with core JavaScript.

Thanks for reading. Stay in touch to get notifications of the next published article.

Tailwindcss dynamic arbitrary values issue resolved

Roman — Tue, 29 Apr 2025 18:04:51 +0000

I want to share something exciting solution with you. The solution is about solving the dynamic class value that tailwindcss normally does not work with.

If you're new to tailwindcss, You can learn here how to integrate tailwindcss in your project

I’m inspired by this article written by Ryan Partridge, Special Thanks to him 🙏

In the above article, Ryan provides the solution with tailwindcss class names, but in this article, I’m extending this solution and solving the problem with dynamic values using tailwind arbitrary values.

Arbitrary values are introduced in tailwindcss in v2.1. This new powerful feature becomes possible due to the JIT compiler.

What is the actual problem?

While I’m working on a react project, for styling i'm using Tailwindcss & ShadCN design library.

While building dashboard stats cards, I see each card has a different color. The card also includes an icon with its background color in a darker shade.

So the quick solution I found out is to add a color hexadecimal value in the tailwindcss bg-[#D45113] class. But, here is the problem… Tailwind does not allow dynamically added values, because as we know the JIT compiler runs on demand and only accepts statically defined values.

This is where I'm completely stuck, because provided color values does not actually converted to CSS properties and hence, nothing is painted in a browser.

Let me explain this with an example code. Imagine your data looks something like this:

    const statsData = [
        {
            stats: 4585,
            color: "#48CF7357",
            iconBg: "#49D074",
            icon: "icon here..."
        }, {
            stats: 95,
            color: "#F5A45957",
            iconBg: "#FDAF67",
            icon: "icon here..."
        }, {
            stats: 1022,
            color: "#B486EE57",
            iconBg: "#B688EF",
            icon: "icon here..."
        }, {
            stats: 105,
            color: "#413F5A57",
            iconBg: "#4E4B65",
            icon: "icon here..."
        }, {
            stats: 105,
            color: "#4E4B65",
            iconBg: "#7569FC",
            icon: "icon here..."
        }, {
            stats: 105,
            color: "#F6323A57",
            iconBg: "#FE474F",
            icon: "icon here..."
        }
    ];

Each object in the array has a different color and iconBg colors in hexadecimal format.

Now, take a look at our Card Component which takes these color values while looping through this data.

    export default function DashCard({
        icon,
        iconClass,
        cardClass
    }) {
        return (
            <Card className={`${cardClass}`}>
                <CardContent>
                    <div 
                        className={`${iconClass}`}
                    >{icon}</div>
                </CardContent>
            </Card>
        )
    }

Our card component is simple, it takes classes as props from parents and applies style using tailwindcss classes.

Now, take a look at our parent component:

    function DashboardCardWrapper() {

       return (
         <section className="grid grid-cols-3 gap-4">
              {
                  statsData && statsData?.map((item, idx) =>
                      <DashCard
                          key={idx}
                          icon={item.icon}
                          iconClass={`text-white bg-[${item.iconBg}]}
                          cardClass={`bg-[`${item.color}] border-[`${item.color}`]}                
                      />
                  )
              }
          </section>
       )
    }

In our parent component, stateData is used with map() array method for applying a loop to our DashCard component.

You may have noticed that I'm assigning dynamic color values bg-[${item.iconBg}] using arbitrary values style.

But, Unfortunately… colors do not apply to our card component.

How to apply dynamic values in arbitrary values in tailwindcss?

To understand this solution, we need to understand how JIT (Just-In-Time) compiler generates tailwindcss classes?

The tailwind's JIT compiler looks for the static class names in the code to generate the related CSS for us.

See the below example code:

    <div className={`mt-[${size === 'lg' ? '22px' : '17px' }]`}></div>

The above example does not work again, because, the Just-in-Time (JIT) compiler is designed to generate utility-based CSS styles on demand, at the time of development, or at build time.

Like, In the above example, the javascript express cannot be compiled, because it is unknown and processed at the runtime.

Take a look at this example, which works well for us:

    <div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div>

This works because the class name is known to the JIT compiler and the class name is served statically.

So, in our case, to make it work and apply these hexadecimal color values. It is required that tailwindcss must know these values on demand so that they are served statically.

So, the solution I have found in the above-mentioned article is to use the safelist option of tailwind.config.js file.

What is `safelist` in Tailwind CSS?

Tailwind CSS uses a Just-in-Time (JIT) compiler that generates only the CSS classes you use in your HTML, JS, or template files. This makes your final CSS bundle much smaller and faster.

However, sometimes you use class names dynamically—like bg-${color} or text-${variant}—and the compiler can’t see those in your code. So it won’t include them in the final CSS. That's where the safelist option comes in!

The Safelist option tells the tailwindcss to always include these classes in the final CSS bundle, even if you don't see them in a source code.

In our case, keeping things simple, I've defines an array of colors and generate static classes for background, border and text using and assigns these classes to safelist option.

    const colours = ["#48CF7357",  "#49D074",  "#F5A45957"];
    const safeColours = colours.flatMap((color) => [  `bg-[${color}]`,  `border-[${color}]`,  `text-[${color}]`]);


    module.exports = {
      content: ["./src/**/*.{html,js}"],
      safelist: [...safeColours],     // provide generated classes here
      theme: {
        extend: {},
      },
      plugins: [],
    }

Now, if you run the code again, you’ll see colors applied on cards and our code works perfectly as we want.

What are the drawbacks of using safelist soo much?

As we see, this option is very handy, but it is important to know the drawbacks as well to keep things simple and in control.

1) Increase the bundle size

As I said before, JIT compiler generate static used properties in a final CSS bundle, which makes the bundle size very small, and good for optimization purpose.

The Safelist option always includes your static classes, whether they are used in a project or not, saving soo much classes in a safelist might increase the final CSS bundle size of your project.

2) Manually Managing

You have to manually keep track of what to safelist. If you forget to add a class, it won't show up, even if your code is trying to use it dynamically. This might leads of unknown bugs in our code.

3) Harder to Scale

As the app grows the safelist might grows too, and it becomes a maintenance burden.

Wrapping Up

The safelist feature in Tailwind CSS is useful for including classes that are generated dynamically and might not be detected during build time. It’s great for scenarios like theme switching or styling from CMS content, but if overused, it can increase your CSS bundle size and affect performance. Since it requires manual setup, it also adds some maintenance overhead. Used wisely, safelist helps balance flexibility with performance in dynamic Tailwind projects.

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles

Interesting CSS features that reduce the need for javascript

Roman — Sat, 12 Apr 2025 07:10:53 +0000

This article is all about reducing the need of JavaScript and keeping things simple using pure css. I have curated a list for you with examples.

As we know, more and more interesting CSS features are introduced in CSS. These features make our lives easier and also allow us to write code with some good practices. We used JavaScript to do most of our work, even for simple interactions. But now, CSS takes care of most of the things.

1) Validating Number Range Input

Let’s say we want to add validation styling for the Input type number field between 0 (min) & 50 (max) values. In the old days, this kind of interaction could only be added using JavaScript. But now, it can be achieved simply using CSS pseudo-class :in-range & :out-of-range.

Here is a simplified example:

I’ve defined an HTML input of type number and set the range using min/max attributes:

    <input type="number" min="0" max="50" />

Using CSS pseudo-class :in-range & :out-of-range to achieve conditional styling:

    // number is in-range
    input:in-range {
     border: 1px solid green;
    }

    // number is out-of-range
    input:out-of-range {
     border: 1px solid red;
    }

2) Input Validation Error Indicator

We can also style invalid input, where the condition is not fulfilled. It can be achieved using CSS Pseudo-class :invalid .

Define an input with the required attribute to tell the user this field is required, To give a proper indication we need to style the input element.

This is how we define the input element:

    <input type="text" required />

Style invalid input Using CSS pseudo-class :invlaid .

    input:invalid {
     border: 3px solid red;
    }

3) Paragraph Styling & Control

Imagine, you are building a blog post page, and you have to dynamically set the text size of the first letter of the first word to bigger than other letters, or you want to style the first line, or maybe you want to add extra content of your choice before or after the element. It all can be achieved using CSS.

See the below with the example code:

Take the blog post example and let’s define the HTML:

    <section class="blog-container">
     <p>This is the first paragraphy of blog post. <p>
     <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem dolorum fugiat explicabo ad eveniet minus nostrum eum distinctio quidem pariatur velit obcaecati, ea, perferendis laudantium tenetur necessitatibus, vel eos ipsum.</p> 
     <div class="note-alert">Now, we can achive many things from CSS</div> 
     <p>That's all</p> 
    </section>

This is how our output looks right now,

1) Now, taking our first example, style the first letter of our blog post using :first-letter pseudo-class.

    p:first-of-type:first-letter {
     font-size: 2rem;
     color: red;
    }

As you can see, we can easily style the first letter of the paragraph using CSS.

2) Our Second challenge is to style the first line of the paragraph, by making italic text and increasing the font size to make it unique than other elements.

    p:first-of-type:first-line {
     font-style: italic;
     font-size: 1.2rem;
    }

Here is an output:

3) Move forward to step three, this time we style our alert section and add extra content at the start dynamically.

    div.note-alert {
     border: 1px solid blue;
     padding: 10px;
    }
    div.note-alert::before {
     content: "Notice: ";
     color: blue;
     font-size: 1.2rem;
     font-weight: 800;
     text-transform: uppercase;
    }

So, here is the output of where we have added “Notice” an extra element at the start, and also style it using only CSS.

4) at the end, let’s add a goodbye message at the end of our blog post after the last paragraph, which can also be achieved using CSS.

    p:last-of-type::after {
     content: "Thanks for Reading, Please Like, share and comment";
     display: block;
     margin-top: 20px;
     font-style: italic;
     font-weight: bold;
    }

Here is the output of our last challenge, see how we have added the goodbye message at the end of the paragraph.

4) Styling the Editable Content on Webpage

Do you know, you can also edit content in HTML? In case you don’t, just add the contenteditable the attribute in any HTML tag so you can easily edit the content on the webpage like Input Element.

You can easily do many things with it, but in this article, I’m going to show one example.

Let’s see an example of how to identify editable content on the webpage and style it using CSS.

    <p>This paragraph can be read-only</p>
    <p contenteditable="true">This paragraph can be editable</p>

Now, take the above code, and we’ll style editable content with a green color and others with red.

    p:read-only {
      color: red;
    }

    p:read-write {
      color: green;
    }

5) Allow/Disallow User Selection

Sometimes, based on requirements we don’t allow users to select text on the webpage. This can be easily achieved by using CSS. We can also disable selection for the whole webpage to a single paragraph using user-select property. You'll learn more about at MDN docs.

See the example given below to understand how it works:

    p {
     user-select: none;
    }

In the above, I showed you how to disallow user selection for all paragraphs on the webpage.

Many websites provide multiple theming options, most of them in dark or light mode. Now, we can able to create multiple themes using CSS prefers-color-scheme media query. Using this we can easily detect and set styling without the need for javascript.

Let’s see the below example:

    /* Default Light Mode */
    body {
      background-color: white;
      color: black;
    }

    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
      body {
        background-color: black;
        color: white;
      }
    }

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles

Awesome CSS shorthand tricks to write less code

Roman — Mon, 07 Apr 2025 18:58:10 +0000

As a front-end developer, we all want is write less CSS code and get more while designing a web application.

If you’re someone who is curious about CSS tricks to write less code, then keep reading this article because, I'm share 11 awesome CSS shorthand tricks that help us write less and more optimized & maintainable code.

CSS inset property

The inset property is the shorthand property for top, right, left & bottom property.

Traditional way:

    .container {
      position: absolute;
      top: 10px;
      right: 0;
      left: 0;
      bottom: 10px;
    }

Less code with shorthand property 👇

    .container {
      position: absolute;
      inset: 10px 0;
    }

min() /max() function

The min() and max() functions are really useful for creating responsive CSS, as they allow you to set minimum and maximum values for sizing properties.

Traditional CSS Way:

    .card {
      width: 300px;
      max-width: 400px;
    }

Less code with shorthand property 👇

    .card {
      width: max(300px, 400px);
    }

CSS scale property

scale property is the shorthand property for transform: scale().

Traditional approach:

    .card {
      transform: scale(1.2);
    }

Less code with shorthand property 👇

    .card {
      scale: 1.2;
    }

:is() pseudo-class

The :is() pseudo-class allows us to apply same style to multiple selectors by grouping them. Learn more about :is() in detail.

Traditional approach:

    .form button, .form input {
      font-size: 18px;
      background-color: #e3e3e3;
      border: 1px solid #333;
    }

Less code with shorthand property 👇

    .form :is(button, input) {
      font-size: 18px;
      background-color: #e3e3e3;
      border: 1px solid #333;
    }

:has() pseudo-class

The :has() pseudo-class allows us to apply style conditionally. Learn more about :has() in detail().

    .card:has(a) {
      background-color: gray;
    }
    .card:has(img) {
      background-color: yellow;
    }

margin-inline / margin-block

margin-inline property is the shorthand property for horizontal margin, whereas, margin-block property is the shorthand property for vertical margin.

Traditional approach:

    .horizontal-margin {
      margin-left: 10px;
      margin-right: 20px;
    }

    .vertical-margin {
      margin-top: 15px;
      margin-bottom: 20px;
    }

Less code with shorthand property 👇

    .horizontal-margin {
      margin-inline: 10px 20px;
    }

    .vertical-margin {
      margin-block: 15px 20px;
    }

clamp() function

The clamp() function in CSS lets you set a value that automatically adjusts within a specified range, by defining a minimum, preferred, and maximum value for properties like width or font size.

Traditional approach:

    p {
      font-size: 24px;
    }

    @media max-width(992px) {
      p {
        font-size: 16px;
      }
    }
    @media max-width(678px) {
      p {
        font-size: 12px;
      }
    }

Less code with shorthand property 👇

    p {
      font-size: clamp(12px, 16px, 24px);
    }

CSS font property

Instead of defining separately font properties, you can use the shorthand font property to achieve the same thing

Traditional approach:

    p {
      font-size: 18px;
      font-weight: 600;
      font-family: "inter", sans-serif;
      line-height: 1.5;
    }

Less code with shorthand property 👇

    p {
      font: 600 18px/1.5 "inter", sans-serif;

CSS background property

The background property is the shorthand property for multiple background properties.

Traditional approach:

    .container {
      background-color: blue;
      background-image: url(pattern.svg);
      background-position: center;
      background-repeat: no-repeat;
    }

Less code with shorthand property 👇

    .container {
     background: blue url(pattern.svg) center no-repeat;

CSS animation property

Instead of defining different values of animation property separately, you can use shorthand animation property to achieve same behavior.

Traditional approach:

    .slide-animate {
      animation-name: slide;
      animation-duration: 2s;
      animation-timing-function: ease-in-oyt;
      animation-iteration-count: infinite;
    }

Less code with shorthand property 👇

    animation: slide 2s ease-in-out infinite;

CSS mask property

The mask property allow to hide parts of an element by applying masking .

Traditional approach:

    .masked {
      mask-image: url(mask-img.svg);
      mask-position: center;
      mask-repeat: no-repeat;
    }

Less code with shorthand property 👇

    .masked {
      mask: url(mask-img.svg) center no-repeat;

Wrapping up

By using these CSS shorthand properties & functions not just save time, but also maintain code, easy to read and optimized our code. By using these one-liner CSS tricks achieve same behavior as we did with traditional approach, but they are short & consume less time and easy to maintain with little knowledge.

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles

npm vs npx, which one is better?

Roman — Mon, 07 Apr 2025 18:37:33 +0000

Being a JavaScript developer, you come across the term npm & npx. Today I’m going to explain, what is npm vs npx, and their use-cases.

At the first glance, both npm and npx looks similar tools as they both deal with the package installation in our apps. But if we dig deeper we see they both servers the different purpose.

Understanding the differences between npm vs npx can significantly impact your development workflow.

Learn more about Choosing the right Package Manager Tool.

In this article, we focus on the comparison of npm vs npx to help you choose the right tool for your needs.

When you explore npm vs npx, you'll find that each serves unique purposes in JavaScript development.

What is npm?

To grasp the full utility of both tools, it's essential to dive deeper into npm vs npx.

npm (Node Package Manager) is the tool for installing and managing the packages & libraries in our project. There are ton of powerful packages available on npmjs website.

The command we use in this context is vital to differentiate between npm vs npx.

By reviewing the npm vs npx use cases, developers can streamline their workflows.

In contrast, npx provides a different approach, which we will explore in the npm vs npx discussion.

When considering npm vs npx, remember the key differences that affect package management.

Recognizing the distinction in npm vs npx will aid in better project management strategies.

Think of packages as a plugin which can be added via npm command. The npm tool can be installed via nodejs, and comes with a different commands for adding, deleting, updating any package in our application.

All the packages installed by npm are added to node_modules folder and record has been kept in a package.json file. You can also add package globally in your local system using npm command.

Let’s say, you want to add a formik (form handling) package into your react app. You may run this command.

Using npm vs npx effectively can improve your coding efficiency and project management.

Understanding npm vs npx is crucial for modern JavaScript developers.

Ultimately, the choice of npm vs npx depends on your specific workflow needs.

    npm install formik

Therefore, understanding npm vs npx is essential for effective JavaScript development.

This command add formik into your project’s node_module folder and update the package.json file. By simply running this command we can easily use this package in our react app just by importing it.

What is npx?

npx is a new tool that comes with the npm version v5.2.0. While npm is about installing packages, npx is about running packages. npx is used to run commands from packages without installing packages globally in your system. Confused? I’m also confused at this point.

This is the main difference between npm & npx. Let’s see an example to understand with a real-world example:

Lets say, we’re going to install react app using create-react-app package, which give us a complete boilerplate for quickly getting started with reactjs. It has a command associated with called create-react-app which setup the project for us.

With npm, It can be done like that:

    npm install -g create-react-app

We need to install package globally in order to use create-react-app .

    create-react-app frontend-challenge-app

Running this command setup react boilerplate for us.

In this case,

we need to manually manage our global apps, which takes space in our local system
Manually take care of updating this package for future versions.
The only good thing is it is available offline.

But using npx, It can skip the global installation, runs the command and quickly install & setup react boilerplate for us in a single command.

This way we don’t need to install globally.
Auto runs the commands setup boilerplate in a single command.
Every time running this command we get the latest & updated version.
It is not available offline.

Why was npx created?

We have seen two methods above and see the difference between them. But we are still wonder, why do we need npx when npm already exists?

The answer to this question is to make things more user-friendly by:

1.Avoiding the need to install package globally

Some packages of npm requires to run command, which is why we should need to install them globally. This can clutters our system with tools we used once.

npx eliminates this need by allowing to run command with installing globally. It not only saves our time but also prevent us from unnecessary global installations and also keep our development enviroment clean.

2. Runing the specific versions of packages

Once we install packages globally, it run only with a specific version. which we need to manually upgrade or downgrade to that node version.

But with npx, we can run a specific version of package on the fly.

When to use npm?

When we need to install and manage project dependencies. e.g, npm install formik
When we need to globally install useful packages. e.g, npm install -g nodemon

When to use npx?

When we needed to run CLI commands without installing them globally. e.g, npx create-react-app frontend-challenges
To run specific version of packages. e.g, npx eslint@7.5.0

Wrapping up

In summary, both npm vs npx have their strengths, and knowing when to use each is key.

npm & npx are both useful tools. They both serves the different purpose. If npm is used to add or manage project dependencies, npx simplifies the things for developers, especially when running one-off commands and avoid unnecessary installations.

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles

NPM vs Yarn vs PNPM: Choosing the right package manager for your project

Roman — Wed, 19 Feb 2025 19:37:56 +0000

Whether you’re a beginner or a professional javascript developer, chances are you may have encountered with these popular js package manager like npm, yarn, and pnpm.

As of now, you’ll find a list of node package managers, but these three are the most popular package managers in javascript world. These tools are used to handle dependencies of nodejs.

At the first glance, these all tools looks the same, but when it comes to managing dependencies in a javascript project, choosing the right package manager makes the difference.

With options like npm, yarn and the increasingly popular PNPM, developers wonder which one is best suites their needs node package manager

In this definitive guide, I’ll try to break down the stength, pros and cons and key features of these three major package managers, which hopefully helped choose right package manager for your next project.

1) NPM (The default Option)

npm (Node Package Manager) is the oldest and most widely used package manager for managing dependencies in nodejs application. npm comes pre-installed in nodejs which makes it the default option for managing dependencies.

From the security perspective, NPM has faced historical security challenges, including potential vulnerabilities from untrusted packages.

However, recent versions have introduced features like security audits (npm audit) to identify and fix vulnerabilities in your dependencies. Always review audit reports and update packages regularly.

Key Features:

With over 1.5 million packages, makes it the largest repository of open source libraries (npmjs.com).
npm is easy to use, with simple and straight-forward commands makes it a perfect choice for beginners.
As it comes built-in with nodejs, meaning you don’t need to install it separately.

Weeknesses:

One of the major down fall of npm is performance issues, makes slow installation of dependencies.
Earlier versions has global dependencies issues which lead of conflicts.

2) Yarn (Speedy & Reliable)

Yarn was developed by facebook in 2016 as an alternative of npm to solve some performance and security issues in the early versions of npm. It manages dependencies faster and in more reliable way.

Yarn emphasizes security with features like lockfiles (yarn.lock) to ensure consistent installations and prevent dependency hijacking. Yarn also performs integrity checks on downloaded packages to verify their authenticity.

Key Features:

Yarn uses parallel processing, which makes installation faster.
Yarn introduces a more reliable way of managing package-lock.json file, by ensuring consistent installation across different devices.
It also make it possible to manage monorepos by providing built-in support for larger projects.

Weeknesses:

In term of learning curves & syntex, yarn is little complex then npm.
Yarn mostly use npm packages, but their are some packages that are incompatible, that requires adjustments by developers in their workflow.
Yarn creates more files making node_module folder slightly larger then npm, which affect disk space.

3) Pnpm (Space Saver & high performant)

Pnpm stands for “Performant npm” is a another new candidate in package manager list of javascript. pnpm is consistantly taking developers attentions, and is growing faster. It solves some most annoying issues that we face in npm and yarn.

Pnpm uses Symlink system which drastically reduces disk space and speed up installations.

PNPM's unique approach of using a content-addressable file system offers enhanced security. By storing packages in a central location and symlinking them, PNPM reduces the risk of malicious packages injecting code into multiple projects. Also, PNPM's strictness helps avoid phantom dependencies

Key Features:

PNPM stores only one copy of each package, creating symlinks (shortcuts) for other projects that need it. This results in a more efficient use of disk space.
Like Yarn, PNPM also uses parallelization to speed up installations, but its symlink approach makes it even faster.
PNPM also supports monorepos, making it a strong competitor to Yarn in this area.

Weeknesses:

While pnpm aims to fully compatible with npm, but still certain cases can cause issues particularly with less common modules.
PNPM’s different way of managing dependencies might require some time to get used to.
Though growing fast, PNPM is still relatively new, so community support and resources might not be as abundant.

Which one to choose?

So, how do we choose the right package manager between npm, yarn and pnpm? Here is a quick breakdown:

npm: npm as a default option with simplicity, works greate on smaller projects. With the continues development on this project, npm has improved alot.
yarn: Perfect choice, if you want faster installation, security and wants to manage larger projects or mono-repos.
pnpm: if you want an efficient package manager in term of speed and disk space. If you’re working on large projects with many dependencies, PNPM’s symlink strategy will be a game-changer.

I hope this article clear the difference between 3 major package managing tools and help you choose the right tool for the right project. Their is no single tool that completely meets your all projects need. It dependes upon by projects requirements.

Thanks for reading at the end, you can always share your perspective in the comment box.

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles

Think and Grow as a Senior Developer: A Journey of Curiosity and Mastery

Roman — Thu, 06 Feb 2025 10:02:13 +0000

The journey to becoming a senior developer is not just about coding or learning the latest frameworks. It’s about nurturing curiosity, building resilience, and constantly challenging yourself to grow.

Whether you’re just starting your programming journey or already working in the tech industry, the path to senior-level expertise involves more than just writing great code.

In this blog, I am going to share some insights from my own journey — the transition from the discovery of computers to being a web developer, and the clear roadmap to grow into a senior developer.

Let’s walk through the power of curiosity, mastery of basics, resilience, and how it shapes your career.

Getting Started: The Power of Curiosity

For me, it all started with a question: What can I build with computers? In college, I was fascinated by the internet and computers. I wanted to understand how they worked and, more importantly, how I could use them to create something meaningful. This curiosity led me to explore web development, and what began as a simple hobby soon became my passion.

Curiosity is a pretty powerful driver. It makes you ask questions and seek answers because you want to know what lies ahead. And so, if you are at the very beginning, do not be afraid to ask questions such as:

How does a website load?
What happens when you type a URL into a browser?
How do different programming languages solve problems?

Curiosity keeps you motivated. It turns learning into an adventure rather than a chore. For instance, if you are curious about how websites are styled, examine the magic of CSS. Try changing colors, layouts, and fonts. Curiosity makes the most mundane actions opportunities to learn.

The Foundation: Mastering the Basics

When I first started out on my path to development, I spent two years focused only on HTML and CSS. No JavaScript or advanced frameworks for me. Instead, I took the time to learn the web's structure and design.

Why the basics? Because they’re the foundation for everything else. The better you know your fundamentals, the easier to learn more advanced technologies. For instance:

HTML is not about tagging; it is about creating meaningful structures using semantic elements like <header>, <section>, and <article>.
CSS is not about styling; it’s a tool for creating responsive designs that look great on any device screen size.

Suppose you wanted to make a simple portfolio site. First, you would focus on writing clean, semantic HTML for your structure, then using CSS to create a responsive design that works across different devices. The key is to focus on these basics as a strong foundation that supports future learning.

To get started if you’re not sure where to start, here are some fabulous resources.

Resilience: Get Over Expecting Perfection, Errors Are Learning Opportunities

I learned early on that mistakes are not failures, but stepping stones. Not many years into my career, I broke more things than I built. I recall spending hours debugging a simple issue only to realize that I had forgotten a semicolon. It was frustrating, but it taught me the importance of being careful and patient.

As a software engineer, you will face bugs, crashes, and roadblocks. The choice is to look at them with a growth mindset. Instead of thinking, “I am not good enough” ask yourself what can i learn from this?

For instance, if your JavaScript code is not working as you desire, do not freak out. Use the browser’s developer tools to debug step by step. Understand the root cause of the issue and then fix it. Each bug you solve builds your confidence and strengthens your problem-solving skills.

Real-World Connections: Relating Code to Everyday Life

To learn well, you have to take technical concepts and relate them to everyday life. The more you can connect abstract ideas with tangible experiences, the easier they are to understand.

For example:

Think of functions as recipes. They take ingredients (inputs), perform a process (steps), and produce an output (a dish).
Loops are like daily routines: watering your plants or checking your email every morning.
Arrays are similar to shopping lists, and they consist of labeled storage boxes.

When learning React, I visualized a Lego piece to represent a component. Each component was an independent piece but came together to form a larger building. This made concepts, like the reuse of the components and managing the state, much clearer.

Practice Makes Perfect: Building Projects

You will not be any nearer to becoming a senior developer by reading alone. Your practice is important. The more you build, the more you learn. Begin with the most achievable projects and keep increasing their complexity.

Here are some project ideas to get you started:

Your personal portfolio site
To-do list app to let you practice JavaScript and understand how data is managed
A weather app that uses APIs to fetch real-time data.
Or get ideas from these 50 Stunning Project

Each project will throw in new challenges. For example, when I built my first portfolio, cross-browser compatibility and image optimization were my first lessons. These little lessons added up over time and prepared me for larger, more complex tasks.

Other Platforms like Frontend Mentor and DevChallenges provide real-world design problems to practice with.

Learning New Technologies the Right Way

As you grow, you will need to learn new frameworks, libraries, and languages. But getting into all that without a plan can be confusing. Here’s my approach to learning new technologies:

Understand the problem it solves. For example, React simplifies building complex user interfaces by breaking them into reusable components.
Compare it with what you already know. For instance, since you know JavaScript, relate React’s state and props with variables and function arguments respectively.
Start simple: Create an app, like a counter, to reinforce basic concepts.

When I first learned React I was not immersing myself in things such as Redux, or server-side rendering. Instead, I was building a simple to-do application. It wasn’t until I had an easy understanding of how the whole thing worked that I created that much more complex application: a dashboard using APIs and charts.

Thinking Like a Senior Developer

A senior developer isn’t just somebody who writes efficient code; it’s more about strategic thinking. A senior developer would:

Understand complex problems by breaking them down into components
Ensure code is clean, hence maintainable, and others can read it
Mentors and guides junior developers in developing their skills.

Clear communication was so important when I first started working in a team. Instead of trying to do everything at once, I split the work into smaller tasks, prioritized them, and described what I was doing. It helped me stay organized and explained a lot to others about what they had to do with me.

To think like a senior developer, always ask:

Is my solution scalable?
Can someone else easily understand and maintain my code?
How can I make this process more efficient?

Final Thoughts

Becoming a senior developer isn’t some endpoint’s a lifetime journey of learning and growing. The path can be painful, but every line of code you write and every bug you fix brings you closer to mastery.

Remember, every expert was once a beginner. Stay curious, keep building, and don’t be afraid to make mistakes. With persistence and passion, you’ll not only grow as a developer but also inspire others along the way.

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles

Practical Tips for Clean Code and Reduced Prop Drilling in React

Roman — Thu, 06 Feb 2025 09:30:48 +0000

Like other React Developers, you often find yourself dealing with the common challenge of managing state and data flow efficiently.

One common issue that came in is Prop Drilling, where data is being passed from parent to child and deeply nested child components making all the components depend on each other. You can learn more about Props in React here.

It makes our code hard to manage, components are no longer reusable, and leads to bad code.

In this article, I’ll share some practical tips and tricks for writing cleaner code and avoiding prop drilling with code examples.

What is Prop Drilling?

The term Prop Drilling often means, when we want specific data from a parent component to a deeply nested component tree, and that data is being passed from each component in that tree and reaches a destination component.

This practice led us to complexity, hard to maintain, and made our components fully depend on each other which also destroyed the re-useability of components.

Take a look at the below image, the blue boxes represent the components hierarchy tree that passes the same props for the destination component.

Example Scenario:

Imagine you’re building an e-commerce application where users can browse products, view details, and add to a cart. The product data passed through each component from the parent to the deeply nested child component to serve product data. Here is an example:

    // Top-level component
    const ProductPage = () => {
      const products = [
        { id: 1, name: 'Product 1', price: '$10' },
        { id: 2, name: 'Product 2', price: '$20' },
      ];

      return (
        <ProductList products={products} />
      );
    };


    // Intermediate component
    const ProductList = ({ products }) => {
      return (
        <ul>
          {products.map(product => (
            <ProductCard key={product.id} product={product} />
          ))}
        </ul>
      );
    };


    // Deeply nested component
    const ProductCard = ({ product }) => {
      return (
        <li>
          <h2>{product.name}</h2>
          <p>{product.price}</p>
          <ProductDetails product={product} />
        </li>
      );
    };


    // Deeply nested component
    const ProductDetails = ({ product }) => {
      return (
        <div>
          <h3>{product.name}</h3>
          <p>{product.price}</p>
          <p>Details: Detailed description about the product.</p>
        </div>
      );
    };

If you see this example code, you’ll find it similar to the above image, where product data passed from ProductPage to ProductList then ProductCard and reaches the destination component at ProductDetails .

How to avoid Prop Drilling and writing Clean Code?

In the above example, you’ll see how data is drilled down from parent to deeply nested child component, which is now a bad practice and leads to so many bugs and is hard to maintain.

The actual solution proposed for this problem is to make the state global. This is what we call separation of concern, in which functionality is kept separate from the UI and used whenever it is needed.

To solve the prop drilling problem and implement the global state management solution, Here are some solutions with an example:

1) Context API

The Context API in React provides a way to share state to multiple components without passing the props through each component.

In Context API, functionality is managed in one place and the same data is consumed by only those components that need it.

See this example below to understand how Context API solves this problem with a simpler more easier solution:

    // Create a context for the product
    const ProductContext = React.createContext();

    const ProductProvider = ({ children, products }) => (
      <ProductContext.Provider value={products}>
        {children}
      </ProductContext.Provider>
    );

    // Top-level component
    const ProductPage = () => {
      const products = [
        { id: 1, name: 'Product 1', price: '$10' },
        { id: 2, name: 'Product 2', price: '$20' },
      ];

      return (
        <ProductProvider products={products}>
          <ProductList />
        </ProductProvider>
      );
    };

    // Intermediate component
    const ProductList = () => (
      <ProductContext.Consumer>
        {products => (
          <ul>
            {products.map(product => (
              <ProductCard key={product.id} product={product} />
            ))}
          </ul>
        )}
      </ProductContext.Consumer>
    );

    // Deeply nested component
    const ProductCard = ({ product }) => (
      <li>
        <h2>{product.name}</h2>
        <p>{product.price}</p>
        <ProductDetails />
      </li>
    );

    const ProductDetails = () => (
      <ProductContext.Consumer>
        {products => {
          const product = products.find(p => p.id === 1); // Example to find a specific product
          return (
            <div>
              <h3>{product.name}</h3>
              <p>{product.price}</p>
              <p>Details: Detailed description about the product.</p>
            </div>
          );
        }}
      </ProductContext.Consumer>
    );

In this example, ProductContext is used for sharing product data to each component where needed without drilling the props deeply.

2) Component Composition

Another great way to avoid prop drilling is by using the react best practice that involves the creation of nested smaller but reusable components to build complex UI. This is like the atomic design pattern i have explained previously where we think of each element as an atom and combine them to build widgets, modules, and so on.

This method helps to logically group related data and functionality. It helps us write cleaner code and reduce the need for prop drilling too.

By using Component Composition, imagine a user wants to see its info and orders on the User Dashboard Page.

Here is how we can implement this example using Component Composition:

    import React from "react";

    // Mock Data
    const user = {
      name: "Alice Doe",
      email: "alice@example.com",
    };

    const orders = [
      { id: 1, item: "Laptop", price: "$999", status: "Delivered" },
      { id: 2, item: "Headphones", price: "$199", status: "Shipped" },
      { id: 3, item: "Smartphone", price: "$799", status: "Processing" },
    ];

    // Main Dashboard Component
    const Dashboard = () => {
      return (
        <div>
          <h1>User Dashboard</h1>
          {/* Compose User Profile and Order List */}
          <div>
            <UserProfile user={user} />
            <OrderHistory orders={orders} />
          </div>
        </div>
      );
    };

    // User Profile Component
    const UserProfile = ({ user }) => (
      <div>
        <h2>User Profile</h2>
        <p><strong>Name:</strong> {user.name}</p>
        <p><strong>Email:</strong> {user.email}</p>
      </div>
    );

    // Order History Component
    const OrderHistory = ({ orders }) => (
      <div>
        <h2>Order History</h2>
        <ul>
          {orders.map((order) => (
            <OrderItem key={order.id} order={order} />
          ))}
        </ul>
      </div>
    );

    // Order Item Component
    const OrderItem = ({ order }) => (
      <li>
        <p><strong>Item:</strong> {order.item}</p>
        <p><strong>Price:</strong> {order.price}</p>
        <p><strong>Status:</strong> {order.status}</p>
      </li>
    );

    export default Dashboard;

3) Extract State Logic into Custom Hook

In the above example, you see how data can be managed globally in one place in Context API.

The only difference between custom hook way and Context API is Context is used to manage globally and components must be wrapped with Providers to share data.

But Custom Hooks work well with less data, like Fetching User Data and servers from one place. Here data is centralized but no wrapper is needed.

Whole logic is maintained in one place which is shared across different components to avoid prop drilling and keep code clean and non-repetitive.

Here is how we can achieve the same result with Custom Hook by extending Component Composition:

1) Creating Custom Hook:

    // Custom Hook
    import { useState } from "react";

    // Custom Hook: useDashboardData
    const useDashboardData = () => {
      const [user, setUser] = useState({
        name: "Alice Doe",
        email: "alice@example.com",
      });

      const [orders, setOrders] = useState([
        { id: 1, item: "Laptop", price: "$999", status: "Delivered" },
        { id: 2, item: "Headphones", price: "$199", status: "Shipped" },
        { id: 3, item: "Smartphone", price: "$799", status: "Processing" },
      ]);

      return { user, orders, setUser, setOrders };
    };

    export default useDashboardData;

2) Sharing data between different Components:

    import React from "react";
    import useDashboardData from "./useDashboardData"; // Import Custom Hook

    const Dashboard = () => {
      const { user, orders } = useDashboardData(); // State and data from the custom hook

      return (
        <div>
          <h1>User Dashboard</h1>
          <div>
            <UserProfile user={user} />
            <OrderHistory orders={orders} />
          </div>
        </div>
      );
    };

    const UserProfile = ({ user }) => (
      <div>
        <h2>User Profile</h2>
        <p>
          <strong>Name:</strong> {user.name}
        </p>
        <p>
          <strong>Email:</strong> {user.email}
        </p>
      </div>
    );

    const OrderHistory = ({ orders }) => (
      <div>
        <h2>Order History</h2>
        <ul>
          {orders.map((order) => (
            <OrderItem key={order.id} order={order} />
          ))}
        </ul>
      </div>
    );

    const OrderItem = ({ order }) => (
      <li>
        <p>
          <strong>Item:</strong> {order.item}
        </p>
        <p>
          <strong>Price:</strong> {order.price}
        </p>
        <p>
          <strong>Status:</strong> {order.status}
        </p>
      </li>
    );

    export default Dashboard;

Wrapping thing

React can be an amazing library, we can create or break things. But with the right knowledge and best practices, we can build amazing apps by writing clean code and managing the state very easily.

In this article, I tried to explain 3 different ways to avoid prop drilling problems along with best practices for writing clean code.

By focusing on these methods we’ll not only improve the performance of applications but also make the development process more efficient and enjoyable.

What method do you like the most? or which one you’re already using? (Share your thoughts in the comments)

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles

Discover 7 Amazing Tools for Image Optimization and Compression

Roman — Thu, 30 Jan 2025 04:00:00 +0000

Images are worth a thousand words, but if an image is too big to crash or takes too long to load, it can also destroy the user experience. That's why in this article, I'm going to share the best image optimization and compression websites.

While building a website or any app, optimizing for good speed is an important factor to keep in mind. Optimization includes many things, which also include images.

If an image is too big to take time it disturbs the user experience and increases the bundle size of our app, that's why we should take care of images.

As we're talking about image optimization, it should be kept in mind that image size must be as small as possible but not more than 150kb for a better experience.

We also need to take care of the quality of the image as well, that's where image optimization tools come into play. Luckily, in this article, I'm sharing some wonderful image optimization tools which not only reduce the size but also keep the quality of the image as well.

I’m not targeting developers only here, but everyone who wants to optimize images.

A single web application has as many images as we need it. These days, designers and developers use many different formats, like SVG and WebP images, which help load websites faster. They are also cached, which reduces the request load.

Many hosting platforms like cPanels provide configurations to convert images into webp format to improve the speed of web applications.

So, without further delay let's jump into the list of what are some of the best resources to reduce the size of our website by keeping the quality as well.

1) TinyPNG

In our list, TinyPNG took first place. This is such an amazing website that it makes image compression very easy with good UI.

You land on a website and the first screen you’ll the upload image button.

You don’t need to login/Register an account to start. It is also free for up to 20 images with a max size of 5MB at once, up to 100 images per month this is enough for someone with the free plan.

It also offers multiple pricing plans for someone who is kinda serious in image compression of big images with unlimited access at affordable prices.

2) Tinify

Tinify is the parent company behind the TinyPNG and TinyJPG websites. It shares the same UI, and pricing and is not only limited to PNG but it also accepts most used images like PNG, JPG, & WEBP images.

You can upload multiple format images in bulk each file with 5MB of max size and it works quite well and compresses without affecting your image quality.

3) Squoosh

Squoosh app is a completely free app for compress image size of any format.

It has quite an easy interface with shocking output. You can compress images as many as you want and no upload size limit.

Sqoosh was created by Google ChromeLab a browser-based application.

The only downside effect I see is, that you can compress one image at a time. But still, it is much more useful and easy to use for everyone who wants free image compression 😜

4) ILoveIMG

ILoveIMG is another amazing tool for image editing, optimizing, resizing, and converting to another format.

This tool allows us to compress the image in different formats like jpg, png, SVG, and gif and compress to its best match quality and ratio.

You can upload images in bulk with any size and any format and it can optimize each uploaded image.

5) Online Image Tool

Online Image tool is a great photo compressor online tool, that not only compresses images of different formats but also converts, resizes, and edits images online.

The Online Image Tool provides an easy interface with a good compression ratio of up to 90% for image optimization.

You don’t need to log in/register to start optimizing images. The good thing about this tool is that it like other tools also allows to upload images in bulk and with no specific upload size.

6) Optimizilla

Optimizilla serves as a simple interface for image compression. This tool accepts jpg, gif, png, and jpeg optimizer. We can upload a maximum of 20 images in bulk for compression.

This tool provides a preview after image compression, which is useful for those who want to reduce the size but keep the quality as well.

7) Compressor.io

Compressor.io provides a fast and efficient image compression tool online with a super clean interface with above 90% compression ratio.

This tool accepts only JPG, PNG, SVG, Webp, and gif images for optimization. With a straightforward and easy-to-use interface, we can upload multiple images in bulk with a max size of 10MB.

Image compression is an essential tool for creating digital assets for good performance and easy to load. Whether you’re a designer developer or someone who is looking to optimize image. These above resources work for all of you.

I personally used these resources for years as a web developer & designer and now I'm sharing them with you all to take the benefit.

Thanks for making it so far to the end.

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles

How to Use Styled-Components for Elegant React UI Design

Roman — Wed, 29 Jan 2025 09:30:00 +0000

Creating a user interface with React is a pleasure for many developers, but ensuring those interfaces are both visually appealing and easy to maintain can be a bit tricky. That's where Styled-Components comes into play.

In the previous blog you see how to use tailwindcss in react app for faster designing your apps with static classes. Styled-Components is a fantastic library that simplifies the process of styling your React components. In this blog, we’ll see what React Styled Components are, how to use them, and how they can enhance your UI design skills.

What are Styled-Components?

Styled-Components is a library that allows you to write CSS directly within your JavaScript files (CSS-in-JS), ensuring that your styles are scoped to individual components. Rather than managing separate CSS files, you define your styles alongside your component logic.

Styled-Components utilizes tagged template literals in JavaScript to generate unique class names, preventing style collisions. At its essence, it focuses on encapsulation and simplicity.

Styled-Components simplifies the process of maintaining, reusing, and modifying your styles over time. Additionally, it integrates seamlessly with React’s component-based architecture.

Getting Started with Styled-Components

In order to start using React Styled Components, you first need to install the library. Open your terminal in the React project folder and run:

    npm install styled-components
    # Install this Additional Types, if you're using typescript
    npm install @types/styled-components

Once installed, you can immediately start using Styled Components in your React app. Look how simple it is to install and use the styled-components library in React.

How to create a React Styled Component?

Creating a styled component is super simple. Let’s say we want to create a button with custom styles. Instead of writing CSS in a separate file, you can do this:

    import styled from 'styled-components';

    const StyledButton = styled.button`
      background-color: #4caf50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;

      &:hover {
        background-color: #45a049;
      }
    `;

    const App = () => (
      <StyledButton>Click Me</StyledButton>
    );

    export default App;

Here, we’ve created a StyledButton component that can be reused anywhere in your app. Notice how you can also use pseudo-classes like :hover. This is all standard CSS but with the added benefit of React-style encapsulation.

Dynamic Styling with Props

One of the coolest features of Styled Components is the ability to dynamically style components based on props. Let’s modify our button to accept a primary prop:

    const StyledButton = styled.button`
      background-color: ${(props) => (props.primary ? '#007BFF' : '#4caf50')};
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;

      &:hover {
        background-color: ${(props) => (props.primary ? '#0056b3' : '#45a049')};
      }
    `;

    const App = () => (
      <div>
        <StyledButton primary>Primary Button</StyledButton>
        <StyledButton>Secondary Button</StyledButton>
      </div>
    );

We’ve made our component more versatile and reusable with just a few lines of code. You can pass any prop you like and use it to style your components dynamically.

Using Styled-Components for Layouts

In React Styled Components aren’t just for small elements like buttons; they’re fantastic for creating layouts too. Let’s say we want a flexbox container and some grid elements:

    const FlexContainer = styled.div`
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f4f4f4;
    `;

    const GridItem = styled.div`
      width: 100px;
      height: 100px;
      background-color: #007BFF;
      margin: 10px;
    `;

    const App = () => (
      <FlexContainer>
        <GridItem />
        <GridItem />
        <GridItem />
      </FlexContainer>
    );

With these simple components, you can structure complex layouts while keeping your code clean and manageable.

Media Queries with Styled-Components

Responsive design is essential, and Styled-Components makes adding media queries straightforward. Here’s how you can include them:

    const ResponsiveBox = styled.div`
      width: 50%;
      height: 100px;
      background-color: #ff5722;

      @media (max-width: 768px) {
        width: 100%;
      }
    `;

    const App = () => <ResponsiveBox />;

The box will take up 50% of the width on larger screens but will become 100% wide on screens smaller than 768px. No external CSS files are required!

Theming with Styled-Components

Theming is where Styled-Components really shines. You can create a central theme and apply it across your app using the ThemeProvider:

    import { ThemeProvider } from 'styled-components';

    const theme = {
      primary: '#007BFF',
      secondary: '#4caf50',
    };

    const StyledButton = styled.button`
      background-color: ${(props) => props.theme.primary};
      color: white;
      padding: 10px 20px;
    `;

    const App = () => (
      <ThemeProvider theme={theme}>
        <StyledButton>Click Me</StyledButton>
      </ThemeProvider>
    );

With theming, you can maintain consistency across your application while making it easier to adapt to different designs in the future.

Using Styled-Components with Custom CSS

If you already have CSS files or stylesheets, you can use Styled-Components to integrate those styles. For instance, you can extend existing styles:

    const BaseButton = styled.button`
      padding: 10px 20px;
      border-radius: 5px;
    `;

    const CustomButton = styled(BaseButton)`
      background-color: #4caf50;
      color: white;
    `;

    const App = () => <CustomButton>Click Me</CustomButton>;

This approach allows you to leverage existing styles while keeping the flexibility of Styled-Components.

Using Styled-Components with TailwindCSS

If you love TailwindCSS but also want the benefits of Styled-Components, you can combine the two. Styled-Components can wrap Tailwind classes for a hybrid approach:

    const TailwindButton = styled.button.attrs({
      className: 'bg-blue-500 text-white py-2 px-4 rounded',
    })``;

    const App = () => <TailwindButton>Click Me</TailwindButton>;

This method lets you enjoy the utility-first nature of Tailwind alongside the component-based encapsulation of Styled-Components.

Using Styled-Components with design libraries

Design libraries like Material-UI or Ant Design are popular in React development. Styled-Components can be used to customize their components. Here’s an example with Material-UI:

    import styled from 'styled-components';
    import Button from '@mui/material/Button';

    const StyledMuiButton = styled(Button)`
      background-color: #4caf50 !important;
      color: white !important;

      &:hover {
        background-color: #45a049 !important;
      }
    `;

    const App = () => <StyledMuiButton>Click Me</StyledMuiButton>;

This approach gives you the best of both worlds—design consistency and the ability to fine-tune your styles.

Final Thoughts

Styled-Components is a revolutionary tool for modern UI development with React. It provides a clean, reusable, and dynamic approach to styling components, which helps keep your codebase organized and easy to maintain.

Whether you're working on small components, creating layouts, or setting up themes, Styled-Components has everything you need.

Its compatibility with design libraries, custom CSS, and even utility-first frameworks like TailwindCSS makes it an exceptionally flexible option.

If you haven't explored Styled-Components yet, consider using it in your next project, it could become your go-to styling solution.

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles

How To Integrate TailwindCSS In React To Quickly Styling Our App?

Roman — Wed, 29 Jan 2025 04:00:00 +0000

TailwindCSS has become one of the most popular utility-based CSS frameworks for designing web applications. It’s highly versatile and works seamlessly with any front-end framework or library, including Reactjs. In this guide we'll explore how to integrate TailwindCSS in React.

In this beginner’s guide to React.js, I’ve included TailwindCSS because it pairs so well with React, making it easy to design web apps faster and more efficiently.

Today, many web apps are built using the React + TailwindCSS combination, a dynamic duo for developers prioritizing speed and flexibility in UI development.

In this guide, we’ll explore why TailwindCSS is a go-to choice for styling, walk through the steps to integrate it into a React project and tackle the real-world challenge of styling a product list page.

What is TailwindCSS?

Tailwindcss is a utility-based CSS framework, meaning each CSS property has its own CSS class. It allows developers to style their web page without writing custom CSS.

Unlike traditional CSS frameworks like Bootstrap, TailwindCSS gives developers granular control over the design without being limited by predefined components.

With its utility-first approach, you can:

Build responsive designs effortlessly.
Avoid creating complex CSS files.
Focus on reusable classes that are easy to understand and modify.

TailwindCSS is a game-changer for modern web development, offering flexibility, speed, and scalability.

Why is TailwindCSS the go-to choice for styling?

TailwindCSS now become the go-to choice for styling web applications. Because it makes the styling super easy, you can style your elements right in HTML without jumping back and forth between files.

The thing I like most about tailwindcss is that we can fully customize or create our own design system using tainwind.config.js file.

Another best part? TailwindCSS has an amazing ecosystem. The documentation is clear and easy to understand. There are plenty of plugins to extend the functionality and community support is fantastic.

Here's why developers love TailwindCSS, because,

Easy to use
Customizable
Responsive Design Made Simple
Faster Development
Great Ecosystem

Step-by-Step Guide to Integrate TailwindCSS in React

Let’s dive into the integration process. Follow these steps to add TailwindCSS to a React project and start styling right away.

Step 1: Create a React App

First, set up a React app. If you already have one, you can skip this step. Otherwise, use the following command to create a new React application:

    npx create-react-app my-app

Navigate to your project directory:

    cd my-app

Step 2: Installing TailwindCSS in React

Install TailwindCSS and its peer dependencies using npm or yarn. Run this command:

    npm install -D tailwindcss postcss autoprefixer

ShellScript

Next, generate the tailwind.config.js file:

    npx tailwindcss init

This will create a default configuration file where you can customize TailwindCSS settings.

Step 3: Configuring TailwindCSS in our app

Update the tailwind.config.js file to specify the paths to all your template files. This ensures TailwindCSS purges unused styles during production builds:

    module.exports = {
      content: [
        "./src/**/*.{js,jsx,ts,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    };

Next, add the Tailwind directives to your CSS file. Locate or create a src/index.css file, then include the following:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

Finally, import this CSS file into your React project. Open src/index.js and add:

    import './index.css';

That’s it! TailwindCSS is now integrated into your React project.

Developers are always in search of the solution for faster development and pre-built components. That's why there are so many tailwind-based reactjs-specific component libraries available. Here is a list of some of the best tailwindcss based react-specific components libraries.

Design a Product Preview Card (Challenge)

I have taken this Product Preview Card - Challenge by Frontendmentor.io. In this article, you'll only see how to design this Product Preview Card using TailwindCSS & React.

Learning by doing is a good way to master something, that's why I choose to build a small project. You'll find the working demo here, and access the check code at GitHub.

Once I take challenge, after downloading initial files from frontendmentor.io. I need to configure some styles in my tailwind.config.ts file (I'm using typescript that's why file extension is .ts).

Here is why final tailwind.config.ts file looks like:

    import type { Config } from "tailwindcss";

    const config: Config = {
      content: [
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
      ],
      darkMode: "class",
      theme: {
        extend: {
          screens: {
            xs: "400px",
            xxs: "300px",
          },
          colors: { // Customize & Define design specific colors here
            productPreview: {
              dark_cyan: "hsl(158, 36%, 37%)",
              cream: "hsl(30, 38%, 92%)", 
              dark_blue: "hsl(212, 21%, 14%)",
              grayish_blue: "hsl(228, 12%, 48%)"
            }
          },
        },
      },
      plugins: [],
    };
    export default config;

Once my colors are defined here, now I can use color anywhere in my project e.g, text-productPreview-dark_cyan, bg-productPreview-cream. Did you see, how easy it is to define color once and use them for all, like, text-color, background, border, and so on.

Next, we'll see the actual card. I created a separate component for the Product Preview Card using react components. Here is the complete code:

    import React from 'react'

    export default function ProductPreviewCard() {
      return (
        <section className="bg-white max-w-[500px] sm:max-w-[700px] overflow-hidden rounded-lg grid grid-cols-1 sm:grid-cols-2">

            {/* product image */}
            <picture className='w-full h-full object-center'>
                <source srcSet='/icons/product-preview-card/image-product-mobile.jpg' media="(max-width:639px)" className='w-full h-full object-cover' />
                <img src='/icons/product-preview-card/image-product-desktop.jpg' alt="Product Image" className='w-full h-full object-cover' />
            </picture>

            {/* text content */}
            <article className="p-6 sm:p-8 flex flex-col justify-between">
                <p className='uppercase text-productPreview-grayish_blue font-medium tracking-[0.3em]'>Perfume</p>
                <h1 className='mt-4 sm:mt-6 text-3xl sm:text-4xl font-bold'>Gabrielle Essence Eau De Parfum</h1>
                <p className='mt-4 sm:mt-6 text-base text-productPreview-grayish_blue font-medium'>A floral, solar and voluptuous interpretation composed by Olivier Polge, 
                Perfumer-Creator for the House of CHANEL.</p>

                <div className="flex items-center gap-4 mt-6 sm:mt-8">
                    <h2 className='text-productPreview-dark_cyan font-bold text-3xl'>$149.99</h2>
                    <p className='text-sm line-through text-productPreview-grayish_blue font-medium'>$169.99</p>
                </div>

                <button type='button' className='bg-productPreview-dark_cyan rounded-lg p-4 text-base text-white flex items-center gap-2 justify-center w-full mt-8'>
                    <img src='/icons/product-preview-card/icon-cart.svg' alt='cart icon' />
                    <span>Add to Cart</span>
                </button>

            </article>

        </section>
      )
    }

You'll see a lot of code here, but I want you to just focus on className attribute. This is all I have no extra or custom CSS I used here nor are these classes used in any CSS file. All these classes are generated & provided by TailwindCSS, which we used here.

Here is the Output result of Challenge Completed:

After the compilation, tailwindcss generates these classes and bundles only those classes that are used here into a CSS file. This is good for optimization purposes to keep the smaller size of the file.

Wrapping up

Integrating TailwindCSS with React allows you to build stylish, responsive web apps quickly and efficiently. With its utility-first approach, you can focus on crafting delightful user interfaces without worrying about writing extensive CSS from scratch.

Whether you’re a beginner or a seasoned developer, mastering the React + TailwindCSS combination is a valuable skill that will enhance your workflow and productivity.

Ready to give it a try? Start building with React and TailwindCSS today, and watch your styling process become smoother than ever!

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles

Forem: Roman

JavaScript string manipulation technique Every Developer Should Know [Part 2]

1) Hide Credit Card Digits (Show Last 4 Digits)

2) Convert a String to Title Case

3) Truncate a String to a Specific Length

4) Extract the Domain Name from an Email Address

5) Remove Non-Alphanumeric Characters

6) Count Occurrences of a Substring in a String

7) Reverse a String

8) Validate if a String is a Palindrome

9) Generate a Random String (for Unique IDs or Tokens)

10) Convert a Hyphenated or Underscored String to Camel Case

11) Escape HTML Special Characters

12) Remove Duplicates from a String

13) Slugify a String

14) Email Validation Using Regex

15) Copy to Clipboard

16) File Size Formatter

17) Validate URL

18) Encrypt & Decrypt Strings

19) Generate UUID (Universally Unique Identifier)

20) Format the Date to a Readable String

JavaScript string manipulation technique Every Developer Should Know [Part 1]

1) Convert to Uppercase & Lowercase

2) Extract a Substring with substring()

3) Extract a Substring with substr()

4) Slice a string

5) Split a String

6) Replace a Substring

7) Replace All Occurrences

8) Trim Whitespace

9) Remove Leading or Trailing Whitespace

10) Get Character at a Specific Index

11) Get the Unicode Value of the Character

12) Search inside the String

13) Find the Index of a Substring

14) Check if String Starts or Ends with a Substring

15) Repeat a String

16) Pad a String

17) Using Template Literals

18) Formatting Currency Using .toLocaleString()

Tailwindcss dynamic arbitrary values issue resolved

What is the actual problem?

How to apply dynamic values in arbitrary values in tailwindcss?

What is safelist in Tailwind CSS?

What are the drawbacks of using safelist soo much?

1) Increase the bundle size

2) Manually Managing

3) Harder to Scale

Wrapping Up

Interesting CSS features that reduce the need for javascript

1) Validating Number Range Input

2) Input Validation Error Indicator

3) Paragraph Styling & Control

4) Styling the Editable Content on Webpage

5) Allow/Disallow User Selection

Awesome CSS shorthand tricks to write less code

CSS inset property

min() /max() function

CSS scale property

:is() pseudo-class

:has() pseudo-class

margin-inline / margin-block

clamp() function

CSS font property

CSS background property

CSS animation property

CSS mask property

Wrapping up

npm vs npx, which one is better?

What is npm?

What is npx?

Why was npx created?

1.Avoiding the need to install package globally

2. Runing the specific versions of packages

When to use npm?

When to use npx?

Wrapping up

NPM vs Yarn vs PNPM: Choosing the right package manager for your project

1) NPM (The default Option)

2) Extract a Substring with `substring()`

3) Extract a Substring with `substr()`

18) Formatting Currency Using `.toLocaleString()`

What is `safelist` in Tailwind CSS?