Friday, June 22, 2012

Conventional Debugging vs. TDD


Conventional Debugging vs. TDD


Conventional 

  • Write 10s of lines, run, hit bug: break out debugger
  • Insert printfʼs to print variables while running repeatedly
  • Stop in debugger, tweak/set variables to control code path
  • Dammit, I thought for sure I fixed it, now have to do this all again

TDD

  • Write a few lines, with test first; know immediately if broken
  • Test short pieces of code using expectations
  • Use mocks and stubs to control code path
  • Re-run test automatically

Friday, June 15, 2012

Testing Software

Testing Software

Before

  • Developers finish code, some ad-hoc testing 
  • “toss over the wall to Quality Assurance [QA]”
  • QA people manually poke at software

Today

  • Testing is part of every Agile iteration
  • Developers responsible for testing own code
  • Testing tools & processes highly automated; 
  • QA/testing group improves testability & tools

Software quality is the result of a god process, rather than the responsibility of one specific group.

 


Monday, May 7, 2012

HTML5 - Javascript Performance Tests - jsperf.com

jsperf is one of the best things I have seen this year. It is a powerful test engine for Javascript.

Every test created is public, and listed there. So anybody can test it, in any platform or browser and all test results are keept. So as more people runs each test, more analysis data we have.

To see how it works, and also to answer one question regarding the performance of drawing text with shadow on canvas, I have setup a test on jsperf.

http://jsperf.com/requestanimationframe-canvas-drawing-text-shadows

As I only tested on Chrome and Firefox what I can say for now is:

On Chrome 18.0 the performance dorps by almost half when drawing texts with shadows.

On Firefox 12.0 is the same thing. Doesn't matter it keep the same performance, but comparing the results Chrome is almost 50% faster than Firefox when drawing texts without shadows.

Remember that it is only a test and I have only test it on my computer.

Saturday, April 28, 2012

HTML5 AppCache API - How to prevent browser caching unsupported resources in manifest file

The method describe below doesn't work in all browsers.  
For now I'm using two different html files. But the best solution is on server side, making a rewrite rule for redirecting the user to the correct manifest file.


I'm writing a web application that uses the AppCache API for offline browsing. But I'm also using the Audio API to play back-ground music and a few audio effects.

For audio support in different browsers I'm delivering each sound/music in two different file formats: OGG and MP3.

The problem is regarding the cache manifest file. If we add all audio files (MP3 and OGG) in the cache manifest file, all browsers will cache all files. Including the unsupported ones. So, we end up with a huge storage requirement. Which is really bad if you are on a 3G connection for example.

So, to prevent browser caching unsupported resources, the best approach I've found was to split the manifest file. This way we can tell browsers that sopport OGG files to cache only OGG files, and do tha same for other formats like MP3.

Ok then. I have two manifest cache files, one with all OGG files listed (ogg.appcache) and the other one with the MP3 files (mp3.appcache).

Now what!? How do I swap from one to other?

Easy. First we should consider the browser supports OGG. If so, we can add the manifest attribute into the html tag with the right manifest file, just like that:


<html manifest="ogg.appcache">

Now, we have to check if the browser supports MP3. If it does, we change the value of the attribute "manifest" from the html tag. We can do that with this javascript:

var audio = document.createElement('audio');
if(audio.canPlayType('audio/mpeg;'))
  document.documentElement.setAttribute("manifest"document.documentElement.getAttribute("manifest").replace('ogg','mp3'));



Monday, April 23, 2012

HTML5 Polyfills - Fullscreen & RequestAnimationFrame APIs

So far, those are the best polyfills for using Fullscreen and RequestAnimationFrame features from HTML5 on today's browsers.


RequestAnimationFrame API

Optimize concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation, and using less CPU, GPU, memory, and battery.


http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

Fullscreen API

Provides an easy way for web content to be presented using the user's entire screen.


https://github.com/sindresorhus/screenfull.js