Created a very simple control system for HTML5 video. This is really useful if you have videos for your iPad optimized website and you want to have a custom skin, or overlay other buttons (like a close button) over the video.

Get it here: https://github.com/EdwinToh/HTML5-Video-Custom-Controls

David Calhoun's Mobile Web Series:
http://davidbcalhoun.com/2010/viewport-metatag

QuirksMode Mobile
http://www.quirksmode.org/mobile/
http://quirksmode.org/m/table.html

Tap vs Click
http://digitalize.ca/2010/02/jqtouch-tap-vs-click/

Media Queries and images
http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Respond.js
https://github.com/scottjehl/Respond

Some of my personal tests

iOS:

• screen.width/height always gives portrait sizes.
• window.innerHeight is accurate but gives the viewport minus address bar and toolbar.
• window.innerHeight works very well in landscape orientation. does not include address bar.
• supports window.orientation: 0, 90, -90
• position: fixed works like position: absolute.

iOS5:

• position: fixed works as it should.

Android 2.3:

• all width and height calculations are dependent on html element size.
• screen.height works as it should - giving correct height in different orientations, but gives it without the address bar.
• supports window.orientation: 0, 90, -90
• position: fixed works like position: absolute.

Windows Phone 7 IE:

• window.orientation and “orientationchange” event is not supported.
• ‘ontouchstart’,’ontouchmove’,’ontouchend’ is not supported, but ‘onmousedown’ etc is.
• http://stackoverflow.com/questions/8919477/trouble-with-vmouse-events-wp7-jquerymobile
• position:fixed works like position: absolute.
• hard to test for navigator.appVersion since windows phones have different strings. (see: http://www.zytrax.com/tech/web/mobile_ids.html)
  use: ((/wp7/gi).test(navigator.appVersion) || (/windows phone/gi).test(navigator.appVersion)) to test

There've been a lot of talk about mobile web development, and since I've been doing mobile web recently, I thought it would be useful if I can post some findings here.

Firstly, mobile web is not iPhone or iPad only. In fact, a fair share of smartphone users are non-iOS users. However, catering to every mobile phone in the world is impossible too, not without major design sacrifices.

Think about this, for iOS devices alone, you've got to cater to the retina display, and the device orientation changes. Not to mention the various iOS versions that support different features.

Simply put, no matter what you do, one design/code will not fit them all.

These findings are purely of my own opinion though, and many would probably disagree with me, but I find that perhaps, we should really spend our time and effort on smartphone users. Not just any smartphone users though, specifically - any device with at least 320 pixels in width in the portrait orientation.

So, having said all that, here are some quick findings:

• On iOS devices, there's a bug that scales the device view when the orientation changes, make sure you apply this handy fix to all your mobile web pages to avoid that.
• Make sure you insert your meta tags.
  meta name="viewport" content="width=device-width, initial-scale=1.0"
• Remove the Safari address bar with this line of code:
  meta name="apple-mobile-web-app-capable" content="yes"
  You might also need this piece of Javascript to make sure the page does scroll up.
  
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
})

• Use CSS Media Queries to cater to orientation changes.
  @media only screen and (orientation: landscape) { //insert css here }
• Use responsive images. If you're using css background-images, use this line of code to make sure the background-image scales.
  background-image: url('img/image.jpg');
background-repeat: no-repeat;
background-size: 100%;
• Always minify your js and css to decrease file sizes.
• Test in as many devices as you can. At least have a Mac installed with the iOS Simulator that can go back and forth between various iOS versions.
• Lastly, optimize your images. If you can, load the retina-images only if the user is using a retina-display.

That's all I have for now, I'll update with more findings if possible. Please leave a comment if you have something to change or a better way to do something.

So I went to Photohackday.org yesterday and I was too hungover to go today to look at the results but here're some interesting APIs that I saw there and also my work in 3-4 hours.

Flashfoto API
http://www.flashfotoapi.com/docs/methods
- This allows you to remove a background from a person!

PixlinQ
http://www.pixlinq.com/docs/api/searchimage
- Image Recognition

The whole list here:
http://www.photohackday.org/apis-hackideas.html

My "hack"
http://www.designfission.com/flickr_aviary/

My experiment hack
http://www.designfission.com/pinterestyourfacebook

These are the other hacks, some really good ones here:
https://docs.google.com/spreadsheet/ccc?key=0AsPwkTSCTBe0dHkwUUU0blFaZzBjQUMxaXhPSWVBQVE#gid=0

Just created a cheatsheet which states what are the dimensions of viewable screen areas for websites on iOS devices.

I'm not being biased by only including iOS devices, but Android screens are so fragmented that creating a cheatsheet would be a lot of work.

On top of that, I've realised that most people only care about iOS devices despite the fact that many smartphone owners are Android users. But that is another argument for another day.

Here's the link to the PSD, and a screenshot of what it is about.

Download PSD

Just pushed a new repo on Github.

This one's a boilerplate for a Facebook App. Read the README for more details. Do let me know how I can make this better!

https://github.com/EdwinToh/Facebook-App-Boilerplate

Just created my first Github Public repo and did an initial commit.

Take a look here: https://github.com/EdwinToh/LightPainter

LightPainter is an app that allows you to create your own light painting effects with your web cam. It's an initial commit so documentation and comments are scarce and unorganized.

Have fun painting!

For those who don't know, I took some iPhone development lessons from a brilliant young guy - Sidwyn Koh - last year. He has since went on to create a fantastic app that sold thousands and was even featured on BeautifulPixels.net and in some countries' Apple App Store.

Sidwyn has recently launched his own startup, aiming to impart more of his knowledge and experience of building iPhone apps to anyone who's in Singapore. So if you're interested to pick up Objective-C and wants to learn from someone who's really capable and inspiring, visit The Pragmatic Lab for more information now.

Just stumbled upon this amazing free service today.

In their own words:

CloudFlare's caching moves your static content (images, css, javascript, etc.) closer to the visitor who is requesting them. They have data centers scattered across the network. When someone requests your page, they are able to return images directly from the cache server that is closest to the visitor. They also optimize the network route based on the visitor in order to make the content's return extremely quick. As a result, they're able to significantly decrease both bandwidth and the amount of server load returning static files. They do not cache html so if you make changes to the content on your site, the changes will appear immediately.

After implementing CloudFlare on designfission - which is hosted on Arvixe.com. I've seen markedly improved page loading times from Singapore.

CloudFlare isn't just a CDN that distributes content though, it also provides analytics and basic security features like IP or Country based blocking. For the full list of details, visit https://www.cloudflare.com/plans.html.

Taking into consideration that this is a FREE service, and it requires NO code, it's definitely worth considering trying out CloudFlare yourself.

This is just a short post to help people out there trying to follow the CodeIgniter 1.x tutorials on codeigniter.com.

When you create a Model or Controller class, you should be extending "CI_Model" or "CI_Controller" instead now.

Also, parent::Model does not work anymore and the more generic parent::__construct is used now.

CodeIgniter 1.x:

<?php
class Portfolio extends Controller {
  function Portfolio(){
     parent::Model();
  }
}
?>

CodeIgnitor 2.x:

<?php
class Portfolio extends CI_Controller {
  function __construct(){
     parent::__construct();
  }
}
?>

For those who follow the blog tutorial and see the scaffolding function, that function is deprecated and removed in CodeIgnitor 2.0.

For usable tutorials involving CodeIgniter, take a look at NetTuts excellent series: CodeIgniter From Scratch.