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!
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 Not only can you prototype and test frontend code quickly and easily, but you can also create folders for your rough code, which are like the first draft of your college essays, but in code. I tend to do this when Im struggling to develop the idea that I or someone else proposed in an issue request. Its also web-based so if youre constantly on the go, you to 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!
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 projects 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 theres still more you need to know.
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 the activation link to the
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 theres only one more tool you need to make your utility kit as awesome as Thors Mjolnir(its a magical hammer that can catch thunder).
4 Visual Studio Code (VS Code)
If you're looking for a tool that's simple yet reliable, like Susan Storm (aka The Invisible Woman) recommends 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. Its like having your own Jarvis but silent(Non-comic book fans: Jarvis is Tony Starks 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 Fours headquarters).
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 youre 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! 😊
Credits
Avengers Assemble GIF by Marvel Studios
Lets Go GIF by Marvel Studios
Fantastic Four Move GIF by 20th Century Fox Home Entertainment
Fantastic Four Logo by Marvel Cinematic Universe Wiki
Fantastic Four Power Levels GIF by Power Levels
Image of Reed Richards by Marvel Database
The Thing GIF by Marvel Contest of Champions
Top comments (0)