Stealthy Gecko

DRYer CSS with Less written by: Lee Richmond posted on: 22 February 2010

One thing I have disliked for a while about web development is CSS (Cascading Style Sheets). We all love to have web apps that look pretty but when it comes to writing CSS you tend to find that you end up repeating values and this is what I dislike about it.

There are various solutions to deal with this problem such as Sass but in most cases this means taking the time to get used to a new syntax. Luckily I found this Less, Less is a way of DRYing up your CSS using Variables and Mixins without taking the extra time to learn a whole new syntax.

Less is easy to install assuming you have RubyGems installed simply type:

1
2

sudo gem install less

Nesting

Nesting with Less couldn't be simpler in your old CSS you may have something along the lines of:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

body{
  font-family: arial;
  font-size: 13px;
  color: #000000;
}
body #header{
  width: 960px;
  height: 100px;
  margin: 0 auto 0 auto;
}
body #header .navigation{
  width: 400px;
  height: 50px;
  float: left;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

body{
  font-family: arial;
  font-size: 13px;
  color: #00000;
  #header{
     width: 960px;
     height: 100px;
     margin: 0 auto 0 auto;
    .navigation{
       width: 400px;
       height: 50px;
       float: left;
     }
  }
}

Variables

Once again these help to tidy up your CSS by allowing you to declare elements such as colors etc. at the top of the file like so:

1
2
3
4
5
6
7
8

@main_color: #CC0000;
@header_margins: 0 0 0 10px;

h1{
  color: @main_color;
  margin: @header_margins;
}

Mixins

Say for instance you use rounded corners on various elements in your layout, mixins can be extremely helpful in making sure we not only cut down on the amount of code we have to write but keeping things consistent for example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
 -khtml-border-radius: @radius;
 border-radius: @radius;
}

.article{
  .rounded_corners;
}

.submit_button{
  .rounded_corners(10px);
}

Finally to convert your .less file to a working .css file to be used on your application simply type the following in to the command line:

1
2

lessc public/stylesheets/style.less

I have only covered the basics of what you can do with Less hear but make sure you head over to http://lesscss.org and give it a try for yourself.

Jubilee now released written by: Lee Richmond posted on: 04 February 2010

Hey all, 

well it's finally here, what started out as an application purely for my own use, I've finally got it to a stage where I am happy to release it for general release so here she is, http://github.com/lrichmond/jubilee.

Sadly I am one of those developers who gives all their applications a working title based on a comic book character, but Jubilee is designed to be a simple blogging application in which the developer can either use it as it stands to start their own blog, or they can take it and use the application as a starting block to build something bigger.

Jubilee has a fully WYSIWYG editor courtesy of the wysihat-engine gem for writing your articles and creating the different categories within your blog, comment moderation to help avoid all those spammy comments you may encounter, and a basic configuration section where you can set things like the title of your blog, some basic meta data, as well as the default email address that will be used for your contact form and to notify you when a comment that requires moderation. All this is contained within a simple administration section.

Jubilee is far from complete but I felt it was at a stage where any Ruby on Rails developer whether a beginner or and advanced Ruby guru would be able to pick it up and use it.

Jubilee is currently in use for the blog you are reading now, and I would be interested to hear from anyone who does try it out I am always open to the thoughts and comments of others, so what are you waiting for? give it a try.

Gems used:
http://www.gemcutter.org/gems/wysihat-engine
http://www.gemcutter.org/gems/less
http://www.gemcutter.org/gems/gravatar_image_tag

Plugins used:
http://github.com/technoweenie/restful-authentication
http://github.com/technoweenie/permalink_fu

DRYing up your database config written by: Lee Richmond posted on: 11 January 2010

One of the things that I love about Ruby on Rails is that it allows you to implement the DRY andREST principles with a lot of ease.

As anyone who has looked at Ruby on Rails knows the database config file (database.yml) is one place that could do with DRYing up for instance here is how a standard database.yml might look:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

development:
  adapter: mysql
  encoding: utf8
  database: myapp_development
  username: root
  password: mypassword
  pool: 5
  socket: /var/run/mysqld/mysqld.sock

test:
  adapter: mysql
  encoding: utf8
  database: myapp_test
  username: root
  password: mypassword
  pool: 5
  socket: /var/run/mysqld/mysqld.sock

production:
  adapter: mysql
  encoding: utf8
  database: myapp_production
  username: root
  password: mypassword
  pool: 5
  socket: /var/run/mysqld/mysqld.sock

As you can see this isn't exactly DRY, so here is my solution to this problem:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

defaults: &defaults
  adapter: mysql
  encoding: utf8
  username: root
  password: mypassword
  pool: 5
  socket: /var/run/mysqld/mysqld.sock

development:
  database: myapp_development
  <<: *defaults

test:
  database: myapp_test
  <<: *defaults

production:
  database: myapp_production
  <<: *defaults

as you can see this solution is much DRYer and in my opinion much easier to work with.

Resolutions, goals and aims. written by: Lee Richmond posted on: 04 January 2010

So, 2010 a new year, this means that for many its a time for making resolutions only to break them a few weeks later. For me resolutions represent something that has no goal, that we set ourselves at the start of the year knowing that we will not even make the slightest attempt of keeping up to them, I decided to take a slightly different tack and set myself a series of goals to try and achieve by the end of the year, nothing silly like stop eating chocolate and pizza (because we all know that’s not going to happen!) but some things I genuinely believed I could achieve within a year. Below is a list of the goals I set and how I did:

A new Car

Well as you can see from this blog post I succeeded in this one. I know the car I now have isn't exactly brand spanking new but lets face it, I wasn't interested in a new car, I've always been into my older Japanese sports cars and my MR2 is a beautiful car to drive and to look at.

A new job

I achieved this in August 2009 not exactly in the manner I had wanted but in my opinion being let go from Aspect gave me the push I needed, after being a solo developer for so long I wanted a chance to work as part of a development team and I am pleased to say that Coolpink gave me that opportunity.

A new Home

Well I haven't completely achieved this as yet but me and my girlfriend have signed the lease on a nice 2 bedroom house in Bramley, Leeds and we are hoping to move in within the next week or so. The only thing that stopped this being actioned before the new year was that the boiler needed to be replaced and with it being Christmas this was cutting things a bit fine.

All in all I think that setting goals rather than resolutions has helped me greatly in getting where I wanted over the past year.

so far for the next year I haven't decided what my goals are going to be, I think one of them will be to average at least one blog post per month. but we shall see.

How to: make a local copy of a website using the command line in Ubuntu written by: Lee Richmond posted on: 22 December 2009

I was recently asked to make a copy of a live website for reference purposes by a client of ours atCoolpink, I normally used HTTrack for this task as it's a really nice free piece of software and as well as having a GUI version (for both Windows and Linux) is usable via the command line in Linux.

However the last couple of times I had used it I noticed it was having problems when downloading images and cutting for no apparent reason, so I decided to look into other ways to do the task and it appears that it is relatively simple in the Linux command line using the wget command, simply type:

cd Desktop wget --mirror -p --html-extension --convert-links http://somewebsite.com

And in a matter of seconds of watching the command line spit out lots of text, a new folder titled www.somewebsite.com (obviously this will be what ever website you are making a copy of) appear on your Desktop with all the webpages downloaded as html files.