IPO48 – (personal) summary

There was a big event on 11-13.2.2010 in Prague called IPO48. One hundred people gathered there to compete who has the best idea for a startup. One had to explain his idea in 90sec long “elevator speech” in front of a jury and his peers in order to get their attention and recruit a workforce to join his project. It is called an elevator pitch because these 90 seconds is the approximate time you will have if you ever happen to be in elevator with you potential business partner or investor. If you don’t manage to grab their attention – you have lost, they are not interested, they will not give you (read: invest) their money… You really need to know how to present your idea because all business is about marketing and communication  skills.

Confrontation with reality

When I arrived to IPO48 I thought it was gonna be an hackaton. The main motto clearly stated “Get you idea off the ground in 48 hours”. I was sure it was about programming. Well…, I was wrong. I had my speech ready, I trained it in front of my colleagues (one of them actually did not understand it at all for the first time, which was great feedback for me).  I printed business cards, the first one I have ever printed, I also printed a poster with my idea explained.  I did everything I could think of to succeed. I event dreamt about leading people in my team working on my idea. And I did not succeed. My presentation was a total failure. I got nervous, I did not say what I wanted, I forgot the speech I trained… I had all the symptoms of stage-fright. That’s one reason I failed. The other one is that I had no business model. As I found out it was really needed:) IPO was not a hackaton as I expected but more like a competition to win investor’s attention. It was more about communication skills than programming. One of the criteria was to get your project up and running but many people arrived already having some prototype.  For me, this was a great lesson. I am a developer, and I thought that developers are the heart of any project’s success. But they aren’t. Programmers are just programmers, lost somewhere deep in the internet unless they have someone who knows how to promote their excellent (???) ideas.  You can have an excellent application, but if you don’t have customers or users, it’s just like as if you don’t exist at all. (Or to be precise: if people don’t use your app it’s just like it doesn’t exist).

My favourites

The ideas that won were actually very simple, nothing you couldn’t live without, but they offered a lot of fun (two of them) and had clear business plans. Personally I loved the idea of the GPS Social Game, even though I will probably never play it.  But if they the make it similar to WoW with a good story, levelling, probably with guilds, parties and so on, it could be a huge success.

My favourite was Relbit – PHP cloud hosting. I participated on it, and I like the idea of simple cloud hosting for PHP. There is a lot of people developing in PHP in Central Europe, about 60% and the guy who came with it already has the infrastructure, an angel investor and I believe we will hear about him in the near future. We did not win, but he has interest of investors, which is great. Thumbs up! Man I wish you good luck 🙂

Other winning ideas  were these:

TopMonks – application for crowd sourcing. Nice idea.

DrinQuest – Get drunk with your friends and get some experience points for every place you visit. Great idea with a lot of potential customers. Epic win,  but otherwise useless:) See the video, it’s fun.

So.. that’s it.  If you will ever have the chance to attend IPO like event or some hackaton go for it. It is definitely worth it. And with investors involved … where do you go from there? The sky is the limit:)


https://picasaweb.google.com/david.votrubec/IPO48Prague2010 (taken by me)

http://www.flickr.com/photos/fleveo/sets/72157625935644979/with/5448502405/ (taken by Fleveo)

Why I love my work

I consider myself lucky to have work that I love. I work as Javascript / C# developer for a company where I can be creative, I can try new technologies and constantly learn new stuff. In short: I grow, I develop myself. That’s great. I left my previous post not just because of low salary, but mostly because it just sucked. I did not trust my boss, as nobody did, he was that kind of person who tries to avoid responsibility. He had a gift to demotivate people by randomly checking what they are doing, peeking over their shoulders and so on.  Everyone hates that. No wonder people started to leave the company…

But back to topic: in my current company nobody checks how long I am at work, what sites I am visiting, I can go to town if I need to. If I need anything, like better keyboard, books to study, it’s not a problem I can just ask for it and I will probably get it.  I feel free and welcomed, and I feel that my work is appreciated (not just by money but by respect of my peers). That’s very motivating.  Another big motivating factor is enthusiasm of my co-workers.  It creates great atmosphere, so it’s pleasant to work with them. And not just to work, but to go to pub, get stoned and have fun… that’s part of team building 🙂

PS: I know that I probably suck at writing because English is not my native tongue, but it is an exercise for me, a part of kind of self development plan.

I’m going to IPO48 Prague

I have just learned about IPO48 and I am very excited about it. It is a 48 (!) hours long hackaton where people gather to form teams and deliver functional app prototypes.  It is a great opportunity to meet creative innovative people, make contacts with investors and start something new.

This is my startup idea – HistoryGraph. Check it out:)

Educational web-app displaying graph of historical timelines.
It gives you visual comparison of historical developement of chosen topics
(countries, churches, science, etc...)
so that you can spot not-so-obvious relations between various events.

