DEV Community: Afrie Irham

How to work with multiple git branches simultaneously.

Afrie Irham — Sun, 21 Jan 2024 17:09:57 +0000

If you've faced this situation before, you might want to learn this.

You're working on feature A at your work and suddenly you got a ping on Slack.

"Please fix this bug, it's causing a critical bug in production that needs fixing ASAP!!!"

You git stash whatever changes you have right now to make sure the working directory is clean, git checkout to the master branch, make the fix, and when you're done, you git stash pop to continue your work where you left off.

Or worst, you git commit -m "WIP" because you don't know how to git stash. 🥲

If you're perfectly happy with you current git workflow, you can stop reading here.

But if you want to know a better way (hopefully) to work with multiple branches in git at the same time, continue reading.

Introducing Git Worktree.

While stashing your changes and popping them back up is a perfectly valid way to temporarily save your progress (that's how I previously did it too), I'd argue there's a better way to handle it.

Git worktree allows you to "spawn" a new branch that you can change, stage, and commit without ever needing to do a weird hack just to work with 2 branches at the same time.

Git worktree has 3 commands

git worktree list
git worktree add <branch name>
git worktree remove <branch name>

I think from the commands above, it's pretty self explanatory.

Now let's imagine you're in the same situation described above.

Knowing git worktree, you can now just run git worktree add master to create a new branch in your current directory.

💡

Go ahead and try it on any of your code repository.

You'll notice that there's a new folder called "master" in your root directory. When you cd master into it in your terminal, you're now in the master branch of your same project, without ever leaving your feature branch.

If you're on VS Code, you'll also notice that VS Code detects there's now 2 different branches running.

Congratulations, you are now working on 2 different branches of the same project at the same time.

Feel free to spawn more branches as needed but make sure to delete them once you're down with it.

Some downsides.

After using worktree for a while now for my work, there's 1 minor downside using git worktree that I want to highlight.

As you can see, when you want to search for a snippet, the result shows both the main directory and the "new" repo you've created.

To solve this in VS Code, you can just exclude the "main" directory like this 👇

Now the search only shows 1 result instead of 2.

This is a pretty minor downside but it's something I figured I should point out.

Other than that, I think git worktree is fun to use and work with and I think you should give it a try.

Thanks for reading!

How to get lucky, an rant from yours truly.

Afrie Irham — Sun, 26 Nov 2023 14:36:07 +0000

Before we start, please read the QRTs from both Edd and Mu'azh.

They both have presented a great point about luck

Keep working and grinding so that you're prepared to take advantage of luck when it comes.

Me however, I'm here to share about how to get lucky.

Yes, luck is out of our control but we can increase the chance TO get lucky.

I mean it's hard for luck to hit you when you're not doing anything.

Imagine if you only stay at home for a year, only go out when necessary, and strictly within your neighbourhood.

How do you think luck can happen if that's the only thing you did?

Also, the amount of "lucky things" that can happen in your neighbourhood is very low.

Yes it's possible for idk Justin Bieber to come to your house, it's very unlikely, but it's not impossible.

(i have no better example so bear with me)

It can happen tomorrow, or it can happen in the next 50 years, who knows.

As long as he's still alive, the possibility is not 0.

Now imagine you're always travelling, or you go to Justin Bieber's local area for vacation.

You are more likely to meet him now.

Yes you still can't guarantee you'll meet him but it is more likely and that's exactly what luck is.

We can't control luck but we can increase the odds for lucky stuff to happen.

I can endorse this myself, I've been active on social media (twitter, linkedin) since 2017.

A lot of lucky things has happened to me because I'm "travelling the world" on the internet.

I've got freelance gigs, fulltime jobs opportunities, workship mentorship opportunities, and more coming left and right.

And I'd like to think those "lucky stuff" happens to me BECAUSE I've increase the odds.

I'm not saying this to brag but I'm just trying to make a point.

If I never shared anything here, never post a blog, never write a LinkedIn article, keep my heads down and just do my work, I don't think I'll get this lucky.

If you were to take anything from this rant, please remember to do interesting stuff and share it.

You'll never know who's watching.

It could be your next employer, it could be your future co-founder, it could be someone that can help you to land a job, nobody knows.

So if you're ever in doubt to share anything on social media, keep this in mind.

You can't control luck but you can make yourself more lucky.

You can also watch this video to better understand what I'm trying to say.

https://youtu.be/WizT_VdtOYM?si=-1mFHGo4aOH43ZNW

How to remove passwords in PDF

Afrie Irham — Tue, 18 Jul 2023 07:03:32 +0000

Open the PDF file in Chromium-based browsers
Print as PDF

https://twitter.com/afrieirham_/status/1681196950715088897

You should do more interviews.

Afrie Irham — Tue, 04 Jul 2023 16:54:32 +0000

If you're like me, you've probably heard this advice a lot, especially in the tech industry.

"Go do more interviews, ~~even~~ especially if you're not actively looking."

And they're right, here's why.

You have higher leverage in negotiation when you're not desperate. You'll be more confident and can take up more risks.

Maybe you've been dreaming about working in a remote team, but you never had the chance to discuss it and now you're stuck in an office job.

Maybe you want to try new things. You've always wanted to learn more about crypto or even AI. And now you see companies involved in those industries are hiring.

Or maybe you're wondering what's the true value of your work, what's the upper ceiling? You've negotiated your offer but you were playing it safe and didn't ask enough. Now you won't know how much more you could've made.

And understandably, you didn't do anything about it. You like the idea of making more money (duh) or working in a remote team, but it seems like a hassle. You still remember how miserable it was when you were trying to land your current job.

Plus your current job is decent enough. It's not your dream job but it's getting food on the table and you're comfortable there.

But if you're curious to see and wanna try to go for more interviews, keep on reading.

First of all.

Be clear on why you're doing interviews.

If you're happy at your current job, it might be difficult to figure out why you want to go for interviews.

I mean, you're happy with the money you're making, your boss is amazing, the benefits are great, and you're learning and growing a lot, so why are you going for interviews?

Well, things could always be better. You'll never know what's out there unless you look for it.

And that is precisely the answer you want to see what's out there.

Sure things are great now, but what if somewhere out there, you could be making double your salary, significantly better work-life balance, have an equally amazing boss, and you can work remotely?

Sounds fantastic right?

Sure, the grass seems to be always greener on the other side. But what if it is greener?

You think it's too good to be true but what if it's true? What if you're one interview away to find that opportunity? Well, you'll never know unless you go look for it.

So go ahead, apply for that job, you're just browsing anyways.

You're not gonna accept the offers if it's just slightly better. It's not worth the time and effort. You're already content at your current workplace.

However, you need to remember.

Honesty is key.

Being honest is by far the most important thing here. If you're applying for jobs to explore what's out there, you can't pretend to be super committed as if you're planning to move.

Just imagine you're in the recruiter's shoes. You've spent weeks, potentially months, interviewing candidates just for them to say that they're not actually looking to move at the last minute.

Wouldn't you be angry?

Candidate sourcing is hard. Conducting interviews is hard. Don't make it harder on them by not being upfront.

At best, you could get away from it because they didn't bother enough to call you out.

At worst, you just burned a bridge. That's the last thing you want. It's the exact opposite of what you want.

Going for interviews to learn more about the opportunities is a good thing but you need to be transparent about it.

And you need to understand that being transparent does not mean that you are entitled to that interview.

Employers have as much right as you are to withdraw from any interview.

Would you still go for the interview if the recruiter said they are not interested in hiring and they don't have any open vacancies? Instead, they just want to help their HR to polish their recruiting skills and stay up to date with the talent market.

You probably won't do it. It's a waste of time. Right?

Unless...

What if the recruiter is from a FAANG company? (Or your dream company if FAANG is not your thing.)

That will change things up, probably.

If it were me, I would ~~kill~~ pay to get on that interview so I can get my foot in the door.

I'll learn so much even if I failed the interview. Plus, I've just expanded my connections with someone from my dream company.

Sure they are not hiring right now, but who's to say they won't be hiring for a long time?

They might have some openings a few months from now and if I aced the interview and be on top of their mind, they might approach me directly.

That is highly possible because they know me already, I've done their assessment and they think I'm good enough before. It was just not the right time.

I can also get in touch with them again if I'm at the stage where I'm actively looking. Getting referrals from people is highly valuable right now. Employee referrals are 5x more likely to be hired.

While you may think you're not planning to move from your current job anytime soon, it's a good idea to build up for referral network while you're there.

If you're still not convinced, go watch this video after you finish reading this. He does a better job of explaining the current job market in 2023.

https://www.youtube.com/watch?v=Kte-t1pQQ3I

Shameless plug. If you're from Malaysia, feel free to visit CariKabel.com to get access to referrers' emails from 40+ companies.

The Reality.

Being loyal and putting your trust 100% in your current company is commendable, but your job might not be as safe as you think.

You've probably read the news about companies doing layoffs right now, even companies like Google and Facebook.

Have a look at this report by TechCrunch "A comprehensive list of 2023 tech layoffs ". More than 188,000+ employees have been laid off this year (2023) alone. What makes you think you are safe from being the statistics?

Look, companies would not hesitate to lay you off if they find out that layoffs would make them more profitable. So you need to be ready for that and take care of yourself.

You're not "cheating" when you go for interviews, it's just business. Don't feel like you're doing something wrong by taking care of yourself. If you feel that way, your employer probably told you that and you need to get rid of that belief ASAP.

Conclusion

To recap, going for interviews while having a job is a great way to do it better.

You're not desperate for jobs.
You can take more risks.
You might find better opportunities.
It's generally good for your career.

But you need to do it properly. You'll risk burning down bridges if it went wrong. So remember:

Be clear on why you're doing interviews.
Honesty is key.
Getting a new job is a bonus, networking and exploring is the goal.
Your job is not as safe as you might think.

I hope you have a clearer understanding of why and how to do interviews while having a job.

The next step is to go on LinkedIn and just have a look, something might catch your eye.

Stop listening to your parents.

Afrie Irham — Sat, 10 Jun 2023 16:55:51 +0000

Clickbaity title? Yes.

But hear me out.

Your parents are not perfect.

They're humans, they make mistakes, they have biases.

For context, I'm writing this because I just experience some "unsolicited advice" after I told them about me going to the gym.

"...whatever you do, don't take steroids, and don't take (powdered) protein."

When I heard "steroids", I laughed a bit. I was like "duhh?", don't worry, I'll never do that.

But the second one about protein, is the reason why I'm writing this.

While I have no intentions of consuming powdered protein, as per my parent's advice, (if my parents reading this, don't worry 🤧) it did "trigger" me a bit.

