The ethereal Frontier

by Nicolas Luck on August 14th, 2015

Some of you may have heard of the new big thing: Ethereum.


You may have heard that Ethereum's co-founder Vitalik Buterin was awarded with $100k within the Peter Thiel fellowship programme. That Ethereum which pre-sold it’s cryptocurrency, the Ether, last year gaining $18 million in a self-made crowdfunding move. The same Ethereum that is sometimes called Bitcoin 2.0 and that aims to be the Web 3.0. Ethereum launched its production blockchain two weeks ago after bootstrapping a community and doing quite some testing on several proof of concept test nets.

At 9elements, we are quite curious about new technologies – especially of this scale. So we took a deeper look at Ethereum and got our hands dirty with mining Ether and writing smart contracts. There will be follow-ups to this blog post in which we’d like to show a hands-on approach on Ethereum contract code. But first we probably should answer the question: smart… what?!

Bitcoin was proof of concept for a new technology that is called blockchain. As the name suggests, it is about a chain of blocks. While this being a rather technical detail of its implementation, a blockchain is best described as a decentralized database. So what does that mean?

The values that are stored in a blockchain represent a consensus knowledge of all clients that are participating in this network. Every client that looks up a specific field in this database will find the same value. With blockchain technology, this is accomplished without having a central server that hosts or has any sort of authority concerning this database. Instead, the protocol that defines the interactions of its clients makes sure that this consensus about the blockchain’s values is distributed and synchronized among all clients and is protected against fraud.

Applied to the use case of currencies – like Bitcoin – a central authority like a bank is not needed any more for people to use the currency and make transactions. That’s why people call Bitcoin electronic cash. You don't need to trust anyone – not even your bank. (You just have to trust in cryptography…)

Now, Ethereum takes it even one step further…

While Bitcoin uses the blockchain only to store the amount of Bitcoins per wallet, one could imagine blockchains for all sorts of data. For example, there's also Namecoin which stores DNS entries on a blockchain. Ethereum uses its blockchain to even store code in it. By adding a virtual machine to the equation that executes the code stored in the blockchain during the mining process, Ethereum is best characterized as a decentralized computer

Wait, what?!

Ethereum introduces two kinds of accounts both of which are able to hold Ether (the currency in Ethereum). First, there are accounts that are controlled by a person via a private key. This is the same as with Bitcoin. In order to transfer Ether or send other transactions from this account to another, the private key’s owner needs to issue a transaction and sign it with their key (which is done by the client software automatically after the user has entered the key’s password).

Then there are accounts that are controlled by the code that is stored within that account. Every time a transaction is send to such an account, the miner that creates the next block containing this transaction runs the account’s code on the Ethereum Virtual Machine (EVM). Depending on that code, this account – also called smart contract – could respond to this transaction by sending a transaction itself, by doing nothing, or by altering values within its part of the blockchain, which is the equivalent of the hard disk in this computer analogy.

With this flexibility, most existing blockchain applications could be written inside and on top of Ethereum. For example, Namecoin could be implemented on Ethereum with the following contract code:

  1. if ![[0]]: # Is the key not yet taken?
  2.     # Then take it!
  3.[[0]] =[1]
  4.     return(1)
  5. else:
  6.     return(0) // Otherwise do nothing

It is easy to imagine how use cases such as crowdfunding or financial derivatives could be implemented based on Ethereum and smart contracts. Also voting mechanisms and all sorts of distributed organization structures are already popping up at the horizon. With the Ethereum client geth (which is written in Go) having an RPC interface and the Ethereum devs providing a JS library called web3.js to talk to geth, it is really easy to write apps that are interacting with the blockchain. Or to be more precise, apps that are talking to contracts that live on the blockchain. Applications that consist of a web/mobile/native based frontend and contracts living on the blockchain as the backend are called Dapps, distributed apps.

The genesis block of Ethereum’s production blockchain was launched on July 30th, 2015 using an interesting decentralized manner of creating this first portion of consensus. The current release is called Frontier and it is meant to be used by developers and early adopters. There is no GUI client yet, though Mist is already on its way and will probably part of the next release.

