So you want to be a Front-End Developer?

A list of Front-End Tools that you should consider using for your next project

Being a front-end developer does not necessarily mean that you only develop awesome UX and stunning UIs, but it’s about making everything work. I’ve been in a startup environment where the designer functions like a front-end developer, he would make design decisions and mark it up in a static html file, then makes sure that it is seamlessly integrated with the back-end developers.

Tools you should consider using for your next project:

CSS Frameworks:

Some like to build their own framework, some like to save the hassle and take an existing framework, chop it to pieces, customize it and BAM! Here is a list of CSS frameworks that is not Bootstrap:

1. UIKIT: This is my number one choice of framework. They integrated nice css 3 scrollspy animations (adopted from animate.css) and cool js stuff out of the box. But like any other frameworks out there, I recommend you not to use it the way it is, you have to make adjustments and customization so your CSS file is not large.
2. Lemonade: If you are looking for a lightweight css framework, the grid system is made simple and semantic.
3. Layers: An even lighter css framework.
4. Skeleton: My favourite lightweight css framework, it has everything I need for certain type of projects.

Static Site Generators:

Static site generators are great for rapid development and templating on the fly. Why static site generators? Well, look at it as a developer CMS, instead of hardcoding. Here is a list of static site generators you should take a peek at (they’re free, don’t worry):

1. Wintersmith: A static site generator built on Node.Js. If you come from a strong javascript background and want to take a gander on using Node-based tools, this is it. You will be using .Jade (it looks like HAML, but on steroids) as a templating language which is super semantic and you can use css preprocessors like Stylus or Less. Installation is super easy, documentation is very well written, and I use Wintersmith to create my site: http://greg.winstonhuxley.com
2. Harp: Another static site generator built on Node.Js.
3. Jekyll: If you come from a Ruby or Ruby on Rails background, Jekyll is for you.

(there are other static site generators out there, but I’m just listing the top 3 choices I would go for, but if you want alternatives, especially if you come from a strong PHP background, you can checkout Laravel Blade templating engine)

JS Frameworks:

Any Front-End Developer should have the capability to work around any javascript framework. I’m not saying that you should be a Javascript UFC champion of the world, but knowing how it works and understand what’s under the hood and why it’s important can make a great Front-End developer. Here is a list of JS frameworks I recommend:

1. Angular.Js
2. Backbone.Js
3. Sails.Js (a web application framework for node)

Common Questions:

Q: Is Front-End Development the same as UI developer or UI designer?

A: Well it is essentially the same, the term “UI Developer” basically means you designed + developed the UI into a development environment that actually works, not just static images that you pump out of Photoshop or Fireworks. Nowadays when you look for a job, you see “UI Developer” and what they really mean is Front-End, then again it depends on your employer and what he/she expects of you.

Q: I’m a web designer does that mean I’m also a Front-End Developer?

A: Well, I have fallen myself into this debate many times, because when I worked in an agency, designers create an image mockup then give the assets to a front-end developer to make everything work on the browser then forked over to a back-end developer to integrate database, functions, etc. etc. Most “web designers” I know tend to only create the concept and direct those who are more likely to do legwork and design for the browser. Well… I don’t find that mechanism efficient, nowadays I design from hand and straight to the browser. I think web designers today are becoming more and of a Front-End Developer.

Q: So do I just write HTML & CSS stuff as a Front-End Developer?

A: The ability to write HTML & CSS is a minimum requirement to be a Front-End Developer (imho), I think it should go beyond that; and why limit yourself anyway? The modern tools of the web comes with down-to-earth documentation, the more you know, the more of an asset you become.

Cheers and happy learning!