DEV Community: Shashank sharma

Deploying Vite App to GitHub Pages

Shashank sharma — Wed, 26 Jan 2022 10:00:56 +0000

GitHub Pages

You can use GitHub Pages to showcase some open source projects, host a blog, or even share your resume. This will guide you to get started on creating your next website.Github-pages

It will create a website with a domain, username.github.io. Eg. Let's consider your username as peter101 and your repo name as OnTheGo. Then it will make a website with the domain peter101.github.io/OnTheGo/.

Steps for the Deployment

The following steps must be followed in serial-wise.

We will create a seperate gh-pages branch that will contain our /dist folder.

Push your code to your repository (using Terminal)

cd to your Vite App.
Run the following commands in your Terminal
1. $ git init
2. $ git add .
3. $ git commit -m "first-commit"
4. $ git branch -M main
5. $ git remote add origin http://github.com/username/repo-name.git
6. $ git push -u origin main

Now, you will able to see your code in your repository.

Deploying (Static)

Go to your vite.config.js file. And add your base url to it.

To be more precise, your base url will be /repo-name/.
In my case, my repo-name is Tech-To. So, my base url will be /Tech-To/.

Run npm run build in your Terminal.

By default, the build output will be placed at dist. You may deploy this dist folder to any of your preferred platforms.

