Skip to main content

5 great front-end developer tools you should try

                         Chrome dev tools

 

The best tool we have in our hands today. Since its birth, Chrome has invested a lot in its developer tools and is still improving them continuously. Each release (every six weeks or so) comes with its own brand new dev tool features.
The dev tools are a complete suite of diverse instruments. You can edit the DOM (HTML)/CSS in real-time, debug Javascript step by step while undertaking a deep performance analysis, even add a terminal. We recently solved some render performance issue thanks to this.
The DOM/CSS editor is an extremely powerful tool, letting you provide realtime feedback to your team, iterating fast on the UI/UX of a new feature.
The official website and the Google Developers YouTube channel both are goldmines of information. For example, the section about command-line API contains really useful commands.
You can for example copy anything to your clipboard from the console by calling the special `copy` function and pass the thing to be copied (object, function return, etc.)
A lot of great tutorials are also available on HTML5 Rocks.
On top of all this, the network tools let you understand what is really going on under the hood and optimize your loading flows, all while the timeline gives you a deeper view of what the browser does.
If you’re curious enough (like us) you can learn a lot about how a browser (and indirectly, the Web) is working, letting you take back full control of your application’s lifecycle.
I personally think that if they continue to follow this path, they will definitely become the ultimate IDE (or Integrated Developer Environment) for the Web offering developers a powerful development space bundled directly into the browser.

Grunt

 

Grunt is our preferred tool when it comes to task automation. It’s a Javascript task runner, offering both a lot of bundled plugins for common tasks, while still being very extensible, giving you the option to write all kinds of tasks to suit your need. The best comes when you can combine tasks together to create even more powerful ones!
Grunt’s scope goes beyond simply automating front-end related tasks. We use it, for example, to continuously test in PHP while we develop:
We also used it to create a workaround for some performance issues we found in the Vagrant rsync-auto watcher, which were recently introduced. Grunt offers a wide variety of plugins, ranging from watching files to linting, compiling, and minifying your code. Its syntax is consistent and easy to learn and a lot of examples are available around the Web.   


LiveReload

How many times on average do you hit the refresh key on your keyboard every day? A lot, right? LiveReload is a simple Web protocol that triggers events to the clients whenever files are modified Clients can handle this event in their own way, even if the most common use case is when a file is modified (or is a compiled version). The client/server come in various implementations.
We personally use the one bundled in the Grunt watcher plugin, as well as this simple Chrome extension as a client (which has the advantage of being switchable, because you don’t always want live reload, after all). You can see it in action here.
Talking about Chrome extensions, the Chrome store is full of powerful ones. Go and explore, and you’re sure to discover things that will make your life far more easier.
Here are some of our favorite ones:
  • WhatFont, which lets you discover the rendered font of any element on any website (useful when looking for the perfect typography you saw on another site, or for debugging your font-face styles).
  • Page ruler: another useful one, mainly because just like any front-end developer, you’re obsessed by pixel perfection.
  • Proxy SwitchySharp can also be of great help when it comes to debugging localized information (default currency, phone numbers, etc).
  • And of course, our Chrome app to get the most of mention!

Mocha/Chai/Sinon

Does testing make you queasy? It’s often the case, mainly because it requires a ton of bootstrapping and if you don’t design things to be testable from the beginning, things can become very hard.
Fortunately, we now have great testing frameworks, as powerful as what you may have already used with other languages. The two main frameworks today are Jasmine and Mocha.
I personally have had experience with both in the past and have finally come to choose the latter — Mocha. The main advantage comes when you work with a lot of asynchronous code, a common use-case when developing in Javascript. For instance, please consider this really simple example: Here’s now two different specs, one written with Jasmine, the other with Mocha/Chai: 
The chosen syntax for Jasmine is the default one, described in the official documentation. This unofficial extension enhances Jasmine async feature to provide the same thing that Mocha. Take a few minutes to understand this sample and observe how clearer is the Mocha syntax.
Unlike Jasmine, Mocha offers only the behavior testing structure (more about BDD), and not the assertion/mock framework. But there’s nothing bad here, since it perfectly integrates with dedicated frameworks like Chai and Sinon. Sinon comes with a full-set of functions to easily mock objects and stub methods.
For example, here’s how you can assess that a method has been called using the Sinon’s spy type (taken from the excellent documentation): 
Chai is remarkable in the way that it lets you make assertions in a very similar way to natural language.
For instance, please consider the following example, leveraging the should assertion syntax:
Very clear, right? No reason not to go testing your code now!

