Subversion Repositories blog

Rev

Rev 1 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 jldugger 1
Title: 2010 Homepage Design
2
Date: 2010-03-12
3
 
4
I've decided my old homepage was bad enough to revisit now that I've got a bit
5
more content hosted deep within it. I replaced my crappy hand written HTML
6
with tools written this decade, and threw in some amateur visual design.
7
 
8
### The software
9
 
10
Firstly, in order to keep the webpage fresh with little effort, I've chosen
11
RSS aggregation as the method of content generation. Since I know Ubuntu and
12
Debian both use [Planet][1], that's where I first looked. But it seems Planet
13
2.0 is aging, and the fork [Planet Venus][2] brings some neat new options. It
14
expands the selection of templates, adds a configurable RSS filter step, and
15
makes the normalization step configurable.
16
 
17
It's also packaged in Ubuntu as planet-venus, making it fairly simple to set
18
up. Deployment was a little tricky, as the package leaves most of the site
19
[configuration][3] to the admin. You'll need a config.ini (I used
20
/etc/planet/planet.ini), a template dir (/usr/local/share/planet-venus/theme),
21
a cache dir (/var/cache/planet) and an output dir (somewhere in /var/www
22
typically). Finally, you'll need to set up a cron job to run the static output
23
generation script regularly. The script reads all the feeds and parameters in
24
config.ini, caches the results to save bandwidth on subsequent runs, passes
25
them to the template engine, and places the final product in the output dir.
26
 
27
When building a lifestream style site, you have to be picky about the kinds of
28
feeds you put in or it gets Facebook / Twitter style spammy. This is where the
29
RSS filter step can help; Planet Venus comes with a few filters like
30
'notweets', and a few stripAds filters to cleanse ads before republishing.
31
It's the same design pattern I talked about before [here][4] with Liferea. In
32
the future I could write one to add in comment feeds and then filter out
33
everything that fails to meet some strong quality criteria.
34
 
35
### Output templates
36
 
37
Planet Venus's real selling point to me is using [Django templates][5]. I've
38
been meaning to learn Django for a while now, and this is a pretty good way to
39
work with the templates portion of Django. And again, the filter pattern pops
40
up. Here, filters take python variables as input; in Planet Venus's setup you
41
have access to feed and item variables, as well as planetwide settings. One
42
example filter might be to simply [pluralize][6] a word based on a variable
43
(yes, you can even handle 'y' pluralization). Another example is the
44
[urlize][7] filter that adds HTML anchor tags to likely URLs (not so great
45
when you already have anchor tags in the filter's input).
46
 
47
I also use templates to generate an RSS feed. Nothing difficult about it,
48
since the input to templates is basically an RSS feed to begin with. To reduce
49
the probability of bugs, I translated a provided example [htmptmpl][8] RSS
50
template into Django, and it's much smaller and clearer to me. Unfortunately,
51
there's a bug in Planet Venus that prevents the use of multiple Django
52
templates. I've reported it upstream, and I'm sure I can fix it or work around
53
it.
54
 
55
### Web Design
56
 
57
I also decided to take a look at CSS layout frameworks, to get up to speed on
58
the subject quickly. 960.gs is popular, but it's 960 pixel width assumption
59
works poorly with quirky resolutions found on massive monitors and
60
smartphones. Luckily, I found found [fluid960][9], which is very similar, but
61
implements fluid layouts. It retains the CSS class names of 960.gs, so
62
tutorials and documentation on one translate fairly well to the other. Which
63
is good, because fluid960 pretty much relies on you already knowing regular
64
960 (I didn't). [This presentation][10] gives a good summary of things you
65
might want a CSS framework for, and this [ 960 tutorial][11] covers what I
66
needed to know.
67
 
68
Color scheming is probably the hardest part for me. It's simple to pick a
69
color pallate that goes together, but there is a higher level opportunity to
70
communicate something through visual design. I could choose a purple scheme to
71
reflect my collegiate experience, or an Ubuntu pallete, but it seems
72
inappropriate for a personal site. I've got a bit of low level coding
73
experience, so I could go with a green on black terminal theme, but it's been
74
done to death ever since the Matrix, and it's basically impossible to beat
75
[jwz's][12] version.
76
 
77
Since I'm not really looking to break into web design, I went with a
78
relatively muted color scheme that organizes the content without distracting
79
from it. Truthfully it doesn't matter all that much, as experience shows the
80
majority of hits will come via RSS.
81
 
82
Well, that's basically all there is to my automated homepage system. On to
83
more important things, like setting up a calDAV server or a feed processing
84
tool.
85
 
86
   [1]: http://www.planetplanet.org/
87
 
88
   [2]: http://intertwingly.net/code/venus/
89
 
90
   [3]: http://intertwingly.net/code/venus/docs/config.html
91
 
6 jldugger 92
   [4]: http://pwnguin.net/fun-and-profit-with-liferea-conversion-filters.html
1 jldugger 93
 
94
   [5]: http://www.djangoproject.com/documentation/templates/
95
 
96
   [6]: http://docs.djangoproject.com/en/dev/ref/templates/builtins/#pluralize
97
 
98
   [7]: http://docs.djangoproject.com/en/dev/ref/templates/builtins/#urlize
99
 
100
   [8]: http://htmltmpl.sourceforge.net/
101
 
102
   [9]: http://www.designinfluences.com/fluid960gs/
103
 
104
   [10]: http://vimeo.com/7530607
105
 
106
   [11]: http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/
107
 
108
   [12]: http://www.jwz.org/
109