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.
Personally, I do all of my major web development in Chrome first, since I have become very comfortable with Chrome’s developer tools.
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
5) A community where you can get your questions answered
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).
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!