#hackstb (Round 1 and 2)
Stellenbosch is growing as a tech hub of South Africa (and Africa). We have great engineering and computer science talent from Stellenbosch University, a social-networking giant and free wifi for the whole town (almost done) amongst others.
To further promote Stellenbosch as a tech area and to get the hackers and makers to demo their stuff, #hackstb was launched. The idea:
#hackstb is a social event and a monthly demo day for geeks, hackers and inventors in Stellenbosch. It’s a platform to showcase cool tech built in our town.
The first one was a month ago and as a start had 3 demos. Joe (from TrustFabric/Mxit/GustPay) demoed an augemented reality for AfrikaBurn. See a demo of it in action here:
He also demoed GustPay. The final demo was Carel showing how to do Van Eck Phreaking (which was awesome to see).
This week we had 4 demos.
- Arcade cabinet
- 3D Multi-touch input
- Laptop stiffy stand
- Using a normal picture frame as a video playback device
The arcade cabinet that was built by Leon and Francois.
Photo via @hedleyroos.
The AR app is going to be used in conjunction with Stellenbosch 360 to create a map of destinations in Stellenbosch so tourists can easily find their way to interesting waypoints!
So that’s that. The next meetup will be somewhere in June and already have demos lined up! Join if you are in the area. Find us on Meetup.com (our homebase) or Twitter.
How NOT to scale: Tweekly.fm in 2009.

Back in January of 2009, it was university holidays and I just finished my first year of university (studying BComm Computer Science). Being kinda bored and wanting to make something, I decided to whip up a mashup called Tweekly.fm (then childishly called T.W.A.T. (Top Weekly Artist Tweet)).
It was simple. I wanted to learn how to use APIs, and further some of my programming skills. It takes your most listened to artists for the week (from Last.fm) and posts it to Twitter on a Sunday. This was an early version (circa March 2009).

Before I explain the rollercoaster ride, I want to explain my skills at that point:
- Java (in highschool)
- C (1st-year computer science)
- Game Maker
- Basic PHP/MySQL/HTML/CSS (learned it myself in high-school)
I had no sysadmin experience (no idea how to work with linode or aws whatsoever) and didn’t know of MVC frameworks. I just sort of winged it.
The nature of Tweekly.fm meant it could only go viral. Each week, users sent out tweets, and more users signed up. The week after that, more people signed up and so forth.
Now. For the most part of 2009, everything ran smoothly. Tweekly.fm was hosted on my shared hosting provider’s sites and it was performing within the imposed limits. It wasn’t hitting the bandwidth cap and so forth.
The biggest problem however (with my lack of knowledge), was that on Sunday morning 00:00 GMT+2, a CRON job called a PHP script that collected all the data from the DB and queried each user’s last.fm profile, and sent a tweet. A bottleneck quickly formed: the API calls was slowing the script down… a lot. I didn’t care really. I thought this is how these things worked. 1 hour… 2 hours… 3 hours… and so it grew.
Then I thought, considering that the tweets are sending at random times, I’m going to push the CRON back a bit, so in the middle of the 4 hour script, it would be 00:00. Cool.
Then the madness started.
My shared hosting provider sent me an e-mail:
Your website has normally used to many resources after hours and we’ve let it slip until now but now during peak times you’ve used more resources than allowed and that’s why we were forced to stop the script from running.
Basically it seems like your opening lots of connections with your script instead of just running one script doing everything and that’s what is causing the extra loadon the server.