We have already tinkered with the blockchain, wrote our own contracts and got an impression of what Ethereum could be capable of – and we are quite impressed. There are already frameworks available which support coding of contracts and which we will talk about in our next blog posts.

So, after this short introduction, stay tuned! Practical Ethereum hacking hints coming soon!

Our NanoMCU arrived

by Jacob Dawid on July 13th, 2015
Comments Off

The NanoMCU is tiny, low-cost device featuring an ESP8266 SoC by Espressif Systems. At a price point of only 10 € (incl. shipping costs, price for 1 pc) this small all-in-one computer presents a strong offer. The technical specifications of the ESP8266 have been released to the general public by the chip manufacturer along with an SDK, which led to many different firmwares being developed within an extremely short amount of time. Hardware manufacturers developed similar devices like the MOD-WIFI-ESP8266-DEV by Olimex or the ESP8266 add-on module for Arduino.


The key features of ESP8266 based devices like the NanoMCU are the ready to use integrated WiFi chip, direct IO, low power consumption, low price and open specifications.

Developing for Ubuntu Phone

by 9elements on July 8th, 2015
Comments Off

Our Ubuntu Phone finally arrived! At the end of June Meizu released their latest Ubuntu Smartphone. With the MX4 being the first high-end Ubuntu Phone available on the market, we feel like we're ready for development.

Ubuntu Phone Meizu

Ubuntu Phone OS is using Qt as the development foundation framework, sporting QML, a brand new declarative language for designing state-of-the-art native speed applications capable of running on all major platforms. Speaking of today, we’re not sure if the Ubuntu Phone and QML will attract a larger market in the future, but it's a really exciting piece of technology. We have already experienced how ressource-efficient developing mobile apps with QML can be. In any case, we keep an eye on this interesting trend.

German Valley Week Review

by Sebastian Deutsch on June 12th, 2015
Comments Off

San Francisco

I just returned from my German Valley Week trip to San Francisco and the Silicon Valley. German Valley Week is an organized trip where entrepeneurs, investors and politicians from Germany visit disrupting startups ranging from new ones like Uber or Stripe to established companies like Google or Facebook. Each day we visited two or three companies and got an idea how they started, grew and eventually scaled out to unicorns.


The first thing you notice when visiting one of these companies is that they radiate a special company culture. Company culture is the most important thing besides having a great idea and kick ass engineers. John Collison puts it straight: "You want to work with enjoyable people. And nowadays companies don't hire the best talent. People are joining companies." A lot of these startups create workspaces that focus on self expressiveness and creativity. Some foster living a healthy lifestyle: most of them had a cafeteria that served fresh healthy food. The borders between working and living blur. Radiating the company values is important, so they have motivational posters or art in their offices. (Facebook: No problem at Facebook is someone elses problem).


All startups we visited try to keep their employees educated all the time. Teams present their learnings, often across departments. Sales learns from devs. Devs learn from sales. And it never stops. If you use the men's bathroom at Facebook there is a "Developer Learning Snippet" and a marketing update above or in front of the toilet. They have walls that reiterate what value means for their customers. They've streamlined the onboarding process for new employees to perfection. Most startups have multiple big infoscreens showing progress, traction and sometimes even sales data. This kind of communication embraces deep understanding of the business in all units.

Think big

There is a german rap song by Deichkind called "Denken Sie Groß" (Think Big). One line goes: "Don't build a terraced house, build a suburb... where you rule like a warlord. Think big!". It's true for everything that I've seen. Uber has big info screens that show realtime usage in every major city that they have expanded to so far. Facebook built a fucking Disney-esque campus to retain and entertain their employees. Sometimes a company has a very simple product - but it still takes a hundred engineers to improve it to stay ahead of the competition.


These were my key impressions. There was more like meeting great people like Andy Bechtholsheim, Tim Chang and many more. It was overwhelming and too much to put it in one blog post. Big thanks to Kathrin Zibis, Chris Tegge and Nathan Williams for organizing such a great event. Also thanks to Stefan Peukert and Tom Bachem for nudging me come with you. I would definitively do it again.


Go in Production

