Final year project: Web based audio player

Final year of university has arrived, and with it comes the final year project (in place of the standard dissertation other courses have).

I’ve decided to create a browser based audio player, much like Grooveshark, however the user stores all their music, and the application, on their own server. Avoiding using Flash, I want to only use the new HTML5 APIs for handling audio and web sockets.

I’m planning to be pretty open about the entire development process, and the software itself. I’ll be blogging about it on here, so this blog maybe fairly swamped with weekly (at least) updates about that.

The application will be largely free, at least until the end of development (when I have to talk to the university about who owns the rights to sell the software), so I’ll be releasing development builds as often as new features get working.

I’ll also be writing about my research into streaming audio from a server to a browser, design, and user experience.

I’ll be calling the application Sound Tiger. Not sure if that’s a permanent name, or a temporary one though.

I’ll be keeping course documents in a folder on my web site.

Changing the look of Notepad++

There seems to be a few posts about altering your web dev environment appearance floating around this week, which is odd because I was thinking that maybe it was time for an aesthetic change just a few days ago. Universe answering my questions, maybe.

The first post was one concerning fonts for programming. I tried all five that were recommended, but since I’m on a Windows 7 machine, there’s still nothing that looks better than anti-aliased Consolas.

Consolas in Notepad++, at 10pt.

You probably already have it if you have Windows 7, or have Office 2010 installed. If not, it’s a free font from Micrsoft.

Setting a default font on Notepad++ is simple, once you know how:

  1. Settings -> Style Configurator…
  2. Global Sytles -> Global override
  3. Change the font to what you will
  4. Check the ‘Enable global font’ box

A second post that intrigued me has been a Notepad++ theme, which is light-on-dark-background. It looks really good, but I’m still a little apprehensive. That’s probably because it’s a big change, and I’ll probably grow to enjoy the newness. I’ll stick with it for a while.

Testing for “Not a Number” (NaN) in Javascript

When validating some text, to check if it’s a real number or not, I tried to compare it against “NaN”. I thought that was correct since that’s what Firebug tells me is returned by parseInt ("sfdsfs", 10). However, Firebug is just covering up Number.NaN, which is what you should be comparing against.

To check if a string is numeric, use the isNaN function:

