The amazing adventures of Doug Hughes

Archive for October, 2009

Structured CSS with Compass and SASS

Cascading StyleSheets are a great thing for front end development. However, they have their short comings, especially for somebody that comes from a structure programming background. It seem no matter what methodology or organizational pattern I try, I always get to the end and my stylesheets feel like a jumbled mess of spaghetti.

I have several projects in process right now that require front end development, so I have been continuing my search for a better pattern for CSS development. This time, in my search I came across a couple of tools for developing style sheets. Both of these tools have come out of the Rails community, but are easily used with any kind of front-end development.

First, SASS (Syntactically Awesome Stylesheets) is a styling language with a very familiar style for those used to writing standard CSS code. However, SASS is much more powerful and thus allows for a more structured approach for creating and managing style sheets. For example, how many times have you had a single color that needed to be used across a whole collection of style rules? If you ever needed to change that color, then you would have to locate all of the places in each of your stylesheets where the hex code was used, determine if the change is applicable, and make the change to the new hex code. With SASS, you can define a variable such as:

!emphasisColor = #2277AA

Then, in your SASS document, you can use that variable as you would a variable in traditional server side code. When you need to change colors, you change it in one place. This is obviously a simple example, but SASS includes other more powerful functionality such as reusable modules, mix-ins, inheritance, and much more. Obviously SASS code is not interpreted by the browser, so how does the SASS stylesheet become a CSS stylesheet?

This is where Compass comes into play. Compass is a Ruby based tool which at in its simplest form converts SASS into CSS. I was able to set up Ruby and Compass in less than five minutes, along with having a sample project setup and working. Creating a new project is simply a matter of running a command line script telling Compass where your source SASS files are located and where the generated CSS files should be placed. You can then setup Compass to automatically watch your source SASS files and automatically generate the CSS files faster than you can switch to your web browser and reload the page. Very cool!

Compass has a lot more functionality than I have been able to play with this far. However, one simple example is its power to leverage SASS and a CSS frameworks such as Blueprint together. One of the qualms I have with most of the CSS frameworks is their use of nice friendly rules like span-8. Having a style rule like this means that embedded in my HTML code are rules that describe its layout, not function. I would much rather label a div with the id of header instead of span-8. With Compass and SASS, we can accomplish just that. Take for example the following SASS code:

body#index
#header
+column(24)
h1
:float left
#site-actions
:float right
+horizontal-list
#navigation
+column(5)
#main-content
+column(19,true)
#footer
+column(24)
#legalese
+column(20)
#footer-links
+column(4,true)

This code in SASS describes the entire page layout for a standard header, two column, plus footer layout using the Blueprint CSS framework. If you look closely, we have a selector called header which extends the base Blueprint classes and defines the width of 24 columns. Once converted to CSS code, the result looks like this:

body#index #header {
    display: inline;
    float: left;
    margin-right: 10px;
    width: 950px;
}
* html body#index #header {
    overflow-x: hidden;
}
body#index #header h1 {
    float: left;
}
body#index #header #site-actions {
    border: 0px;
    display: inline-block;
    float: right;
    margin: 0px;
    outline: 0px;
    overflow: hidden;
    padding: 0px;
}
body#index #header #site-actions {
    display: block;
}
body#index #header #site-actions li {
    display: inline;
    float: left;
    list-style-type: none;
    margin-left: 0px;
    padding-left: 4px;
    padding-right: 4px;
    white-space: nowrap;
}
body#index #header #site-actions li.first {
    padding-left: 0px;
}
body#index #header #site-actions li.last {
    padding-right: 0px;
}
body#index #navigation {
    display: inline;
    float: left;
    margin-right: 10px;
    width: 190px;
}
* html body#index #navigation {
    overflow-x: hidden;
}
body#index #main-content {
    display: inline;
    float: left;
    margin-right: 0px;
    width: 750px;
}
* html body#index #main-content {
    overflow-x: hidden;
}
body#index #footer {
    display: inline;
    float: left;
    margin-right: 10px;
    width: 950px;
}
* html body#index #footer {
    overflow-x: hidden;
}
body#index #footer #legalese {
    display: inline;
    float: left;
    margin-right: 10px;
    width: 790px;
}
* html body#index #footer #legalese {
    overflow-x: hidden;
}
body#index #footer #footer-links {
    display: inline;
    float: left;
    margin-right: 0px;
    width: 150px;
}
* html body#index #footer #footer-links {
    overflow-x: hidden;
}

In other words, that simple, concise bit of SASS code was able to leverage the Blueprint framework, but generate a custom CSS stylesheet which only contains the semantic rules that I need and is well structure. I am still getting my feet wet with Compass and SASS, but thus far, I will have to say this is impressive.

Bending the rules using CSS

Yesterday I noticed a cool question on Flexcoders asking about changing Button labels using CSS. The project consisted of an application that could be styled a number of different ways using different CSS files.
I suggest extending the Button and adding a label style property. Here’s what I came up with:

