How searching has changed in Windows 8.1

There have been many welcome changes from Windows 8.0 in Windows 8.1, both in the users and developers’ perspective. However, I believe not all of those changes are really improving the user experience (I still think some are only make to dodge the media critics). One of those is the introduction of the hero Search screen, where your search result is now the accumulation from installed apps, Windows settings, local files, Windows Store and Bing results (including some big images and information about the recognized entity, Web images, Web videos and websites). I remember they said about one page where you could get the search results from everywhere, but I still do not see search results from data inside my own apps.

Continue reading my comparison and opinion

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/!

Commands with Entity Framework’s migration

Supporting for Code-First and Code First Migration are two of many useful features Entity Framework provides us with. However, as far as I know, using Code First Migration still requires us to open the Package Management Console and type in commands. Text commands are very useful when you want to batch or automate them or save them for later use, but they are really painful for inexperienced users.

I found a very good blog post where the guy lists all the necessary commands with Code First Migration with some extra explanation and comments as well. It should be good for anyone who forget some parameters or forget the command get-help.

http://coding.abel.nu/2012/03/ef-migrations-command-reference/

Unfortunately, the blog post does not state how to roll back all the migrations (this is different from re-creating an empty database, especially when EF supports multiple DbContext on one database already). I tried to do that when my database was created in EF6-alpha3, and upgrading to EF6-rc1 required rolling back and removing all migrations created by the alpha version. A quick search on Bing get me the answer I need:

Update-Database -TargetMigration:0

Or

Update-Database -TargetMigration:$InitialDatabase

This one and all the commands in the blog post above should help you to work with Code First Migration in a breeze.

Windows Store Protocol to check for app updates

If you have used a Nokia Lumia phone, you may already see how Nokia forces the users to update their apps. They put the blank page with a background image and an Update button right after the splash screen (if there is one); tapping the button will get you to the app’s detail page in Windows Phone Store and you can update the app directly there. On the developer side, to do the same thing, you just have to use the API exposed through MarketplaceDetailTask to jump to that detail page.

The situation seems to be more complicated on Windows 8 with the Windows Store. Unlike the Windows Phone Store, going to the app’s detail page in Windows Store will not show you any update buttons. Instead, you will have to go to Settings charm of the Store, choose App updates and tap on Check for updates. How to do all these steps programmatically from your app (to help your users to quickly update the app)?

I had thought about showing a screen with screenshots telling people to do all the above steps by themselves, but it seemed to be too troublesome for the users. Then I saw an ads on Bing Sport app showing that there was an update in the Store, tapping on the ads jumped us directly to the Check for updates page, which is so nice and convenient! Therefore, I realized the Windows Store must already handle some special kinds of protocols or URL formats for that, and after some times trying, I figured out the magic words:

ms-windows-store:updates

Basically, you will just have to call that URL by a Launcher and the Store will start checking for app’s updates immediately!

Update: I have also checked that URL in Windows 8.1 and can confirm that it still works in the new Store.

DEP0700: Registration of the app failed. Another user has already installed a packaged version of this app.

If you are developing Windows Store apps and you have multiple accounts on your laptops or PCs, you may be familiar with this problem. This happens when you try to install or deploy an app on your testing devices when the app is already deployed (by Visual Studio or PowerShell) on another user account. You will have to log in to that account to remove this app first. Sound troublesome, at least it works.

But what if you have just removed that problematic user account without uninstalling the app beforehand? I got into that weird situation when I try to test Project Timeline on a new testing account and delete the old one: I could neither deploy the app (even install from the Store) nor uninstall from the deleted user account.

Wandering around the internet, I saw several suggestions to solve this. One of them was to simply change the family name, which was not very convenient for me since I wanted to test the IAPs as well. Trying different other suggestions, I finally found a good solution: just remove the PackageRepository.edb file, and everything worked normally again. You could read the details in this blog post:

http://blog.falafel.com/Blogs/JonathanTower/j-tower/2013/04/04/fixing-windows-8-deployment-error-error-dep0700-registration-of-the-app-failed-

I have also come up with another solution which does not actually solve my problem but provide a way to remove all the deployed apps quickly.

http://stackoverflow.com/questions/13865930/how-to-uninstall-an-app-that-another-user-installed

Update: I have a problem now. After a while, all the Windows Store apps (except IE) on my tablet stop working: they stopped showing up when I tapped their tiles and the event viewer showed problem with their license. I am still not sure if removing the PackageRepository.edb caused the problem or my messing around earlier did. I have tried to remove the developer license, reinstall it again, remove old user accounts, add new ones, and some others, but only Store app and newly installed apps were working then. I finally have to refresh the devices. Luckily, the problem was then solved and all the Windows Store apps were keep intact.