Jan 24, 2007 · 2 minute read
I do quite a bit of big picture web site/application design at work (ok, that probably needs more of a description). I get involved in alot of the details that lie somewhere off to the side of the obvious bits that need to be done (mmm, not much better). All those technologies and tools and ideas only tell part of the story of building a successful site or online application. Even something stringing together a good idea, clean markup, good CSS, some fancy backend code (insert prefered option) and a sprinkling of user centred design tools can fall down on the hidden details; good form labels, help messages that actually help rather than just repeating the problem, organising file systems to allow for simple scaling, skinning and internationalisation, etc.
Tom Coates spoke last year about his concept of Native to a Web of Data which really struck a chord at the time, and not just because I still want this on a t-shirt. More recently the idea of REST has really caught on, especially amongst the dynamic languages crowd – you just need to look at Rails 1.2 for an example their. The big picture is HTTP is back and everyone who didn’t already get it should be doing some reading.
Another notable person talking quite a bit about REST, HTTP and related issues is Joe Gregorio. Amongst other interesting posts, I came across one on URI Templates a good while ago and have been following the specification to produce recent documentation. The idea is simple and so is the specification. A quick example, for a simple CRUD interface might be:
|
Action
|
URI
|
Method
|
|
View
|
/view/{id}
|
Get
|
|
Add
|
/page/add
|
Get, Post
|
|
Edit
|
/page/edit/{id}
|
Get, Post
|
|
Delete
|
/page/delete/{id}
|
Post
|
Doing this for a site or application in the early stages of development really helps to highlight what actions are available, and to remove the need for costly changes later in the day. It also helps others learn, mainly through discussion, about the different HTTP methods and the importance of the URI in general.
Jan 20, 2007 · 2 minute read
Please note that Twitter no-longer support Basic Auth via the API so the following code no longer works. Please see the official docs for more info
Like others I’ve found myself becoming something of a fan of Twitter, the impossible to explain social networking site. If you’re reading this, have a twitter account and not already my friend then add me if you like.
Apart from the interesting social aspects I’m also interested in Twitter as an API for all sorts of communications, remember Twitter already deals nicely with SMS messaging, Instant Messaging, subscription and the like and has a nice XML and JSON based API. I’ve been using the Zamano SMS gateway at work for a few projects and Twitter actually lets me some more and doesn’t come with a price tag.
I started out playing with curl to send updates like so (obviously with a real username and password):
curl -u username:password -d status="twittering from curl" http://twitter.com/statuses/update.xml
I then used the PHP curl features to do the same thing from PHP:
<?php
// Set username and password
$username = 'username';
$password = 'password';
// The message you want to send
$message = 'is twittering from php using curl';
// The twitter API address
$url = 'http://twitter.com/statuses/update.xml';
// Alternative JSON version
// $url = 'http://twitter.com/statuses/update.json';
// Set up and execute the curl process
$curl_handle = curl_init();
curl_setopt($curl_handle, CURLOPT_URL, "$url");
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl_handle, CURLOPT_POST, 1);
curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message");
curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);
// check for success or failure
if (empty($buffer)) {
echo 'message';
} else {
echo 'success';
}
?>
Obviously you could do more with the return than print out a success or failure message. The $buffer variable has the returned XML or JSON for you’re parsing pleasure.
I’m going to try out some of the other API methods too, probably play more with XSL or look more closely at the PEAR JSON module in building up a simple library as a quick search didn’t throw up much of interest and the API is nice and simple; making it fun to hack on.
Jan 17, 2007 · 2 minute read
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:
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.
Jan 16, 2007 · 2 minute read
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:
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.
Next up is the page which actually uses the OPML layout to render the page.
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.
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.
Jan 10, 2007 · 2 minute read
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.
Jan 7, 2007 · 1 minute read
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
Jan 7, 2007 · 2 minute read
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:
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.
Jan 3, 2007 · 1 minute read
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
Jan 3, 2007 · 1 minute read
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.
Jan 3, 2007 · 1 minute read
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