Archive

Archive for August, 2010

Enter WhitherApps

August 22, 2010 Leave a comment

 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

August 18, 2010 Leave a comment

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

August 15, 2010 Leave a comment

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

August 1, 2010 Leave a comment

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:

Follow

Get every new post delivered to your Inbox.