Beta8 and the new hosting model

In ASP.NET6 beta8, Helios (IIS native host) has been removed. Instead you can use Kestrel host and configure IIS server to talk to the host. This hosting model should be very familiar with people using ASP.NET 6 on Linux as they may have already been using this hosting model from previous betas. I won’t write much about the hosting model as Damian Edwards already has a detailed post on that here: https://github.com/aspnet/Announcements/issues/69
However, I will describe some change that everyone that are using Helios on Windows would have to make to their beta7 projects.
Read More

How to access current logged in user information outside of Drupal

If you are writing PHP code in Drupal and would like to access basic user information (e.g. UID, username), you can simply define the global variable $user and get the data from there:

However, it would be more complicated when you want to access the same information outside of Drupal system (but still in the same domain). For instance, you want to implement a PHP page to provide data to your JavaScript (AJAX or Web API style), and you want to have access to the current Drupal user directly inside your PHP code instead of passing the UID around (which is quite insecure in my opinion).

My problem is briefly demonstrated in the diagram below:

Access Drupal user from the outside

Read More

Rethink database design with Microsoft Azure

I am definitely not a database expert, so what I am writing here is only from my experience migrating all my applications to Microsoft Azure. If you think that I am doing something wrong or you know a better way, please feel free to leave a comment, so that I can learn more about living in the Cloud.

In this blog post I will write a little bit about what I have been using for a very long time before moving to Azure. Then I will write about my experience with SQL Azure and Azure Table Storage, specifically the problems that I have when migrating from SQL Azure (or MS SQL in general) to Table Storage. You can go directly to the last part if you would like.

Read More

SignalR, camel case and a lost of connection problem

The Problem

Today I went into a problem trying to configure SignalR to automatically serialize my data contracts in camel cases. Having done that once for Web API, I knew that it can be done easily by changing the contract resolver of JSON.NET to CamelCasePropertyNamesContractResolver. So I went ahead and incorporate the new ContractResolver to SignalR:

It looks good and everything run without a warning or error except that SignalR is no longer be able to connect to the server. I confirmed this by putting a breakpoint inside this function.

At first I did not realize the culprit was the camel case, so I try to dig deeper under the hood. I used the new diagnostic tool of IE11 to see what’s going on and compared with a previous version to see what’s going on. I could clearly see that the new version lack the 2 calls: connect and send although the negotiate when through successfully with a 200 response. (The first image was the SignalR calls in the new version and the second image was the SignalR calls in the old version)

image4

image12

I decided to dig even deeper into the negotiate response, and I found the culprit. The property names here suppose to be proper case, not camel (so it should be Url instead of url). So probably SignalR cannot interpret the response!

image8

The solution

This problem was actually solved properly by several people.

http://msmvps.com/blogs/theproblemsolver/archive/2013/03/14/signalr-and-camelcase-data-contracts.aspx

http://blogs.msdn.com/b/stuartleeks/archive/2012/09/10/automatic-camel-casing-of-properties-with-signalr-hubs.aspx

The basic idea was to change the contract resolver but limit the effect of camel case to only classes external to SignalR. I tried the solution in the first link and it worked like a charm! It’s great to learn that today!

What to do to make a responsive and Windows-integrated website on Windows 8.0 and 8.1

IE10 in Windows 8.0 has many nice features that help your website to look more like an app and also function better on touch screen devices. IE11 in Windows 8.1 improve those feature even further.

I have recently continued on one of my beta web app, http://bookmarks.vsoftstudio.com, built mainly to keep interesting URLs from all my devices (including Windows Phone), as well as to test all the amazing JavaScript framework and the new features of Internet Explorer. In IE10 and IE11, there are many new meta tags and APIs being introduced, but I will list some that you should definitely put in all your websites. Those are the ones that are very simple to use and really worth the little time spent.

Be aware that IE11 is still in preview, so those below relating to this version may changed in the future. So if you use them, make sure you re-visit your website after the final version of IE13 have been release to check all the preview features.

Pin tiles

You can pin any site onto your Start Screen from IE10 or IE11 Modern version (or Metro or Immersive as stated in IE11). In IE10, you can tap on the Pin button on the right of the address bar and choose Pin to Start. In IE11, it is slightly different: you will tap on the Favorite button (one with a star) that replaced the Pin button, then pinning the current site.

