I sometimes struggle with the common problem of finding time to devote to pet projects, making sure I don’t neglect my day-job or my fiancée and while some people may advocate working until the early hours of the morning, it’s not an option for everyone (and I like my sleep), but as Elliot said recently: “A pet project is for life, not just for Christmas

So, for my second #p52 blog, I thought I’d write a little about the pet projects I currently have on the go and list some of the immediate goals for each which I hope to achieve in the next few weeks. I decided to cut some straggling projects loose and concentrate on two, for now.

coffeepowered.co.uk

I’m in the middle of a complete redesign of my personal site — including this blog — in an effort to consolidate some of the contrasting elements I have here & there. The new site will have a portfolio section which features some of my work in a more detailed way than on my CV.

Goals for Jan/Feb

• Complete and release the new design
• Continue with Project52

homeofmuppets.com

This is my long-term pet project. Created in 2001 this site revolves around a small group of friends from various parts of the world and still chugs along despite the rise of social networking sites over the past few years, albeit in a stripped-down form. Last year I started a rebuild of the codebase in the CakePHP framework, and it’s still missing some core functionality.

Goals for Jan/Feb

• Implement OAuth based user login/registration
• Finish the design rollout

What about you?

Are you nurturing any pet projects? What techniques do you use to make sure you’re devoting enough time to them and not neglecting them? Hit the comment box below and let me know!

During the back end of last year I started to experiment with one of the more boring aspects of CSS, but one of the most rewarding in the long-term: How I actually write, organise and maintain my CSS files. These are relatively minor tweaks, but I thought I’d share them in case anyone finds them useful.

I’d just like to note that these are my personal preferences, you may disagree entirely with the way I do things and that’s fine, feel free to drop a comment below if you’d like!

Single vs. Multi-line

So lets get this out of the way, I hate single line CSS rules, they’re a pain-in-the-ass to navigate and can cause problems with some source control tools which may only tell you which line has changed and not which property has changed specifically or when running your code through the validator and getting errors which refer to specific line numbers as well as times when you might not have syntax highlighting to help you quickly visually identify properties and values (such as viewing CSS in Firebug).

I’ve never written my CSS rules as single-line and I doubt I’ll ever start.

Ordering of declarations

One of my most common bugbears is with the ordering of declarations, a lot of the CSS files I come across in my ‘day job’ are simply not ordered in any meaningful way, some have a semblance of ordering based on the personal preferences of the designer and may have width & height rules together, floats and positions together for example, this always differs from designer to designer.

The best way to order declarations is alphabetically, it makes it far easier to scan through and visually locate a specific declaration, especially in large rules. Also, for teams of multiple designers it’s far easier to add declarations to an existing rule as they simply slot in alphabetically.

Curly braces

This might be one of those decisions where people think “Does that *really* matter?”, but I’ve started to place my closing brace on the same line as the last declaration. The reason behind this is to improve the visual distinction between rules which helps when scanning quickly through a large CSS document.

Previously, I’d place the closing brace on it’s own line, like this:

Now that the brace follows the last declaration it improves the spacing between rules, or course I could simply add another line after each rule, but that simply adds to the filesize and needlessly pads out the document. This method also places all of the selectors on their own tab level which helps when scanning through to locate a selector.

Closing semi-colon

The closing semi-colon on the last declaration of a CSS rule is optional, while some people will no-doubt argue that dropping this will lead to smaller filesizes I’d always argue that long-term maintainability is more important, especially on larger projects with multiple developers or for projects which are handed to clients to maintain themselves.

By keeping the closing semi-colon in place anyone can quickly dive into the file and add rules without needing to worry about where the semi-colons are.

Further reading

I’ve only skimmed the surface of CSS coding standards to highlight some of the ways I like to do things, If you’re interested in making your CSS more readable, and especially more maintainable then I’d highly recommend you read the PDF version of this BarCamp presentation by Natalie Downe on “CSS Systems for writing maintainable CSS” which is a must-read and chock-full of excellent advice.

What do you do?

Do you have any personal preferences when it comes to writing your CSS? Feel free to hit the comment box below and let me know!

