What's New?: Hey, how are you?

October 26, 2012 - Cross domain javascript



jQuery postMessage

If you're in my line of work where you have third parties or vendors that implement specific parts of code on specific domains in web applications (Mashups), you know that communicating through the *CLIENT* side can be a very frustrating and limiting possibility, especially when you want everything to appear seamlessly as one.

Every browser and version have very specific ways of handling client side code, namely javascript. Cross-domain javascript has been a bane of mine for a very long time, having to rethink about projects and their specific implementation, with the usual resort of having it handled on the server side.

Recently, I discovered a very effective and backwards compatible plugin for jQuery called jQuery postMessage by Ben Alman. No longer is it impossible for the scenario where a third party iframe on a different domain is not able to communicate back to it's parent. With this plugin, all that is needed is including the required sources and literally a few lines of code. Nice!

Modern browsers now support cross-window/cross-domain/cross-origin messaging
through window.postMessage.

postmessage is a simple wrapper for window.postMessage and the window message event, for those who wish to use this feature in a more jQuery-like way. postmessage falls back to window location hash polling for browsers that do not support window.postMessage (i.e., IE7).

The heart of the code is two methods, one in the parent and one in the child(iframe). The parent in this case will be the receiver of messages from the child, in which the method is named so rightly:


$.receiveMessage(
function(e){
alert(e.data);
//handle the string data that will be received of Hello World!
},
'http://urlToDomainOfChild.html'
);


Simple? The child implements this little block of code:


$.postMessage(
'Hello World!',
'http://urlToDomainOfParent.html',
parent
);


Sooo simple. It was a godsend and has forced me to rewrite a lot of the code for functionality that would otherwise be relegated elsewhere, and is opening up new ideas on it's use.

I've tested it in IE7, IE8, and IE9 and all works beautifully.





February 21, 2012 - Javascript Multithreading



Javascript Multithreading

One of the biggest downsides when working with ActionScript/FLEX/Javascript projects in the past was the inability to run specific, heavy processes in the application without those processes affecting the performance of the application.

For example, having a button that upon being clicked, would initiate some sort of process and have some sort of UI event such as an animation. What would happen most of the time if that animation was tied to a heavy processing method was it would either freeze the application, or cause a less than desirable transition of that animation and whatever other processes that was occurring in the application at the time the button was clicked. Unfortunately all of that can't be simultaneous due to limitations in browsers' Javascript runtime and the Flash AVM. Script execution happens within a single thread.

Sure, there are API within Actionscript and Javascript such as XMLHttpRequest(), AsyncToken() and even setTimeOut() and setInterval(). Even though these features run asynchronously, asynchronous events are processed after the current executing script has yielded.

Multi-threading is still not supported in ActionScript, and having all processes executed in a single thread poses questionable aspects on the performance of Flash applications.

The same holds true for Javascript, until now, with the HTML5 spec on Web Workers. Web Workers are basically a API specification that lets you create background Javascript threads to process CPU intensive tasks. Normally in browsers a single thread is created to handle all the Javascript code. So whatever Javascript code is run in the browser is executed in that single thread; whether you are doing some calculation or updating page elements. The downside of this is that some CPU intensive piece of Javascript can render the page unresponsive or slow it to a crawl.

To instantiate a Web Worker, one only has to declare it like so:


var worker = new Worker('workerTask.js');


In the constructor of the Worker object is passed the location of the external Javascript file that will execute the processing task for you. This can be anything, such as iterating through a big loop for example:


for (var i = 0; i <= 10000000000; i++){
var j = i;
}
self.postMessage('WORKER COMPLETED PROCESS WITH BIG LOOP: ' + j);


So in this example, the worker is iterating through a loop of 10 billion. Executing this script on a main thread would render your machine useless for about a minute as it loops through to 10 billion. But with Workers, you run this task in a seperate thread and leave the main thread to handle it's own tasks - meaning that the main thread will not freeze until this worker task is complete.

To start the worker, the API specifies to call the postMessage method. So in this example, a button starts the process to initiate the 'big' process like so:


var worker = new Worker('sometask.js');
someButton.addEventListener('click',startProcess,false);

function startProcess(){
worker.postMessage({'cmd':'start'});
}


This example passes a JSON object to the worker to process a command of 'start'. The worker Javascript then looks like so:


self.addEventListener('message',onMessage,false);
var inter = 0;
function onMessage(e){
var data = e.data;
switch (data.cmd){
case 'start':
for (var i = 0; i <= 10000000000; i++){
var j = i;
}
self.postMessage('WORKER COMPLETED PROCESS WITH BIG LOOP: ' + j);
break;
case 'stop':
self.postMessage('WORKER STOPPED: ' + data.msg);
self.close();
break;
}
}


The worker listens for the message event in which case it posts the message back when it has completed its task. Then, in the main thread, we listen for the response from the worker like so:


var _response = document.getElementById('response');
function handleMessage(e){
_response.value = e.data;
}
<textarea id='response'></textarea>


And that's all there is to it. You can view this example here: Javascript Multithreading. Please remember as with all HTML5 specifications, different browsers may behave and or support Web Workers differently. Currently, Web Workers are supported in Chrome, Firefox, Safari and Opera.

Internet Explorer is the kid eating glue in corner...




February 17, 2012 - HTML5 WebStorage



HTML5 WebStorage

WebStorage is another new feature of HTML5 that replaces the old cookie model that's been used in browsers from the very beginning. WebStorage allows web applications to store data locally within the user's browser.

Earlier, this was done with cookies. However, WebStorage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance.

The data is stored in key/value pairs, and a web page can only access data stored by itself.

There are two new objects for storing data on the client:
localStorage - stores data with no expiration date
sessionStorage - stores data for one session

The localStorage Object
The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. For Example:


localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;


Create a localStorage key/value pair with key="lastname" and value="Smith",
Retrieve the value of the "lastname" key and insert it into the element with id="result."

Key/value pairs are always stored as strings. Remember to convert them to another format when needed.

The sessionStorage Object
The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.

The following example counts the number of times a user has clicked a button, in the current session:


if (sessionStorage.clickcount)
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";


Since this is a new HTML5 spec, different browsers support and behave differently to this object, with IE having the lowest amount of support and Chrome having the highest. I recommend using Chrome and Safari for this example. This will not work with IE, Firefox or Opera.

Give it a try! HTML5 WebStorage. It's also important to note that each browser will hold a seperate database for the data you have created, and it will not work cross-browser. WebStorage can only read data on the same domain. WebStorage is also not as persistent as say, SharedObjects in ActionScript. Deleting one's cache and cookies will delete the WebStorage database per browser.




February 16, 2012 - Video in a video via HTML5



Video in a video HTML5

Been playing around with more of HTML5 <video> and created this cool video in video test. It basically replicates video playing in a thumbnail of a main video, and when that thumbnail is clicked will switch over to the thumbnail video and maximize.

The example uses some jQuery and CSS3 for the transitioning from the minimized video to the large one. The most important part of the javascript that makes the two videos look like they're embedded within another is in this snippet. You can do a whole punch of other things such as preload the video, use the video events such as 'canplaythrough' or 'canplay' which I have before you can even access the videos to make the user experience a little bit more friendly.

I have registered the 'canplay' event for the videos, so before you can interact with the interface, I have placed a mask on top of the application with a 'Loading videos' message and I wait for each video to fire their events before interaction is possible. I chose to do this because I detest my own experiences with web video when buffering is not ready and I try to play the video. So in this case, I at least wait until part of the video is able to be played.

Your video can be quite large depending, so it is also a wise choice to use the 'progress' event when buffering HTML5 videos. Quite similar to the way the progress events are handled if you've done it enough times with ActionScript.


var minimized = document.querySelector('.view1 #clip2, .view2 #clip1');
var full = document.querySelector('.view2 #clip2, .view1 #clip1');
var wrap = document.getElementById('video-wrap');
wrap.className = wrap.className.replace('view1','save1') .replace('view2','view1').replace('save1','view2') .replace('paused','playing');


The basic jist of this is swapping classes for the defined elements and using CSS3 transitions such as -webkit-transition to define the animations between switching between the videos.

Not overly complicated, and creates a nice effect for the end user if contextualized properly.

Give it a try! Have a look at my dog Sabicas and my girlfriend's dog Vixen when they walk in dog boots. Video in a video - HTML5



February 14, 2012 - HTML5 Drag and Drop Photo Collage maker



HTML5 Drag and Drop

Building on more capabilities of HTML5 and the Canvas, I have created another version of the canvas photo collage maker. This time, I have incorporated a drag and drop feature. With this addition, the user can now drag the image files from the desktop or explorer/finder window to the designated 'drop zone' specified in the example. Much easier from a user's perspective, and I have even styled the drop zone area to determine whether or not you have tried to drop an image file.

The heart of this new functionality is the DataTransfer object. The dataTransfer property is where all the drag and drop magic happens. It holds the piece of data sent in a drag action. dataTransfer is set in the dragstart event and read/handled in the drop event.

In this example we create a <div> element in which we assign it an id that specifies it as the 'drop zone' for the image files to be transferred to.


<div id='drop_zone'><span id='dropMess'>Drag and drop images here</span><br/><output id='list'></output></div>


We create some default messaging as well as an <output> tag to hold the display of currently dropped images in the application. Once we have defined the elements we can start attaching the listeners for the drag events and methods to handle them.


<script>
dropZone = document.getElementById('drop_zone');
dropMess = document.getElementById('dropMess');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('dragleave', handleDragOut, false);
dropZone.addEventListener('drop', handleFileDropSelect, false);

function handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}

function handleDragOut(e){
dropZone.style.background = 'none';
}

function handleFileDropSelect(e) {
//make sure these are called, otherwise Firefox will redirect to the image file dropped
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
//give some sort of notification that the file dropped is not an image
continue;
}
</script>


And that's the meat of the HTML5 DataTransfer object! It's important to note the support for this API. I've tested it in Chrome and Firefox which work beautifully. Opera and IE have no current support. Safari, I did not bother testing considering the FileTransfer object would've stopped me even if DataTransfer was supported. So you're best bets for testing this example is Chrome and Firefox.

Give my example a whirl for yourself. HTML5 Drag and Drop Photo Collage




February 13, 2012 - Canvas Photo Collage maker in HTML5



HTML5 Canvas Collage Maker

Last week I had an interesting experiment using some of YAHOO's developer APIs called the YUI library. With that library came a very cool example of using the YUI framework, along with the HTML5 Canvas element and create a photo collage maker for your desktop wallpaper or otherwise.

The previous example had static images, in that the images were a part of the Canvas and manipulation and exporting were limited to only those images. I have created a newer version that allows the user to upload any image from their machine and create/manipulate their own images.

The main change is the addition of the FileReader object. The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read. File objects may be obtained in one of two ways: from a FileList object returned as a result of a user selecting files using the <input> element, or from a drag and drop operation's DataTransfer object.

The FileReader object is not supported in Safari. So it's important to note that this version can only be viewed in Chrome, Firefox or Opera. I won't even go into IE as it doesn't support a lot more. I really don't know how IE manages to hang around or fall on deaf ears for that matter, while it gets left in the smoke of standards that the rest of the browsers have implemented.

With this main feature implemented, adding images to YUI's CanvasElement becomes a breeze. I must admit I enjoy this simple application. I have already utilized it for creating my desktop background on my home machine.

It's probably best to upload smaller file sized images, and less images at once. I haven't really thoroughly tested this, considering it was more of an example, but it can handle a fair amount of images at varying file sizes.

I tried importing a directory of images straight from my DSLR with the average image file size about 5 meg or so, and although it took a couple seconds to add to the canvas, once there the performance was decent with manipulating them. You can add an unlimited amount of images, but really you will be limited to the real estate on your monitor, in which you won't be able to see all the images in excess.

The image exported will be the size that your browser window is currently in, so it's best to maximize the window to get the largest image size possible. In terms of the two formats, JPEG or PNG, it's probably better to go with JPG, since PNG will be quite a heavy file size for an image that will be comparable quality wise to JPG.

So give it a go and create some nice desktop wallpapers! HTML5 Canvas Collage Maker





Februray 7, 2012 - Canvas Collage to Image export



Canvas to Image

Been playing around with some external HTML5 APIs and found one from Yahoo(YUI).

The YUI Library is an open source Javascript and CSS framework for building richly interactive web applications. YUI is a proven, scalable, fast and robust framework designed to give front-end developers a very scalable API to build rich internet applications.

This example uses a canvas element from the YUI API to create a screenshot of assembled images into an exported JPG or PNG image. The application allows the user to drag, resize and change the orientation of the images provided in the canvas. You can drag corners(as well) as show them and drag, resize and rotate the images in any orientation desired.

Once the positioning and sizing of the images are set you have two image choices in which to export the collage. The exported image is sized according to the user's browser window size at the time of clicking of the export buttons, so this becomes a really cool application to create some custom desktop backgrounds.

The API for this application consists of 3 source files from the YUI library, source them appropriately on your page. The application is then instantiated by creating a var which is then cast as a prototype class. Then that class is instantiated through a YUI API event which listens to the load event of the window.

The DOM is instantiated with a <canvas> element and <img> tags with ids that are added to the canvas element via array of the YUI API through the YUI.addImage method.

Input radio types and buttons are assigned ids which the YUI API are bound to events and methods to execute functionality such image exporting and border toggling.

Very cool, simple application that showcases some of the cool functionality that the HTML5 <canvas> element can provide, as well as some of the great support out there in terms of javascript frameworks developed to support HTML5 in its infancy.

Give it a try - Canvas Collage to Image export. Please note that most of the tests I do in HTML5 or with some new framework is not likely to be fully functional or functional at all if viewed in IE. Please use Chrome, Firefox, Safari or Opera in that order.





Februray 3, 2012 - Object Oriented Javascript



OOP Javascript

So recently I was asked a question at work about javascript and how it's syntax is relatable to OOP. This is coming from developers that have a background in Actionscript, Java and C++.

Although generally javascript is a very literal language, it is good to be able to implement some sort of OOP principles such as encapsulation for example to your javascript coding. One good way of doing this is through this basic example that uses an example of creating a sword object. In this case we want to create a sword class in which we instantiate a new instance of a sword in our html document.

In this example, we will pass in 3 arguments to describe our sword, its type, name and region. I am using an example of a sword because I've always been interested in traditional Filipino weapons, and I recently found a good site that sells some pretty cool authentic swords (Ordering one soon!).

Ok, back to this example. The first thing we want to do is to create our html document and set up the necessary elements before we create our class.


<!DOCTYPE html>
<html lang='en'>
<head>
<title>Lester Flor - lesterflor.com - Javascript and OOP</title>
<meta charset='utf-8'>
<script>
window.addEventListener('load',init,false);
function init(){
}
</script>
</head>
<body>
</body>
</html>

So this is the basic structure that is super easy and should be simple enough for you to always remember to do when developing with javascript. In my personal preference, I like to create an event listener in javascript that listens for the load event. This is a matter of preference as some like to instantiate their init function through a DOM element. It's up to you. So once, you have that ready and going, we can start on our Sword class which will simply print out a statement in the browsers console. The class looks like this:


(function(window){
function Sword(type, name, region){
var _type = type;
var _name = name;
var _region = region;
this.getType = function(){ return _type;};
this.getName = function(){ return _name;};
this.getRegion = function(){ return _region;};
}
Sword.prototype.identifySword = function(){
console.log(getSwordInfo(this));
};
function getSwordInfo(context){
return "This sword is a " + context.getType() + " sword called a " + context.getName() + " from the " + context.getRegion() + "."
}
window.Sword = Sword;
}(window));


So the most important thing to know about this syntax is the instantiation of this class. To do this, we are creating an anonymous function that we bind to the window that will execute when the window is available. This is defined this way:


(function(window){
//class members and methods
}(window));


This is the basic shell for creating a javascript class. We create an anonymous function that we bind to the window element, and then we execute that once the window is ready.

Now we can create the constructor for this class, we do that through creating the Sword() method. This method has 3 arguments as stated before: we pass the type, name and region of the sword. In this example, we are going to make these members private to this class, so by declaring a variable for each of the passed arguments, we effectively make this private to this class.

Now if we wanted to access these members outside of our constructor, we would have to create a getter method for each of the variables that we want to make accessible outside the constructor. We can make it available through the 'this' keyword (which references the globalilty of this class) and attaching a function that will return our chosen member.

To make a public method to our class, we use the prototype keyword plus the name of the method to this class. In this method we simply print out to the console with a concatenated string of our sword members. We access these members through another method that returns the context of this class - in this case, the 'this' keyword references the global aspect of this class and we call the getter functions for each of the members.

The last and most important thing is to attach the global instance of this class to the window, and we establish that by stating:


window.Sword = Sword;


By doing this, we can now return to our html file and source our class and instantiate a new object based on that class:


<!DOCTYPE html>
<html lang='en'>
<head>
<title>Lester Flor - lesterflor.com - Javascript and OOP</title>
<meta charset='utf-8'>
<script src='JS/Sword.js'></script>
<script>
window.addEventListener('load',init,false);
function init(){
var mySword = new Sword('Moro', 'Barong', 'Philippines');
mySword.identifySword();

}
</script>
</head>
<body>
</body>
</html>


And that's it! If you run this code in the browser and view the console, you should see the message. Very simple and basic example, but goes to show how OOP developers in different OOP languages can implicate the same principles within javascript.


January 30, 2012 - HTML5 Video!



HTML5 Video

So I've been doing some tests using one of HTML5's tags, the <video> tag. In terms of implementation, super easy and painless, as long as you have rendered out to the codecs that the major browsers use (H.264, Ogg, WebM). I even created a Flash fallback should the user end up viewing this on anything below IE9 (IE is the bane of every developer's existence).

Although, implementation was very easy, there are several things that you need to take into account when implementing the HTML5 video tag.

One quick thing to note for Safari - if you do not have Quicktime installed, the HTML <video> tag will not be supported. Funny how Apple bashes Flash, yet won't allow open standards be implemented unless you have *their* plugin.

Make sure that the webserver that you are serving your rendered video files SUPPORT the MIME type that you are trying to serve. In my scenario (IIS7), the webserver did not support OGG, MP4, WebM and even .f4a by default, so the workaround for this (on IIS7) is to modify your web.config to include the mime types for the missing types.

Simple as adding these nodes to your web.config. If you know the mime types already supported on your webserver, chances are you will not experience any errors implementing the code block below. But if you are unsure, and you add an already supported mime type, chances are you will get an internal server error.



<system.webServer>
<staticContent>
<remove fileExtension=".mp4" />
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<mimeMap fileExtension=".m4v" mimeType="video/m4v" />
<mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
<mimeMap fileExtension=".oga" mimeType="audio/ogg" />
<mimeMap fileExtension=".ogv" mimeType="video/ogg" />
<mimeMap fileExtension=".webm" mimeType="video/webm"/>
<mimeMap fileExtension=".f4a" mimeType="audio/mp4"/>
<mimeMap fileExtension=".f4v" mimeType="video/mp4"/>
<mimeMap fileExtension=".f4p" mimeType="video/mp4"/>
<mimeMap fileExtension=".f4b" mimeType="audio/mp4"/>
</staticContent>
</system.webServer>


Take note of the first node, which REMOVES the mime type of .mp4. I had to do this because of an issue of my webserver causing an internal error when trying to add an already supported mime type. My webserver already supported the .mp4 codec, but the default type was set to audio as opposed to video. So, removing then adding this mime-type fixes that problem.

Another issue is how each user agent renders the tag. No big deal really, but if you want a consistent UI for the video controls, it's best to implement some sort of third party javascript library to make the controls uniform in each browser. But, if you're like me, I could care less, as long as the controls are there for the end-user to manipulate.

Is the HTML5 video tag easier to use than Flash? Well, given HTML5's infancy, no, it was not easier to debug for all browsers, although implementing it was a lot easier than having to do it in Flash. But, my Flash fallback is supported in every browser, even in IE as far back as 6. My UI would be more consistent too. I could also code extra features in my Flash video player that would not be available in a <video> tag.

The nice thing about the <video> tag I did like though was the 'poster' attribute. It allows you to create a nice graphic of your video, like a promotional piece before the user actually plays the video.

So here is an example of HTML5 Video with Flash Fallback. Please also note that this was optimized for mobile viewing, so the layout is designed and based from jQuery mobile.






January 18, 2012 - Flying through the sky with WebGL!



WebGL Clouds

Again, this is not original work, but I can code this from scratch now. I think this is a big part of being a developer, not just being able to copy and paste others code, but be able to implement and understand what it is that you are typing. Fly through the sky!

The only part of this example that I did not create from scratch were the vertex and fragment shaders. GLSL is not very intuitive to me at the moment, and it will take some time for me to grasp this C language. But, in the meantime, I will keep on practicing and create more visually appealing experiments like this one.

It's hard to believe the shift I've set myself to since Adobe announced their strategies with Flash over two months ago. I have not fallen on deaf ears and have read the writing on the wall and plunged into the HTML5 bandwagon these past couple of months. I admit, I was hesitant at first, but I am truly enjoying the frameworks and capabilities that HTML5 is maturing into. Given the potential that a lot of the frmaeworks out there can do, and the prominence of more capable browsers (Chrome all the way), it makes even more sense now that Adobe changed their strategies.

I think of the canvas as the html equivalent of a compiled swf, which in principle it is, and perhaps in another world wide web life, it would've been very prudent if Adobe had made the flash plugin a native API of the browser. But obviously, not being open-source, this was far and few from realization, and it took open standards for HTML5 to come into fruition and topple Adobe's dominance.

I only use and work with Flash while at work. Everything you see before you is devoid of it. I have slowly begun to ween off Flash, but not forget nor not continue to progress with it. It is there like my beloved first car that gets me from point A to B. I know it has it quirks and intricacies, but I love driving it no matter what. If it fails to meet my demands for a particular trip, I have my newer car that I know will get me there; reliably and perhaps even more efficiently.


January 16, 2012 - WebGL experiments continue



WebGL Particles

More work with WebGL. I've been hooked on Three.js the last week or so practicing and exercising its API. These examples are certainly not original, but they are exercises in my current knowledge of the API. Check out this particle example, this panoramic viewer or this rendered text scene.

Not particularly useful, but exemplifies some of the simple and cool things that WebGL is bringing to enabled browsers (don't bother viewing this in IE). More to come as I get more proficient in the API.







January 5, 2012 - WebGL is amazing!



WebGL Earth

Check out this 3D rendered interactive earth, rendered with WebGL!WebGL EARTH. This is an amazing example of the capability of HTML5 and how it can leverage the GPU of the end-user's machine. Flash Player 11 may also use WebGL, but this was done completely in javascript and html. The implications of leveraging WebGL for HTML5 pages will be truly an amazing site to see once it matures.

Is Flash dead? I think it will eventually get there. Remember, Flash came into being as a direct result of the browsers of the era not being able to produce the types of effects that it could, but now that HTML5 is slowly being capable of all the things that Flash can do, there would be no reason to support it in the future. I think of Director and Lingo, and how those names are extinct anywhere in technical terms. Exciting times.
About Me: Who is this guy?



Hello there.

For those new to this site, welcome. I am a software developer in the gaming industry from Toronto, Ontario, Canada. This site gives some info about me and my journey as a software developer using client side technologies such as javascript, html and css.

I have been in the business of the internet for almost 20 years. I started my career as a multimedia developer creating CD-ROMs using a legacy syntax called Lingo. At the time, I was fascinated with it and it fueled my inspiration to create interactive experiences on the computer. Running parallel to that was my inspiration in the web equivalent, called Flash. With Flash and html, I was able to deliver interactive content to more and more people, and that inspired me even further.

I then stumbled upon ASP.NET in an indirect way, being a front-end developer using XSLT to parse the SOAP that my fellow co-workers at the time would provide to me. These guys were my inspiration for the next wave of fascination - server side development. Through XML and XSLT, I wanted to know more than just parsing data, I wanted to know where this data came from and how it came to be. So, armed with books, self-learning and bugging my fellow application developers for info and nagging, I managed to get rudimentary knowledge of how things were done.

The front-end held true in my heart, but the back-end provided and provides me with constant challenge.

So here I am today, on the client-side, but still dabbling in the server-side, mostly middle-tier, but hey, I need to have a working context to explore even further. I will get there someday, just as indirectly as I got here.

I was born in Quezon City, Philippines from a military family. My father was a Lieutenant Colonel in the Air Force. My paternal grandfather was a Colonel in the Army. My maternal grandfather was also a Colonel in the Army, and then became Chief of Police after his military career.

I have been a flamenco musician, martial artist, powerlifter, yogi, and capoeirista. I tend to have chameleon like properties when it comes to my interests.

Who knows what will be next? I consider evolution of the self to be my greatest gift from the aliens... I'm not religious.
Projects: Software Development

Evolution is how I define software development and programming.

This relatively young industry constantly evolves and with it, my own evolution as a developer.

I would best describe being a developer as a problem solver in it's purest form. What tools and methods I use to solve that problem may or may not be the same today from yesterday.

But I do solve problems, and I think I do that well.
Art: I used to draw a lot until keyboards ruined using writing implements......

Before I delved into any sort design of design on computers, I used to do a lot of freehand art and sketches. Although it has been a while since I have drawn, it remains a part of my repertoire that I hope to revisit again someday. Most of my sketches came from my imagination, refining them as they took shape and ultimately into character. Shown is a small collection of art that I have found over the years in old scrapbooks and piles of papers.

I began drawing as a natural expression as a child, and I took it further than a normal childish pastime to a regular hobby. When the world wide web came to be, I found the multimedia applications of the day very intriguing and initially took a passionate fondness for Phtotoshop to extend my artisitic capabilities. I was then introduced to Flash and found a way to make my artwork come "alive" as the animations were a way for my art to speak more than its static sense.
Technical: Capabilities, but not limited to...

Some programming languages and programs that I have frequently utilized. Some or all of which have been used to create the site that you see before you. This list will be obsolete as soon as your read it since I tend to evolve and change as much as the industry does in terms of languages and tools utilized.

I consider myself to be a hybrid of both back-end and front-end development. I have a strong affinity for both, depending on the project to be completed. I do not consider myself more than the other, as both subjective and objective aspects are needed to form a holistically complete application.


Some stuff I've used past and present:

Back-end: PHP | ASP.NET(VBScript, C#) | Java | SQL | ColdFusion

Front-end: HTML(4,5) | DHTML | XHTML | | XML, XSL, XSLT | Javascript | Actionscript 1.0, 2.0, 3.0 | CSS(3) | MXML (Flex 3.0, 4.0, 4.1, 4.5 SDK) | AIR (3.0) | ECMAScript | jQuery | DOM | E4X | OOP | MVC

Frameworks: PhoneGap | Robotlegs | ThreeJS | EaselJS | Starling | Nape | Android 4.0 | Tweener | Greensock

Source control: VSS | Perforce

Debuggers: Fiddler | Charles

IDE's:
Webstorm | Eclipse | NetBeans | Flash | Flash Builder | FLEX Builder | Pixel Bender | Dreamweaver | Photoshop | Illustrator | After Effects | Premiere | Bridge | Microsoft Visual Studio, Visual Studio Express | Microsoft SQL Server | SQL Workbench | BEA Workshop | PHPMyAdmin | MAMP | XAMPP
Friends: dogs are unconditionally our friends

Rest in peace pupOn November 4th, 2014 at approximately 11:53AM, I had to say goodbye to my best friend. We put Sabicas to rest after repeated bouts of suffering since July of this year. He had a tumor somewhere around his bladder that would prevent him from being able to urinate on his own.

He started having these episodes in late July, where the vet basically said there was nothing much they could do for the tumor, but to operate and see if they could remove it. Even though operating was an option, they could not guarantee anything, nor could they ensure that he would survive the operation given his age; Sabicas would have been 13 on December 22nd.

So in the months since his diagnosis, he would have several bouts of his inability to urinate, and the suffering and discomfort of not being able to. In some cases, we would have him catherterized to relieve him, which would work sometimes in allowing him to urinate again on his own. But at a certain point, catheterization only relieved him temporarily, as he would still not be able to urinate after on his own.

After several more bouts of his suffering, I desperately tried to research for a solution. I ended up finding a manual technique owners with paralyzed dogs would use on their dogs, which involved using a hand technique to 'squeeze' the dog's bladder manually to express their bladder. This technique worked, and it worked for several more months until it no longer worked.

There came a point when the tumor surrounding his bladder had become so large and solid that even the strongest manual forces I could comfortably impose on Sabicas was not enough. In the end, the tumour had shifted the position of his bladder, which explained why my expressing technique no longer worked. At this point, there was no more I could do, and I no longer wanted Sabicas to suffer through these bouts.

It's been almost a month since, and I still get very emotional at times when I think about the impact he had in my life. It's amazing how much we can learn from our best friends. They truly exemplify the notion of actions speaking louder than words.

Rest in peace, Sabicas. I know you have a lot of running and playing to do in Elysium; wait for me.

Sabicas (December 22, 2001 - November 4, 2014)


--------------------------------------------------------------------------------------------------------


When I went to pick Sabicas up from my parents' home for the weekend, I always discovered something new that he had attempted or succeeded in accomplishing in terms of mischief. Here are some of the strange, odd or common things that he did to keep himself amused during the week.

Saturday, May 5, 2012 - Compost Bag

Sure enough the presumption that this boy ate the compost bag as well was true, as during our morning walk he managed to barf out the entire bag with the contents still inside the bag. Relieved, because I know that if that bag worked it's way down through his intestines it wouldn't be too pleasant and probably would involve a visit to the vet.


Friday, May 4, 2012 - Compost Bag

It seems at the most opportune time, whether it be a 10-20 seconds of a window of opportunity, Sabicas will eventually raid the compost bin if it is unsecured and available. Friday I discovered that in this miniscule window of opportunity in an instant and in haste, he swallowed the near empty bag of compost whole! My parents thought he had ditched or stashed the bag somewhere while eating the contents, but the bag could not be found. Only logical explanation is that he ate the bag as well. *Sigh*




Synopsis

SabicasMy dog's name is Sabicas (Sah-bee-cahs). He is named after one of my most favourite flamenco guitarists, Augustin Castellon Campos, whose stage name was "Sabicas". I thought about different names, and usually when it comes to dogs, most people try to use 2 syllables or less for convenience. So, since I'm a big fan of Flamenco, I thought about some of the greatest guitarists I admired. 'Paco' was a very clear and obvious choice, after Paco de Lucia. But I wanted something more original, and without the syllable inference, 'Sabicas' was born.

I got him from a farm in a rural part of Ontario from an ad in the newspaper. He was advertised among his perhaps 8 or 10 siblings as a Labrador Retriever. When I got to their home, all of them were running about scurrying as the breeder showed them to me. They were fairly startled and scurried back to their mother in a nearby corner.

As they scurried, all but one which seemed to sneakily try to avoid detection by crawling between my legs. I looked down and saw this black, tiny, floppy-eared little imp, cute as ever, trying to go back to his mother. I reached down and picked him up, raised him up above me to get a good look and just melted at the innocent looking face of this floppy-eared creature.

As he was being prepared, I stood outside beside his mother, a Golden Retriever. Her demeanor seemed very placid, and she seemingly smiled as I petted her. As I was driving off, all I could see was the entire pack running after my car, as if bidding a final farewell to their brother, and a mother seeing one of her children off.

As he grew, Sabicas exemplified traits that would earn specific nicknames, such as 'spoiled brat' and 'sneaky thief'. Regardless, he is the most loving, caring and intelligent dog I have ever known or owned. He has kept me company through the hardest parts in my life thus far, unconditionally.

ZONKED!Sabicas will be 11 years old this December 2012. Regardless of his age, he is and will always be a puppy to me. No amount of greying whiskers or eyebrows can separate that perception to me.

Sabicas eats anything we eat. I don't think he eats whatever it is he eats because it tastes good, but for the sake that he sees US eating it. He eats most vegetables, meat(of course) and he has even been known to eat Currants!(from theft of course).

He has stolen some chocolate cake once, and to my dismay and ire, had to take him to the vet hospital as a precaution since chocolate is toxic to dogs. After a 2 hour wait, he was of course fine, but the unbelievable antics this boy executes makes me shake my head and smile at the same time.

He is a very perceptive and observant boy. He will watch and study a given situation very keenly and patiently and will find the right time to execute his scheme. He has been known to be a jail-breaker and master thief, having been placed in doggie daycare on occasion. He managed to wait for the right time for the daycare handlers to go to lunch, then manage to open his daycare suite, then raid the daycare cookie jar! Unbelievable ninja skills this boy has!

Here are some videos I have of him when I bought him some winter boots after he started complaining on one very frigid evening walk. He would lift his paws and kick in defiance of the cold. So I decided to get him some boots for such frigid days.

These videos were also part of a write up I did on HTML5 video. You can view the videos HERE.


Christmas eve 2011



Is it Christmas yet?

This face tells it all, anticipating gifts, and the opportunity to steal something from the kitchen table. This is a pic of the brat before heading out to my parent's place for Christmas eve dinner. Seems like he was trying to give me a hint in hastening our departure.






Mischief

SabicasThe name of this canine's game is *MISCHIEF* Sabicas will do everything in his power to cause and stealthily cause mischief, namely, theft.

Sabicas is the greatest "dog-burglar" that ever lived, you only need to lose attention of him for several seconds before he catches wind to your misperceptions and by then, he would already have stolen something, namely food.

He will do everything in his power to steal food, even if it is at the cost of severe punishment. The reward of stealing to him outweighs any punishment, as he has done this countless times with no sign of letting up.
Music: What is this thing called Flamenco?

I have been playing Flamenco as a hobby for about 10 years or so. I studied under the Toronto based musician Juan Tomas, who is a classical and Flamenco guitarist who studied guitar in Spain under the apprenticeship of Victor Monje, otherwise known as 'Serranito'. I continue to practice several times a week, hopefully I will be available to partition more time to it. I wish to take it further, and need to devote some time in finding the right people to study with and gather new inspiration.


What is Flamenco?

Paco de Lucia "Flama" in Spanish means flame or fire, and "enco" or "endo", is a suffix which means a quality-of, or having a-similarity-to, or pertaining-to. So, it is suggested the word originated from flame and fire in order to convey the deep, flaming, passion expressed in Flamenco music, song and dance.

From its roots in eighteenth century popular theatre, most flamenco performers were professionals. Originally they learned from other performers much in the manner of an apprenticeship. Some artists were and are still self-taught but it was then, as now, more usual for dancers and guitarists and singers to be trained. Today, most guitarists undergo rigorous professional training and often can read and play music in other styles like classical guitar or jazz and many dancers take courses in ballet and contemporary dance as well as flamenco.

Flamenco occurs in four settings - the juerga, in small-scale cabaret, concert venues and in the theatre.
The juerga is an informal, spontaneous gitano gathering (rather like a jazz "jam session"). This can include dancing, singing, palmas (hand clapping), or simply pounding in rhythm on an old orange crate or a table. Flamenco, in this context, is organic and dynamic: it adapts to the local talent, instrumentation, and mood of the audience. This context invites comparison with that other creation of a dispossessed class, the blues. The Gypsy Blues, or even the European Blues as a means of providing a frame of reference to those new to the genre.

One tradition remains firmly in place: the cantaores (singers) are the heart and soul of the performance. A Peña Flamenca is a meeting place or grouping of Flamenco musicians or artists. There are also "tablaos", establishments that developed during the 1960s throughout Spain replacing the "café cantante". The tablaos may have their own company of performers for each show. Many internationally renowned artists have started their careers in "tablaos flamencos", like the famous singer Miguel Poveda who began in El Cordobés, Barcelona.

The professional concert is more formal. A traditional singing performance has only a singer and one guitar, while a dance concert usually includes two or three guitars, one or more singers (singing in turns, as flamenco cantaors sing solo), and one or more dancers. One of the singers may play the cajon if there is no dedicated cajon player, and all performers will play palmas even if there are dedicated palmeros. The so-called Nuevo Flamenco New flamenco may include flutes or saxophones, piano or other keyboards, or even the bass guitar and the electric guitar. Camarón de la Isla was one artist who popularized this style.
Finally, just as with its precursors, there is the theatrical presentation of flamenco. However, it is now an extended and sophisticated performance in its own right, comparable to a performance of ballet

Palos
Flamenco music styles are called palos. Songs are classified into palos based on criteria such as basic rhythmic pattern, mode, chord progression, form of the stanza, and geographic origin. There are over 50 different palos flamenco, although some are rarely performed. For a complete explanation, see the main Wikipedia entry on Palo (flamenco).

There are traditions associated with each palo. Some of the forms are sung unaccompanied, while others usually have guitar or other accompaniment. Some forms are danced while others are not. Some are the reserve of men and others of women, while some may be performed by either. Many of these traditional distinctions are breaking down; for example, the Farruca is now commonly performed by women too.

Palos are traditionally classified into three groups. The most serious forms are known as cante jondo (or cante grande), while lighter, frivolous forms are called cante chico. Other considerations factor into classification, such as whether the palo is considered to be of gypsy origin or not. Forms which do not fit either category are classified as cante intermedio.

Compás
Compás is the Spanish word for metre and time signature in classical music theory. It also refers to the rhythmic cycle, or layout, of a palo.

The compás is fundamental to flamenco. Without it, there is no flamenco. Compás is most often translated as rhythm but it demands far more precise interpretation than other Western styles of music. If there is no guitarist available, the compás is rendered through hand clapping (palmas) or by hitting a table with the knuckles. The guitarist uses techniques like strumming (rasgueado) or tapping the soundboard. Changes of chords emphasize the most important downbeats.

Flamenco uses three basic counts or measures: Binary, Ternary and the (unique to flamenco) twelve-beat cycle. There are also free-form styles including, among others, the tonás, saetas, malagueñas, tarantos, and some types of fandangos.

Rhythms in 2/4 or 4/4. These metres are used in forms like tangos, tientos, gypsy rumba, zambra and tanguillos
Rhythms in 3/4. These are typical of fandangos and sevillanas, suggesting their origin as non-Gypsy styles, since the 3/4 and 4/4 measures are not common in ethnic Gypsy or Hindi music.

12-beat rhythms usually rendered in amalgams of 6/8 + 3/4 and sometimes 12/8. The 12 beat cycle is the most common in flamenco, differentiated by the accentuation of the beats in different palos. The accents do not correspond to the classic concept of the downbeat. The alternating of groups of 2 and 3 beats is also common in Spanish folk dances of the 16th Century such as the zarabanda, jácara and canarios.

There are three types of 12-beat rhythms, which vary in their layouts, or use of accentuations: soleá, seguiriya and bulería.
peteneras and guajiras: 1 2 3 4 5 6 7 8 9 10 11 12 Both palos start with the strong accent on 12. Hence the meter is 12 1 2 3 4 5 6 7 8 9 10 11...

The seguiriya, liviana, serrana[disambiguation needed ], toná liviana, cabales: 1 2 3 4 5 6 7 8 9 10 11 12 The seguiriya is the same as the soleá but starting on the 8th beat
soleá, within the cantiñas group of palos which includes the alegrías, cantiñas, mirabras, romera, caracoles and soleá por bulería (also “ bulería por soleá”): 1 2 3 4 5 6 7 8 9 10 11 12. For practical reasons, when transferring flamenco guitar music to sheet music, this rhythm is written as a regular 3/4.

The Bulerías is the emblematic palo of flamenco: today its 12 beat cycle is most often played with accents on the 3, 7, 8, 10 and 12th beats. The accompanying palmas are played in groups of 6 beats, giving rise to a multitude of counter rhythms and percussive voices within the 12 beat compás.
Interests: Stuff I do away from the computer

Ponder about polymathism and the renaissance. I really do, but most of the time I like to solve problems away from a computer.

I like to build things, and to me, building things from raw materials such as wood and metal fuels my soul.

I like history, languages and philosophy and am enchanted by the evolution of societies and the languages and philosophies that were born from their inception.

Sketch 10
Sketch 10
Lester Flor "Zryab"

Sketch 9
Sketch 9
Lester Flor "Berzerko Mary Poppins"

Sketch 8
Sketch 8
Lester Flor "J-Lo"

Sketch 7
Sketch 7
Lester Flor "Dama con el cigarillo"

Sketch 6
Sketch 6
Lester Flor "Hoochie Mama plays the guitar"

Sketch 5
Sketch 5
Lester Flor "Hoochie Mama with a gun"

Sketch 4
Sketch 4
Lester Flor "Hoochie Mama"

Sketch 3
Sketch 3
Lester Flor "Tarantas chord"

Sketch 2
Sketch 2
Lester Flor "Guitar Hands"

Sketch 1
Sketch 1
Lester Flor "The demons in your mind"

Flamenco

My Favourite Music
My most fanatical aspirations in music lie in the heart of the Spanish gypsy rythyms of Flamenco. It is through this pure and deep art form that I find great inspiration and energy, energy to use for whatever focus and stimulus that I need.
So for you who do not quite know and ask, what is Flamenco? Well, here is some info on this beautiful and passionate art form.
When trying to find the true origins of flamenco most studies totally disregard the history of the Southern Iberian Peninsula previous to the 18th century, it is nevertheless fair to think that the cultural mix that occurred in the history of Andalusia had something to do with the development of Flamenco, an artistic expression truly born to the people.
Going back to a passage from Marcial (40-104 bc), in his work entitled ´´Puella Gaditanae´´ (girl from Cadiz) and dedicated to Telethusa; this is described by the author as master in the arts of adopting sensuous positions following the rhythm of the castanets from Betica and swaying with the Cadiz rhythms. This is an early proof of the inhabitants taste for rhythmic dances and music of this roman province.

The genotype Flamenco also contains information of its Greek and Roman influences, hidden away until the birth of the liturgical Byzantine canticles in the Middle Age.
Composer Manuel de Falla particularly found the connection in features such as the melody and the descending minor scale. The popular assimilation of the Gregorian canticles as part of liturgical ceremonies left its melodic print as well as a touch of the orient.

Hindu reminiscences cannot be denied neither by theoreticians nor by artists themselves. To better explain them Abulhasam Al Ben Nafi (Ziryab), a court musician from Baghdad employed during the caliphate in Cordoba of Abderraman II (822-852 ac), is often mentioned. It also possesses Syrian and Persian influences. The Black Bird was a subject of study for investigators and an inspiration for artists. In fact, Paco de Lucia dedicated his album “Ziryab” (1990) to the Black Bird.
The Arabic domination over Al-Andalus (711-1492) implanted in the region many political, social and economic changes as well as innovations in science and art and generally new ways of living. After more than seven centuries of cohabitation, its influence on the music could not be a coincidence. A clear example of this can be found in the parallel between the modulations and the melismas of flamenco such as tonas and seguiriyas and the Muslim praying calls as well as the rhythm from both banks.
A gradual political dismembering of the arabic-andalusian territories opens its doors to the Christian kingdoms of the north of the Peninsula, offering its rich cultural crucible. Starting the castilianization process in 1236, the year in which Cordoba is conquered and ended the Reconquest in 1492 with the taking of Granada. Although it is a general belief that “Castilla became more Andalusian than Andalusia did Castilian“, from the 15th century onwards other cultural ways had free access adding more shades to the musical repertoire of a dying Al-Andalus. The metrics from many coplas, taken from Castilian romances, and seguidillas keep the legacy and even the rhythmic pattern found in the different styles of flamenco.

The interconnection between both sides of the border was nothing new; in fact, Christianity had always been present in Al-Andalus. Testimonials of this coexistence are the zejel and the mozarabic jarcha, defined by the dictionary of the Real Academia Espaola de la Lengua, as traditional song, often a ballad, with which from Andalusia, Arabs or Hebrew poets ended their moaxajas (poetic compositions).

A major development in the gestation of what is currently known as flamenco would take place at the same time: the arrival into Spain of the European gypsies. The oldest document stating this migrating wave, signed by Alfonso The Magnanimous, dates back to 1425. The possibility that they penetrated before, via Africa, is not ruled out, this would support the theory that they came from Egypt and would also explain the etymological origin of the word. According to the most accepted theories, gypsies come from Punjab, a region in northwest India, from where they started a long exodus (between the 7th and 14th century) due to unknown reasons. This migration resulted in the scattering of groups of these nomads all over the Old Continent.

The gypsies that establish themselves in the south of the Iberian Peninsula were faced with the rich folklore from Andalusia that they, apparently, assimilated to then interpret it according to their own cultural characteristics, also of an oriental background. Investigators such as Pierre Lefranc allude to a supposed symbiosis between the gypsies and the Moslem, these being Muslims that although converted to Christianity to prevent expulsion managed to maintain the musical tradition of Al-Andalus. There is an idea that although generally accepted is nevertheless subject to some questioning and states that the gypsies´ contribution to flamenco relies more on the face of mmesis and interpretation and less on that of the actual creation itself.

Back to Top