by Sebastian Deutsch on March 6th, 2015
Comments Off


Some of our projects are gaining traction lately. That's why we need to scale some parts of the infrastructure. 9elements started the search for a language that gives us more performance but that's also expressive and easy to write. Since Go is used by some high profile projects we decided to give it a shot.

Go is a very simple language: It is typed statically. It is garbage collected so you don't have to worry about memory issues. It has built-in support for concurrency. The most powerful feature is the absense of classic objects with methods. You have structs like in C. And you have functions that can have receivers so that they can operate on structs, but there is no direct concept of inheritance - though you can imitate it with anonymous fields. The most powerful concept are interfaces. Have you ever seen a bigger Java or C++ architecture where almost every class had an interface so that you can swap out the implementation. Go is like "Hey, let's get rid of the classes and just focus on interfaces!"

But Go also has some drawbacks: Coming from a Ruby background the language is not very expressive. You can do some meta programming using struct tags (it's like annotations in Java for structs) together with reflection, but the possibilities are limited. Especially if you're overusing struct tags your code becomes quite illegible. All in all I think that the pros weigh more than the cons so we decided to use it in production.

Since we're mostly building web applications it was a natural thing to build a web application. The next step was to check out the Go ecosystem to do so. We've taken a look at the following web frameworks:

  • Beego - Beego is a full stack web framework. It seems to be pretty popular but we were searching for something more lightweigt.
  • Revel - Same goes for Revel.
  • Martini - Martini is also one of the more popular Go web frameworks by Codegangsta. But it is abandoned by it's author due to that it's source is not very Go idiomatic.
  • Negrino - It's by the same author like Martini, but it is broken down to smaller components and written in Go idiomatic code.

Eventually we went with Negrino since it is lightweight and we didn't want to swap out a monolithic framework (Rails) with another monolithic framework. We wanted something small that does a few things really well. We went with GORM for the database management, which seemed to be the best object relational manager (didn't we say earlier doesn't have objects?) out there.

The application we've written is a small service that does autocompletion for German cities and ZIP numbers and it also provides the geolocations for it. We were able to drive down response times from 50ms to 7ms which is quite awesome. All in all it was a great experience to rewrite that service in Go and in the future we'll probably use Go as a great sidekick technology for Rails.

If you like what you're reading and you also want to play with these technologies - 9elements is hiring.

Using qt-pods to share your code

by 9elements on February 9th, 2015
Comments Off

Adding dependencies to your project can often be very painful, because technically there are many ways to include foreign code. In very simple cases you might just copy over code, in most cases you are going to link against a library and sometimes you have to compare whole feature sets of frameworks and make up your mind, if the implications imposed by that dependency are a good trade-off compared to the benefits.
From a developer’s perspective this is a nightmare. Usually you just want to add a certain ability to your app, whether it is to decode an audio format, communicate via SOAP, send mails, speak to a certain REST API or analyze images, or whatever you are in need of. Luckily, there is a guy on Github who did just what you need. Just imagine you could just click on a button and within seconds you would be up and running using his code. Scary? You might think so, but this is what qt-pods was designed for.
Calling qt-pods a package manager feels a bit odd, because this doesn’t describe precisely what it does. It is managing dependencies of your project via Git’s submodules. While Git submodules can be a tweaky thing in general and there are good reasons not to use Git submodules in all cases, qt-pods does its best to tell Git not to make any mistakes.

QT pods architecture
qt-pods works within a qmake’s “subdirs”-project template, that is a pool of projects aligned next to each other (well, technically you can tweak it not to be like that). “Pods” are being compiled into static libraries and are then linked against your target application. With a bit of .pri-magic (which is not magic at all, if you take a deeper look), pods can specify their own dependencies to the final app. As the pods are Git submodules, they are all independent repositories. That means, if you ever encounter foreign code to fail, you can fix it by yourself, but even better: you can generate patches or propagate these directly to the maintainer of the project. This is why the definition “package manager” fails, because what you actually get is not just an end product, a packaged result of some code, it *is* the code in a fully working environment. If included properly, the maintainer himself will include his code as a pod (from the same source like you, actually) and embed into a test project.

QT pods list
In order to get you started quickly, I sat down and defined fixed rules based on my previous experiences and then wrote an application that you can use to manage your pods. There is a graphical user interface and a command line version (which still needs some development).

You can find qt pods on GitHub and on

New project: OECD Data Portal

by Mathias Schäfer on September 8th, 2014
Comments Off

In July, we have launched a new client site, the OECD Data Portal. The OECD is an international organization that analyses national economies to coordinate the policies of its member states. The OECD conducts well-known studies like PISA and publishes reports and statistics on social and economic topics.

Data Portal home page

The goal of the Data Portal is to ease access to OECD publications and statistical databases. It is a central gateway to all OECD data for the broad audience, as well as for researchers and journalists. The concept and design for the Data Portal was developed by Raureif and Moritz Stefaner.

Data Portal: Country dashboard

A key component of the Data Portal is the visualization of economic and social country indicators. Using different interactive charts, the user can query and visualize a large amount of statistical data. For each country, a dashboard gives a quick overview for comparison. Each chart and country overview can be shared on social media and embedded into other websites. It’s easy to access the source database, find related studies, and download the underlying data.

9elements developed the HTML and CSS for different page types, and the JavaScript application for the chart component and query interface. The chart component uses the D3 and d3.chart libraries to render interactive SVG data graphics in the browser. Currently three types of visualization are available: bar chart, line chart, world map and an accessible table fallback. On the country dashboard, there are three additional custom charts to visualize income inequality, PISA ranking and CO2 emissions.

Our work fits into the existing OECD IT infrastructure, for example OECD’s content management system and the .Stat data querying API. The OECD editors select and configure the charts per indicator to render a meaningful chart.

The Data Portal is still in the beta phase and we’d love to hear your feedback. In the next months, several features will be added. Among others, we’re improving the mobile usability and we’re adding small charts to the topic, country and search result pages. We would like to thank the OECD staff as well as Raureif and Moritz Stefaner for the great cooperation!

→ Browse the OECD Data Portal

Developing a custom watch face for Android Wear

by Sebastian Deutsch on July 9th, 2014
Comments Off


The brand new Samsung Gear Live has arrived and we took the time to play with it and more important to develop something for it. For a head start into Android Wear development you should check out the official docs and this Video from the latest Google IO. When we take a look at the watch faces we found them hideous and not very digital. So we sat down and implemented our own watch face - unfortunately the official docs are covering that topic. But digging around we found this Reddit thread which explained that it's not too difficult to modify you AndroidManifest.xml so that your activity can be used as a watch face. The code is freely available on Github and if you have questions you can ping us on Twitter.

You can download the watch face for free in the Google Play Store.



Our First Experience with Swift

by Manuel Binna on June 17th, 2014
Comments Off


Every other month or so we like to do a small Hackathon at 9elements. Last week, after months of hard client work, we finally had the chance to have one again. During the two-day long event, several teams gather to explore new technologies, techniques, tools and build something for fun.  After Apple announced their new programming language at WWDC 2014 earlier this June, we were excited to explore it at our next Hackathon.


At our last Hackathon, we created a small app called DOAR, a door opener based on Arduino. DOAR is connected to our LAN and provides a simple API to open the door to our office. We've now extended DOAR so that it broadcasts the door ring to connected clients. Clients establish a WebSocket to DOAR. When the door rings, DOAR broadcasts a message to all connected clients. Clients use their WebSocket to send "open door" commands to DOAR.

At this Hackathon, we created an OS X application with Xcode 6 (Beta) and Swift. The application opens a WebSocket to DOAR. When it receives a door bell message through the socket, it shows a notification in the Notification Center. You can directly interact with the notification to open the application and issue the "open door" command. DOAR immediately sends a "did open door" command to connected clients when it receives the first "open door" command. This allows the OS X application to remove the notification from Notification Center so that it gets out of the user's way.

DOAR notification on OS X


The DOAR client application for OS X was implemented entirely with Swift (and Interface Builder). The following paragraphs give an overview of things that we had not known or read/heard about before.

Access Control

Swift currently has no support for access control modifiers like @public, @private, and @protected in Objective-C. Apple will deliver support for access modifiers in the final release of Xcode 6 in fall 2014 [1].


When registering for notifications with a particular name via NSNotificationCenter, you typically provide a selector that gets called when some other part of the application posts a notification with that name. An Objective-C selector in Swift is a String.

When initially writing the previous code, we forgot to include the colon in the selector. This caused a crash at the call site (when another part of the code posts that notification).

This makes sense, since the implementation of NSNotificationCenter synchronously invokes observers of that notification. However, the point at which the debugger stops in Xcode (at the exception breakpoint) and the debug output do not really indicate that the issue is a nonexistent selector in the observer.


In Swift string parameters are passed by value. If a call site provides a String as the parameter to a function, Swift copies the complete String into the parameter. This is in stark contrast to Objective-C where NSString is passed by reference.


Usually, all Objective-C classes either directly or indirectly inherit from NSObject. But Swift classes may not have a base class at all. It is perfectly fine to implement a Swift class that has no superclass.

When using NSTimer in Swift code the target must inherit from NSObject, otherwise the timer is not able to invoke the selector on the object.


We think that Swift is a well-engineered programming language with a big potential. It needs time to master a programming langue, but since we started coding in Swift we feel delighted by the simple and elegant code it allows us to write compared to Objective-C.

We are very excited about Swift and look forward to the final release this fall. In fact, we are excited enough that we created Swift Weekly, a weekly newsletter with the most interesting links to blog articles, code, and other stuff about Swift. Subscribe at or follow @swift_weekly on Twitter.

External bundles with browserify and gulp

by Sebastian Deutsch on June 4th, 2014
Comments Off


Browserify is a nifty little tool that was originally invented to let Node.js modules run in your browser. A nice side effect of this is that you can use browserify to split up your application’s JavaScript into a well organized modules and then smash them together with a proper dependency management. In the past we've used Require.js to do that job, but for us it's too painful and error-prone when creating bundles for production environments. Require.js also doesn't play very nicely with Rails and it's quite difficult to get everything working. Esa-Matti Suuronen has written a nice post comparing Require.js and browserify in depth.

Basic Usage

For those who aren't familiar with browserify here is an example how we're using it:

In the first line we're requiring jQuery using the CommonJS require syntax. In the second line we're requiring one of our views. We're also exporting a function via module.exports for further usage in our application.

Gulp Integration

For Node.js projects we're using Gulp for our build chain. Since browserify also uses streams it works together with Gulp like charm:

Browserify takes the, processes it by requiring all the dependencies and then it spits out the bundled application.js that can be used in your HTML. A pretty straightforward workflow - but it has a flaw: When your application grows and your dependencies sum up this gulp task may take a while. While doing our latest project the execution time of browserify was up to 12 seconds.

External bundles

External bundles is a mechanism of browserify that lets the user require dependencies that are not directly processed by the actual build step. We've used it to create two bundles: The first bundle contains all vendor JavaScript code like jQuery, D3 and plenty of other stuff. The second bundle contains all our app related JavaScript. First you should list all your dependencies in a separate array:

Now you create two gulp tasks 'browserify:vendor' and 'browserify:application':


The magic happens in the 'prebundle' event that browserify provides. In the first gulp task all dependencies are required and in the second task they're declared as external. In a last step we're using gulp to tie both bundles together to a single javascript file. If you make changes to your app then only browserify:application is called - which takes just a fraction of the time comparing to the original single task.

Enter watchify

If you're still not happy with the speed of JavaScript preprocessing you can replace browserify with watchify. Watchify is also a tool from substack but instead of compiling all the resources from the scratch it keeps a cached copy of all the source files and does incremental builds if something changes:

With the depicted workflow we were able to speed up our development builds by a huge factor. If you want to learn more about browserify and its internals be sure to check out the browserify handbook. If you like what you're reading you should follow @9elements on Twitter.

See it in action?

If you want to see everything in action then checkout our 9elements Academy Bootstrap repository on GitHub. It's a quickstart for building static websites but keeping the nice toys like sass, haml and browserify around.