Software Development: Good Front-end Web Developers Use What? Part 1
Being a front-end web software developer in this day and age poses the challenge of choosing among thousands of tools (is that an exaggeration?) to achieve a workflow that makes you efficient and effective.
Yeoman, Grunt, Bootstrap, SASS, LESS, Foundation, Github, jQuery, Zepto, Codekit, Livereload, Compass, Bourbon, Bower, Topcoat, Pure, Normalize, Jshint, Tinypng, Brunch...
Do any of those words mean something to you? Maybe all, maybe none. Well, I'm here to teach you about all of them.
Well, no, not really, otherwise, this would be the longest post in the history of blog posts. This post is just about what I *currently* use for mobile and web software development, how and why I use it, and I thought someone might find a tip or two to add (or remove) to their tool belt.
Here is a brief summary of some the topics I'll be talking about:
Code editor (very very briefly, I promise not judge you if you use something different than me)
- CSS preprocessors (yeah the world needs another post about that)- HTML/CSS frameworks and boilerplates- Git- Optimization- Build/task runnersSo good front-end mobile and web software developers use these? You bet they do. Well, most of them do. I do!
Writing Code
Code Editor
This topic has been discussed in countless occasions all over the Internet and is usually a flame-war starter. See, for some reason, both mobile and web software developers have a religious-like attachment to their text editor. Go pay a visit to any programming forum or blog, find a thread about code editors, state that you like notepad++ and wait for the tide of angry developers *telling you* to use vim (of course, with a hint of disdain because you don't already). To them I say: mate, relax.
I like Sublime Text, I feel comfortable and *productive* with it.
Those are the only reasons that truly matter, so download and try a bunch of text editors, have a feel for them and then make a choice for your software development. The list of options is long: notepad++, vim, textwrangler, komodo editor, chocolat, textmate, etc. Your choice, unlike marriage, is not until dead do you part (at least is not as difficult to switch to another). If you're not convinced, try another. No hard feelings.
Text Editors
These are the main reasons why I chose and keep using sublime:
- Packages, extensions, plug-ins or whatever you want to call them. There are so many it can get ridiculous.Now we've probably crossed the line, new suggestions for new packages: SublimeRSSReader, SublimePaint, SublimeSpreadsheet, SublimePowerPoint
— Sublime Packages (@SublimePackages) July 26, 2013
- Snippets support- Multi platform- Multi cursor (try this and then try to live without it)- The GOTO anything command- Split layouts- It can look very sweet.- Emmet (available for many other editors)- You can easily take your preferences with you, is a simple json file- Is fast- There is even a whole course on getting good with it
I do follow with particular interest Brackets
Oh, and do your eyes a favor, properly choose a font (I currently like Adobe Source Code Pro), make it big and give it a nice spacious line height.
Preprocessors
Preprocessors Logos
If nothing else, I'm here to convince you that css preprocessors are awesome and that you should start using them now for software development if you are not already.
In this game, there are three main players: SASS, LESS and Stylus.
They all achieve the same thing (with some differences): to make css better.
My choice is SASS with the scss syntax. This choice was not made after any kind of rigorous testing (there was no testing at all to be honest) of these options. I read about them enough to understand their differences, decided to try sass first and haven't looked back because I haven't feel that is lacking for my needs in developing software.
One thing was clear for me though: the syntax, I really didn't want to add another layer to my software coding. I wanted the most seamless experience possible, so both .sass and stylus were kind of out from the beginning for me. The awesome thing about scss is that any existing .css file is a valid .scss file, great! (I believe the same is for less).
If you need to be convinced, take an example: you must have stumbled upon vendor prefixes (you know like -webkit-border-radius, -moz-border-radius, etc), when web browser vendors want to implement experimental css features they prepend their css rules with these prefixes. Sometimes, they are working on things that are not yet standard or maybe they are proposing their own feature. Regardless, while is great to have this latest cutting edge features, to use them is sometimes a pain in the bum, and here is where the use of a css preprocessor starts paying off, just write the code once as a mixin and use it all over your project, great!
So instead of writing this whenever you need to rotate an element:
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); |
You declare a mixin like this once:
@mixin rotate($degrees) {
-webkit-transform: rotate($degrees); -moz-transform: rotate($degrees); -ms-transform: rotate($degrees); -o-transform: rotate($degrees); transform: rotate($degrees); } |
And then use it like this:
div {
@include rotate(45deg); } |
There are many web and mobile software development tutorials around to learn properly about mixins.
And with mixin libraries like compass and bourbon (both for sass), you don't even have to worry about write them.
Here are more awesome features I use daily:
- Mixins: for that piece of code that keeps popping. Write it once, use it many times- Variables- Nesting- Imports that won't impact performance and allow modularity- Colour functions- Simple math operations- File minificationThere are many more advanced software development and coding features like conditionals, loops and functions but I don't particularly use them, the lesson being: use what you find useful and... don't use what you don't. But know that these features are there when you need them.
At the beginning many people (myself included) shied away from using these software development and coding tools. It was somewhat cumbersome to get them up and running, especially for someone without command line experience! Today that can't be an excuse any more: there are several neat visual tools to help you with the task of processing your files in an easy and straightforward manner or you can always decide to pick up another skill and stop being afraid of the CLI.
In case you ignore the existence of such tools, here's a quick round-up:
- Scout. No frills, open source, cross-platform app to compile sass and compass.- Livereload Compiles sass, less, stylus and many others, does more than compile, but that will be discussed in another section. For mac and windows.- Codekit Like livereload, does much more than just compile, more on it later. Mac only.- Fire.app Another option. Cross-platform.- Prepros One of the newest, for windows and mac.- Koala I haven't tried this one, looks straightforward. Cross-platform.See? Go and get yours.
What about html preprocessors (jade, haml and the like)?, I hear you ask.
I don't use them nor see the benefit of them, specially having emmet, but hey, that's me.
HTML/CSS frameworks
These things keep springing up like mushrooms after the rain. Seriously, how many do we need?
Bootstrap, Foundation, Pure, Topcoat, Gumby, Skeleton, UI Kit, Kraken. And the list goes on. And on and on.
The general opinion with these tools is that they are great for prototyping, not so great for production ready code. The main arguments against them are that they are bloated (they include a lot that you might or might not need, usually the later) and that they produce many look-a-like websites.
Me? I like them, at least pieces of them. For example I'm a fan of the Zurb's Foundation grid system. I'm not one to reinvent the wheel and this grid is flexible, robust and responsive, plus Foundation is written in scss so I can easily take what I want and leave the rest out. FTW.
Plus this dude is awesome.
"Zurb's mascot" Image credit: Zurb Foundation.
Leaving full fledged frameworks behind, I include these two resources in most projects: the HTML5 Boilerplate and normalize.css. They include the most up to date best practices to jump start your html and css respectively. With them (and some other stuff I will be talking about later), I built a simple template that I use to start almost every project. Is a great thing to have and I encourage you to do the same, or grab that one if it helps you out.
And I think that is good enough for now... until the next one.
About the Author
Juan Pablo Lomeli is a front-end web and software developer with 4+ years of experience. He loves the open web and works at iTexico with multiple clients in a variety of projects.
Post Your Comment Here