Being a geek makes me happy :D

I came to this page and was immediately hit with a massive bout of exhaustion. That makes no sense, since I slept all night, if anything I’m over sleeping as of late. Despite that, I’m determined to explain why I’ve been so happy for the past few days.

First, my passion for working in industry, with a team of people, has totally been reignited. For some reason I found myself on Tumblr again, which I’m loving. Somehow I ended up at the official Tumblr staff account, and dawdled around people like Jacob Bijani’s tumblelog. I honestly spent an entire night, probably the best part of six hours, reading the latest ten pages. Wikipedia style, I kept ending up at random web pages he links to (and then pages those pages link to) and found masses of amazing stuff.

Ultimately that night I ended up at taking a look around tumblr offices. Gosh, how much I’d love to have a desk like that, have actual projects to work on, and people around me to do that stuff with. I mean, I’m all for being a lone programmer when I need to be, but sometimes it’s just cool to geek out of programming. I don’t really have anyone like that at the moment.

Second, I found an article on Wired (via reddit) on “hack spaces“. Pretty much a workshop for awesome people to meet up and work on stuff. Hardware tinkering, programming, tonnes of different stuff. They usually have a persistent space, like a rented room or something, where they can keep their stuff and just waste an entire day away. I hear that some are open 24/7.

Turns out it’s not just an American thing (it didn’t even start in America), but there’s a whole group of people all over the world. I found that there’s a hack space being created in Birmingham that I really want to be apart of. I’m not sure how I’m going to afford it; these things are funded by their community, with members paying a subscription. There was talk of it being about £50 a month, which I don’t think I’ll be able to make. Since I’ll be in Leicester most of the time, it might work out cheaper to just pay for meets I attend.

I’m massively excited about this.

The third thing is MCR  released a song for Watchmen. You’ve no idea how happy it makes me to hear their music again. Gerard’s voice just makes me grin like a lunatic. Honestly, standing in the middle of the street with a huge grin, lunatic. Considering it’s the thing that makes me happiest, I’ve no got much to say about it…

Really quick run down of storing and retrieving data in Firefox

Last time I quickly ran through how to add a button to your Firefox bar by making your own extension, but all it did was open a cruddy, static alert box.

In an effort to remind myself how to manage preferences, I’m going to make it so the user can decide what text should be alerted.

First we’ll be needing to add some kind of options dialogue box. For now, I’m just going to add a pane to the options window. We need to make another overlay for the preferences in that case. Create a new text file called prefs.xul. Doing that is explained pretty well in the pane creation section of the Rietta tutorial.

That website it clearly out of date though, since it says this:

If you did not know what you want to merge with, the DOM Inspector is your best tool for looking through browser code and finding element IDs.

Which is no longer true; Firefox doesn’t ship with that DOM Inspector anymore. So, I’ve really no idea how to find the DOM element ID’s I’m supposed to be merging with.

Rietta do a good job of explaining how to link preferences with the inputs too. They don’t mention how to make your stuff get laid out nicely though. I think you can use CSS like normal (using style). There’s a page on tags you can use over MDC.

Once you’ve designed your overlay in XUL, you’ll need to actually overlay it by adding it in your chrome.manifest, like you did with the browser.

overlay chrome://browser/content/preferences/preferences.xul chrome://your-addon/content/prefs.xul

Open up your options window, and you should see your pane there now.

Mine definitely needs to be prettier. (The screenshot is for the addon I'm working on, not this example.)

Mine definitely needs to be prettier. (The screenshot is for the addon I'm working on, not this example.)

When you change the data in your fields and press ‘Ok’ they’ll automatically be updated and saved. You’ll be able to see them in your about:config too.

Now we can go ahead and make our javascript file, save it in your content folder. This’ll just be like any other javascript function you’d normally write.

We need to use XPCOM in order to get and set preferences from inside a javascript file. That makes my javascript file look like this:

//  Gets the text from the store user preference and returns it
function getAndReturnText () {
  //  Installise the preferences service
  var pref = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);

  //  Message box showing the text the user entered on the options pane
  alert (pref.getCharPref ('extensions.timesink.possibleWebsites'));
}

Doesn’t do much at the moment, until we change the oncommand event we added to our button (in browser.xul). You also need to include the javascript in any overlays with you’re using it.

<script type="application/x-javascript" src="chrome://your-addon/content/mycode.js" />

After learning all that, I ended up with these tabs open, which may be more help to you.

Hacking and torrenting

The game I’m working on at the moment is a little bit of a clone of Uplink, an awesome hacker style game I played back in the day. I was too young to buy it back then (I think I was just playing the demo), and I sort of stopped playing it after a while.

I’m designing my game pretty much from memories of Uplink, but I’m a little bit stuck for inspiration on how to do a certain aspect (gosh, check me out being all secretive and careful with my words) so I decided to nab Uplink again and try see how they did it.

I decided to pirate it until I have money – I know I’m strongly against the “I’m allowed to pirate because I’m poor” argument, but I genuinely will buy the multipack of their games when I do have money next. It pains me even more than it’s a small development company and not some multi-conglomerate that I’m stealing from.

But the reason for my posting here is the comments on the torrent page. First, it’s ironic that people trying to download a hacker game don’t know how to install it. Second, it’s awesome to see that some of the people on there have already bought the game and they’re just torrenting it now for their own reasons. I’m against the “Oh, I bought a copy on CD, so now I’m allowed to bit torrent it” argument too, but it’s better than nothing. It at least shows that bit torrent sometimes does drive sales.

Pseudo-FAT in a database

I’m creating a pseudo-file system for my game, using a MySQL database as the FAT. I thought it would be fairly simple at first, but as I was about to program it, I realised that my method I planned on using is hugely expensive. Since it’s a call that’ll be used hundreds of times each time the player plays for a short period I really can’t do with it being a resource intensive feature.

ER model of directory table

ER model of directory table (I'll change this to a prettier one when I have the energy and time to play around in GIMP)

Basically, it’s just navigating directories. Here’s how they’re stored in the database, according to the ER model to the right:

harddrive_directories (directoryID, directoryName, parent)

The foreign key inside the same table with the primary key through me for a second, but I understand that now.

My problem is when a user gives me a string like “/foo/bar/alien/”, and I then have to find the ID for the directory labeled “alien”. I obviously can’t just search for directories called “alien” because there could be a “/foo/alien/” or any other combination. (Though to cut out any needless directory traversing, it would be faster to do that; see if there are any directories called “alien”, if there’s only one work backwards, which is much easier to check if it’s what I’m looking for, if there’s more than one, we don’t have much choice.)

So, I look for a root directory called “foo”. There can only be one, so that’s fairly simple. Now I have foo’s ID, I can look up all of the directories called “bar” whose parent is fooID. And so on, untill I get to a directory called “alien”.

Now I’ve said it outloud, there’s really only n lookups (where n is the number of directories in the path), which isn’t so bad. Is there a better way of doing this though?

Phase test two run down

Since I’ve done absolutely no prep for this exam, I figured I’d do so in here. Here’s the mock. Usually I’d say break down what you’re being asked to do, but it seems like they’ve already done that for us.

Right clicking your project in the Solution Explorer to add a new item.

Right clicking your project in the Solution Explorer to add a new item.

Create a website. First thing I’d do is insert the database class we need to be using. (Looks like an informal CC GNU GPL, so long as he keeps credit.) Do that by copying the text – all of it. Going back to Visual Studio, right clicking on your project, Add new item…, Class, Yes to the “Put it in the ‘App code’ folder”. Select everything, and paste the contents of that Word document for the table class (overwriting everything that was there). Rename that class to something more logical.

We also need to add the yabba database we’ve been given. Right click App_Data, Add existing item…, find and insert the database we’ve been given.

Add two fields, like it says, for the name and message. Validate inputs. I’ve no idea howwhy you’d use a function to validate two strings though, so I’m not going to.

Now, uhh… lets find how to use this database thing. I’m sure there was a class on it. Yep, here’s the presentation on it: Database and webservers. Written by Mathew Dean. Slide 13 gives you the code to connect to a database. And he talks about adding records here, on slide 2 and onwards.

Just to explain what this class actually does. When you create it, it nabs all the records and puts them into a hashed array (which has a key, and a value, rather than just an index number and a value). You add to that array like normal, using NewRecord, and then when you save it just updates the database according to that array of information.

Okay, I’m actually bored of this now.

Here’s the badly commented code for the first page.

    Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
        ' As if we're in C, variables at the top, for no reason. Regaurdless of if we need them. Which we don't.
        Dim Name As String
        Dim Message As String
        ' Make sure neither textbox is empty
        If (txtName.Text <> "" And txtMessage.Text <> "") Then
            Name = txtName.Text
            Message = txtName.Text

            'Connect to the database
            Dim MessagesDatabase As New DatabaseTable("yabba.mdb", "tblMessages")
            MessagesDatabase.NewRecord.Item("PostedBy") = Name
            MessagesDatabase.NewRecord.Item("MessageText") = Message
            MessagesDatabase.AddNewRecord()
            MessagesDatabase.SaveChanges()

            Response.Redirect("second.aspx")
        Else
            lblStatus.Text = "Something was empty. Try again."
        End If
    End Sub

Second.aspx is supposed to output all the messages. Have fun with that.

Super quick guide: Adding a button to the Firefox toolbar

My button: look how cute he is!

My button: look how cute he is!

What I’ll cover here is the steps that you should take to add a button to your Firefox toolbar, I think Thunderbird and stuff might be the same too. This isn’t a comprehensive guide, the links I link to are for that.

This is basically an article for me to dump loads of information I’ve accumulated. You won’t learn much just by only reading this article. Take a look through the links I give.

You’re basically making an extension, so you need the same file layout to start with. Here’s assuming you’re building your extension inside a folder named “extName”, call yours whatever you want though.

extName/
        chrome/
               content/
        chrome.manifest
        install.rdf

More indepth look at setting up the environment and folder structure.

Open install.rdf and paste the following:

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">
    <em:id>addonname@whatever.com</em:id>
    <em:version>0.1</em:version>
    <em:type>2</em:type>

    <!-- Target Application this extension can install into,
         with minimum and maximum supported versions. -->
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.5</em:minVersion>
        <em:maxVersion>3.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>

    <!-- Front End MetaData -->
    <em:name>Addon name</em:name>
    <em:description>Description for addon</em:description>
    <em:creator>Your name</em:creator>
    <em:homepageURL>http://yourhomepage.com</em:homepageURL>
  </Description>
</RDF>

Change whatever stuff. Don’t make the minVersion less than 1.5, because you’re blatantly lying. Lots changed in 1.5 that doesn’t act the same way now. Don’t change that weird looking id. The first id needs to be changed though. It doesn’t have to be a real email address, but it does have to be in email address format. More indepth look at install.rdf.

Firefox’s appearance is created by using XUL (“zool”). We create our own XUL documents which we tell Firefox to merge with the base template. We say stuff like “add this chunk of XML to the status bar” and it merges that data. You can overwrite sections too. We call our XUL “overlays“.

Add these lines to chrome.manifest.

content     youraddon    chrome/content/
overlay chrome://browser/content/browser.xul chrome://youraddon/content/browser.xul

That basically says “the content of youraddon is in ‘chrome/content’, which is  direct relative to this file.” Here’s a more comprehensive explaination of what it means.

Time to make some images for your button to display. You need to make two, one 24×24 pixels, and a smaller version 16×16 pixels. I stuck them in chrome/content/images/ but so long as they’re in chrome/content/ it shouldn’t matter. Then you need to make a CSS style for those buttons. This’ll do:

/*  skin/toolbar-button.css  */

#youraddon-button {
  list-style-image: url("chrome://myextension/content/btn_large.png");
}

toolbar[iconsize="small"] #youraddon-button {
  list-style-image: url("chrome://youraddon/content/btn_small.png");
}

