Colorburnified

If you visited the site previously since the Radiant move you might notice a new colour scheme. Come to mention it if you visit tomorrow, or the day after you should get a different colour scheme too.

I mentioned that I planned on a few experiments around these parts and this is the first one. I’m a big fan of ColorBurn from Firewheel. For those that haven’t seen it it’s a desktop widget that displays a new four colour colour scheme every day that looks a little something like:

ColorBurn OS X Widget

I often use it for inspiration for colour sets, or just to appreciate interesting colour combinations. This just takes it a step further. A little reverse engineering and I have a script (PHP this time, running from a cron job) that writes out a new stylesheet once every day with the colours from ColorBurn (using the magic of XSL if you’re interested). I’ve used an alpha transparency on the image to the top left of the page which might result in strange effects in browsers that I dont care about too much. Sorry, but I did warn you.

I have a feeling that some days I’ll wake up and regret this experiment and others I’ll be pleasantly suprised. I’m not going to cheat either. ColorBurn provides me with four colours and the script will use them in the order they come in.

OPML Feeds using Radiant

As mentioned when I moved the site over to Radiant I promised a few tutorials and behind the scenes footage of goings on. So here goes with a quick look at how I added a nice OPML feed to my site.

For those not familiar with OPML it’s an XML format for outlines, often used for storing blog rolls and the like.

What I wanted was a friends parent and the ability to add friends to it and for them to appear in a dynamic OPML feed. The following screenshot shows what I ended up with:

Tree showing Friends feed in Radiant

To accomplish this within Radiant I needed a custom layout, one which would simply render the content but also had the relevant header and footer markup. Note the mime type setting as well.

Layout for OPML in Radiant

Next up is the page which actually uses the OPML layout to render the page.

friends feed from Radiant

Note that I set the status of all the friends records to hidden, and then set the status of the r:children:each loop to search for hidden children. This way the individual friends records dont show up as seperate pages.

All I need to do then is add children to the parent, friends-feed in my case. I added a few page parts to each friend page to make management a little easier; a link, a feed and for a little added spice xfn.

Edit friend view from Radiant

All in all it makes adding and updating friends easy, and the general approach will work with pretty much any content where you want to compose a single page based on it’s children.

Some ponderings on CSS3

I’m starting to get properly interested in CSS3 for a few reasons. I’ve subscribed to the mailing list, read up on some of the working group goings on and done a bit of research ahead of really jumping in with some code play. Some of this could be of interest to others so here goes:

The best two resources I’ve found are the CSS Working group home page and the CSS3 Info

The CSS Working Group Under Construction site over at the W3C has a huge ammount of information. For those that dont know CSS is being split into a number of distinct modules, namely:

  • Advanced layout
  • Aural Style Sheets
  • Backgrounds and Borders
  • Basic User Interfaces
  • Box Model
  • Cascading and Inheritance
  • Color
  • Fonts
  • Generated Content for Paged Media
  • Generated and Replaced Content
  • Hyperlink Presentation
  • Introduction
  • Line Layout
  • Lists
  • Maths
  • Multi Column Layout
  • Namespaces
  • Object Model
  • Paged Media
  • Positioning
  • Presentation Levels
  • Reader Media Types
  • Ruby
  • Scoping
  • Speech
  • Syntax
  • Tables
  • Text
  • Text Layout
  • Values and Units
  • Web Fonts

Phew. Their is also some work going on on profiles for TV, Printed media and Mobile. I’m interested in a few of these modules – particularly those dealing with Web Typography and the Basic User Interface module which deals with the look of form elements in their various states and more cursors and colors to describe GUIs (graphical user interfaces) that blend well with the user’s desktop environment.

CSS3 Info also has lots of information worth reading, including some good examples of parts of CSS3 that have been implemented ahead of recommendation in the preview section. My favourite bit however has to be the CSS selector test by Niels Leenheer. You can read a little more about that, and how different browsers do, or at least how they did in October. The W3C test suite is available too, but no where near as slick.

I’ve even gone and installed a WebKit nighly build to try out some of the features only supported their at the moment. Who knows? I might even add new designs to the site using new selectors as a treat for those silly enough to be using such experimental browsers.

Fluidflash

Their is nothing wrong with a nice header graphic. Clients, designers and customers alike love them. But I often see them used as an excuse for fixed width designs. Well no more I say (unless, of course you have a perfectly good reason for a fixed width design in which case you dont really need this technique.)

The plan was simple. Find a way of incorporating flash headers into sites using liquid or elastic designs in much the same way you might use lots of sliding doors background-image goodness.

And all it takes is a snippet of actionscript goodness:

Stage.scaleMode = "noScale" Stage.align = "TL" var width var height function resizeEvent ( ) { width = Stage.width height = Stage.height dimensions.text = 'width : ' + width+ ' height : ' + height topRight._x = width bottomLeft._y = height bottomRight._y = height bottomRight._x = width } resizeEvent ( ) var stageListener = new Object ( ); stageListener.onResize = resizeEvent Stage.addListener ( stageListener );

Download example

New year New site

