of broken url’s and unresponsive scripts.

of missing parameters to undefined fields.

i pledge this instant noodles and caffeinated drink

and promise to deliver results each week.



of relentless pursuit to build the xml

of data manipulation and complex sql,

i pledge this sanity and contending will

and promise to make full use of my skill.


of function overrides and classes extensions

of custom components and text validations

of absolute layouts and relative dimensions

of invoking event changes and styledeclarations


I pledge this endeavor on system design,

on  extending hours for debugging lines

I pledge this equipped analytical mind

and promise to create assigned modules in time.


I pledge this cheery attitude and enthusiastic drive

to heighten my spirit and keep up my hype.

and promise to conclude the project at hand

and fashion the product to a money for jam.

It’s pretty bad for me to even do this because some of these ebooks might have copyright blah blah on them but I got them from the web too!

I. save_the_pixel_by_ben_hunt

Here’s my favorite reference: Save the Pixel by Ben Hunt. Ben Hunt is a very good and practical web designer. Not the usual web designer who just draws and edit images in Photoshop and uses them as CSS background images. I don’t know if he minds but he also said that it’s a good thing that people can actually learn from him (without any monetary returns) since it helps build his reputation (not that he even needs it, I mean – he must really be popular in the field of web design and I truly admire him).
One of the first references I have actually read regarding basics of CSS, DHTML and Ajax (as the name suggests). It’s  a really good book for beginners. Comprehensive and precise. Here’s the complete book description:
CSS, DHTML, and Ajax, Fourth Edition: Visual QuickStart Guide

The Web doesn’t stand still, and neither does this guide: Completely updated to cover the new browsers, standards, and CSS, DHTML, and Ajax features that define the Web today, the one thing that hasn’t changed in this edition is its task-based visual approach to the topic. In these pages, readers will find friendly, step-by-step instructions for using CSS, DHTML, and Ajax to add visually sophisticated, interactive elements to their Web sites. Using loads of tips and screen shots, veteran author Jason Cranford Teague covers a lot of ground–from basic and advanced dynamic techniques (for example, making objects appear and disappear) to creating effects for newer browsers, migrating from tables to CSS, and creating new DHTML scripts with embedded scroll areas, fixed menu bars, and more. Users new to CSS, DHTML, and Ajax will find this a quick, easy introduction to scripting, while more experienced programmers will be pleased to find practical, working examples throughout the book.

III. joomla-template-design1

I actually did not benefitted much from this book as this book is just a guide for really joomla newbies re: template design. But in a beginner’s perspective – I feel that this will help them with actually building a new template. 😀


The good thing about Degrafa is its ability to utilize SVG Data either for creating Simple Geomerty:


to complex ones using combinations of different svg paths and geometries, like this one:



A lot of resources on how to skin flex components using Degrafa are now widely available  on the web, most of them located at the samples repository of the Degrafa site. A simple way of doing so even has a screencast, which also has been my initial reference in creating skins and border-skins for containers and controls like canvas and buttons respectively.

As I progress in my work in using Degrafa for my UI, I noticed that when applying Path to surfaces, or using Paths to define the icon of a button, the path does not follow the constraints I assign to it.

For example, a graphic border skin works out just fine when i assign it to be the skin of a button:



<Path x="{ax}" y="{ay}" width="{awidth}" height="{aheight}" data="....." />



Where the above code does not render properly when i assign this to be the icon of a button or any control component.

The same thing goes for this one:



<Path x="{ax}" y="{ay}" width="{awidth}" height="{aheight}" data="....." />



I came across a relevant topic regarding assigning of a degrafa class to a control icon in a blog of Mr. Patrick Hansen, and from his example I saw that he used a translateTransform to reposition the path that defines the checkmark icon for a checkbox and a note that says:

 <!--set transform becasue paths behave differnetly in Degrafa and the transfrom helps define the position-->

And I used his code to create my own checkmarck icon. Using my own path (I uses Inkscape btw) And I saw that mine is misplaced. From there I played with translating x and y until i can finally position the path on the right location. And I move on with my primary concern: Creating Icons for Buttons.

But I have to learn how to constraint the size of my path according to the size of my button.  I tried to look at other transforms and saw ScaleTransform. However if I assign scaleX and scaleY of the transform this just scales the drawing relative to the original size of the drawing (same problem i encountered with using images as icons) which is not what i needed. 

The thing is, I know what I needed. I do not know how to implement it. And since the web is only my resource and I can only know things that I have read (so my limitation is that I haven’t read every how-to’s of degrafa and if ever i did, i am short on comprehension).

Since I have source codes of degrafa (the latest available) I track the code that draws the path and found on:
the function: 

override public function calculateLayout 

I found this function a bit off 
since to be able to get inside this function 
a layout constraint should be defined. 

However, nowhere inside the code used the attributes i defined for my 
except on line 560 that 
assigns the _layoutRectangle = _layoutConstraint.layoutRectangle. 
Now, this _layoutConstraint.layoutRectangle is readonly and i cannot 
assign it anywhere. 
When i try to prompt this attribute it returns a 0000 rectangle. 
so this whole function seemed to me like it had done nothing. 

I tried rewriting the lines one by one by adding an if else condition 
for example 
on lines 542-544: 

        tempLayoutRect.width = bounds.width; 

