Juri's TechBlog

Eclipse: Importing existing project: "Invalid project description"

noreply@blogger.com (Juri Strumpflohner) — Mon, 23 Jan 2012 07:50:00 +0000

Monday morning, 07:30 AM. Me, starting the computer after the weekend, executing a git pull from my repository to fetch the latest src. Then I opened my freshly installed Eclipse JavaScript version followed by a nice "Import existing project" (I pushed the project on my Mac previously) on the just fetched git repository. Fail.

Invalid project description

Damn. My first thought was a potential incompatibility, given that the project was created on my Mac previously, and I just tried to import it on Win7.
So if you should encounter a similar problem try the following. Assume you pulled the repository into C:\gitrepo\mygit. Then

create another directory, for instance C:\eclipsewrkspc\mygit
start Eclipse to use that directory as its workspace.
use the "Import existing project" functionality and point to the git directory
Uncheck the "copy into workspace" flag.

That approach should work, at least it did for me.

Don't Fall into the IEnumerable Trap

noreply@blogger.com (Juri Strumpflohner) — Tue, 17 Jan 2012 07:53:00 +0000

Recently I upgraded some code of our company-internal class library and observed a plausible but still tricky problem. See yourself.

In a class deep inside the class library ( ;)) there was a method which looked similar to the following:

public IEnumerable<SomeObject> GetAllValidations()
{
   foreach...
       yield return new ValidationObject(...);
}

Then, inside another method in some other class there was the following code:

public void HandleValidationErrors(IEnumerable<ValidationObject> validationObjects)
{
    IDictionary<ValidationObject, IList<ValidationErrors>> cache = new Dictionary<ValidationObject, IList<ValidationErrors>>();

    foreach(var validationObj in validationObjects)
    {
        cache.Add(validationObj, validationObj.ValidationErrors.ToList());
    }

    ActivateValidatorsAccordingToValidationErrors(validationObjects, cache);

    //snip snip: If cache not empty, some validation objects haven't been treated/found
}


public void ActivateValidatorsAccordingToValidationErrors(IEnumerable<ValidationObject> validationObjects, IDictionary<ValidationObject, IList<ValidationErrors>> cache)
{
    foreach(var valObj in validationObjects)
    {
        var validator = GetValidatorByValidationObj(valObj);
        if(validator != null)
        {
            //activate validator
            //remove ValidationObj from cache
        }
    }
}

Now guess what, line 24 gave me an exception when I wanted to access the dictionary with the validationObj as key, telling me that the key was not present. I debugged the code and the obj was present!? My first thought: did someone override the Equals()??...but that wasn't the case.

Then I immediately saw the problem when looking at the method signature. Did you get it? IEnumerable<T>. Did you hear about the "lazy-evaluation" of IEnumerables? I did, fortunately. The problem here was that when the code entered the HandleValidationErrors(...) method, passing in the IEnumerable, that latter has not been evaluated so far. And then I had the situation of a possible multiple enumeration (Resharper tells you that, so don't ignore it!). So what does that mean? When the IEnumerable was accessed 1st in line 5, the method GetAllValidations() was called, actually executing the enumeration with new instances of type ValidationObject. So far so good. Then when the loop in line 18 was executed, the same happened, returning another, new instance of a ValidationObject, basically another IEnumerable<ValidationObject> than I previously added to the cache variable. And here we are, now the exception when accessing the dictionary is quite obvious, isn't it?

Obviously this was a silly mistake and fixing it was quite easy by inserting somewhere (I did it in the first possible place to keep other devs from falling in this trap as well ;)) a line like

var theList = theValidationObjectEnumeration.ToList<ValidationObject>()

which "materializes" the list and prevents the multiple enumeration problem.

I'm writing this post because such bugs can become quite nasty to find, especially if you don't know the fact about lazy-loading of IEnumerable<T> and if the method returning the IEnumerable was written by some other dev. So watch out!

Help, Ubuntu 11.10 won't boot!!

noreply@blogger.com (Juri Strumpflohner) — Sun, 15 Jan 2012 12:25:00 +0000

Today I tried to start the new Ubuntu 11.10 from the live CD on the old desktop computer of my girlfriend. Her computer is quite slow and the old WinXP installation broken. So why not take the occasion and try Ubuntu :).

I was impressed by the new Unity interface presented in the online live Ubuntu tour. Much cleaner, more modern UI, actually there are many similarities to OSX. Anyway, I created an install CD and booted the computer from that. On the boot option I chose to first just run Ubuntu from the live CD. Everything seemed fine, but then, black screen.
As usual when you use a Linux system, ask Google. And look there, a nice forum entry with some helpful instructions (thx to the community).

Basically the problem was to change the kernel boot options from quiet splash to quiet splash nomodeset. What is this "nomodeset"?

nomodeset
The newest kernels have moved the video mode setting into the kernel. So all the programming of the hardware specific clock rates and registers on the video card happen in the kernel rather than in the X driver when the X server starts.. This makes it possible to have high resolution nice looking splash (boot) screens and flicker free transitions from boot splash to login screen. Unfortunately, on some cards this doesnt work properly and you end up with a black screen. Adding the nomodeset parameter instructs the kernel to not load video drivers and use BIOS modes instead until X is loaded.

So in order to be able to install Ubuntu I booted the system from the live CD. At startup make sure you press the down-key multiple times to enter the classic live CD menu with the options for either "just run" the system, install it or perform some memory and disk checks. At the same time, when pressing F6, there is the possibility to check the "nomodeset" boot option. Then try to run the system, it should work.

Then after having installed Ubuntu you have to do a restart. Again, press the down-key or End key to enter the startup options. Select the desired one (not recovery) and press "e" to edit the boot option as follows:

linux /boot/vmlinuz-....generic root=UUID=... ro quite splash nomodeset

Then press F10 and the system should boot.

So once you've booted the installed version you need to permanently configure the boot mode. The best way is to open a terminal window and type
sudo gedit /etc/default/grub
and edit the GRUB_CMDLINE_LINUX_DEFAULT as follows:

GRUB_DEFAULT=0
GRUB_CMDLINE_LINUX_DEFAULT="quiet splash nomodeset"

