This publication was written as the final paper (VWA) for high school. It describes the process of the development of a website which is responsive and accessible. The main topics discussed in the paper are therefore the optimisation for different end devices and people with disabilities.

Im Rahmen der Vorwissenschaftlichen Arbeit musste jede Schülerin und jeder Schüler, die/der zur Matura antreten wollte, diese schreiben, das Thema war frei zu wählen.

Da seit jeher Webdesign und Entwickeln zu meinen Hobbies gehören, war die Wahl eines Themas rund um Webdesign naheliegend.

Meine VWA trägt als offiziellen Titel "Entstehungsprozess einer Website mit besonderer Beachtung von responsive Webdesign", der Kurztitel ist nur "Responsive Webdesign". Trotzdem behandelt die Arbeit nicht nur responsive Webdesign sondern auch Tipps zu Accessibility und Usability der Seite. Diese Begriffe werden natürlich im Vorfeld definiert.

Jede VWA ist entweder empirisch / praktisch oder nur auf Literatur basierend. Für ein Gebiet wie Webdesign gibt es zwar Literatur, die meiste ist jedoch schon veraltet ab dem Moment, wo sie gedruckt wird. Deswegen war eine empirische Arbeit in meinem Fall besser.

Als praktisches Gegenstück zum Geschriebenen dient die Erstellung der neuen Interni Toscani Seite, welche zur Zeit des Schreibens noch im Entwicklugsstadium ist. Die verwendeten Techniken zur Optimierung für alle Endgeräte sind im schriftlichen Teil der VWA beschrieben.

Um mehr über das Gebiet "Responsive Webdesign" zu erfahren oder eine kleine Lektüre für zwischendurch zu haben, kann man unten meine VWA als PDF herunterladen. Bald (oder vielleicht auch nicht so bald) wird die VWA auch als iBook verfügbar sein.

iOS 8 was brought to everybody only a few days ago. But many people are already downloading it because of one feature: custom keyboards.
The ability to exchange the standard keyboard with one from a third-party developer exists since very long time on Android, but now it is finally possible to iOS users to do the same.
This blogpost will cover some of the most some, those who I find amusing, useful or in an other way worth to mention.

Every keyboard description was written on the described keyboard.

1. SwiftKey

The best part about SwiftKey is SwiftKey Flow. Unlike with a normal keyboard it requires a bit of practise to type fast and efficient with SwiftKey. Although after only using the keyboard for about half an hour it feels natural to "flow" over the keys instead of pressing them all the time.

Flow isn't the only feature which tries to convince you to use SwiftKey. The prediction of the following words is really good. The new iOS8 has its own word prediction but it isn't as good as SwiftKey's one.

Another great feature is SwiftKey Cloud. If you already have an Android smartphone and you plan on switching to iOS, this will be the best thing for you. All word predictions get saved in the cloud and are instantly available on the new phone. If you aren't an Android user but you have an iPad, installing SwiftKey adds the predictions to the iPad.

One disadvantage is that the word prediction makes it more difficult to type without looking on your phone. Using this keyboard for a longer time teaches the prediction algorithm the way toy write. This will make an advantage out of the disadvantage. It is possible to flow over the approximate position of the letters to get the right word.

• Price: free
• Website: http://swiftkey.com/en/keyboard/ios/
• Download: https://itunes.apple.com/app/swiftkey-keyboard/id911813648?ls=1&mt=8

Minuum

Writing using Minuum keyboard is a total different thing from using Swiftkey flow. There aren't many nifty features like synchronization of the personalized word prediction. That gets compared by an even better word finding algorithm.

You only have to place your finger on the estimate position of the key on an normal keyboard.

A big advantage is that the fingers don't have to travel much. Therefor it is also possible to write long texts like this one using only one hand.

It is possible to show all keys by swiping up on the small keyboard. This is especially useful if a word needs to be typed correctly without using the word prediction.

Minuum is only in version 1.0 when this article was written. All the basic features work and many more will be implemented in the future. Some examples are theme support and multiple language support.

Writing something in the beginning takes more time than using SwiftKey. Using this keyboard continuously trains the word prediction to become more reliable.

• Price: 1.79 € / $1.99 / £1.49
• Website: http://minuum.com/
• Download: https://itunes.apple.com/app/minuum-little-keyboard-for/id914968934

ignore from here

MyScript Stack

• Price: free
• Website: http://myscript.com/hello-ios-8-goodbye-keyboard/
• Download: https://itunes.apple.com/app/myscript-stack-handwriting/id914007100

Fleksy

• Price: 0,89 € / $0.99 / £0.69
• Website: http://fleksy.com/ios8/
• Download: https://itunes.apple.com/app/fleksy-keyboard-happy-typing/id520337246

