Month: August 2011

HTML5 Feature Support Detection

HTML5 is a collect of individual features, that currently are either supported or not by the current array of browsers. The best approach I’ve found at this time, is to write for HTML5 and use other tools to downgrade graceful.

The following are some detection techniques that are in use today:

Input Types: HTML5 defines over a dozen new input types for use in web forms. For determining which of these new form elements is supported use the following code, per element (yes I know, that’s a pain in the ass, but you gotta do what you gotta do)

[sourcecode language=”javascript”]
var input = document.createElement("input");
input.setAttribute("type", "color");
return i.type !== "text";
[/sourcecode]

Aha, but if you don’t want to write these input checks, Modernizr has a hash it builds to detect all of the new input types.

[sourcecode language=”javascript”]
if (!Modernizr.inputtypes.date) {
// ?? <- See example of this.
}
[/sourcecode]

Video Formats: Video formats, or codecs, is the algorithm which is used to encode video. Checking if a video element object has the canPlayType for a particular codec will determine support.

[sourcecode language=”javascript”]
function supports_video() {
return !!document.createElement(‘video’).canPlayType;
}
[/sourcecode]

Again Modernizr can make this detection much simpler.

[sourcecode language=”javascript”]
if (Modernizr.video) {
if (Modernizr.video.ogg) {

} else if (Modernizr.video.h264) {
// H.264
}
}
[/sourcecode]

Canvas: The canvas element is a resolution independent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly. To check for canvas attempt to create a canvas element on the document object and retrieve the context. Context dictates if there is or is not context support.

[sourcecode language=”javascript”]
function supports_canvas() {
return !!document.createElement(‘canvas’).getContext;
}
[/sourcecode]

Of course, there is a Modernizr Function to determine support too.

[sourcecode language=”javascript”]
if (Modernizr.canvastext) {
// let’s draw some text!
} else {
// no native canvas text support available
}
[/sourcecode]

Geolocation: Geolocation is the function of determining where you are by using the UP address, wireless network connection, cell tower, GPS software, or other device. The Geolocation Working Group is actually working on this feature, not particularly the HTML5 Working Group, but the feature is closely correlated to the entire HTM5 spec and is currently being integrated into most browsers.

The code snippet below can be used to determine if geolocation is available.

[sourcecode language=”javascript”]
function supports_geolocation() {
return !!navigator.geolocation;
}
[/sourcecode]

If you don’t want to write this particular function, you could also use the Modernizer Library.

[sourcecode language=”javascript”]
if (Modernizr.geolocation) {
// process the location…
} else {
// no native geolocation support, so start hacking!
}
[/sourcecode]

Service & Scheduler: Using Topshelf, Quartz, & Other OSS Bits Part 2

In the previous entry in this series I setup a service using TopShelf. Now it is time to jump into scheduling with Quartz. I’ve started an entirely new service to work through an example of this service functionality.

To read more about Quartz.NET from the source, check out the Quartz.NET Project Site or the Github Repo.

Open up Visual Studio and create another Windows Console Project. Next add a reference to Quartz.NET with Nuget.

Adding Quartz.
Adding Quartz.

Next add a class called SomeJob as shown.

[sourcecode language=”csharp”]
using System;
using Quartz;

namespace quartz
{
public class SomeJob : IJob
{
public SomeJob() { }

public void Execute(JobExecutionContext context)
{
Console.WriteLine("DumbJob is executing.");
}
}
}
[/sourcecode]

Next add and change the code in Program.cs to the code below.

[sourcecode language=”csharp”]
using System;
using Quartz;
using Quartz.Impl;

namespace quartz
{
class Program
{
static void Main()
{
var schedFact = new StdSchedulerFactory();

var sched = schedFact.GetScheduler();
sched.Start();

var jobDetail =
new JobDetail("myJob", null, typeof(SomeJob));

var trigger = TriggerUtils.MakeSecondlyTrigger(5);
trigger.StartTimeUtc = DateTime.UtcNow;
trigger.Name = "myTrigger";
sched.ScheduleJob(jobDetail, trigger);
}
}
}
[/sourcecode]

NOTES: Working code available on Github under my Quartz Repo.

Service & Scheduler: Using Topshelf, Quartz, & Other OSS Bits Part 1