Being in the middle of a uni term, I didn’t have time to sort it out (my provider kept mailing me). No idea what to do, I started searching for better servers (with no idea what I was looking for). I had no money too. So I started a donation drive amongst the users to fund it. I got enough (thanks! you know who you are) to get a decent server going for 2-3 months (I didn’t think past that moment).
I started with Media Temple. I think was the grid service option. Took me 2 days to transfer everything and getting it up and running. At that stage, I didn’t have my own DNS nameserver, so I had to point it to the servers each time. It took about two days to resolve, so I had to “run” two websites simultaneously (the old one just said we are moving, and the new one actually worked). Also: Moving servers = dumping the db into a 4mb SQL script (through PHPMyAdmin) and uploading all the files through FTP. I knew at that point there had to be an easier way, I just didn’t know about it.
It was up on Media Temple, and I was ready to see what was going to happen. Giving up my Saturday night, I sat by my PC…
…and then the server kept crashing.
It was running out of virtual memory extremely quickly shutting the server down. It then repowered up by itself. But: Now only a few tweets were sent. So I search Twitter, checked who the last user was, found his position in the db, and ran the script again changing the index pointer (mysql_data_seek) of the mysql result set… and then it crashed again. I continued for an hour, fell asleep, and finished up the rest the next day. I can’t do it again like this, I had to find another way… within a week, while doing uni work. So, I moved back to my shared hosting. I was hoping they just won’t notice.
That week our family was off the visit my sister in the Karoo, so that was my only option.
So there I was in the middle of the Karoo, having a break around the braai, drinking some brandy and enjoying my time with the family when I realised I forgot to take out the “mysql_data_seek” line from the code…
Now, the Karoo is big and in some places you don’t have phone reception. It also gets very cold at night. It was akin to this: except night.

So I called my friend. I had 30min left before the script would start. In the nick of time, I gave him instructions to FTP in and edit out the line. SUCCESS.
It was short-lived though. When I came back I had to move servers again. This time I opted for Rackspace’s cloud service. I did more research this time of course. It scales automatically, so by definition, the memory wouldn’t run out, right? Cool. Let’s go.
Come Saturday night again, I sit and stare at the screen… Everything is going smoothly… until 15 minutes in the script just stops. FFFUUUU. There was a hard-limit on how long scripts could run on rackspace. I gave up. I had no idea how to handle this. My skills weren’t up to scratch and it was 1am. I felt hopeless, shed a tear and went to sleep.
…
The next week, I stopped the service, while I thought what to do. I tried selling Tweekly.fm to Last.fm, talking to CBS over the phone, but no luck. So I put it back on my shared hosting and made it manual. The final nail in the coffin of a fun experiment… until a few weeks later, Scott (@dordotky) started a similar service. I mailed him, talked some terms out, and we have been working together since on it. He has been a tremendous help in scaling the service since then. We don’t have much time to work on it (both doing other things full-time), but at least it is still going and running smoothly (not crashing servers).
If you want to scale today. Don’t do what I did. Ask people to help (to those that did, thanks!).
What did I learn from the whole experience?
1) Don’t use shared hosting for anything more than a simple static site. This advice might seem old now, but hey, I didn’t know of any better. Nowadays, however, there are much much more cloud services available that is easier and better and cheaper.
2) If something seems overly complicated, it probably is. While I was working on a weekly schedule, it would’ve been better to forego a week’s tweets to take time and learn and research the better options! I should’ve loaded up my own DNS server (managed or otherwise), I should’ve learned about dvcs so that I don’t have to use slow FTP to upload files, etc.
3) Most of all however. If you have no idea what you are doing, just wing it anyway.
TwimeMachine v3.0
I’ve had quite fun developing the new version of TwimeMachine. Twitter is deprecating the ‘page’ parameter, so I took a different approach. See the blog post.
Django, is still the back-end, but I used a lot of javascript/jquery for the new version. It is essentially a one-page app now. I’ve thrown in search now (because it loads the whole set of tweets). From a design perspective, it was quite an interesting exercise. I tried to keep the lag down as much as I can while the tweets load so as to not make it seem jittery. Not a great UX. At first it was quite a mission to get the ‘clock’ on the left working so that it corresponds to the opposite tweet. I eventually got a work-around going by storing the positions of each tweet, and then on scroll gets the window’s position, and checks whether a tweet is there (in the array). It is still not as fast as I would like. Storing all the positions is the bottleneck and most expensive part, and causes the millisecond “lag”. It is much better than it was though. This also meant that I couldn’t have any loading/spinning gifs, because that millisecond makes it jump.
Check it out, let me know what you think!
Kids shows and simple value propositions
My sister is visiting for a week, and bought her 9-month old daughter with. She is the cutest thing: always somehow forcing a smile on my face. As they sit and play in the living room, they sometimes have kids shows playing on the TV. I can’t stomach it at all. My brain melts at the extreme obviousness and verbosity. Some sample dialogue:
Tjif: “Hey Tjaf! Look. We are outside! Look at the sun! It’s so nice and warm.”
Tjaf: “Yes Tjif! It’s so nice and sunny. Let’s go down to grass. It will be fun!”
Tjif jumps up and down.
Tjif: “Yes yes! The grass will be warm and it will be so sunny and fun!”
—-
You get my gist. My niece is enjoying it though: very much. It makes sense. It is simple. It is straightforward. It is presented to the kids in a way that is exciting and understandable. Lots of colours, weird creatures, and stimulating.
My mind wanders (as it does), and I’m thinking: This is so simple. Imagine what a child will have to understand and get grips of to become a 21st century citizen. Then this picture pops into my head:

(Photo courtesy Robert Scoble).
If you don’t know what it is. It is Google’s new “Google Glasses”.
This is insane. So. Much. Information. And. Things. To. Consider. The. Whole. Time.
As far as I understand this is supposed to “help” with information overload? I’m still undecided, as to me, the ease of access sometimes allows more to flood in, not helping the problem at all.
It is inevitable that technology will continue to aid us in new and exciting ways in the future. The problem is, is as it becomes more ubiquitous and embedded in our lives, the most important products will be ones that we intuitively grasp and understand. Adding more features to a product inevitably adds different value propositions, which can lead to diverging uses. This inevitably means that your product’s use isn’t as clear as one simple value proposition. “What am I supposed to do here?”
This is why I believe instagram is such a success (with the recent acquisition fresh in my mind). Share beautiful photos, fast. That’s it. It’s easy to understand. A user understands each step, and they are rewarded.
Look at kids shows. They are overly simplistic. It is so obvious what is happening. Take cues from Tjif and Tjaf. If you are going to want people to use what you make amidst all the other amazing things that occupy our minds, you are going to have to make it really simple and easy to understand.
It is after all fun in the sun.
Finding my niche: Part 2 (What do I really like doing?)
So, in my previous I detailed my experience in interviewing for an internship at Facebook. After that I did some thinking and wondered what is the most I like in terms of web/tech. I knew I wasn’t quite capable of fulfilling a pure software engineering role. I am technically inclined enough, but not enough to compete with people who are only technically inclined. I’ve done development in various stacks, and I’ve coded a compiler. So, if I must, I’ll get there, but not fast enough to maintain a position as a pure software engineer.
I’ve always been fascinated by the human psyche (I used to read university psychology textbooks for fun in highschool), which is why I switched my major in 2nd year to Marketing + Socio-Informatics. This meant, I could still do programming, but also learn business skills and study the understanding of our information society’s interaction with people. I enjoyed it immensely.
Marketing felt like applied psychology. When you understand people, you know how to bring about that textbook “mutually satisfying exchange”. I could apply my love for psychology (understanding people) to a field where at that point I wouldn’t have to worry about where my eventual paycheck would come from (I still don’t quite know what psychologists do for a living). Socio-informatics also delved deeper into systems thinking, looking at the ways we solve the problems our society faces as the information and knowledge economy continue to thrive. My favourite part was learning about complexity/chaos theory and emergent behaviour.
What now?
Given what I studied, I tried looking for internships that fit that kind of niche. It is difficult, and I haven’t quite succeeded. Do I sign up as an IT analyst? Technology consumer behaviour expert? The problem is, I don’t have much to show in this area. The closest I can find is becoming a UX designer, focusing mainly on product and interaction design. Given my experience in founding two successful side-projects (Tweekly.fm and TwimeMachine) and failing at others (might do some posts about these at some stage), I’m coming closer to knowing what makes a product work (at least that is what I tell myself). My experience in marketing and socio-informatics also helps.
The problem is: coming full-circle, I don’t have much to show for visual design. I tried applying for Google’s user-experience design internship, but I didn’t make it as well. The only real example I have of visual design that was completely of my own making is vinyls.fm.
I’m learning, looking at designs and giving my critique and thoughts. Here are some posts related to UX I’ve written.
Thoughts on Google’s acquisition of Milk
UX Gripes: Hootsuite’s Refresh Button
Why aren’t more sites using the left-side of the browser?
Why Spotify and Facebook are on the right track.
The future of interfaces: Why OS X Lion looks like iOS.
Should Wikipedia’s search be improved?
Conclusion
I feel that my competitive advantage is my understanding of humans, and how information technology affects our lives. Just looking at my bedside reading, you will find books like Predictably Irrational, Connected, Crowdsourcing, The tipping point, Wikinomics and Critical Mass. I’m going from a macro point of view to learning myself more in-depth interaction design skills (protip: subscribe to ux.stackexchange.com’s newsletter) that will get me those internships I’d love to do.
Ultimately, it is difficult when applying for an internship at a large company to be a jack-of-all-trades. This sucks, especially when I want to go to learn. Maybe I should just stick to being in small startup mode for now? Before I apply for new internships, I’m going to take time to figuring out how to communicate the value I can provide.
Have you been in a similar position? I am sure there are people sitting at cross-sections of fields of interest wondering the same thing.
Finding my niche: Part 1 (Interviewing for Facebook)
I like trying new things. And sometimes that is a problem, because I spread myself too thin. This year (2012), I started my Masters degree in Socio-Informatics at Stellenbosch University with MIH Media Lab. I’m working hard doing research on information overload on online social-networks.
One of the purposes of me deciding to do a master’s is the opportunity to go do an internship somewhere. I’m aiming high, and I want to travel.
So, after a friend (@marcog) recommended I apply for Facebook, I jumped at the opportunity: he got me a reference. The whole process was quite interesting. I got quite far into the process, but ‘fell’ out later in the interview process. I originally applied for the software engineering team, but switched half-way to the user interface (front-end dev) engineering team.
How it went:
The first step I did was a time programming puzzle (1h30) through interviewstreet. I did computer science in my first year, so my algorithmic skills wasn’t where I wanted it to be, so the week before the puzzle, I did some of the old Facebook puzzles, some Google codejam puzzles, and re-studied some basic algorithmics. The puzzle had me balancing weights, which was basically a problem of recursion and using trees. Luckily, I had practiced a similar problem and aced it (in python). Although there were some problems with interviewstreet, I got through to the next round.
At that point I realised I might not be up to scratch completely considering I switched from computer science major to marketing+socio-informatics in my 2nd year.
For the second step, I had my first interview with Lily from the UIX team. It was a basic interview, testing basic technical knowledge and cultural fit. I had a great chat and answered the basic javascript/css/html questions. That went well.
The third step was a longer UX challenge that involved some algorithmic thinking with a front-end problem. I built a calendar that had to deal with overlapping events. I eventually finished it, and sent it back. It was accepted.
The fourth step was a live coding interview. I spoke to a front-end dev on Facebook, while coding live, so that he can see how I think and how I solve the problems. The first problem was an algorithmic problem. With some thinking, I managed to code it up. The second problem was to flatten a javascript array with javascript. I whipped up some recursion and solved that as well.
Alas, although I thought I did well, I didn’t make the cut. They didn’t have a “good fit for a position available”. Either that’s the truth, or that’s a euphemism for “learn some more, come back next year”.
In the end, it was a great experience. I relearned some of my CS skills I did in my first year, sharpened my javascript skills and did some interviews.
——-
The problem is: I am technically inclined, but not enough. I am product/design inclined, but not enough. If I am going to want to do an internship, I’m going to have to show expertise in a narrower field, and that is what I am struggling with. The 2nd part will detail another opportunity I had and the problem with being a jack-of-all-trades.
Thoughts on Google’s acquisition of Milk
So. Google acquihired Milk (the company co-founded by Kevin Rose) for a speculative $15 million to $30 million (team of 8 apparently). There is a few things I am taking from this.
1) There is a massive need (and continuously so) for tech talent.
2) If you are good, you will reap the rewards. Like really.
That being said, I think Kevin Rose, while being sort of like a tech star, isn’t entirely a goto person I would trust with an idea. Let me explain. Digg was great, but… we all know what happened with V4.
I also don’t think Oink was ever a great app. While the idea of rating things inside places has value, getting that right is a much, much bigger problem. There are a lot more variables to consider than just a “place” such as foursquare. Expecting users to have to deal with the effort of ranking things inside places, means you have to strip it down down down. Oink had the added ‘meta-game’ of becoming a leader in ranking certain things, unlocking functionality and some more shit. So now. A user has to think about more value propositions: “Do I rank things? What’s this leaderboard thing? Maybe I can become a leader? What’s the point? Oh, but wait, let’s rate this burger first.” Closes app. Doesn’t really come back. There is enough altruistic value for people to want to rank great things without having to bring in ‘cred’ or a ‘leaderboard’.
Another example of bad execution. You could “Love” (or Oink) a thing, thumbs it up, meh, or thumbs it down (as actions). Without pressing the buttons, would you know what each action leads to?
Kevin Rose has done some great things, let’s hope he continues with that at Google.
UX gripes: Hootsuite’s Refresh Button
So. I plan to now and again (when the vibe takes me) post a blog of UX gripes I encounter in the wild.
First up is Hootsuite’s Dashboard. I’ve been using Hootsuite as my primary Twitter client for a while. Twitter’s main site kept behaving badly, and I was already using hootsuite to check up on other Twitter activity (multiple accounts, ie @tweeklyfm and @twimemachine).
One thing that irritates me about Hootsuite is the position of the refresh button.

