December 11, 2013

front-end development 2013

So, 2013 is going to end soon, 2013 is a year of major change of my front-end development process / work flow, below are list of tools that I can't work without it.

Text Editor

  • Sublime Text
  • VIM


  • SASS (css compiler)
  • Bourbon (sass mixins)
  • CoffeeScript (javascript compiler)

Version Control


  • Git
  • Bitbucket
  • SourceTree



  • Iterm 2
  • YeoMan
  • Codekit / Koala
  • NPM


  • jQuery
  • Twitter Bootstrap
  • HTML5 Boilerplate
Its important that I made these changes, it helps me rapidly write codes and focus on enhancement rather than slicing the site from the PSD…
SASS, which is the css compiler helps a lot on CSS development, useful features like curly braces, mixins, includes, and more…or if you have never heard of it you should check out this post. What I think it’s much much easier to write css now days, so get SASS or other CSS compiler like LESS, STYLUS… whichever you prefer, it’s the same concept.
With bourbon, writing CSS/SASS/SCSS is even more simpler, bourbon provide mixins that we front-end developer could easily include and it will automatic produce those prefix that is just awesome for your css development.
NPM (node package manager) is another great tool that helps a lot in web development, the community is big and strong. there are lots of module that we could use to rapid our process, like we could install YeoMan.

npm install - yo

Once installed you can see the cute YeoMan character, and if you need to start an application just start by typing yo and choose an option that you want to create, or you could do "yo someApplicationName" and Bammm! thats it.

YeoMan works very well with Grunt and Bower, but instead I prefer Codekit, its much easier to work with, because of the user friendly GUI, its just awesome. when you edit your css it will automatically update on the browser and change it without refresh, but it will also compress your files. I know it can be done by Grunt if you do not want to spend some cash on that, however I highly recommended this tool as for those are new developer or unfamiliar with Grunt.

web development has just got better and better, its so much easier than those old days, lots of tools, huge community. looking forward to 2014 and practice more to improve ourself, not just outside by inner self too.

Here is a screenshot of my workflow: