Tool-Up Time: The Very Best Front End Developer Tools

Link

The DebugMe team has put together a list of front end developer tools which can be useful for every dev out there. Take a look!

Front End Developer Tools

Alertify.js

AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications.  It’s not only provides a replacement for default browser dialogs, it makes it super easy to create your own!

Alfred

Alfred is an award-winning app for Mac OS X which boosts your efficiency with hotkeys and keywords.

AlloyUI

AlloyUI is a framework built on top of YUI3 (JavaScript) that uses Bootstrap (HTML/CSS) to provide a simple API for building high scalable applications.

AngularJS

AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Backbone

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Bitbucket

Your team, your code, connected. Bitbucket offers distributed version control that makes it easy for you and your team to collaborate.

Bower

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

Brackets

A modern, open source text editor that understands web design.

Colourcode

A tool to explore and find colours. Features controls for swatches in schemes, change of hue, lightness, saturation, export as .less or png.

CSS Comb

A tool that makes your code beautiful. As simple as that.

front-end-developer-tools
image source
CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.

CSS Lint

CSS Lint is an open source CSS code quality tool. It will hurt your feelings:D
(and help you code better).

CSSCSS

A CSS redundancy analyzer that analyzes redundancy.

Dabblet

An interactive CSS playground and code sharing tool. Dabblet saves to Github gists and offers many conveniences for CSS editing.

Dromaeo

JavaScript performance test suite named after the Dromaeosaurs.

Ember.js

A framework for creating ambitious web applications.

Fontastic

Create your icon fonts in seconds. Make your website faster.

Fontello

A tool to build custom fonts with icons.

Foundation

Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.

Framework 7

Full featured HTML framework for building iOS & Android apps.

GitHub

GitHub is how people build software. With a community of more than 10 million people, developers can discover, use, and contribute to over 26 million projects using a powerful collaborative development workflow.

Grunt

The Grunt ecosystem is huge and it’s growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort.

front-end-developer-tools

image source

HTML5 Boilerplate

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of hundreds of developers, all in one tool.

HTML5 Please

Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

Icomoon

The IcoMoon app lets you build and use your own icon sets in different formats including SVG, icon font or simple PNG/CSS sprites.

JavascriptOO

Every JavaScript project you should be looking into with examples, categories, install commands, CDN links, project and author stats.

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

JS Hint

JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions. It is very flexible so you can easily adjust it to your particular coding guidelines and the environment you expect your code to execute in.

JSFiddle

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

JSontoHTML

json2html is an open source javascript library that uses JSON templates to convert JSON objects to HTML.

LightTable

Light Table connects you to your creation with instant feedback and showing data values flow through your code.

LiveReload

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

front-end-developer-tools

image source

Meteor

Meteor is a complete open source platform for building web and mobile apps in pure JavaScript.

Modernizr

Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not.

Normalize.css

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

Paletton

A designer tool for creating color combinations that work together well.

Pesticide

A tool that speeds up CSS layout debugging using outlines.

PhantomCSS

PhantomCSS takes screenshots captured by CasperJS and compares them to baseline images using Resemble.js to test for rgb pixel differences. PhantomCSS then generates image diffs to help you find the cause.

QUnit

QUnit is a powerful, easy-to-use JavaScript unit testing framework. It’s used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!

Responsinator

Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices. It does not precisely replicate how it will look, for accurate testing always test on the real devices.

Responsive

A handy tool for responsive design testing.

Responsive Design Testing

This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website’s URL into the address bar at the top of this page (not your browser’s address bar) to test a specific page.

Retinize

RetinizeIt is perfect for designers and front-end developers who need to slice UI-elements from PSDs for iOS or Retina-ready websites.

Sass

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. It’s CSS with superpowers.

front-end-developer-tools

image source

Stack Overflow

Stack Overflow is a question and answer site for professional and enthusiast programmers. And it’s huge. They just reached the ten million questions mark.

Sublime Text 3

Sublime Text is a sophisticated text editor for code, markup and prose.
You’ll love the slick user interface, extraordinary features and amazing performance. Sublime Text 3 is currently in beta. Try it!

Type-o-matic

A browser extension that finds all the fonts on a page.

TypeWonder

TypeWonder helps users check or test Google Font on their website without actually changing anything on the live website.

Vue.js

Vue.js is a library for building modern web interfaces. It provides data-reactive components with a simple and flexible API.

WebStorm

WebStorm is a lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

What Font Is

Using What Font Is you can identify the font you are looking for!

Wordmark.it

Wordmark.it is designed to help with the font selection process by quickly displaying previews of any text with the fonts installed on your computer.

Yeoman

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. To do so, the guys behind the tool provide a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts.

Source: Tool-Up Time: The Very Best Front End Developer Tools

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s