package com.alagad
{
import mx.controls.Button;

//////////////////////////////////////
/ styles
//////////////////////////////////////

/**
* Sets the label text according to the CSS style.
*/
[Style(name=”labelText”, type=”String”)]

[Exclude(name=”label”, kind=”property”)]

public class StyleButton extends Button
{
 
public function StyleButton()
 
{
  
super();
 
}

 
override protected function createChildren():void
 
{
  
super.createChildren();
  
setStyles();
 
}

 
override public function set label(value:String):void
 
{
  
throw new Error(“This label is set using the CSS property labelText”);
 
}

 
protected function setStyles():void
 
{
  
this.label = this.getStyle(“labelText”) as String;
 
}
}
}

 
Something still feels a little dirty about doing it this way. It’d be one thing if we were changing width, height or even possition of respurces with CSS but we’re actually changing text values and it doesn’t seem proper.  I think it’s because CSS has alwasy been intended to describe the presentation, look and feel of a document where in this example we are actually changing document content.
I’ve used the ResourceManager for localization of international applications before and it seems like that would be an excellent resource to accomplish something similar.
Any other ideas?

Interested in Groovy? These Tips are Invaluable!

I’ll make this short and sweet: if you’re interested at all in learning (or learning more) about Groovy, you simply must check out the Groovy Goodness blog series by Hubert Klein Ikkink. This constantly growing series contains tons of great information and hidden gems related to programming in Groovy. And it covers the entire spectrum, from manipulating collections to parsing XML, with lots of entries focused on Groovy’s excellent metaprogramming features.
I’m in the midst of a fairly large Groovy, Spring, Hibernate and Flex project right now, which is why I haven’t had much time to post here lately. But rest assured that as soon as I can, I’ll be posting a number of entries on interesting things I’ve learned in the process of building this application. So stay tuned for more Groovy, Hibernate and Flex info in the coming weeks!

Local ORM issues with CFAir.swc

I recently had the opportunity to put together a really quick survey application for our booth at the Adobe Max event in Los Angeles. When I started in on this application I was extremely excited. The application contains videos, online offline syncing, and a slew of nifty Air only capabilities.

My excitement quickly wore thin when working with the new cfair.swc utility that assists with creation of local storage and facilitates online offline synchronization of data. The cfair.swc is kind of a black box. It’s extremely frustrating to try to debug when you can’t dig in and see the code.

At first I was just getting errors like “ReferenceError: Error #1065: Variable Prize is not defined.” So I probably didn’t define a Prize value object in the project or I didn’t properly define this in the metadata. No problem. After some quick corrections I was elated to see that cfair.swc had helped me properly built out my sqlite tables with all of the correct join tables and columns. Now on to saving.

When saving responses to our local database, I was perplexed to see that all of the saves I was doing were resulting in primary key values of zero. My confidence was shaken.

I also ran into ‘undefined’ errors when retrieving relational data. The source of the issue is coming from the cfair.swc but I can’t dig in to take a closer look at what has gone wrong.
While we were able to struggle through each of these issues, we still found hiccups and missing data when using the cfair.swc over a number of application sessions and over long intervals of usage. For this reason, and because of the limited amount of time I believe the correct thing to do was to move on without the cfair.swc.

I briefly considered using AirOrm (http://code.google.com/p/airorm/) but decided to switch the application over to ‘Air Active Record’ (http://jacwright.com/blog/55/air-active-record/), which I’ve used on previous projects and never had any major issues with.
I have no doubt that Adobe will continue to develop the documentation and correct any issues with cfair.swc. This is brand new code and issues are to be expected. As Adobe??s community digs in, I have no doubt that many of these problems will be corrected and resolved.

Has anyone else run into issues with somewhat complex data mappings while using this tool?

ColdFusion 9 AJAX & User Interface Controls with jQuery Session Files

At the request of some people from my session at MAX 2009, I am making the session files (code, Derby database and presentation files) available for download. You can get them here.

I would like to thank everyone who attended my session, you guys were great!

Alagad + Adobe / ColdFusion = CF * EC2

As was announced at CFUnited and Adobe Max, ColdFusion 9’s license has changed to allow deployments into the cloud. Adobe also has a private beta of ColdFusion 9 specifically for Amazon EC2. When fully tested and released, this will allow users to deploy a full version of ColdFusion 9 via Amazon’s EC2.

I am personally very excited about this, as Alagad has been deploying virtually all of our ColdFusion applications into EC2 for a while now. I’ve been happy with the power, flexibility and robustness of EC2. Combine that with a ColdFusion AMI and deploying a new instance of ColdFusion becomes almost painfully easy.

I’m also excited because this has garnered a bit of press attention. In particular, I am so excited to see a mention of Alagad in eWeek. Here are some good links on the topic:

My favorite quote out of all of this is “Alagad’s knowledge of ColdFusion and the EC2 platform was a significant benefit as we developed our cloud-based strategy,” said Adam Lehman, product manager of ColdFusion at Adobe, in a statement. “This collaboration has helped us deliver ColdFusion 9 in the cloud, which offers the same benefits as an on-premises ColdFusion solution, while reducing investment in IT capital and time.”

Thanks for the kind words, Adam, and congratulations on releasing ColdFusion 9.

Alagad Economic Stimulus Package

I would like to announce a special package here at Alagad, for those who are suffering server woes and need to closely control their budget. For a flat rate of $1999, you can have Alagad review your ColdFusion server configuration, identify potential bottlenecks, profile your source code, and ultimately end up with a comprehensive document outlining recommended changes to your current configuration (and / or source code) to improve performance of your application, all in 1 – 2 days. This includes up to 15 hours of server analysis and documentation.

We will work closely with your team to determine the best way of testing your application, as well as identify areas your team feels may need to be reviewed more closely than others.

You can request a written proposal and additional detailshere, and simply mention the ‘Alagad Economic Stimulus Package’ to receive this special flat rate pricing.

Projects will be done on a first-come first-served basis, so sign up soon, you could be sporting a faster application server this week!

Tag Cloud