Certification 70-486: Developing ASP.NET MVC 4 Web Applications

Last week, I took the exam for Microsoft Certification 70-486: Developing ASP.NET MVC 4 Web Applications and passed successfully and scored 831. This was my first exam after almost two years. Although, the exam format and questions’ style did not differ, I certainly noticed some differences.

The number of questions were 45, and the questions were spread in proportion:

22 general questions
23 questions in 3 different scenarios

The test included 3 different scenarios to analyze, and it required a good amount of time to spend on reading code and business requirements of the scenarios in order to be able to answer the questions. Although the scenarios were quite different, it was very easy to mix the requirements, so a good focus had to be put to remember the requirements of each scenario.

The questions were practical, but not easy. They were focused on details of specific features. I was introduced with good amount of questions regarding session management, especially in distributed environments, security implementation, debugging, azure deployment, and related to controller implementation.

To anyone who is preparing to take the exam, my recommendation is to put a focus on the topics above mentioned.

I hope this helps.

Windows Command Line (CMD) and Mac OS Terminal Navigation Commands

Sometimes, even the simplest tasks can be forgotten if not practiced and repeated. In this short tutorial, I am going to show you some basic command line commands in Microsoft Windows, and their equivalent commands in Apple Mac OS Terminal. This is by no means a complete reference to the available commands, just a short list of some common commands available to you on your operating system.

Knowledge of CMD/Terminal commands may be needed for using command line interfaces  (CLI) of applications where Graphical User Interface is missing, or when CLI  provides a faster/easier way to perform a task. Let’s see some of the commands

The CMD/Terminal window

To open the CMD window in Microsoft Windows you may follow several ways, one of them being choosing Run option from the start menu, typing “cmd” in run window, and clicking “enter”. This will open the CMD window in Microsoft Windows

CMD Home folder
CMD window

Here you will see the version of the Operating System, and the path to the home folder. The white sign in the picture points your current location in the disk. Home folder is the usual starting point when you open CMD window.

In Mac OS you will usually find the Terminal in Other programs folder. When you open the terminal, you will see the name of the current folder. If you want to know the full path to the current folder, you can type pwd and see the full path.

MacOS terminal window

List files and folders

If you want to list files and folders in that directory use:

WINDOWS MAC OS
dir ls

Here you see the list of directories in my home folder

Listing files in a directory with dir command in Windows CMD
Listing files in a directory with dir command in Windows CMD

Move to directory

If you want to change your current directory to another directory, use:

WINDOWS MAC OS
cd “path to the folder” cd “path to the folder”

When you execute the command by pressing “enter” in your keyboard, if the path is correct, you will see that you current folder will change to the new path.

Get back to parent directory

If you want to go one directory up in the directory tree, execute:

WINDOWS MAC OS
cd.. cd ..

and you will see your current directory will change to the parent directory. Please note that in windows two dots are connected to cd, and in MacOS there is a space between cd and dots.

Get to the root

Wherever you are in the directory tree, you can move to the root directory by executing:

WINDOWS MAC OS
cd \ cd /

This will get you to the disk root of the directory tree.

Create a directory

Creating a new directory is done using

WINDOWS MAC OS
mkdir MyFolder  mkdir MyFolder

This will create directory MyFolder in your current directory.

Remove a directory

Removing a directory first requires the directory to be emptied from contents, and then be removed. Removal commands are:

WINDOWS MAC OS
rmdir MyFolder rm -r MyFolder

 

Rename a directory

To rename a directory execute:

WINDOWS MAC OS
rmdir  mv oldName newName

 

Rename a file

To rename a file execute:

WINDOWS MAC OS
ren oldFileName newFileName mv oldFileName newFileName

 

Delete a file

To delete a file exeute:

WINDOWS MAC OS
del filename rm -Rf filename

Delete command does not ask for confirmation, so please be careful.

Check the Path

