Book Review: Creating an MP3 Player with HTML5

Don’t let the size of this book fool you, the content is extremely well written and while providing the very basics of programming in HTML5 it also highlights many tips and tricks all throughout the book. As the title states, the book is a step by step guide for creating the MP3 player from scratch in HTML5 and JavaScript. It covers a lot of material from page to page but presents it in a very easy to read way. I actually read the book from front to back first and then I went through and actually wrote the code and skimmed back through the book. The entire process took less than a couple of hours, if that. I am a pretty experienced programmer so much of the information was not new to me but I really liked the way the author has written this and I actually learned a few tips around the HTML5 player object. If you are trying to learn HTML5 I think books like this are excellent. Any book that is written in the “by example” format is a great way to learn programming.


Internet Explorer KILLS the competition with HTML 5 Animation

I downloaded the Adobe’s new Edge Animate and played around with the tutorials for a bit and even did a basic animation. After I saved the HTML I then launched it into my default browser (Chrome) and was not very impressed. The animation was very choppy and even left blit marks throughout the animation, some really bad double buffering going on…

I then went back into Edge Animate and added even more animation, the text growing over the time line. This made it even worse in Chrome! I then opened the file in all of the major browsers (IE, FireFox, and Safari) and was amazed how great Internet Explorer did! It was by far the smoothest animation, with FireFox coming in a close second. You can’t completely tell by the video but you can definitely see how horrible Chrome is. And yes, these are all the latest browsers, except FireFox (I can’t keep up with their weekly updates).

I know this is a basic test but its pretty clear who the winner is here, without any “special” HTML5 code. It could also be that Adobe is in Microsofts pockets and intentionally made it perform better in IE but someone would have to prove that to me.

In the video I show Chrome, Safari, FireFox, then Internet Explorer.

FourSquare check-ins versus native applications

I have been playing with FourSquare for about four weeks now as many of my friends have probably seen the check-ins on Facebook and Twitter. I have even gone to the extent to checking out the API behind the scenes and it looks very clean and easy. The basis of the API is REST (REpresentational State Transfer). So integrating other commerce based products, tools, and sites should be a snap.

Not many people in my area are using FourSquare but on a positive note there seem to be more and more people using it even in the past month. I am already a mayor in two places; not sure what that buys me but it felt good.

I used FourSquare to check into a store called Justified; my wife and I were shopping for a birthday present. There were signs all over the store for 40% off. When I checked into FourSquare I received a coupon code “500” and received an additional 40% off! I was thinking, there is no way its 40% off then another 40% off, but that is exactly how it rang up at the register after presenting the coupon from my iPhone. We saved tons of money that day. So much in fact, we got the girl double the amount of gifts because we felt bad it was so inexpensive – she really made out…

Now, on to my point. I really like the concept of check-ins using an application like this. It allows me to use the application to find many kinds of places and see what those places have for specials. For instance, I might be at a Best Buy with a Staples next door, I see on FourSquare that Staples has a coupon or a special by seeing the special indicator in the “Stores nearby”. This immediately lets me know what stores in my physical area have specials and which stores do not. In my mind, this is a huge benefit over stores with specific applications on my iPhone. Stores with their own applications make me go into their application, check-in, and look for specials – once again, very different than seeing a list of stores with specials. So it makes me ask, why go through the trouble of having a native iPhone(mobile) application when services like “check-in” and “coupons” are available on products like GoWalla, FourSquare, Facebook, etc? With HTML 5 you could get a lot accomplished on these devices without having a special native application for your store. Leave check-ins to applications that offer a community, badges, rewards, and a social aspect to the check-in action.


Nice gallery of HTML5 sites

There a lot of great ideas and designs on this site, a must see – html 5 Gallery

HTML5 gallery has two primary aims, the first is to showcase sites that use HTML5 for markup, so that we can see how people have interpreted the specification and how they’ve implemented it. This leads me on to the secondary aim which is to help people learn about html5 and how it should be used and how to implement it.

Cool HTML5 site

Been plugging around the net and found this neat little site that shows off some really neat games written in HTML5. The site links to a bunch of other sites where the games are hosted. You can quickly see how powerful this technology is.

HTML5Games site


HTML5, CSS and Dojo it is

After my last post and a bunch of research over the weekend I have decided to do this next personal project in HTML5, CSS and Dojo versus Flash or Java Applets. Thank you to everyone who responded on Twitter, Facebook and this blog – original post. So don’t be surprised if I start blogging about that project on a regular basis. The client, my wife, is still a bit shady on exactly what she wants so I am sure I will be doing and re-doing again and again. 🙂

Continue reading