Forem: Jyothikrishna

Introducing UVM TB Templates

Jyothikrishna — Tue, 18 Feb 2025 05:02:14 +0000

Introduction

Starting a new RTL verification project with UVM? Tired of building test environments from scratch every time? You’re not alone! I’ve felt that pain, and that’s why I’m excited to announce the release of UVM Testbench Templates, a project designed to give you a significant head start in your verification efforts.

Motivation

In modern, coverage-driven verification, progress often stalls until the test environment is fully developed. The more time you spend on setup, the longer your overall project timeline becomes. The solution? A set of generic UVM test environments that can be easily customised for any project.

How to use UVM TB Templates

UVM TB Templates is available as a public repository on Github.

UVM TB Templates currently supports 2 templates.

Generic uvm test env with only one uvm_agent (active) without coverage support available on main branch.

Above template with coverage support available on coverage branch.

In addition to that the repository also contains an runnable example created with template 1 present in main branch.

Visit the Github repo and choose the template you want to use.

Using the templates is straightforward. Each template has its own directory with a README file. This README contains the git clone command you need. Simply copy and paste it into your terminal to download the template. The downloaded template includes its own README with step-by-step setup instructions. Follow these instructions, and you’ll have a functional test environment ready to go.

License

Contribute to UVM TB Templates

Currently UVM TB Templates only has 2 templates which might not be able to address the needs of all the RTL Verification engineers out there.

I believe in Open source! If you have a template you’d like to share or suggestions for improvements, please open a pull request. Additionally you can reach out to me at jyothikrishna.in@ieee.org.

Audit your sites 10X faster with Unlighthouse

Jyothikrishna — Tue, 19 Sep 2023 05:05:21 +0000

Introduction

Lighthouse is a powerful tool for auditing the performance, accessibility, and best practices of web pages. It is built into Chrome DevTools and can be used to audit individual pages or entire websites.

Unlighthouse is an open-source tool that builds on top of Lighthouse to provide a number of advantages, including:

Speed: Unlighthouse is significantly faster than Lighthouse, especially for auditing large websites.
Scalability: Unlighthouse can audit websites of any size, while Lighthouse can struggle to audit large websites without crashing.
Ease of use: Unlighthouse has a user-friendly interface that makes it easy to configure and run audits.
Extensibility: Unlighthouse is open source and extensible, so you can customize it to meet your specific needs.

Additionally, Unlighthouse allows you to audit multiple routes at a time, which is not possible with Lighthouse.

How to use Unlighthouse CLI

The Unlighthouse CLI is a command-line tool that allows you to run Unlighthouse audits from your terminal. This is useful for automating audits and integrating Unlighthouse into your CI/CD pipeline.

To use the Unlighthouse CLI, you will need to install Unlighthouse globally. You can do this with the following command:

npm install -g unlighthouse

Once Unlighthouse is installed, you can run an audit on your website using the following command:

npx unlighthouse --site <your-site>
# OR pnpm dlx unlighthouse --site <your-site>

For example, to run an audit on the my portfolio, you would use the following command:

npx unlighthouse --site https://jyothikrishna.vercel.app

If you run it you will unlighthouse audit my portfolio and it will display the output on localhost:5678. Here is an demo pic for your reference 👇

The Unlighthouse CLI also supports a number of other options. You can see a list of all the options by running the following command:

npx unlighthouse --help

Here are some examples of how to use the Unlighthouse CLI to audit a website with 5-10 routes:

To audit all of the routes on your website, you can use the following command:

npx unlighthouse --sitemaps https://your-website.com/sitemap.xml

To audit a specific subset of routes on your website, you can use the --include and --exclude options. For example, to exclude about route on your website, you would use the following command:

npx unlighthouse --site <siteURL> --exlude about

To audit your website with different settings, you can use the --config option. For example, to audit your website with the mobile settings, you would use the following command:

npx unlighthouse --site <siteURL> --config chrome-mobile.config.json

I encourage you to experiment with the Unlighthouse CLI to see how it can meet your specific needs. Here is the link to official docs.

Conclusion

Unlighthouse is a powerful tool that can help you improve the quality of your website. It is faster, more scalable, and easier to use than Lighthouse. The Unlighthouse CLI is also a great option for automating audits and integrating Unlighthouse into your CI/CD pipeline.

If you are auditing a website with 5-10 routes or more, I highly recommend using Unlighthouse instead of Lighthouse. You will save a significant amount of time and frustration.

If you enjoyed reading this post and want to stay connected, make sure to check out my Linktree.

Happy Hacking

Top 5 Advanced Tailwind Tips to Supercharge Your Web Development