Some programs need to be added to the PATH in order to be accessible through command line interface. If you want to check your current path, you can execute the following command:

WINDOWS MAC OS
echo %path% echo “$PATH”

This will print current path variable and you can check if required programs are added to the path.
I hope this helps.

AngularJS at its simplest form

AngularJS is a very hot topic nowadays amongst web developers. It seems to be having a

AngularJS
AngularJS

momentum and as such getting high attention and interest. Being an extensible javascript framework and excellent framework for developing Single Page Applications (SPA), it is feature rich and evolving very fast.

As learning such a huge and fast growing framework could seem to be hard at the beginning, I will try to take a very simple form of it, and try to explain how can we create an AngularJS SPA at its simplest form. For the sake of demonstration, I will create a web page which displays basic contacts of famous web developers.

AngularJS is a Model-View-Controller framework, where Model serves the data, Controller takes the data from Model and delivers to View, and View displays the data. As we want to display some data, we need all three of the components. We have our contacts, which is our Model, then we need a Controller which will deliver the contacts’ list to the View, and we need a View to display the contacts’ list.

Before we start to create components, we need to define the Angular module which will form the base of our SPA, and it is done through this line of code:

var angularEg = angular.module('angularEg', []);

A new module is defined using angular.module. The first argument defines the name of the module, and the second argument specifies other required modules. We will leave it as an empty array as we have no dependency on other modules for this example. Although the second argument is optional, it has a significant meaning. If not specified, angular will look for an existing module with the name specified at the first argument, otherwise if specified a new module will be created.

Lets create now the components one by one.

Model

Our contact card will display contact’s name,  country, and his web page URL, so we need an object which will hold these data. Our model will look like this:


{
name: "Scott Hanselman",
country: "USA",
web: "http://www.hanselman.com"
}

This represents a single contact, and our Model will contain an array of such objects.

Controller

The controller in our case has only one duty, to make the data available to the view, so lets first define the controller using this code:

angularEg.controller('myContacts', function($scope){

});

The first argument to controller creation is the name of the controller, which in this case will be ‘myContacts’ and the second argument is the controller implementation. The $scope variable is the connection between the Controller and the View, and it is used to pass information from Controller to the View. The controller can get the data from model in various ways like loading data from a file, from an internal/external web service, etc. To keep it simple, I will hard code the data inside the controller.

angularEg.controller('myContacts', function($scope){

$scope.contacts = [{
name: "Arian Celina",
country: "Republic of Kosova",
web: "http://arian-celina.com"
}]
});

The controller is ready, lets continue with the view.

View

Our view will be a standard html page which displays the above specified information in div blocks. There are three things we need to do in view in order to bind the information from controller.

1. We need to specify that the view is for the angular module we have created and we do this by putting ng-app attribute in html tag

<html ng-app="angularEg">

2. We need to specify which part of this view is bound to which controller, and we do this by attaching ng-controller directive to the relevant container, in this case I will do it in body. This can be done in a granular level such as a specific div, or a global level such as body.

<body ng-controller="myContacts">

3. We need to display the contacts. There is a directive in AngularJS specifically to display collection of data such as arrays, and it is ng-repeat. I will repeat contacts and display them in this way:

<div class="w-row" ng-repeat="contact in contacts">

<div class=”contact-brief”>
<h2 class=”contact-name”>{{contact.name}}</h2>
<div class=”contact-info”>Country: {{contact.country}}</div>
<div class=”contact-info”>Web: {{contact.web}}</div>
</div>

</div>

The ng-repeat directive iterates through collection of contacts which he gets from the controller “myController” (remember, we defined variable contacts in $scope). A local variable contact is defined inside ng-repeat, this gives us the opportunity to access the object in iteration and access its properties and then the data binding is done by specifying the property and enclosing it with double brackets like {{contact.name}} (the handlebars syntax).

AngularJS will iterate over the array $scope.contacts and add the above specified div to the DOM for every element in the array.

