Integrating compass into an Eclipse workflow

After putting off any changes to my workflow due to the amount of work lately, I recently took the plunge into using the Sass preprocessor / Compass to help make managing stylesheets bearable again. Compass especially serves to give developers access to some lovely sugar, with commonly implemented solutions ready to integrate into your stylesheets – and will seriously reduce the amount of work dealing with different browser differences.

There are already many articles about  CSS extenders / preprocessors, and without going into the debate of Less vs Sass, the main downside is having to set up the development environment to process the enhanced stylesheets before we can view the results.

Installing Compass

Arguments against Sass (and implicitly, Compass) requiring Ruby to work are easy to workaround – there are guidelines for all platforms at http://www.ruby-lang.org/en/downloads/ – for Ubuntu 10.04, I ran:

sudo apt-get install rubygems

This installs all the necessary prerequisites. The Compass installation page gives all the necessary steps to get started.

You may need to add a path to the gems for the commands to work – assuming the scripts are located at /var/lib/gems/1.8/bin/  (say in the case of ruby 1.8) add this to the end of your ~/.bashrc file:

export PATH=/var/lib/gems/1.8/bin/:$PATH

With Windows, this is even easier. The rubyinstaller also sets up the paths for you! The remaining steps of installing sass / compass via gem applies.

Setting up a compass with an existing project

If you already have existing stylesheets, you will want to turn off preset scss files generated by compass with the bare option. You can also direct compass to follow your project’s folder structure.

Run this within your project root (for example /var/www/htdocs)  – note that this is just an example – and reflects my own setup:

compass install bare --sass-dir "app/pub/sass" 
   --css-dir "app/pub/css" --javascripts-dir "app/pub/js"
   --images-dir "app/pub/images"

(this should all be one line)

Directories will be created if they do not already exist. A config.rb will be created in your project root that tells compass which folders to scan. See http://compass-style.org/install/ for further guidelines and a nice wizard to guide you in setting up compass.

Usage overview

The main out-of-the-box route to processing SCSS/SASS files and/or Compass projects  is to run the command line app when you are ready to test new changes – in the case of compass:

compass compile yourapp/trunk/

This can be rather tedious though especially with the rapid approach to web development, and where simply refreshing the browser can suffice to see changes. To automate this process, compass and sass can watch for changes and compile automatically as required – just run this at the start of your session:

compass watch yourapp/trunk/

Again, you have to remember to start this process every session. There is a [paid-for] desktop GUI application to deal with this too, but personally, I’d rather not have to think about this!

Builders in Eclipse

I started looking into methods to automate this within Eclipse. We can break this down: the objective is to run compass after saving the SASS files.

One answer that has popped up several times on stackoverload is to write an extension to run an action on the save event – however without proper tooling in Eclipse, this would presumably be another project to consume your time in!

There is a solution however in the form of project builders.

Within Eclipse project properties (Project menu item > properties), you can find the  ‘Builders’ section, (this is also where you can enable or disable JavaScript parsing). The ‘New’ button allows developers to add external programs that run as part of the project build process.

In our case here, every time we save a file, we can trigger an automated rebuild of this file, and we need Project > Build Automatically to be enabled for this to happen.

Firstly though, we need to create the new builder. Just for information’s sake, I am running Eclipse Indigo SR2 with PDT v3 on Windows 7, but these apply equally for Macs and Linux platforms). These were the steps I performed:

  1. If not already, open the project property window (Project > Properties), and navigate to the Builders section.
  2. Click [New…]

    New builder dialog and the Project Properties window
  3. A dialog titled ‘Choose configuration type‘ will appear. Select ‘Program‘, and [OK].
  4. The ‘Edit Configuration’ window will appear for the builder settings. Name the new builder something relevant – in this case I used ‘Compass’;
  5.  The tabbed sections with notes:
    • Main page configures the external program –
      • Location: path to compass script. This must either be within the environment path (as set in the Environment page), or be the full path to the gem script. I’ve set this to [C:\Ruby193\bin\compass.bat] in my case. The dialog here will report if the program cannot be located.
      • Working directory: the project path as specified for compass (or where you want sass to operate). Mine is [Y:\ddc\htdocs]. Even though I use RSE to remotely access these files within Eclipse, external apps like Compass requires an actual filesystem path.
      • Arguments: compile

        Main settings for the Compass builder
    • Refresh specifies what you want to do after the program has finished compiling. I would like Eclipse to recognise the updated css files!
      • Refresh resources upon completion‘ is [checked]
      • Specific resources‘ is set to the output folder where the css files are saved to – in my case [app/pub/css] is ticked.
    • Environment allows you to set specific variables applicable to the command line or your application
      • Path – here, compass.bat would not run as Eclipse could not find ruby.exe, so the ruby/bin path had to be setup (in fact, I copied this from the Windows environment settings). Note it’s likely that this would not apply to Linux or Mac environments.
    • Build Options – what triggers this builder? plus miscellaneous.
      • Allocate console‘ [checked] so we can see the results in the console panel
      • Run the builder: [After a clean], [During manual builds], and [During auto builds].
      • Specify working set of relevant resources‘ [checked] – set this to the sass source folders – in my case, [app/pub/sass]. Any changes found in this folder will trigger this builder.
  6. When all done, [OK] the configuration. The new builder should appear as the last item of the list.
  7. Make sure that Project > Build Automatically has been ticked in the menu to enable automatic compiling.

 

