I’ve had a good time at Ghost, with the position offering me the opportunity to learn a range of new tools and techniques (Sass, Git, Lemonstand, et al), but I feel that I’ve somewhat outgrown it (too much of a focus on frontend technologies), and the desire to move onto bigger and better things lead me to School Stickers.

I’m sure that once I start there I will be posting more about the company and my role, etc.. but for now, lets just say they have a really cool system for promoting good behaviour in schools, which you can find out more about at Carrot Rewards and Classroom Carrots.

Anyway, now that I’m leaving, Ghost Design has a position open for a new web developer, so get your CV and portfolio ready, and you could be taking over my job.

Essentials

These are the applications and software without which I would be unable to do my job.

NetBeans (Free / Open Source)

Having tried a number of different text editors over the years (including PSPad and NotePad++) I’ve settled upon NetBeans as my editor of choice. Netbeans, being an IDE however, is more than just a text editor, and while I have to admit that I probably don’t use anywhere close to all its tools and features, the tools and features that I do use (PHP syntax checking, Git diff highlighting, syntax autocomplete, source formatting, et al) are invaluable.

VirtualBox (Free / Open Source)

A valuable piece of software that lets me run guest operating systems on my PC. My initial reason for using this was to run copies of Windows XP (for IE6), and Windows Vista (for IE7 and IE8) for backwards compatibility testing of Web sites, but in recent months I’ve started using it to run a LAMP development server.

Debian (Free / Open Source)

Used as operating system, this is the L of the aforementioned LAMP development server. There seem to be as many different flavours of Linux as there are religions (and their followers are just as ferocious), but current poster child is Ubuntu, which is built upon best practice and designed to make things as easy as possible. I’ve chosen Debian however, as I’m new to managing a Linux server, so wanted to learn best practice for myself, rather than have it all done for me.

Apache, MySQL and PHP (Free / Open Source)

With the first letter of the LAMP abbreviation being filled by Debian above, the last three are filled by Apache (a web server), MySQL (a database) and PHP (a scripting language), which combined, power most of the Web sites I build.

SASS (Free / Open Source)

SASS is a CSS preprocessor written in Ruby which “makes CSS fun again”. It does this by adding a number of features sorely missing in vanilla CSS, including support for variables, calculations, functions and mixins. SASS files need to be compiled before they can be used, but this is handled by running a simple script on the command-line which does this automatically every time they’re saved.

FileZilla (Free / Open Source)

Although I use Git to deploy my sites, no web developer can survive without an FTP client, a piece of software that allows me to transfer files between two computers, such as the local machine and a server.

PuTTY (Free / Open Source)

This is an SSH client which allows me access to the command line of my remote servers. Nuff said.

KeePass (Free / Open Source)

As I mentioned in my article on the importance of a good password, in addition to keeping a secure copy of all my own login details, I have a duty to do the same for the login details of my clients. KeePass, an encrypted password manager makes this easy.

Optional

Although not needed to do my job, this list of software and applications which do make my job easier.

Synergy (Free / Donationware)

I work in an office full of iMacs (my own personal hell) and was given an iMac of my very own to use (f7u12) – so from my second day of working here I brought in my own Windows 7 laptop to use instead. Quickly realizing the benefits of being able to use two separate machines simultaneously however, lead me to Synergy: an application which allows me to share the keyboard and mouse of my Windows 7 machine with the iMac via the network.

DisplayFusion ($25)

Thats right, I’ve actually paid for something… Much like the aforementioned benefits surrounding the use of two separate computers, as a result of working for Propeller I discovered the benefits of having multiple monitors on a single computer. At a minimum DisplayFusion adds a taskbar to the second monitor, but also makes it easy to setup multi-monitor wallpapers, window snapping, and buttons which send the applications to the other monitor.

Conclusion

Wow, so while Chris’ one off costs amount to $1,779.98, mine are a fraction of that at $25 (and even that is optional extra).

By now however, I’m sure that many of you will be painfully aware that I’ve neglected to list Creative Suite (or even one of the many free alternatives such as GIMP or Pixlr) which accounted for $1,299 of Chris’ budget. This is because, as a developer (rather than a designer), I don’t actually have to do all that much image manipulation. What little I do do is limited to basic stuff like image cropping and sharpening, for which I do use Photoshop (a cost of $699, which thankfully has been absorbed by my various employers), but could just as easily do this using either of the free options listed above.