Save the file and execute a sudo upgrade-grub. Then your computer should boot normally next time. Here's a link I found quite useful of some hints to perform after installing Ubuntu: http://www.techdrivein.com/2011/10/15-things-i-did-after-installing-new.html.

2011 Retrospective and a New Look

noreply@blogger.com (Juri Strumpflohner) — Wed, 04 Jan 2012 23:35:00 +0000

I know it's a bit late for a 2011 year recap, but I didn't manage to write one earlier. Actually, I just noted that I didn't publish one last year at all. Anyway, here just a couple of lines to 2011, the new look of this blog and maybe some outlook to 2012?

Year 2011 - A Retrospective

2011 was a very successful and interesting year. In March I finally concluded my university studies. It was an interesting, but at the same time very effortful period. After that I returned to work full-time with lots of interesting new challenges to face. Unfortunately my blog didn't (yet) reflect that much about these changes.
Beside computer science related topics I managed to enter the Italian National team of Yoseikan Budo (my club) and successfully concluded the exams for the 2. Dan Yoseikan Budo.
And last but not least, with the start of 2012 I moved in together with my girlfriend in our first common flat.

A Facelift to this Blog

Yep, once again I decided to give this blog a small facelift. The major changes consist in making the entry page more attractive, while the detail post pages remained mostly the same. The entry page now consists in small snippets of the 6 most recent posts with each posts having a small initial intro part describing its content.
Basically, the main objective was to just visualize only the most common and most important information while still giving the blog an attractive "face". Now, obviously I'm not a designer, I'm a software dev. But still I like to play around with CSS as IMHO the design of a web page/application is a major important part. Making such changes to my blog is always again a good learning lesson. But I'm open for suggestions and improvements.
Note that there are still some fine-tuning improvements coming over the following weeks as I didn't yet manage to include them right now.

And for 2012?

More blogging, more about .Net, more Android development, and finally more about web development especially about JavaScript. Let's see whether I manage it :). And obviously I'm looking forward for a year recap 2012 ;).
So I wish you all a good start in 2012 and much success.

Writing IoC Supported Integration Tests using AutoFac

noreply@blogger.com (Juri Strumpflohner) — Mon, 12 Dec 2011 13:39:00 +0000

Using a dependency injection framework can greatly facilitate your code's testability in that you don't have any "glue" code for managing a classes' dependency that needs to be mocked (if even possible) when writing unit tests. But what about when writing integration tests? In such case you'd probably want to use your IoC container's configuration for resolving types in order to also verify the proper integration of your components, frankly your dependency injection configuration, right?

With AutoFac it is actually quite simple. What your integration test needs to do is to himself create the ContainerBuilder() and accordingly register the dependencies. What you should do is the following. Assume you have a Visual Studio project that encapsulates your business logic called "BusinessLogic". Then the best strategy is to create a so-called Autofac module per project (and hence dll) to configure the dependencies within that specific project. This is done by extending the abstract class Autofac.Module like

public class BusinessLogicModule : Module
{
    protected override void Load(ContainerBuilder builder)
    {
        //register other modules/dependencies here
    }
}

When you now want to write a test for the BusinessLogic project, you might create a BusinessLogic.IntegrationTests project, adding the project under test as a reference.
A possible approach to this could be the following: create ageneric class for instantiating the Autofac IoC container with the BusinessLogicModule created before. Let's call this class "IoCSupportedTest":

using Autofac;
using Autofac.Core;

namespace BusinessLogic.IntegrationTest.Utils
{
    public class IoCSupportedTest<TModule> where TModule : IModule, new()
    {
        private IContainer container;

        public IoCSupportedTest()
        {
            var builder = new ContainerBuilder();

            builder.RegisterModule(new TModule());

            container = builder.Build();
        }

        protected TEntity Resolve<TEntity>()
        {
            return container.Resolve<TEntity>();
        }

        protected void ShutdownIoC()
        {
            container.Dispose();
        }
    }
}

A specific test case might then look as follows:

[TestClass]
public class UserRepositoryTest : IoCSupportedTest<BusinessLogicModule>
{
    private IUserRepository userRepo;

    [TestInitialize]
    public void Setup()
    {
        this.userRepo = Resolve<IUserRepository>();
    }

    [TestCleanup]
    public void TearDown()
    {
        userRepo = null;
        ShutdownIoC();
    }

    //the tests
}

Exploring JavaScript: Scope Pollution when instantiating JavaScript Objects

noreply@blogger.com (Juri Strumpflohner) — Wed, 07 Dec 2011 10:15:00 +0000

John Resig has written a very interesting article (I'm not able to find just now) on how the current scope might get polluted if you're accidentally invoking a function intended as an object constructor function without using the "new" keyword in front. Here's a simple example that illustrates the issue.

Basically consider you have the following, extremely simple code:

var Person = function(first, second){
   this.name = first + " " + second;
};

//using it somewhere
var name = "Juri";
var aPerson = new Person("Peter", "Oberhofer"); //invoking the constructor function

document.write(name);

Now as expected you'd assume "Juri" to be printed as you don't do anything else than printing the current variable name.

Now what happens if you forget to use the "new" keyword like

var name="Juri";
var aPerson = Person("Peter", "Oberhofer"); //attention, no "new" keyword

document.write(name);

What would be the result? Can you guess it? It would be: Peter Oberhofer. Strange, right? The problem is that given the fact you didn't specify the "new" keyword the function Person wrote on the global namespace when executing this.name = .... The declaration of var name = "Juri" is in this case on the global namespace as well, hence without specifying the new keyword you overwrite the previous declaration, resulting in Peter Oberhofer to be printed out.

You can check out a live sample here: http://jsbin.com/ozawep/4/edit#javascript,live.

Saying Goodbye to University

noreply@blogger.com (Juri Strumpflohner) — Tue, 06 Dec 2011 21:45:00 +0000

After my thesis presentation in march this year, my university career now ended officially with the degree ceremony last saturday. I remember when I first inscribed myself about 5 years ago, at the Free University of Bolzano at the faculty of computer science. The faculty (same as the university itself) is quite young. It actually celebrated its 10 year birthday a couple of days ago. And this was reflected also on the number of students, 5 years ago, when I first entered the Analysis class with about 70 people in total. Nothing compared to the really big universities. And after the 1st semester the number even diminished until, about a year later, we were a small, constant group of about 20 to 30 people in total.

Three years later I successfully concluded the Bachelor in Applied Computer Science and decided to start working. I was interested in applying the learned stuff and collect some experiences. But still, there was always the desire to continue and so, after working full-time for a year I was given the opportunity by my employer to switch to part time and to inscribe in the Master of Computer Science..always at the FUB. It was though, really tough. When you sit at the university for studying in the morning and then in the afternoon you go at work, doing your job there, then, in the evening, you need to catch up with what your study mates did while you were at work. Thats challenging and most importantly, you need to be well organized. Nevertheless, I never neglected my girlfriend or my hobbies and thats a major important thing. This is what keeps your head above water ;).

