Blog


Insolated Storage Settings Helper for Windows Phone

Decided that I’d share a really simple helper class that I often use in my Windows Phone apps. It’s called IsolatedStorageSettingsHelper and it only has three methods:

  • T GetItem<T>(string key) – gets the object with the specified key from the IsolatedStorageSettings. If there isn’t an object with that key it will return null. If the object is not of the type specified then it will return a new instance of T.
  • void SaveItem(string key, object item) – saves the item passed as a parameter in the IsolatedStorageSettings using the specified key.
  • void SaveItems(Dictionary<string, object> items)  – used for saving multiple items at once. All the items in the dictionary are saved in the IsolatedStorageSettings with their respective keys.

This is not much, but that’s all I ever needed for my apps. Hope it will be of help. Code below.

public class IsolatedStorageSettingsHelper
{
   public static void SaveItem(string key, object item)
   {
      IsolatedStorageSettings.ApplicationSettings[key] = item;
      IsolatedStorageSettings.ApplicationSettings.Save();
   }

   public static void SaveItems(Dictionary<string, object> items)
   {
      foreach (var item in items)
         IsolatedStorageSettings.ApplicationSettings[item.Key] = item.Value;
      IsolatedStorageSettings.ApplicationSettings.Save();
   }

   public static T GetItem<T>(string key)
   {
      T item;
      try
      {
         IsolatedStorageSettings.ApplicationSettings.TryGetValue<T>(key, out item);
      }
      catch (InvalidCastException ice)
      {
         return default(T);
      }
      return item;
   }
}



FIX: Firefox tabs having strange colors in Windows 8

This graphics glitch is a known bug in Firefox running on Windows 8. It appears to manifest only on machines that run on nVidia graphics cards and it is caused by the browser using hardware acceleration.

The fix is simple – disable hardware acceleration from your browser’s settings menu and the strange colors will be gone – and so will be your browser’s hardware acceleration unfortunately. But that’s all we can do until the bug gets fixed.

You can track the issue on bugzilla here: https://bugzilla.mozilla.org/show_bug.cgi?id=686782

And just in case you can’t find the menu where to disable hardware acceleration: open the options window (Firefox – Options or Tools – Options) – Advanced – General – and here uncheck the ‘Use hardware acceleration when available’ checkbox. That’s it.




AdMob crashing Windows Phone apps. What is the alternative?

Not long ago I’ve published my first app using the devcenter developer account and not the global publisher – and just a couple of days later (or should I say weeks) I started noticing crash reports for my app.  Downloaded the stack trace data in hope that I could find out where the issue was but no luck – it gave me almost no info about the cause. All I know is that it has something to do with the browser.




Mobile HTML5 and jQuery webinar week

There’s a series of 3 webinars coming up two weeks from now about HTML5 and jQuery and how you can take advantage of them in building apps across multiple browsers, platforms and devices.

The three webinars will take place on 19, 20 and 12 of June at 11:00 AM EDT and will last for 1 hour and 15 minutes:

  • Getting Started with HTML5 & jQuery – June 19th
  • Working with Data Using igDataSource – June 20th
  • Building a Real World App – June 21th

Presenting will be Angel Todorov and Jason Beres.

Registration is free and can be done by following this link. You can also find more details about the event by visiting HTML5/jQuery Webinar Week.




Windows 8 and Secure Boot – What if your PC doesn’t support it?

So today, while (by mistake) attempting to upgrade my Windows 7 to Windows 8 I ran into a compatibility check with 6 errors including one that states:

Secure Boot isn’t compatible with your PC

At first it gave me the creeps thinking that I won’t be able to install Windows 8 although the Consumer Preview ran just fine (with a few exceptions) but then, a couple of searches later, I realized that this won’t be a problem at all. Secure Boot is a feature that you can just skip and everything will work just fine.




8bit Google Maps for NES

Google has long neglected one of the most popular and best sold devices ever – but all that ignorance ends today as Google releases their first NES product: Google Maps 8bit for NES.

The product has all of the features you got used to on the desktop version, including the street view:

  • search for a street or place
  • directions from one place or another
  • voice search
  • street view
  • and the ability to save routes and locations

All this is made possible by Google’s cloud which is converting

For a quick trial head over to http://maps.google.com/ and click on the quest button at the top-right of the screen. Or watch the video above.




3D Animations Using Pure CSS3

What determined me to write this post and a few others was this page (works in Chrome and Safari only). Amazing what you can do by using only CSS. So, let’s take a look under the hood – the css for that effect looks like this:

#movieposters li { display:inline; float:left;
	-webkit-perspective: 500; -webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }
#movieposters li:hover { -webkit-perspective: 5000; }
	
#movieposters li img { border:10px solid #fcfafa; -webkit-transform: rotateY(30deg);
	-moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888;
	-webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }
#movieposters li:hover img { -webkit-transform: rotateY(0deg); }

Kind of messy. But if we strip out the borders and shadows and arrange the code a bit, you’ll see it’s actually not that complicated.

