Wrote a Twitterwall

I have written a simple Twitterwall — a website which tracks tweets for a certain term. You can leave the website open and it will constantly show new tweets on the term you defined. This has proven to be quite a nice feature for events like BarCamps or other conferences. Setting up a beamer and displaying the Twitterwall in fullscreen is quite a nice feature for visitors who want to get a feeling for the conference mood or check on news.

Credit for the extrinisic motivation goes to Falco, who used the wall at the DEM 2013 and threatened to fork the project, if I wasn’t working on it. He also submitted a pull request for quite a nasty little bug. Last weekend we also used the wall at the OpenCityCamp. This brought up some issues, but I think I eventually figured them all out. The future will hold the answers.

However, the project is still in an early stage and quite simple in its functionalities. So far there is no possibility to track users/locations or show images, though I plan to add this over time. I have released the project under a free license on GitHub and as a package via npm (npm install twitterwall).

You can easily set up your own instance (further details in the readme) or you can use the public instance I have set up on http://twitterwall.creal.de.

The Aesthetics of Simplicity

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

Antoine de Saint-Exupéry

Simplicity is beautiful. Simplicity is pure. Simplicity is what we should aim for. Instead modern user interfaces, modern design, is overloaded. Creeping featurism: constantly adding features as a way to satisfy the need of any possible, thinkable customer that one might ever encounter. While searching for the perfect solution we eventually end up with a mess. We no longer have an interface that aims to solve a specific problem, but instead an interface that aims to solve everybody’s problems.

In a lot of ways this reminds me of the Unix philosophy, where basically the exact same problem is found within software engineering.

As an effort to improve the usability of some websites, which I often use, I started to build a loose collection of templates for the Privoxy web proxy. Basically the templates simplify the layout of the websites. I never add stuff. All I do is throw elements away.

To me, the interfaces look much more aesthetically pleasing and the websites are a lot easier to use. Unnecessary elements don’t take up all the space, don’t aim to catch the attention, don’t distract from what’s important. But make up your own opinion. On the left you see the unfiltered websites, on the right you see the websites after filtered through an AdBlock browser addon and the template collection.

SPIEGEL Online reimagined

SPIEGEL Online redesigned

Wikipedia redesign

golem.de re-imagined

golem.de redesigned

I have published the project under a free license (MIT) to GitHub. Follow the Readme there to get stuff up and running. Please note: the project is in an early stage and each CSS change on the websites might affect the templates, thus you should not be surprised if some things might not look as expected. I plan to add various other sites to the project over time.

Update: I have created a tumblr where I will publish screenshots of the latest simplified websites: minimalistic-web.tumblr.com

Node.js Knockout: 48hr Hackathon

Last weekend nearly 300 teams of up to 4 people participated in the global Node.js Knockout — a 48hr Hackathon. We had a team from Ulm participating: Stefan, Benjamin, Simon & myself.

We decided to create a website that visualizes public transportation movements from Ulm on a map.

What we did was to transform time tables into a digital format called GTFS (a format for public transportation schedules and related geographic data). The shape files (the route a bus takes) were scraped by faking HTTP requests to a public webservice. A parser then reads the GTFS files and transforms them into comfortable JavaScript objects (GeoJSON, etc.). This data is then used to generate a live map. The maps are done using Open Street Maps material with a custom Cloudmade style. The frontend was created using Leaflet, among other libraries.

Browser communication for “live” events is done using socket.io. Socket.io is a very clever project, what they basically do is to implement websockets so that they work everywhere. This cross-browser compatibility is done by using a variety of techniques like XHR long polling or flashsockets. socket.io enables you to have an asynchronous communication between client-server. This way you can build realtime webapps.

If you go to the website you see a visualization of the time tables. It is live in the sense that it is the exactly how the pdf time tables look. It is not realtime, however. We hope to replace the GTFS feed with a GTFS-Realtime feed one day.

The whole project was build using JavaScript as the only programming language.

Further links:

GTFS Visualization from Ulm

Oh by the way: You can throw any GTFS data in there. Some cities (none from germany) have public data available (see list). The project can be used as a general way to visualize GTFS data. Just change the line var gtfsdir = "ulm"; in server.js. We tried Ontario and it worked like a charm, however if your files are too big you will have problems since V8 (the JavaScript engine under the hood of node.js) is currently limited to a fixed memory size of 2G. Also note that some cities don’t offer shape files.

Also notice: We didn’t get around to create GTFS data for the whole time table. So you don’t see every bus / tram on the map.

University project: Route planner for the university terrain

At my university every bachelor student of a computer science degree has to do a project in a team. For one semester you plan the project, do requirements engineering, etc. in a team of 3 students. In the next semester you actually code the project in a team of 6 students.

All teams had to implement the same project. The project was to build a route planner for the university terrain from ground up.
There were some things that were quite tricky: Things like multiple floors on top of each other.

About the routing: Usual algorithms for routing problems (Dijkstra, Bellman-Ford, etc.) take the approach of a weighted graph. Our team decided to go for a graph-based NoSQL database: Neo4J. Since we were going to build a route planner we might as well use a database that is inherently constructed using a graph.

Many of the other teams had problems with the routing algorithms.
If you were going to use some relational database, this was going to get quite ugly.

Don’t choose your technologies just because it is the only technology you happen to know! Choose the technologies based on the fact that it fits the job best.

As a web application framework we decided to go for Vaadin. Vaadin is a framework on top of GWT that enables you to write web applications like you would write a Swing application in Java. A cross-compiler converts Java code into JavaScript, HTML & CSS. Since most members of our team were familiar with Java, this was an easy choice. The framework worked quite well, very fast development cycle.

We also wrote a standalone desktop application for uploading and editing maps. But since we splitted the tasks I was only involved in the synchronization with the web app (which we did using git, see my article Git as an Update mechanism).

Other technologies involved: For printing PDFs we decided to go with LaTeX. We used node.js to scrape the university address book. This way we gathered a large amount of reasonable data for the database.

The student-projects will not be used productive. However the institute works on an example implementation that will be used.


About Me

I am a 32 year old techno-creative enthusiast who lives and works in Berlin. In a previous life I studied computer science (more specifically Media Informatics) at the Ulm University in Germany.

I care about exploring ideas and developing new things. I like creating great stuff that I am passionate about.


All content is licensed under CC-BY 4.0 International (if not explicitly noted otherwise).
I would be happy to hear if my work gets used! Just drop me a mail.
The CC license above applies to all content on this site created by me. It does not apply to linked and sourced material.