Jyothikrishna — Tue, 04 Jul 2023 05:37:11 +0000

Introduction

Tailwind CSS has gained immense popularity among web developers due to its utility-first approach and easy customization options. While many developers are familiar with the basics of Tailwind, there are several advanced techniques and tips that can take your Tailwind skills to the next level.

In this article, we will explore the top five advanced Tailwind tips that will help you optimize your workflow, enhance your designs, and make your development process more efficient.

Copying classnames is perfectly fine

Many times you might have come across a situation where you repeat a classnames a bunch of time like this 👇

 <ul>
      <li className="text-lg font-medium text-blue-600 hover:opacity-80">
        Home
      </li>
      <li className="text-lg font-medium text-blue-600 hover:opacity-80">
        About
      </li>
      <li className="text-lg font-medium text-blue-600 hover:opacity-80">
        Contact
      </li>
      <li className="text-lg font-medium text-blue-600 hover:opacity-80">
        Signin
      </li>
 </ul>

You might get tempted to create a separate component for <li> to apply styles. Creating a separate component for <li> solely to apply styles may not be necessary, in my opinion. Instead, you can leverage the capabilities of your text editor, such as multi-cursor editing. Alternatively, you can style a single <li> first, applying the desired design, and then simply copy the class names from that <li> to reuse them elsewhere. This approach can save time and streamline the development process

Dark mode

If you have implemented a dark mode using the class strategy, you may have noticed that your sidebar appears white in color, which doesn't look quite right. To resolve this issue, you can rectify it by setting the color-scheme property of html element to light dark.

html.dark{
    color-scheme: dark light;
}

If you're unsure about implementing dark mode in a React+Tailwind project, I have written a detailed article explaining the process. Take a look to learn how to effectively incorporate dark mode into your projects.

View artcle

Using `ring` utility to create shadows

Tailwind provides pre-defined classes for box-shadow, but none of them create an evenly distributed shadow in all four directions. However, you can accomplish this by utilizing the ring utility.

className = "ring-1 ring-black/10"

Optimize Workflow with Plugins

Tailwind offers a vast ecosystem of plugins that extend its functionality and streamline your workflow. Plugins can add new components, utilities, or even integrate with other libraries. Familiarize yourself with popular plugins such as Typography, Forms, Aspect Ratio, or Transition utilities to boost your productivity.

By leveraging plugins, you can enhance your designs and reduce the need for writing custom CSS.

If you are building a PWA you should definitely check this plugin I made. It helps you to increase the UX of your PWA.

Using `tailwind-merge` instead of regular classname constructer

When incorporating Tailwind CSS into a JavaScript framework, you might have utilized packages such as classnames or clsx to dynamically generate class names for elements based on your custom logic. These packages streamline the task of conditionally adding class names, making the process much simpler and more efficient.

However, if you're building your own design system and require your components/elements to accept a classname prop that can modify specific styles of your components, I suggest utilizing tailwind-merge instead of clsx or classnames.

Imagine this is how you are computing classname for your component

type Props = ComponentProps<"a">;
const Test = ({ className, ...rest }: Props) => {
  return (
    <a
      {...rest}
      className={clsx(
        "classes required to satisfy your design system",
        className
      )}
    >
      Test
    </a>
  );
};

for arguments sake let's assume this the className

 className={clsx("text-blue-600 text-4xl font-bold", className)}

and you wish to change the text color to fuchsia-600, you can easily pass text-fuchsia-600 as the className, and it will work seamlessly. However, if you attempt to change the text color to black by passing text-black, it won't have the desired effect.

This is due to the nature of Tailwind, where utility classes are applied, and each class carries the same level of specificity. As a result, when multiple classes modify the same element property, the class that appears later takes precedence. This behavior aligns with the standard CSS principles.

Let's look at the classnames computed in both the cases

// when text-fuchsia-600 is passed className = "text-blue-600 text-4xl font-bold text-fuchsia-600"

// when text-black is passed as className = "text-blue-600 text-4xl font-bold text-black"

Now we will swap tailwind-merge for clsx or classnames and let's look at the computed classes again.

// when text-fuchsia-600 is passed className = "text-4xl font-bold text-fuchsia-600"

// when text-black is passed as className = "text-4xl font-bold text-black"

If you have noticed keenly tailwind-merge just removed conflicting classes altogether 🤯.

Amazed by what tailwind-merge can achieve ? Start using it today by downloading through npm

npm i tailwind-merge

If you want to know more about tailwind-merge watch this tutorial by Simonwiss on Youtube

Conclusion

Tailwind CSS is a powerful utility-first framework that offers numerous advanced techniques to enhance your web development workflow. In this article, we explored five valuable tips to take your Tailwind skills to the next level.