I did it!!

Now, about 3 years later I'm here, just concluded my MSc studies getting 110/110 points (which I'd never been imagined) and having a good work place offering some interesting challenges.
Looking back, I would always again inscribe me at the Free University of Bolzano if I'd have to. A lot of people are somehow often looking at the university in a devaluating manner, mainly given its low number of students compared to other, more established universities. But that's not a disadvantage, differently, its an advantage in my eyes as you have direct contact to the professors which gives you the unique possibility to dive into interesting discussions. And the number of students is growing from year to year. Another major important fact is the internationality of the university in terms of its language model. Although being in a region where there are nearly just italian and german native speakers, the official teaching language of the computer science faculty is English. Even if this might sound pretty irrelevant, it is definitely not. English is the computer science language and it is so extremely useful in your professional career as I just experienced recently when we had a phone conference with a guy in America, reviewing parts of our code base.

Large-scale JavaScript Application Architecture

noreply@blogger.com (Juri Strumpflohner) — Mon, 21 Nov 2011 13:03:00 +0000

JavaScript programming has evolved a lot over the past years and has somehow revolutionized the way you develop on the web. While many initially just used it as a scripting language to quickly hack in some dynamic behavior into traditional websites, it starts now to be used much more like a fully capable programming language (mainly also due to many emerging JavaScript libraries and more capable browsers).

Despite this, the key to successful JavaScript development - as I've already written in a prior post and which you might have been able to read between the lines of some other ones - is structure. Without structure you're lost.., your code gets messy, a maintenance nightmare, uncontrollable, rigid ... scripting code basically. You might not take care about all this in small projects, but it becomes crucial as your project grows and gets rather big.
Take a look at the following presentation by Addy Osmani about Large-scale JavaScript Application Architecture which in my opinion nicely presents the major important points.

Some Usability Thoughts for the Weekend...

noreply@blogger.com (Juri Strumpflohner) — Fri, 18 Nov 2011 11:16:00 +0000

A couple of days ago I got the order to write a very simple program that would take a bunch of XML input files with the task to elaborate them in terms of grouping them according to some identifier and then to output the result (grouped per directory) in a more user friendly and readable way. While the prog is stupidly simple there are still some potential pitfall one might not realize immediately.

The objective was to give the tool to one of our customers in order to facilitate their work, hence: pay attention to usability factors.
I started with a simple GUI:

So far, nothing special. There is a source folder textbox and a destination folder. They're self-explanatory I guess. What the program should do (for comfortability reasons) is to create the destination folder if it doesn't exist and if it exists already, delete all its content, as it might originate from a previous elaboration.

A naive approach would be to do

if(!Directory.Exists(destinationDir))
{
   Directory.CreateDirectory(destinationDir);
}
else
{
   //delete all files and directories in destinationDir
}

But attention! What might a "dummy" user do what an "expert" user might not? Probably enter something like this:
Source: C:\sourceFileDirectory
Destination: C:\sourceFileDirectory
Bad: You delete all of the source files.

Or even worse:
Source: C:\sourceFileDirectory
Destination: C:\
Bad: You wipe his C drive :D.

These are exactly the problems that are often overlooked (as they might seem obvious) and which then cause enormous damage. Therefore a possible solution might be..

if(!Directory.Exists(destinationDir))
{
   Directory.CreateDirectory(destinationDir);
}
else
{
   //create an output directory inside the specified 
   destinationDir = Path.Combine(destinationDir, "Out");

   if(!Directory.Exists(destinationDir))
   {
      //create it
   }
   else
   {
      //Ask the user about wiping the content of the output directory
      //Do it if confirmed
   }
}

Have a nice weekend :).

Use The "var" Keyword to Have More Maintainable Tests!?

noreply@blogger.com (Juri Strumpflohner) — Fri, 18 Nov 2011 07:32:00 +0000

I have to admit that initially when the "var" keyword has been introduced in C# I was quite precautious in using it. It does reduce code readability, I thought. In the end I'd say it's pretty much a matter of style and preferences, but not only, it even might help you in avoiding to break your code when you make changes, thus leading to a more maintainable code base.

I recently had the following scenario in a lot of tests where I verified the correct validation of my entities

public void TestSomething()
{
   //Arrange
   ...

   //Act
   IList<ValidationError> result = validationProvider.Validate(entity);

   //Assert
   Assert.AreEqual(3, result.Count(), "There should be 3 validation errors");
}

However, with the new changes to our architecture I'm currently working on, I try to adapt the validation to the one proposed by ASP.net MVC and Entity Framework, still allowing to write validation rules in the same way we were accustomed so far. This led to a couple of breaking changes however, as I took the opportunity to make some improvements. As a result the return type of the validation adapter wasn't an IList any more, but instead IEnumerable<ValidationResult>. Note the generic type of the list changed as well. As a consequence the tests didn't compile any more and I had to manually fix them all (although it was just a matter of search&replace ;)).

Instead, if I had written those tests by not explicitly defining the collection type but rather to just declare them using the var keyword, my tests would have continued to work without any problems.

public void TestSomething()
{
   //Arrange
   ...

   //Act
   var result = validationProvider.Validate(entity);
   ...
}

AutoFac: ASP.net WebForms UserControl Dependencies Only Available At Page_Load Event

noreply@blogger.com (Juri Strumpflohner) — Tue, 15 Nov 2011 11:15:00 +0000