However, although you can pin basically any site, the pinned tiles will look very ugly if you do not provide some meta tags. IE simply gets the favicon and puts in the center of the tile; the background color is determined automatically by some “smart” algorithm, and the text is the current header of the page. The example below is when I tried to pin flickr.com to my Start Screen from IE11.

image

In IE10, you can overwrite the default behavior by providing 3 meta tags in your head section: application-name, msapplication-TileColor, msapplication-TileImage. Here is an example from my own page bookmarks.vsoftstudio.com.

<meta name=”application-name” content=”Bookmarks” />
<meta name=”msapplication-TileColor” content=”#276397″ />
<meta name=”msapplication-TileImage” content=”~/pin.png” />

The tile image must have the size of 144x144px (I have not tried otherwise), and it should be a transparent PNG since the background will have a little gradient from the top left to the bottom right corner. So now you could have a big logo with your own background color when the users pin your site.

image

The meta tags in IE10 also work in IE11. However, IE11 supports pinned tile resizing (all the 4 tile sizes of Windows 8.1), so it introduce 4 new meta tags: msapplication-square70x70logo, msapplication-square150x150logo, msapplication-square310x150logo, msapplication-square310x310logo. You may also realize that the sizes of the tile images are now the actual size of the tiles, so the image will cover the whole tile and it will be easier to design an amazing background as well.

In IE10, you can also put a badge icon or number on the bottom right corner. The badge icon will be set in a online XML file and that file will be polled in a defined periodic interval.

image

In IE11, you can even set a tile template in the XML file, and using multiple files at the same time, so it will look even more like a live tile from a native app.

You can read more on Pinned Tiles, periodic update, jump list, some new JavaScript APIs and see some examples here: http://msdn.microsoft.com/en-us/library/ie/bg183312(v=vs.85).aspx

@-ms-viewport

This one is not really a features, but a new way the Modern version of IE handle the width of the page.

If you have some experience with mobile web design, you may already know the idea of viewport. Basically, viewport will decouple the actual device width (and height)in pixel and the width (and height) that the page is rendered onto, so that a page does not look too small on a high DPI device. So it is like a virtual size of the browser.

The problem occurs when you implement a page with a responsive design and hope that it will look wonderful when you snap IE on the side. You will then quickly realize that all you get is a zoomed out version of the page, which looks awful and does not responsive as well. And you would not experience this in the desktop version of IE.

image

That problem is caused due to the way IE Modern handles viewport size. Basically, the viewport will be fixed at 1024 in width, no matter what the actual size on screen is. You can check this easily by outputting window.innerWidth by JavaScript (you can type javascript:alert(window.innerWidth) on the address bar).

The solution is to overwrite the default behavior by putting @-ms-viewport into your CSS. The easiest way is to put the below snippet on top of your main CSS file.

@-ms-viewport {
    width: device-width;
}

This is basically tell IE to set the viewport size exactly as the pixel size of the browser on screen. Then you can try to snap IE10 or resize IE11 and see the page changes exactly as you have expected (the width will now show as 320px when you snap the page).

image

You can also put @-ms-viewport inside the @media block, so that each block will correspond to 1 viewport size. More on this here: http://msdn.microsoft.com/en-us/library/ie/hh708740(v=vs.85).aspx.

There’s one catch here! IE10 on Windows Phone will recognize @-ms-viewport and react the same way. It is very stupid and will cause the page’s elements become very small on a Lumia 920 (or any at a similar DPI). You will find the same problem on www.modern.ie as well. It is considered as a bug in IE10 for WP8 (IE9 for WP7 is not affected), but I can confirm that it is not fixed in GDR2 update.

My current solution is to check the user agent string and only add those code when it is not a windows phone 8 (or only add when it is IE metro). I still don’t know how to properly solve this problem, so if you did figure something out, please let me know in the comments below! I could see that www.microsoft.com does not have that problem, but I am not sure how they fix that yet. I guess they use some JavaScript to change the width after the page is loaded.

Even More

There are even more interesting stuffs including Prerender, Prefetch and Flip Ahead that you may want to try on your website. You can see many demoes and documentations at http://ie.microsoft.com/testdrive/!