I encourage you to try out these advanced Tailwind tips in your web development projects.

I would love to hear about your experiences and feedback. Please feel free to share your thoughts and insights in the comments section below. Your feedback is valuable and can help further refine these techniques and contribute to the Tailwind CSS community.

If you enjoyed reading this post and want to stay connected, make sure to check out my Linktree.

Happy Hacking

Enhance your pwa's ui/ux with tailwindcss-displaymodes Plugin

Jyothikrishna — Tue, 20 Jun 2023 15:48:32 +0000

Introduction

Have you ever wanted to dynamically adjust content and customize the visibility of UI elements based on the display mode of a website? Look no further! I'm thrilled to introduce you to the tailwindcss-displaymodes plugin, a powerful extension for Tailwind CSS that simplifies responsive web design by providing additional variants for specific display modes.

In this article, we'll explore how this plugin can revolutionize your development process and help you create adaptive user experiences effortlessly.

Motivation

Throughout my journey as a developer, I faced a particular challenge when building a Progressive Web App (PWA). I needed a seamless way to modify content and adjust styles of an UI element based on different display modes. Despite searching for a Tailwind CSS plugin that offered this functionality, I couldn't find a suitable solution. Realizing the potential benefits for fellow developers facing the same dilemma, I embarked on a mission to create tailwindcss-displaymodes.

Understanding Display Modes

The tailwindcss-displaymodes plugin supports four display modes: standalone, minimal-ui, browser, and fullscreen.
For a detailed understanding of the functionality of each display mode, you can refer to the documentation available on MDN.

Installing the plugin

Run the following command to add this plugin to your project.

npm i tailwindcss-diaplaymodes

Now register this plugin in your tailwind.config.js/ts file.

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    // ...
    require('tailwindcss-displaymodes'),
  ],
};

Leveraging Display Mode Variants

One of the common challenges in building Progressive Web Apps (PWAs) is deciding what to show as the root URL, especially when it serves as a landing page that highlights the capabilities of your app. However, once users have installed your PWA on their mobile devices or desktops, you may not want to continuously show them the landing page. With this plugin, achieving this level of control becomes effortless.

By utilizing the display mode variants offered by the plugin, you can easily hide your landing page for users who have already installed your PWA. Instead, you can present them with quick links to navigate directly to specific sections or even show them their personalized dashboard upon launch.

This flexibility allows you to tailor the experience based on the user's device and their interaction history with your app.

These display modes variants act just like normal variants like hover: or focus: in tailwind. So if you add standalone:hidden class to an element then that element gets hidden when a user opens your pwa after installing.

<div class="standalone:hidden">
  This content will be hidden in standalone mode.
</div>

You can find a working demo on Hex Cal, a pwa that I am currently working on. And here is the source code.

Conclusion

With the this plugin, you have a powerful tool at your disposal to create responsive websites that seamlessly adapt to various display modes. Say goodbye to manual adjustments and hello to a more efficient development workflow.

Remember, in the world of modern web development, delivering exceptional user experiences across different devices and display modes is crucial. With tailwindcss-displaymodes, you're equipped with the right tools to accomplish just that.

Happy Hacking

Mastering the art of hiding scrollbars with CSS

Jyothikrishna — Tue, 23 May 2023 11:47:38 +0000

Introduction

Scrollbars are an essential part of web browsing, providing users with a visual cues to navigate through content that exceeds the viewport.

However, there are cases where you may want to hide the scrollbars to create a cleaner, more minimalistic design or customize the user experience.

In native mobile apps, scrollbars are typically not visible, and removing them from your website can give it a more native app-like feel. In this article, we will explore various techniques to hide scrollbars using CSS.

In this article, we will explore the algorithm behind the technique to hide scrollbars using CSS. Understanding the underlying principles will empower you to apply the technique in various contexts. Additionally, we will provide a practical example implemented with Tailwind CSS, a popular utility-first CSS framework that enables rapid development by providing pre-defined classes for styling elements.

By delving into the algorithm and showcasing an example with Tailwind CSS, you'll gain a comprehensive understanding of how to achieve a native app-like feel by hiding scrollbars. So, let's dive in and explore the algorithm behind this trick, followed by an implementation example using Tailwind CSS.

The Algorithm

Create the component with a specific height, let's say x pixels, and set the overflow-x property to auto. This ensures that a horizontal scrollbar appears if the content overflows horizontally.
Wrap the component with a div and set the height of the wrapper div to x pixels.
Set the overflow property of the wrapper div to hidden. This hides any content that exceeds the height of the wrapper div.
Increase the height of the component by y pixels.
Apply a matching padding-bottom of y pixels to the component. This ensures that there is enough space at the bottom of the component to accommodate the increased height without triggering the scrollbar.