The resulting app can be seen online on http://arian-celina.com/angularexample/index.html. Feel free to get the code from GitHub and play with it.

 

There is life beyond jQuery

I am a huge fan of jQuery library. For years, jQuery has been my ultimate tool for client side development, and I have used it in any web project I have undertaken. Few weeks ago, I took a project to develop a simple brochure style web site, which had to display a couple of static data, and I decided it to be a Single Page Application (SPA) for the sake of the simplicity and reuse of the page templates.

At the beginning, my idea was to do the dom manipulation with jQuery and templating using jsRender library, but during the planning phase, I thought I should take into consideration using a SPA framework or library. I did a little research on the web, consulted a friend of mine, and then shortened my list to DurandalJS and AngularJS. After giving a quick try to each of them, I decided to go with AngularJS.

Using HTML templates for pages and binding data to the templates was dead simple in AngularJS. The biggest implementation challenge on the project was the internationalization, as the site is multilingual in four different languages. With the help of Angular translate module I managed to translate the labels very easily, and by extracting the language using route params I made the app to decide on the language of controler. The app worked like a charm.

On overall, I managed to finish the whole project within three working days and the most interesting part for me was that I managed to do it without using jQuery at all. Ever since I have started to use jQuery, this is the first project that I have finished without using jQuery. I still think that jQuery is an amazing library and I will continue using it in the future, but there is one other thing, that certainly, I will start using more and more AngluarJS as well.

Multiplatform development with Phonegap

It has been a while not being active in blogging. I have been engaged in a project developing mobile applications for a tourism project in Kosovo. The project entailed development of three mobile applications for the needs of the project in three major platforms, iOS, Android, and Windows Mobile.

As the requirements were to develop the very same functionality and look in all platforms, the first thing that came to my mind was to use in HTML5, CSS3, and JavaScript combination. I would share the same code and design in three different platforms and finish the project in a faster time.  After a short analysis and readings, I came to decision to use jQuery mobile and PhoneGap. Now that everything is finished, I would like to describe my experience here so you can make a better judgement when you start your own project.

Goods

The initial start of the project was a fairytale. I managed to customize the jQuery mobile theme and adjust the design as needed and created the prototype within a week. It was a nice piece which satisfied the needs of my client. I used the PhoneGap build which made my job easier. There was no need to install anything and was using a text editor to write HTML + CSS + JavaScript code.

PhoneGap is an excellent tool to build non-native applications in an amazingly fast way. Our application was a basic brochure which did not require a native experience and HTML5 app was doing a great job.

Leverage existing knowledge

Leveraging existing knowledge was the main motivation behind going non-native development. My experience in designing and developing web applications was a great help in immediately starting to develop the applications.

Shared functionality

Although I managed to port around 70% of the functionality in all three platforms, the idea of write once run anywhere is a fallacy. I faced the most problems when porting to Windows Phone. The browser was not rendering well the look and feel and had to do some custom tricks to adopt. Also there was a bug with back button event in jQuery mobile which was not reacting well to Windows Phone back button event. Apple iOS and Android platforms were working fine with minimal differences.

Easier maintenance

Maintenance is a huge cost factor in the lifecycle of an application, and mobile applications make no exception on this. Having the same codebase made changes easier and faster. After deploying the first version, we saw the need to some updates, and having to touch same JavaScript or HTML code made propagation of changes to other platforms a matter of copy – paste.

Bads

After putting some images to the application, the application soon passed the size of 35 megs. PhoneGap build does not support applications larger than 15 MB. As my app was larger I had to build them locally. This required separate installations of mobile development platforms and the PhoneGap build itself, and required to have a Windows PC and Mac computer.

Some performance issues

PhoneGap and jQuery mobile is a good combination, but, there are some performance implications though. It is not hard to notice some latencies on clicks. There are some performance improvement tips and tricks out there, but you have to do a little research and customizations to achieve a desired performance level.