I don't think there's anything wrong with proteins, I have seen a lot of people including my friends take those and are doing fine.

But that's when I realized, that was my experience and that's why I have those pov.

My parents might come from a different place. They might've saw other people take protein and ruin their bodies. They might've read or heard somewhere about how powdered protein is bad for us. Or they simply are confused and thought that powdered protein is steroids.

At the end of the day, the advice itself comes from a good place. They want the best for me.

But their experiences might be different from ours. Thus the radical-sounding advice from my pov.

That wasn't the only case though. There was a time when I was talking about financial stuff with my dad and he straight up said "don't take loans to invest (with ASBF)".

For those who don't know, ASBF is an investment instrument in Malaysia where we took a loan from banks and use that money to invest.

I know it sounds super fishy especially if you're not Malaysian but I assure you it's legit. It's one thing unique about Malaysia.

And that really raised my eyebrows after hearing that.

While I don't claim myself as a financial guru whatsoever, I have done my research about it and as always those instruments aren't inherently bad.

It depends on your financial goals, risk appetite, financial situation and so on if you're thinking about doing it as do everything else.

But hearing my dad forbid me from even thinking about taking it is something that really puts me off.

So I asked why.

And he said "I've seen your uncle who's done that, stops halfway, and has lost a lot of money. I don't think it's something you should consider doing at all."