By following these steps, the scrollbar will disappear because the content no longer overflows the wrapper div. The padding at the bottom of the component compensates for the increased height, resulting in a hidden scrollbar effect.

This technique is useful for creating visually appealing designs without the visible clutter of scrollbars. It provides a smooth and seamless user experience while allowing content to be scrolled horizontally if necessary.

Building a scrollable list

I have set up a new React application using Vite as the build tool. As part of the application, I have created a simple <List /> component. While the purpose of this blog is not to delve into building a scrollable list, I would like to provide the code for your reference. Please find the code snippet below.

List component

function List({ hiddenScrollBar }: { hiddenScrollBar?: boolean }) {
  return (
    <ul
      className={classNames(
        "flex gap-4 px-4 py-8 overflow-x-auto sm:gap-8 sm:px-8 md:px-12 md:gap-12",
        hiddenScrollBar && "h-56",
        !hiddenScrollBar && "h-52"
      )}
    >
      {images.map((image) => {
        return <ImageCard {...image} />;
      })}
    </ul>
  );
}

ImageCard component

function ImageCard({ src, alt }: Image) {
  return (
    <li className="overflow-hidden bg-gradient-to-br from-gray-50/30 to-gray-300 via-gray-100/50 shrink-0 rounded-xl">
      <img
        src={src}
        alt={alt}
        className="object-cover aspect-[7/5] h-full w-full"
      />
    </li>
  );
}

export default ImageCard;

Types for Image

export type Image = {
  src: string;
  alt: string;
};

NOTE
classnames is an npm package which helps us with conditionally setting classnames for an element. One can simply do this 👇 for adding classnames conditionally

    className = {`flex gap-4 px-4 py-8 overflow-x-auto sm:gap-8 sm:px-8 md:px-12 md:gap-12 ${hiddenScrollBar ? "h-56" : "h-52" }`}

Conclusion

Hiding scrollbars with CSS offers a range of possibilities to enhance the user experience or achieve a particular design aesthetic.

Experiment with these techniques to create seamless and engaging scrolling experiences on your web projects, giving them a native app-like feel.

Did you find this article on hiding scrollbars with CSS helpful? If so, show your support by giving it a thumbs-up! Don't forget to like and share to help others discover these handy techniques for achieving a clean and native app-like feel on their websites. Engage with us and let us know your thoughts!

You may find the full source code on github. And here is a working demo of the same.

Happy Hacking

How to Build a fully accessible Accordion with HeadlessUI, Framer Motion, and TailwindCSS

Jyothikrishna — Thu, 04 May 2023 16:03:02 +0000

Before we get started, let's briefly discuss what each of these technologies does:

HeadlessUI: A set of fully accessible, lightweight, unstyled components for building UIs.
Framer Motion: A production-ready motion library for React that makes it easy to add animations and gestures to your UI.
TailwindCSS: A utility-first CSS framework that makes it easy to style your UI using pre-defined classes.

Now, let's dive into how to build an FAQ section with these tools.

Setup

To get started, you'll need to install the following dependencies to your react project:

     npm i headlessui framer-motion

You can refer to tailwindcss docs on how to install and configure tailwindcss for the framework of your choice.

Creating the basic structure for accordion

Create a new tsx or jsx file by the name Accordion.{tsx/jsx} in your components folder and paste this block of code.

import { Disclosure } from "@headlessui/react";
import { ArrowSmallDownIcon } from "@heroicons/react/24/outline";

const Accordion = ({ question, answer }: FAQ) => {
  return (
    <Disclosure as="li">
      {({ open }) => (
        <>
          <Disclosure.Button className="font-semibold text-xl inline-flex items-center cursor-pointer justify-between w-full mb-1 text-neutral-800">
            {question}{" "}
            <span
              className={`p-2 hover:bg-zinc-400/30 rounded-full ${
                open ? "rotate-180" : ""
              }`}
            >
              <ArrowSmallDownIcon className="w-5 h-5" />
            </span>
          </Disclosure.Button>
          <Disclosure.Panel className="text-sm">{answer}</Disclosure.Panel>
        </>
      )}
    </Disclosure>
  );
};

export default Accordion;

We make use of Disclosure component provided by headlessui. Our accordion accepts two props : question and answer, both are of string type.

Disclosure.Button is the component that toggles our disclosure/ accordion. So we render our question inside this component so that the users can see the answer when they click on the question.

Disclousre.Panel is the component that gets mounted and unmounted whenever user clicks on the Disclosure.Button.

