Detects Support for HTML5 and CSS3 (cont’d)

Previously I blog about the same topic “Detects Support for HTML5 and CSS3” but I did not cover much on the CSS3. As a follow up now we look into it. Similar to HTML5, we can use Modernizr to detect CSS3 support. It is like having an if-statement in the css and the syntax is easy to use. There are 2 things you can do with Modernizr in this scenario: 

  1. Automatically load the style supported by the browser. This can be achieve by defining 2 set of classes (see example below); and
  2. Perform additional action when the CSS class is not supported. This can be achive by checking the JavaScript property (see example below).

The snippet below show how to define the CSS classes.

  .borderradius div.somediv {
   /* properties for browsers that
      support border radius */
  }
  .no-borderradius div.somediv {
   /* optional fallback properties
     for browsers that don't */  
  }

Detect CSS3 Classes & JS Property for Border Radius
As you can see the syntax is simple, as add “no” to handle the non-supported style. Find out more about the features that can be detected using Modernizr in the documentation (http://www.modernizr.com/docs/). The figure below shows Modernizr in action and the full example is available below. 

Detects CSS3 - Modernizr in Action
<!DOCTYPE html>
<html>
  <head>
  <title>Detect CSS3</title>

 <style type="text/css">
  body {
      margin: 0;
      font-family: Helvetica;
      background-color: #ddd;
  }
  div.somediv {
   margin: 50px;
  }
  
  .borderradius div.somediv {
     background: #fff;
     border-radius: 30px 30px 0 0;
     -moz-border-radius-topleft: 30px;
     -moz-border-radius-topright: 30px;
     -webkit-border-top-left-radius: 30px;
     -webkit-border-top-right-radius: 30px;
     width: 300px;
     padding: 30px;
  }
  .no-borderradius div.somediv {
     background: #000;
     color: #fff;
     border: 1px solid #fff;
     width: 300px;
     padding: 30px;
  }
 </style>

</head>
<body>

<div id="outer">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae consequat tellus. Nulla non velit leo, a pellentesque arcu. Donec aliquet urna in nibh consectetur aliquet non id purus. Curabitur vitae lacus ut nisl elementum sollicitudin. Etiam lorem nunc, iaculis in vehicula vel, convallis in nisi. Quisque diam risus, pharetra sed hendrerit ac, scelerisque non quam. Sed ac ligula nulla, vel lobortis purus. Suspendisse potenti. Integer sit amet diam quam, vitae posuere ligula. Vestibulum lorem nibh, vehicula ac venenatis eu, ornare pharetra tortor. Aliquam sed massa sem, non viverra enim. Integer augue odio, laoreet at posuere sit amet, convallis nec nisl. Donec vel purus arcu, ac venenatis mi.
</div>

</body>
</html>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js%22%3E%3C/script">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script</a>>
<script language=JavaScript src="js/modernizr-1.5.min.js" type="text/javascript"></script>
<script>
 $(document).ready(function () {
  if (!Modernizr.borderradius)  {
   alert('Border Radius is not supported in this browser.\n Do something about it ');
  }
 });// end document ready

</script>

Enter WhitherApps

 Previously I blog about Sencha and did mentioned about the advantages of building mobile web apps as compared to native client apps. HTML5 has great potential in building mobile we apps and James Pearce is ready to show us that potential. He and “his team” started WhitherApps

WhitherApps is a bandwagon-busting experiment. I believe there are far too many native client apps which could have been far better written as mobile web apps. What we’re going to try and do is take a few examples, apply a little reverse-engineering, and rewrite them, warts and all, with web technologies.

The first project for the team is to rewrite the BBC News iPhone/iPad app into a web app based on HTML5. He has already started 3 blog post on the BBC News apps, Part1, Part2 and Part3. If you see the screenshot below he has gotten pretty far.

BBC News (HTML5)
BBC News (iPad)

If you are into HTML5 and mobile apps developer I recommend you to read his blog and follow his journey to rewrite the BBC News apps. Although native client apps will not wither away, I am sure to see more of such project.

jq Nearby Tweet Plugin

After I did the Nearby Tweet makeover, I kinda ran out of idea. But the past few days, I looked into making it more alive and more dynamic. The result is my very own Nearby Tweet Stream. I am sure if stream is the right word, but it does looks like it. This time my prototype is using jQuery (1.4.2) and created a plugin. Wohoo!!

The idea is kinda simple and first plugin. I used 2 set of timer, (1) to retrieve the nearby tweet and store it into queue and (2) to retrieve from queue and display. Did a sketch below

The plugin is still in its infant state and only accept geolocation as parameter. I thought of registering it into jq plugin repository later, for now testing and more testing. The minified version is available here and you can see it live at jqNearByTweetStream. (For better experience, try it in HTML5-ready browser as it requires geolocation).

Here is an example of how to use the plugin.

 <!DOCTYPE html>
 <html>
 <head>

 <!-- JQuery JS -->
  <script language=JavaScript src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script language=JavaScript src="js/jquery.nearbytweet.stream.0.1-min.js" type="text/javascript"></script>
  <script language=JavaScript src="js/modernizr-1.5.min.js" type="text/javascript"></script>
 <style type="text/css">
 #TwitterStream { height: 400px;  margin: auto; width: 500px }

 </style>

</head>
<body>

<div id="TwitterStream"></div>

</body>
</html>

<script type="text/javascript">

$(document).ready(function(){
  if (Modernizr.geolocation){
   navigator.geolocation.getCurrentPosition(function(position) {
     var options = {
      latitude: position.coords.latitude,
      longtitude: position.coords.longitude
     };
   $('#TwitterStream').jqNearbyTweetStream(options);
   });
 } else {
  window.console && console.log('the browser does not support HTML5');
  $('#TwitterStream').jqNearbyTweetStream();
 }
  
});
// end document ready

</script>

As you can see above, It is very simple to use the plugin. Must find time to update the plugin, wait for new release ho…ho…ho. Do leave comment if you like the plugin 🙂

JQuery Mobile Project

Finally, JQuery teams embark into Mobile JS Framework. On the 11 Aug 10, John Resig announced the JQuery Mobile Project.  http://jquerymobile.com/

JQuery Mobile

The jQuery project is really excited to announce the work that we’ve been doing to bring jQuery to mobile devices. Not only is the core jQuery library being improved to work across all of the major mobile platforms, but we’re also working to release a complete, unified, mobile UI framework

I have been fan of JQuery and look forward to the Mobile version. The framework will work on all popular smarphone and tablet platforms such as Android, iOS, BlackBerry, Windows Phone, Palm WebOS, Symbian, MeeGo and Bada.

So far, there are a few others who are in beta now for example Sencha Touch and YUI 3.2. Let’s see which one will be the lightest and fastest.

Progressive Enhancement using EnhanceJS

The first time I read about designing with progressive enhancement, I was a bit confuse. So, I did a bit of digging around and I find it interesting. You can call Progressive Enhancement t a coding methodology and it is simple in theory: start with the basic and standard HTML only pages to ensure that any browser and device are able to render it in a usable way. Then, when the browser and device understand the style and script, enhance the page by adding the style and script layer.

The idea address concern from the 2 camps, the web developer and web designer. The designer wants to put the latest styles and technology to beautify the page while the developers concern about cross-browser and cross-device compatibility. By testing the browser capabilities, we can target which enhanced experience to layer into the page. One thing I learnt about progressive enhancement is you have think of the site in layer of enhancement, you must structure styles and script to ensure they are loaded proper order. That is the challenging part. 🙂

 The idea to progressively enhance the site is from the Filament Group and they developed a framework for testing those browser capabilities. The library is EnhanceJS.

EnhanceJS is a new JavaScript framework (a single 2.5kb JavaScript file once minified/gzipped) that automates a series of browser tests to ensure that advanced CSS and JavaScript features will render properly before they’re loaded to the page, enabling you to build advanced, modern websites without introducing accessibility problems for people on browsers that aren’t capable of supporting all advanced features. It’s designed to be easily integrated into a standard progressive enhancement workflow: just construct the page using standard, functional HTML, and reference any advanced CSS and JavaScript files using EnhanceJS to ensure they’re only delivered to browsers capable of understanding them.EnhanceJS is a new JavaScript framework (a single 2.5kb JavaScript file once minified/gzipped) that automates a series of browser tests to ensure that advanced CSS and JavaScript features will render properly before they’re loaded to the page, enabling you to build advanced, modern websites without introducing accessibility problems for people on browsers that aren’t capable of supporting all advanced features. It’s designed to be easily integrated into a standard progressive enhancement workflow: just construct the page using standard, functional HTML, and reference any advanced CSS and JavaScript files using EnhanceJS to ensure they’re only delivered to browsers capable of understanding them.

Let’s see how the concept work in code. In the script below, you see how the test work. If you pass the test you will get the “enhanced” styles and scripts. You can even have conditional test for IE. You no longer need to write those “complex” script find out the user agent and browser ‘s behaviors. It is clearner also.

<script type="text/javascript" src="enhance.js"></script> 
<script type="text/javascript">
 enhance({
  loadStyles: [
   'css/enhancements.css',
   {href: 'css/print.css', media: 'print'},
   {href: 'css/ie6.css', iecondition: 6}
  ], 
  loadScripts: [
   'js/jquery.min.js',
   'js/enhancements.js'
  ]
 });  
</script>

The other useful feature of the framework is it is extensible. You can add your own browser capability test. Btw, EnhanceJS does not test HTML5 features this is where the “add test” come handy. You can integrate EnhanceJS and Modernizr or write your own test for that. A simple example below;

<html>
<head>
  <title>
    2D drawing with Canvas
  </title>
  <script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
  <script type="text/javascript" src="js/enhance.min.js"></script>
 <!-- Application JS -->
 <script type="text/javascript">
 enhance({
  loadScripts: [ 'js/jquery-1.4.2.min.js', 'js/enhancements.js' ],
  addTests: {
   canvasSupport: function() {
    if (Modernizr.canvas) return true;
    else return false;
   }
  }
 });
 </script>

</head>
<body>
 Using EnhanceJS to check canvas. <br/>
 <div id="canvasPanel"></div>
</body>
</html> 

//source for enhancements.js
function draw() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "rgb(200,0,0)";
  ctx.fillRect (10, 10, 55, 50);

  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect (30, 30, 55, 50);
}