I'm currently adapting the architecture of one of our old but core projects, still written in ASP.net WebForms and with our custom ORM mapper. Since we're currently starting to release a new version of the project, we decided took the opportunity to also exchange our custom ORM mapper with Entity Framework and at the same time I introduced AutoFac for providing dependency injection. It turned out however, that with the default ASP.net WebForms integration, dependencies of a Page's child control (i.e. a UserControl) are only available in the Page_Load event of the UserControl rather than already in its OnInit.

The official AutoFac page has a nice article describing the integration into ASP.net Webforms: *click*. That worked out just fine with one exception. Normally our ASP.net pages contain very little logic. They're just aggregating a series of UserControls. As such I noticed that the dependencies inside those child UserControls are only available starting from the UserControl's Page_Load event whereas it would often be handy to have them in the OnInit event already.

public class MyUserControl : UserControl
{
    public IServiceClass ServiceClass { get; set; }

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        //ServiceClass.DoSomething(); //<< would not work as ServiceClass is at this point
    }

    protected void Page_Load(object sender, EventArgs e)
    {
       ServiceClass.DoSomething(); //works just fine
    }
}

Note, the dependencies are autowired here over the public properties.
To avoid this, I used a BaseClass DependencyResolvingUserControl

public class DependencyResolvingUserControl : UserControl
{
    protected override void OnInit(EventArgs e)
    {
        var cpa = (IContainerProviderAccessor)HttpContext.Current.ApplicationInstance;
        var cp = cpa.ContainerProvider;
        cp.RequestLifetime.InjectProperties(this);

        base.OnInit(e);
    }
}

And the according custom UserControl does now inherit from it

public class MyUserControl : DependencyResolvingUserControl
{
    public IServiceClass ServiceClass { get; set; }

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        ServiceClass.DoSomething(); //works
    }

    protected void Page_Load(object sender, EventArgs e)
    {
       ServiceClass.DoSomething(); //works as well
    }
}

jQuery Validation: Add a Required Field Marker

noreply@blogger.com (Juri Strumpflohner) — Fri, 04 Nov 2011 07:22:00 +0000

When you use jQuery for validating input fields you might want to automatically (based on the validators) decorate your according field labels or input fields with appropriate markers that indicate required fields. This is common practice in web UIs and quite handy and intuitive for the user. Obviously you'd like this to happen on an automated basis rather than manually adding those markers which is more error prone. Using jQuery this is quite simple actually.

The idea is to do this process of adding markers after the validation has been hooked on your form. There are basically two possibilities:
(a) if you added your jQuery validators by directly annotating your input fields, then you might use a jQuery selector to find all those fields and append the marker appropriately (assume all your required fields have a class "required"):

$(".required").append("(*)");

Alternatively, if (b) you have your jQuery validators as a set of rules, in the form

{
    rules: {
        firstname: {
            required: true,
            rangelength: [2,5]
        },
        ...
    }
    ...
}

..then you can iterate over those rules and process them directly:

for(var propName in validationRules.rules){
  if(validationRules.rules[propName].required !== undefined){
    $("(*)").insertAfter($("*[name=" + propName + "]", $("form")));
  }
}

Here's a live demo: http://jsbin.com/ojuwuy/2/edit#javascript,live. Easy, huh?

Don't Underestimate the Trouble Caused by URLs in Emails

noreply@blogger.com (Juri Strumpflohner) — Thu, 03 Nov 2011 13:38:00 +0000

At a first glance, the title might seem strange, but wait. The company I'm working at creates e-government solutions, so the target audience are the citizens, from the young, very computer-literate ones to the more elderly (and often, but not always) less computer-literate ones :). Recently we created an ID-Management system for providing a single-signon system for all of our services. That specific ID-Man system does send emails to the citizen on an automated basis, i.e. when resetting the password and those emails contain links which point back to our ID-Man web application. I'd never have thought how much trouble those URLs might cause us.

The point is that the links have the following form:

http://ouridmanserver.it/changepwd.aspx?lang=de&p=JURKDKHS988123

The token is unique and identifies a user's previous request to change his password. Now, initially we sent those emails as plain text mails. This turned out to create several problems in having our URL broken on several lines as there is a limit at 70 or 80 chars (don't remember exactly). As a consequence, the (less computer-literate guys) weren't able to handle the link properly as their email client did not account for the line break and so our server received just a part of the link and was unable to process the request.

Seeing those problems pop up quite often, we decided to go for the quickest possible solution and turned our plain text mails in to HTML mails, in this way properly encoding those URLs within the email body. This did actually eliminate the issue of potentially having broken links.
Then, a couple of days ago I had an error log in my inbox from a user with the following URL:

http://ouridmanserver.it/changepwd.aspx?lang=de?p=JURKDKHS988123

You see the issue?? The query string is not correct as there is a "?" instead of a "&" between the parameters. I immediately thought of a bug in our system but that wasn't the case. I had two different cases that turned out to have exactly the same issue. Both of them were using the same webmail client from the same provider. Ergo: Email clients are crappy.

To definitely solve that problem I decided to convert that URL like

http://ouridmanserver.it/p/de/JURKDKHS988123

That reduced the size of the url and removed any special characters like "?" and "&". And that seems to have solved all those weird url issues (at least so far).

If I find some time I quickly outline how I achieved such routing in an ASP.net 3.5 webapp without actually touching the existing ASPX logic (as backwards compatibility is a must in this scenario).

Exploring JavaScript: Iterating Over a Collection of Items

noreply@blogger.com (Juri Strumpflohner) — Thu, 27 Oct 2011 09:16:00 +0000

If I manage to do it, I'd like to write a series of introductory posts about programming in JavaScript as when listening to the latest hypes it is going to play a major role in programming the web but even desktop or mobile apps (see Microsoft's latest moves regarding Silverlight, HTML5 and their new Win8 OS). Google has always been an early promoter of heavy, rich-client JavaScript applications and as a recent example I'd also like to mention Trello, a quite new app from Fog Creek, which I started to use for organizing my work/projects and which is a JavaScript app that will blow you away ;).