We use the render prop open to conditionally rotate the icon. I am using ArrowSmallDownIcon from Heroicons. You may use the icon of your choice. You may find more on this topic here.

Adding animations with framer-motion

for answer

import { AnimatePresence } from "framer-motion";

<AnimatePresence>
  <Disclosure.Panel
    as={motion.div}
    initial={{ y: -20, opacity: 0.2 }}
    animate={{ y: 0, opacity: 1 }}
    exit={{
      y: -20,
      opacity: 0.2,
      transition: { duration: 0.2, type: "tween" },
    }}
    transition={{
      duration: 0.15,
      type: "tween",
    }}
    className="text-sm text-neutral-700"
  >
    {answer}
  </Disclosure.Panel>
</AnimatePresence>;

We must wrap Disclosure.Panel component that displays the answer with AnimatePresence so that we can add exit animations to it. The as={motion.div} prop allows us to use the motion component from Framer Motion and apply animations to the content inside the Disclosure.Panel.

The animation we are going for is pretty straight forward. The answer slides from top and fades in when it is supposed to appear and slides to the top and fades out when it is supposed to disappear.

for question

This is quite simple when compared to the former. We just need to toggle the backgroundColor of the span that is holding our icon between transparent and an off white color which provides an instant feedback for our users that it is a clickable item.

<Disclosure.Button className="font-semibold text-xl inline-flex items-center cursor-pointer justify-between w-full mb-1 text-neutral-800">
  {question}{" "}
  <motion.span
    whileHover={{ backgroundColor: "rgb(161 161 170 / 0.3)" }}
    initial={{ backgroundColor: "transparent" }}
    animate={{ rotate: open ? 180 : 0 }}
    transition={{
      duration: 0.15,
      type: "tween",
    }}
    className="p-2 rounded-full text-neutral-950"
  >
    <ArrowSmallDownIcon className="w-5 h-5" />
  </motion.span>
</Disclosure.Button>;

Note
You may customize the duration and easing of the animations to your liking.

Accordion component after adding animations

import { motion, AnimatePresence } from "framer-motion";
import { Disclosure } from "@headlessui/react";
import { ArrowSmallDownIcon } from "@heroicons/react/24/outline";

const Accordion = ({ question, answer }: FAQ) => {
  return (
    <Disclosure as="li">
      {({ open }) => (
        <>
          <Disclosure.Button className="font-semibold text-xl inline-flex items-center cursor-pointer justify-between w-full mb-1 text-neutral-800">
            {question}{" "}
            <motion.span
              whileHover={{ backgroundColor: "rgb(161 161 170 / 0.3)" }}
              initial={{ backgroundColor: "transparent" }}
              animate={{ rotate: open ? 180 : 0 }}
              transition={{
                duration: 0.15,
                type: "tween",
              }}
              className="p-2 rounded-full text-neutral-950"
            >
              <ArrowSmallDownIcon className="w-5 h-5" />
            </motion.span>
          </Disclosure.Button>
          <AnimatePresence>
            <Disclosure.Panel
              as={motion.div}
              initial={{ y: -20, opacity: 0.2 }}
              animate={{ y: 0, opacity: 1 }}
              exit={{
                y: -20,
                opacity: 0.2,
                transition: { duration: 0.2, type: "tween" },
              }}
              transition={{
                duration: 0.15,
                type: "tween",
              }}
              className="text-sm text-neutral-700"
            >
              {answer}
            </Disclosure.Panel>
          </AnimatePresence>
        </>
      )}
    </Disclosure>
  );
};

export default Accordion;

That's it folks !! By following these simple steps you have bult a fully accessible accordion component. You can use this to render an FAQ section. You may find an example on how to use this component below 👇.

import Accordion from "./Accordion";

const faqs: FAQ[] = [
  {
    question: "Is vite the best bundler ?",
    answer: `It's difficult to say whether ViteJS is the "best" bundler out there, as it ultimately depends on your specific needs and preferences. ViteJS has gained popularity due to its fast development server and quick build times, which can be beneficial for certain types of projects.`,
  },
  {
    question: "Why should I start using headlessui ?",
    answer:
      "HeadlessUI provides fully accessible, unstyled UI components that are flexible and customizable, can be used with any front-end framework, and are lightweight for optimal performance.",
  },
];

function App() {
  return (
    <main className="min-h-screen bg-fuchsia-400 grid place-items-center font-inter">
      <div className="bg-neutral-50 rounded-xl backdrop-blur-xl w-[70vw] p-12 min-h-[70vh]">
        <ul className="flex flex-col gap-4 mb-8">
          {faqs.map((faq, index) => (
            <Accordion key={index} {...faq} />
          ))}
        </ul>
      </div>
    </main>
  );
}

