Whilst Maths has a lot in common with programming, and understanding abstract concepts and applying logic to them easily is super-helpful when programming, knowing maths doesn’t mean your know or understand programming. Only when you start to learn programming can you apply the maths you know to it.

PHP is an easy starting block. It’s interpreted, so no compiling necessary. It fits with Apache very well and packages like XAMPP make setting up an environment very simple. It’s easy to code in an iterative style, simply trying new things and seeing how they work, because you can do this in 2 windows on your computer. One has code, the other your web browser.

So I learnt PHP. I was working in technical support for an ISP at the time and basically wrote tools to help me do that job. For instance one of the first things I wrote was a tool that you pasted in email headers, and it worked out what hops were made and the time delay between each one. As time went on I got more fluent with the language and wrote all sorts of things from a socket-level application that tested the average logon time to a mail server, to an AJAX application for choosing who should make the next Tea round (that would have been “The Next Big Thing” had I continued with it, and the “Wheel of Tea” would be on everyone’s lips like Facebook is now!).

And so I considered myself a programmer. I shifted most of my computer away from Windows to Linux and became a general geek. Now after 5 years or so of programming in PHP, I have just started to dabble in real programming. C is very different to PHP. I love it and hate it at the same time. OK, I mostly hate it (but I love it when a plan comes together). I was spurred on by the fact that my first ever C program (which wasn’t just a hello world I’ll have you know, but a IPv4/6 UDP listener) worked FIRST try. I’ve never written anything that worked first time before!

This turned out to be a fluke and I have encounter my fair share of error since, but I digress. The point is that C programming opens up a new world of possibility for me. Routers that run OpenWRT – I can write applications for. Long-standing daemons that seem to fall over in PHP are now trivial to control more finely. OK so it’s a lot harder to figure out how you need to structure your program and the pardigms are very different but the results are worth it.

Then I found Go. Google’s Open Source, designed for Multi-Core, Concurrent programming with automatic garbage collection and interpreter-like compile speeds, whilst remaining within 10-20% of the speed of the final program compared with C. That sounds like a win to me — if Google is to be believed. The langauge is very immature and I have read numerous articles on the web which claim it’s performance isn’t everything Google claim and only for massive (1000k+ lines of code with vastly complex dependencies) projects are compile times significantly less than gcc for C.

I can’t really comment. Most of the things Go claims to be able to do very well I have never needed, and my biggest application in Go so far is hello-world.go, which was — oh, I don’t know — 10 lines of code? that a generous guestimate. However I do see some of its other features to be very useful for the type of program I would write in it. I.e. horizontally scalable.

Horizontal Scalability is so important. Can you application perform under pressure? Of course not. Pressure is relative and every app will reach a limit. Now if you can only scale vertically, then “tu es fucked” (pardon my french). You will eventually not be able to go any higher. But if you can scale horizontally, you have no limits. And Go is desinged for concurrency and non-blocking, asynchronous communications. Using practices like that it would be easy to setup clusters of programs, scaling horizontally.

Of course programs like that are still tricky to build, but Go has the tools as part of it’s grammer to make it easier. C on the other hand is a basterd, but a supremely powerful one. PHP and other interpreted languages hang back, never going to have the performance of the compiled code (although Python can be pretty damn quick at certain tasks!), but being so much more accessible to the new programmer.

OK, so this post didn’t really go anywhere. Still I hope you found it interesting. I am learning new sides to programming all the time and am excited by new developments. Go may not be perfect (and has a rubbish name for trying to find info on using Google! Try search for “Go Program” and see if any of the results are about a program written in Go — I’ll wait — I didn’t think so…) but it has potential and show that people are tyring to think differently about how problems can be tackled and that is definitely a good thing!

So what are they and why are they so cool, and what/who the hell is “Mongo”?

Let’s deal with the what first. “Traditional” database systems are Relational, they are characterised by strictly defined tables, strong relations between tables and their ACID compliance. It simple terms that means you say:

“I want a table of users and each one will have a first name, a last name and an email address, and each of those will be a ‘text’ entry of a maximum of 255 characters”.

If at a later date you want to add more info, then you have to go back and alter your table definition, give the old rows default values and fix any coding bugs that relied on the previous structure (not that you’d ever develop such a dependant application). Now the approach in a document oriented database is that you say:

