DEV Community: Rahi Khan

Day 17, 18, 19, 20, 21 of #100DaysOfCode 🤖🦾

Rahi Khan — Mon, 25 Jan 2021 18:09:42 +0000

Made an online version of my resume using Gatsby.js

Check out the Repo and Demo

Day 10, 11, 12, 13, 14, 15, 16 of #100DaysOfCode 🤖🦾

Rahi Khan — Wed, 20 Jan 2021 23:22:58 +0000

Been getting the hang of Tailwind CSS for the past week and finally after 3 days and 25 commits, I'm finally done with the challenge I took from Devchallenges.io using Gatsby.js and Tailwind CSS!

Check out the 👉Github Repo and Demo👈

So far I've been using Bootstrap and React Bootstrap in my projects and I was pretty happy with it. But now, after mingling with TailwindCSS a little, one thing's for sure, I'm a big fan of it and I guess I won't be going back to Bootstrap or any other CSS Frameworks anytime soon 🤣 Tailwind projects might look a little bit messy with all those little clusters of utility classes but oh boy, it surely is worth it!

Day 7, 8, 9 - 100DaysOfCode 🤖🦾

Rahi Khan — Wed, 13 Jan 2021 11:27:25 +0000

Completed another challenge from Devchallenges.io using Gatsby.js, Bootstrap and React Bootstrap.

The craziest part was I couldn't figure out how to overlap the card on the image responsively and without breaking the layout. It took me several hours and not to mention a hell lot of Googling around to finally figure out the answer was "negative margins" 🙃

But I guess ya'll can relate? 🙃

Check out the Github Repo and Demo

Also made an NPX business card for myself which you can find here and read more about it on my previous blog and create your own 😉

Create a simple NPX business card 💳

Rahi Khan — Mon, 11 Jan 2021 19:17:09 +0000

Starting from `node -v` to `git push` to writing an entire app using vim, we, developers, spend a significant amount of time in the terminal. Love it or hate it, you have to mess around with the terminal at some point in your dev career. So why not present yourself in a unique way via the terminal itself just by hitting your name in it?

Behold, THE NPX BUSINESS CARD!

👇 hit this in your terminal and you'll get to see a simple yet dashing card with my info

npx rahikhan

Now let's see how I did it and how you can make your own npx business card too! It's pretty simple trust me 😉

Create an account on npm if you don't have it already.
Log in to your npm account through the terminal 👇

npm login

Hit the Use this template button in my repo.
Clone your newly made repo and open it with your favorite code editor (I guess it's VS Code? 😜) and hit npm i to install dependencies

Input your own info in the data.json file.

{
    "user_name": "Jon Snow",
    "user_email": "jon@winterfell.com",
    "job_title": "Lord Commander of the Night's Watch",
    "npx_card_handle": "jonsnow",
    "twitter_username": "jonsnow",
    "linkedin_username": "jonsnow",
    "github_username": "jonsnow",
    "personal_site": "https://jonsnow.io",
    "resume_url": "https://jonsnow.io/resume"
}

In the package.json file change the following:

- `name` to `your name`. (It's the "`your_name`" in `npx your_name`) <br />
- `version` to `1.0.0` <br />
- `author` to `your name` <br />
- `description` to `whatever you like` <br />
- and `repository url` to `your GitHub repo`

```json
{
    "name": "Jon Snow",
    "version": "2.0.1",
    "author": "Jon Snow <jon@winterfell.com> (https://winterIsComing.io)",
    "description": "A personal card for Jon Snow",
    "repository": {
        "type": "git",
        "url": "https://github.com/jonsnow/npx_card.git"
    }
}
```

Hit git add . && git commit -m "cool npx card" && git push in your terminal when you're done.
Publish your package 👇

npm publish

But hold on, what if your package has the same name as another package on npm? You won’t be able to publish it. You’ll get an error. ☠️🚫

For that you can follow either of the two steps:

First one's simple, you can check for naming collisions by doing a search on npm's official site, or through the npm search command, then set the package name with something unique in the name field in the package.json file. Like a very loooong name maybe?
```
{
    "name": "lord-commander-of-the-nights-watch"
}
```
Or you can publish the package under your own username (or npm organization) aka publishing to a scope. For this:

- In the `package.json` file change the `name` field to `@user-name/package-name` manually where "`user-name`" is your npm username and "`package-name`" is the name of the package 👇

```json
{
    "name": "@jonsnow/winterIsComing"
}
```

- The publish command for this method is `npm publish --access public`

Congratulations! You just published your first NPX business card to show off to your dev friends, or regular friends who uses the terminal for any reason 😂

This project was originally created by Anmol Pratap Singh and tweaked a little by me. It's mostly his hardwork so all the credit goes to him.

💻 His Github repo for this project.

References:

Day 4, 5, 6 - 100DaysOfCode 🤖🦾

Rahi Khan — Sun, 10 Jan 2021 10:42:21 +0000

Finished the Tutorial section of Gatsby.js on its official site and further researched more on it.

I'm really impressed by the things you can do using Gatsby. The expansion of functionality using plugins is simply astounding. Whatever you need there's probably a plugin for it in the marketplace. Also, it's pretty feasible to configure and set up your project and the plugins. The dev experience is no doubt super amazing. It surely is the best static site generator out there, but we all know it's capable of doing more than that 😉. Looking forward to doing more projects with Gatsby.

Day 3 - 100DaysOfCode 🤖🦾

Rahi Khan — Wed, 06 Jan 2021 17:17:35 +0000

Started diving deep into Gatsby.js from the ground up following the Gatsby official docs. Looking forward to learning more about it in-depth and implement it in some real-life projects.

Day 2 - 100DaysOfCode 🤖🦾

Rahi Khan — Tue, 05 Jan 2021 17:58:56 +0000

Today wasn't really that productive. So I thought of doing something small, then taking a look at my boring old Github profile I realized it needed a refresh. So, I thought of making it a little less boring.

Here's the Github repo. Feel free to copy and customize it as your own.

I followed this and this video from codeSTACKr. His channel got more awesome coding related videos/tutorials.

Day 1 - 100DaysOfCode 🤖🦾

Rahi Khan — Tue, 05 Jan 2021 06:37:38 +0000

Took up a challenge from devchallenges.io of creating a 404 error page. No brainer, but it was good practice.

Technologies I've used:

It was quite a hectic time working on this challenge. I used Gatsby.js and React for the Frontend and Bootstrap for the UI. I just started out working with Gatsby a few days and instantly fell in love with it. I used quite a few Gatsby plugins. Had to look up some stuff on Google, but hey, if you don't get stuck you ain't doing it right. I'm planning on completing the rest of the challenges in Gatsby.

Check out the Live Demo and Repo

100DaysOfCode challenge init 🚀

Rahi Khan — Tue, 05 Jan 2021 06:35:59 +0000

I've been coding for 2 years now but always as a hobby. Did a few freelance projects but never had the intention to get serious with it.

With the start of 2021, I've decided to set a goal of turning this hobby into a profession. And what better way to start off this new year than a 100DaysOfCode challenge!

The thing that fascinates me the most is the humongous JS ecosystem. All the crazy wild frameworks and libraries living on the internet waiting for us developers to tame them. The beauty of it though!

I want to take full advantage of all those tools, combine them with all the things I've learned so far and merge them all in this 100DaysOfCode challenge.

Nevertheless, I want to get committed to building my tech skills. I don't know how this would end but I'm hoping I'll ace it. I'll also be posting daily regarding what I'm working on.

Good luck to me!

PS: Also this is my first blog. Kudos 🤟