But even removing this from the equation only reduces Chris’ budget to $480.98, which is still   almost 20 times higher than mine. And it’s not even like I’m missing out on anything. I’m able to do my job as efficiently and comfortably as he does his.

Anyway, the next post in this series will be in response to Chris’ Monthly Service Costs – watch this space.

Much like the other CSS preprocessors, CSS Crush offers a range of features designed to make your life easier. Although these including functions that let you do things like manipulate the opacity of a colour value, or generate a data uri from a relative file path, I’m going to talk about some of the other features that I have experience with.

Vendor prefixing

The first, and possibly most important of these, is vendor prefixing. There has been a lot of talk in recent months about non-webkit browsers adopting the -webkit prefix, which has been spurred on by the fact that, to be honest, vendor prefixes are a pain in the arse.

CSS Crush helps solve issues like this by automatically adding all relevant prefixes to the properties that support them, meaning that this:

div { background: #fff linear-gradient( left, red, white ) no-repeat; }

will automatically be converted into this:

div {
    background: #fff -webkit-linear-gradient( left, red, white ) no-repeat;
    background: #fff -moz-linear-gradient( left, red, white ) no-repeat;
    background: #fff -ms-linear-gradient( left, red, white ) no-repeat;
    background: #fff -o-linear-gradient( left, red, white ) no-repeat;
    background: #fff linear-gradient( left, red, white ) no-repeat;
}

This is something that (so far as I’m aware) none of the other CSS preprocessors offer out of the box – although some creative use of mixins does offer something similar – but by using CSS Crush as a git submodule, you’ll always have access to the latest prefixes available.

Variables

Another helpful feature is that of being able to define and use variables. This allows for uniformity across all your stylesheets, meaning you can define variables such as:

@define
{
	/* fonts */
	title: "Times New Roman", Georgia, serif;
	body: Verdana, Arial, Helvetica, sans-serif;

	/* colours */
	primary-rgb: 89,168,15;
	primary: rgb($(primary-rgb));
	primary-text: #FFFFFF;

	secondary-rgb: 158,213,76;
	secondary: rgb($(secondary-rgb));
	secondary-text: #FFFFFF;

	background-rgb: 240,242,221;
	background: rgb($(background-rgb));
	background-text: #222222;
}

then if you need to change a value at a later date, rather than having to do a find/replace, and risk missing some, you simply update the value is one place, and CSS Crush does the rest for you.

Direct @import and minification

One of the things I found particularly useful was the ability to use @import to manage different CSS files for responsive sites. A practical example of this would be something like:

@import url( "mobile.css" ); /* Mobile first */
@import url( "tablet.css" ) screen and (min-width: 768px); /* Tablet and higher */
@import url( "desktop.css" ) screen and (min-width: 992px); /* desktop and higher */

which not only imports the files directly into a single stylesheet, would also put the correct @media tags around the imported code, and then performs minification on it all.

Implementing CSS Crush in WordPress

I’m actually using CSS Crush in my limeBase WordPress starter theme, so that could be a good way for you to get started, but if you wanted to create your own implementation, it couldn’t be simpler:

1. Download/clone the files into your theme folder in a folder called cssCrush
2. in your functions.php file, add the following line

   require_once 'cssCrush/CssCrush.php';

3. in your header.php, replace your existing stylesheet <link>code with

   <?php echo CssCrush::tag( TEMPLATEPATH.DIRECTORY_SEPARATOR.'style.css' ); ?>

Upon viewing your page, CSS Crush will create two new files: .csscrush and style.crush.css, and output the relevant <link> code linking to the new style.crush.css file.

If, before further page views, the original style.css gets updated, CSS Crush will detect the change, and generate a new crushed file for you, otherwise it will continue to serve the cached file.

Conclusion

If you’re already happily using LESS or SASS, then I’m not sure there is much that CSS Crush can offer you. If, however, you’re more interested in a simple way of automatically adding vendor prefixes and performing minification on your CSS, then you can’t go far wrong with CSS Crush.