The internet is chock full of various programming tools to help the modern developer make things faster and with a higher quality than ever before. If you’ve come across this article, you probably already know quite a lot about the programming fundamentals, like HTML, CSS, and JS, but let’s talk about some of the tools that make coding a true joy.
Getting to know the tools of the trade can make your job easier and keep you on top of the skills you need to remain relevant.
In this article, we’ll break down some of the tools that are essential to success as a developer, along with a recommendation of my favorite tools, all well tested and proven. Even better, all of these tools are completely free. Excited? Let’s get started!
1. A Solid Code Editor
A code editor serves as the centerpiece of a developers life. When you’re spending all day in your code editor, you want to make sure that it’s the best one available, configured perfectly for your needs.
Of course, all editors provide the basic functionality needed to write, edit, and save code, but the good ones go above and beyond with features like autocomplete, visual themes, and extensive plugin libraries.
Atom IDE
Best Free Option
My favorite free editor is Atom, which is supported by Github. Atom is an open sourced editor that is chocked full of features and has a healthy plugin library to add even more features.
Atom is also fully customizable with CSS, so you can fiddle and customize the theme to your liking. Quite a few ready-to-go themes are available as well.
Since it was created by the team at Github, it also has fantastic Git and Github support, making using these tools even easier!
Jetbrain’s Webstorm
Best Paid Option
If you can afford it (or you’re a student), the Jetbrains line of code IDE’s are fantastic. WebStorm is their web developer IDE, and features like IntelliSense (autocomplete), huge plugin library, amazing support, and insane functionality make it my favorite IDE to use.
Plus, if you code backend in Java, Python, Go, or any other language Jetbrains probably has an IDE that supports that language that is similar to WebStorm, meaning you only have to learn one IDE!
Git
2. Version Control
Version control is without a doubt critical if you work on a team, but even if you’re working on your own, using version control is a great way to stay organized and keep your code history in case something breaks (as it often does).
By far the most popular Version Control System (VCS), and my recommendation, is Git. Git is a distributed version control system, which you probably know from the popular online code repository management system Github.
Git boasts a number of features, such as a powerful CLI, “safe” history keeping, and easy-to-use functionality.
HTML5 Boilerplate
3. Frontend Boilerplate
While each site you create as a front-end developer is unique, you don’t have to do all your coding from scratch. Boilerplates are code templates you can use to kick off your development process. These sets of HTML, CSS, and JavaScript files help you spend less time doing the routine work of setting up your site files while feeling confident that your site follows modern best practices.
I use HTML5 Boilerplate, a powerful boilerplate that comes with analytics, icons, modernizr, normalize.css, and a ton of other goodies that make it really easy to create a new website.
HTML5 Boilerplate was created by hundreds of developers from around the world, and is always kept up to date with the latest best practices.
4. Frontend Assets
Now that you have your awesome boilerplate site setup, you need some assets to make that site look stunning. By selecting nice icons, fonts, and other design assets, you can make a boring site look incredible.
While there are literally thousands of front-end assets available, there’s a few I particularly recommend. When looking at frontend assets, you want a high degree of customizability and ease of use.
Google Fonts
Any good design starts with a good font, and Google Font has you covered. With hundreds of free fonts available, you’ll always be covered regardless of what style your website is.
Font Awesome
Now you need some killer icons. Look no further than one of the biggest icon libraries around, Font Awesome. They use SVG supported icons, meaning they look great at any resolution, and offer a high degree of customizability for all their fonts.
Undraw
If you’re looking for some beautiful illustrations for your website, UnDraw has you covered, with hundreds of customizable and free website SVG illustrations.
And finally, you probably want some awesome photos. For that, I always turn to Unsplash, which has tons of royalty free photos that you can use.
Chrome Dev Tools
5. Developer Tools
As you build your site, you’ll want to make edits “live” in the browser to either the HTML or CSS, as well as see what code is affecting which parts of the site.
Dev tools are a function built into modern web browsers that let you see the code behind each section of a site right in the browser with just a few clicks. (Hint: dev tools also let you peek at the code behind any website so they’re also a great way to learn a thing or two from other developers.)
Chrome is the current industry leader in web browsers, so I recommend their developer tools for their simplicity and ease-of-use. Plus, they have Lighthouse built in, making it easier to analyze your site performence.
Vercel
6. Deployment Options
Now that you want to deploy your site, you’ll need a provider to host it to the web. Whether you’re building a static site or a complex web application in React or Angular, I recommend using Vercel to make it really easy to host your site. They integrate easily into the Github workflow, and support every popular framework.
Even better, you can host your website completely free through their platform! Another great choice is Netlify, who I also use for some projects.
Conclusion
Hopefully with all these tools, your developer experience will become way better and easier than before. Todays technology and services makes it easier than ever to build awesome websites. I’m looking forward to seeing the amazing things you’ll be creating!
Keep in Touch
There’s a lot of content out there, I appreciate you reading mine. I’m a young entrepreneur and I write about software development and my experience running companies. You can signup for my newsletter here
Feel free to reach out and connect with me (I love meeting new people!) on Linkedin or Twitter.
Top comments (0)