I think it’s standard to separate your content from your skinning, but I’ve not bothered with that. It’ll probably cause me all sorts of problems later.

Create chrome/content/browser.xul:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://youraddon/content/style.css" type="text/css"?>
<overlay id="youraddonBrowser" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="youraddon-button" class="toolbarbutton-1"  label="Your addon name" oncommand="alert ('hey');" />
</toolbarpalette>
</overlay>

Pretty standard XML styling. Define it as your overlay. Tell it you want to merge with the “BrowserToolbarPalette“, and add a button. That class is required to style it like a toolbar button. The label is the mouse over text. oncommand is the Javascript that will run when you press the button. That’s another article though.

I bookmarked and shared (foxmarksxmarks is cool) all the pages I ended up having open at the end of button creation, so go ahead and look through them.

How to make sure you don’t fuck up

I’ve been doing a lot more freelance stuff lately, and I feel like I’ve learnt something new (or a lesson has been stressed a lot more unto me) with every client.

Work off-line.

This definitely feels like more trouble than it’s worth, but trust me on this. I work with WordPress addons and fixes mostly, and I’ve found it’s always best to just grab their copy of WordPress, including their plugins and database, and run that on your localhost (or where ever). That way you’re running their installation warts and all (in case they changed some of the WordPress code without noticing or something),  so you’ll even have the same bugs as them.

Although WordPress mostly looks after itself with respect to the php.ini settings, if you’re working on something that doesn’t you may even want to yoink those settings and change your localhost to those. Same for .htaccess.

This way you know when you upload your changes it’ll work exactly the same way on their server as it did yours. There’ll be no nasty surprises because they have magic quotes turned on or their pages are redirected through another.

Whilst you’re at it, back all that stuff up.

Drag and drop all their files over FTP, export their database, nab their settings. Before you even start work, archive all of that. Put it in a /clients/ClientName/ folder and leave it there.

That serves two purposes; first you’re definitely not going to break their entire website accidental. And if you do, you’ll be able to restore, hopefully before they even notice. Second, you don’t have to keep nipping into their FTP server to find out how that old file was, or to revert back to the server version. Some people have tight bandwidth options and they won’t be happy about you using all that up.

Even after you’ve finished, keep the back up.

Honestly, you’ll be thankful you have. After you’ve done the job and your fix works perfectly on the live site you should still keep all the backups you made of their data for a little while. I’m planning on keeping mine for about a month or so. You might have missed a dire circumstance that you’ve broken, and in a few weeks you’ll get an “URGENT: YOU BROKE SOMETHING” entitled email.

Remember to encrypt that backup somehow. Just a simple password when you archive the file is enough. If your laptop gets stolen with hundreds of client’s MySQL passwords and things it’ll be fairly embarrassing phoning them all up and telling them they need to change them. I’d imagine that’d be more embarrassing than telling an ex you have herpes.

Whilst we’re talking about encryption, most servers have SFTP enabled and you should take advantage of that. I should expect most FTP clients have that feature, but I use WinSCP. It’s just the added extra security you can give your customers, and covering your back if anyone is ever listening in on your connection.

Keep track of your changes.

When you’ve finished your work do a diff or something similar on the work you’ve done compared with your old backup. If you’re client comes to you and says that since you’ve done your work some abstract thing on their blog has broken, you can go through that diff and either use it as evidence that it wasn’t you that broke it, or see specifically where you went wrong, and how you can fix it.

Also, it might be comforting to the client to see what work you’ve actually done. And you can always use it as a reference later on in other projects (“how did I make the post title change a few clients back..?”).

There are some others that I’ll add later.

McDonald’s Monopoly

After two trips to McDonald’s, my and my hearty team mates have acclimated a … certain number of stickers. Just for reference, here’s the ones we need.

  • Mayfair
  • Liverpool St. Station
  • Bond Street
  • Regent Street
  • Coventry Street
  • Strand
  • Marlborough Street
  • Bow Street
  • Northumberland Avenue
  • Euston Road
  • King Cross Station
  • Old Kent Road

No colours all filled yet, and I think we have all the common ones.

Finally finished Twilight

Twilight seems to be the new Harry Potter. In the way it’s taken off at least, in no way does it match it in storytelling, writing, nor even cover art for that matter. In fact, the only way it is in any way comparable to Harry Potter is that both series exploded from relative obscurity. There the comparison ends, and I feel dirty for bringing it up.

It tells the story of Bella Swan moving from sunny Phoenix to mouldy Forks. She looks on the move with dispassion, not being able to adjust to the drop in temperature she’s so used to in the desert, but that quickly changes as Edward Cullen moves onto the scene. This could have been an ordinary boy-meets-girl love story, but as it turns out it’s not, as Bella discovers Edward’s a vampire.

Continue reading