HTML5 Video, Leaving IE Users

While composing my previous post, I wanted to add a video to show the animation that I’m mention, so I decided to capture screen shots to show it on my post.

Lucky enough OS X came with many useful apps that most people might not aware about them, and download third party apps for the exact functionality. To capture the screen (in video), I use Quicktime’s screen recording function to capture iPhone Simulator and output as .mov file, then use a nice little free convertor called Adapter, to convert into flv, and was looking for WordPress plugin to post a video since then.

I have came across few, like Stream Video Player and JW Player, they both offer simple video browser to pick from my upload library, and generate the video player, but it keeps saying permission error when it plays, even though I already set permission 777 on uploads and plugin folder, no luck.

Then I remembered the HTML5 video, and the Gizmodo post, I decided to leave legacy browser behind, namely the IE 6 – 8, and go for HTML5 video. So I convert the mov file into mp4 and ogv, mainly because not all browser plays the same format as shown here. With a simple <video> with multiple source for supported browser to download.

Here is the markup I used:
[cc lang=”html4strict”]

Your browser does not support the video tag.[/cc]
It just that simple, it work nicely on Chrome, Safari and Firefox, but on mobile safari, there will be a big play button that suppose showing at the center but it didn’t, and the preview image is clipped, but it plays well.

I guess the width in the <video> is too large for mobile screen, so the mobile browser just clipped the preview image, since in iOS it going to play in apps anyway. I suppose there are JavaScripts library or some responsive styling will fix it, but it’s not a show stopper for me at the moment and I’m doing a quick posting, might look into it in the future though.


Mobile Apps Development Experience

I’ve started to look into JavaScript to be use in web project as much as possible ever since I last built a web game with jQuery. During my service in previous company, my team was assigned an assignment to research on mobile apps development, we’ve focusing on technology other than native, as we don’t have the skills for Java and Objective-C.

We’ve came out with few option, Appcelerator , Rhomobile , OpenPlug (Discontinued), and PhoneGap . Rhomobile was out of the picture very quickly, as it uses MVC style to code, and the team is not proficient in the style at that time. I’ve taken the rest to test drive.

OpenPlug then removed from our option, as it uses ActionScript, MXML to build and design the apps, which is then again, the team don’t have the skills on these technology. Even though it claim to compile the code into native code (which is appealing to me) and it has iOS simulator (a plus as well, as the team only have one MacBook).



Blog Migration

continued from

Finally, after failed several times when trying to use the Blogger to WordPress migration option provided by, I exported my Blogger’s data and imported to WordPress, works smoothly, hooray data liberation!

While waiting me to get a WordPress hosting and domain, I’ll probably need to clean up some formatting lost (template level CSS that I added to apply style for all posts), permalinks to fix the Blogger to WordPress page rank lost (not that I have any, it’s a nice thing to play around though), and some photo hosted at my Picasa account.


WebGL Music Video

Excited to see, music video created using WebGL, is a music video for Norah Jones’ song, throughout the music video, we can look around, lots of great things is happening in the surrounding, and it got Mario, and Megaman inside! WebGL apps, great music.

In order to load WebGL using Chrome in Windows XP, one have to run Chrome using some parameter, chrome.exe –ignore-gpu-blacklist.


Web Page Automation

I’ve WiMax that acting weird, sometimes when Windows is reporting I’m unable to connect to the Internet, the WiMax modem is showing strong signal strength, even the status page of the modem is showing operational as well, when this happen, I reboot it, I don’t go to the modem to reboot, I login via browser and reboot it using the web interface.

Even though I saved my login name and password, but clicking login button and clicking reboot button, and then clicking “yes” from the popup is too many steps for me, so I figured, I could just learn how to write code to automate a web page.

Using C#, it came with handle WebBrowser control, which rendering the passed in URL parameter using IE (I think, since all the context menu is identical with my IE one) on our Windows form. I tried to do this without UI interference, but not yet manage to get WebBrowser object to work in console application yet, so I ended up with a simple Windows application.



I Saw It! No… IE6

Couple of days ago I check my Google Analytic on this blog’s statistic, I just wondering what people using for browsing this day, so I check the browser client, and surprisingly, most of them are IE user, and some of them still using IE6!

Is quite predicted that IE user will be the majority of the user out there, one thing bug me though, this is a technical blog, people who viewing this should be a technical user, why would a technical user use IE6? The pages that those IE6 browser viewed are about technical posts (there were few posts that aren’t technical), weird huh…