Refresh settings
Environment variables
Build Options

 

The easiest way to test the new builder is to open the console panel, and create/edit a SCSS (or SASS if you prefer) file, and save within the sass folder. If everything is working, ‘building workspace’ should appear in the status bar, and the console should display the program path, and the results.

Auto-build console output

The icing on the cake – you only have to perform this once for each project instance!

Conclusion

An automated build process using external tools – applicable with other preprocessors – i.e. javascript minifiers. A streamlined workflow. One less thing to think about.

So you need to transfer almost a GB of files…

and the source server is too slow to tar -z all these files without having the tar process killed (and the thought of waiting several hours to trickle 50,000 files down the pipe is too much)…

rsync is your friend!

With compression, efficiency, and resume-able, it took only several minutes to shrink-send 700MB.

Background: a website running on a dual-core Atom server all the way over in the US needs to be migrated over to a faster host elsewhere. My several attempts at compressing the files with tar -zcf failed with ‘Process killed’ – presumably too much processing time was being allocated to this one task. Rsync, as well as being a synchronising superstar, is fantastic at transferring large number of files. I also use rsync to pull manual updates over to live sites (leaving bazaar for the test site).

Caveat: both sides need access to the rsync command with SSH access (or a running rsync daemon). The more files needed, the more free RAM needed – approximately 100MB for every million files 🙂

BBC iPlayer greasemonkey script update v2.0

I’ve taken the liberty to rewrite the greasemonkey script to handle the new iPlayer layout. I’ve taken a different approach to this by injecting a stylesheet inline and toggling it on. Various videos did not have the ‘Pop-out’ player option, so I’ve added a button to enable/disable this feature in the top-right TV favourites panel. I’m sure most of you will find this works well enough to not use the pop-out option!

Install/update greasemonkey, install/update the iplayer script, browse to iPlayer, choose a film, toggle it on, and press F11 to set your browser to full screen 🙂

I have only tested this in FF3.6 but assuming xPath support is consistant among Firefox versions it should work as long as you have greasemonkey installed.

@See the original post.

Using svn+ssh in TortoiseSVN over a custom port

Just discovered this – to connect to subversion over a SSH tunnel that’s not on the usual port 22, you need to save a PuTTY session using the custom port, and refer to the session name in place of the hostsname in TortoiseSVN.

It seems whilst TortoiseSVN accepts the usual svn+ssh://myhost/repository/path URI (and even the svn+ssh://name@myhost/repository/path variation), this assumes that SSH is running on the usual port 22. I have tried (using port 333 as an example) svn+ssh://myhost:333/repository/path and svn+ssh+333://myhost/repository/path, however these will cause a host not found error.

It turns out that TortoiseSVN accepts a session name in place of ‘myhost‘, and the session name can include characters such as “:” so this would be one way of making the innocent looking svn+ssh://myhost:333/ work!

i.e. create a PuTTY session named ‘new-sess:ion2’ using the SSH protocol connecting to port 333 – and this should work in TortoiseSVN:

svn+ssh://new-sess:ion2/repository/path

– or a session named mysession:333 –

svn+ssh://mysession:333/repository/path

Now thankfully I do not have to be at home to view log information!

Reference: http://svn.haxx.se/tsvnusers/archive-2007-01/0272.shtml

Cultural observations

Found this quote in a comment in Engadget:

psmisc Posted Jan 20th 2010 1:39AM

@Abe

I was in China a few years back, and I was surprised at how well people dressed. In fact, demand for name brand clothes were so high that they cost more in China than in North America, even though a lot of them were made there. It was a cliche for a secretary to spend many months of salary on a designer bag.

I always thought culturally the Chinese are the Italians of Asia. They are picky on clothes and food, like saving faces, and are loud in restaurants. Japanese are the Germans, punctual, precise, and kinky. Koreans are the Russians, melancholic, serious, and dramatic. Indians are the Greeks. Lively, passionate, and along with China, one of the remaining civilizations of the classical era.

Cultural observations are rather intriguing…