La Senza offer a complimentary gift wrapping service, and even if you don’t want a full blown gift box, they still take the time to wrap your purchases in a nice way. This gives them the time to have a quick chat with the customer and in our case, while the cashier was wrapping the set of PJ’s we’d picked and asked Nat if they were for her, she replied explaining that they were a Christmas present for her sister to which we were offered a gift box. While she was boxing them and chatting about how many people were doing their Christmas shopping early these days she dropped in “have you seen our fluffy bedsocks? we’ve got some in pink and brown which would go really well with these PJ’s” which prompted Nat to go back into the store after her purchase to take a look at.

I’d also been listening in to the cashier next to us who did exactly the same, noticed what product the customer was purchasing and recommended a specific complimentary product of a relatively low value. This customer also went back into the store to take a look at the other product.

There’s lots of opportunities for brick & mortar retail stores to passively encourage impulse buys, such as the common technique of having lots of low-value products near and around the checkout, but it was interesting to see the cashiers actively encouraging impulse purchases so effectively by suggesting products based on the customers purchase rather than lazily offering a single product-of-the-day type deal and I began to wonder how this could translate to e-commerce retailers.

It’s a common technique on e-commerce sites to offer matching products but more often than not these database driven lists aren’t very useful. When I purchased my netbook online I was presented with a selection of “You might also like” products, 2 of which were the same netbook in different colours. Other stores such as Amazon make great use of “Other customers also bought…” type lists which attempt to tap into common buyer preferences which undoubtedly works really well for companies like Amazon, but small retailers might benefit more by adopting this La Senza type approach by giving their customers a small selection of products which compliment their specific purchase and are of a low enough value to be treated as an impulse purchase.

The Cake paginator helper works fine if you’re using basic anchor links to trigger sort options, but I wanted to use a dropdown select element so that the user can choose how to order the moblogs.

So I know this is most likely a horrible solution to the problem and certainly not very ‘cakey’, but it’s quick, dirty, and it works for what I need it to do.

In the view we need a valid form element, even though the javascript hijacks the onChange event and doesn’t actually post the result. At the moment this does mean that this doesn’t work without javascript but I plan on improving this soon by only using $paginator->sort links in the view, and replacing them with the form completely in javascript.

in the view:

In the jQuery we take whichever value was selected on change, build the relevant ‘paginator compatible’ url which the helper will use to return the required data on page load and then redirect the browser.

jQuery:

In this particular example, I’m using a random order also, which needs to be an ‘order’ param instead of a ’sort’, so in the controller I’m checking which params are being used, and setting a consistant order variable which is used in the view to maintain the selected state of the select element.

in the index method in the controller

If any Cake ninjas are reading this and have any suggestions, or better methods, please do leave a comment!

Stop thinking you understand your users.
Kevin Rose

Don’t build anything you don’t need for launch.
Mike McDerment

jQuery is like cocaine. One line will get you hooked.
Dustin Diaz

Metaprogramming is like trying to do crack cocaine responsibly.
Dustin Diaz

The web is too important to be owned by one vendor.
Bruce Lawson on Canvas vs. Flash

The great thing about standards is that there’s so many of them.
Aza Raskin on the number of OpenID providers

Marketing is the cancer on the nutsack of creativity.
Alex Hunter

Look after your users’ best interest, not yours.
Alex Hunter

If you keep pounding someone, they will come.
Gary Vaynerchuck

Customer service is not a fucking little “feedback” link in the corner of your website!
Gary Vaynerchuck

Deliciously Timed Tweets (or DTT for short) is a collection of API’s which allow you to bookmark links in Delicious, and then automatically tweet them at a specified time interval.

What’s the point?

Delicious does already allow you to tweet your bookmarked links, the only problem is that this can result in Twitter spam if you bookmark lots of links in quick succession. DTT queues up your recent bookmarks, and allows you to specify a rate (say, every 60 minutes) for them to be tweeted at.

DTT powers the @boaglinks twitter feed.

What do I need?

• PHP 4+ with cURL support
• MySQL
• Access to cron
• A Delicious account and some bookmarks.

