Using Modernizr to Detect HTML5 Feature Support

The problem: you want to use HTML5 features or libraries on your site, but you also want to support older browsers. Fortunately there is a library called Modernizr to help. Because HTML5 is not simply one thing, it is not possible to simply detect HTML5 compatibility as a whole, and using browser specific checks is an archaic practice that is not a solid solution because some browsers do have partial HTML5 support which means those users would miss out on content regardless of browser support. Instead, the proper method is to detect support for specific features of HTML5. Modernizr makes this process easy.

An example of this would be HTML5 video. In order to use Modernizr to check for this it is very simple.

Example index.html:

view plain print about
1<!-- Place the include in the head after any CSS includes. --> <!-- This should in the head because HTML5 Shiv (included library to enable HTML5 elements in older versions of IE) must execute before the body and if the page uses any CSS from Modernizr this will prevent a "flash of unstyled content." -->
2<head>
3    <script src="modernizr.min.js" type="text/javascript"></script>
4</head>

Example script.js:

view plain print about
1if ( Modernizr.video )
2{
3    if ( Modernizr.video.webm )
4    {
5        // Try WebM
6    }
7    else if ( Modernizer.video.ogg )
8    {
9        // Try Ogg
10    }
11    else if ( Modernizr.video.h264 )
12    {
13        // Try H.264
14    }
15}
16else
17{
18    // No HTML5 video supported, at this point you can use a flash player or another solution.
19}

Modernizr works for many other HTML5 features as well miscellaneous things such as CSS3, geolocation, SVG, WebGL, and more. For more information and to download Modernizr, visit http://modernizr.com/.

Compatibility Cheatsheet for Web Developers

This is a great resource for checking compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

Bookmark it!

http://caniuse.com/

Video encoding in the HTML5 world

With HTML5 being so much more prevalent now than it has been in any time in the past, I thought it would be a good time to share some important wisdom. With HTML5, object and embed tags are going the way of the dodo. It's very sad, I know, but we must move on.

[More]

Developing Chrome Extensions - What you should know

Recently, I've delved into the world of Chrome extensions, partially because I'm interested in learning the technology, but more because the add-ons I wanted just didn't exist yet. If you're interested in getting started but want to know what you'll need to get moving I'd recommend the following resources:

https://github.com/EdGuiness/date-picker/wiki/What-I-learned-from-writing-my-first-Chrome-extension -This is a general explanations of some little things to look out for while developing and states what you'll need to get started.

http://developer.chrome.com/extensions/getstarted.html -The Chrome extensions development page for getting started. A required resource for specific questions including code samples.

http://tutorialzine.com/2010/06/making-first-chrome-extension/ -Finally, a basic tutorial covering the steps to creating an extension.

With these resources you should be well on your way to building your first Chrome extension as well. I was surprised how much of it was simply Javascript, and if your comfortable with that, you'll have no problem learning extensions. Have any other good resources? How about a browser extension that you shouldn't live without? Share it in the comments!

-Jonny

Keyboard Shortcuts in Chrome Developer Tools

Working more with jQuery has made browser development tools mandatory for the Ravenglass team. This Google+ entry has some of the most commonly-used ones keyboard shortcuts for Chrome's developer environment:

https://plus.google.com/u/0/115133653231679625609/posts/e4W2kdrFJY9

Binding delegated events with jQuery's .on()

Isaac and I got into a discussion today stemming from an interesting blog post from Raymond Camden. Raymond was discussing how he had run into issues binding events in jQuery mobile on the 'pageshow' event. While the solution he presents is adequate, there is another neat way to do this.

.on() is a very powerful function that combines the functionality of three recently deprecated methods: .bind(), .live(), and .delegate()

Below is a tutorial on how to bind delegated events.

Let's take a basic jQuery mobile snippet with 3 buttons.

view plain print about
1<div data-role="page" id="demopage">
2
3 <div data-role="header">
4 <a data-rel="back" data-icon="home">Home</a>
5 <h1>.on() Demo Page</h1>
6 </div>
7
8 <div data-role="content">
9 <button class="testButton" data-bacon="I accidently ate all the bacon!">Test 1</button>
10 <button class="testButton" data-bacon="I like bacon!">Test 2</button>
11 <button class="testButton" data-bacon="That was my bacon!">Test 3</button>
12 <div id="status"></div>
13 </div>
14
15 <div data-role="footer">
16 <h4>Footer content</h4>
17 </div>
18
19</div>

Now let's bind a click event to the buttons so they display the value of the data-bacon attribute in the status div.

view plain print about
1$(document).on('click', 'button', function()
2 {
3 $("#status").text($(this).attr("data-bacon"))
4 });

So what happens here?

We call .on() passing 'click' as the event type, 'button' as the selector to apply the event to, and a function to run when the event fires.

Now, when you click a button on the body, #status displays the particular data-bacon attribute of the clicked button.

You can view the complete sample here: http://jsfiddle.net/Bw9Kh/

Reference: http://www.raymondcamden.com/index.cfm/2012/4/1/Reminder--Use-the-proper-jQuery-Mobile-event-handler http://api.jquery.com/on/

Help Wanted: Web Application Developer

Ravenglass Technologies, Inc., located near Syracuse, New York (USA) is seeking a full-time Web Application Developer.

Degree in Computer Science or related field required. Must have demonstrable experience with HTML, AJAX, CSS, and SQL. Web application development experience in at least one of the following: ColdFusion, JSP, ASP.NET, or PHP. Mobile application development experience is a strong plus.

Professionalism and strong communications skills are a must. Salary plus full benefits, flexible commuting arrangements considered. Apply with resume and cover letter to jobs@ravenglass.com.

Help Wanted: Web Application Developer and Mobile Application Developer

These positions were filled in November 2010. Please check our Employment Openings page for the latest information about jobs at Ravenglass Technologies.


Ravenglass is seeking two application developers: one Web Application Developer and one Mobile Application Developer. Will consider contract, contract-to-hire, or full-time with salary plus full benefits. Flexible commuting arrangements considered

Web Application Developer Degree in Computer Science or related field required. Must have demonstrable experience with HTML, XML, AJAX, and SQL. Web application development experience in ColdFusion, JSP, ASP.NET, or PHP is also required. Mobile application development experience is a plus.

Mobile Application Developer Degree in Computer Science or related field required. Must have professional mobile application development experience with iOS or Android OS. Web application development (ColdFusion, PHP, ASP.NET) and HTML5 knowledge are a strong plus.

Professionalism and strong communications skills are a must. Apply with resume and cover letter to jobs@ravenglass.com.

Getting your site's bookmark icon (favicon) to work in IE and all other browsers.

We had some fun with this seemingly simple problem today. Setting up a new web site, we found that the "favicon" graphic (the little icon that show up next to your page's URL or title in a browser tab or address bar) was working for all browsers but Internet Explorer (IE).

It turns out that IE is very particular about the way that the favicon must be set. The graphic must be of type "ICO". While other browsers support GIF, JPG, and PNG icons, IE requires ICO.

Next, a reference to the icon must be included in the section of your HTML document, using the tag. The tag must have the attributes "rel", "type", and "href" set to the values "SHORTCUT ICON", "image/vnd.microsoft.icon", and the full URL (including http:// and your domain) to the ICO file.

view plain print about
1<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.yourdomain.com/images/favicon.ico" />

For more information, see the following links: