DEV Community: Pranshu Jha

Give Me 5 Minutes And I'll Teach You Git!

Pranshu Jha — Tue, 02 May 2023 09:16:42 +0000

Disclaimer: The title is blatant clickbait :p

5 minutes is definitely not enough to learn git in its entirety.

However while I can't promise that you'll become a git expert at the end of the blog, I can promise 5 minutes are more than enough to nail down the basics of this magical tool.

With that being said, let's dive in!

📌 First Of All, What Even Is Git?

It's a time machine!

Well...at least sort of...

Technically, git is called a "distributed version control system" which in non-nerd terms means that it allows you to keep track of changes in your code over time by creating versions and, going back to a particular version if you somehow mess up (accidentally deleting stuff you didn't want to, encountering some bug that exists in the current version of the code but didn't in the previous version).

It also allows you to maintain separate versions of the code base that can be worked on independently as well as collaborate with other developers on the same project.

📌 Git Terminology

Let's go over some of the basic keywords you'll hear a lot when using Git:

Repository/Repo: The repository contains all your project's files and folders that you mean to track over time.
Commit: A commit is a snapshot of the changes you've made to your code at a specific point in time.
Branch: A branch is like a "parallel-universe" equivalent of your code. It's a separate version of your project that you can work on without affecting other branches. Branches are really useful when you want to experiment without messing up your current codebase.
Merge: Merging is the process of combining changes from two or more branches into a single branch. Git allows you to merge branches easily with a single command, even if there are conflicts between the changes.
Push/Pull: Pushing changes means sending your changes from your local repository to a remote repository (hosted on a different server such as GitHub/GitLab) so that others can access them. Pulling changes means fetching changes from a remote repository and merging them into your local repository.
Remote: A remote refers to a version of a repository hosted on a different server or location. Whenever we clone, push, or pull a repo we do so from the remote, updating the local repository with reference to the remote. A hosted remote allows us to easily collaborate with other people on the same project.

📌 Commonly Used Git Commands

Some of the most commonly used Git commands include:

git init: Initializes a new Git repository
git clone: Creates a local copy of an existing Git repository
git add: Adds changes to the staging area
git commit: Creates a new commit with the changes in the staging area
git status: Displays the status of the repository, including changes that have been made and the current branch
git push: Pushes changes to a remote repository
git pull: Pulls changes from a remote repository to a local repository
git branch: Lists all branches in the repository or creates a new branch
git checkout: Switches between different branches or commits
git merge: Merges changes from one branch into another branch

📌 Time to Git It Done!

Let's try using git ourselves this time!

This would require you to install git and set it up first, which can be done from this website right here: https://git-scm.com/downloads

You could also just look up the platform-specific steps on YouTube or Google!

Step 1: Initializing The Repository

Start by going into a folder where you wish to create the project and open a terminal (for Linux and Mac) or Command Prompt / PowerShell (for Windows).

Now type in the following command:

git init

This step initializes your git repository.

Step 2: Setting Up The Remote

Before we proceed, let's create the remote i.e. the place where our code will be stored over at GitHub.

Start by creating a new repo on GitHub like so,

Note: Make sure you copy the link to the remote 👇

Step 3: Setting Up The Remote

Now we run the following commands to set our GitHub repo as our remote.

git remote add origin <link to your remote>

which in my case would be git remote add origin git@github.com:pranshuj73/git-tutorial.git

Now we got our repo all set up! We can start adding our files now. For this tutorial, I'll just be adding a simple README file but you're free to add whatever you want!

Once you're done adding your files, time to become hackerman again.

