A web dev is only as good as his/her toolkit

A collection of seven web development tools that I wish I had known about when I started

Once you’ve been a web developer for some time, you surely have a nice toolset that you’ve built up over the years. But what if you had known about all these tools when you first started out?

I’ve been a front-end web developer for about 2 years now. When I first started out as a web dev, my toolset was not very well-rounded. Through various jobs and some self exploration, I have gathered a collection of tools that work well for me. Every developer will have their own unique set of tools, but some basic tools form a common foundation. If you’re starting out as a web dev, I hope that this list helps you get your feet on the ground. If you’re an experienced web dev, reach out with your tips; I’d love to learn from you.

1) A good source code editor

When I first started learning HTML and CSS, I used Notepad to practice. Seriously. Notepad does the trick when you’re just learning the basics, but it will not suffice for any serious web dev. Choose a source code editor that syntax highlights your markup (syntax highlighting is basically cool colour coding that helps you find syntax errors and overall makes your markup more readable). I cannot stress this enough, your source code editor can make you or break you.

Also, learn the keyboard shortcuts of your source code editor of choice, it will save you tons of time. I’m usually not great at remembering keyboard shortcuts beyond the basics, but from experience I can say that they’re worth the extra little bit of time it takes to make them stick.

My source code editor of choice: Sublime Text 3. Sublime Text is awesome. It has syntax highlighting, and other tons of great features. The trial version is also free!

2) Developer tools (a front-end web developer’s best friend)

Developer tools are debugging tools that are built into a browser.

If you use Chrome, you’re in luck, the dev tools are awesome. Windows F12 or Mac ⌘ + Option + I. Do It.

If you’re using Firefox, I would recommend downloading Firebug, a third party extension, although the native Firefox developer tools have improved recently.

If you’re using Internet Explorer, don’t. Stay away from doing any major development in IE, it’s dev tools suck. Ideally, you should be testing your work in all browsers, so unfortunately, you will have to deal with the poor excuse that is Microsoft’s dev tools occasionally.

Each tab of the developer tools is useful, but I want to bring your attention to 2 in particular:

The “Elements” tab shows you your HTML, side by side with your CSS. You can make changes to either directly in the dev tools to see them update in your browser. (Note: you’ll lose these changes if you refresh.) In Chrome DevTools, if you scroll to the bottom of the CSS section, you’ll see a useful box model of the element being inspected.

Next, the “Console” tab. This tab logs any of your JavaScript errors and console.log statements and lets your run live JavaScript statements.

Personally, I do all of my major web development in Chrome first, since I have become very comfortable with Chrome’s developer tools.

3) a JavaScript Framework/Library for the DOM

Dealing with the DOM using native JavaScript can be daunting. That’s why there’s libraries that make it easier to make your site interactive by letting you do more with less.

I personally use jQuery and I love it. I learned jQuery in conjunction with JavaScript and it made doing just about anything easier. It’s also well known, popular, and has great documentation.

In addition, once you’re using jQuery, you can easily use a whole selection of jQuery plugins (check out jQuery UI). I won’t go into specifics, but any common widget or user interface interaction you need implemented, chances are there exists a JQuery plugin for it. Autocomplete? Check. Datepicker? Check. Tabs? Check.

If for whatever reason you don’t like jQuery, you can research alternatives.

4) An online playground

Sometimes you need a quick way to work on some CSS trickery, test out a new library or debug some component. For such cases (and many others), JSFiddle (and others) are there for you. These online playgrounds have a panel for HTML, CSS, JavaScript and one that renders it all. You also get a bunch of frameworks that you can easily use. They’re also great for sharing code snippets.

5) A community where you can get your questions answered

Sometimes, you can’t figure something out on your own. That’s okay. By asking for help you’ll save yourself time and learn something valuable you likely won’t forget. Be it a question related to HTML, CSS, JavaScript or jQuery, Stack Overflow has you covered. Simply search your general problem, and you should get an answer. Otherwise, post your question, and wait for a response. (Bonus points if you post a link to a JSFiddle when asking your question.) Remember to give credit to good answers!

For specific user experience questions, try User Experience Stack Exchange.

6) A way to test any imaginable screen size

It’s great if you own every mobile device imaginable (but also highly unlikely). For those of us who can’t afford to own all these devices, there’s mobile emulation in Chrome DevTools. Pressing the Esc key when in the dev tools brings up the emulation panel. Once in the panel, you can choose your device as well as other properties. The browser then renders your site the way it would render on the chosen mobile device.

Disclaimer: this tool seems to have some bugs, so use with caution.

7) Graphics editor

As a web developer, you will likely come across a time when you need to modify an image. When you’re doubling as a designer and developer, this is even more true. In general, you should know some basic skills (ie. how to resize your images or how to get a transparent background).

My graphics editor of choice is Adobe Photoshop, but there are cheaper alternatives. For most cases, GIMP and Paint.NET are sufficient (and free).

Although your skills determine the quality of your work, your tools will determine the speed. Choose your tools wisely and let me know when you’ve found your set.

Tools for making the web are much like the web itself: they change. Keep up to date!