It’s position is there to indicate that if you press the refresh button, it will refresh the current tab (as opposed to all the tabs). I don’t use automatic updating, because I don’t like Twitter “continuing”/”updating”/”refreshing” in the background. Apps that have notifications distract me. When the apps don’t have notifications, I still choose to refresh manually, because having it refresh automatically creates a sense of urgency that I have to check it every now and then, which is equally as bad (for me).
Fitt’s Law: “…the time required to rapidly move to a target area is a function of the distance to the target and the size of the target”.
The refresh button being where it positioned means that often times you can overshoot the mouse pointer and then ‘reverse’ to the button. The mouse is usually to the right of the button when it has to start traversing.
The problem is, is that if you overshoot and, your cursor hits that left sidebar… and if you stay on it for a second or so (estimated a second), the sidebar pops open to reveal more information on the icons. Like this:

Which means, I now have to move my mouse out of the region (so the sidebar collapses) and then slooowly move back to the refresh so that I don’t overshoot again. It slows me down, is downright irritating and not well thought out.
How would I fix it?
The other buttons (“choose refresh time” and “+Add Stream”) to the right of the refresh button isn’t used a lot, not nearly comparable to refresh button. I can imagine use cases where users won’t really use the refresh as much as I do, but I can’t image it being used less than the buttons next to them. In other words, I don’t see why it should be grouped so closely to those buttons. It should be close (especially the ‘arrow’ button), but it need to be close so that you accidentally click on it. Also the grouping of icons so close to all the side-bar icons might make it more difficult on the user as well. It is kinda jumbled.
I would move the refresh button all the way to the right of the screen.

