Modern Tools For Front-End Developers

Gone are the days when Front-End development was just editing files, testing them locally and then FTPing them to the server. Previously that was the essential workflow of a Front-End Developer. Something has changed in the past couple of years, maybe Front-End development is now taken seriously and yeah how can I forget to mention the role of browser vendors usually getting their act together. And last but least, the Front-End Developers themselves.

We now have a vast and wide array of tools available to us, allowing us to develop faster and smarter and we can now push the limits of what a modern web browser can do, accomplishing things that some years ago seemed impossible.

The shift from valuing trivia to valuing tools is great. There has been a wonderful gust in innovation and it has completely changed the meaning of being a Front-End Developer.

In this article I will move from tools to technologies that are essential for Front-End Developers. I tried my best to compile all the necessary tools and some more since there is always room for improvement.

Accessing the Developer Tools is easy. In Chrome itself, at the right top of browser window, select the Chrome menu.

From the Settings gear select More tools > Developer Tools.

Or using the keyboard Command+Shift+P on a Mac and Ctrl+Shift+P on Windows.

Sublime text

Sublime text, cross-platform editor, is the most evangelized text editor in place, it is versatile and comes with out-of-the-box packages that can be installed on this lightweight editor. The Python based plugin API makes it fast. Sublime has won over other editors because of the rapid updates available, both addressing the speed and efficiency and the functionality. Believe it or not, but this beautiful editor is managed by one person. Browsing using file to file in ST is done in a jiffy with such ease and finesses. This editor is free, but you can donate for the efforts done to make Sublime text such a beauty.

Link: Sublime website for Latest version.

Github Atom

Atom was recently launched by GitHub, it is a new kind of block spreadheaded by GitHub. It appeared out of the Blue in early 2013 and at first it was a partially closed source application with the core being closed and all the little bits were opened. In my opinion, Atom is an attempt to rebuild Sublime so essentially it is a feature for feature clone. However, unlike Sublime Atom is a Web App wrapped in a desktop shell and runs inside a webkit instance. This is built on top of node.js and is extremely faster. It is hackable to the core. You can dissect this editor depending on your needs.

Link: Atom website

Vim

Vim, originally VI, has been around for decades and is the oldest of all. Due to continuous development this tool is actively maintained and qualifies as one of the essential modern development tools. In terms of extendibility and speed it is difficult to top Vim. However, it is difficult to use and takes couple of weeks training, memorizing key bindings and continuous practice. But once you learn, you are unstoppable.

There are other editors as well, Brackets by adobe, Cloud 9 IDE, Showdown, Light Table, Webstorm and so on.

Webkit Developer Tools

For a Front-End Developer this is a must-have tool. We use Webkit-Developer tools extensively but you might not be aware of all the capabilities. Here in this article, I am inclined towards Chrome, Canary and the screenshots will be from Chrome.

WebKit isn't a black box. It's a white box. And not just that, but an open, white box.

In Chrome we can access these.

The Webkit Developer Tools are divided into many sections.

This toggles a device panel introduced in Chrome lately, here we can view various screen sizes and even test there and debug on the fly.

Elements. The Element panel lets you see everything on the DOM tree and allows the editing the DOM elements. Inspect and edit CSS, view element event listeners and so on.
Network. Insights into resources that are downloaded and requested by the network in real-time.
Sources. With complexities in the increase in JavaScript applications, we need powerful tools to help debugging. The sources are here.
Timeline. The Timeline gives a detailed breakdown of the time spent, where the time is being spent where the load time was more or less, JavaScript parsing and so on.
Profiles. Here we can profile the execution time and memory usage of a web app or page. There are two profiles called CPU profiler and Heap Profiler.
Resources. We can view loaded resources on the current page (inspected page) even letting us interact with HTML5 Database, Local Storage, Cookies, AppCache and so on.
Audits. Audit is carried during page load and is useful for finding unused CSS styles.
Console. The Console panel is primarily for testing Applications and web pages. Here we initiate debugging and create JavaScript profiles.

Compass

Compass is an open-source CSS authoring framework that uses the Sass stylesheet language to make writing stylesheets powerful and easy. If you’re not familiar with Sass, Go to sass-lang.com to learn all about how it works.

Sass

Gone are the days when vanilla CSS was written, then came something called as CSS preprocessing. Here we are! CSS preprocessing helps in writing manageable and clean CSS. Compiling isn’t also a pain. It makes our CSS “Don’t repeat yourself”, saves time, easy to setup, makes websites prettier, the code becomes organized. We can extend classes and many frameworks make it more beautiful. Mostly, you’ll find that the three most popular CSS preprocessors, Sass, LESS and Stylus are more or less the same. In short its a must-have love for Front-End Developers.

npm

npm is a package manager for nearly everything, at least for Front-End developers. npm makes it easy for JavaScript developers to share and reuse code and it makes it easy to update the code that you’re sharing.

Grunt

Grunt is the automation, it is a big help for projects. Lining the code, magnification, compiling is done frequently. Using Grunt saves our time. It runs all the tasks for us thus saves times. There are hundreds of plugins available and nearly anything we can automate using Grunt that also can be done with a minimum of efforts. Grunt and Grunt plugins are installed and managed via npm.

Browser Stack

It’s not possible to have every machine and every device available for testing (it is recommended) but alas it is not possible for everyone. Here a Browser Stack helps. It helps in testing our websites for cross-browser compatibility in real browsers. The best part is we can test both protected and public servers.

There are many many JavaScript Libraries and Frameworks that qualify for the list of Front-End Developers like backbone, angularJS, meteor, KnockoutJS, ember and so on.

5 Comments

Join the conversation! Your thoughts help the community grow.

Faizan Akram Dar11y ago
Add brackets to your list, an open-source with many cool features like live preview, IntelliSense , vim support, etc. http://brackets.io
- Junaid Masoodi10y ago
  I think Atom and Sublime are far better than brackets. I used that and it seems a copy of Sublime. Even Sublime is back in development again with lot of packages plus Atom is developed on top of node which makes it faster than anything.
Gowtham Rajamanickam11y ago
good one
Pankaj Bajaj11y ago
very informative..Thanks for sharing.
Vithal Wadje11y ago
good start keep it up