And again that's when I realized our experiences are different which causes our opinion of it to be very different.

And again, the same thing about where those bits of advice are coming from, it's from a good place.

My dad probably doesn't want to see me lose tons of money trying out risky "investments" that have been proven wrong time and time again, at least from his pov.

So look, I'm not saying you should ignore everything that your parents are saying. I'm just saying you should be wary of where it's coming from and understand why it is that way.

Because not everything your parents say is 100% correct.

Sometimes the things they don't want you to do can be good for you.

They might be wrong, they might be right.

You as an adult should be able to evaluate it yourself and if you're not sure whether you're right or wrong be curious.

You can ask your parents why they think of it that way, then you can re-evaluate your thoughts on it again until you are satisfied.

You can also just "test it out".

Say for example I'm not sure if taking steroids is good or bad for me (read: it's bad). I can simply try it out to see whether I'm right or not.

If I'm right then great.

If I'm wrong...that's great too.

You just need to be prepared to hear "I told you so" if you're wrong though, haha.

In both cases, I learned something new.

Now, before you think "testing it out" is irresponsible, you should remember that you should only "test" stuff out if you're not sure whether it's right or wrong.

...after you've done your research.

If you know something is obviously wrong, then don't do it.

If you're not sure but a lot of evidence is pointing towards "you're wrong", don't do it.