Add /dist folder into your repo. By running. ```

$ git add dist -f


`-f` is required, as your **.gitignore** will not consider your _/dist_ folder. Hence, it is required for git to consider it as well.


4. Run `$ git commit -m "Adding dist"` in your Terminal.


5. Run `$ git subtree push --prefix dist origin gh-pages`


##Your Deployed website


- Visit your repository.
- Go to Settings.
- Scroll down to **Pages**.
- There will be a link to your website.


####You did it!!



![congo](https://media.giphy.com/media/g9582DNuQppxC/giphy-downsized-large.gif)

![congo](https://media.giphy.com/media/xT0xezQGU5xCDJuCPe/giphy.gif)




>#####Thank You for referring to this post. Your comments will be helpful for the betterment of this post.

DarkMode in TailWind

Shashank sharma — Mon, 24 Jan 2022 12:00:18 +0000

So I am writing this post as I have faced some problems while using dark mode in my website with the help of TailwindCSS.

I wanted to toggle between light mode and dark mode manually.

So please allow me to tell the whole story behind creation of simple Dark mode.

List of Contents

1.Prerequiste (things that you have to do before using darkmode)
2.Toggle button
3.Toggle Theme (Functionality)
4.What changes can we make to className for darkmode
5.Temprory Functioning

Prerequisite (things that you have to do before using darkmode)

As it has also been stated in the Tailwind documentaion of darkmode . Add darkMode: 'class', in your tailwind.config.js like this below.

module.exports = {
  darkMode: 'class',
  // ...
}

It basically add class=" " into your HTML.

Bro, but why ain't we using media instead of class? .
The thing is media will take your OS color scheme into consideration and class will let you add it manually. So, that's the theory behind it.👍

Toggle button

It basically makes a button that listens to a onClick function on clicking it.

<div className='flex items-center justify-center inline-flex '>
      <label className='pt-0 pb-1 w-10 mb-6 ' >
             <div className='w-12 h-5 border-2 justify-center 
                             items-center rounded-lg bg-#172d42 
                             mt-1 absolute' type='checkbox' />
             <input onClick={theme} className='bg-[#ffffff] w-7 h-7
                                              flex justify-center items-center
                                              duration-500 checked:translate-x-6
                                              checked:bg-black appearance-none
                                              rounded-full absolute ease-in-out' type='checkbox' >
             </input>
      </label>
</div>

You can change the className values according to your CSS.

So here, checked means that, when the checkbox input is checked, it will translate-x-6 translate in x-axis i.e. toward right. And the rest is basic tailwind CSS. You can search the meaning of the values of className in their website.

Main Thing We have passed theme to the onClick function. About which, we will talk later.

The button will look like this ...

Toggle Theme (Functionality)

Here, you are required to use useState hooks from react. But first, let me introduce you to my code then we will talk about it.

const [theme, setTheme] = useState('light');

const toggleTheme = () => {

    if (theme === 'dark') {
      document.documentElement.classList.remove('dark')
      setTheme('light')
      localStorage.theme = 'dark'
    } else {
      document.documentElement.classList.add('dark')
      setTheme('dark')
      localStorage.theme = 'light'
    }
  }

Initially, I have set the theme state to 'light'. I wanted that user must first see the light mode and then toggle to the dark mode. But, if you want the user to see the dark mode first then set it to 'dark'.
const [theme, setTheme] = useState('dark');

I used normal if else statement, for beginners understanding. You can also use ternary operator { ? <> : <> } .

You have plenty of options with JavaScript. That's the beauty of it.

But dude, tell us more, what does document.documentElement.classList.add('dark') do.
It basically adds class="dark" into your HTML.

And document.documentElement.classList.remove('dark') will make it back to the normal.

So, next comes the localStorage.theme = 'dark'.

localStorage ,an API that allows you to store key-value pairs of data that persist with page reloads as well as when the browser window is closed and reopened.

You can read the official documentation of localStorage from Mozilla. Basically, it will store the value of the theme in your browser for local reference.

The main monopoly behind this toggleTheme is
The user clicks on the button. That will invoke toggleTheme and it will check, if the theme is dark, then remove 'dark' from HTML and setTheme to 'light' and set localStorage.theme to light.
And, if user again clicks on the button, then it will again invoke toggleTheme and this time the theme is set to 'light' then the else part will execute. That will add 'dark' to HTML and setTheme to 'dark' and set localStorage.theme to dark.

So, now I think you would be comfortable with the functioning behind toggleTheme.

Then, where to put this toggleTheme function? React comes to the rescue

I wrote this in my App.jsx. So that, it would be easy to pass the props to the other components.

You have to pass the theme into your components. I did it like this

<Navbar theme={toggleTheme} /> in my App.jsx

My Navbas.jsx

const Navbar = ({ theme }) => {
    return(
        <>
        </>
        //rest of the code
    )
}

and used it in my onClick function, about that I have mentioned earlier.
<input onClick={theme} className='bg-[#ffffff]' type='checkbox' >

What changes can we make to `className` for darkmode

If you wanted to change the text, background and other values, with the help of darkmode of TailwindCSS, you can do it simply by adding dark:text-white in your className.

<div className='text-black dark:text-white'>

</div>

And that's it folks, you will now be able to see the button and toggle between the light theme and dark theme.🎉

Temprory Functioning

A basic illustration of dark mode with ReactJS.

import React, { useState } from 'react';

const DarkMode = () => {

    const [theme, setTheme] = useState('light');

    const toggleTheme = () => {

        if (theme === 'dark') {
            document.documentElement.classList.remove('dark')
            setTheme('light')
            localStorage.theme = 'dark'
        } else {
            document.documentElement.classList.add('dark')
            setTheme('dark')
            localStorage.theme = 'light'
        }
    }
    return <div className='mt-7 max-w-full m-h-full bg-black dark:bg-slate-700 flex items-center justify-center  '>
        <label className='pt-0 pb-1 w-10 mb-6 ' >

            <div className='w-12 h-5 border-2 justify-center items-center rounded-lg bg-#172d42 mt-1 absolute' type='checkbox' />
            <input onClick={toggleTheme} className='bg-yellow-200 w-7 h-7  flex justify-center items-center duration-500 checked:translate-x-6 checked:bg-black appearance-none rounded-full absolute ease-in-out' type='checkbox' >
            </input>


        </label>
        <h1 className='mx-5 text-white dark:text-red-900'>Heyyy there</h1>

    </div>
        ;
};

export default DarkMode;

)

If you wanted to see the functioning of dark and light mode, then you can check this website https://shashannkbawa.github.io/Shanks-Web3.0/
And can also refer to the code in my Github repo

Let me know if there is a better approach. For now this works. Refer the tailwind docs for more info. TailwindCSS

Journey to my first React app

Shashank sharma — Thu, 17 Jun 2021 12:54:25 +0000

Building an app from scratch is much more than how it looks.
It is not that difficult. But for me, as a newbie, it is something difficult.
Let's divide my journey into three parts.

About the Project
Problems I faced and debugged
End

About the Project

We all have been looking for a place where we can sit and enjoy the music. After a hectic day, there is still a place where we can enjoy the peace. For some of us it's a Home, for some it's their loved ones.

Quoting Jiraiya Sensei - A place where someone thinks about you is a place you can call Home.

As we all have gone through a lot in this pandemic. So why not we just relax for a while and have a deep breath and just Relax.....

Problems I faced and debugged

At first, I thought of using the background as a component. But after including other components, they do not overlap. So I Googled this problem and came to know that there are two basic solutions

By using Overlay
By changing z-index

But I was unable to apply both the solution. So I came with a cringey solution i.e. by applying the image in CSS. Then I used background-image : url(/xyz.jpg); in my CSS.And now the components overlap as I wished. It worked fine but a new problem arrived at the same moment. The background image is zoomed to its maximum height and width. To overcome this , I wrote background-size : cover; which I think worked best for me.
Then I made a Navbar component. It worked fine😊.
Then after doing some more code , I thought of an idea💡. Is that - Why don't I make the words coming on the screen more real that someone is typing that sentences? Then I Googled , and the library I used is React Typist. You can also try this on by going to the npm site.
I used that in my Type component. And by reading their documentation , I easily applied that on my App.
Then I put a sound component in my App. And the package I used is react-audio-player from npm. And by applying some changes to the code, now I can see audio bar on my App.

The problem now popped is that I wasn't able to add a URL to the player. I have downloaded a music file on my PC. It is in the same folder where my components are, but passing the file location to the URL is not enough to make the player work.

Programmers ability is - whenever they face any problem in their code. They Google.

And I did the same , some of them says "Use the location of the music as a variable and then use the variable in your code". Actually, it didn't work. 😵
Spending some hours on this problem is making me more and more frustrated. Then I thought of using another package for the same. But I got stuck on the same problem until I realized the basic rule.

During the time of coding if you ever stuck in a problem for a long time. Just think from the start again and ask yourself the 5 W's and H. Then you will definitely find your way.

So again, I did the same, fundamentally what I need - a URL, for what - for using it in my App. So I came with a solution. It might be a legal or illegal thing. I don't know. But a very simple solution i.e.

just google "Download xyz mp3" or from wherever you can download, just go to that download link.😤
Inspect that download link.
That's your URL.

Then after that everything seems fine. But the main problem is still waiting for me. I wasn't aware of that but it is waiting.....⏳

Back to my story,
As everything is working fine till now , So I thought of making my App responsive. Then I started working on @media queries. I wrote pretty well @media queries. After writing @media queries I was sure that this App is not made for portrait phones. Then I thought that why shouldn't I make a prompt that makes the user rotate his/her phone. After that, my brain cells start working on that thing. And again, the first problem arose, that is, my component isn't overlapping. Then I Googled the best way to ask a user to rotate his/her phone. But the answers are for React-native. I was working on React only. So after some more Googling, I came across a package that gets the orientation from the user.use-window-orientation. Goto

Some of you might think - "Ayo, why don't you just use screen.height and screen.width to get the pixels information and do this"

if (screen.width > screen.height ) {
    return landscape;
} else {
    return portrait;
}

Yes, I came up with that solution also, but that was after solving the problem.
So,
In the documentation they explained the use in some other way but I prefer a different technique. I use Conditional Rendering

const { portrait } = useWindowOrientation();
    if (portrait) {
        return <Rotate />
    }
    else {
        return (
            <div className = "Home">
                <Navbar />
                <Type />
                <Music />
            </div>
        )
    }

And that's the solution folks.

End

I was so happy to tell my friend about this problem and I solved it. This is just a basic start of this project, I have many more things to do in this project. For some pro developers, these problems might not count in their problemsList. But I write this article for some newbies like me out there who are still struggling to find their way in their problems.
You can check my github repo for this project.

The beginning is the end and the end is the beginning.

Thank you folks for reading this article.

👇🌝
GitHub-repo