Open the terminal and add the following commands (dw I'll explain everything in a bit):

git add .
git commit -m "a commit message"
git push origin main

Now let's see what each line does here.

git add .

The git add command stages the modified files for commit. Think of an item being packed before being put into a box and shipped out. So we just bubble-wrapping our code here.

In case you make further changes to your code before you have committed, you need to run the git add command again.
git commit -m "hello there"

The git commit command creates a commit (duh!). This commit is a snapshot in time, very much like a save point in a video game. You can choose to revert your codebase to this save point any time you wish or see the files at the time of commit.

An important thing to note, you need to specify a message for each commit. This allows you as well as the collaborators to easily identify a commit. It is good practice to include what you did (refactoring, debugging, or adding a feature, etc.) as well as the component affected.

For example, "made navbar responsive" is a much better commit message than "peepee poopoo"
git push origin main

Now finally, we just upload our commit to our remote called "origin" to a branch called "main". Now you can go over to GitHub and see your commits and files!

Yay! You have got the basics of git now. Hopefully. Maybe.

This tutorial only covers the most basic commands (emphasis on "most") that you'll be using often when working on projects.

I'll probably make a part two of this blog post for concepts like branches, merging, cherry-picking, stashing, etc.

Meanwhile, feel free to refer to Google or check out the videos I've linked below to learn more about git!

Happy Hacking 🙌

📌 Bonus Stuff

Here are tutorials you can refer to learn further in-depth about git and git commands:

Also, a really useful site that I have bookmarked in case I mess up using git: Oh Shit Git

Thank you for making it to the end!

If you liked the article share it with your friends, maybe share it on Twitter and tag me!

This article is brought to you by...

Me!

Hey, I'm Pranshu and I like writing about my developer journey and sharing resources, tips, and tutorials just like this one.

Feel free to reach out to me at Twitter or Discord (Pranshu#7926)

I made a website to rickroll my friends

Pranshu Jha — Fri, 20 Jan 2023 19:01:47 +0000

For a long time, I've wanted to use my skills for the greater good, like trolling my friends. But then I had a genius idea pop up in my head.

What if there was a website that rickrolled you when you opened it?

But there in fact were websites that rickrolled you when you opened them.

But nahh, I didn't want it to be that straightforward. I wanted it to be a little engaging like with a puzzle or something that when solved would rickroll you instead of appreciating your hard work.

And I ended up making...

🚀 The Implementation

The idea behind it was simple.

You click on circles and the number of circles doubles. This keeps happening until there are 2500 circles on your screen.

Why 2500 circles specifically?

Well, I just didn't want to show the users a gif. I wanted to somehow incorporate the circles into the mix. And so the 2500 circles, arranged in a 50x50 graph became my canvas.

The rest is easy. Well...not really.

I had to select the individual circles so I could use them as pixels and render a very basic monotone animation of Rick Astley in action.

I started with this basic HTML code with one circle and a little instruction for the user to keep clicking on and styled it with some CSS.

<body>
  <div class="box clickable" id="1">
    <div class="circle" id="0"></div>
  </div>
  <h3 class="rainbow" id="banner">KEEP TAPPING<br>ON THE CIRCLE</h3>
  <script src="script.js"></script>
</body>

Then a little javascript to just double the number of circles.

var box = document.getElementsByClassName("clickable")[0];
var count = parseInt(box.id);

// setting the max num of circles
const max = 2500;

box.onclick = function () {
  var ok = true;

  // i dont want to add any more circles than the exact number of 2500
  // hence this code check while determining num of circles to add to the box
  if (ok === true && count <= max) {
    var num = count == 1 ? 1 : count * 2 > max ? (max - count) : count * 2;
    for (var i = 0; i < num ; i++) { addCircle() }
    box.id = num;
    if (count != 1) {
      box.style.gridTemplateColumns = `repeat(${Math.ceil(Math.sqrt(count))}, 1fr)`;
    }
    ok = false;
 }

  if (count >= max) {
    // doing this makes it a 50x50 grid with 2500 circles
    // now it makes sense to set max to 2500 amirite?
    box.style.gridTemplateColumns = "repeat(50, 1fr)";
    box.id="full";
    box.onclick = null;
  }
};

Then a helper function to actually create and add the circle divs

function addCircle() {
  var circle = document.createElement('div');
  circle.className = 'circle';
  circle.id = count;
  box.appendChild(circle);
  box.id = count++;
}

The result:

Now came the actual problem of rendering the animation.

After a long process of trial and error, the best way I found to render the animation was to use a sprite sheet.

A sprite sheet is basically a long image that contains all the frames of a gif. Here's what mine looked like:

Now, we go through each frame (each part of this long sprite sheet) and then check out which pixels are dark, select the equivalent circle and change its color to a darker color.

Now for convenience, I made sure each frame was a 50 pixels x 50 pixels image. So each circle represented a single pixel on the image.

Here's the code:

box.onclick = function () {
    /* Previously Written Code Goes Here 👇
        ...
    */

    // defining my spritesheet image object
    var img_obj = {
      'source': null,
      'current': 0,
      'total_frames': 52,
      'width': 50,
      'height': 50
    };

    const img = new Image();
    img.onload = function () { // Triggered when image has finished loading.
      img_obj.source = img;  // we set the image source for our object.
    }

    img.src = "./data/ricksprite.png";

    const canvas = document.createElement('canvas');
    canvas.width = 50;
    canvas.height = 50;
    var context = canvas.getContext("2d");
    setInterval(function () { rickRoll(canvas, context, 0, 0, img_obj) }, 100);

    var banner = document.getElementById('banner');
    banner.classList.add('rainbow_text_animated');
    banner.innerHTML = "YOU'VE BEEN RICKROLLED!"; // another message to remind that you've been rickrolled
    box.onclick = null; 
  }
};

Then we define the actual function that goes through the sprite sheet and updates the frame that we are currently showing to the user.

// this function takes care of the animation by moving the spritesheet and taking each frame to draw
// once the frame is determined, it checks for each dark pixel and then colors the appropriate circle with black
function rickRoll(canvas, context, x, y, iobj) {
  // coloring all black pixels to normal before animation to reset the box
  // seems like a glitch where if i dont run it twice, it creates a weird effect
  clearBox();
  clearBox();

  if (iobj.source != null){
    context.drawImage(iobj.source, iobj.current * iobj.width, 0, iobj.width, iobj.height, x, y, iobj.width, iobj.height);
  }

  iobj.current = (iobj.current + 1) % iobj.total_frames;

  for (let y = 0; y < canvas.height; y++) {
    for (let x = 0; x < canvas.width; x++) {
      let data = context.getImageData(x, y, 1, 1).data;
      if (data && data[0] <= 20 && document.getElementById(((y+1) * 50 + x + 1).toString())) {
        document.getElementById(((y+1) * 50 + x + 1).toString()).classList.add("dark");
      }
    }
  }

  iobj.current = (iobj.current + 1) % iobj.total_frames;
}

Finally, another function that colors all the circles gray. So when we animate another frame, the already black pixels don't just stay on the canvas.

function clearBox() {
  let elems = document.getElementsByClassName("dark");
  for (let i = 0; i < elems.length; i++) {
    elems[i].classList.remove("dark");
  }
}

And after writing so many functions, we can finally see rickroll in action!

Link to the site so you can rickroll your friends!

Here's the link: https://the-circle-illusion.netlify.app/

GitHub Repo links for OG devs:

pranshuj73 / rickroll

Keep clicking on the circle to reveal the illusion!

Thank you for making it to the end of the post. Here's a pizza slice

{\ __ /}
( • . •)
/ > 🍕

See you in the next one!

Beautify Your Text With CSS Gradients!

Pranshu Jha — Fri, 17 Dec 2021 14:17:23 +0000

Here's how to add a gradient to your text to create something like 👇

Although CSS lets you do all sorts of amazing things, unfortunately for some reason you can't just do

color: linear-gradient(#67b26f, #4ca2cd);

To set gradient as the text color

But fret not! There's a small workaround that we can use.

Here's how -

Add the gradient as a background
Add a background clip with value as text
Set the color to transparent And you're done!

Here's the codepen:

Thanks for reading and Happy Hacking!

8 reasons why you should consider learning python today!

Pranshu Jha — Thu, 16 Dec 2021 12:24:46 +0000

Python is one of the most popular languages today. Chances are that you might've already heard about it if you're a developer or starting as one.

That said, it's one of the languages you should consider learning. Here are some reasons why -

[1] High Demand & Popularity

No doubt python is one of the most popular languages now. It has taken the number one slot on TIOBE's Index Rankings. So there's no doubt that developers love Python!

[2] English like syntax

And this is why developers love it so much!

Python has probably the easiest to understand syntax among the popular programming languages. This makes python one of the top choices for beginner developers.

Here's an example of a hello world program in Python and C++ for comparison.

[3] Machine Learning & AI

...are some of the top-grossing buzzwords currently and, will be so for a long time to come. Python is one of the popular choices for Machine Learning. Python also provides multiple modules for Machine Learning like Scikit-learn, Tensorflow, PyTorch, etc.

[4] Web Development

Although you'll need to know HTML, CSS, and a dash of JavaScript to make a delicious website, python can help you with its numerous web-development frameworks and libraries. A few popular examples are Django, Flask, Bottle, web2py, etc.

Fun fact: Python powers popular websites like Spotify, Instagram, Dropbox, Reddit, etc.

So I'd recommend you to at least give Python a try if you're into web development like me.

[5] Game Development

Python offers some of the easiest to use game development libraries, promoting rapid prototyping. Pygame, Arcade, Ursina are some of the popular game development libraries for python.

[6] Automation & Scripting

(This bit is also from personal experience)

I've used python to automate everything from taking screenshots of my online classes to taking attendance of students. And I have to say...it's really nice to be able to shave some time off of tedious tasks.

[7] Huge Community

This means any bug you encounter has probably been encountered before and there probably exists a StackOverflow post about it as well.

(It's kind of nice knowing that you won't keep banging your head over stupid bugs :p)

[8] Tons of libraries and frameworks

Python has numerous libraries for every purpose you might need it for. There are libraries for everything from game development to data science and, frameworks for everything from making websites to GUI applications, you name it!

Conclusion

To conclude simply, Python is a great choice for developers especially beginners. I urge you to give Python a chance, I'm sure you'll be enthralled by its magic ✨

Integrating TailwindCSS with React in 3 simple steps!

Pranshu Jha — Thu, 19 Nov 2020 08:39:01 +0000

In this article I'll demonstrate how you can integrate TailwindCSS in React and also, how to purge unused CSS at the end. Let's begin!

Step 1: Adding TailwindCSS to your project

cd into your project directory and use the following command to install TailwindCSS:
$ npm install tailwindcss

Step 2: Adding a build script

Open your package.json and add the following line in scripts:

"build:style": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",

and, modify the start script to this:

"start": "npm run build:style && react-scripts start",

Your final scripts should look like the following:

"scripts": {
    "build:style": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
    "start": "npm run build:style && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Now, create a new file called tailwind.css in your src directory and add the following lines:

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

Finally import tailwind.output.css in your index.js file:

// index.js
import './tailwind.output.css';

Step 3: Purging unused CSS

To purge the unused css and consequently reducing the total size, we will need to create a new file in the root directory of our project named tailwind.config.js and add the following lines of code in it:

module.exports = {
  purge: [
    'src/**/*.js',
    'src/**/*.jsx',
    'src/**/*.ts',
    'src/**/*.tsx',
    'public/**/*.html',
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Note: You'll also need to have the environment variable NODE_ENV set to production in order for purging to work.

And that's how you can add TailwindCSS to your React project in just 3 simple sreps!

If you made it so far, kudos to you! Be sure to leave your tips and suggestions down below in the comments!