#movieposters li { 
	display:inline; float:left;
	-webkit-perspective: 500; 
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; 
	-webkit-transition-duration: 0.5s; 
}

#movieposters li:hover { 
	-webkit-perspective: 5000; 
}
	
#movieposters li img { 
	-webkit-transform: rotateY(30deg);
	-webkit-transition-property: transform; 
	-webkit-transition-duration: 0.5s; 
}
#movieposters li:hover img { 
	-webkit-transform: rotateY(0deg); 
}

As you can see what’s being done are basically two transitions:

  • a perspective transition on the list item from a value of 500 to a value of 5000 on hover with a duration of 0.5s
  • and a rotate transform transition on the image inside the list item, with the same duration, from 30 degrees to 0 degrees

You can play with the values and see what other nice effects you can obtain. Maybe even leave a comment with a link to the nice effect that you’ve obtained.

Making it work in Firefox

Now what really intrigued me was the fact that it didn´t work in Firefox. Why? After doing a couple of searches on Google the answer became obvious, -webkit- commands are for webkit-based browsers while Firefox requires commands prefixed with -moz-. I guess I should’ve known that already…

So I’ve added new lines for each command and replaced the -webkit- with -moz- thinking that it will work. It did, except for the fact that it had no animation. Couple of searches later and still no answer, so in the true spirit of a developer I typed in stackoverflow.com and asked my question. A couple of hours later I had my first answer and fortunately it held the solution to my problem (check it out here if you want). The transition-property had to be a -moz- property as well. Simple properties like transform or perspective don’t work like they do in webkit so I had to use -moz-transform and -moz-perspective instead.

So here’s the complete CSS code that I’ve ended using:

#movieposters li { 
	display:inline; float:left;
	-webkit-perspective: 500; 
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; 
	-webkit-transition-duration: 0.5s; 
	-moz-transition-duration: 0.5s; 
	-moz-perspective: 500; 
	-moz-transform-style: preserve-3d;
	-moz-transition-property: -moz-perspective; 
}

#movieposters li:hover { 
	-webkit-perspective: 5000; 
	-moz-perspective: 5000; 
}
		
#movieposters li img { 
	-webkit-transform: rotateY(30deg);
	-webkit-transition-property: transform; 
	-webkit-transition-duration: 0.5s; 
	-moz-transition-duration: 0.5s; 
	-moz-transform: rotateY(30deg);
	-moz-transition-property: -moz-transform; 				
	width: 210px;
}

#movieposters li:hover img { 
	-webkit-transform: rotateY(0deg); 
	-moz-transform: rotateY(0deg);
}

Also, you can check out a demo here: 3D CSS Animation




CSS3 Textured / Noisy Gradient Background

Textured gradient backgrounds are made by using gradients and noise images. For CSS gradients you can use a generator like this one. For noise images, again, you can use this noise generator.

The trick for making textured backgrounds lays in combining the CSS background properties. Instead of using only gradients as a background or only images, why not combine them like this:

background-image: url('../images/noise.png'), -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background-image: url('../images/noise.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background-image: url('../images/noise.png'), -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background-image: url('../images/noise.png'), -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background-image: url('../images/noise.png'), -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background-image: url('../images/noise.png'), linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */

Yea, it’s possible. Just use the background-image property as usual, add a semicolon and then a gradient. Use the noise generator to generate the image and the gradient generator for creating your desired gradient.

You can also check out a demo here: Textured / Noisy Gradient Background Demo




CSS3 Custom Fonts

CSS3 allows the use of custom fonts trough the @font-face rule. They are really easy to add and the syntax looks like this:

@font-face {
	font-family: someFont;
	src: url('path/font.ttf');
}

This declares a font for use within your web page. An example would be:

@font-face {
    font-family: CODEBold;
    src: url('../fonts/CODEBold.otf');
}

Now to apply the custom font to your text you can use the font-family property:

<h1 style="font-family: CODEBold;">Start Debugging</h1>

A great source for custom fonts would be dafont.com
Check out a demo here: Custom Fonts Demo




Metro TimeBlock

Metro TimeBlock is a time display control that I’ve made which should allow you to display time in any color and with any background you want. Size is also adjustable and you can choose to display either the current time or a time of your own.

Metro TimeBlock

Properties of the control:

Time – takes in any DateTime object. The control will display the Time you provide within that DateTime object. Leave blank if you want to display the current time.

Spacer – this is the string to display between the hours and minutes and between the minutes and seconds. Use spacers like “:” or ” “.

Size – you can choose from Small, Normal, Medium, MediumLarge, Large, ExtraLarge, ExtraExtraLarge and Huge. Chose to do this instead of allowing FontSize because this way I can also control the way the background blocks look.

Foreground – tells the control what color to use to display the time.

Fill – sets the background color of the control (the square-like blocks).

That’s about it. If you got any problems with it / need help, leave a comment below. The download link is also below and it contains both the control and a couple of samples.

Download for Windows Phone