Blog


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




How to install Windows 8 using a USB drive

To get you started you will need an ISO image of Windows 8 and also the Windows 7 USB / DVD Donwload Tool which will help you put that image on the USB stick. You can download both of them by clicking their respective images below.

Windows 8 Developer Preview 64bitWindows USB Tool

Install the Windows 7 USb Tool after download finishes. Don’t worry about the name of the program which says Windows 7, it works just fine with Windows 8 as well.

Windows Format WindowNow that you have all the needed files insert your USB drive into the PC, right click it and select format. Most tutorial’s I’ve seen say to format it to FAT32 otherwise it will not work – tho when I use the tool to copy the windows files to the USB drive, the tool formats my drive to NTFS. Strange, but whatever.

Quick format it as FAT32 and don’t forget to backup your data!

Now that you’ve formatted the USB drive open up the Windows 7 USb Tool, hit Browse and select the ISO image you’ve just downloaded.

Windows USB Tool Choose an ISO File

Click Next and on the next screen asking you to select the media type choose USB device. As you can see you are also given the option of writing the image directly to a DVD. For this how-to we will stick with the USB.

Windows USb Tool Choose Media Type

Choose the USB device on which you want the tool to put the install files and hit Begin copying.

Windows USB Tool Choose USb Drive

The tool will now start copying the windows install files to your USB drives.

Windows USB Tool Copying Files

Once the entire process is complete and if you got no errors during it restart your computer, bring up your boot menu (F12 in my case – during POST) and select the USB drive. If your USB drive doesn’t show up in that list, go into your BIOS and make sure that Legacy USB Support is Enabled.

Notes:

you can not make a bootable USB drive with 64bit Windows on it if you are currently running a 32bit operating system. You need to have a 64bit operating system in order to make a bootable USB drive with 64bit windows on it.

– the USB drive has to be large enough. 4 GB will do for the simple 32bit and 64bit versions but for the 64bit containing the developer tools you will need a 8 GB drive – because the size of the ISO alone is 4.7 GB.

– make sure you backup the data you got on that USB drive before formatting it. Otherwise it-s lost. And also, carefully choose the partition on which you install the OS, not to overwrite your good Windows install by mistake – because in this case also, all data will be lost.

And one last thing: Published from a fresh copy of Windows 8. So you know for sure that it works.




Metro and WinRT Webinar on February 2nd

Are you a Silverlight / WPF developer? Want to start developing for Windows 8 as well?  If that’s the case, this upcoming SilverlightShow webinar is guaranteed to give you a jump start. The webinar will teach you how to use your Silverlight / WPF experience to build amazing Windows 8 apps by presenting the similarities between Silverlight / WPF and XAML based Metro apps. This will be done by looking at a working Metro app containing most of the things you were used to in Silverlight / WPF.

Also, as usual, SilverlightShow is giving away 6 eBooks:

Good luck!

Presenter: Gill Cleer
Webinar registration page: Metro and WinRT for the Silverlight/WPF Developer
More details about the webinar: SilverlightShow




Extension Method: Hex To Color

Below you have an extension method that can help you convert any hex color code to a Color object.

public static Color ToColor(this string hexColor)
{
   return Color.FromArgb(
      Convert.ToByte(hexColor.ToString().Substring(1, 2), 16),
      Convert.ToByte(hexColor.ToString().Substring(3, 2), 16),
      Convert.ToByte(hexColor.ToString().Substring(5, 2), 16),
      Convert.ToByte(hexColor.ToString().Substring(7, 2), 16));
}

The method above can only convert 8 characters ARGB color codes.
In order to convert simple RGB codes too we will check for the length of the string (9 = ARGB and 7 = RGB) and in case it’s 7 we will add the alpha to our string as FF ( 255 – opaque) and only then return the color.

public static Color ToColor(this string hexColor)
{
   string tempHexColor = string.Empty;
   if (hexColor.Length == 7)
      tempHexColor = "#FF" + hexColor.Substring(1,6);
   return Color.FromArgb(
      Convert.ToByte(tempHexColor.Substring(1, 2), 16),
      Convert.ToByte(tempHexColor.Substring(3, 2), 16),
      Convert.ToByte(tempHexColor.Substring(5, 2), 16),
      Convert.ToByte(tempHexColor.Substring(7, 2), 16));
}

We should also do something in case the hex color code is not actually a hex color code. So add another if statement after the one we added already and check again for the length of the string; if it’s not equal to 9 then it’s not good so feel free to return any color you want (I will return transparent). The final method looks like this:

public static Color ToColor(this string hexColor)
{
   string tempHexColor = string.Empty;
   if (tempHexColor.Length == 7)
      tempHexColor = "#FF" + hexColor.Substring(1,6);
   if (tempHexColor.Length != 9)
      tempHexColor = "#00000000";
   return Color.FromArgb(
      Convert.ToByte(tempHexColor.Substring(1, 2), 16),
      Convert.ToByte(tempHexColor.Substring(3, 2), 16),
      Convert.ToByte(tempHexColor.Substring(5, 2), 16),
      Convert.ToByte(tempHexColor.Substring(7, 2), 16));
}

How to use it:

string myHexString = "#78196DFD";
Color myColor = new Color();
mycolor = myHexString.ToColor();