Abstract: I created a new interface for SemanticScuttle, a free, open-source, self-hosted social bookmarking service. It allows you to build a vast database of web articles on your own web space.
Over the last three years, I have saved, tagged and excerpted 4.224 bookmarks. My collection serves as a personal chronicle as well as a cabinet of curiosities. It has proven useful both for journalistic research and for ending chat arguments by providing statistical data. Up until June, I had stored all of these links in my Delicious account. As is well known, the service has become increasingly unusable due to various usability improvements. Ultimately, I felt the benefits I received did not make up for the value my links provided to the proprietors of Delicious.
A few weeks ago I’ve had enough and decided to migrate all bookmarks to my own personal web space using SemanticScuttle 0.98.5. SemanticScuttle, built by Christian Weiske, is a fork of Scuttle. It features pretty much everything you need for building a database of web articles. It even supports structured tags and collaborative tag description. Both the CMS and the Firefox plug-in work quite well. If you plan to switch, I suggest you’d give it a try.
SemanticScuttle is not the design miracle everyone’s been waiting for. But if you have some basic knowledge of CSS and enjoy digging into people’s code, you can easily create an interface of your own. My own attempt turned out to be so flat, I even named it flat. Grab it on GitHub and don’t hesitate to add your own styles – there is plenty room for refinement. This is what it looks like, compared to the default layout:
I won’t tap too deep into design lingo, but these are the most prominent changes I made. Keep in mind that flat caters to my own particular use case: I’m a single user with admin rights and all my bookmarks are set to private.
- no gradients, no borders, no underlines
- no distinct style for visited links
- no voting system, no URL sorting, no welcome message
- no highlighting for private bookmarks
- W3C-compliant XHTML 1.1
- minimalist coloration using Flat UI Colors
- outsourced date and editing functions into a separate column
- horizontally switched ‘related tags’ and plus symbols
- added Font Awesome icons via Fontello (thanks for the hint, Martin!)
Build your own interface
Your use case might be entirely different from mine, and you should make the system cater to your own needs by all means. To create your own interface, you must distinguish between /data/templates/ and /www/themes/ – while templates affect the information displayed, themes affect the way they are displayed. The division reflects on the logical structure and the design of the page, in a manner of speaking. That’s why the flat distribution contains two different folders.
Two more hints to get your Scuttle installation up and running: If you don’t want strangers to access your bookmarks, make sure to enable the “private” option during import and keep saving bookmarks in private mode. If the import fails, slice your database file into small <1MB pieces and everything will be fine (4k Delicious bookmarks ≗ 2MB).