I am currently looking for developers to join my team.  I need front-end, back-end developers, database specialist and graphic.  I am looking forward what will come out of it… who knows?

Fun with tooltips on a timeline

This is a fun script I created during my idle hours while at previous employer.  I wanted to somehow mimic comix-like conversation but on a single image only.  It was just for fun, but it can be however used to do something more useful;) What it basically does is that it displays tooltips in a predefined order. Click image below to see demo.

Click to go to Demo

I wrote simple timeline object which acts as a controller of tooltips – it shows them in given time above given DOM objects.  There is a few of tooltips build on jQuery, but qTip offers loads of options and custom events, which I use in timer.  The code is not perfect, but it works fine;)

How to use it:

var customTimeline = new timeline();

	start: 10,
	duration: 3000,
	text: 'I don\'t hear',
	ownerId: 'deaf'

	start: 2500,
	duration: 2000,
	text: 'I don\'t see',
	ownerId: 'blind'

start: when the tooltip should show (in ms)
duration: how long will be the tooltip visible (in ms)
text: text it will contain
ownerId: ID of DOM element having the tooltip (ID must be unique ;))

I know that setting start in miliseconds is not very ‘user-friendly’ but for simple cases it is fine. I might refactor it if you ask me to 😉

Script dependencies:

jquery.timer.js – I use older version !


