5 code tools for smart web developers

Faster web development, one bit at a time. #SmartToolsForYou

Photo by Greg Rakozy on Unsplash

I learnt the basics of web development in school and Microsoft’s Notepad was my best friend. At the time, I wasn’t aware of any great *free* tools for web development. HTML, CSS, JavaScript and even DHTML!!?#* — we coded our pages by hand (with a few dollops of copy — paste code snippets) in the bare-bones text editor Microsoft generously provided for free with every copy of Windows.

Fast forward to today. We have new technologies in play, and new tools that make it easier to work with all those technologies. HTML5, CSS3 with Sass or Less, Python, JavaScript, jQuery, React — there are tools that handle all these markup/programming languages/frameworks with ease.

Call it a personal bias, but I’ve never liked WYSIWG editors, preferring to code by hand and learning by trial and error. So I searched high and low, and tried everything I could — editors, code repositories, design resources, bootstrap themes and so on.

After a few years of playing with dozens of free web development tool out there, I’ve compiled a short list of tools that will make you a Code Ninja, and speed up your web development time by a huge margin. Listed in no particular order, here they are:

Sublime Text

Image Credit: Sublime Text

Put simply, Sublime Text takes you to text editor nirvana. Fast, extensible, and extremely easy to use, Sublime Text works wonders with any kind of code. It highlights syntax, automatically indents and cleans up your code and does a thousand little things you’d never expect a text editor to do. The Sublime team was on a development hiatus (that Atom took advantage of!) but now they are back with an all-new text editor for code, markup and, well, prose.


Image Credit: CodePen

Designed to be a collaborative, social platform for web developers to show off their best work, CodePen is so much more. One cannot browse through their collections and projects without learning something new or being inspired! Thousands of web developers, competing and collaborating on a few lines of code that does amazing things! Learn, play, develop and show off!


Image Credit: Ryan Niemeyer on JSFiddle

A tiny little site that does a whole lot. You can use JSFiddle to test your JavaScript, CSS and HTML code in a browser and make quick corrections to get to a final version of your project. Prototyping and testing has never been this easy! You can even collaborate with other developers in JSFiddle, making code changes with real-time previews.


Image Credit: The inkscape project on GitLab

So you built an amazing web app? Congrats! Now, you need to think of the future of your app — what features will you need to develop in response to customer feedback, how will you develop them, who in your team will work on which feature, when will you release these new features? Enter GitLab, a web-based git repository manager with a few extras. Plan your development roadmap, manage your code, track issues, and deploy your code faster than ever! GitLab does all of it, and more!

Stack Overflow

Image Credit: Stack Overflow

No list of developer tools is ever complete without Stack Overflow. Millions of developers on this site help each other with answers to almost every development query! To be honest, I learnt more from Stack Overflow about real world development challenges and solutions, than I did at work! No matter which component of web development you work with, you will have questions and someone on Stack Overflow will have answers. Cheers!

As a web developer, have you tried any of these tools? If you use a fantastic development tool that I haven’t covered, let me know in the comments below.

Create great code with these tools and deploy it faster than ever. Code together with your team on Flock so you can share, communicate, and collaborate — faster.

Authored by Kesava Mandiga, who’s so in love with Sublime Text, he uses it for everything text — even poetry. Also, a content marketer at Flock.