This how-to entry will detail the steps for getting Topshelf installed, running, and a schedule integrated and timed appropriately using Quartz. Once that is complete I’ll go over how to get custom schedules added to the service.

Topshelf

To get Topshelf up and running open up Visual Studio, start a Windows Console Project, and then use Nuget (if you don’t have Nuget installed, I suggest doing that ASAP, you’ll need it to follow along with any reference additions).

Get Topshelf Through Nuget
Get Topshelf Through Nuget

Once you have Topshelf and associated references added via Nuget create a new class file called StatusCheckIn and add the following code.

[sourcecode language=”csharp”]
using System;
using System.Timers;

namespace Sample.Services
{
public class StatusCheckIn
{
readonly Timer _timer;

public StatusCheckIn()
{
_timer = new Timer(5000) { AutoReset = true };
_timer.Elapsed += TimeHappened;
}

static void TimeHappened(object sender, EventArgs eventArgs)
{
Console.WriteLine("Status Time: {0} checking in.",
DateTime.Now);
Console.WriteLine("Sender Type: {0}",
sender.GetType());
Console.WriteLine("Event Argument Type: {0}",
eventArgs);
}

public void Start()
{
_timer.Start();
}

public void Stop()
{
_timer.Stop();
}
}
}
[/sourcecode]

After adding the StatusCheckIn Class, open up the Program.cs file and add or change the following code.

[sourcecode language=”csharp”]
using Topshelf;

namespace Sample.Services
{
class Program
{
static void Main()
{
HostFactory.Run(hostConfigurator =>
{
hostConfigurator.Service<StatusCheckIn>(
serviceConfigurator =>
{
serviceConfigurator.SetServiceName("TS");
serviceConfigurator.ConstructUsing(
name => new StatusCheckIn());
serviceConfigurator.WhenStarted(tc => tc.Start());
serviceConfigurator.WhenStopped(tc => tc.Stop());
});

hostConfigurator.RunAsLocalSystem();
hostConfigurator.SetDescription("Sample Host");
hostConfigurator.SetDisplayName("Display Name");
hostConfigurator.SetServiceName("Topshelf Service");
});
}
}
}
[/sourcecode]

If you run into an odd reference error, it is likely that VS2010 has determined you want the client profile of .NET 4.0 again. If anyone at MS on the VS2010/.NET 4.0 reads this, we DO NOT want this to be the default. It’s ridiculous that it gets set as default without some type of manual change. But I digress, open up the properties of the console/service project and set it under the dialog as shown.

Setting the appropriate .NET 4.0 Version in the Properties Dialog
Setting the appropriate .NET 4.0 Version in the Properties Dialog

NOTES: Working code available on Github under my Topshelf Repo.

JavaScript Development Environments (Unabridged Results)

About two weeks ago I put together an initial list of JavaScript Tools & IDEs. Over the last week at OSCON, talking to a number of people who are into and using JavaScript on a daily basis, I’ve come up with a larger list of tools and IDEs.

Browsers On Your Dev Machine

Tools I’m Using…

Tools I’m Trying Out…

Suggestions From The Twitterverse! Thanks Everybody.

  • JoshuaPoehls (Joshua Poehls) JS Fiddle, Jasmine, JS Test Driver
  • davidalpert (David Alpert) Firebug + Aptana
  • xinmyname (Andy Sherwood) Chirpy, Web Workbench
  • encosia (Dave Ward) VS2010, PhpStorm, Notepad2, Vim, & Textmate depending on the project…
  • danemorgridge (Dane Morgridge) Macvim, Textmate, and Chrome
  • lazycoder (Scott Koon) WebStorm, vim Chrome dev tools, Google Closure Compiler
  • jerrysievert (Jerry Seivert) Textmate, jshint bundle which activates on save.
  • liammclennan (Liam Mclennan) Sublime Text 2, CoffeeScript and Shell Scripts
  • lucisferre (Chris Nicola) Vlm, js Vlm Plugins, & Jetbrain’s Stuff.

Bing Maps Data Center Time Lapse

This is pretty cool. A minute and a half time lapse of a data center build out in Colorado. It’s kind of interesting, in a hardware hacker geek kind of way.  🙂