You should only "test" out stuff you're not sure about, and the goal is to get answers.

If you know or see a lot of evidence suggesting it's wrong and you still want to do it that is irresponsible.

Also, when you're testing out stuff and turns out you're wrong and really bad stuff happen, don't feel bad.

You're not intentionally trying to harm anyone, you're just curious and trying to learn. I think you should be proud of it.

So yeah, don't listen to your parents' advice blindly, be curious, question it, and then make your own conclusions.

And oh, this article is not just about advice from parents, it could be from anyone, about anything.

Including this very article, try to understand where my advice coming from, and do your own research.

How To Squash Commits Locally

Afrie Irham — Fri, 26 May 2023 07:05:52 +0000

If you're like me, you're probably familiar with "squash and merge" when merging pull requests on GitHub.

If you're also like me, you're now trying to figure out how to do this seemingly simple "squash and merge" thingy locally for some reason.

Whether you've been asked to do it because that's how your team has done it (read: my team) or you're curious how to do it just to learn you've come to the right place.

The Mechanism

The main idea of squashing your commits is you need to reset or undo your commits until the very last one you want to squash. Then just git commit again.

1. Reset to your last N commit

Where, N = number of commits you want to squash

For example, if you have 3 commits that you want to squash, you can simply git reset --soft HEAD~3

IMPORTANT : make sure it's a *soft* reset by using the --soft flag.

Otherwise, you will lose all of your progress. We don't want that.

2. Re-commit

This is pretty straightforward, just git commit -m ...

And that's it, it's pretty simple when you know now but it was quite confusing if you're used to the 1-click squash and merge button on GitHub.

At least that was the case for me. 🥲

Understanding useEffect and dependencies array in React

Afrie Irham — Wed, 24 May 2023 08:51:31 +0000

I made a simple react app in CodeSandbox to demonstrate the different usage of useEffect below.

Note that the app is using Chakra UI for styling but it's not relevant in this article.

https://codesandbox.io/s/useeffect-demo-lgi9b8

The app can do 3 things.

Change the color of the background with the "Change Background" button.
Increment or decrement the number by using the +/- button.
Change the text color of "Hello" using the "Change Hello" button.

The app has 3 states using useState

number
bg (store background color)
color (store text color for "hello")

Now let's get into the demonstration.

1. `useEffect` without dependency array

useEffect(() => {
    setNumber(number + 10);
});

If you uncomment the first useEffect, you can see that the number is getting bigger and bigger infinitely.

That's because useEffect without dependency array runs on every render.

Let me show you what happens here chronologically.

The app renders and initialize the number with the value of 1.
useEffect will run the code setNumber(number + 10).
This will then trigger the component to re-render since we've updated the state of this component the number state.
And when the component re-renders, useEffect will run again, and we're back at step 2.

So useEffect with no dependency arrays will run on every render.

2. `useEffect` with empty dependency array.

useEffect(() => {
    setNumber(number + 10);
}, []);

Now let's comment the first useEffect and uncomment the second one.

Notice how the number is now 11 instead of infinitely getting bigger.

This is because when useEffect is declared with an empty dependency array, it will only run once which is during the first render.

You can click on the other button to see what happens.

The number will only change if you click on the +/- button only. Change Background and Change Hello does nothing to the number.

Chronologically what happens is:

The app renders and initialize the number with the value of 1.
useEffect will run the code setNumber(number + 10), which makes the number 11 now.
At this point, the component does re-render but useEffect does not run on the second render because of the dependency array.

Remember: useEffect with an empty dependency array will only run on the first render.

3. `useEffect` with 1 variable in the dependency array.

useEffect(() => {
    setNumber(number + 10);
}, [bg]);

Now if you add bg into that dependency array, the same thing will happen as before.

But now if you click on the Change Background button, the background color will change but so does the number.

And notice that the number is incremented by 10, not by 1.

What happens here is the useEffect will run just like how it was when the array was empty.

But when you add bg into the array, it will also run whenever you update the value of bg.

It's like the useEffect is listening to the value of bg for any changes, and if it's updated, it will run the code.

4. `useEffect` with 2 (or more) variables in the dependencies array.

useEffect(() => {
    setNumber(number + 10);
}, [bg, color]);

Again, on the first render, it will be the same as the 2nd and the 3rd case.

Also, if you click on the Change Background button, same behavior is still there.