export default App;

You can grab the full source code on github and here is a working demo for reference.

Happy Hacking

Transform your navbar into a design resembling that of Google's navbar with React and Tailwind CSS.

Jyothikrishna — Mon, 10 Apr 2023 13:26:52 +0000

Greetings everyone, I am Jyothikrishna and I am thrilled to demonstrate to you how to create a navbar that resembles Google's navbar using React and TailwindCSS.

As a developer, I know the importance of creating a user-friendly interface, and the navbar is one of the most crucial elements of any website. With Google's navbar being a popular design that users are familiar with, it's a great way to improve the user experience of your website.

In this article, I'll walk you through the steps needed to create a navbar that looks like Google's, including adding dynamic styling based on the user's scroll position. Let's get started!

To begin the process of creating a Google-like navbar, let's first describe its features. Specifically, the navbar should initially have a border at the bottom when page is not scrolled, and as the user begins to scroll, a shadow should be added to the bottom of the navbar. You can find a working demo here and you can grab the source code on github.

Creating the basic skeleton

I have created a basic navbar with a h1 and some links. Don't forget to wrap text inside li with Link component provided by the framework you are using.

Determining when to show the shadow

To determine if the user has scrolled or not, we can inspect the value of the scrollY key on the window object. Because our navbar needs to respond to changes in scrollY, we should store whether to show a shadow or not in a state variable.

We need to attach an event listener to the window object, which will update the showShadow state variable to true as soon as scrollY becomes a non-zero value. Conversely, when scrollY becomes zero, i.e., when the user scrolls to the top of the page, we should set the showShadow variable to false.

Remember to remove the event listener when the NavBar component is unmounted.

Adding Shadow conditionally

Change the nav element's className attribute to the following 👇

You may be wondering why we are keeping the border-b class even when showShadow is true. The reason is that the border-b class increases the height of our navbar by 1px. If we remove the border-b class, the content inside our navbar will shift slightly.

That's it folks, you have made a navbar similar to Google's design 🥳🎉

Happy Hacking

How to open Vite dev server on your mobile

Jyothikrishna — Thu, 23 Mar 2023 05:25:51 +0000

Introduction

Developing web applications that work seamlessly across multiple devices is a critical aspect of modern web development. As a developer, you may often need to test your web application on different devices and screen sizes to ensure its compatibility and responsiveness. However, manually testing your web application on various devices can be time-consuming and tedious.

Fortunately, there are tools and techniques available that can help you streamline this process. One such technique is to open your Vite development server on your mobile device, which can allow you to test your web application on your smartphone or tablet quickly and easily. This article will guide you through the steps to open your Vite development server on your mobile device so that you can test your web application on the go.

Get your computer and mobile device on the same network

To open your Vite dev server on your mobile device, your computer and mobile device need to be on the same network. This can be a Wi-Fi network or a wired network. Make sure both devices are connected to the same network before proceeding further.

Get your computer's IP address

Next, you need to get your computer's IP address.

On Windows, open your powershell and type the following command



   ipconfig | findstr IPv4

On Mac, open your terminal and type the following command



   ipconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}'

On Linux, open your terminal and type the following command



   hostname -I | awk '{print $1}'

Look for the line that starts with "IPv4 Address" and note the IP address.

Start the Vite dev server with `--host` option

By default, the Vite dev server binds to localhost only, which means it can't be accessed from other devices on the network. To allow access from other devices, you need to start the server with the --host option and specify your computer's IP address.

Open package.json for your project and go to scripts key.In scripts change "dev" : "vite" to "dev" : "vite --host".

After making necessary changes your scripts key should be similar to this 👇

NOTE
If you just want to open vite dev server on your mobile for this one time you can use the following command



    npm run dev -- --host

Access the Vite dev server on your mobile device

Now that the Vite dev server is running with the --host option, you can access it on your mobile device. Open the browser on your mobile device and type in the URL:



   http://<YOUR_COMPUTER'S_IP>:<YOUR_DEV_SERVER_PORT_NUMBER>

Replace YOUR_COMPUTER'S_IP with IPv4 address which you noted in step 2.

Replace YOUR_DEV_SERVER_PORT_NUMBER with the port number which you defined in your vite config file. In case if you haven't explicitly defined the port number it defaults to 5173.

Bonus Tip
Vite displays the url which you need in the terminal itself.

You should now see the same Vite dev server running on your mobile device. You can interact with it just like you would on your computer.

Conclusion

Opening your Vite dev server on your mobile device is a quick and easy way to test your application on different devices and screen sizes. By following the steps outlined in this blog post, you can easily access your Vite dev server on your mobile device and test your application on the go.

