justGoscha's Realm

ES6 & ES7 Features Overview and Cheat Sheet

Thu, 28 Apr 2016 14:13:02 +0000

EcmaScript 6

Collections

Differences to Objects

iterable: for .. of loop and ... operator can be used
key-value pairs not exposed as properties: no map.key or map['key'], instead map.get('key') and map.set('key', value)
entries not inherited via prototype chain
JSON.stringify not working on Set or Map

Set

unique values
no indexing

Syntax

// create a set with ["a","b","c"] content
var set = new Set("abc");
// same as 
var set = new Set(["a","b","c"]);
// new Set(iterable)
set.has("a")
// -> true
set.size
// -> 3
set.add("d")
set.delete("a")
set.forEach(function(){}) // iterate over entries, in order of insertion
set.entries() // get iterator of set
set.keys(); set.values(); // iterators for interoparability with Map
set.values === set.keys // 
set.clear() // remove all entries

Upsides

set.has(entry) much fast than array.indexOf(entry)

Downsides

no functional helpers like on array, like .map(), .filter() ,.some(), .every()
no .addAll(values), hasAll(values)

Map

store any kind of key, value pairs (not only string keys like for objects)

var map = new Map();
var map = new Map([[2,"b"], [1, "a"]]) // -> Map { 2: "b", 1: "a" }
map.size // -> 2
map.get(2) // -> "b"
map.set(key, value); // set or overwrite key
map.delete(key);
map.clear(); // delete all keys
map.forEach(function(value,key,map){}) // iterate over entries in order of insertion
map.keys(); // iterator over all keys
map.values(); // iterator over all values
map.entries(); // iterator over all entries (pairs) 

WeakMap, WeakSet

Differences to Map/Set:

WeakMap only supports new, .has(), .get(), .set(), .delete()
WeakSet only supports new, .has(), .add(), .delete()
values of WeakSet must be objects
keys of WeakMap must be objects
not iterable
weak references to keys and values -> will be garbage collected when no other references

Generators

// returns iterator function for the body of this 
function* generate(array){
  for(var value of array){
    yield value;  
  }
}

function generate(){
  var i = 0;
  return function(){
    i++;
    return i;
  }
}

var array = ["a","b"];
var iterator = generate(array);
// calling next always executes to the next yield keyword 
// and returns the value after yield (like return)
iterator.next(); // -> {done: false, value: "a"}
iterator.next(); // -> {done: false, value: "b"}
// when the function reaches the end, the done property is set to false
iterator.next(); // -> {done: true, value: undefined}

Proxies

Default Parameters

Classes

Subclassing

`let` and `const`

Typed Arrays

Promises

Arrow Functions

Destructuring

Iterators, for-of loop

Template Strings

Symbols

Function Names

Spread Operators

New `Math` functions

New `Number` functions

EcmaScript 7

Async Functions