The difference now is the number will also be incremented if you click on the Change Hello button.

At this point, I think you'll understand why that is the case.

The useEffect here still listen for changes in the value of bg but it also listens for color now.

That is why when you click on the Change Hello, the number is added by 10. Same reason as the previous case.

You can also try to remove bg in the array and see what happens.

Conclusion

I hope now you understand how useEffect and dependencies array works.

To summarize

// runs on every render
useEffect(() => {
    setNumber(number + 10);
});

// run once (only on the first render)
useEffect(() => {
    setNumber(number + 10);
}, []);

// runs on first render and anytime value of bg is updated
useEffect(() => {
    setNumber(number + 10);
}, [bg]);

// runs on first render and anytime value of bg and color is updated
useEffect(() => {
    setNumber(number + 10);
}, [bg, color]);

You can't out-market a bad product to grow.

Afrie Irham — Mon, 22 May 2023 14:19:28 +0000

When thinking about marketing your product you need to make sure what you're selling is valuable. Your product needs to actually deliver its promises.

I am currently thinking of a way to better market one of my product, CariKabel.com, and the best way to do marketing is to show proof that your product do indeed helps people achieve their goals.

But CariKabel has yet to have any success stories that I can use for my marketing.

That is when I realized I'm not comfortable just selling a "dream".

A dream is what it can do vs what it has achieved it's not tangible.

Yes, you could get sales selling a bad product and have some "success", but I don't think it's sustainable.

You probably should be thinking about your product's impact on your customers if you want a sustainable business.

CariKabel's main goal is to help job seekers have a better job-hunting experience vs the traditional way by giving you access to the referrer's email of the people in the company that you're interested in.

For example, if you want to work for Hashnode.

You would probably have a higher chance of getting called for an interview being referred by someone working there vs applying directly through their job portal.

At least that's the idea that's CariKabel's "dream".

But until I can prove that is what's happening, it's really hard for me to spend more time and money marketing it without any success stories.

Plus I'll feel a lot better selling stuff that helps people. I won't be thinking about weird marketing tactics to get customers to compensate for a bad product.

However, you can't get any success stories without customers. So you'll still need marketing to start.

But after getting your first few customers, the next step is to get testimonies.

Then you can think about scaling.

I mean it makes more sense that way:

Get the first few customers
See if they achieve what you're promising using your product
If yes, you can use their stories/testimonies to reach more people
If not then maybe your product does not make sense, or you need to change something about it

So yeah, that is why I said you can't out-market a bad product. You'll eventually fail even if it seems you're doing great (i.e. sales are high in the beginning).

How to integrate mailchimp with React

Afrie Irham — Wed, 24 Aug 2022 04:38:09 +0000

I hope I make it clear enough what this article is all about based on the title. But to add on the title a little more, this article will work with any frontend JavaScript framework.

If you ever find yourself in the same position as me, ie. you want to use mailchimp to collect email and you want to connect it to a custom frontend project, this article will be useful to you.

Note that I will be using React in this article as an example, but this should work with any JavaScript project.

If you want to have a look at my implementation, this is the source code. Also, this article will assume that you've already setup your project.

With that out of the way, let's get into the article.

What you'll need:

Mailchimp account
jsonp

1. Get request URL link from Mailchimp

Go to your Mailchimp dashboard, on the sidebar, go to Audience > Signup forms. And then, click on Embeded forms.

You can add more fields by clicking on the Form Fields and enable all the fields that you need. Then click on Continue.

Find the form tag in the code, and copy the action URL.

Also, look for input tag and find the fields that you've added. Take note the name of the input tag. We will be using it to submit our form later.

<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>

In this case, the name is EMAIL.

2. Setup the `onSubmit` handler

Before we proceed: Don't forget to install jsonp package in your project.

First, we need to replace the /post? with /post-json? in our url. Then add this code in your onSubmit handler. I'll explain what we did later.

const onSubmit = e => {
    e.preventDefault();
    const url = 'your-mailchimp-url';
    jsonp(`${url}&EMAIL=${email}`, { param: 'c' }, (_, data) => {
        const { msg, result } = data
        // do something with response
        alert(msg);
    });
};

We use the jsonp function to make the request. We then append &EMAIL=<your-input-email> to include the email that we want to submit.

If you have more fields, just use the name value you've listed out from Mailchimp code before, and append it accordingly.

Then we add the { param: 'c' } as the second parameter, but I don't really know why we need this to be honest.