So here the first post in the series "exploring JavaScript" (I'll also tag them as such so you can easily keep track). Please do not pay attention at the order of how posts arrive related to the concepts in JavaScript. So I might write now about iterating over collections and at a later point about potential problems in using variable declarations, scoping or data types :). I'll write them as I encounter those problems.

So this post outlines some possibilities of iterating over collections of items.
Using the standard for-loop
Similarly as in other language, there is the normal for-loop.

Live Code

var list = ["entry1", "entry2", "entry3"];
for(var i=0; i<list.length; i++){
    $("#out").append($("<div>" + i + " - " + list[i] + "</div>"));    
}

Using the "foreach"
Note, the foreach loop iterates over the properties of a given object which might be slightly different than in other programming languages such as C# or Java.

Live Code

var list = ["entry1", "entry2", "entry3"];
for(var entry in list){
    $("#out").append($("<div>" + entry + " - " + list[entry] + "</div>"));    
}

The usage of the for-in loop for arrays is highly discouraged, however. See this Stackoverflow post:
http://stackoverflow.com/questions/500504/javascript-for-in-with-arrays

Using jQuery.each(...)
Beside the normal JavaScript build-in functions, one can also use the jQuery.each which does not only allow to iterate over a collection of DOM elements captured by the specified selector, but also through JavaScript collections.

Live Code

var list = ["entry1", "entry2", "entry3"];
$.each(list, function(index, value){
    $("#out").append($("<div>" + index + " - " + value + "</div>"));
});

...or alternatively like...

Live Code

var list = ["entry1", "entry2", "entry3"];
$(list).each(function(index, value){
    $("#out").append($("<div>" + index + " - " + value + "</div>"));
});

My Tumblr Stream: A Developer's Work Log

noreply@blogger.com (Juri Strumpflohner) — Wed, 26 Oct 2011 06:02:00 +0000

You may have noted the diminishing frequency of posts being published on my blog here. Well, sadly I'm currently quite busy at work as well as privately. I'm currently relocating (out of my parent's home :)) as now also my girlfriend finally graduated about a week ago in MSc in Global Management and Markets - Major in Entrepreneurship (with 110/110 - congrats btw :)). And then there is Yoseikan, where I have to prepare myself for the upcoming fighting season.
Anyway, don't worry, there is a huge amount of posts in the draft state, waiting to be published. The point is that on this blog here I'd like to publish more elaborated, well thought articles that cover some interesting topic. This implies that does posts usually take a bit longer to write down (-> hence the long draft list).

Often however, I find interesting stuff that's worth sharing which might be short comments, videos or even just links to nice blog articles I encounter while working/browsing the web. Twitter is an option but its char limit is not always suitable. As a result I started to experiment with a parallel Tumblr blog to this one here. Tumblr's philosophy exactly matches this need for sharing short posts, links or videos.

Tumblr lets you effortlessly share anything. Post text, photos, quotes, links, music, and videos, from your browser, phone, desktop, email, or wherever you happen to be. You can customize everything, from colors, to your theme's HTML. And we're here to help!

Let's see whether Tumblr works for me. So, you can follow me on

This blog here ;)
Twitter
You will get my personal status updates, links, Tumblr posts as well as Blog posts published here.
Tumblr
This is the new blog where I'd like to share more quick and concise infos like links, videos, short comments, code pieces etc.
Facebook: Juri Strumpflohner's TechBlog Fanpage
Similar as Twitter, an aggregation of my blog posts as well as those from Tumblr. This is just for convenience if you'd like to have them nicely integrated into your daily Facebook news stream. (Just click "Like" on the Facebook box in the sidebar of this blog).
Google+ Public Stream
Well, yes. You might search and follow me there as well but sincerely I don't use it that much as other networks, yet.

Enjoy.

What? Model-View-Controller in JavaScript?

noreply@blogger.com (Juri Strumpflohner) — Mon, 10 Oct 2011 13:32:00 +0000

At work I'm currently working on a new web architecture composed of a rich client written in JavaScript and an ASP.net MVC server-side backend exposing a REST-like JSON api. An important part of that work is to also train developers on that, quite new way of programming web-apps.

And actually, devs are quite surprised when I mention the term MVC and JavaScript in one sentence?

"Ok...I understand the MVC concept now and the benefits are clear..but JavaScript?"

I fully understand their doubts or astonishment. That's the problem with JavaScript and web developers. For many years (and even now) JavaScript has been purely used as a scripting language, for quickly hacking in some dynamic behavior in your web application that was mainly rendered by some "fat" (IIS ASP.net / Apache JBoss) server. How did that look like??

<html>
<head>
<script type="text/javascript">
function performAction(){
   var dropdown = document.getElementById("myDropdown");
   if(dropdown.selectedIndex == .....)
       document.getElementById("theDiv").style.display = "none";
   ...
}
</script>
</head>
<body>
   ...
   <input type="button" value="doAction" onClick="performAction()"/>
</body>
</html>

Something like this, right? I'm speaking out of experience. That's JavaScript used as a "scripting language", fully procedural, hooked in globally on the window object far away from any best practice or object oriented approach (nor to speak about testability).

Enough, let's talk about MVC.

The "messy", structureless codebase

function showOutput(){
  var name = "Juri";
  var age = 26;
  
  var output = "Hi, my name is " + name + " and I'm " + age + " years old.";
  $(".output").html(output);
}

and the according HTML page

http://jsbin.com/oyazib/3/edit

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="view">
    <strong>Output:</strong>
    <div class="output"></div>
    <input id="btnClickMe" type="button" value="Click me" onClick="showOutput()"/>
  </div>
</body>
</html>

I guess this is what might seem most familiar to you. The "onClick" event is directly registered on the button (line 12) which invokes a global function "showOutput" which in turn processes the embedded output and sets it to a given div element.

Converting the example to be more MVC-like
Step 1: Remove the event registering code from the HTML code.
In a first step we remove the event registering code from the above example s.t. the code looks as follows:

function showOutput(){
  var name = "Juri";
  var age = 26;
  
  var output = "Hi, my name is " + name + " and I'm " + age + " years old.";
  $(".output").html(output);
}

$(document).ready(function(){
  $("#btnClickMe").click(showOutput);
});

and the HTML code doesn't have any knowledge about the JavaScript behind, now.

http://jsbin.com/oyazib/4/edit

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="view">
    <strong>Output:</strong>
    <div class="output"></div>
    <input id="btnClickMe" type="button" value="Click me"/>
  </div>
</body>
</html>

Step 2: Extracting the model
So far the "model" wasn't really visible but rather represented by the two variables "name" and "age". Let's create a simple JavaScript object that encapsulates this data:

http://jsbin.com/oyazib/5/edit

var Person = function(firstname, age){
  this.firstname = firstname;
  this.age = age;
};

function showOutput(){
  var aPerson = new Person("Juri", 26);  
  
  var output = "Hi, my name is " + aPerson.firstname + " and I'm " + aPerson.age + " years old.";
  $(".output").html(output);
}

$(document).ready(function(){
  $("#btnClickMe").click(showOutput);
});

The HTML code remains unchanged.

Step 3: Moving the presentation logic where it belongs to
The major thing that still disturbs in the above code is the presentation logic that is encoded in line 9. This is pure presentation logic. To solve this problem we use a templating engine. For simplicity reasons I've chosen jQuery tmpl but there are numerous others like jQote and EJS templates.
First, the view:

<script type="text/x-jquery-tmpl" id="personView">
  Hi, my name is <i>${firstname}</i> and I'm <i>${age}</i> old.
</script>

The strange ${...} are the jQuery tmpl placeholders. The according JavaScript code now looks as follows:

http://jsbin.com/oyazib/7/edit

var Person = function(firstname, age){
  this.firstname = firstname;
  this.age = age;
};

function showOutput(){
  var aPerson = new Person("Juri", 26);  
  
  var output = $("#personView").tmpl(aPerson);
  $(".output").html(output);
}

$(document).ready(function(){
  $("#btnClickMe").click(showOutput);
});

Note the highlighted lines 9 and 10. There is no view-related code any more, but rather we invoke jQuery tmpl with the given view and pass in the data. The HTML code remains unchanged, except the jQuery tmpl view which is added at the end of the <head> section. Now that we have the model and the view extracted, where's the controller??

Step 4: The controller, refining the big picture
The controller is nothing else but the glue that keeps together the model and the view. It knows from where to the fetch the model and which view to use. In fact, it is already present in the JavaScript code that has been shown so far. Have a look at the big picture:
The Model:

var Person = function(firstname, age){
  this.firstname = firstname;
  this.age = age;
};

The View:

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>

<script type="text/x-jquery-tmpl" id="personView">
  Hi, my name is <i>${firstname}</i> and I'm <i>${age}</i> old.
</script>
  
</head>
<body>
  <div id="view">
    <strong>Output:</strong>
    <div class="output"></div>
    <input id="btnClickMe" type="button" value="Click me"/>
  </div>
</body>
</html>

The Controller:

$(document).ready(function(){
  $("#btnClickMe").click(function(){
    var aPerson = new Person("Juri", 26);  
  
    var output = $("#personView").tmpl(aPerson);
    $(".output").html(output); 
  });
});

Conclusion
The example mentioned in this post is very basic and simple but still, I think it perfectly reflects what the MVC pattern is about and how a possible implementation in JavaScript could look like.
Obviously this is a simple example with the purpose of understanding the concepts. In a real-world application you would probably rely on the numerous JavaScript MVC frameworks that are available.

Now for the advanced among you
For the more JavaScript-literate guys among you, I'd even go a step further and make the MVC model more clear by extracting the controller's logic into a reusable jQuery plugin.
The controller is now encapsulated into a jQuery plugin which takes a view and a model to handle.

//Controller
(function($){
  
  $.fn.personcontroller = function(model){ 

    //register events
    $("input[type=button]", this).click(function(){ 
      var output = $("#personView").tmpl(model);
      $(".output").html(output); 
    });
    
  };
  
})(jQuery);

Finally, there is the application entry code which hooks up the controller:

//Main of the "application"
$(document).ready(function(){
  var aPerson = new Person("Juri", 26);
  $("#view").personcontroller(aPerson);
});

I guess now the separation is perfectly visible. The controller registers itself on a view where it hooks on the click event and visualizes the model that has been passed.

The live code can be found here: http://jsbin.com/oyazib/latest/edit

TechVid: Become a Javascript Console Power-User

noreply@blogger.com (Juri Strumpflohner) — Sat, 08 Oct 2011 19:16:00 +0000

A nice 7 minute video showing some Chrome, Opera and Firefox power user commands for the JavaScript console.

The Similarity of C# and JavaScript Syntax

noreply@blogger.com (Juri Strumpflohner) — Mon, 03 Oct 2011 19:49:00 +0000

I'm currently diving deeply into creating rich JavaScript web applications. You cannot deny that they are now the must have for modern-looking web (2.0) apps. They are rich, user-friendly and provide a desktop-like experience within the browser..without the need to install heavy applications or runtimes. While initially building such apps was a pure pain, emerging JavaScript frameworks and libraries make it really fun and easy. So webdevs out there...if you want to keep up, go and get in touch with JavaScript. It is the language of programming the web :).

Just when coding some JavaScript I noted that the syntax between C# and JavaScript is actually quite similar. Take these examples:

Variables
C#

var x = "some string";

JavaScript

var x = "some string";

Anonymous Object initialization
C#

var x = new {
   Name = "Juri",
   Surname = "Strumpflohner"
};

JavaScript

var x = {
   name: "Juri",
   surname: "Strumpflohner"
};

Delegates/Callbacks
C#

var result = SomeFunction(
   () => {
      //A delegate method performing some work
   }
);

JavaScript

var result = someFunction(function (){
   //callback / delegate
});

Testing JavaScript: Mocking jQuery Ajax Calls

noreply@blogger.com (Juri Strumpflohner) — Mon, 26 Sep 2011 18:50:00 +0000

When "seriously" developing JavaScript applications we obviously need to write tests. Being a fully dynamic language (similar as Ruby), tests are more necessary than ever since there is no compiler that checks for you all the silly mistakes before you run your code the first time. What also remains important is the distinction between integration tests and unit tests.

So mocking comes to play immediately as I wouldn't want to establish any contact to the server from within my unit tests. Consider the following jQuery call:

function fetchPerson(id){
   $.ajax({
      type: "GET",
      url: "/person/" + id,
      success: function(data){
         ...
      }
      ...
   });
}

To steer the "data" that is returned by such ajax call (without actually performing it), you can just override jQuery's ajax method.

(function($){

   $.ajax = function(params){
      if(params.url === "/person/1"){
         params.success({ ... }); //return the data you need
      }
   });

})(jQuery);