Hope you find this post useful !!
Want to know how to build navbar similar to Google's design. Click here to find out.

If you enjoyed reading this post and want to stay connected, make sure to check out my Linktree.

Happy Hacking

Turn your react + vite app into a PWA

Jyothikrishna — Thu, 23 Feb 2023 16:01:43 +0000

Introduction

A Progressive Web Application (PWA) is a web application that has a native app-like experience. PWAs are designed to be fast, reliable, and work offline. In this post, we'll look at how to turn a React + Vite project into a PWA.

Step 1: Adding necessary dependencies to your project

We need two dependencies to make our app into a PWA. The first one is Workbox. Workbox is a library that makes it easy to add offline support to your application. The latter is a vite plugin - vite-plugin-pwa. Feel free to copy the command below and paste it in your terminal

npm install -D workbox-window vite-plugin-pwa

Step 2: Updating vite config file

Import the plugin we have installed using at the top of your vite.config.ts file.

import { VitePWA } from "vite-plugin-pwa";

Now in your plugins array add VitePWA with an object as an argument. The object must look like this 👇

// https://vitejs.dev/config/
export default defineConfig({
    base: "./",
    plugins: [react(), VitePWA(manifestForPlugin)],
});

NOTE: manifest key must be identical to your manifest.json
Also, don't forget to add an icon with role maskable because it is used as the icon for your app when a person installs your PWA.

Don't have a maskable icon for your app ? Use pwa-asset-generator to create maskable icon and splash screens for your app.

At this point of time if you open dev tools and generate a lighthouse report for progressive web app you should get a result which is similar to this 👇

Don't get panicked by looking at those errors. They will go away once you have deployed your app.

Step3: Deploying your app

Now, deploy your React app using platforms like netlify or vercel.

Once you have finished deploying your app visit your app in your browser and run a lighthouse audit again.

That's it folks! Now you know how to turn your React app into a Progressive Web App (PWA) 🥳🎉. If you have any doubts I am happy to help in the comments. I have turned one of my React app into a PWA. Check it here.

If you enjoyed reading this post and want to stay connected, make sure to check out my Linktree.

Happy Hacking

Remove specific files from your git repository

Jyothikrishna — Thu, 09 Feb 2023 13:38:45 +0000

Hi 👋. Welcome to this guide on removing specific files from your Git repository. Whether you're a seasoned Git user or just starting out, there will come a time when you need to clean up your repository and remove unwanted files. Perhaps you've accidentally committed sensitive information, or maybe you just need to clean up old, unnecessary files. Whatever the reason, removing files from your Git repository can seem like a daunting task, but it's actually quite simple once you know how. In this post, we'll take a step-by-step approach to explain how to safely remove specific files from your Git repository, and what to do if you've already pushed the files to a remote repository. Let's get started!

Use this command to remove file only from the git repository

git rm --cached pathtothefilewhichyouwanttoremove

After running this command you should get output like this

rm 'pathtofilewhichyouwanttoremove'

If you run git status at this point you will get output like this

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        deleted:    js/one.js

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        js/one.js

Since I have deleted one.js file which is present in js folder, I got this as my output. Depending upon the path and filename of the file which you have deleted you will get similar output.

If you wish to keep the file at the same location as before you may add it in the gitignore file. In this case I am adding js/one.js to my git ignore file. You should add relative path to the file which you don't want to appear in your git repository.

js/one.js

If you wish to delete that specific file from your machine as well you this command 👇 instead

git rm  pathtothefilewhichyouwanttoremove

Now you may commit these changes and push to your remote repository. After finishing the above mentioned steps if you head over to your remote repository the file which you have removed will not be present. If you have found this blog post useful leave a like 👍.

Struck somewhere 🥶, comment down below so that I can help you out.

Happy Hacking

Leetcode question 58 Length of Last Word js solution

Jyothikrishna — Thu, 05 Jan 2023 04:46:41 +0000

We can break the problem into 3 subproblems

Removing trailing spaces if they exist
Finding the words present in that processed string
And finally finding the length of the last word present in the processed string

We will tackle this subproblems one at a time.

Step 1 : Removing whitespaces at the beginning and end of the string

Since the string given to us might contain whitespaces in it, we need to remove them because if we don't remove them js treats them as different words.

To achieve this we make use of the trim method

const sWithOutWhiteSpaces = s.trim()

Step 2 : Finding words present in string given

This step is very easy to do. We use split method achieve this.

const wordsInS = sWithOutWhiteSpaces.split(" ")

Step 3 : Finding the last word in given string

Last word present in given string is the last element in array wordsInS. Length of that word is our required answer.

