Streamlining Project Setup with Vireta: Vite, React, and Tailwind CSS Made Easy

Tonal Mathew — Tue, 13 Feb 2024 14:30:43 +0000

Introduction
Welcome to the world of Vireta (vi-re-ta), a powerful tool designed to simplify the process of setting up Vite projects with React and Tailwind CSS. In today's fast-paced development environment, efficiency is key, and Vireta aims to streamline project setup, allowing you to focus more on building your applications and less on configuration headaches.

Overview of Vireta
Vireta is a command-line tool that automates the creation of new Vite projects with React and Tailwind CSS integration. With Vireta, you can kickstart your projects with a solid foundation, complete with the latest tools and configurations, in just a few simple steps.

Getting Started
To get started with Vireta, simply install it globally using npm or use it directly by npx:

npm install -g vireta

vireta create <project-name>

npx vireta create <project-name>

Understanding the Workflow
When you create a new project with Vireta, it follows a straightforward workflow:

Project Initialization: Vireta initializes a new Vite project with React template.
Installing Dependencies: It installs the necessary dependencies including Tailwind CSS, PostCSS, and Autoprefixer.
Configuring Tailwind CSS: Vireta configures Tailwind CSS with preflight set to false by default, you can change that in tailwind.config.js file.
Customizing Project Files: It updates project files such as index.css, App.css, and App.jsx to include Tailwind CSS imports and configurations.

Handling Existing Projects
If you already have an existing project or directory with the same name, Vireta prompts you to choose how to proceed. You can opt to remove existing files, change the directory name, or cancel the operation altogether.

Conclusion
With Vireta, setting up Vite projects with React and Tailwind CSS has never been easier. By automating the tedious setup process, Vireta empowers developers to kickstart their projects quickly and efficiently. Give Vireta a try for your next project and experience the difference firsthand!

For more information and detailed documentation, check out the Vireta GitHub repository. Happy coding! 🎉

Converting image to CSS box-shadow property.

Tonal Mathew — Sat, 29 Jul 2023 09:29:21 +0000

How to convert image to a CSS box-shadow property?

Before we deep dive into that let's take a look at Images.

What is an image?
In simple context we all know that images are composed of pixels and colors.

What is a pixel?
Pixel is a tiny square or dot that contains a single color. When millions of pixels are arranged in a grid, they collectively create an image.

Now we know about images, Now lets take a look at how we can extract the pixel values and corresponding colors from an image.
For extracting image data we will be using Jimp

What is Jimp?
Jimp is a JavaScript image processing library that enables us to work with images in various ways, such as resizing, cropping, applying filters, and reading pixel data. It is particularly useful for handling image manipulation tasks in a Node.js environment.

How do we extract image data using Jimp
Jimp has an asynchronous method read(), which will take an image as parameter and it will return some data as promise.

const image = await Jimp.read('./path/to/an/image.jpg');

Now lets take a look at image data that we are getting.

Jimp {
  ...,
  bitmap: {
    width: 275,
    height: 344,
    data: <Buffer f8 ff f3 ff ff fe ... 378350 more bytes>
  },
  ...,
}

With that Jimp.read() function we will get a lot of data, but for our purpose we only nee the bitmap data, which contains properties like width, height and data. This data field contains the r, g, b, a values of the image that we pass. you can loop through the data and extract the r, g, b, a value of each pixel. For that we can use this code.

const { bitmap: { data } } = image;

    for (let i = 0; i < data.length; i += 4) {
      const r = data[i];
      const g = data[i + 1];
      const b = data[i + 2];
      // we don't need `a` value so we skip that.
    }

Now how can we convert it into box-shadow property, before that let's take a look at the CSS box-shadow property.

box-shadow
The syntax of box-shadow property is:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

Horizontal offset: The horizontal distance the shadow should be offset from the element.
Vertical offset: The vertical distance the shadow should be offset from the element.
Blur radius: The amount of blurring applied to the shadow.
Spread radius: The amount the shadow should be spread out or contracted.
Color: The color of the shadow.

That's not all about it, we could add multiple box shadows to an element.
The syntax for adding multiple box shadow will look like this:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color], 
            [horizontal offset] [vertical offset] [blur radius] [spread radius] [color], 
            ...;

Ok now let's go back to our r, g, b value that we extracted from the image data. we can convert the r, g, b to color using the rgba(r, g, b).

Is that it? No, we need the horizontal and vertical values. We don't need the blur radius, so it will be 0px, but we need the spread radius.
Spread radius doesn't depend on the image data, so we will give it a solid value of 1px. If you gave the spread radius a value of less than 1px the image won't get displayed. If it is greater than 1px the image won't look good, so we stick to 1px.

Now that's settled, so how can we find the horizontal and vertical value?
we could use the same loop that we used to extract the r, g, b values. To get the horizontal and vertical values we could use this code.

const { bitmap: { width, data } } = image;

    for (let i = 0; i < data.length; i += 4) {
      const x = (i / 4) % width; // horizontal
      const y = Math.floor(i / (width * 4)); // vertical
      const r = data[i];
      const g = data[i + 1];
      const b = data[i + 2];
    }

The x and y values that we get will be the (x, y) coordinates of each pixel and the r, g, b will be the corresponding color value to that pixel.

Now we get all the values that we need, now we only need to transform these data to box shadow values. For that we could use an array to push the data to it.

    const boxShadowArr = [];
    const { bitmap: { width, data } } = image;

    for (let i = 0; i < data.length; i += 4) {
      const x = (i / 4) % width;
      const y = Math.floor(i / (width * 4));
      const r = data[i];
      const g = data[i + 1];
      const b = data[i + 2];

      boxShadowArr.push([`${x}px ${y}px 0px 1px rgba(${r},${g},${b})`]);
    }

And that's it, now we can write the boxShadowArr to a CSS file as a box shadow property.

fs.writeFile(
    "./style.css",
    `.image-to-css {
        box-shadow: ${boxShadowArr.join(',\n')};
      }`
    );

The final code will look like this:

    const image = await Jimp.read(imagePath);

    const boxShadowArr = [];
    const { bitmap: { width, data } } = image;

    for (let i = 0; i < data.length; i += 4) {
      const x = (i / 4) % width;
      const y = Math.floor(i / (width * 4));
      const r = data[i];
      const g = data[i + 1];
      const b = data[i + 2];

      boxShadowArr.push([`${x}px ${y}px 0px 1px rgba(${r},${g},${b})`]);
    }

await fs.writeFile(
    "./style.css",
    `.image-to-css {
        box-shadow: ${boxShadowArr.join(',\n')};
      }`
    );

If you want to use await you should keep it in an async function.

Hooray 🎉, you have successfully converted an image file to CSS box shadow property.

For you to try this I have created a CLI tool called image-to-css.
You can install it using npm and use it. The tool will take in an image file path as an argument and create a new CSS file as output.

And that's it, thanks for reading ⚡.

DEV Community: Tonal Mathew

Streamlining Project Setup with Vireta: Vite, React, and Tailwind CSS Made Easy

Converting image to CSS box-shadow property.

How to convert image to a CSS box-shadow property?