This is the power a dynamic languages gives you and may be very helpful not only while testing but also during development. Consider when you don't yet have the server-side implemented and ready to feed data to your JavaScript rich client? You can program your whole application using jQuery as you'd do and then include an additional file that overrides the jQuery ajax method returning the fake data you'd expect from the server-api. Once the server-side is ready you just remove the JavaScript include containing the jQuery override and you'd start communicate with the real server, without touching any application-code.

Actually it somehow feels a bit like AOP, where you define an aspect telling it to crosscut all ajax calls and replace it with the defined behavior.

JavaScript Scoping by Example

noreply@blogger.com (Juri Strumpflohner) — Thu, 01 Sep 2011 12:37:00 +0000

Understanding the scoping rules of JavaScript is one of the fundamental things to learn when getting started with the language. I just found this link posted by @codylindley on Twitter. It goes over some basic principles of jQuery, however the first part covers native JavaScript scoping. It is an interesting example to get an understanding about it.

Take the following piece of JavaScript:

Live example

var x = "Hi";

var someFunction = (function(){
  document.getElementById("out").innerHTML = x;
});

someFunction();

The example is quite simple. There is x, which is defined in the global scope, followed by the definition of a function which gets stored in the someFunction variable. someFunction gets called immediately afterwards, printing out the value of x to the HTML element "out". When executed, we get "Hi" as a result.
Why does this happen? In order to understand this, you need to understand that JavaScript has function scope, meaning that when printing out x, it will first search for a definition within the function itself, and then it will walk up the prototype chain in order to find a corresponding variable definition. In the specific example above, it will go up till it reaches the global (window) object where x is defined.