i rewrite it to: 

        tempLayoutRect.width = bounds.width; 
} else { 
        tempLayoutRect.twidth = _layoutConstraint.width; 


and so forth 
and at the end i replaced line 560 to: 

_layoutRectangle = tempLayoutRect; 

and tried this on my skin file:

<Path data=".....">

<linearConstraint><LinearConstraint x="{ax}" y="{ay}" width="{awidth}" height="{aheight}" />


And I got what I needed.

The only thing now is I still have to reasign the x and y

as -x and -y respectively (I think its because the coordinate axis of inkscape is a bit different — well i really dont know)

as what Mr. Patrick did on his codes.

But I still feel the need to make this (adjustment) automated as possible since I recycle skins to use for various purposes.


And also, I dont want to be changing source codes so I created a class file that extends Path and used this instead.


*I dont know how to upload files here. . 😛



In flex,  You could skin components programmatically using Degrafa. And I have been doing just that eversince I got a new job here in Makati – trying to skin flex components using the Declarative Graphic Framework.

 I discovered degrafa from googling on ways to skin flex components.

I got a lot of results of course and I started on using (I mean trying to use) graphical skins (the easiest since I knew CSS)

Then I learned programmatic skinning (BUT I DON’T KNOW ACTION SCRIPT!!!) So i turned back to graphical skinning. The thing is that, I keep exporting png files from Inkscape, and keep redrawing them so I tried to google ways on using SVG for skinning instead

and I got Flex”i”MMI which mentioned degrafa.. 

(Ok, enough about that)

I get started on skinning components and I had fun (still having) . So I suggested my co-worker that I’d be using this library instead of learning actionscript drawing tool. Since I understand xml and I know Inkscape.

All in all everything is quite alright until I get to skin a checkbox, which until now, I did not learn how to do. Thanks to Mr. Patrick Hansen for sharing his code and showing me how to do it..

Now I’ll try it and let’s see if it goes alright. 

I’ll have to try too if this works drawing icons on button controls.. 😀

I have a history of learning how to round – up corners using CSS to Javascript.  But I’m not saying I’m an expert to any of these fields (namely CSS and Javascript). It just happens that my previous job has provided me enough space and opportunity to learn some techniques and skills on these area. (Thanx to Sir Troy for that)

Ive gone from using tables plus external images (atleast four) to generate a container with round corners. (a primitive way i think). This was the time where tables are the mainstream for layouting your page.

Then come the tableless layout using div. It was a remarkable alternative from layouting webpages. Using tables are messy (code-wise) and ugly. Div’s are seamless and with CSS positioning and all that, div is the way to go for layout.

I adapted how layouts their template by superimposing atleast three divs on top of each other and positioning these div’s in such a way that any of them can take the left, center, and right part of a rounded rectangle as a background image.

Soon, since I always look for better alternatives, I discovered nifty corners  and my quest for rounded corners finally ended. 😀

I love the library of nifty corners. Easy, light and direct.

I never had a problem with it until I have to make a site with background gradients and rounded corners and I opted not to use the (sliding doors of css by on my tabs. Simply because I am in no mood to reconsider all the prerequisites of a sliding doors of css  (the background images for the left and the sliding door side).

I looked for js libs that could create the bg gradient for me. But found nothing that suits my taste. So after an hour of searching and trying, I gave up and went back to images. Surely, a single background gradient from an external image will not be that hard to load compared to the (3 images from rockettheme’s style).

And then i tried if i could use nifty corners to round up the top of my div, and a single image file (gradient) as bg image for that div and voila! It worked…

I have yet to see if i could mimic the sliding doors though. 😀

it’s my task for the coming night. 😀

One cup of coffee=one sleepless night.
A single semicolon leaves my xml unparsed.
Piling up my headers are scripts and css
Adding to a kilobyte of additional requests.

One sleepless night means waking up so late
Leading to many buggy user interface.
Straighten up. Move thy mouse, Kindly check the logs.
Precautions are necessary. Prepare from being hacked.

Waking up so late gives a whole day of migraine
And a single paracetamol may not ease the pain.
Open up the terminal.  sudo ssh.
Repositories are out-of-date. make an apt-update

Headaches, submitted bugs then a meeting with my boss.
One-on-one analysis, another lunch break lost.
Onclick.submit() does not render $this->form().
Firebug console throws a lot of exception.

One cup of coffee = one sleepless night.
Thank you mighty google, for shedding up some light.
Overdosed on caffeine. A mid-afternoon nap.
Caught by my supervisor. A memo from above.

One cup of coffee? Maybe some other time.
My code throws an error on line 209.
One cup of coffeee? I think, this time i’ll pass.
There’s a missing parameter, i still need to CAST().

I am learning the javascript library EXT-JS. Following the examples were easy and straight-forward until I reached the grid and XMLReader.

I had no problems regarding the grid with ArrayReader but everything seemed to fall out of place when trying out the xml-grid.html example. The grid was set-up, alright… but the data is not loaded. It seemed that my xml-grid.html is not working.

I felt stuck…

I am using extjs 2.1 and the examples online runs out smoothly but those in my local computer seemed buggy… I searched and read on threads and blogs for online help but none seem to be figuring out exactly what is wrong, either that or I don’t seem to get what is wrong in what I am doing, until I read these lines I missed in the Tutorial for Beginners in the Ext JS web site.

Note: This example will only run from a web server. The URL in your browser should start with http:// and not file:// or the Ajax transaction will not work! Localhost will work fine, but it must be via http.

This is the note under Using Ajax section. And then it seemed I hit the spot. I was not running my extjs examples inside my localhost server..

So… I guess that’s it. One of those stupid things I got stuck on and phew! I managed to get by. One lesson learned: It is always good to start with tutorials than start learning on your own..


Next Page »