Dots

Last week Dan and I were sitting down at lunch and we somehow got onto the topic of creating a website that just printed dots to the screen. As usual we got a bit carried away with the idea and decided that each dot could be an object and could be stored in a database and accessed through an API so that all created dots were stored for the future.

What began as a silly idea at the lunch table soon turned into a quick fun little project. Dan wrote most of the front-end code, I wrote most of the back-end API stuff, created the database, and registered a domain pointing to my VPS. We posted about it a fair bit over the weekend and it turned out to be quite popular among a couple of hundred people.

We hit our target of a million dots in a little over 2 days, and were both amazed it happened so quickly. Especially when you consider there is little-to-no reason for anyone to visit the site at all.

Anyway, we’re making changes to bits and bobs all the time at the moment. You can see the stats for your browser as well as the total on a new page, and there might be other little bits of analysis coming up in the future if we don’t get completely bored and do something else instead.

Create some dots.

Kaboom!

After a brief conversation with a colleague I decided to write a little bookmarklet that you can use to make your days just a bit more fun.

Everyone knows that when Batman hits someone there’s a big Kaboom! or Kapow!

If you drag this Kaboom! link to your bookmarks toolbar and press it on any page you will be able to Batman punch things at the click of a button.

A man being punched by Batman

Batman punching some poor guy.

The bookmarklet is a little bit of Javascript that generates a random selection of stars using the canvas tag introduced in HTML5. That means it might not work on rubbish old browsers, but should work just fine if you’re living in the second decade of the 21st century.

Theremin-eqsue HTML5

I’ve spent the last few days thinking about theremins, the musical instrument that you play without touching. When I went to see a band called Spaceships Are Cool the other day it triggered my mind. One night I suddenly decided it would be possible to make a theremin that worked using only one hand using a different design.

I plan to make one at some point in the future, when I get the parts in one place… For now I decided that I would build my concept in the browser. I started out making it with a bunch of div tags, which was frustrating, and then I realised that I could use the <canvas> tag from HTML5 to do it.

I threw together a quick page and then began thinking about the sound. I found a page detailing generating sound in Javascript in Firefox 4 and decided to go with that. I installed Firefox 4 and then started playing around with scripting everything. I started out by picking apart Paul Irish’s harmony.js file (view that site in Google Chrome and scroll to the bottom). Then I added in the sound stuff once I had values for the cursor position.

What I ended up with was a very plain page that generates sound (in Firefox 4) with the pitch determined by the cursor position on the X axis, and the volume on the Y axis. The sample time is 50ms, and at the moment there’s a bit of an annoying click. I think I might be able to get rid of that by keeping the audio element playing at 0 volume or something like that, but that’s debugging for another day.

Anyway, if you’re viewing this on my page in Firefox 4 then you should see the finished product underneath. If you’re viewing this in a feed or on Facebook then you’ll want to go here. If you’re not using Firefox 4, or you’re not sure what browser you’re using then this probably won’t work for you and you’re probably very bored of reading this by now.

Facebook share button shows no count

Share

I was working on adding a Facebook Share button to blog posts at work and I couldn't seem to get it to display the speech bubble with the number of shares without clicking on the icon.

I did a whole bunch of searching and it turned out that it was caused by some Javascript from Facebook that only displays the count if it's more than 3. I don't really like the inconsistency of that, so I looked for a way to get it displayed even if it's zero. A guy named Patrick Kelly suggests getting your own local copy of the Facebook Javascript (FB.Share) and modifying the displayBox() function call so it shows any number. This is fine for now in that it will work, but as Patrick points out on his blog, it will potentially break if Facebook update their API, or make other changes to the underlying code.

I decided to pick apart the code and come up with a solution that doesn't involve the same issues. The fix is fairly basic. You just need to include the share button in the same way as Facebook tells you, and then insert the following Javascript after that:

<script type="text/javascript">
var buttons = document.getElementsByName('fb_share');
var count = buttons.length;
for(var i = 0; i<count; i++) {
  var data = FB.Share.getUrl(buttons[i]);
  if(FB.Share.results[data]) {
    buttons[i].fb_count = FB.Share.results[data].total_count;
  }
  FB.Share.displayBox(buttons[i], 0);
}
</script>

Hopefully that's a bit tidier than copying and editing the FB.Share file. It also means that you'll benefit from a cached version of the code being presented to the user if they've been on any other site with that button. A fairly tiny benefit, but every little helps. 🙂

Browser frustrations

Earlier on I was writing some code that inserted some text into a textarea on a webpage. After the text has been inserted I needed the cursor to be at the end of the textarea so that the user could then type more text in afterwards without any messing around.

I thought it would be a simple matter, but it turned out to be quite frustrating.

Needed for all
var t = document.getElementById('add-comment');

Gecko (Firefox, Mozilla, etc.)
t.focus();

Webkit (Chrome, Safari, etc.)
t.selectionStart(t.value.length);
t.selectionEnd(t.value.length);

Internet Explorer
t.setSelectionRange(t.value.length, t.value.length);
t.focus();

Is there some standard way of doing this that I’m unaware of? I think jQuery would be overkill for this one purpose.

Cash Gordon sucks

Just been looking at the Cash Gordon website and decided it’s not very good. Thought I’d share that with you all. 🙂

More info
I just thought I’d take a second to explain this post… The Conservative Party put up a website that I’m not going to bother linking to that had a Twitter stream of all posts with a certain hashtag. They had no filtering of content, and no sanitising either. All HTML and Javascript got rendered directly on their page.

Cue carnage. People posted massive pictures, huge text, and a few people (myself included) posted Javascript redicrects to various other sites around the Internet.

The site appears to be down now. Whether that’s on purpose by the sysadmin team in the data centre, or because of a DDoS I don’t know. I guess it won’t be coming back up in its original form though. 🙂

Google Analytics data:
Cash Gordon Google Analytics data

It was fun while it lasted.