Lastly, we add a callback function to handle the response. The relevant response data will be available to you in the second argument. That's why I use _ for the first argument.

From there, I just alert the user with the response message.

And that's it, you should be able to submit the email to Mailchimp now.

For more context

I write this article to share my learning when I was building "Coming Soon" page for my upcoming project sea-techjobs.com. (shameless plug here )

I want to collect emails using Mailchimp but I don't want to use their form builder. I think I can do a better job with React and ChakraUI to design the website but I wasn't sure how to exactly get this two connected.

I first stumbled upon this video on how to setup Mailchimp newsletter with React. And in that video, they were using this library called react-mailchimp-subscribe but I couldn't get the state working right.

I looked into the source code and figure out exactly how it works under the hood. I realized that I don't need that library for it to work. I can just copy how it works and tweak it to suit my needs.

Then I thought, why not write an article to hopefully help other people who might be facing the same issue thus this article.

So I guess that's it from me. Thank you for reading and have a good day.

p/s - If you're curious about the project that I'm working on, you can read this twitter thread to learn more. It's in Malay though, I'm sorry if you're english reader. 🤧

Stop buying Notion templates, create your own instead.

Afrie Irham — Sat, 23 Apr 2022 06:18:25 +0000

I used to look for templates on Notion for hours, trying to replicate them for days, setting up the perfect dashboard that's aesthetically pleasing but never got to use them even once sounds familiar? 😜

Why? Because I was using someone else's system.

A system that

they come up with
only works for them
not mine

Now what I did instead is, I use Notion however I feel I like it. And yes it is messy, but it's my mess.

What's important is it works for me whether it's an expense tracker or a to-do list.

And I keep using it until eventually, after using it multiple times, I saw a pattern. From there, I start to systematize it and came up with my own template.

I am a huge believer that in order for you to do things systematically, you need to do it messily first, then after you have done it enough, you can tidy it up.

This not only applies to Notion templates, it applies to everything.

I saw the same thing in my work when I'm coding. We don't start coding by trying to write the most efficient code first, we start by making it work then we refactor.

Anyway, I digress.

Look, I'm not saying you should never look for inspiration in other people's work. What I'm saying is, you should not just blindly copy it.

In fact, I encourage people to look for inspiration and try experimenting with it and don't be afraid to customize it according to your needs.

So go do stuff first, and then you can worry about making it systematic/beautiful.

How to Contribute to Open-Source Project on GitHub

Afrie Irham — Thu, 07 Apr 2022 00:01:47 +0000

So you've been reading articles about how to become a better software developer on the internet and inevitably, you've stumbled upon one common advice across the articles contribute to an open-source project.

And youre thinking, Sure but how? How do I contribute exactly?

Well in this article, I'm going to walk you through a step-by-step process on contributing to your first open-source project. This article is meant to teach you the "how" part, the technical part.

Or in other words, this is a technical tutorial on how to contribute to a public repo on GitHub, exciting stuff.

The project that you are going to contribute to is a small little project of mine called the Guestbook. It's basically a website where you can leave some comments, maybe an advice, some quotes that inspires you, a joke anything at all.

Hopefully by the time you read this, there are some comments made by other people and not just me 🥲

Gentle reminder

Before we proceed to the steps, I want to talk about contributing to an open-source project. Specifically, what can you contribute because it is one of the most if not the most important steps to all this.

While contributing to an open-source project is a great thing to do, there are some contributions that are made just for the sake of making a contribution.

You don't want to spam the maintainer with bad contribution because it does not help anyone, and you should not be proud of that.

If you think you can contribute meaningfully to a project by fixing a bug, adding new features, or even improve the documentation by all means go for it.

With that out of the way, let's get into the tutorial.

Forking the repository

The first step if you want to contribute to an open-source project on GitHub is to fork the repo that you want to contribute to.

Now you may be wondering, why do we have to fork the repo? Why can't I just clone it?

Well, it all depends on what you're trying to do.

In some cases, you might just want to run the project locally and see how things are done, without the intention of making any changes to the original repo if that's the case, you can just clone it.

In our case however, we want to run it locally. But we also want to make some changes, and contribute back to the original repo with our changes, which is why we need to fork it.

Forking vs Cloning

When you clone a repo, you will have a copy of the repo locally but it is still pointing to the original GitHub repo.

With cloning, you will run into a problem when you try pushing your code back to GitHub. You won't be able to do that because you don't have a write permission to that particular repo.

By forking however, you kinda clone it into your GitHub repo, in which you will have the write permission.

