A modular profile photo upload using ASP.NET MVC

ASP.NET MVC with Scaffolding and Razor template engine are great to get your LOB web application up and running shortly. But every once in a while, you find you need to do some extra work to add some features. Having a photo upload template was one of them.

My goals

  • To be able to edit user profile (name, email, etc.) as well as photo
  • To be able to view the uploaded photo before submit (similar to profile image upload of all social media apps)
  • To be built in compliance with ASP.NET MVC (i.e. no server-side controls)
  • To avoid writing extra code unless needed (no need for overkill)

Continue reading

CORS in brief

Q: What is CORS?

A: CORS or Cross-Origin Resource Sharing, is a mechanism and set of specifications developed by W3C as part of HTML5 specifications for organizing access to online resources in one online target domain by another domain (usually through AJAX and RESTful APIs).

Q: What was there before CORS?

A: Before CORS, same-origin policy was applied to prevent cross-site scripting security issues, which means that calling certain resources (i.e. fonts, JavaScript and XMLHttpRequest) from another domain was forbidden.

Q: Does CORS allow unrestricted access to online shared resources?

A: No, the target domain holding the shared resource or script must instruct a web browser that it “allows” certain request types for this resource from certain requesting domains.

Q: Is CORS similar to authentication?

A: No, authentication is checked by the web server before replying with a Response, while CORS is checked by a web browser that supports CORS before sending a Request (in some cases) or after sending the Request but before rendering a Response (in other cases). If the Request from the originator domain was not allowed, the browser generates an exception and prevents rendering or executing the requested resource.

Q: Which web browsers support CORS?

A: CORS is supported in the following browsers:

  • Chrome 3+
  • Firefox 3.5+
  • Opera 12+
  • Safari 4+
  • Internet Explorer 8+

(a complete list of supported browsers at http://caniuse.com/#search=cors)

Q: Are there other non-browser clients supporting CORS?

Continue reading

The art of debugging

I was reading “How to think like a computer scientist” and I liked a quote describing the art of debugging by elimination of impossible scenarios…

When you have eliminated the impossible, whatever remains, however improbable, must be the truth.

Sherlock Holmes (The sign of four)

The story behind reading that book is that I was interested to learn Python, just for the fun of it, and I found that book which is aimed for 1st year computer science students. I thought it would be interesting too to join the ride and start learning a new language assuming I had no experience too. 🙂

Movies that inspired Software


I will start first with the movies that inspired me at the beginning of my career as a programmer, it was Antitrust. Adapted from the story of Microsoft Antitrust case, the movie is based around a tycoon in software (NURV) with its CEO (who happened to look like Bill Gates 🙂 ) and a genius computer science graduate who was offered a job at NURV.

I enjoyed the movies because of its programmers’ appeal, credits written in coding style with <html> tags and // Comments, opening soundtrack was amazing, and cast well chosen. Despite the fact that in NURV (Microsoft) code was written in Java, but most details were taken care of.

The point I liked much was when the young boy was contacted by (Bill Gates) in person and offered his dream job that he didn’t even apply for. I liked the feeling of excelling in your field that jobs search for you not the opposite, the excitement of a young boy joining the company he never imagined he could join. The words that really inspired me for years later, was the welcome speech of the CEO when he said about software business:

This business is binary, you are a one or a zero, alive or dead. There is no second place.

You can watch this part here

Monty Python

I didn’t know about this British comic band of the 70’s before a few months ago; that was when I discovered how their Monty Python’s Flying Circus was a favorite for many programmers at that time. For a beginning, Python language was named after this show because programming with the language was supposed to be as much fun as the show was. One of the famous sketches of this show was the Spam sketch below.

In this sketch the word “spam” and “spam with eggs” was introduced frequently in a restaurant menu as an undesired ingredient and later all along the sketch, even the end credits. From this sketch came the word spam that describes unwanted mails. The words “spam” and “eggs” are also used in Python literature. I used to think that Python packages are named eggs because “pythons” are conceived in “eggs” but I think it has also to do with the show.

I don’t know if other movies or shows have inspired software or not but that was the ones I thought of.

Composite WPF and the Ribbon Control

While working for WPF and Composite Application Library (CAL) for the first time, I had some difficulty both understanding their concepts and apply them in the optimal way, but I tried harder.

One of the benefits of CAL I found was the Command Binding which truly facilitates complying to the Model-View-ViewModel UI Design Architecture. But finding an easy implementation for them in all the desired control was not as easy as with default menu items and tool bars. A question on stackoverflow was asking about implementing the Command Binding with the WPF Ribbon which is downloadable within the WPF Futures, and not included in the out-of-box visual studio installation.

The trick was to make custom region adapters as those of menu and tool bar. I have found samples of  RibbonRegionAdapter.

To comply with CAL and Model-View-ViewModel,  the View containing the Ribbon will be be bound to a ViewModel containing all commands. These commands would be exposed publicly and available to other modules to attach Executed and CanExecute handlers. It is possible also to expose a generic method to add commands at run time by providing their image and location on the ribbon.

I found also open source implementation for binding the docking manager. The Composite WPF Contrib Project on CodePlex contains a TabGroupPaneRegionAdapter for Infragistics TabGroupPane.

Augmented Reality

Every great magic trick consists of three parts or acts. The first part is called “The Pledge”. The magician shows you something ordinary: a deck of cards, a bird or a man. He shows you this object. Perhaps he asks you to inspect it to see if it is indeed real, unaltered, normal. But of course… it probably isn’t. The second act is called “The Turn”. The magician takes the ordinary something and makes it do something extraordinary. Now you’re looking for the secret… but you won’t find it, because of course you’re not really looking. You don’t really want to know. You want to be fooled. But you wouldn’t clap yet. Because making something disappear isn’t enough; you have to bring it back. That’s why every magic trick has a third act, the hardest part, the part we call “The Prestige

From the movie “The Prestige”

I had that feeling when I read an article about Augmented Reality which I haven’t heard of before.

The article mentioned a page developed by General Electric as an example

I went directly to the video and my eyes and mouth were wide open for 5 minutes until I realized what it is

Here is another video showing the “making” …


And now after being “enlightened” , I can tell the “trick”

We all know that we can render 3D graphics and change the viewpoint by changing the position (x, y, and z) of the camera object

We also know that with computer vision, we can detect the position and the rotation of a certain pattern on all axis

Combining the two concepts, we can use the computer camera to detect the position of the viewer (the human) relative to the position and rotation of the pattern and then render the 3D graphics respectively

So simple isn’t it, but yet amazing

Historical Debugger and Test Impact Analysis in Visual Studio Team System 2010

I was browsing some of the awaited-for Visual Studio 2010 and I found a video about two interesting features related to what we do everyday (and I do not mean coding ;))

The first feature is related to debugging “history”. Normally, when you find a bug while running your program, you insert multiple breakpoints on the statements you suspect might caused it, and repeat the scenario or restart the debug session.

With history debugging, you don’t need to do so, since the history debugger “logs” every event in your application, so you can “pause” running and inspect all the previous events and may be check if there were “swallowed” exceptions.

The second feature, is when you want to modify some “unit-tested” code either for bug fixing or refactoring, and you want to re-run the impacted tests. Normally it is hard to determine which tests are affected so you run all of them, but with Test Impact Analysis in VS 2010, you can get the impacted tests once you save your modifications, so you can either commit your changes or undo.

Here is the 19 minutes video showing these two features on Channel 9

Historical Debugger and Test Impact Analysis in Visual Studio Team System 2010