Frontend Fun: Meet the Fantastic Four Dev Tools for Open Source Contributions

We Meet Again!

Welcome back, open sourcer! Oh, your utility belt feeling light? Don't worry, I got you covered. As you gain experience with open source contributions, it can be challenging to choose the right tools. That's why I've compiled a list of 4 frontend dev tools that can help you power through your issues and pull requests. So sit back, grab some snacks, and prepare to wield your wand (or in this case, keyboard) with ease!

The ladies from the Avengers walk

1. CodePen

If you're like Reed Richards (aka Mr. Fantastic) and are constantly experimenting with new ideas for your open source contributions, then CodePen is the perfect weapon of choice for your utility toolkit. Not only can you prototype and test frontend code quickly and easily, but you can also create folders for your "rough codes" (these are like the first draft of your school essays but in code). I tend to do this when I’m struggling to develop the idea that I or someone else proposed in an issue request. It’s also web-based so if you’re constantly on the go, you can code & save your ideas on your phone on your way to your next class and continue coding on your computer after a long day of beating foes like Dr. Doom. Pretty fantastic huh? 😉 Now CodePen is only one of the many tools in your utility belt. So, without further ado, let's meet number two!

Mr. Fantastic in a fighting stance with stretched limbs

2. GitHub

If you're like Johnny Storm (aka Human Torch) and love keeping up with the latest repositories or just want to connect with other contributors, then GitHub is your go-to weapon. It's like Google Drive for coders, but cooler. You can store all your code in one place, collaborate with others on projects, and even show off your superpowers skills with some sweet KOs, I mean stats and a killer profile page. Plus, who doesn't love a good "fork" every now and then(fork basically means copying a project’s repository. Think of it as making a duplicate of your essay on Google Docs)? GitHub definitely deserves its spot in your utility tool kit, but there’s still more you need to know.

Johnny Storm aka Human Torch

3. Bootstrap

If you can adapt to any programming language with no fear like Benjamin Grimm (aka The Thing), then Bootstrap is for you. All you need to do is copy and paste the activation link into the <head> area of your HTML file, refer to the Docs section to pick any of the components you want and use it to create anything you want. Want a navigation chart? Boom! Want a snazzy profile card? Bam! 😊 Possibilities are endless! Now there’s only one more tool you need to make your utility kit as awesome as Thor’s Mjolnir(it’s a magical hammer that can catch thunder).

The Thing, a man covered in rock is ready to fight

4. Visual Studio Code (VS Code)

If you're looking for a tool that's simple yet reliable, Susan Storm (aka The Invisible Woman), I recommend Visual Studio Code. It's like having your own trusty sidekick with a utility belt, because not only can you save your code, it's packed with so many extensions that can make your contribution process so much easier. Here are a few of my favorites:

GitHub Pull Requests and Issues: This extension makes the PR and IR creation process faster than The Flash high on sugar(Non-comic book fans: The Flash is a superhero who runs fast. He is also the co-founder of the Justice League).
GitHub Repositories: With this extension, you can fork repositories without even leaving your cozy coding cave. It’s like having your own Jarvis but silent(Non-comic book fans: Jarvis is Tony Stark’s virtual assistant.).
GitHub Codespaces: For those moments when you just don't feel like going on GitHub, this extension lets you access a codespace without even opening your browser. It's like having a secret apartment at the Baxter Building(Non-comic book fans: this is the Fantastic Four’s headquarters).

Susan Storm in a training session

Mission Complete

Congratulations, you now have your Open Sourcer toolkit. Before I let you go, I want you to remember this: Open source contributions begin and end with you, so use your powers wisely. If you’re still hungry for learning more tricks, follow me on Hashnode and my other socials via Linkfree. Now go forth and save the open source world! 😊

Follow mini Dr. Strange through his portal