Technically it is your repo now, and when you clone, edit, and try to push new updates back to GitHub, it will succeed because it's your repo.

That's why you need to fork it first, so that you will have the write permission.

So go ahead and fork this repository.

Clone the forked repository locally

Now that you have this repo under your name, you can clone it as usual and try to run it locally.

Note that this project is a Next.js project. You will need to install node and run npm install or yarn to install the dependencies.

Once the dependencies are installed, you can try to run it by running npm run dev or yarn dev and hopefully you will see this in your terminal.

By now you should be able to go to your localhost and see the guestbook page.

If everything went well, you can proceed to the next step.

Create a new branch

Now that you can run the project locally in your machine, you should be able to make some changes to it.

But before you start doing any changes, you should create a new branch and name it <your_github_username> . For example if I want to create a new branch, I will name it afrieirham .

You can create a branch however you want but the way I usually do it is using VS Code. At the bottom left your VS Code, you will see a main text.

You can click the Create new branch from... and enter your branch name.

Then select the main branch for this.

This will create a new branch called afrieirham from the main branch.

Now if you notice, it will change it to afrieirham which means I have successfully create a new branch. Hopefully yours will display your GitHub username.

If you find this method a bit tedious, you can always use the command line.

git checkout -b <your-github-username>

Quick Note

If you're contributing to a real project, usually you will name your branch based on what you're trying to do.

For example it might be a new feature called feature/upload-photo or a bug fix called fix/form-not-working .

It all depends on the project maintainer if they have a guideline for branch name. For this tutorial, you just have to use your GitHub username, thatll makes it easier for me, thanks. 🙇🏻

Making your changes

Now that you're on a new branch, you can start making your changes safely. To sign the guestbook, you need to create a new file in the sign-here folder located in the public folder.

Youll need add a new JSON file with your GitHub username as the title. In my case for example, I will create a new file called afrieirham.json. Yours would be your-github-username.json.

Then you can copy the template I provided in the README or copy the code below.

{
  "body": "Change this with your comment",
  "date": ""
}

Paste the code into the JSON file youve created and add your comment accordingly.

To add the date, youll need to go to this link and click on the Copy to clipboard button.

You can then paste it into the date section of the template and it will look something like this.

{
  "body": "Your comment",
  "date": "2022-04-04T23:25:49Z"
}

I hope my instructions are clear.

You can also refer the README file in the repo on how to get started, the instructions should be similar to this article.

Committing your changes

Once you've made your changes, you can proceed into the next step which is to commit your changes.

If you already know how to do this, go ahead and commit the JSON file you've created, you can skip this part.

If you don't, I will show you step by step on how to commit your changes with VS Code.

First, you need to go to the git tab in VS Code, it's the icon with the blue number badge.

When you click it, you should see something like this.

By right it should show that youve added a new JSON file. It's fine if it shows more than that, you probably have explored the other files and make other changes if that's the case.

However, you will only need to commit the JSON file that you just made, that's the only file you should be contributing in this tutorial.

Feel free to do any other changes for yourself, just don't include it when you want to contribute for this tutorial.

You should write a commit message in the input box. Just write anything to be honest, this message will be stored in the GitHub repo though, so be sensible.

Then you can click on the + plus sign when you hover on the JSON file. This step is called staging your changes.

It should show something like this. This means that the changes you've made is ready to be committed into the repo.

From here, you can either click on the icon or press command + enter for Mac or control + enter for Windows.

You might need to setup your Git config if you've never used Git before, but I hope you know how to do that.

If the JSON file is gone from the git tab in VS Code, you now have successfully make a git commit, yeay!

But there's still more steps need to be done.

Pushing your changes to GitHub

This step is pretty easy and should be a quick one. All you have to do is just click on the cloud icon at the bottom left of VS Code.

If the icons changed to this icon, you're all good.

Making a Pull Request (PR)

Pull Request is arguably the most important step to all this. It is a way for you to make a merge request to my GitHub repo so that your code will be reflected on the website once I approve it.

To make a PR, you need to go to your forked repo, or the original repo and you might see something like this. Just click on the Compare & pull request button.

If you don't, you can click on the Pull Request tab and then click on the New Pull Request button. You should be on this page after you click on the button.

When you're on that page, you can write something if you want. Ideally in a real open-source project, you should write about the changes you've made and what are the PR is all about.

It will help the maintainer or the owner of the repo to review your PR and understand what you're trying to do.