Overall opinion

In general, my experience developing these applications was OK. I managed to create three applications within a month and a half, which deadline, I’m sure I would not be able to meet if I would have chosen to develop in native platforms. Depending on the requirements, if there is no need for a very fast application, such as games or any real time communication application, I would recommend  PhoneGap. When it comes to jQuery mobile, on my next project I will test another framework first and then post my recommendation :)

JSONP request to your WebAPI service

A day ago, I was trying to prepare a demo on how simple it is to make a cross domain AJAX request to a web service, and display the JSON result in a friendly HTML div using jQuery AJAX method.

I created a simple WebAPI controller, which had a method which returns a IEnumerable<MyObject> of a list of objects, and published it to a Windows Azure Cloud Service. The Web Service was working like a charm.

When I created the jQuery code, which was as simple as this

$(function () {
var url = "http://webprogramming.cloudapp.net/api/Kompanite?callback=?"

$.getJSON(url, function (data) {
$.each(data, function (index) {
//place info in a div
});
});
});

and was supposed to work smoothly. But, as opposed to a working code, I started to receive no results. I started to catch ajax errors, and saw that the callback function was not being called. After three hours of research, I came through this “JSONP with ASP.NET WebAPI” StackOverflow question, which explained everything. The answer was that, by default, the result of WebAPI was not prepared to deal with callback required for JSONP. You need to have a special JsonMediaTypeFormatter which can handle this kind of situation. After I copied/pasted the formatter class from the answer, and cofigured it in Global.asax’s Application_Start() method through this line:

config.Formatters.Insert(0, new JsonpMediaTypeFormatter());

the jQuery code started to work like a charm. So… if you fall into a similar situation, please make sure you implement your own JsonMediaTypeFormatter to support JSONP calls to your web service.

Social Innovation Camp Kosovo

Last weekend, I had the pleasure and opportunity, to be mentoring for the second Social Innovation Camp Kosovo, together with Dan McQuillan, Fisnik Ismaili, Laura HahnPeter Manning, and Josh Harvey .

Mentoring badge Arian Celina

During a 48 hours challenge, six groups of young Kosovars tried to make reality the idea they had proposed, which intended to make a social impact in Kosovo. After 48 hours of hard work and fun, teams came up with the prototypes of their ideas, went out to test their prototypes with other people, and then presented their prototype together with the impressions gathered outside, in front of the independent judge panel.

IMG_2638After all the fun and hard work, three teams excelled and won prices to continue forward their ideas. The winners were:

  • Eventor – A project which intends to put together events and scholarships for Kosovars, and make them available for students and others to get informed.
  • KapLexo – An idea around book exchanging for second hand books, while making also possible for people to review, comment, meet and discuss, about the books they like and have read.
  • ParkingLot – An idea which intends to make free parking slots in maps (web and mobile) through social participation.

Personally, I would like to thank UNICEF Innovation Labs Kosovo for making this event possible, which creates opportunities for young people to start new projects which could have positive impact in Kosovo.

My productivity apps

As for most of us, time is the most precious and scarce resource we have. I am passionate about organizing my time, but I would say that would not be easy without using some very good apps.

Daily tasks

Organizing daily tasks is a crucial activity towards increasing the productivity during the day. My daily tasks do cover all major activities I should perform during the day. As such, I need something which could give me a way to track the activities, track what’s done and what’s pending, as well as separate tasks based on relativity. My favorite app for this is Wunderlist. It is present in all major mobile platforms, as a Windows app as well as from a good web access. It has features like creating lists of tasks, setting reminders, due dates, sub-tasks, and notes on tasks.

Development tasks

When organizing my development tasks, I do use Trello. It offers to create boards of cards, where in a card you can write a simple description, or a detailed checklist of tasks, set due dates, attach files, comment, and share it with others. You can create mini boards within a board, which could make easy to represent the development stages, and move cards from stage to stage to help agile development.

