Building websites and web applications today is not only about being a great programmer, it’s even more important to be a smart programmer. This means to re-use existing code and applications when possible instead of re-inventing the wheel.
Font Awesome
Font Awesome is indeed awesome: 634 (at the time of writing) icons contained within a single font, constituting “a pictographic language of web-related actions”. Icons are scalable, so they look the same at any size, and you can style them with CSS. It works well with all frameworks and screenreaders and doesn’t require JavaScript.
Bootstrap
Since it was launched by Twitter in 2011, web building framework Bootstrap has become one of the most popular project on GitHub. As Bootstrap grew, its creators Mark Otto and Jacob Thornton decided to move it to its own open source organisation, and the project separated from Twitter.
Bootstrap has a small footprint, LESS integration and compelling visual design. There is a web-based customizer that you can use to tailor it to your open source project: components and jQuery plug-ins can be added or removed by ticking checkboxes, and variables can be customized using a web form. There’s a 12-column responsive grid, typography, form controls and it uses responsive CSS to work with mobile browsers.
Ember.js
Ember.js bills itself as “a framework for creating ambitious web applications”. One of the biggest features is its data binding; objects in Ember can bind properties to each other, so when a property changes in one object, the other is kept in sync.
Another is the ability to define functions on an object that you can then treat as properties. Hence, if a model has a first and last name, you could create a function to define a person’s full name, and have it treated as if the model has a fullname property.
The feature most likely to draw you in is that Ember automatically updates its views when data changes – saving you a lot of work.
AngularJS
AngularJS extends the vocabulary of HTML for declaring dynamic views in web apps. It takes a slightly different approach to Backbone and Ember by doing data binding directly in your HTML. It also uses just plain JavaScript for its controllers, meaning there’s no need to extend other objects as you have to do in other frameworks.
The data binding means data in views is automatically updated when the data changes, but also Angular makes it effortless to bind forms to models, meaning a lot of the code you typically write to link a form to creating a new instance of a model is not needed. Its data binding is bi-directional.
By moving a lot of the binding directly into the HTML, Angular leaves you with much leaner controllers and less JavaScript to write. It might take a while to get your head around, but this approach is really powerful.
Grunt
Grunt allows you to automate common tasks using JavaScript. You can perform mundane, repetitive tasks like minification, compilation, unit testing and linting with almost zero effort. And because Grunt is extensible, if someone hasn’t already built what you need, you can easily author and publish your own Grunt plug-in.
Grunt has dramatically lowered the barrier to entry for web developers by providing a common interface for the tasks in their build process. The extensive plug-in ecosystem and easy configuration format makes it possible for anyone on the team to create a modern build process – designers included.
