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 on 70-480 certification 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.

Programming in HTML5 with JavaScript and CSS3 – 70-480 Microsoft Certification

Programming in HTML5 with JavaScript and CSS3 (70-480) certification, is the entry point towards the new line of Microsoft Certified Solution Developer Web applications certification. Currently, there is a special offer for this exam, and it is offered for free. The voucher can be taken from here. This special offer also includes video training for this exam from Microsoft Virtual Academy.

The exam is prepared to test your knowledge on topics related to HTML5 (semantic structures, new HTML5 elements, data validation, etc.), CSS3 (selectors, layout management, box properties, animation, etc.), and JavaScript (DOM manipulation, events, exception handling, callbacks, etc.). Details about skills measured can be found on this link.

The knowledge gained from this training, can be used to develop web applications as well as Window Store apps.

What are you waiting for… Get certified 🙂

Optimizing ASP.NET web pages

With increasing usage of mobile devices for browsing the web, optimization of web pages has become a topic of utmost importance. Perhaps, this post is nothing more than stating the obvious, as techniques to be mentioned here are very well known for quite some time, yet, pretty often ignored or dismissed, leaving web pages bad performance.

In this post, I am going to describe some of the well known techniques for web page optimization and how they can be leveraged in ASP.NET web pages/applications. This post will cover:

  • Javascript/CSS placements
  • Bundling & Minification
  • Caching
  • Image optimization
  • Gzip compression
  • Number of requests
  • CDN

Let’s get deeper into the topic.

JavaScript and CSS placement

It is often encountered that developers leave all CSS links and JavaScript (JS) references at the Head section of a page. Interpretation of the HTML code by the browser goes in a sequential way, so the browser downloads resources as they come, and until resource in the queue is downloaded, it stops downloading other resources if they are at the same host. As such, when source hits JS reference, it will block loading further until these JS files are downloaded. In most cases, JS files contain code related to functionality, and it is acceptable that functionality not to be available until the whole site is loaded.
Whilst, CSS files are required for proper appearance of the site. This suggests us, that CSS files usually have a higher priority for loading than JS files. As such, if we leave all CSS links at head section, and move all JS references at the bottom of the page, right before the body end tag, we will make the page appear before the whole site is loaded, thus giving a faster load time impression.

E.g.


<html lang="en">
<head>
<link type="text/css" reference="stylesheet" src="~/styles/style1.css"/>
<link type="text/css" reference="stylesheet" src="~/styles/style2.css"/>
<link type="text/css" reference="stylesheet" src="~/styles/style3.css"/>
</head>
<body>
...
</body>
</html>

Bundling & Minification

Bundling is a technique used to collect all CSS files into one CSS file, and all JS files into a one JS file. ASP.NET as of version 4.5 has bundling and minification functionality included. Older versions can get System.WebOptimization packag by downloading it from NuGet.

When you create a new MVC 4 web application from Visual Studio, you get bundling and minification set up by default. Bundling and minification code can be found in App_Start folder within the solution, in BundleConfig.cs file. Here you may add files to be bundled and minified one by one by registering them with their relative path like this:

bundles.Add(new ScriptBundle("~/bundles/libs").Include("~/Scripts/libs/jQuery.js"));

This code creates a virtual path “~/bundles/libs” and includes JavaScript file jQuery.js. You can include as many files as you wish, and they will be bundled in the order you have included them. You can also specify a pattern to include such as "~/Scripts/libs/*.js" and this will include all JavaScript files in that folder. In the case of pattern, files will be loaded alphabetically, with consideration of known libriaries, such as jquery will be loaded before your custom libraries, and before jquery.UI.

It is important to note that, bundling and minification will happen only when the application is on “Release” solution configuration. When in debug mode, bundling and minification will not happen.

Caching

Caching is a technique used to create a temporary faster storage of commonly used content. Caching can be done on two levels:

  • Server side
  • Client side

When done server side, we load commonly used content to memory, and serve from that place instead of other sources such as HDD, DB, etc. ASP.NET provides support for server side caching through HttpContext.Current.Cache. However, server side cache helps with dynamic content. On the other side, a good part of web page load comes from static content such as JavaScript/CSS files, images, etc. Static content can be cached on client side. By this, we tell the browser what content can be saved locally for some time, and until that date is expired, the browser should not ask the server for that content. We can influence client caching through using a Manifest file or by saying the IIS to write caching headers on responses for static content. This can be done by adding this code in Web.config file.


<system.webServer>
<staticContent>
<clientCache cacheControlMaxAge="365:00:00" cacheControlMode="UseMaxAge"/>
</staticContent>
</system.webServer>

This will tell the client to cache static content for a year from the date of request.

Image optimization

Optimizing images is a crucial point on web optimization. Most of the sites today have a lot of images, and by optimizing them a lot of page load size can be saved. Images can be optimized by using a image editing software. From Visual Studio, an extension called Image Optimizer can be used to optimize images.

Image optimizer extension for Visual Studio

This extension will allow you to right click an image, or an image folder and select Optimize images option, and it will do the optimization for you.

Gzip compression

Gzip compression is a server side functionality for compressing the content sent to a client. By default, compression is enabled from IIS7.5 and above. If compression is enabled on web server, then we can influence this behavior from web config by specifying this:

<system.webServer>
<urlCompression doDynamicCompression=”true”
doStaticCompression=”true”
dynamicCompressionBeforeCache=”true”/>
</system.webServer>

If values are specified to false, then this will stop compression.

If you are using IIS Express, then you can activate compression by executing this command from iis express folder

appcmd set config -section:urlCompression /doDynamicCompression:true

Number of requests

By HTTP specification, the browser should download at most 2 resources in parallel from the same host. Most browsers comply with this, or up to 4 parallel downloads. This means, if there is a high number of requests to retrieve the whole site, the page load time will be slow.

This bottleneck can be addressed in different ways. Bundling & minification is one way to decrease the number of requests. CSS Sprites as well as embedding small background images to CSS also will help on this. One other way to help this is by putting resources in different hosts. Even subdomains will help on this, for e.g. putting images, scripts, and css on different subdomains like this:

images.host.com
scripts.host.com
css.host.com

will make the browser believe it is downloading files from different resources and throw more threads for parallel downloads.

Content Delivery Networks (CDNs)

CDN is a way to optimize a web page as well as save bandwidth at the same time. Most common libraries used, one of them being jQuery, are hosted by CDN providers such as Microsoft, Google, etc. You can even use custom CDNs such as Akamai and host your content.

CDNs will optimize content download from a geographically close location to the requester. This will also benefit from the fact that the browser will see a different host from your side, and will throw another thread for downloading content from CDN.

The techniques mentioned in this post are by no means all what can be done to optimize ASP.NET web pages. There are many other techniques with more specific usage and help optimization of web pages.