If now the example above gets modified as follows, can you guess what will be its output??

Live example

var x = "Hi";

var someFunction = (function(){
  document.getElementById("out").innerHTML = x;
  var x = "Hi, there!";
});

someFunction();

Actually the output is "undefined". This is due to the lexical function scoping, meaning the scoping rules are applied at function-definition, not at runtime. Btw, this kind of mechanism also allows for having closures. Hence, x is defined within the function's scope, but just not at the moment when it was printed out.

To fix this one would have to explicitly let x point to the globally defined one like

Live example

var x = "Hi";

var someFunction = (function(){
  document.getElementById("out").innerHTML = window.x;
  var x = "Hi, there!";
});

someFunction();

Now it again works.

Integrating Jersey with Spring

noreply@blogger.com (Juri Strumpflohner) — Sun, 28 Aug 2011 21:00:00 +0000

Spring provides a lot of benefits and promotes best practices with its dependency injection mechanism, application lifecycle management and Hibernate support (just to mention some). In addition when you want to have a clean server-side REST-like JSON Api, I found Jersey to be quite handy. This article briefly highlights how both of them can be integrated.

In my little spare time I'm currently trying to revive one of my earlier private projects which never exited the private beta (I'll write more about it once I publish it). The project consists of a JavaScript rich client interface with a Java server "back-end" hosted on Google AppEngine. I'm currently completely rewriting it and so I started out cleanly by creating a Jersey REST Api on the server-side, that exposes it's data in JSON. An example of such Jersey-exposed class is the following:

@Path("/sourcecodeitems")
public class SourceCodeItemGateway {	
	...
	
	@GET
	@Produces(MediaType.APPLICATION_JSON)
	public List<SourceCodeItemDTO> index(){
		ArrayList<SourceCodeItemDTO> listOfItems = new ArrayList<SourceCodeItemDTO>();
		
		for (SourceCodeItem item : sourceCodeItems) {
			listOfItems.add(new SourceCodeItemDTO(item));
		}
		
		return listOfItems;
	}
	
	...	
}

Actually this is quite similar (just a bit more complicated ;)) to an ASP.net MVC controller as described here. The according web.config looks as follows:

<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	version="2.5">
	<servlet>
        <servlet-name>Jersey Web Application</servlet-name>
        <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
        <init-param>
            <param-name>com.sun.jersey.config.property.packages</param-name>
            <param-value>com.jsdev.myproject.service</param-value>
        </init-param>
        <init-param>
			<param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
			<param-value>true</param-value>
		</init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Jersey Web Application</servlet-name>
        <url-pattern>/backend/*</url-pattern>
    </servlet-mapping>
	<welcome-file-list>
		<welcome-file>welcome.jsp</welcome-file>
	</welcome-file-list>
</web-app>

Line 12 indicates the package where your Jersey resources lie and line 15 activates the auto-mapping feature of your POJOs to Json.

Integrating with Spring
In order to integrate Jersey with Spring, you first need to include the jersey-spring-<version>.jar that comes with the Jersey package download. Include it in your build-path. You can then either configure your Jersey resource (SourceCodeItemGateway above) using Spring annotations (@Component) or to do it xml-based like...

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans 
	     http://www.springframework.org/schema/beans/spring-beans.xsd">


	<bean name="sourceCodeItemGateway" class="com.jsdev.mydevbook.service.SourceCodeItemGateway">
		<property name="pingService" ref="pingService"/>
	</bean>
	
	<bean id="pingService" class="com.jsdev.myproject.service.PingService">
	</bean>

</beans>

Line 8 shows the bean configuration of the Jersey resource class as well as a configured dependency (PingService) which will be managed and injected by Spring. Finally, you need to adapt the web.config file to properly hook in Spring with Jersey:

<servlet>
    <servlet-name>jersey-servlet</servlet-name>
    <servlet-class>
        com.sun.jersey.spi.spring.container.servlet.SpringServlet
    </servlet-class>
	<init-param>
           <param-name>com.sun.jersey.config.property.packages</param-name>
           <param-value>com.jsdev.myproject.service</param-value>
       </init-param>
	<init-param>
		<param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
		<param-value>true</param-value>
	</init-param>
	<load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
    <servlet-name>jersey-servlet</servlet-name>
    <url-pattern>/backend/*</url-pattern>
</servlet-mapping>

<context-param>
	<param-name>contextConfigLocation</param-name>
	<param-value>
		/WEB-INF/spring-service.xml
		/WEB-INF/spring-data.xml
   	</param-value>
</context-param>

Note in line 4 how we instantiate the Jersey SpringServlet. Line 25 and 26 show the path to the Spring configuration files. The previously shown bean configuration is an excerpt from the spring-service.xml. spring-data.xml is supposed to contain everything related to the data access.

Why Did it Have to Be So Complicated Before??

noreply@blogger.com (Juri Strumpflohner) — Fri, 26 Aug 2011 14:08:00 +0000

I started web development using Java, basically during my studies at the university. When working on my bachelor degree thesis I needed a web server back-end system (to my mobile J2ME client); I decided to do it "right". Spring (especially Spring.Web) for the application server part and Hibernate for the object relational mapping. Although having quite a tough time getting up that initial learning curve, the result payed out so well: everything nicely decoupled and testable. I loved it. Then, when starting to work professionally as a .Net developer things got more painful...

After my studies (parallel to continuing with the MSc) I started to work professionally as a .Net developer, getting in touch with Asp.net (WebForms). And that just felt so strange. "Postback", "ViewState",...it was like imposing the WinForms technology on top of the web. Where was the usual request/response pattern?? Testability?? Sure, you can, but you don't want to fight with all the necessary setup you need to deal with when testing an ASP.net WebForms Page. The only way is to ensure that you keep that logic at a minimum possible and to rather defer it to some business layer class which is completely web-agnostic and which then can definitely be tested. And indeed, this is what our internal framework/class-library helped us to do.

Now we decided to change that, seriously evaluating ASP.net MVC as our server-side technology. And that feels so much like returning home :). And I'm really satisfied what I've seen so far from Microsoft regarding MVC. They really seem to have gotten it right this time. Everything is clearly separated, abstracted, exchangeable and mainly, testable!

Consider this really dummy ASP.net MVC controller:

public class AccountController : Controller
{
   ...

   [HttpPost]
   public JsonResult Filter(Account account)
   {
       return Json(new List&lt;Account&gt;()
       {
           new Account()
       });
   }

   ...
}

and the corresponding (if also naive) test case:

[TestMethod]
public void TestFilter_FilterJuriStrumpflohner_ShouldReturnAccountInstance()
{
    //Arrange
    Account filterAccount = new Account()
    {
            Lastname = "Strumpflohner"
    };

    //Act
    JsonResult result = new AccountController().Filter(filterAccount);
    IList&lt;Account&gt; filterResult = result.Data as IList&lt;Account&gt;;

    //Assert
    Assert.AreEqual(1, filterResult.Count, "There should be only one result");
}

Now, isn't this simple??

Chrome Developer Tools: 12 Tricks to Develop Quicker

noreply@blogger.com (Juri Strumpflohner) — Thu, 25 Aug 2011 06:36:00 +0000

This is definitely a "must-have-seen" video for every JavaScript developer. Chrome has some really nice features build into their developer tools which are being demonstrated in this short ~5 min video.

Btw, you may want to subscribe to the following newsletters if you're interested in the latest web technologies:

Droidcon London 2011 - Europe's largest Android Conference

noreply@blogger.com (Juri Strumpflohner) — Sat, 20 Aug 2011 07:29:00 +0000

Droidcon London 2011 is Europe's largest conference that exclusively covers Android development and applications. The conference will take place in London on 6th-7th October 2011.

Droidcon London 2011 has grown tremendously since last year, in line with the exponential interest in the Android platform. This year, upward of 600 Android enthusiasts will rub shoulders with the premier experts in the field to dig into every aspect of Android and its ever-growing ecosystem. High on the agenda this time around are Android for the Tablet, Android in the Enterprise, Android for Games, Android for business, Augmented Reality, multi-mobile and a whole lot more.

The first day will be community led with a full-day Barcamp and Democamp. The second day will be conference day, with presentations from some of the world's foremost Android experts, including two Google Developer Advocates for Android in Richard Hyndman and Nick Butcher, CommonsWare's Mark Murphy (author of the Busy Coder's Guide to Android Development), Mustafa Isik aka CodeSurgeon and Yosi Taguri (programmer on the fantastic game, Ahhh-Pah) with many more top class speakers still to be announced.

You can register via the Droidcon London 2011 site: (http://www.droidcon.co.uk)
Follow Droidcon London 2011 on Twitter: @DroidconUK tags: #droidconUK #droidcon
Follow Droidcon London 2011 on Facebook: http://www.facebook.com/groups/droidconuk/

Experiencing the jQuery 1.6 Breaking Changes

noreply@blogger.com (Juri Strumpflohner) — Mon, 15 Aug 2011 07:38:00 +0000

Unfortunately I did not actively follow the release of jQuery 1.6 as I would probably have noted that they introduced some breaking changes which would have prevented some issues at my side. So I needed to experience them the hard way :). Fortunately, though, our app was not yet in production but just end-user acceptance testing, so it didn't cause any major problem, but still...

Consider for instance the simple case of using the nice .attr() jQuery function for verifying whether a checkbox is checked or not. So in &lt; jQuery 1.6 I'd have written something like

$("#mycheckBox").attr("checked") === true){
   //my custom logic
}

But, exactly this code would no more work reliably on jQuery 1.6 but rather I'd have to change it to

$("#mycheckBox").prop("checked") === true){
   //my custom logic
}

This is because with the latest jQuery release, they made a clear distinction between DOM attributes and properties.

In the 1.6 release we’ve split apart the handling of DOM attributes and DOM properties into separate methods. The new .prop() method sets or gets properties on DOM elements, and .removeProp() removes properties. In the past, jQuery has not drawn a clear line between properties and attributes.
Source: jQuery Blog

So what is the exact difference between a DOM attribute and property? Again...

Generally, DOM attributes represent the state of DOM information as retrieved from the document, such as the value attribute in the markup &lt;input type="text" value="abc"&gt;. DOM properties represent the dynamic state of the document; for example if the user clicks in the input element above and types def the .prop("value") is abcdef but the .attr("value") remains abc.
Source: jQuery Blog