Löwen in Höhlen…

In eigener Sache

Am 18.9.2018 läuft um 20:15 auf VOX “Die Höhle der Löwen” mit den Mädels von dot-on.de und da geht es um die Wurst Klebepunkte – und ein bisschen was davon ist von mir…

Das Tool

Das “Tool”, heute auch bekannt als “dotsmaker“, mit dem man seine eigenen, individuellen Bilder (Fotos oder mobil auch direkt per Kamera) in ein Klebepunkte-Bild verwandeln kann und dann die Punkte im Shop bestellen kann, ist von der technischen Umsetzung her mein Baby – und ja, da bin ich stolz darauf.

Hier zu sehen: dotsmaker

Technisch

Die große Herausforderung an dieser WebApp (auf dem Smartphone sieht es sehr “nativ” aus) lag darin, dass ALLES im Browser/auf dem Endgerät passiert. D.h. die ganze Rechenarbeit (Bild laden, schneiden, in Punkte verwandeln, malen und schließlich ein PDF erstellen) passiert komplett in JavaScript auf dem Gerät, komplett OHNE Server. Am Ende werden lediglich die Daten, um welches Poster es sich handelt bzw. welche Klebepunkte gebraucht werden, an die Shop-Software geschickt.

Ich wünsche den Mädels viel Erfolg in der Löwenhöhle – und fiebere mit!!!

A TURTED based real-time thing that I’m proud of…

I recently finished a nice little example of how to use real-time data for an exciting and equally relaxing view:

Blocker Champ Real Time


http://reloaded.karopapier.de/blocker

What’s that?
It shows a list of players and the number of games where it is their turn.
As soon as they make a move, they are moved to the new position with a nice animation.

Interestingly enough, the hardest part was the JQuery/UI animation stuff.
Since it already is based on the components that are soon to become the TURTED project the real time events were already there to be intercepted and used.

So, if you feel stressed, just sit back, relax and watch the squares move – the ZEN of Karopapier

JS Performance: Numbered Array vs Associative Array

In JS, you sometimtes have to keep track of lists. Usernames, sessions, available Pictures ,…
And often, you have to add and delete some of them.

So, how do you handle these lists? There are basically two options:

a) Good old numbered Array
b) Associative Array, key/value store

Examples?

var users=[];
users[0]=”Adam”;
users[1]=”Bob”;
users[2]=”Claire”;

users={};
users[‘Adam’]=”Adam”;
users[‘Bob’]=”Bob”;
users[‘Claire’]=”Claire”;

Both have their advantages and disadvantages.
An array keeps the order, you have numbered keys. However, deleting or finding an element requires you to walk through the array.

So, the question to me was: How about performance? How big is the difference?

Long story short:
In case you do not care about the order and will only have unique keys, use an associative array!
To add a value:
assoArray[key]=value;
To get a value:
var myVal=assoArray[key];
To delete a key/value:
delete(assoArray[key]);

This is easy and performs much better. At least in my quickly hacked, unoptimised test you can find here: Simple test html
If you think I did something wrong, please enlighten me.