Time tracking

When we work on projects, it is often required to track how much time we spent on a specific project, or a task, I do use Toggl. It is a very simple tool, which is focused on time tracking. It can help also if you use productivity methodologies such as Pomodoro.

Using these apps, I do manage my day to day activities, and would recommend to anyone.

ASP.NET 4.5 & Security Exception

Lately, while trying to put in live a web application to my GoDaddy hosting account, I started to face some errors which were not present at my local development machine. I was receiving Security Exception with a generic error stating no much information to lead me to the correct cause of the error. Then I remembered that GoDadddy has set its security level to Medium Trust.

In order to simulate the environment, I added the following line to my web config file:

<trust level="Medium" />

Immediately, I started to receive the very same error locally. After trying few possible solutions, removed some libraries I was using, I was still receiving the very same error with slight  changes in the stack trace, but still no help.

==============================================================================

Security Exception

Description: The application attempted to perform an operation not allowed by the security policy.  To grant this application the required permission please contact your system administrator or change the application’s trust level in the configuration file.

Exception Details: System.Security.SecurityException: Request for the permission of type ‘System.Security.Permissions.SecurityPermission, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089′ failed.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[SecurityException: Request for the permission of type 'System.Security.Permissions.SecurityPermission, 
      mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' failed.]
   System.Security.CodeAccessSecurityEngine.Check(Object demand, StackCrawlMark& stackMark, Boolean isPermSet) +0
   System.Security.CodeAccessSecurityEngine.Check(CodeAccessPermission cap, StackCrawlMark& stackMark) +53

==============================================================================

Then I decided to test my solution in an environment with .NET 4.0 (not 4.5 as in my current development machine), and… voi·là, the application was working like a charm.

So, the first time, I really had problem with a library which was not able to perform under medium trust, however, what really mislead me was the Security Exception thrown by .NET 4.5 under medium trust. After a short research, I discovered that this is an issue to many developers and libraries such as DNN, and some others. I hope Microsoft will soon address this.

So  you who use Visual Studio 2012, if you receive Security Exception under medium trust, please try to run your application in an environment with .NET 4.0 to test if the problem is with the .NET itself.

Hope this helps.

My impressions on 70-480 certification

In my last post, I gave some details about the Microsoft’s campaign on 70-480 Programming in HTML5 with JavaScript and CSS3 certification. As many out there, I decided to benefit from this offer as well as challenge my knowledge a little, and took the test today. Fortunately, I did pass the certification. In this post, I would like to share with you my impressions for this exam.

This certification was recently introduced by Microsoft, with the new MCSD line of certifications. It counts as a credit towards two MCSD lines: Web applications and Windows Store Apps using HTML5. As such, it is an important exam for those who do want to certify their knolwedge in Web front end development as well as developing windows HTML5 apps using JavaScript and CSS3.

The title of the exam, and the skills measured might make you think, this is a pure Web Development certification, and might disorient your expectations, as it did to me :). I also had another miscalculation. As I have several years of experience in web development, I thought that there is no need to learn much about this. But, there was a difference between what I use daily and what I was going to be tested on.

One of the two main topics on questions I faced (which counted more than 10% of total questions) were about making AJAX requests, and manipulating DOM. On my daily job, I use jQuery to perform these tasks, and rarely touch pure JavaScript functions to do this. As the exam was to cover the web path as well as Windows store app development path, questions were generic, without using libraries such as jQuery. This was a part, I did not take care much, however, now that I passed the exam, I learned a lot about this part too, and this is the benefit of getting certified.

Apart of these details, the questions in the test, were mainly focused on data validation, making client side requests to WCF web services, manipulating DOM, creating and using Web Workers, inheritance in JavaScript, layout formating using CSS3, and new HTML5 elements.

So, my advice to those preparing for the test: prepare to be tested on pure JavaScript, HTML5, and CSS3. Forget about libraries you use on your daily programming. Good luck.