const lastWord = wordsInS[wordsInS.length - 1]
return lastWord.length

Total solution

var lengthOfLastWord = function (s) {
  const sWithOutWhiteSpaces = s.trim();
  const wordsInS = sWithOutWhiteSpaces.split(" ");
  const lastWord = wordsInS[wordsInS.length - 1];
  return lastWord.length;
};

If you submit at this point you will get these stats

Optimization

We can optimize the time and space required to run this program by chaining all the methods and make it into a single statement thereby reducing the amount of space used by our program since we are no longer using memory to store intermediate values linke wordsInS.

Now our solution looks like this

var lengthOfLastWord = function (s) {
  return s.trim().split(" ").pop().length;
};

Time and space complexity

Time: O(n)
Space: O(1)

After doing above mentioned optimizations you will get these stats

I hope you found this article. If yes hit that like button.

Happy Hacking

Simplest way to implement dark mode in your react + tailwind project

Jyothikrishna — Mon, 26 Dec 2022 12:55:35 +0000

Having dark mode in your website is essential nowadays. In this blog post I will show you how to implement dark mode in your react + tailwind app. This involves 3 simple steps.

Step 1 : Opting into dark mode in tailwind config file

Open your tailwind.config.cjs and add this to your config.

Step 2 : Writing the logic for dark mode to work

In your hooks folder create a new file named useTheme.js with the following lines of code in it.

This code takes user's preferred theme into account and it also stores the theme state in browser's localStorage so that preferred theme is persisted between different sessions. So feel free to copy this and paste it in useTheme.js file which we have created.

Next use this theme state and toggleTheme function to make an ui so that your users can switch between different theme options. I used icons from react-icons to achieve this.

Step 3 : Adding styles for dark mode

This is the final step for implementing dark mode in your app. Define the classNames you want to use when theme is set to dark with a prefix dark:. For example if you want to use text-neutral-100 className in dark mode use dark:text-neutal-100.

Here is a code snippet for your reference 👇

Since I have added dark:bg-dark-background to my root div, when users change their preferred theme to dark either by using the ui we created in step 2 or by changing their preferred theme in browser bg-dark-background className is added to my root div. I have defined dark-background with the value #141414 in my tailwind.config.cjs file which makes the background of my root div to #141414. Add necessary styles to all the elements on your app and you are good to go.

Woohoo 🥳🎉 You have managed to add dark mode to your app. Don't forget to share your opinions on this article down in the comments 👇.

Happy Hacking

Forem: Jyothikrishna

Introducing UVM TB Templates

Introduction

Motivation

How to use UVM TB Templates

License

Contribute to UVM TB Templates

Audit your sites 10X faster with Unlighthouse

Introduction

How to use Unlighthouse CLI

Conclusion

Top 5 Advanced Tailwind Tips to Supercharge Your Web Development

Introduction

Copying classnames is perfectly fine

Dark mode

Using ring utility to create shadows

Optimize Workflow with Plugins

Using tailwind-merge instead of regular classname constructer

Conclusion

Enhance your pwa's ui/ux with tailwindcss-displaymodes Plugin

Introduction

Motivation

Understanding Display Modes

Installing the plugin

Leveraging Display Mode Variants

Conclusion

Mastering the art of hiding scrollbars with CSS

Introduction

The Algorithm

Building a scrollable list

List component

ImageCard component

Types for Image

Conclusion

How to Build a fully accessible Accordion with HeadlessUI, Framer Motion, and TailwindCSS

Setup

Creating the basic structure for accordion

Adding animations with framer-motion

for answer

for question

Transform your navbar into a design resembling that of Google's navbar with React and Tailwind CSS.

Creating the basic skeleton

Determining when to show the shadow

Adding Shadow conditionally

How to open Vite dev server on your mobile

Introduction

Get your computer and mobile device on the same network

Get your computer's IP address

Start the Vite dev server with --host option

Access the Vite dev server on your mobile device

Conclusion

Turn your react + vite app into a PWA

Introduction

Step 1: Adding necessary dependencies to your project

Step 2: Updating vite config file

Step3: Deploying your app

Remove specific files from your git repository

Leetcode question 58 Length of Last Word js solution

Step 1 : Removing whitespaces at the beginning and end of the string

Step 2 : Finding words present in string given

Step 3 : Finding the last word in given string

Optimization

Time and space complexity

Simplest way to implement dark mode in your react + tailwind project

Step 1 : Opting into dark mode in tailwind config file

Step 2 : Writing the logic for dark mode to work

Step 3 : Adding styles for dark mode

Using `ring` utility to create shadows

Using `tailwind-merge` instead of regular classname constructer

Start the Vite dev server with `--host` option