$(document).ready(function(){
 $('#canvasPanel').html('<canvas id="canvas" width="300" height="300"></canvas>');

 draw();
});
// end document ready

More info on the site:

Detects Support for HTML5 and CSS3

There are lots of new and cool features in HTML5 such as canvas, geolocation, etc. Unfortunetely not all browsers support the features. So, how do we detects whether or not a browser supports a particular feature? Here are four basic techniques I extracted from diveintohtml5.org:

1. Check if a certain property exists on a global object (such as window or navigator).


function testGeolocation() {

    return !!navigator.geolocation;

}

2. Create an element, then check if a certain property exists on that element.


function testCanvas() {

    return !!document.createElement('canvas').getContext;

}

3. Create an element, check  if a certain method exists on that element, then call the method and check the value it returns.

function testVideo() { 
 if (!document.createElement('video').canPlayType) {
   return false;
 }
  var v = document.createElement("video");
  return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

4. Create an element, set a property to a certain value, then check if the property has retained its value.

   var i = document.createElement("input");
   i.setAttribute("type", "datetime");
   return i.type !== "datetime";

Of course there is the 5th way, which is to use a HTML5 detection library. it is called Modernizr. It is an open source and MIT-licensed.

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

To use it, simply include the Modernizr script into your page. You can download the script from http://www.modernizr.com/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="modernizr.min.js"></script>
</head>
<body>
  ...
</body>
</html>

Looking back at the examples from the 4 basic techniques above, here is how it looks like using Modernizr

if (Modernizr.geolocation){
  navigator.geolocation.getCurrentPosition(function(position) {
    setUserLatandLong(position.coords.latitude,position.coords.longitude);
  }); 
} else {
 // Sorry, your browser is very old.
}

There are more example on the documentation site.

10 Informative Infographics

Complex and huge amount of data are hard to comprehend and navigate, especially when they are presented in words or text. Presenting it in words or text is just plain boring and turn off the audience. Information graphics or Infographics is a visual representation of those data. It is an excellent visual representation of data, it is easier to comprehend and the graphics helps us relate with the data. It does add some “emotional aspect” also. This is an excellent way to communicate clearly and it is self explanatory.

Information graphics or infographics are graphic visual representations of information, data or knowledge. These graphics present complex information quickly and clearly – Wikipedia

In order to appreciate them, here are some of the creative, informative and well-designed inforgraphics I have found.

1. World Cup 2010 Calendar – http://www.marca.com/deporte/futbol/mundial/sudafrica-2010/calendario-english.html

2. Revisit is a real-time visualization of the latest twitter messages (tweets) around a specific topic. – http://moritz.stefaner.eu/projects/revisit/

3. It’s 140 most influential Twitter users – http://informationarchitects.jp/c140/

4. The Evolution of Privacy on Facebook – http://mattmckeon.com/facebook-privacy/

5. A Visual History of the American Presidency – http://timeplots.com/potus/

6. An infographic résumé – http://joaocorreia.pt/infographics/infographic-resume/. A very interesting way of presenting resume, this is good for job in design industry.

7. Japan, the Strange Country – by  Kenichi Tanaka http://www.kenichi-design.com/. This one is a video and in Japanese. Unfortunetely the English version was deleted. But it is still interesting too watch.

Japan – The Strange Country (Japanese ver.) from Kenichi on Vimeo.

8. ASK KEN™ is sort of a Node-Link diagram that allows to visually navigate through interconnected topics. – http://askken.heroku.com/ . Btw, this site only support FF, Safari and Chrome.

9. Every Country’s #1 at Something – http://www.informationisbeautiful.net/visualizations/because-every-country-is-the-best-at-something/

10. An information graphic for AOL Autos comparing Teen Drivers to Senior Drivers, visualizing various statistics on who are the safer drivers. http://gavinpotenza.com/old-young-drivers/