I decided to have some fun with HTML5 canvas and Javascript, so why not develop a game. Well, I’m really happy with the decision. I realized that developing a game in a language gives you the opportunity to deal with really basic logical problem solving. Dealing with the dynamics of the moving ball and collision was so much fun. I’m in the process of getting it better, specially the collisions, they need some more work. I have to give some credit to the basic logic to this tutorial, but I basically didn’t like the code so I changed it a lot to be OO. Also the collision dynamics with blocks wasn’t great for something that should grow with more levels.

If you’re interested in trying it out you can play it here. Soon I’ll have more levels designed. Now if you want to get the Javascript and modify it or add more levels feel free to fork it on GitHub. I’ll add more comments to the code so it’s easier to understand.

If you’re a web developer that is interested in understanding more about Javascript I would definitely recommend developing a game, it’s fun and it will improve your skilss.

Thank you all for the feedback on this plugin. I fixed some bugs and made it compatible with the latest version of jQuery and jQuery UI. Also now in order to give more information about the image you can use the html attribute data-.

For those first visiting here, this is a Facebook like photo tagging plugin for jQuery, it’s mainly for tagging people into pictures but it can also be used for notes.

For more information on how to implement visit the jQuery Photo Tag plugin post.

Demo and unit testing
GitHub Project Home Page – On the download section you can find some examples on how your server responses should look like.

Example:

It is/was well known that Apple is the king of UX/UI, their UI designs are awesome and you can see that UX is big deal from the moment you unpack your Apple product. But I believe that’s about to change, Apple will keep their great UX/UI, the point is that Microsoft will provide even a greater UX to their users (I never thought I would never say this words). It’s clear that Microsoft is investing a lot on the UX of their products and I believe the results are about to come, and this is why:

1. Apple real world vs. Microsoft brand new virtual world

Apple relies on the user’s knowledge of the real world to create great UI. For example since the user already saw and knows how to “use” a bookshelf, why not create a virtual one? That’s exactly what iBooks does, even the book’s pages look like a real book. The iPhone contacts app also rely on that, it’s exactly the same as the old paper address book, the user can put their finger on a letter and he will get the contacts that start with that letter.

This path has brought Apple to top of UX providers. People love their products, and most of peoples comments about are always related with how easy to use the product is. The problem that I see is that the success of relating the real world with the virtual world is about to end. An example of that is a discussion on UX Stack Exchange about the use of the floppy disk for the save icon. The main idea is why use the floppy disk to save if nobody uses it anymore, a teenager has no idea of what a floppy disk is. This show a detachment from the virtual and the real world. More and more we can see that the virtual reality is creating its own language.

Another problem is that when the decision is made to bring the real to the virtual world you create a limitation. Basic is if you create a rule for your design you’re gonna have to follow it. For example, maybe (just maybe) the next logical step for book readers are to be continues text flowing on the screen like a web site, with no pages. Since the electronic reader (iBook) looks like a book, if Apple does that the user will be confused since the user never saw that happening with a real book.

Enough about Apple, let’s talk about Microsoft. I don’t even want to talk about the UI Microsoft provided until, what I want to highlight are the next steps Microsoft is taking. With the design guideline called Metro style Microsoft is redesigning all of their interfaces. They decided to toss everything they had before and start from scratch. A new virtual language has been created, with no attachment to the reality. I believe this is the next reasonable step, the next generation is so deeply involved with the digital world that UI that are related with the reality will be considered old-fashioned.

To exemplify this I want to go back to the address book app. Windows phone’s address book doesn’t have any limitations, as you can see on the video below Microsoft is free to create something more than an address book because it doesn’t have any relation with the reality.

Watch this video on YouTube.

Another example is the semantic zoom, it’s a new concept where the zoom doesn’t actually makes things smaller. When when the user zooms out that meas that the user is looking to see the big picture, not exactly to see things smaller, here is another great example:

Watch this video on YouTube.

2. Consistency

Another great thing about the Metro style is that it’s prepared for any type of media, from phones, to tablets, to desktops and even TVs. For this reason I believe Microsoft will get a lot of the Mobile market once the Windows 8 is released. Users that have PCs will have the opportunity to have a desktop, a tablet, a video game console and a phone all with the same user interface and language.

Conclusion

I love Apple products, but Microsoft’s strategy to adopt the Metro style is going to turn the table, and maybe soon they’ll will be considered the kings of UX (calm down Apple fans, I just said maybe).

Eloquent JavaScript: A Modern Introduction to Programming

I read the whole book even though I was interested in a few chapters. I would fully recommend for almost any level programmers. It starts with the very basics of JS, but it climbs to a good advanced level.

Javascript can be fun and evil, so I strongly recommend you always seek more knowledge on this language. If you read the article about learning jquery or js and realized you’re a great jquery programmer but doesn’t know javascript yet, this is a great book to start with.

Javascript is a language created for everybody: developers, designers, both advanced and beginners. That can be good and bad at the same time, what we can say is that it has been proven effective since is so widely used. The problem for advanced programmers is that it’s oversimplified and not strongly typed, at the same time, those two problems are the solution for designers and beginners. It makes it easy to get results without understanding what exactly is happening. But there are things in Javascript that need to be explained, someone cannot live their whole life without understanding what’s happening behind the scenes, it’s just not right. That’s why I’ll try to explain a few weird things that Javascript does to make it work for everybody.

Most of the weird stuff that Javascript does are related to it’s comparability to automatically type conversion, let’s see how that works.

Automatic type conversion

What are the results of the following statements?

function test1(){
	var result = (false == 0); //true
	alert("test1: " + result);
}
function test2(){
	var result = ("10" == 10); //true
	alert("test2: " + result);
}
function test3(){
	var result = (" " == 0); //true
	alert("test3: " + result);
}

Run test1 | Run test2 | Run test3

If you’re a designer or a beginner you’re probably thinking that they are all obvious, maybe except the test number 3. But a programmer will look at this with judgment eyes, specially tests 2 and 3. What happens is that Javascript is trying to make this code work so it will automatically convert the type of the values to be able to compare them.

On test 1 you are comparing a type “Boolean” with an “Integer”, but Javascript will automatically try to convert the Boolean to an Integer to compare them, and if you didn’t know this True is a 1 and False is a 0. This also happens in most of programming language because Boolean can always be converted to 0 and 1, they actually are 0 and 1.

Test 2 is the one that might drive some hate from experienced programmers. The first value is a string, and the second one is a Integer, they shouldn’t be compared because they have different types, but JS will magically try to convert the string in to a number to compare them, if you try the same example with “hi” == 10 the result will be false.

Test 3 proves that JS is made to be simple, comparing an almost empty string with zero will result true. Logically to achieve this in some other languages you would have to trim the string (get rid of the white spaces) and then compare it with an empty string (“”), resulting in a Boolean and then compare that with zero.

What about null and undefined

Let’s run some other tests:

function test4(){
    var result = (false == null); //false
    alert("test4: " + result);
}
function test5(){
    var result = (false == undefined); //false
    alert("test5: " + result);
}
function test6(){
    var result = (null == undefined); //true
    alert("test6: " + result);
}

Run test4 | Run test5 | Run test6

As we can see null, when compared with undefined will result in true. If you don’t know the difference between them, null is when you declare a variable that has the value null, undefined means that you never declared that variable, or that it was lost along the way.

So basically JS will not automatically convert null to Boolean(false) to compare it with false. Based on our first tests that would make some sense. The same happens for undefined.

Now let’s see a trick:

function test7(){
    var a; //a is null
    if(a)
        alert("test7: passed the if");
    else
        alert("test7: didn't pass the if");
}
function test8(){
    try{
        //a is undefined
        if(a)
            alert("test8: passed the if");
        else
            alert("test8: didn't pass the if");
    }catch(e){
        alert("test8:" e);
    }
}

Run test7 | Run test8

If you run test 7 you’ll see that it wont pass the if statement, but wait a minute, we tried to automatically transform null to Boolean and it didn’t work! I know, logically an error should happen because on a strongly typed language the if statement only accepts a Boolean. As we can see, to make the language simpler JS will do more if you throw a variable to the if statement, if it’s null it will result in false, it it’s a string (not empty) or any integer greater than 0 it will result in true. Examples:

function test9(){
    var a = "Hi";
    if(a)
        alert("test9: passed the if");
    else
        alert("test9: didn't pass the if");
}
function test10(){
    var a = 25;
    if(a)
        alert("test10: passed the if");
    else
        alert("test10: didn't pass the if");
}

Run test9 | Run test10

On the other hand, test 8 will crash because you’re trying to use an undefined variable, but if null compared with undefined is true, why not do the same and let it just not pass the if. Well, I don’t know why, I just know that’s the way it is. Now, maybe you’re saying, “a” is not undefined, “a” doesn’t exist, so you have to get the type of “a”, that will give you undefined and it will work the way you want. Well, that’s what I thought, let’s try it out:

function test11(){
    try{
        //a is undefined
        if(typeof a) //type of a results in undefined
            alert("test11: passed the if");
        else
            alert("test11: didn't pass the if");
    }catch(e){
        alert("test11:" + e);
    }
}

Run test11

As you can see it passed the if, but undefined when compared to null is true, now I throw that undefined in an if statement and it passes the if! Exactly, the problem is the result of typeof is a string: “boolean”, “integer”, “undefined”… Undefined in this case is a string! And as we saw before our friend JS will pass an if statement if the string is not empty. This is how we can make an if statement that will only pass if the variable is defined and not null:

function test12(){
    try{
        var a;
        if(typeof a != "undefined" && a)
            alert("test12: passed the if");
        else
            alert("test12: didn't pass the if");
    }catch(e){
        alert("test12:" + e);
    }
}

Run test12

Conclusion

Javascript is very flexible, it’s made for novice to advanced programmers. If you’re starting to do development I would advice you to learn some other strongly typed programming language to help you learn good principles and best practices. Knowing only JS is really not good for your programming health, but once you get the main principles JS can give you some flexibility to make you life easier, that’s gonna be great if you know what you’re doing.

A Project Guide to UX Design: For user experience designers in the field or in the making on Amazon.com

Strongly recommended for anyone in the field, specially if you’re starting your career on UX or even development, it will put you on the right tracks.

The book is really detailed about every step of a project related with UX design (any software out there). It even gives you a guide on creating proposals for clients, but a lot of that knowledge can be used if you’re part of an internal team.

I mostly enjoyed Chapter 4 and 5, “Project Objectives and Approach” and “Business Requirements”, it’s a great guide for what I believe can be the hardest part of a project.

Professional ASP.NET MVC 3 on Amazon.com

I started reading this book to see what was new in MVC 3, I’ve been developing with ASP.NET MVC 2 for a while and now I finally had the opportunity to start a new project with MVC 3. Anyway, the book is really good and highly recommended for those getting their hands dirty with MVC 3.

The book goes from basic to some really advanced topics, it doesn’t only explain how to extend but also shows how the MVC 3 framework works inside.

I would spend a little more time on the unit testing chapter, I think it was a little poor on content but there’s a lot of content out there that you can go to get more info.

CSS3 for Web Designers

First of all pay attention to the title, I didn’t and I got a little bit frustrated. It’s for Web Designers, not for developers so it’s kind of basic. It’s good to get an idea of the possibilities that CSS3 can give to you.

Like all books from A Book Apart, it’s quick and basic, sometimes they just feel like a long blog post, but at least you know that it’s a well written blog post.

The author created a web to demo all the examples that he talks about on the book (http://css3exp.com/code/view/), the only problem is that it crashes in Chrome! That was really disappointing.

Anyway, it’s cheap and has good content, if you’re looking for an overview this is the book, if you want to go deep maybe you should look for another book.

Forms that Work: Designing Web Forms for Usability on Amazon.com

I really liked this book because it gave me really good insights on the best ways to build forms. I shows what to do, what not to do and why.

The structure makes it really easy to read and follow the main ideas. The book is separated in 3 parts: relationship, conversation and appearance.

One thing that I thought it was interesting was how important (talking ux, not design bs) it can be that your forms have good appearance, how much that can affect the efficiency of the form.

I’ve been meditating on the definition of the word project, and how that applies on my work days. I’m getting to the conclusion that the english definition doesn’t fit the real word, at least not on the web development field.

Wordreference

Project – an enterprise carefully planned to achieve a particular aim

I disagree on that one, part of the project usually is to find the particular aim of that project :).

Wikipedia

A project in business and science is a collaborative enterprise, frequently involving research or design, that is carefully planned to achieve a particular aim.

Let’s take the carefully planned and change it to planned only, just to make it more compatible with the majority of the projects out there. I agree with the guys from 37 signals that planning is 100% guessing, and saying that you carefully guessed how long the project will take to be done is kind of nonsense.

The free online dictionary

An undertaking requiring concerted effort.

Ok, this is good, but it still lacks on some details.

My definition

First, let’s see what we can learn about the characteristics of the majority of projects.

• Urgent – I strongly believe I never worked on a project that wasn’t urgent. This characteristic can also be spotted when the phrase “it’s for tomorrow” is used.
• Confidencial – I still don’t know why my clients still tell me their project is confidential. Every project is confidential, you can’t go telling everyone what you are developing for another client.
• Low budget – Ok, the key to successful business is earn more than you spend, so basically every normal business will have a low budget for the project, that’s just life. You don’t expect someone coming to you and saying: “I want this and I want to pay the highest amount possible”. That would be charity, not business.
• High quality – Who seeks to develop a low quality project on the web?

So, what I tried to do is get all of those characteristics and create a definition:

Project – A huge and urgent amount of confidential work load with a impossible deadline (often tomorrow), with the goal of realizing its goals and achieving them with high quality solutions and a low budget.

Ta da! If we go by this definition using the words project, urgent, confidential, high quality and low budget on the same sentence would be considered redundancy. So from now on clients, just tell me you have a project and don’t worry because I know what you mean with that.