customQtipParams = {
	content: 'this text will be replaced',
	show: 'myShow', //name of custom event to trigger qTip render
	hide: 'myHide', //name of custom event to trigger qTip destroy
	ready: true,
	position: {
		corner: {
			target: 'topRight',
			tooltip: 'bottomLeft'
	style: {
		name:'red', //name of predefined qTip style
		tip: 'bottomLeft', //position of qTip
		border: {
			 width: 7,
			 radius: 5
		opacity: '50'



Click here

Have fun using it.

jQuery.durationpicker plugin

[Important Notice: I’ve discovered some bug in demo of durationPicker. It runs correctly only in FF. I will fix it soon and notify you here.]


Have you ever looked at Googles’s (excellent) calendar app and wished that you had the  ‘event planing widget’ in your web form? Well, here is my own version, a reversed engineered one, which I give for free use. It was originaly developed for company I work for, and was not intended to be a completely standalone plugin, so there are still some dependencies. More on that later.

Google's original duration picker
My version of duration picker

Basic functionality is quite the same as in GCalendar thought without the ‘repeat event’ feature. If you are familiar with the original widget, then there is not much to explain how to use it, I will just name few differencies:

  • The calendar widget is icon-triggered. Click icon to toggle calendar.
  • All input fields use maskedinput plugin, so you can type date directly without worrying about correct format (Google doesn’t have that! 😉 ).
  • Immediate validation – if you type invalid date (‘from’ is greater than ‘to’) fields will be highlighted in red.


Configuration either via data- attributes (dateformat, timeformat) or by overriding defaults in .js


<div class="durationPicker" data-dateFormat="dd.mm.yyyy" data-timeformat="hh:MM tt">
	<input class="dateFrom"/>
	<input class="timeFrom"/>
	<input class="timeTo"/>
	<input class="dateTo"/>
	<span style="float:right;">
		<input class="wholeDayCheckbox" type="checkbox" id="1"/><label for="1">Whole day</label>

As you can see, you have to provide the basic html structure yourself.  Script will then add its own stuff to it, but it will not generate input fields for you. But you can add any classes or styles, it should work:) If you feel like you can add labels, but I think it is intuitive enough even without them.

You can use almost  any date format just if you keep the year as yyyy.  Do not use yy for year. Time format should have two digits for both hours and minutes, tt stands for am/pm string (always in lowercase, sorry).


$('.durationpicker').each(function() {

If  input fields doesn’t have any value than current date / current time will be used.

Script dependencies:

Duration picker is not completely standalone, it relies on other scripts, so you have to include them all.

  • jquery – no comment 🙂
  • jquery.datepicker – no comment 🙂 I use custom build of jqueryui
  • jquery.maskedinput.js – that’s what takes take of correct formatting in date & time fields
  • consolecheck.js – mocks console object if not present
  • dateformat.js – takes care of correct dateformat 😉
  • datehelper.js – parses formatted date string and return Date() object.
  • timehelper.js – similar to datehelper but for time strings only.
  • stringextension.js – contains definition of StringBuilder and String.trim() function.
  • jquery.dv.datepicker.js – initialises jquery.datepickers in a special way to enable <div> as a trigger instead of original <img>. It’s more flexible.


Click here 🙂


Get zipped file here or check my Github Repository.

Known issues:

Always call durationpicker() on single element only!. Due to “specific” plugin “architecture” there is problem with scope when runned on array of multiple elements. (This is similar to outer and inner variables in a for cycle…) I am not going to fix it, because in most cases there will be only one instance of durationpicker. And if you ever need more then one you have to initialize it one by one or use this simple workaround:

$('.durationpicker').each(function() {

console.log() problem solved

console.log(),  console.debug()..  my two favourite helpers. If I need check whether my jquery selector returns what I expect it to or just to check how some variable changes its value during script execution I often use console.  It’s great tool. Google Chrome provides it by default, Firefox only when you have Firebug turned on and IE likewise. If there is no console object available, then Javascript throws an Error and stops execution. Console should be used in developement enviroment only, where you can be sure that console is turned on. But sometimes it is good to keep it, at least for error messages. I don’t know about any tool which would walk thru javascript code and remove calls to console when it is deployed in production. If you know about any, please let me know in comments.  As a workaround I wrote simple script which mocks console to prevent errors:


// if console is not available -> mock it to prevent errors
try {
    var c = console;
catch (e) {
    console = {};
    console.log = function () { };
    console.debug = function () { };
    console.warn = function () { };
    console.error = function () { };
    console.dir = function () { };

Fun with Dojo animation

Best way to learn is by doing. About a year ago when I needed to learn Dojo I created this simple animation. It is also my tribute to Avatar movie.  Click the image to see it in action. It looks really cool on full screen [press F11] 🙂

Avatar - dojo.js animation
Tribute to Avatar - animation build in dojo.js

How it works

When page loads dojo.addOnLoad() fires callback function. First it calculates dimension of the <img> used as background. In this case Avatar wallpaper.  Then it creates overlay <div> with same dimension as background image and insert grid of tiles. Number of tiles is calculated dependending on their width and height set in config object.

var config = {
 cellHeight : 80, //px
 cellWidth : 80, //px
 timerTick: 750, //ms
 fadeOutDurr: 400, //ms
 fadeInDurr: 2200 //ms

Each tile has unique ID based on its position in the grid, ID is used for easy referencing of tiles for fading effects. Random tiles  fade in and out revealing portions of the image underneath.  To get next random cell I simply generate two random numbers (max is the number of cols/rows in the grid), compose the ID as x-y and then call dojo.byId(). Each cells also have mouseenter event listener which triggers the same fading effect. When you swift mouse over screen you will see some beautiful ‘waves’ 🙂

//create grid of tiles with StringBuilder

var str = new StringBuilder();
for(var i=0; i<rows; i++) {
	str.append('<div class="row" id="row'+ i + '">');
	for(var j=0; j<cols; j++) {
		str.append('<div class="cell" id="' + i + '-' + j +'" style="height:'+config.cellHeight+'px; width: '+(config.cellWidth-2)+'px"> </div>');
	config.maxY = j;
config.maxX = i;
cellContainer.innerHTML = str.toString();

I use Javascript implementation of StringBuilder for faster string manipulation. It really pays off when building large portions of html in javascript, so I definitely recommend using it.

_fader function takes care of the fadeIn/fadeOut effect. Well, actually it is fadeOut/fadeIn but whatever…Notice the onEnd callback.

function _fader(item) {
		node: item,
		duration: config.fadeOutDurr,
		onEnd: function() {
				node: item,
				duration: config.fadeInDurr
} //_fader()

Now add the event listener for mouseenter. In dojo this is done with the dojo.connect function. You can connect basically almost any object’s method to any listener or other object’s method. It’s very usefull.

dojo.forEach(dojo.query('div.cell'), function(item) {
	dojo.connect(item, 'mouseenter', function () { _fader(item)});

And that’s all. For the full source code see the demo.

jQuery.datepicker – issue with duplicate ID

I have discovered (minor) issue with jQuery Datepicker plugin:

It’s not actually datepicker’s fault, but it might be difficult to find it in a complex web page, so I decided to share it with you. Imagine that your application relies heavily on javascript, ajax, widgets etc… Widgets are created on the fly, and it happens is that two datepicker instances share the same ID. They might be generated from the same template (as was my case), or they dont have any ID at all, but were initaliazed in a certain way, more on this in future post.

Here is a sample code:

<div class="someWidget">
<input id="myId" class="datepicker"/>
<div class="someOtherWidget">
<input id="myId" class="datepicker"/>

and the javascript:


This will add datepickers on both input fields, and when they gain focus, widget will be displayed (that’s default behaviour). So far so good. But if you click on any date, it will be passed set in the first field and the first field only. Even if datepicker is displayed below the second field, the value will never be passed to it.

Why does this happen? Because of id. Datepicker uses it internally to know to which input field the date should be passed to.  If you don’t supply the id in html, then datepicker will come up with its own unique id. But it will never overwrite id, if it is already set.

Hope this will help someone, it took me some time to find out what was happening.


If your datepickers share same id, and one of them is hidden, you may even get this exception: “cannot set property ‘currentDay’ of undefined”. I wanted to show it in a demo, but for some reason I was not able to reproduce it, probably there was something more involved than just ids.