That bar there is used to shift how many tabs you want to have on your screen. The further right, the more can fit in. Again, that control element won’t be used as much as a refresh button.
The problem with shifting things to the right, is the possibility of a scroll-bar interfering if you overshoot. On Chrome and OS X, there is no scroll-bar (because Hootsuite uses a fixed layout). I am not sure if it is the same on other environments. Even if a scroll-bar interferes, it is still substantially better than a sidebar constricting access to your refresh button. Also: Why be shy of space? The above mention slider, refresh button, refresh options button and ‘add stream’ is the only control elements in that bar.
Move the refresh button to the right and make it larger.
This way, the refresh button is still on the same level of hierarchy (on a tab), it is larger, it won’t interfere with a sidebar and it isn’t jumbled amongst the other (possibly confusing) icons.
If you have any inputs, please share them. Would like to learn of other places to put it!
Vinyls.fm
So. For the past few days, I’ve been at work making something I’ve wanted (as these usually start out).
I’ve always felt a large portion of music is the visual element of it; the feeling it portrays; and the vibe it creates around it. Often times the artists portray and embody these feelings. I created a tumblr for this type of thing a while back in 2010. I’ve since stopped posting there.
Everyone seems to be doing the pinterest thing lately. So I started rekindling this idea in a board called “Tunes I like”. As you can see, it embodies the same idea. Adding a visual concept to the music.
Being an avid last.fm (see my other mashup: http://tweekly.fm) fan, I’ve always looked at ways to re-imagine it, and look at ways to improve a social music experience. So, naturally, after discovering Desandro’s awesome masonry jquery plugin, I had to try and see what your last.fm recently listened tracks would look like.
So: I created Vinyls.fm. (I’ve had the domain for a while, for another music service).
It takes your recently listened tracks and adds artist images for a nice visual feel.

So. For a minimal viable product (MVP), this is all it does. Check out my page: http://vinyls.fm/user/troegie. As is the case with new sites: it will break. So let me know if things stop working. First time loads will take long (few seconds) if you are listening to artists Vinyls.fm hasn’t seen.
To-do list post MVP:
More error displays
Fix long names.
Set a timeout on artist images (2 weeks?)
When loading for the first time, load each box separately (async) for better UX.
Then load 20 boxes, not based on amount of recent tracks (max 100 songs).
Scrolling (load more).
Further down the line:
Use whole screen estate (like pinterest)
Easy streaming straight from vinyls.fm
Follow other users
Add genre tags (I think a genre embodies a feel, so seeing your recent ‘chillwave’ tracks on one layout would look great).
Loved tracks
Further further down the line:
Real-time (constantly polling api)
Add support for other music services when people don’t scrobble (rdio, spotify, pandora, etc)
Possibly pivot: Only loved tracks and enabling commenting. Then allowing users to follow other users.
—————
Vinyls.fm is developed in Django. Stored in MongoDB. Hosted on Heroku. Prettified with Bootstrap. And front-ended by Masonry and jQuery. Fueled by a recent addiction to music dubbed ‘chillwave’.
(Now I need to get back to my research).
Of Chillwave, Instagram and digital natives.
I am a first generation digital native. I grew up and experienced the introduction of new and fascinating technologies. I remember getting my first cellphone (Nokia 3310) when I was 13. I remember when we still had 56k, and there was a service called R7-a-call. It meant after hours, you could pay max R7 for the whole time you were on the internet. This meant on Fridays, my brother and I would invent random games to keep ourselves occupied until 7pm. I remember the iPod, and all its iterations. I remember before social-networking got big, I used to frequent gaming forums and Newgrounds (my 14-year old posts are still on there). I remember seeing MySpace wondering why someone would use that? At that stage, I already created my own website, and felt quite hipster about it: “Why would I want a myspace page? You can’t even do all the customization you would want in your own website?!”.
As each new service and technology arrived, I got involved: everyone got involved. It has always fascinated me what effect it has on the individual and society. Here is something happening that is quite extraordinary, yet it is happening so fast, we don’t really have time to think about what effect it has.
Along with the rise of the internet, came more freedoms. We are a more open and tolerant generation. We see new perspectives, and we engage with people all over the world. Twitter and Facebook has given us an ambient awareness of other people, and we are discovering that we aren’t exactly that different. The internet is giving rise to a global culture: people laughing and crying about the same things. Without it sounding like a cliche, we are becoming more connected. I can more easily connect with other people, who in the past might have lived completely different ‘local’ lives.
Our ancestors fought in wars, and here we are: a generation that has been given a prerogative to be what we want to be. Look! There is the world. Go! Fulfill your dreams.
Fuck.
And then like when a moth flaps its way into your face, the realisation sets in. These freedoms are overwhelming. I have so many choices now, I have so many opportunities. What do I do?! I see these tensions and worries in so many of my peers.
They say the grass is greener on the other side, but with the internet, it is like living next to a lush golf estate, while you are sitting on dirt. We constantly see our friends supposedly enjoying themselves on social-networks. “Oh. Look at her. She seems so happy in her new job! Oh, look at him, maybe I should’ve continued studying. Oh, look at her, travelling again. Maybe I should take a gap year and go teach in English in asia?”
How do we cope? Our memories aren’t even romanticized any more. We can easily go back to and look what we did on Facebook and Twitter. It is all there, in its unemotional bits and bytes, telling you exactly what you were doing.
Maybe that’s why the recent trend (since mid 2009) in music is all lo-fi, hazy and dreamy: ie chillwave. Here is a popular song from the genre (one of my favourites as well).
(Also look other artists such Neon Indian, Sun Glitters, Blackbird Blackbird, Com Truise and Youth Lagoon. Basically, this list: http://www.last.fm/tag/chillwave/artists)
And maybe that’s one of the reasons Instagram has also taken off. Besides it’s ability for any person to create good looking photos, the filters create a different reality: not ours. It is a more exciting and different reality: its imperfect and almost more human.
We can’t look back on the past, because it is being captured as a mirror to reality and we can’t look to future, because it is changing so fast: we have to consider so many more options, events, people and life.
Maybe that’s why music like the chillwave genre and instagram’s filters are becoming more popular. We want to romanticize the now, and feel content with what is now.