// This function should return a promise
async function getValue(key){
  var awaitedValue = null;
  try {
    awaitedValue = await fetchMyValue(key);
  } catch(e) { // error handling }
  return awaitedValue;
}

Typed Objects

SIMD

New Operators

Class/Property Decorators

Testing ES6 Modules with Mocha and CoffeeScript

Mon, 11 Apr 2016 11:13:02 +0000

What I wanted to do:

Use Mocha with CoffeeScript
Test JavaScript ES6 code (with ES6 modules)

The only solution I found to test my JavaScript code that is organized with ES6 modules is to compile the source files with Babel first. Then in your coffeescript test files you can simply require them. So here’s my test.sh:

# pre-compile js sources with babel into test folder
find ./js/*.js -type f -exec sh -c './node_modules/babel-cli/bin/babel.js "$0" > test/"$0"' {} ';'
./node_modules/mocha/bin/mocha ./test/main.coffee --compilers js:coffee-script/register --reporter spec

# now delete all compiled files again
rm -r test/js/*

The test/js folder has to have the same folder structure as your js/ folder or it will not work. You can probably modify the code to make a folder if it is not available, but I wanted to use find -exec and didn’t want the hassle.

You also need a .babelrc:

{
  presets: ["es2015"]
}

Now ideally I would also like to use the ES6 module import/export in my CoffeeScript test code. But it doesn’t support ES6 modules, yet and doesn’t even compile if I use the keyword import.

So I have to use it in js-literal syntax.

`import parser from "./js/parser.js"`

Now if you use the normal CoffeeScript compiler of Mocha, it compiles the CoffeeScript to JS, but the js-literal stays the same and is still ES6. If you write your Mocha test code in JS then there is a babel compiler that compiles your ES6 code to ES5.

So for me I had to write my own compiler that compiles CoffeeScript first and then it compiles it again with Babel.

var fs = require('fs');
var coffee = require("coffee-script");
var babel = require("babel-core");

require.extensions['.coffee'] = function(module, filename) {
    var content = fs.readFileSync(filename, 'utf8');
    var compiled = coffee.compile(content, {bare: true});
    compiled = babel.transform(compiled, {presets:["es2015"]}).code;
    return module._compile(compiled, filename); // module._compile is not mentioned in the Node docs, what is it? And why is it private-ish?
};

…and use it like this…

./node_modules/mocha/bin/mocha ./test/main.coffee --compilers coffee:./coffee-babel --reporter spec

My compiler uses the bare option for coffeescript, because the import statements has always to be at the top-level and the coffeescript compiler wraps by default everything in a closure.

But this bare option has by itself its own downsides. Now all your top-level code in seperate coffeescript files is top-level code for all files. So ideally you have to wrap this code by yourself, for example in the first describe.

Ok, that’s it, that’s my solution. But, the pre-compilation is slow and cumbersome. So this solution is bad.

What would be an ideal solution?

The ideal solution would be if there was an option in the mocha command to pre-compile the source files, that you’re testing. But mocha doesn’t necessarily now, which files I’ll require in my tests.

This problem will also solve itself when Node starts to support the new module systems. But, I’m not sure when this will happen. Or if it will happen at all.

I think it’s probably best to use the AMD modules for now for testing and writing code.

Collection of Game Development Resources

Tue, 24 Feb 2015 20:34:05 +0000

I published a new category on my site with a collection of useful game development resources to learn the art and craft of developing games. I try to highlight sites that are not as obvious, and especially articles I stumbled upon when implementing specific features (like procedural map generation), which helped me to better grasp certain aspects (like maths).

The collection of course materials from the ITU Copenhagen is especially noteworthy.

I will update this site whenever I find anything that is useful and relevant for game development.

Find the Game Development Resources here!

Format USB stick to Install an Operating System

Mon, 02 Feb 2015 16:17:28 +0000

Today I reinstalled Linux and Windows again on my home machine, because my Windows was getting slow and I couldn’t really program on it comfortably.

To not waste any CDs and DVDs or other cumbersome storing devices here is a quick way to format your USB stick to just copy the data over from an installation image.

First open the command line on Windows. (Press Windows button -> type cmd -> ENTER OR windows button -> run -> ENTER -> cmd -> ENTER):

In the command line do the following things:

:: opens disk partition tool
diskpart

:: lists all connected storage devices, look for yours (a good indication is the size)
list disk

:: select your disk
select disc <your USB disk num>

:: WARNING! this will erase your data on the USB stick
clean

:: creates a partition, select it and set it to active
create partition primary
select partition=1
active

:: format as Fat32 (same format as DVDs for example)
format fs=fat32

:: mounts it to windows
assign

Now you can mount an image and copy the files from the image to the USB device. When you now boot your PC and set it to boot from USB, it should launch the OS installation program on the image. Yeah!

I will probably never memorize this, because I’m doing it like once a year, max.

My Development Setup with Sublime Text

Tue, 16 Sep 2014 22:19:41 +0000

** Updated 24th August sudo apt2015 **

Here is the default setup for my favourite editor, Sublime Text 3, for web and backend development with NodeJS and most other dynamic languages or shell scripts. I even bought it and haven’t regretted this decision. You can also try it out for free for an unlimited amount of time.

What sets it apart for me from a “real” IDE is

quick text manipulation

Multi-line editing, selecting next occurences of text etc, the features advertised on the homepage introduction videos alone are efficient time savers for me and are already such a big part of my mental repertoire that I often open up sublime text to do just about any text manipulation.
the clutter free interface

In full screen mode you just see the code (side-by-side or in grid view), maybe a few tabs, and the sidebar (if you need it). There are no unnecessary buttons or windows to distract you, which is especially nice on a small 13” screen. But you can still search and access almost any command with CMD+SHIFT+P/CTRL+SHIFT+P even without knowing the shortcut for it. Which is still much quicker than using your mouse.
quick startup

Oh yes, this one feels really fresh coming from an IDE like Eclipse. No freezes, fast startup, no fuzz… yeah.

There are more pros, but this is not about convincing somebody, its more about my setup., so I can remember it when I have to re-install it.

Plugins/Packages

Sublime Package Control: (install this first)

Makes installing other packages a breeze.

After installed just type CMD+SHIFT+P/CTRL+SHIFT+P (Mac / Win-Linux) Install Package > …type package name

Install the rest that way.
SidebarEnhancements:

Extends feature set of sidebar

Wow, so many options... almost too much for my taste
Missing Palette Commands:

Enables features in the CMD+SHIFT+P command palette that are not enabled by default, like Show Console.
Emmet:

Makes editing of HTML easier, with useful autocompletes and shortcuts (was called ZenCoding in earlier versions)
TernJS:

Best autocompletion tool for JavaScript I have encountered so far. Here is a description how to set up projects after installing it via package control.

JavaScript Autocompletion, hell yeah!

Alternatives are: SublimeCodeIntel and tern_for_sublime
ArcticTypescript:

TypeScript support and autocompletion, build tools etc. tss and tsc need to be installed first. …sometimes extremely slow ( when referencing new files, but well it’s still better than using Visual Studio, right? just kidding )

TypeScript Autocompletion
Better Coffeescript:

CoffeeScript Syntax and other tools.
LESS:

CSS preprocessor syntax highlighting
Git Gutter:

Shows what you changed since last commit as little indicators beside the line numbers
Predawn Theme:

Prettier user interface, and this is the only theme I found that supports file icons in the sidebar.

I also use it with Monokai colors, because the default Predawn colors have a weird value range therefore they are harder to distinguish, at least for me when using JavaScript.

Appearance with Predawn theme

User Settings

{
	"bold_folder_labels": true,
	"caret_style": "phase",
	"color_scheme": "Packages/Theme - Flatland/Flatland Monokai.tmTheme",
	"fade_fold_buttons": false,
	"findreplace_small": true,
	"font_size": 12.0,
	"highlight_line": true,
	"ignored_packages":
	[
		"Vintage"
	],
	"sidebar_small": true,
	"tab_size": 2,
	"tabs_small": true,
	"theme": "predawn-DEV.sublime-theme"
}

Configuring Sublime for use with the Command Line

Often it is useful to start Sublime Text from the command line. Especially, if you are working and maintaining many different projects its a time saver to open a whole project in a folder with subl .. This guide here shows you how to configure it for use with the command line (on OS X).

Aureality - Second Season is starting

Sun, 10 Aug 2014 15:05:04 +0000

Today I released the new episode of a new season of Aureality. Aureality is the project where I record sound trips and impressions from all around town. My binaural setup, with two microphones in my ears, allows you to hear the sounds as they come into my ear, which reproduces a complete surround experience when played back through stereo headphones.

For this season I compiled soundfiles that are from special occasions, like a football and a basketball game, and from a street parade. Whereas in the last season I released everyday sounds you find on the streets of Berlin or in trains. So I hope this time around it’s a little more exciting.

It starts out with a football game I went to with a friend, you can listen to it here:

Further you can listen to it on Youtube or Vimeo, whichever you prefer. On my YouTube channel I often have longer versions available or some experimental recordings, because there is no limit. I would upload some 1h long versions of some ambient city sounds if there wouldn’t be a limit on SoundCloud. I’m still thinking about hosting it on my own page later on, or switching completely to Youtube/Vimeo with just previews on my SoundCloud account. But yeah well, this is just behind the scenes info, enjoy the sounds! And I’ll try to keep ‘em coming!

Troubled Times with Selenium Webdriver

Sun, 20 Jul 2014 23:01:46 +0000

Testing is one of those subjects I underestimated or taken rather less seriously in the university. Later in my first job, after about 2 years working there and observing which things usually went wrong in a normal development cycle of our team, I realized that some problems probably were solvable with automated testing. Or at least some time could be saved, when we wouldn’t do it manually all the time. Now, in my current job at Oximity, finally the time has come that I have to start actually doing it.

My testing system at work is comrpised of Selenium WebDriver (JavaScript version), Mocha with Chai and Coffeescript. What I’m doing with it is frontend end to end testing of our website. So basically I’m simulating a robot sitting in front of a browser, clicking as fast as possible on UI elements. When something breaks while he is doing it he either explodes in a burst of error messages or when I’m lucky, he tells me what went wrong.

This will not be a complete tutorial of Selenium Webdriver or Mocha or Chai, just a collection of things (resources, tutorials, bugs, techniques) that I want to remember and that will help me if I need to install and run it all over again. Maybe it will help also someone else out there.

#System and setup

My system is a Mac OS X Mavericks (10.9) so most of the setup will be Mac specific, some of it can be applied for Linux (the only difference actually, I guess, will be with the file paths and installation folders).

So the things I already assume to be installed:

Node and npm
Homebrew or Macports (only on Mac OS)

What you need to install:

Chrome or Chromium (download chromium)
Selenium Webdriver
Coffeescript
Mocha
Chai

Go to your favourite terminal and install them:

npm install selenium-webdriver
npm install -g coffee-script
npm install -g mocha
npm install chai

Ok, before I go into details with some of the technologies lets look how the setup our first tests and make sure everything runs smoothly. Let’s make a file test.coffee.

webdriver = require("selenium-webdriver")
should = require("chai").should()

# the website we want to test
host = "http://watch-next.herokuapp.com"

# chrome (Mac specific for Linux it's something like /bin/google-chrome)
chromePath="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"

describe "Test Suite", ->
  # executed once before the first test
  before (done) ->
    this.timeout = 150000

    # initialize browser
    capabilities = webdriver.Capabilities.chrome()
    capabilities.set "chromeOptions", {
      "binary": chromePath
    }

    # start browser
    global.driver = new webdriver.Builder()
    .withCapabilities(capabilities)
    .build()
    done()

  # executed after last test
  after (done)->
  	# closes the browser
    driver.quit().then done

  describe 'Title test', ->
    before (done) ->
      done()
    after (done) ->
      done()
    @timeout 10000
    it 'should display the desired page title', (done)->

      driver.get host
      driver.wait () ->
        driver.getTitle().then (title)->
          title.should.have.string "WatchNext"
          done()
      , 5000

Now we need to run it with Mocha.

mocha --compilers coffee:coffee-script/register test.coffee

If you’ve written it with JavaScript a simple mocha test.coffee will suffice. After you’ve run it you should see something like:

  ․

  1 passing (3s)

It shows every test as a dot, and when they fail you see which one failed. I prefer another output, so I see which test is currently running and to not type it every time I simply make a shell script for it, called test.sh

#!/bin/bash

mocha --compilers coffee:coffee-script/register -R spec test.coffee

This gives me the more descriptive output:

  Test Suite
    Title test
      ✓ should display the desired page title (2769ms)


  1 passing (3s)

#Selenium

So Selenium is this thing that gives you the possibility to automate a browser. At first I had difficulties to find a good documentation or introduction, especially for the JavaScript version. So here at first a link collection of good introductions and documentations.

Tutorials and documentations

A good point to start from is this introduction on Google code.

Another challenge was to find a good documentation for it. There was this site, from Google Code, but I ran into several problems with it, there where numerous 503, 404 errors with it etc, so I found also a mirror of the doc here, but it seems to be incomplete. The most helpful documentations are that of webdriver.Webdriver, webdriver.WebEelement and webdriver.By, which is a jquery-like element selector.

Mocha/Chai

Mocha is the test framework I’m using with Chai as the assertion module. Here is the documentation for the BDD style chainable assertion construct, that is expect or should. With it you can chain assertions so they sound like real sentences. For example:

people.should.be.ok()

Frequent use cases

Here are some use cases which you might need frequently, but which maybe not that trivial to accomplish with Selenium. Also the problems you can run into.

Execution of arbitrary JavaScript code inside a selenium test:

driver.executeScript('return document.location.pathname')

Executing JavaScript and getting a value back:

yourAsyncScript = """
  var callback = arguments[arguments.length - 1];
  setTimeout(function(){
    callback("yourReturnValue")
  }, 5000);
"""
# timeout needs to be set or else it will fail
driver.manage().timeouts().setScriptTimeout(5000, 1) 
promise = driver.executeAsyncScript(yourAsyncScript);
promise.then (returnValue)->
  returnValue.should.equal("yourReturnValue")

Waiting for a page to load:

# wait for page to be loaded
driver.wait((()-> driver.executeScript('return document.readyState')), 10000)
.then ()->
	# continue doing something

If you already know for which element you are waiting you can use:

# wait until element appears on page
driver.wait (-> driver.isElementPresent webdriver.By("#myElement")), timeout
# wait for element to become visible (omit if not needed)
driver.findElement(webdriver.By("#myElement"))
.then (element) ->
  driver.wait -> element.isDisplayed()
  driver.findElement(webdriver.By("#myElement"))
.then (element) ->
	# do your thang

Checking if element has a class:

driver.findElements(By.css('#myElement'))
.then (elements) ->
  elements[field].getAttribute('class')
  .then (classes_string)->
    classes = classes_string.split ' '
    classes.should.include 'bestClass'

Error handling in Promises:

In Selenium WebDriver (JS) you can not deal with errors like you are used to with try/catch, because most of the actions you perform return promises and they are asynchronous. You wait for there completion with the then function and assign it a callback function there to get the result. The second argument of the then function is an error callback, which gets called when an exception happened performing the action.

element.click()
.then(resultCallback, errorCallback)

The errorCallback gets a reference to the error, and the resultCallback gets the result.

Dismiss alert when navigating away from a page:

So this is one that caused me some headache, if an alert pops up it can kill all your subsequent test-cases so when you have to check a page, where occasionally an alert pops up, you need to deal with it.

In this scenario, I want to change the page and wait for an element to appear, but an alert usually pops up and interferes.

handleAlert = (err) ->
  driver.switchTo().alert()
  .then (alert)->
    alert.accept()
  , (e)->
    console.log('No alert to handle')

getPageDismissAlert = (page) ->
  driver.get(page)
  .then(null, handleAlert)

  selector = By.css('.page-title')


  driver.wait((-> driver.isElementPresent selector), 5000)
  .then(null, handleAlert)
  driver.findElement(selector).then (element) ->
    driver.wait -> element.isDisplayed()
    .then null, handleAlert
    driver.findElements(selector).then null,handleAlert
  , handleAlert

  # we dealt with the alert... but haven't done what we wanted

Okay now we dealt with the alert. But we have not done we actually wanted. We could do it in the handleAlert method. Or we make us a function that creates the handleAlert functions for us:

alertHandleCreator = (retry) ->
  handle = (err)->
    driver.switchTo().alert()
    .then (alert)->
      alert.accept() # or .dismiss()
      retry()
    , (e)->
      console.log('No alert to handle')
  return handle

This creates us a function that cancels the alert and does the function we give it in the retry. Now we can do something like this:

getPageDismissAlert = (page) ->
  selector = By.css('.page-title')

  # function that we want retried when alert is raised
  try = (alertHandle)->
    driver.get(page)
    .then(null, alertHandle)
    driver.wait((-> driver.isElementPresent selector), 5000)
    .then(null, alertHandle)
    driver.findElement(selector).then (element) ->
      driver.wait -> element.isDisplayed()
      .then null, alertHandle
      driver.findElements(selector).then null, alertHandle
    , alertHandle

  handleAlert = alertHandleCreator try
  try(handleAlert)

Iterate through WebElements to get a value:

utils.waitVisible(driver,By.css('.info-tag'),10000)
.then (elements)->
  console.log 'Number of tags: '+elements.length
  tags = []
  tagPromiseList = elements.map (tagElement)->
    tagElement.getAttribute('textContent')
    .then (tag)->
      tags.push(tag)
  tags
.then (tags)->
  console.log 'tagList: ' + tags
  tags.should.include articleTag
  tags.should.include articleTagEdit
  done()

or if you want to check with just a substring… of a value for example

.then (elements)->
  tags = 
    list: ""
  tagPromiseList = elements.map (tagElement)->
    tagElement.getAttribute('textContent')
    .then (tag)->
      tags.list = tags.list+", "+tag
  tags
.then (tags)->
  tags.list.should.have.string articleTagEdit
  tags.list.should.have.string articleTag
  done()

Hover over element:

driver.findElement(By.css('.my-element-class'))
.then (tagElement)->
  new webdriver.ActionSequence(driver)
  .mouseMove(tagElement)
  .perform()

Handling StaleElementReferenceError and NoSuchElementError:

Reference: http://stackoverflow.com/questions/16166261

With the function waitVisible I want to find an element on the page and then wait for it to get visible. But sometimes the errors occur there, so I handle them like here:

waitVisible = (parent, selector, timeout) ->
  timeoutOver = false
  setTimeout ()->
    timeoutOver = true
  , timeout

  startTime = new Date()
  handleError = (error)->
    #handle NoSuchElementErrors and StaleElementReferenceError
    if error.name == "NoSuchElementError" || error.name=="StaleElementReferenceError"
      if timeoutOver 
        console.log "Still no such element :("
        throw error
      else #retry
        waitForIt(timeout-(new Date()-startTime))

  waitForIt = (timeout)->
    driver.wait (-> parent.isElementPresent selector), timeout
    parent.findElement(selector).then (element) ->
      driver.wait -> element.isDisplayed()
      parent.findElements(selector)
    , handleError

  waitForIt(timeout)

Actually that’s also not perfect. I have not found the best solution to handle StaleElementReferenceError and NoSuchElementError yet.

Waiting for Angular to finish first digest loop:

Reference: http://jiraaya.wordpress.com/2014/03/17/selenium-wait-for-digest-loop-to-complete/

Haven’t tested this out yet!

driver.executeAsyncScript "angular.element([DOM element]).injector().get('$timeout')(arguments[arguments.length - 1]);"
, ""

If you have something to add or correct, please write it in the comments. I’m still fairly new to this area and am eager to learn new things.

EDIT 27th of April, 2015

Here is a nice article I found on avoiding some confusing errors in your Selenium tests: Avoiding Random Failures in Selenium UI Tests

And two pages about page objects here and there, which can help you organize your page tests.

Also check out general useful tips on Elemental Selenium

I will probably also do a follow up article on some annoying things I dealt with.

Dynamically creating AudioBuffers with the WebAudio API

Tue, 08 Apr 2014 14:24:33 +0000

There is this great thing in HTML5 called WebAudio API, great for games and audio applications. One great thing about it is that you can create your own wave forms on-the-fly and play them back. This is useful because you don’t need to download sounds; instead you can just generate them when they are needed or before the app is started. The applications for this are ranging from games to synthesizers to physical modeling of sound in the browser.

Okay enough intro, let’s start actually doing it. It’s pretty simple. At first you need to get the AudioContext, watch out for the browser prefixes:

var AudioContext = AudioContext || webkitAudioContext || mozAudioContext;
var context = new AudioContext();

Now we need to create a BufferSource and a Buffer and then we get the channel data of the created buffer.

var node = context.createBufferSource()
	// createBuffer(channels, samples, sampleRate)
  , buffer = context.createBuffer(1, 4096, context.sampleRate)
  , data = buffer.getChannelData(0);

The BufferSource is actually a BufferSourceNode, it can be used only once. When it finished playing or when you stopped it you have to create a new one. The Buffer actually holds the raw audio data in its channels.

Now fill the buffer with your data. In this example it is filled with random numbers, which creates noise.

for (var i = 0; i < 4096; i++) {
 data[i] = Math.random();
}

Now with the last step you set the buffer of the BufferSourceNode to your previously created buffer. You can make it loop, when you set the loop attribute of the node to true. Then you connect the node to the output, which is context.destination. And last but not least, make it start as soon as possible.

node.buffer = buffer;
node.loop = true;
node.connect(context.destination);
node.start(0);

Put everything together and you have:

var AudioContext = AudioContext || webkitAudioContext || mozAudioContext;
var context = new AudioContext();
var node = context.createBufferSource()
  , buffer = context.createBuffer(1, 4096, context.sampleRate)
  , data = buffer.getChannelData(0);
 
for (var i = 0; i < 4096; i++) {
 data[i] = Math.random();
}
node.buffer = buffer;
node.loop = true;
node.connect(context.destination);
node.start(0);

You can take this code and post it into the Chrome console, and it should immediately start playing that annoying noise sound that everybody loves. Just open your console with CMD+ALT+i ( F12 or CTRL+SHIFT+I on Windows/Ubuntu) and copy paste it there.

Here is also a running demo on Plunker and a gist.

Demo Application - WaveGenerator

I also did a little demo application to demonstrate one of many use cases for the dynamic creation of buffers. In this application you can draw a signal in the canvas and then you can play it back. Here it is

Now it is not hard to imagine that even software like Audacity could be build in a browser. Or physical models of instruments can be build and then played back on a digital instrument with the MIDI API.

The only thing that is lacking right now for WebAudio is the browser support. But it is also getting better with support in Safari & probably Opera (but haven’t tested that).

Pimping my Terminal #1 - Bash Prompt

Sat, 22 Mar 2014 23:20:00 +0000

I learned today that my shell is ugly and has no cool functions, thanks Paul Irish. Okay, there is actually one cool feature I already have in my ~/.inputrc (in my home folder ~):

"\e[A": history-search-backward
"\e[B": history-search-forward

This allows me to jump through the relevant history beginning with the thing I type. So if I type sudoand press UP it will only show up commands that started with sudo. The other one is:

set show-all-if-ambiguous on
set completion-ignore-case on

This one is pretty much self explanatory. The first shows all ambiguous commands or folders immediately on pressing TAB, the second one ignores the case for autocompletion.

These hints I took from one of the most popular coderwall tips.

Customizing the bash-prompt

For further orientation I used the dotfiles by Mathias Bynens on Github and Paul Irish.

What I first did is transforming my prompt from this:

into this:

Beside the username, machine and location, you can also see the current git branch you are on, and if it is dirty, e.g. if you have uncommited changes in there. And, all of it, with some colors, to bring some joy to your dreary daily routine.

What you need to do for that is put this in your ~/.bash_prompt and import it in the ~/.bash_profile (or just put it directly in there):

if [[ $COLORTERM = gnome-* && $TERM = xterm ]] && infocmp gnome-256color >/dev/null 2>&1; then
	export TERM=gnome-256color
elif infocmp xterm-256color >/dev/null 2>&1; then
	export TERM=xterm-256color
fi


# setting the colors
if tput setaf 1 &> /dev/null; then
	tput sgr0
	if [[ $(tput colors) -ge 256 ]] 2>/dev/null; then
		MAGENTA=$(tput setaf 9)
		ORANGE=$(tput setaf 172)
		GREEN=$(tput setaf 190)
		PURPLE=$(tput setaf 141)
		WHITE=$(tput setaf 3)
	else
		MAGENTA=$(tput setaf 5)
		ORANGE=$(tput setaf 4)
		GREEN=$(tput setaf 2)
		PURPLE=$(tput setaf 1)
		WHITE=$(tput setaf 7)
	fi
	BOLD=$(tput bold)
	RESET=$(tput sgr0)
else
	MAGENTA="\033[1;31m"
	ORANGE="\033[1;33m"
	GREEN="\033[1;32m"
	PURPLE="\033[1;35m"
	WHITE="\033[1;37m"
	BOLD=""
	RESET="\033[m"
fi

export MAGENTA
export ORANGE
export GREEN
export PURPLE
export WHITE
export BOLD
export RESET

function parse_git_dirty() {
	[[ $(git status 2> /dev/null | tail -n1) != *"working directory clean"* ]] && echo "*"
}

function parse_git_branch() {
	git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e "s/* \(.*\)/\1$(parse_git_dirty)/"
}

export PS1="\[${BOLD}${MAGENTA}\]\u \[$WHITE\]at \[$ORANGE\]\h \[$WHITE\]in \[$GREEN\]\w\[$WHITE\]\$([[ -n \$(git branch 2> /dev/null) ]] && echo \" on \")\[$PURPLE\]\$(parse_git_branch)\[$WHITE\]\n\$ \[$RESET\]"
export PS2="\[$ORANGE\]→ \[$RESET\]"

So now the shell looks good, at least on the first glance. In the following posts I will be adding to its functionality.

30-Day-Challenge: Wrap up & Illustrations

Wed, 12 Mar 2014 17:18:00 +0000

I completed my first 30-Day-Challenge, although I didn’t make all the points on my checklist. The daily moring walks worked out in the beginning, but when it got colder, -10°C and such, my hands began to freeze of so I paused the going out but continued to draw inside. As soon as it got warmer I was going out again though.

The same happened with the goal setting, I was setting goals in the beginning and it was working quite well, but then later stuff at work came up and I wasn’t really focussed on my personal workflow… but actually this is probably just an excuse.

At least I’m happy that I continued drawing a little each day, even when I wasn’t motivated. I think one can also see when I’m not motivated in the drawings. So here they are!

Day 1

Day 1 - Some playground

Day 2

Day 3

Day 4

Day 5

Day 6

Day 7

Day 8

Day 9

Day 10

Day 11

Day 12

Day 13

Day 14

Day 15

Day 16

Day 17

Day 18

Day 19

Day 20

Day 21

Day 22

Day 23

Day 24

Day 25

Day 26

Day 27

Day 28 - Schillerpark

Day 29

Day 31

Day 32

Day 33 - TU Berlin

Day 34 - TU Berlin

Day 34

Day 35

Simple & straight-forward WebRTC DataChannel establishment

Fri, 07 Mar 2014 15:58:31 +0000

As I stumbled through the Internet trying to find any good tutorial for establishing a DataChannel connection in the Browser, I thought that there were not many good tutorials on this topic. Some old ones, where you didn’t knew if they still apply, and some vague ones that were more about P2P video & audio. So I decided to make my own tutorial, just focussing on the DataChannel and make it simple and straight-forward. If you want to jump straight to the a working implementation go to this link.

Prerequisites

A Websocket server or other channel to transport messages from one browser to another browser.

Step-by-Step Instructions

So here are the instructions broken down to most simple chunks.

Browser A: Offerer

1. Create PeerConnection with connection and config parameters:

var config = {"iceServers":[{"url":"stun:stun.l.google.com:19302"}]};
var connection = { 
	'optional': 
		[{'DtlsSrtpKeyAgreement': true}, {'RtpDataChannels': true }] 
};
var peerConnection = new webkitRTCPeerConnection(config, connection);

1.1 Set PeerConnection onIceCandidate event handler:

To gather ice candidates and send them to the other user

peerConnection.onicecandidate = function(e){
    if (!peerConnection || !e || !e.candidate) return;
    sendNegotiation("candidate", event.candidate);
}

2. Create DataChannel:

var dataChannel = peerConnection.createDataChannel("datachannel", {reliable: false});

2.1 Set DataChannel event handling.

dataChannel.onmessage = function(e){console.log("DC message:" +e.data);};
dataChannel.onopen = function(){console.log("------ DATACHANNEL OPENED ------");};
dataChannel.onclose = function(){console.log("------- DC closed! -------")};
dataChannel.onerror = function(){console.log("DC ERROR!!!")};

3. Create sdp constraints for the offer.

We don’t need any audio or video for this:

var sdpConstraints = {'mandatory':
  {
    'OfferToReceiveAudio': false,
    'OfferToReceiveVideo': false
  }
};

4. Create offer, set LocalDescription and send it:

Creates the offer, then sets the local description and sends the offer.

peerConnection.createOffer(function (sdp) {
	peerConnection.setLocalDescription(sdp);
	sendNegotiation("offer", sdp);
	console.log("------ SEND OFFER ------");
}, null, sdpConstraints);

Now the offer is sent out as soon as it is ready, now we need to think about handling the ANSWER and the incoming ICE CANDIDATES.

5. Process Ice Candidates:

Incoming ice candidates should be handled by this function.

function processIce(iceCandidate){
  peerConnection.addIceCandidate(new RTCIceCandidate(iceCandidate));
}

6. Process Answer:

Incoming answers should be handled by this function.

function processAnswer(answer){
  peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
  console.log("------ PROCESSED ANSWER ------");
};

If everything worked well, the DataChannel onopen event should fire and you are good to go! You can now send messages with dataChannel.send("Hello World!").

At least, if the answerer side did everything right. What to do on the receiving end, you will see in the next section.

Browser B: Answerer

The answerer waits for incoming offer. When an offer arrives he first does the same as the Offerer in steps 1-2. So you can actually put these in the same function and call it for both, but I still write it down here. But let’s already put them into a single function

Step 1-2

Create PeerConnection with connection and config parameters
- Set PeerConnection onIceCandidate event handler
Create DataChannel
- Set DataChannel event handling.

function openDataChannel (){
	var config = {"iceServers":[{"url":"stun:stun.l.google.com:19302"}]};
	var connection = { 'optional': [{'DtlsSrtpKeyAgreement': true}, {'RtpDataChannels': true }] };

	peerConnection = new webkitRTCPeerConnection(config, connection);
	peerConnection.onicecandidate = function(e){
    if (!peerConnection || !e || !e.candidate) return;
    var candidate = event.candidate;
    sendNegotiation("candidate", candidate);
	}

	dataChannel = peerConnection.createDataChannel(
		"datachannel", {reliable: false});

	dataChannel.onmessage = function(e){
    console.log("DC from ["+user2+"]:" +e.data);
	}
	dataChannel.onopen = function(){
    console.log("------ DATACHANNEL OPENED ------")
    $("#sendform").show();
	};
	dataChannel.onclose = function(){console.log("------ DC closed! ------")};
	dataChannel.onerror = function(){console.log("DC ERROR!!!")};

	peerConnection.ondatachannel = function () {
    console.log('peerConnection.ondatachannel event fired.');
	};
}

3. Set RemoteDescription

Sets the remoteDescription to the offer sdp.

peerConnection.setRemoteDescription(new RTCSessionDescription(offer));

4. Set SDP constraints

Same as for offerer.

var sdpConstraints = {'mandatory':
  {
    'OfferToReceiveAudio': false,
    'OfferToReceiveVideo': false
  }
};

5. Create Answer, set LocalDescription and send

Almost the same as above, but with createAnswer method.

peerConnection.createAnswer(function (sdp) {
  peerConnection.setLocalDescription(sdp);
  sendNegotiation("answer", sdp);
  console.log("------ SEND ANSWER ------");
}, null, sdpConstraints);

6. Handle IceCandidates

Same function as for offerer.

function processIce(iceCandidate){
  peerConnection.addIceCandidate(new RTCIceCandidate(iceCandidate));
}

Actual Flow of Actions

or WTF is really happening if you put it in sequential order?

Let’s assume we have to users. User A is the offerer and user B ist the answerer. So the actual flow of actions looks something like this.

The Simple overview version:

          A            |    signaling    |          B              
-----------------------|:---------------:|-------------------------
creates peerconnection |                 |                         
creates datachannel    |                 |                         
creates offer          |                 |                         
                       |---- offer ----> |                         
                       |                 |creates peerconnection   
                       |                 |creates datachannel      
                       |                 |creates answer with offer
                       |<---- answer ----|                         
processing Answer      |                 |                         
datachannel opens      |                 |datachannel opens        

Slightly more complex (probably nobody needs this, because it’s already becoming confusing):

           A              |    signaling    |          B                 
--------------------------|:---------------:|----------------------------
create peerconnection     |                 |                            
create datachannel        |                 |                            
create offer              |                 |                            
(callback) offer created  |                 |                            
setLocalDescription(offer)|                 |                            
                          |---- offer ----> |                            
                          |                 |create peerconnection       
                          |                 |create datachannel          
                          |                 |setRemoteDescription(offer) 
                          |                 |create answer               
                          |                 |(callback) answer created   
                          |                 |setRemoteDescription(answer)
                          |<---- answer ----|                            
processing Answer         |                 |                            
                          |                 |(event) onicecandidate      
                          |<-ice candidate--|                            
                          |<-ice candidate--|                            
                          |<-ice candidate--|                            
processIce                |                 |                            
                          |                 |                            
(event) onicecandidate    |                 |                            
                          |--ice candidate->|                            
                          |--ice candidate->|                            
                          |--ice candidate->|                            
                          |                 |processIce                  
                          |                 |                            
datachannel opens         |                 |datachannel opens           

Don’t get it? Don’t panic.

So if this guide didn’t help you, try this one. There are tons of tutorials out there how to setup WebRTC PeerConnections or DataChannels. I had to read through tons of tutorials to get it. And then the one above helped me, but I decided to do one for myself, to remind me how it works, because in about a week I’ll probably forget.

APPENDIX: The Protocol and Signaling

I didn’t specifically described yet what sendNegotiation() does, what protocol I’m using and what signaling channel. Mainly this is because the tutorial should be simply to provide an overview of the DataChannel initialization, because the other thing already seemed trivial.

The Protocol

A simple protocol is used, consisting of 4 parameters:

{
	from: "a",
	to: "b",
	action: "offer",
	data: {
		// action specific
	}
}

About the parameters:

from: Sender of the message

to: Recipient of the message

action: Specific action. For the simple datachannel establishment "offer", "answer" and "candidate"is used

data: Depending on the action. For offer and answer this is an SDP. And for candidate it’s an ice candidate.

This protocol can be easily extended with new actions, if you want to control or message other things with it.

The Signaling

The best thing to use is a Websocket, but you could also use something like AJAX or socket.io. You just need to make sure that it comes to the other side. The easiest way would be to make a Websocket chat-server that just sends every message to everyone in a chat room.

The sendNegotiation function that I use looks like this:

function sendNegotiation(type, sdp){
    var json = { from: user, to: user2, action: type, data: sdp};
    ws.send(JSON.stringify(json));
    console.log("Sending ["+user+"] to ["+user2+"]: " + JSON.stringify(sdp));
}

And the whole Websocket establishment and message handling looks like that:

$("#ws-connect").click(function(){
	ws = new WebSocket("ws://127.0.0.1:9000/socket?roomname="+getURLParameter("roomname"));

	ws.onopen = function(e){    
    console.log("Websocket opened");
    $("#idform").show();
	}
	ws.onclose = function(e){   
	    console.log("Websocket closed");
	}
	ws.onmessage = function(e){ 
	  console.log("Websocket message received: " + e.data);

	  var json = JSON.parse(e.data);

	  if(json.action == "candidate"){
      if(json.to == user){
        processIce(json.data);
      }
	  } else if(json.action == "offer"){
      // incoming offer
      if(json.to == user){
        user2 = json.from;
        processOffer(json.data)
      }
	  } else if(json.action == "answer"){
      // incoming answer
      if(json.to == user){
          processAnswer(json.data);
      }
	  }
	}
}

I hope this helps somebody. You can find the implementation of a working example in this github repository. If you have any question, post them in the comments.

30-Day-Challenges

Thu, 09 Jan 2014 19:58:31 +0000

So I came across those 30-Day-Challenges by listening to a TED talk. It’s something that can help you to motivate yourself, get things done and increase your self-confidence through a sense of achievement, when you finally finish your challenge.

Challenges can be about things that you always wanted to try or skills that you want to improve. It could be as simple as take a photo every day, or learn a new scale on an instrument, or write something every day so by the end of the month you can have a whole novel if you stick with it.

You can basically do anything, but it would be good to start with simple achievable goals and then later you can do stuff like write a song every day, or a simple game or some artwork.

My First Challenge: Daily Morning Walks

So I decided to start with something simple: I will take a walk every morning for about an hour before I get to work. I don’t get out to often and an occasional Vitamin D boost cannot hurt. Also, this walk should be without music or other distractions on my mind, because there’s usually to little time for me spent on thinking without influence of music and podcasts.

Drawing

Since I also find walks by itself incredibly boring I want to draw something every day in my sketchbook; be it a church I walk by, some beautiful alley or maybe some bike on the sidewalk, anything I find interesting at the moment. This is good opportunity to refresh my rudimentary drawing skills and also improve on them, what I always aspire to do, but never bring myself to actually do it.

Setting Goals

In the end of the walk I also want to set my goals for the day:

What tasks do I need/want to finish today? (Small achievable tasks)

Especially at home I often have the problem that I don’t have a clear goal of what I want to achieve each day. Just some really vague long term goals, like finish this game, finish this site, work on this and work on that, but nothing specific. On the other hand when I define clear goals I often wake up with energy and eager to start to work on something, so I think setting goals everyday could be beneficial as a self-improvement strategy for me.

Let’s see how this works out…

Starting tomorrow!

I can do it! chanting

Peace out, Thursday, 09.01.2014

Organizing my workflow with GitFlow

Tue, 12 Nov 2013 19:58:31 +0000

For my WatchNext site I wanted to use a more professional and organized approach to implementing features and don’t always want to mess with my master branch, when trying out new things and implementing new features. So I stumbled upon GitFlow and used these two posts as an introduction:

A Successful Git Branching Model

Why aren’t you using Git Flow?

Installing Gitflow:

Since I have Homebrew for MacOS installed it’s easy - just type in (with MacPorts it’s just as easy, just type port instead of brew):

brew install git-flow

Then I cloned my repository locally to ensure that I didn’t break something.

git clone --local file:///path/to/repository

Then it can start with gitflow:

git flow init

It then asks you how different branches should be named. I just let their names. Ok, so now my work starts in the develop branch, where all major development happens. The master branch is the production branch.

So now I want to work on a small feature for the next release, the feature that you always see what’s sorted at the moment and in which direction it is sorted. Therefore I create a new feature branch. Like this:

git flow feature start sort-indicator

Every change you make now will be made in the `feature/sort-indicator branch. Then if you’ve finished working on the feature you can merge it back into the developer branch with:

git flow feature finish sort-indicator

For creating new releases:

git flow release start v1.0

And to merge it back into the master branch just finish the release

git flow release finish v1.0

This approach should also greatly help when working in teams on different features, to keep always a running version in the master branch, that everybody can check out and start working right away.