At my first hackathon I heard much about testing the code while developing it with tools like Jasmine or Mocha. So I looked a bit into it and this is a kind of quick introduction of Jasmine, or at least how I got started while using Node.js.

A basic understanding of Node is necessary

In the following example I am using jasmine-node to test my functions. The program I wrote is a text transformation tool. The best thing to do when starting to develop something new is to think about the tests as the first thing. Knowing what you want to test makes it more easily to write the actuall code.

In my example I first thought about the things I want to do with my tool: flip the text horizontally as well as vertically, lowercase and uppercase it.

I will skip explaining the real code because the tests are important part. However here is the code for flipping the text vertically to which we will look at the test later:

righttoleft: function ( original ) {
  var temp_string = original.split('');
  var string = [];
  for (var i = temp_string.length; i >= 0; i--) {
    string.push(temp_string[i]);
  }
  string = string.join('');
  return string;
}
  

https://github.com/dervondenbergen/testing-code/blob/master/functions.js#L28-L46

This is part of an object, which is just a module. It is very important to split the functions you want to test in different files or at least in an external module, because you need them in the test files.

When using Jasmine all the tests have to be in a folder called spec. Those files have to be *.coffee or *.js files. It is important that all files have a name like *-spec.js . Otherwise the test wouldn't get recognized by Jasmine.

The test specs for my flipping function looks like this:

var fn = require('../functions');
describe('Text should be reversed:\n', function() {
  it('It should be from right to left.', function() {   
    var original = 'chocolate';
    var result   = 'etalocohc';
    var reversed = fn.righttoleft(original);
    expect(result).toBe(reversed);
  });
});

https://github.com/dervondenbergen/testing-code/blob/master/spec/righttoleft-spec.js

spec.js

It is easier to understand if the file is split up in different parts.

var fn = require('../functions');

We can easily use our functions, because they are just a module, and so we won't have problems running the test on them.

describe

reference

describe starts a so called suite. It has a name, which will be the name of what will be tested. Beside the name, there also has to be a function. In our case is the name Text should be reversed: .

describe('Text should be reversed:\n', function(){
  …
});

https://github.com/dervondenbergen/testing-code/blob/master/spec/righttoleft-spec.js#L3

it

reference

it defines a suite better. There can be multiple so called specs in one describe. The specs tell what is acutally tested in a suite. This doesn't make much sense for our example, but it eventually makes more sense for bigger programs.

it('It should be from right to left.', function() {   
  …
});

https://github.com/dervondenbergen/testing-code/blob/master/spec/righttoleft-spec.js#L5

expect

reference

expect is always bundeled with a so called matcher. One matcher is for example .toBe().
This function looks if something is like something else. We just compare a manually transformed string with one from the function.

var original = 'chocolate';
var result   = 'etalocohc';
var reversed = fn.righttoleft(original);

expect(result).toBe(reversed);

Declaring the variables before testing them isn't required, the code above can be compromised. The disadvantage is that the code is not so beautiful.

expect('etalocohc').toBe(fn.righttoleft('chocolate'));

https://github.com/dervondenbergen/testing-code/blob/master/spec/righttoleft-spec.js#L7-L12

Those are the basic things, that someone has to know to start with writing test. To actually run them you have to use the already mentioned jasmine-node. To install it globally, where it is needed, just run npm install jasmine-node -g.

In the folder of your project you have to run jasmine-node spec/ or jasmine-node spec/ --verbose to have a better overview of the tests.

A full list of all flags and options is available at the jasmine-node README.md file.

A running example of the tool is online at examples.demont.is/testing-code. The full source code and all the specs can be viewed on GitHub.

How I already wrote in the Communicating at bullgit blog post is it complicated to communicate without the right tool. Beside chatting, we also use other services to interact with each other.

This list will be updated when we use new services or stop using one.

Trello

Organize anything, together

The fact that we are spread around the world doesn't make it easier to decide on new projects / ideas / anything easily. Therefore we use Trello, which is a collaborative organization tool.

It is possible to create boards, lists and cards.
Boards are something like a group. Lists are an undergroup. The cards are the actuall items, which can contain images, checklists and much more.

We @bullgit have two main boards: # Projects and # Organisation.

The image above shows that we sort our projectideas in the lists @IDEAS, @TODO, @DOING and @COMPLETE.

The goal of using Trello is that we can vote on the ideas and comment and discuss them also when people are sleeping, while others are awake.

GitHub

Build software better, together.

GitHub is here to work together on code. Everybody can create own repos, but there are also organizations like bullgit. When we have an idea on Trello which we want to realize, it will eventually end on github. We already have 42 repositorys and the number grows nearly weekly, you can see all of them at bullg.it or on our GitHub profile page.