if (isNaN (parseInt (somestring, 10)) {
	// is numeric
}

Quirks With Javascript Scope and Hoisting

Whilst drowning myself in JavaScript today, I learnt a couple of things.

First was that there’s such a technique as “hoisting“. I’ve taken for granted that defining a function anywhere in my code (whilst in scope) will be available for use. Even if I’m calling a function before it’s actually been declared (converse to what you’d consider to be procedural).

workOutSum (2, 3); // returns 5

function workOutSum (n, m) {
	return (n + m);
}

That’s thanks to hoisting. Declarations of functions get bumped up to the top of the scope. The same goes to variables declared with the var construct.

Continue reading

Money Format in Javascript

I have (amongst others) two functions in most of my websites’ common.js file, which is included on each page. The .round(precision) method just rounds the number to a certain precision, but it won’t be padded up to that precision, so it’s not helpful when you’re trying to output currency.

The second function though is .moneyFormat, which will handle that situation.

i = 11.2333;

i.moneyFormat (); // returns 11.23

i = 120;
i.moneyFormat (); // 120.00

i = 56.4;
i.moneyFormat (); // 56.40

It converts the number to a string, since a float won’t store the trailing zeros.

Continue reading

Storing Addresses (in the United Kingdom) in a Database

Storing postal addresses along with a shop order, or a customer, is a pretty common place thing and often a really important piece of data. So it’s a bit weird that people seem to put so little thought into it, and the same amount of time devoted to it.

The standard way of doing it for me has been storing the lines of the address along side the item it’s associated with. There’d be two tables like this:

customer (customer_id, name, address1, address2, town, county, postcode, ..)
order (order_id, customer_id, address1, address2, town, county, postcode, ..)

Although you could get the order’s address via the customer_id, I wouldn’t consider this to be redundant data. A customer might change their address later on, but we would want the old address to stay with the order.

It is redundant in the way that the data is still duplicated, when it could be stored somewhere else and then referred to with a foreign key. So the above pseudo-table type could be changed like this:

customer (customer_id, name, address_id, ..)
order (order_id, customer_id, address_id, ..)
address (address_id, address1, address2, town, county, postcode)

Now each property in the country will have its own row, its own ID.

This means you need to change the flow of your application though. Whereas before you accessors and setters could just change the address attributes easily, you now you need to think about if you’re editing, or adding a new address. Though you can handle this by making an Address object (which you could have done before, but would have felt more hacked together).

Having an address table like this means you can hold more data about the property too; the longitude and latitude data, or image or the property. You’d have no place to put this data before, and in the case of long/lat you’d have to have looked it up each time from an external source.

The table still isn’t optimised though – you’ll notice that you’re recording “Birmingham” thousands of times, using around 10 bytes each time. Not awful, but if you’re looking to safe space then turning 20 megabytes of “Birmingham” into 10bytes might look attractive. To overcome this you could have the following:

address (address_id, line1, line2, lin3, a_town_id, a_county_id)
address_town (a_town_id, name)
address_count (a_county_id, name);

If you’re that into saving storage data though, you might consider putting the tables into their own database, and using that database across all of your websites and services. No use in collecting it hundreds of times.

Another problem which crops up is that users never enter helpful data. Instead of gathering the data from users though, use a service like PostCoder. Only ask the user for their postcode and let them select an address, rather than entering it. That way you get a somewhat standardised address format which every user will be using.

The problem with PostCoder is that they don’t have incredibly helpful data sometimes. A search on my home road returns “Janes, Hair Salon” over the first two address lines. Sometimes the business name is apart of the returned address, and other times not. I’m really not sure where to get reliable data.

Usernames and hashtag links in Twitter API

You’ll probably have noticed if you’re using the Twitter API that when you get the text of the tweet you don’t get any of the @usernames or #hashtags, or even URLs converted to actual links. It doesn’t look like a lot of the libraries (for PHP at least) bother with doing that either.

Here’s the code to get it to do that though:

<?php
$twitter_user = "shamess";

$json = file_get_contents ("http://api.twitter.com/1/statuses/user_timeline.json?screen_name=".$twitter_user."&count=3&trim_user=true");
$tweets = json_decode ($json);

foreach ($tweets as $tweet) {
 // change all the urls to links
 $tweet_text = preg_replace ("/http://(S+)/i", "<a href="http://$1">http://$1</a>", $tweet->text);
 // @usernames
 $tweet_text = preg_replace ("/@(w+)/", "<a href="http://twitter.com/$1">@$1</a>", $tweet_text);
 // #hashtags too
 $tweet_text = preg_replace ("/#(w+)/", "<a href="http://twitter.com/search?q=$1">#$1</a>", $tweet_text);

 echo "<li>".$tweet_text." - <em><a href="http://twitter.com/shamess/status/".$tweet->id_str."">".date ('l at H:i', strtotime ($tweet->created_at))."</a></em></li>n";
}

Some Notes About PHP and MVC

I want to give a better explanation on why the short form echo syntax in PHP annoys me so much.

A lot of people argue that PHP is a template language perfectly designed for injecting variables into themes. WordPress themes definitely are the best implementation of the model-view-controller architecture in PHP. You can see that just by looking at any template you have lying around, or just the example one on the codex. Functions return strings which can be injected into other pieces of strings pretty seamlessly. Even inside “The Loop” it’s still really easy to read what’s going on.

There’s no logic in any of those pages. Variables aren’t being defined and set. There’s no if(){}else{} in there because that’s all dealt with on the controller level, the way it should be. When you mix the view and controller you end up with ugly and unmaintainable code. It’s no longer MVC.

That’s why code like that I mentioned in my ranty blog post -

<td style="padding:0 5px 5px 0;">
 <input name="Gas" type="radio" id="Gas" value="0"  <?=(isset($PropertyDetail->Gas) && $PropertyDetail->Gas=="0")?"checked="checked"":""?> onclick="jQuery('#DivGasContainer').css('display','none');" checked/>No
 <input name="Gas" type="radio" id="Gas" value="1" <?=(isset($PropertyDetail->Gas) && $PropertyDetail->Gas=="1")?"checked="checked"":""?> onclick="jQuery('#DivGasContainer').css('display','block');"/>Yes
</td>

- makes me so angry. This is from a project BEA Solutions has inherited from a developer who doesn’t seem to have thought this through very well. In the code above you can’t set a default “what’s checked if $PropertyDetail->Gas isn’t set?” case without making the ternary operator even more ugly than it currently is.

This project has two folders. One called /front_script/, and one called /front_form/. The controller (and accessing the model) is handled in _script/ whilst the view is handled in form/. (Both are included by index.php, which mod_rewrites every URL.) That’s a pretty decent separation.

But when you’re doing logic – complex ternary logic at that – on the view then you’ve destroyed most the benefits of developing with MVC. Which radio button should be checked needs to be decided in _script/ – the controller – not on the view.

If You Do This, I Hate You

I know you’re trying to do MVC architecture, but you’re doing it wrong and it’s entirely unmaintainable. Longer rant later, possibly.

<td style="padding:0 5px 5px 0;">
 <input name="Gas" type="radio" id="Gas" value="0"  <?=(isset($PropertyDetail->Gas) && $PropertyDetail->Gas=="0")?"checked="checked"":""?> onclick="jQuery('#DivGasContainer').css('display','none');" checked/>No
 <input name="Gas" type="radio" id="Gas" value="1" <?=(isset($PropertyDetail->Gas) && $PropertyDetail->Gas=="1")?"checked="checked"":""?> onclick="jQuery('#DivGasContainer').css('display','block');"/>Yes
</td>