If you’re viewing this post in your feedreader then you might not notice anything different but it’s all change around these parts. I’ve gone all Radiant and with it a new slightly minimal design.

Radiant, for those that missed my earlier gushing post is a Rails based Content Management System that looks something like this:

Morethanseven admin panel from Radiant

I’m going to post a few follow ups about how I did certain things using Radiant and my particular setup. All in all it’s been fun. Always a good sign when developing something. I ported all my old posts across from Textpattern and I’ve posted a project post (in my new project feed) about TXP2Radiant for anyone else looking to do the same.

Their will likely be a few gremlins lying around that I’ll get to over the coming weeks, and I have some decent posts in mind to keep people interested. Expect less about what I’m up to and more about the pressing issues of web design and development that I keep meaning to write about.

The design is a little on the minimal side at the moment but on purpose. I want to play around with different designs for the site while keeping everything clean and simple. I might even set a file size limit for the CSS and I definately want to start playing more with CSS3 selectors (more than 80% of you dont use IE6, for the other 20% please upgrade). I’m not going to say anything I’d regret, like one new design every other month, but I can dream.

As I get more familiar with Rails (one of the reasons for the move) and Radiant I’ll likely add some bits like a Flickr powered gallery and maybe something to do with Twitter but for the moment it’s all about the content.

PyGunFog

My first real foray into writing some simple Python scripts was a few scripts to establish the Gunning-Fog index of some given text. I wont go into lots of details about the uses of such a script; if you’re interested read Gez Lemons writeup over on Juicy Studio.

I took quite a bit of inspiration, and some code, from a similar script, PyFlesch, for establising the Flesch reading score of text.

I expanded things a little, using the Feedparser module to parse content from RSS and Atom feeds and give a Flesch or Gunning-Fog score of the summaries.

Download all scripts

TXP2Radiant

Having just moved from a couple of year old Textpattern site to Radiant I didn’t feel much like copy and pasting lots of articles. The script simply copies all your posts from textpattern into the relevant place in Radiant.

Download PHP

At the moment this is undocumented and pretty rough but it saved me time and works. I’ll try and work up and potentially rewrite in Ruby for possible inclusion in the Radiant core if time permits.

Web.php

Web.py is a really nice lightweight web framework written in Python. It’s not trying to be Rails or Django, it’s trying to be as simple as possible. Web.php is my homage to Web.py. I’ve unashamedly copied the ideas and build a very simple web framework in PHP. It’s not a complete port, nor does it do everything in the same way.

The code example from the project home page was what originally piqued my interest:

import web urls = ( '/(.*)', 'hello' ) class hello: def GET(self, name): i = web.input(times=1) if not name: name = 'world' for c in xrange(int(i.times)): print 'Hello,', name+'!' if __name__ == "__main__": web.run(urls, globals())

My PHP versions goes something like this, I’m sure you can see the similarities:

<?php require('webphp/web.php'); $urls = array( '/' => 'hello', ); class hello { function GET($path) { echo 'hello world'; } } web::run($urls); ?>

I’ve used it so far on a couple of projects, but it’s never been properly tested as such nor do I have lots of time to develop it. It’s purposely feature and code light (the core file is only 80 odd lines of code, includig comments).

Download Zip

Backgarden

I’m a fan of Backpack from 37signals. Although you can make pages public their is currently no way to style those differently, or to add content from outside Backpack. That’s where Backgarden comes in. It’s a simple PHP (4 and 5, the XML/XSL implementations are slighly different) application that builds a page via the Backpack API and some XSL magic that you can put on your site. You just enter the page address and your API key.

Download Zip

CMS on Rails

Content management is one of those subjects I often get involved in at work, and something I find pretty interesting as a whole – even if I keep having to reiterate most of the problems with content management are people problems rather than technological ones.

I’ve been using Textpattern for this site and a few others for a couple of years. I’ve spoken before about the recent move to more hand rolled solutions, and the flexibility that gives people to innovate. As well as occasionally threatening to really kick the tyres on Django, Rails or similar (Seaside, Web.py, ...). I’ve been wandering the halls of the web development frameworks all year it seems – playing with Python and Ruby along the way.

To a point however these seemed more developer focused that something I could see being used by a web designer or small company (some intentionally so in fairness) or in education. However I’m back playing with Rails and started looking at existing apps to see how they are put together (I love open source) and a quick recce of Rails based CMS products turned up (amongst others that didn’t interest) Radiant. It appears to have been developed along side the new Ruby site launched in September and boy is it a nice piece of kit.

Assuming you have Rails installed, installation of Radiant is as simple as one command (It’s available as a Gem) and then another to get a site up and running (Ok, plus a couple of other simple commands to configure a database). First impressions it looks well put together, with a strong concept well executed and a lovely Interface. It’s chunky without being cliched and simple without being simplistic. I’m in the process of making plans for next year and this is hopefully going to feature somewhere. I love looking for a problem where I might just already have the solution.

Oh, and a only vaguely related note (well, Wordpress is a content management system of sorts) a couple of friends have started blogging over on breadlinedesign.com and anotherblog.com. Consider this a shameless plug.