Upgrading browser is easy and free, why people that browsing often don’t switch to other better browser than IE, or at least not IE6, this often made our life as web programmer /designer hard, considering we want to use the new HTMl5 and CSS3 goodness, but we kept getting pull back as we need to consider a fallback for IE user, it can cater for all browser, but think of the amount of works and checking to put in.

I’m not sure if this works after I posted, this button is styled using CSS3 border radius and box shadow, 2 new feature I love most, IE9 user, congratulation, other IE user, upgrade you browser to enjoy the goodness, feel the speed, feel the art of web design, and make yourself a happy web user!


Project Phases

I’m browsing through some standard guide for C++ project, and I came across a site, and I found this (is a joke though) :

6 Phases of a Project

  1. Enthusiasm
  2. Disillusionment
  3. Panic
  4. A Search for the Guilty
  5. The Punishment of the Innocent
  6. Praise and Honor for the Non-Participants

Flow Chart for Project Decision Making

YES +------------+ NO
+---------------| DOES THE |---------------+
| | DAMN THING | |
V | WORK? | V
+------------+ +------------+ +--------------+ NO
| DON'T FUCK | | DID YOU FUCK |-----+
| WITH IT | | WITH IT? | |
+------------+ +--------------+ |
| | |
| | YES |
| V |
| +------+ +-------------+ +---------------+ |
| | HIDE | NO | DOES ANYONE |<------| YOU DUMBSHIT! | |
| | IT |<----| KNOW? | +---------------+ |
| +------+ +-------------+ |
| | | |
| | V |
| | +-------------+ +-------------+ |
| | | YOU POOR | YES | WILL YOU | |
| | | BASTARD |<------| CATCH HELL? |<-----+
| | +-------------+ +-------------+
| | | |
| | | | NO
| | V V
| V +-------------+ +------------+
+-------------->| STOP |<------| SHITCAN IT |
+-------------+ +------------+

For more great information, visit the site here. (And I so glad to see Windows Live Writer work so well with copy and paste from web pages)


My Pong

I’ve been working with the A.I logic since my first Pong is build , I failed several times, and each time I’d thought I got it, most of the time is because I left out some calculation to be done, such as 2 bounces and 3 bounces will get the ball to the different location. I played with the game after each “successful”(I thought) A.I build, and I exploit the bug myself.

Being a dumb fixing certain number of bounce into the A.I calculation give me hell lots of bugs. So I put the calculation into a loop, will keep on calculating for new location until it calculation reached the end of the screen, where the A.I paddles located. I didn’t do research or refer to any sort of source for the A.I script, so I end up with some stupid but working pretty O.K logic.

Whenever player hit the ball, the direction and position of the ball is taking into account, based on the initial direction, the A.I will calculate the first location on the top/bottom screen where the ball will making the first bounce, after that A.I will continue to calculate the second bounce on the opposite based on the calculated position and direction, and do the calculation until it get to the A.I position.

After get the final position of the ball, by taking calculating the CPU’s paddle position and length, will move accordingly to the ball calculated position.

Of course, my version of Pong doesn’t have the ball bouncing math that depends on the place where the ball is hit on the paddle, so I don’t have the super weird angle of bouncing to put into the calculation of A.I move.

First time scripting the A.I move made me rethink how’s polish is the commercial game’s A.I, even a simple chess game also featuring a great A.I. Appreciate the great A.I in those game I’ve play and enjoy, the game wouldn’t be fun if there aren’t any A.I there, not to say stupid A.I or smart A.I


First Pong

First time really start to learn C++ with SDL, I decided to start a very simple game to practice, I choose Pong.Pong

Despite of it’s over simple design, it got me few hours to figure out how to code it, not a language problem, is the collision checking and bouncing calculation. After getting a buggy version of collision and bouncing mechanism up, is time for A.I, and this took most of my time.

Of course I can just let the A.I follow the ball, going up and going down, but the challenge lies when the ball getting faster and faster while the bat did not get speed boost. As a player, we don’t follow the ball exactly, before we even move the bat, we made a quick estimation where the ball will probably landed on, based on the estimation, we move the bat to the location accordingly.

This kind of simple decision making is giving me hard time for first time coding the A.I logic, it’s a good start for A.I thinking, hopefully I can manage it myself without much reference. :p


Spotlight for Windows Part 2

I’ve tried to search for Spotlight counterpart for Windows, but end up the result wasn’t meet what I want, and I’ve came across with Everything , they are kind enough to provide free search tools as well as SDK.

I’ve play with it for a while and find it performs quite well, the speed and decent accuracy compared with those I tested last time. But unfortunately, the SDK required the application itself to works, but they claimed that they going to release a SDK that works without installing the application.

A Spotlight skin with Everything’s SDK, it could be nice.