I’ve recently been carrying out interviews as we are expanding our team at Vertu Motors and I’ve realised that in the world of web development there is still no right or wrong way to do things and a never ending list of different IDEs, methodologies, approaches to projects and ways to execute the same task. Over the years I can safely say I have made some <cough> (ok lots of) mistakes – especially when it comes to scalability which is a big deal for me now that a lot more developers are coming on board so I thought i’d outline my way of working and share the useful tools I use to make my day to day life easier…..
Text editor of choice
I highly recommend Sublime Text, I’ve been using it for 4+ years. You can download a multitude of plugins and helpful packages very easily via the package control facility which enables you to fully customise your environment to suit your exact needs. From the theme / how you would like your editor to look, to snippets to help make your life easier to the menus that display, just about everything is customisable within Sublime. I also use Emmet which is an awesome plugin that helps make life easy by allowing me to use shortcuts when writing HTML.
As an example you can type element.classname and then press tab and the html code will be created.
div.wrapper then TAB will create:
<div class="wrapper"></div>
ul.navigation>li*6 then TAB will create:
<ul class="navigation"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Workflow
Like mentioned in the introduction I have felt the pain of un-maintainable CSS, I’ve had stylesheets that span 1000s of lines of code and the only sure fine way of ensuring nothing breaks within a website is to simply add new rules to the bottom of the ever expanding file. Eventually you then have to schedule a very nerve wracking and painful ‘open heart’ refactor operation, ensuring that the site survives as you remove the lines and lines of redundant code, or rewrite blocks of HTML alongside the CSS changes.
With the benefit of hindsight I now ensure I use a modular approach within my projects so that I ultimately create reusable easy to maintain code. While reviewing designs I look at the various pages or sections and try to pick out similarities and group components together. For a while I was an advocate of SMACSS methodology and I do still like to group styles into base, global, layout or module components but I’ve found that as the team has expanded we have collectively decided to adopt a BEM approach to CSS as it provides a less ambiguous/ more stricter way of naming classes which keeps everyone consistent and has helped to create a very user friendly style guide.
SASS/ Compass
For quite a number of years I have used SASS as my CSS processor.
GIT
Everyone knows version control is a must, GIT makes life so easy. We have it installed on the server and we use hooks to push and pull files between the shared development directory and our local versions of the directory.