We decided to do this über transparent and you will be able to follow us in crafting our new brain child (web site). Do you feel outed on Idas kodsmuts blog? Now is your chance for revenge. We will put all our code in a GitHub repository for you to judge, point fingers and laugh at (or just give us constructive feedback).

The plan is to do a bare minimum site and launch ASAP. It will be responsive from the get go but retina candy and all other bells and whistles will be added when the code is in drivable condition. We are not coding the designated driver style. Trial and error. You’ll prolly see some ugly road kills.

We will be using WordPress as before. We will use great stuff like jQuery, Normalize and Modernizr but apart from that we’ll build the theme from scratch. Alex have been doing wireframes in Balsamique. In the image of the wireframe above you can see some of the bells and whistles (it’s far more awesome then simple bells and whistles). Wanna know what they are? You can’t . (ok you can, next blog post maybe).

// Johan, Alex, Ida och Simon

I think that that the link should open the unsubscription web page in my browser where I must confirm my unsubscription. (I could have clicked the link by mistake so it’s nice to provide a confirmation button) When I confirm my unsubscription all I want is just a message that says whether or not I successfully got unsubscribed. What I see in a lot of newsletter-systems that you unsubscribe from is that you get a unsubscription success email. Yes, another email you don’t want. I wanted to opt out from the newsletter subscription because I didn’t want to get any more emails.

If you have any other thoughts on this topic, please add a comment!

/Simon

First off, take a look at the demo here. In writing moment the fastest known player was done in less than 25 secs!

This is how I’ve set up the files for the game:

I’ll actually not write any code in this post, I’ll just simply go through each function in the javascript (that is the core of the game) and talk about what each function does. I’ve compressed the files of the game so if you want, you can download them and take a look at the code in your editor when you continue your reading below.

The .html-file is quite straightforward. It has a container-div where the javascript put the actual gameboard, it initiates the javascript and some other stuff. I don’t think there’s any need to go into this file in detail so I’ll just leave it there. The CSS is, as always, just used for the presentation. The image is used for the backside-cover of the cards. The javascript file named memory.js is the interesting part. So let’s take a look at this file and go through each function step by step.

initialize()

The initialize function has a few default options that can be dynamically changed from wherever you initiate an object of this class. This approach by using the Object.extend-functionality on the default-options is, in my opinion, very powerful since it adds a lot of flexibility to your code.

I said I wouldn’t post any code in this post but there might be a point to show how you can change these default options. You do that where you create an object of the memory class (in this case in index.html) and this example below shows how you could change the rows and cols without altering the javascript-file itself:

var m = new Memory({
rows: 3,
cols: 4
});

So, let’s get back to the initialize function, as you can see, we first set the options for this class. As you see above, the code is dynamic so you can change how many rows and cols you want on your gameboard. Please note that there’s no functionality that checks whether the total amount of cards is an even number or not so if you change these params, please have in mind that the cols multiplied by the rows should sum up to an even number.

After that we initiate some of the other default properties of this class and then we call the initCards-function.

initCards()

In the initCards-function we create the cards for the gameboard. We use some loops to make this happen and we check if a color already has been used. It also shuffles the array that is containing the cards. When this function has done what it’s supposed to the code then goes on to the createBoard-function.

createBoard()

Here, the actual gameboard is created and as it creates each card it also adds an onclick eventlistener to each card. When a card is clicked the flipCard-function is triggered.

flipCard()

When the player clicks on a card, this function starts to run and it starts the timer (if it hasn’t already been started) and then it flips the card you clicked and check whether the player has found a pair or not. This is done with the help of the function named getCardNumberFromId().

We’ll that’s it, I’ll not go into more details so if you have any questions or feedback, please post a comment! I’d really like some feedback on the code and if you guys would have done anything differently.

/Simon

I finally solved the problem by downloading version 1.6.12 (instead of the in writing moment latest version 1.7). The Coda-people keeps a museum of older versions of Coda if you want to download them which is a great idea (why don’t everyone do this?), you can find it here: http://www.panic.com/museum/coda/older/

I really don’t know why it stopped working for me. I really like Coda as a developing tool and I know that this works for others in the latest version. Maybe I just had bad luck when upgrading to Snow Leopard I guess? Just thought that this information could be useful if this happens to someone else.

Cheers!

/Simon

One of my colleagues had already found out about them and I tested one at work a couple of days ago and all I can say is that they are helpful and quite fun. Simply said, a great tool for brainstorming and sketching!

/Simon

Jakes presentation was one of the best I’ve ever been to. His presentation was very sharp, filled with humour and great examples.

Many thanks to bwin that sponsored the event and to all the interesting people that where there and made it all be what it was.

On Jake’s website you can find more info about a talk he held at Full frontal and you can check out his slides.

/Simon

I’m going there together with three of my co-workers and you can follow our epic JavaScript adventures at http://creunaatfullfrontal.tumblr.com.

Please do!

/Ida

Ps. Will of course post a full summary of the conference once I’m safely back home again…

// Johan

This is not an in-depth article and, if you want, you can read more about it on jQuery Mobile’s official site that you find here http://jquerymobile.com/2010/10/jquery-mobile-alpha-1-released/

If you want to see the demos, take a look here: http://jquerymobile.com/demos/1.0a1/

/Simon