Essential tools for modern web development

Every day, we, as developers, use a wide array of tools to finish our tasks. And as we all differ in preference, so too do the tools we use. However, there are a lot of tools to choose from and trying them one by one will be counterproductive, and not to mention, difficult. So wouldn’t it be nice to have something like a Swiss knife for developers? You know, handy tools that you could just pull out from your bookmarks section? This saves you the trouble of doing a lot of Google searches that could lead to procrastination.

Although there is no definitive list, or even an authoritative one, we’ve gathered together a few tools for web development that we couldn’t get by without.

General applications

These applications aren’t necessarily exclusive to development. Heck, even a college undergrad will use these tools a few times. But they are essential nonetheless. When added to your arsenal, these tools will help you on your organizational tasks like note taking, bookmarking, storing documents or assets, and general productivity tools that ensure you will finish the job.

Evernote

Freelancing tasks such as web development rely heavily on productivity and organization. As a developer, you have to remember (or at least take note of) almost everything related to your job, including bug reports, deadlines, and more. Good thing there is a note application that allows you to remember everything. Incidentally, its tagline also encourages you to “Remember Everything”. That tool is Evernote.

I have been using Evernote for some time now and I’m becoming heavily reliant on it. In fact, I have Evernote installed on every device I own. And with Evernote, I can capture, upload, and sync from any device anywhere.

Evernote has different uses such as tasks, lists, schedules, bookmarks, and more. You could even use Evernote to have a small database of code snippets you can use whenever you want. And because it comes with a web clipper, you can easily get your information from your browser to your Evernote app.

Google Drive

Of course, there is Google Drive. This tool gives me the ability to share my documents, (and files) with clients and my teammates. Usually, I use Drive interchangeably with Dropbox (but I prefer Drive because I find it easier to use). Google Drive also allows my teammates to comment on documents, so communication becomes easier and better documented.

Project management

Development is a multi-threaded process where you sometimes need other people to work with. You also need to establish good communication lines between you and your clients. Project management tools help you organize and monitor every task, reports and bugs.

Asana

I have discussed how much I love using Asana, and I won’t stop because it has provided amazing benefits to all the projects that I have done.

Asana has the things you look for on a project management tool: set deadlines, monitor individual tasks, comment and discuss tasks, and label each subtask.

Truly, Asana stays the top of my list of project management tools.

Basecamp

However, if you’re not fully sold on Asana, there is Basecamp, another intuitive project management tool that allows you to create notes and tasks. Its simplicity is often Basecamp’s selling point as you can easily navigate through the website without even trying hard to learn (and get familiar with) the interface.

Text editors

You can’t develop anything if you have nothing to write your code with. This is why you should choose a text editor that you really like, well, because coding is the heart of development. Here are a few choices:

Sublime

Sublime is a cross-platform and efficient text editor. I personally pick Sublime because it has great features such as plug-ins and add-ons for language-specific tasks. There are also a lot of keyboard commands to make your coding easier. It also has a distraction-free window that allows you to focus on what you are developing.

Notepad ++

Before I tried Sublime, I was a big Notepad++ fan, and a lot of you may also be, primarily because Notepad++ has been around for a long time. What I liked about Notepad++ is because it is easy to use, and combines the basic familiarity of Notepad.

But don’t let its simplicity fool you. Notepad++ has a customizable interface where you can hide toolbars to establish a distraction-free interface. It also has a document map to save you from uncomfortable scrolling.

Local development tools

Changing a lot of things on a live website is dangerous, you might be able to overwrite files unknowingly and that could cause a lot of problems. That is why before implementing major changes on your site, you should test everything locally (i.e. using localhost). Hence these tools:

XAMPP

XAMPP (X-OS, Apache, MySQL, PHP, PERL) is an open-source testing environment that bundles popular tools to ensure a smoother workflow.

What I like about XAMPP is it’s available for all operating systems, this, of course, helps when you have a couple of computers with different operating systems because you don’t have to download (and learn how to use) a different software just to develop something.

MAMP

MAMP (Mac, Apache, MySQL PHP) is another testing environment for developers. However, this is exclusive to Mac users.

If you’re not a Mac user (and doesn’t need Perl), I recommend you to use WAMP.

Version control

No matter how experienced a developer you are, there will be times that you will not get what you want on your first try. Most of the time, development is trial and error. The more changes you make on your code, the more you should monitor the modifications that you makes. Version control tools help you to keep track of everything.

Git

Git is an open-source version control and code management tool that allows you to see the modifications applied in your project using repositories.

As a developer, you can add new features using branching and merging in Git. And the tool only allows you to merge once the code is stabilized. Making changes to your application is just safer. This is essential for teams who tend to change a lot of things in their project, and often, have difficulties monitoring such changes.

BeanStalk

BeanStalk is a host for code repositories and allows you (and your teammates) to collaborate and save codes into a remote location and send them to your server.

FTP

Of course, when everything is good and done, you have to transfer your files into your server. And for that, you need a sound FTP client. Yes, there is a File Transfer client located on your CPanel, but FTP clients can easily and rapidly send more ,more files to web server using different formats.

FileZilla

Filezilla is an open-source and cross-platform FTP client popular for how easy to use it is. The majority of users stick to FileZilla because it’s fast and free. What’s great about this tool is that it is reliable and even has a portable version you can just plug into any computer.

CyberDuck

For Mac users who don’t like Filezilla, Cyberduck is another option. Like its more flexible competitor, Cyberduck is free. It also has features like quick look, growl and remote editing using one of the text editors we discussed in the earlier part of the article.

IDE (Integrated development environments)

IDEs are all-in-one tools that allow you to edit code, debug, file transfers and more.

Netbeans

Netbeans is an open-source and flexible IDE that allows you to develop in PHP, Ruby on Rails, JavaScript and more. It has a powerful and intuitive editing feature, supports FTP and MySQL. What I like the most about Netbeans is its code navigator which works well for me.

Eclipse

Eclipse is also a great IDE. What’s great with Eclipse is that it comes with plugins that allow you to do almost anything you want.

Frameworks

These frameworks are mostly front-end, because you don’t need to exert so much effort in building a shabby design from scratch when you can use better and cleaner frameworks.

Bootstrap

Bootstrap is one of the more popular front-end frameworks to build your user interface with. I personally picked Bootstrap because it was the easiest to use among other frameworks (like Foundation). Bootstrap comes with a wide array of examples, templates, and customizable elements that can help your design look better. Also, due to its popularity, using Bootstrap gives you access to good support.

Foundation

Like Bootstrap, Foundation also provides you a good blueprint for responsive front-end elements you need. It has a good grid-structure and is easy to style and customize.

Rudolph is a geek. He loves reading: books, blogs and even nutrition facts found at the back of products. He loves to read interesting internet stuff. Rudolph has written several articles that concern Typography, Wordpress, Freelance Lifehacks, Graphic Design and Showcase of Beautiful Web Designs. He also writes poems, movie reviews and he puts them in his blog together with rants and some daily life updates. More articles by Rudolph Musngi
  • Danno Blammo

    It seems like this article could have been written a few years ago since it’s missing some recentish things which can really help someone out.

    IDE:If you’re looking for a fantastic IDE, try Jetbrain’s IDEA/PhpStorm/Webstorm/etc (depending on what you do). I used to be a Netbeans fan but the IntelliJ platform is much much more feature rich. It’s not free (in most cases) though but they have free trials so you can try it for nothing. Netbeans is a good second place.

    It’s trendy to buy into a text editor like Sublime (although not so much lately) but I find doing so to be a plugin-finding festival to accomplish things that any other IDE does out of the box. People claim a text editor is simpler and performs better but that’s mostly subjective. Unless you literally need a text-editor START with an actual IDE and if it’s confusing, just turn things off.

    Local Dev Environment:
    Instead of dicking around with your own web server like MAMP or WAMP or XAMPP, it’s worth the time to figure out Vagrant to create a more accurate environment, plus you can set up “www.project1.com” and “www.projectX.com” to different local folders running independently without any hassle. It may seem intimidating because there’s a lot of weird terminology, but it’s a lot simpler than it seems.

    Some IDE’s have support for Vagrant and even built-in web servers too, which is probably better than M/W/XAMP but not as good as Vagrant.

    FTP and Source Control
    If you’re using an IDE like Netbeans or Intellij, these are usually built right in along with source control. You can hit the save button and a file is automatically uploaded if you want. I found WinSCP to be better than Filezilla (on Windows) but it’s just my opinion.

    TLDR; – Get a modern IDE and you don’t need a lot of separate things on this list. Even the free ones like Netbeans handle almost everything you’ll need in web development and handle multiple different languages from Java to Javascript to PHP.

    • Jetbrains software is awesome. It’s everything you need. I use it on a daily basis and even though it’s not free, it’s worth its weight in gold (well not literally as software doesn’t really weigh anything).

  • Best IDE in my opinion is PHPStorm (if you’re a PHP developer that is).

  • it was very knowledgeable yet delightful to read article as james said im too in favor of brandwebdirect they deliver superb services all around the world

  • Great Information Rudolph. I appreciate it. 🙂

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress