Blake Simpson

In the previous article I gave an introduction to CSS preprocessors and explained the potential advantages of using this technology. One of the mentioned examples was the ability to break down your stylesheet into multiple files and join them together to create a single final CSS file. This method provides a clean hierarchy for managing stylesheets.

My preferred pattern for the architecture of a preprocessed stylesheet is as follows:

• Settings
• Libraries
• Modules
• Views

First include the settings for my project (colours, fonts etc. in variables).

Secondly library code you have, for example, reset.css should be included.

Next I include my global styles and separate them into manageable modules. e.g. Links, Forms, Tables.

Finally I include my view related code for specific web pages and any overrides that are required. For example, a "view" could be the website home page as it usually differs from the rest of the website.

Example LESS.js Stylesheet

# screen.less

// Import settings
@include "settings/global.less";

// Import libraries
@include "libs/reset.css"; // Notice the .CSS extension

// Import global modules
@include "modules/core.less";
@include "modules/links.less";
@include "modules/forms.less";
@include "modules/site_header.less";
@include "modules/site_footer.less";

// Import views
@include "views/home.less";
@include "views/contact.less";
@include "views/admin.less";

Although the syntax is in LESS, this will also work with SASS using the import command

CSS has a very powerful syntax but can easily become very verbose when working on non-trivial projects. In recent years, the need to solve this problem has brought to life the concept of the CSS preprocessors such as SASS/SCSS and LESS.js. The former is written for the Ruby programming language whilst LESS is compiled using Javascript.

A preprocessor allows additional leverage over CSS by providing additional syntax that delivers the following advantages:

• Nested syntax

• Ability to define variables

• Ability to define mixins

• Mathematical functions

• Operational functions (such as “lighten” and “darken”)

• Joining of multiple files

SCSS and LESS have very similar syntaxes, with SASS being a slight variant on SCSS. The similarities between them allows a developer to switch seamlessly if need be. As a web developer, in the following demonstration of the language I will focus on the LESS syntax but all of the concepts can be transferred to the Ruby world.

Many IDE's provide a function to find and replace across files in your project, of course VIM can do this too by using the "arg" commands, without switching to the terminal!

There are 2 steps to the task, first we provide a set of files for the replacement to happen on. The second part is telling VIM what to replace. Take a look at this example:

:args javascript/*
:argdo %s/foo/bar/g | update

Running these 2 commands in VIM will loop through all files in the "javascript" folder and replace all instances of "foo" with "bar".

In the absense of having any time/thing to write about in the last months, here's another quick tip.

iTerm 2 is a replacement application for the default terminal on OSX. It's highly popular due to allowing advanced features such as tabs, split panes, simpler theming and custom keyboard bindings.

If you find the need to enter the same commands into multiple panes at the same time, simply hit "⌘Command + ⇧Shift + I". You will recieve a small notification about sending input to all panes, the next text you type will physically begin typing into all open panes for your current tab and is executed once you hit "⏎ Return".

Pretty neat!

I find this extremley useful when I have 4+ panes open in a working state, I don't want to close them but I need to reload my bash profile because of some new changes, so I simply hit "Cmd + Shift + I", type "source ~/.bash_profile", hit "Return" and I'm done.

I've just attempted the programming challenge FizzBuzz in JavaScript. I'm glad this worked first time. http://www.codinghorror.com/blog/2007/02/why-cant-programmers-program.html

for(var i = 1; i <= 100; i++){ 
  if ( i%3 === 0 && i%5 === 0 ) { 
    console.log( "FizzBuzz:", i ); 
  } else if ( i%5 === 0 ) { 
    console.log( "Buzz:", i ); 
  } else if ( i%3 === 0 ) { 
    console.log( "Fizz:", i ); 
  } else { 
    console.log( i ); 
  } 
}

Or at least take a leaf out of his book. If you haven't bumped into this article in the last few days already, go check out "The Next Microsoft" by Andrew Kim: http://www.minimallyminimal.com/journal/2012/7/3/the-next-microsoft.html (don't worry, mostly pictures!).

I personally think he is spot on in his analysis of how the average person views Microsoft in comparisson to the other Tech giants. I am impressed with the reinvention of the brand logo, as he correctly states, a 4 pane window does not represent the average office anymore. Microsoft would benefit from Kim's ideas of using this new branding idea combined with simplified packaging which gets straight to the point. I believe this speaks much clearer in modern times where minimalism is trendy.

The impressive part of course is that he put all of this together in 3 days. Technically, perhaps it is only "Photoshop" work but the ability to successfully re-imagine an entire brand, for one of the biggest corporation in the world no less, is brilliant.

Look no further than the following article, every step works perfectly for me on OSX Lion: http://shiftcommathree.com/articles/how-to-install-mongodb-on-os-x/comments/15291

My only recommendation if using 32-bit OSX though is to pre-download the Mongobd distribution from the official website first. The guide is written to use a version of the 64 bit, which you should not download.

When ever you are trying to install a Ruby, package or anything else with RVM it is not that uncommon to run into strange issues. Just like when you first go to smashing the Ctrl + Alt + Delete keys on Windows, I have found through experience that the first port of call should be to take the following simple steps.

For an example, imagine you are trying to install Ruby 1.9.2. I recently had to use this approach to get version 1.9.2 installed on OSX Lion.

Note: On OSX, Make sure you have either the GCC libraries or XCode 4.2+ installed to work best with RVM

Steps

1. rvm get head
2. rvm reload
3. rvm remove 1.9.2
4. rvm install 1.9.2

First we update RVM, reload the environment (important) remove whatever broken ruby/package you are trying to get working. Finally, Install it fresh. 

You would be suprised how often this resolves issues. Give it a try next time you are having issues.