Before you click on the Create pull request button, you should make sure that you are trying to merge the correct branch to the main branch.

Things you should double check:

Base repository is afrieirham/guestbook and the base is main
Head repository is <your_github_username>/guestbook and the compare is <your_github_username>

If everything is correct, you can now go ahead and click on the Create pull request button. If this is your first PR congrats! 🥳

The whole process you just went through is how you would do it in any real project, and possibly in your job too.

It will not be exactly the same because different organization have different workflows but generally it is the same.

Starting from cloning the project, making your changes locally, making your first commit, pushing your code to GitHub, and finally make a PR for that this workflow is generally the same across all organization.

From here, all you can do is just wait for me to merge your code into the main branch. I will try my best to merge your PR as soon as possible.

After that, hopefully your comment will appear on the guestbook.afrieirham.com, you can always check if your code has been merged or not by going to the PR page again.

Conclusion

By now I really hope you've learned something from this mini project. I hope that you have a clearer vision on how people use GitHub to contribute to an open-source project.

I would also like to point out that it is not necessarily only applicable to an open-source project. You can use the same method in your own project, and you might find some similarity when you start working in a real project.

There might be extra or less steps involved, but I hope this tutorial will be a good foundation for you to learn a more complicated workflows in your organization.

How to use your domain and subdomain with Hashnode and Vercel

Afrie Irham — Fri, 23 Jul 2021 06:20:42 +0000

Yesterday I ran into a problem when I try to connect my domain to Hashnode and use a subdomain on Vercel. Thankfully, everything is resolved after I reach out to Sandeep on Twitter.

Here's the tweet.

https://twitter.com/afrieirham_/status/1418174381533003779

If you're planning to use your naked domain (or root domain) on Hashnode and you have a project on Vercel using a subdomain from the same domain please read this first.

The Issue

Hashnode uses Vercel, and when you want to connect your root domain to your Hashnode blog, you will need to delegate it to Hashnode's Vercel account.

Again, if you're not planning to use any subdomain (on Vercel) from the domain you use on Hashnode, there's no problem.

However, I want to use afrieirham.com for my Hashnode blog, and I want to use bukugraduan.afrieirham.com on my Vercel project.

But I get this error

Because what essentially happens is you're trying to use the same domain with 2 different Vercel account; Hashnode's and yours.

The solution

If you've already facing the same issue, you might want to contact Hashnode to delete your domain from their Vercel account, then follow these steps.

Use www subdomain for your Hashnode account.
Redirect your root domain to point to your www subdomain.
You can now use any subdomain on your Vercel account.

This way, you'll only delegate www subdomain to Hashnode and you'll keep your root domain on your Vercel account.

Conclusion

I want to again thank Sandeep for his help. He's the one who get in touch with Vercel regarding this issue.

The solution I'm sharing here today is the suggestion from Vercel's team, so I would like to thank them as well.

This is what they have to say,

It will be supported in the future. At this moment, however, it is indeed an edge case that we are not prepared yet. Vercel

DEV Community: Afrie Irham

How to work with multiple git branches simultaneously.

Introducing Git Worktree.

Some downsides.

How to get lucky, an rant from yours truly.

How to remove passwords in PDF

You should do more interviews.

Be clear on why you're doing interviews.

Honesty is key.

Unless...

The Reality.

Conclusion

Stop listening to your parents.

How To Squash Commits Locally

The Mechanism

1. Reset to your last N commit

2. Re-commit

Understanding useEffect and dependencies array in React

1. useEffect without dependency array

2. useEffect with empty dependency array.

3. useEffect with 1 variable in the dependency array.

4. useEffect with 2 (or more) variables in the dependencies array.

Conclusion

You can't out-market a bad product to grow.

How to integrate mailchimp with React

1. Get request URL link from Mailchimp

2. Setup the onSubmit handler

For more context

Stop buying Notion templates, create your own instead.

How to Contribute to Open-Source Project on GitHub

Gentle reminder

Forking the repository

Clone the forked repository locally

Create a new branch

Making your changes

Committing your changes

Pushing your changes to GitHub

Making a Pull Request (PR)

Conclusion

How to use your domain and subdomain with Hashnode and Vercel

The Issue

The solution

Conclusion

1. `useEffect` without dependency array

2. `useEffect` with empty dependency array.

3. `useEffect` with 1 variable in the dependency array.

4. `useEffect` with 2 (or more) variables in the dependencies array.

2. Setup the `onSubmit` handler