Karma

Last but not the least, Karma (ex: Testacular) is a Javascript test runner written by the guys behind AngularJS. Now that you’re enjoying writing tests with Mocha, Chai, and Sinon, what about running them continuously, providing you with realtime feedback?
Karma lets you execute your tests from your workstation (in continuous mode) to the production CI. It can launch multiple browsers (Chrome, Firefox, IE (!), PhantomJS, etc.) and run your tests against them, giving you maximum confidence in your code.
While developing, it’s a real pleasure to write code on your first monitor and get the results, in real-time, on the second, all running against multiple browsers.
You’re now good to go to become a front-end ninja, ready to beat all the adversity that you’ll meet during your journey.
Of course, we didn’t even mention here any text editors (we use both Sublime Text and Vim), roots of all our productivity!
All the samples are available on GitHub Gist. Of course, feel free to play with it!
What are your favorite tools when it comes to Front-end development? Share in the comments below.

 



 


Comments

  1. I wondered upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.
    iOS App Development Company
    Android App Development Company
    Mobile App Development Company

    ReplyDelete
  2. Great site for these post and i am seeing the most of contents have useful for my Carrier.Thanks to such a useful information.Any information are commands like to share him.
    Angularjs developer

    ReplyDelete

Post a Comment

Popular posts from this blog

Ten Important Rules Of Ethical Hacking

The world of ethical hacking too is bound by a set of rules and principles, here are 10 crucial ones!

Time and again we have been bringing you valuable resources on ethical hacking since we know and understand the nature of things as far as security goes. Ethical hacking is picking up steam each day with more and more organisations spending heftily to maintain the sanctity of their systems and data. As such, ethical hacking is a glorious career option in the current scheme of things.



1.Set your goals straight

To begin with, an ethical hacker must start thinking like the intruder. He must be able to identify the loopholes on the target access points or networks that are prone to attack, he must be aware of the repercussions of these loopholes and how the intruder can use it against the same. An ethical hacker then has to find out if anyone at the target notice the intruder's attempts to carry out his/her acts. Finding out and eliminating unauthorised wireless access points is always t…

Here Are 7 Brilliant Cheat Sheets For Linux/Unix

There's nothing better than a cheatsheet when you are stuck and need a reference. So here bringing to you 7 brilliant free cheat sheets. 




1. Unix Tool Box: An incredibly exhaustive reference for all things Linux. This document is a collection of Unix/Linux/BSD commands and tasks which are useful for IT work or for advanced users.

2. One page Linux Manual: Great one page reference to the most popular Linux commands, it is a summary of useful Linux commands.

3. Linux Reference Card: One great reference published by FOSSwire.

4. Linux Command Line Cheat Sheet: This is an interestingly sorted and helpful cheat sheet by cheatography.

5. Linux Command Line Tips: This is a linux command line reference for common operations. Cleanly sorted and well described.

6. Treebeard’s Unix Cheat Sheet: A great reference that shows command comparisons with that of DOS. So if you are someone who was a DOS user and has switched to Linux, this is the best one too have!

7. Linux Shortcuts and Commands:…

Extracting Administrator Passwords Using LCP

Extracting Administrator Passwords Using LCP
Link Control Protocol (LCP) is part of the Point-to-Point (PPP) protocol In PPP communications, both the sending and receiving devices send out LCP packets to determine specific information required for data transmission.
■ Use an LCP tool ■ Crack administrator passwords
Tools Needed
■ A computer running Windows Server 2012 ■ A web browser with an Internet connection ■ Administrative privileges to run tools
■ You can also download the latest version of LCP from the link http: / www.lcpsoft.com/engl1sh/1ndex.htm
■ If you decide to download the latest version, then screenshots shown     might differ ■ Follow the wizard driven installation instructions ■ Run this tool in Windows Server 2012 ■ Administrative privileges to run tools ■ TCP/IP settings correctly configured and an accessible DNS server
Overview of LCP
LCP program mainly audits user account passwords and recovers them in Windows 2008 and 2003. General features of this protocol are password recovery, bru…