“I want a table of users”

Then you can give each one whatever data you want. you may have one user with a name and address, another with a name and phone number only, a third might have a phone number and address but no first name. All these records can co-exist! That’s pretty different and I really didn’t know whether it was a good idea. So I played with MongoDB.

MongoDB is really cool. I installed it my laptop simply and fired up the shell to play. The syntax is very javascript-like, becasue it is javascript! So we can do this.

Notice two amazing things here.

1. We never created the table! we simply call db.myFirstMongoDB... which creates the “collection” (as they are called in the document oriented world). We certainly never defined a schema!
2. We passed an object with nested data. Not just simple fields! We can use this in a much more useful way in the next example

So why might you want to do this. Consider a website with articles. Articles are written by a person, they are published on a date and the have content, tags, comments, view counts, trackbacks, and a proprietary rating system. If this where a relational database, we are looking at the following tables:

Joining all that info together is not only complex, but can be a fair amount of load on the system. As more info wants to be added by the website owners changes become more complicated and difficult. However with Mongo I can hold the article in one collection like this:

[

So that might look like a more complex entity. It is, but you can search for values in sub-documents, you can filter results on existence of certain keys, and you can pull all this info one result. Your previous 7 tables and 8 joins, just became 1 collection and no joins. guess which is quicker?

Try to pull articles with a certain tag: “balls”? In SQL you’d be doing this:

And that would just get you the list of Id’s and you’d still need to get the info for each article. In Mongo with the collection we described above, you’d do:

How much easier is that, and we’ve now got all the info, not just the “id”s! I was just amazed at how easy that is!

Of course this simplicity comes with a price, you lose the relational elements making tight relationships harder to work with. Also you some ease in aggregating things like “tags”, but MapReduce support makes this very efficient anyway.

In my next blog I’ll talk about Lithium, Mongo and how fast you can build a full blown web app with these tools.

As it turns out, I was beaten to the post by Duncan MacKensie (http://duncanmackenzie.net/Blog/put-up-a-rest-api-for-xbox-gamertag-data) who hosts a webservice to retrieve gamer data from Microsoft. I could find no details about how this service works, where the data comes from or anything! Either he has a relationship with Microsoft, or he scrapes xbox.com but either way, the data seems pretty consistent and reliable. Actually it turns out this information was right there on his website… http://www.duncanmackenzie.net/Blog/if-you-are-wondering-where-i-get-my-xbox-live-info So he gets it as part of his membership to the Xbox Community Developer Program.

However, the webservice is great, and returns XML which is fine, but I thought it would be more useful to me to have a PHP API for this data. So I wrote one which retrieves data from Duncans webservice.

Then I thought wouldn’t it be great to be able to use this dynamically in a webpage, so I wrote a service frontend which will return JSON formatted data. Then I thought wouldn’t it be useful to let other people use this as well, so I modified it and it can now cope with JSONP requests with a “_callback” parameter.

OK, so what does this all mean.

The PHP

The class is called gamertag and the usage is very simple:

which outputs something like this:

Array
(
    [Gamertag] => thechriswalker
    [AccountStatus] => Silver
    [State] => Valid
    [ProfileUrl] => http://live.xbox.com/member/thechriswalker
    [TileUrl] => http://avatar.xboxlive.com/avatar/thechriswalker/avatarpic-l.png
    [AvatarFullUrl] => http://avatar.xboxlive.com/avatar/thechriswalker/avatar-body.png
    [Country] => United Kingdom
    [Location] => Bradninch
    [Bio] =>
    [Reputation] => 58.72229
    [ReputationImageUrl] => http://live.xbox.com/xweb/lib/images/gc_repstars_external_12.gif
    [Zone] => Recreation
    [GamerScore] => 230
    [PresenceInfo] => Array
        (
            [Valid] => true
            [Info] => Last seen 12/29/09   playing Modern Warfare® 2
            [Info2] =>
            [LastSeen] => Tue, 29 Dec 2009 21:35:22 +0000
            [Online] => false
            [StatusText] => Offline
            [Title] => Modern Warfare® 2
        )

    [RecentGames] => Array
        (
            [0] => Array
                (
                    [Name] => Modern Warfare® 2
                    [TotalAchievements] => 50
                    [TotalGamerScore] => 1000
                    [Image32Url] => http://tiles.xbox.com/tiles/Z+/tF/12dsb2JgbA9ECgQJGgYfVl5UL2ljb24vMC84MDAwIAABAAAAAPhq63g=.jpg
                    [Image64Url] => http://tiles.xbox.com/tiles/CE/Vx/0Gdsb2JhbC9ECgQJGgYfVl5UL2ljb24vMC84MDAwAAAAAAAAAP9eRRc=.jpg
                    [LastPlayed] => Tue, 29 Dec 2009 21:32:52 +0000
                    [Achievements] => 9
                    [GamerScore] => 115
                    [DetailsURL] => http://live.xbox.com/en-US/profile/Achievements/ViewAchievementDetails.aspx?tid=%09%5d%3a%60m%2fl%3b%7cw&compareTo=thechriswalker
                )

            [1] => Array
                (
                    [Name] => PGR 4
                    [TotalAchievements] => 60
                    [TotalGamerScore] => 1250
                    [Image32Url] => http://tiles.xbox.com/tiles/Y1/qn/0Gdsb2JgbA9ECgR8GgMfWSlaL2ljb24vMC84MDAwIAABAAAAAP+IWnw=.jpg
                    [Image64Url] => http://tiles.xbox.com/tiles/DP/ST/12dsb2JhbC9ECgR8GgMfWSlaL2ljb24vMC84MDAwAAAAAAAAAPi89BM=.jpg
                    [LastPlayed] => Mon, 28 Dec 2009 16:59:25 +0000
                    [Achievements] => 5
                    [GamerScore] => 115
                    [DetailsURL] => http://live.xbox.com/en-US/profile/Achievements/ViewAchievementDetails.aspx?tid=%09%5d%3a%15%18*iAq%0b&compareTo=thechriswalker
                )

        )

)

So now we can easily get at the data. The source code for the class (which is not fully tested, but the basics work!) is at http://thechriswalker.net/xbox360/gamertag.source.php (NB it requires either PHP5 (for json_encode) or the PEAR Services_JSON class if you want to use the “getJSON()” method).

The JSON

PHP is well and good but what if I want to use a JSON/JSONP (JSONP is for cross-domain information requesting and is very useful for public information services, see http://en.wikipedia.org/wiki/JSON#JSONP) request, well, that can be done at http://thechriswalker.net/xbox360/?gamertag=YOUR_GAMERTAG for the straight JSON or http://thechriswalker.net/xbox360/?gamertag=YOUR_GAMERTAG&_callback=YOUR_CALLBACK_FUNCTION_NAME for JSONP.

The first returns just JSON with a content type “application/json” and the second returns a javascript function call to your callback function with the JSON object as the only parameter and a content type of “text/javascript”.

These enabled me to build a simple Google Gadget to display a Gamercard:

Tranforms have been implemented on a few browser using proprietary syntax, and the same is true of WebKit. As we shall see further down the article though, the WebKit transitions make them so much more powerful.

But what are they? They modify an element, without displacing it’s original setting within the document, which means we can move it about and the spacing doesn’t change.

Remember these will only work in WebKit based browsers, for example Safari for Mac, Chrome for Windows or Midori for Linux

An example: how about rotation.

element:hover {
  -webkit-transform:rotate(180deg);
}

Not very exciting, but combine this with a transition! (Try putting you mouse in the middle of the box for best effect)

element:hover {
  -webkit-transform:rotate(180deg);
}
element {
  -webkit-transition:-webkit-transform 1s linear
}

Much more useful! But there’s more, we can scale, we can translate (change its position on the screen) and also we can change the “center” for the transform. Usually the rotation happens from the center like above, but we could do it from closer to the left:

element:hover {
  -webkit-transform:rotate(180deg);
  -webkit-transform-origin:30% 50%;
}
element {
  -webkit-transition:-webkit-transform 1s linear;
  -webkit-transform-origin:30% 50%;
}

Or we could scale and move and rotate! (you might need to track it with you mouse to keep the animation! this is a demo after all!)

element:hover {
  -webkit-transform:rotate(180deg) scale(2) translate(-100%,0);
  -webkit-transform-origin:30% 50%;
}
element {
  -webkit-transition:-webkit-transform 1s linear;
  -webkit-transform-origin:30% 50%;
}

<div id='hey-look-at-me'> <div id='untarget'> <pre>
CSS:
#hey-look-at-me:target pre {
  outline:2px solid red;
  color:#f0f;
}
#hey-look-at-me pre {
  -webkit-transition-property:outline, color;
  -webkit-transition-duration:500ms;
}
</pre> </div> </div>

target me! untarget me!

NB: Notice how I nested the PRE to stop unwanted excessive screen movement.

So, what can we do with all this? Well, the culmination of the post, the Mac OSX style Dock menu, using no Javascript. Yes, that’s right a bulging docked menu, with no javascript.

Just so you remember, there no javascript in the demo.

Check out the Javascript free OSX Dock Menu Demo.

But what is it? Simply put, it’s a way to create a transition between to CSS states (hope that cleared everything up for you!)

Better, an example: You have two CSS rules for an element, say a link, and for it’s :hover state. like this:

Now usually, the browser would switch instantly between these two states, but with transitions we can slow it down into a smooth animation.

We can specify which propertys to transition and which to allow to change instantly. Here we can transition in the background and color properties.

Here’s two links, the they are identical except that the second has the transisions applied and if you’re using a WebKit based browser then it will fade nicely between states.

I will flick between states. Do I fade or do I flick?

Next time I’ll go into a bit more detail and show how using CSS Transforms as well we can make an OSX Dock style menu using CSS alone!

Still I found it an interesting proof-of-concept and maybe you will too. The test can be found here: Select and Drag Demo.

I don’t really have much to do with this Component any more, although it still works great! I found that the built in Auth Component is plenty powerful enough, even if it doesn’t quite work work how I would have designed it.

Anyway, here’s the component (tested with CakePHP 1.2 RC3) DarkAuthComponent. Enjoy! It’s highly commented, so hopefully you’ll be able to work out what it does and how to use it…

I.E. If I already had a select box on the page, and it had various JavaScript events hanging off it already, I wanted that to function still but I wanted the box to be prettier.

The first idea was to use CSS to just style the box. But then I realised that each browser and OS has it’s own different way of rendering the controls. So I turned to JavaScript, and the always useful jQuery library. I wrote a plugin that will immediately transform any selectboxes into prettier ones, allows icons for the options, all with valid xhtml and works completely fine with JavaScript (or the plugin) disabled. Pretty cool, eh?

Well, I put the original demo page I designed for it back online, so check out the plugin!.

If you don’t know what CakePHP is and you’ve ever created a web application, or even a website that did more than show a static page, then you should check it out. CakePHP is a web application framework designed for rapid application development using the MVC Design Pattern and with a focus on Convention over Configuration.

What this means in practical terms is that you can built an access controlled, database driven, dynamic web sites/applications in a fraction of the time that it would to start from scratch. A simple blog could be built in a matter of minutes. I could go on for hours. So I won’t, but really – if you make web apps, consider using a framework and CakePHP is excellent.

So what does this have to do with MySQL?

Well, I was recently dealing wit a table in which there is some inline JSON serialised data. This makes sense for the situation but of course if you want to query on something within the data you have to be a bit more careful. You have two options as I saw it yesterday:

• Pull all the data and parse it out outside of the database - which seems weak and inefficient.
• Use some LIKE query to pull likely candidates and then parse out of the data base - again not so good, but a bit better.

The solution!

You can use Regular Expressions in a MySQL query! To simplify the problem I faced, suppose you have a field in the database which contains JSON data like this:

And I want to find all records which contain a specific value in the “content” array (and suppose I know which records will have the “content” array by another field/method). LIKE would not be enough as it leaves to much room for error, but Regular Expressions – easy! If I want to find the value 578 then:

Would find all records with 578 as an element in an array containing only numbers. Combine this with the method for restricting the SELECT to only filed you know will contain data in the right format and you have done it!

This is but one example, and the technique seems most useful when you have a serialised data format in your database field, but could be useful for advanced searching in table that do not support “fulltext” searches.