I attended my first Hackathon last saturday. It's topics were poker and continuos deployment. The Hackathon was hosted at sektor5, a coworking space.

At Lean Poker small teams fight each other by coding the best poker bot in the smalles amount of time. Each round the bot on the 1st place gains 5 points and the bot on the second place gets 3 points. The team, which has the most points in the end of the day, wins the Hackathon. It is very important to find a good balance between developing a good algorithm and beiing as fast as possible to deploy newer code.
Normally the teams code in different languages: C++, Java, JavaScript, Perl, PHP, Python and Ruby.

This saturday was different, each team choose javascript, Node.js, as their developing language. The teams were Pokership, Pokermon, No idea and Team Crunch.
Christof Schmidt and I were team Pokermon. Unlike the other team, we didn't write unit tests. The sense of unit tests is to look, if different functions work. Another big advantage of writing test is that the code gets more modular while creating it. We Pokermon did only tests manually, which also worked to prevent horrible bugs. I will write more about tests in a while, so stay tuned.

Team Pokership were Florian Motlik from Codeship, a continous deployment service, and János Gyurisán, who already atttended the last Lean Poker Hackathon. They won because they were able to set up good tests and automatic deployment. This helped them to take the lead very early.

This is the image of an chart showing the hackathon result (ref) …

… and the 1000 runs result (ref).

Ivett, the orginnisator of the Hackathon, started the bots in their final version playing 1000 rounds and then Pokermon won. Pokership became only 2nd place. This shows that our bot is the better one, but Pokership were able to deploy their bot faster.

The Hackathon ended after approximately 10 hours. It was very interesting and I learned many things.

On the Facebook page of Lean Poker are some photos of the Hackathon and there is also a video.

Edited reflecting the use of the new map instead of google maps

We bullgit are a widespread group of people, from California to India. This is the reason why we need a good working platform, to communicate with each other.

The past: tlk.io

At the beginning of bullgit, nearly one year ago, we started to use tlk.io. Tim had the idea to talk on the codepen channel about CodePen, where we all met.

tlk.io is very easy to use, you only have to provide a name. If you want to use an image beside your name, you have to authenticate with Twitter. To style the messages a bit, there was the possibility to use markdown.

The best things about tlk.io were:

• The domain is short and easy to remember
• Not complicated to use
• Notifications in the browser

Then: google hangout

After using tlk.io for a while, we wanted to have a private chat, where we can talk privately about bullgit. This was decided, because we didn't want to share our new ideas with the public.
Google Hangout is part of Google+ and it isn't that user friendly. Google Hangout has a mobile app, which is better then tlk.io because of mobile notifications. The not so nice thing is, that the chat on Google+ is as small as the mobile app.

Beside chatting it is also possible to make group video calls for free. This isn't that important anymore, because we have grown in the number of members.

The good parts about hangout:

• Mobile app ➔ notifications
• Private
• Video calls

Now: gitter.im

We are using gitter.im since january. It is after testing with bullgit two different chat platforms the best one. It has a fully responsive webapp like tlk.io, but there are also native apps. Currently there is only an app for OSX, but iOS and Android will also get one.

To use gitter, also known as gitchat, you have to authenticate with github. This is necessary because all the room you can chat in are the owned repos. All those rooms are public, if the repo is public and private if the repo is private. Organisations also have a private group chat. As of now, it isn't posible to create custom chat rooms, here are more infos.

A big feature is the integration with Trello, GitHub and many more. We can see, which issues are opened, closed, commented, and also when someone comments on a Trello card.
Some days ago, integration with Bitbucket was added.

To have more beautiful messages we can use markdown like on tlk.io.

There are many ideas of the development team, on how to enhance gitter.

I'm happy to be able to call me member of bullgit.

You don't know what bullgit is? So let me introduce it to you.

Bullgit is a group of awesome Web-people. We are Jan, Hugo, Kevin, Tim, Lucas, Max, Nick, Kanu, Olly, Nils and myself. (Update late 2015: as there are many new members, check out the official members list)
We do crazy, most time useless, Internetstuff on the Internet by using GitHub. Some of the most amazing things are fart-on-hover, wizz.css and moodicons.

The amazing thing of having / being in such a group is not only that we do Internetstuff together, we also help each other in the fields of HTML, CSS and JavaScript, if we get stuck or need some advices.

We spend much time on tlk.io/codepen where you can find us. Of course you can also drop us a tweet on twitter

Two of us also wrote texts about our dev group. You can find Kevin's text here and Luky's post here.

this awesome Blog will be about coding, the web and it's newest technologies.

Do you want to know more about me, just click here.