How do I get it?

Git : git clone http://coffeepowered.co.uk/labs/dtt/.git

Zip : http://coffeepowered.co.uk/labs/dtt/dtt.zip

Tar : http://coffeepowered.co.uk/labs/dtt/dtt.tar

How do I install it?

1. Grab the source from any of the locations above and extract/upload it to a location on your own server
2. Modify config.php with your own details
3. CHMOD install.php to 755
4. Visit the install.php file in your browser (http://yoursite.com/path/to/file/install.php)

The default setting is for DTT to sync with delicious every hour, and new bookmarks will be tweeted out at a an rate of 1 per hour.

Support?

Officially, this is provided “as is” and is an unsupported script, however I’ll endeavour to provide support for anyone who does have problems but I can’t promise anything!

Photo credit: H is for Home

I get a decent amount of sleep, usually going to bed before 11pm and — on a weekday — the alarm goes off at 6:15am when my fiancée wakes up to get ready for work and I normally hit the snooze button a couple of times and get out of bed around 6:30 to 6:45.

I’ve always thought that by using the snooze button, my body would wake up gradually and I’d be more awake by the time I got out of bed. My increasing daily tiredness has caused me to question this, and earlier this week I started forcing myself to get out of bed as soon as the 6:15 alarm goes off to see if it makes me feel more awake throughout the day.

So far, so good! Admittedly the inital jump out of bed is quite difficult as I’m prone to walking into the door in my half-asleep state, but I’ve found that the simple act of losing the snooze seems to work! I’m less tired during the day, more alert, focused and productive. Maybe you should give it a try!

Disclaimer!

This theme isn’t finished, isn’t cross-browser tested and probably doesn’t validate. It’s to be considered a work in progress which I was just too impatient to keep hidden.

When it comes to embedding a company logo into a page, quite often the logo won’t be suitable for print. For example, the website may be dark and the logo might be light and while this works fine when the site is viewed on-screen, it can look out of place when used in a print stylesheet or if the site is viewed with CSS disabled.

While building the new University of Leeds corporate website we got to the stage where we needed to build our print stylesheet, the page header has a white logo on a dark background.

Originally, the logo was inserted into the design using a standard CSS image-replacement technique:

Light logo on dark header

When you’re using a CSS image replacement, the image doesn’t exist in the markup, it’s applied as a background image and only the h2 text is displayed. We toyed with the idea of using the same image replacement technique in our print.css, replacing the logo with the black-on-white variant. This quickly fell on it’s arse, as most browsers are set by default to not print background images as seen below.

Image replacement with CSS disabled

Putting the image back into the markup

In order to get around this, we decided to stop using image replacement and go back to having the image in the markup. Initially I was curious as to the effect of this from an SEO standpoint and had a quick chat with an SEO friend about the disadvantage of not having our corporate logo as a heading. He pointed out that there would be no disadvantage to us as we’re not trying to rank on the ‘University of Leeds’ as a keyword and that as it’s mentioned everywhere else in the thousands of pages we manage, it’s not going to make a difference. (Your mileage may vary and this might not be suitable for everyone)

Doing it bass-ackwards

Once we’d put the image back into the markup, it showed up as expected in our print stylesheet, however our white-on-black logo wasn’t really suited.

Same logo with CSS disabled

We already knew that we couldn’t use CSS to replace this with the black-on-white logo in our print.css, so we decided to do it the other way round. Rather than the have the white-on-black logo as default, we changed to having the black-on white as the default meaning that our no-css and print.css got the correct logo. We used a “hidden” class so we could hide the default image and a CSS overlay on the anchor tag to bring back our white-on-black logo to fit in with the rest of the design.

CSS enabled

CSS disabled / print stylesheet

Conclusion

Because most browsers disable background images when printing by default, you need to be aware that any important images that are using image-replacement techniques may not work. Working around these limitations is possible with a bit of planning.

I love my moleskine, although I need to get into the habit of scribbling more!

http://www.nikibrown.com/designoblog/2008/12/01/designers-scribbles/

Moleskine scribbles