5alist - Top five lists to share with your friends · Stef Lewandowski

This weekend we’re happy to announce 5alist. A site where you can make “top five lists” and share them with your friends. Simple, really.

Think “Top 5 films you didn’t know you needed to see“, “Top 5 spelling errors that drive me up a wall” or even “Top 5 ways to procrastinate“.

This is another ‘flex my Rails’ experiment turned good in that I put it together using some open source goodies, a little bit of design and programming work and had it up online in an evening within about 4hours work. After a 1 hour ‘private beta’ we published it on Twitter and called it a night at 1am.

What’s your top 5 list?

Around the same time

Why Andy Burnham’s plans for censoring websites with film-style age certificates won’t workWriting · 2008
Ben made a wish and it came trueWriting · 2008
Xela — In Bocca Al LupoMusic · 2008
Helios — CaesuraMusic · 2008

Earlier in writing: Introducing Odadeo - a new site for dads. Later in writing: Birmingham from the balcony one evening.

About this piece

First published 13 Jul 2008.

/* No script, no button and no pill: the header sits in the page as the plain bar, every room in the row, and the body keeps its own top padding. */ /* grouped: the same idea, and why this block now names two layouts. Its rooms sit behind the More button, so with no script to open it they have to be a plain second line instead. float needs no equivalent — its bar renders every room already, and its rules below hide .site-more outright. */ :root[data-fx-nav-layout="grouped"] .site-more-button { display: none; } :root[data-fx-nav-layout="grouped"] .site-more .site-more-list { display: flex; position: static; flex-wrap: wrap; gap: 0.5rem 1rem; min-width: 0; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; } :root[data-fx-nav-layout="float"] header.site-header { position: static; width: auto; height: auto; margin: 0 0 2.5rem; padding: 0; flex-wrap: wrap; align-items: baseline; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } :root[data-fx-nav-layout="float"] body.py-8 { padding-top: 2rem; } :root[data-fx-nav-layout="float"] .site-header .site-nav { flex-wrap: wrap; } :root[data-fx-nav-layout="float"] .site-header .site-nav > a { display: inline; } :root[data-fx-nav-layout="float"] .site-more { display: none; } :root[data-fx-nav-layout="float"] .site-header .site-title, :root[data-fx-nav-layout="float"] .site-header .site-title:has(> span) { max-width: none; opacity: 1; margin-right: 0; visibility: visible; }