JavaScript Object Orientation is very different from most other popular languages (C++, Java, PHP), so if you come from one of those languages it becomes a little hard to wrap your mind on how things work in JS.

Prototypal inheritance is one of those things where people have trouble when they arrive to JS. Let’s see it in action:

When working with floating elements there is one problem web developers usually face. Since float elements are removed from the normal flow of the page, this causes some other side effects that may be seen as undesireable.

Lets begin with this HTML structure:

1
2
3
4
<ul>
    <li>One</li>
    <li>Two</li>
</ul>

To be able to successsfully work with the DOM, first we need to understand what it is. DOM stands for Document Object Model and it is the way browsers represent the structure of your HTML (XHTML or XML) document so JS can navigate it (actually it is supposed to be language agnostic, but I’ll explain how to interact with it using JS), or modify it.

The way you can access the DOM in a typical browser is by refering to the window variable. The window variable gives you access to attributes like history, location and document. In this articule I will focus on window.document.

This is a very special scenario and you may never want to really do this, but I found myself in the necessity of changing the visibility of an object’s methods an attributes at runtime so I could access them directly.

To do this I had to use reflection and magic methods in a magic way. Since we can’t just plug methods to an object in PHP, I had to create a class with already defined magic methods that would allow me to access the protected and private members of an object using reflection.

This is the class I created with an explanation of what it does:

Xdebug is a PHP extension which provides debugging, tracing and profiling capabilities.

Installing xDebug in an Ubuntu based distribution is very easy using apt-get:

1
sudo apt-get install php5-xdebug

Just by installing xDebug you will get two very basic but useful rewards: Pretty var_dumps and pretty error messages.

I have been hearing a lot about SASS lately, so I wanted to find out what the fuss is about. SASS is a meta-language for writting CSS that allows you to use variables, nested rules, etc… that helps you write less code to achieve the same results.

SASS works with a ruby compiler that can be easily download in ubuntu based distrubutions:

1
2
3
4
sudo apt-get install ruby
sudo apt-get install rubygems
sudo gem install listen
sudo gem install sass

It is possible that you will need to restart your OS after running these commands.

By default Zend Framework has a front controller plugin that tries to send all exceptions and errors to a controller named ErrorController. If that controller is not found you will get this error.

The Zend Documentation explains how to make a simple error handler:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class ErrorController extends Zend_Controller_Action
{
    public function errorAction()
    {
        $errors = $this->_getParam('error_handler');
        $exception = $errors->exception;
        $log = new Zend_Log(
            new Zend_Log_Writer_Stream(
                '/tmp/applicationException.log'
            )
        );
        $log->debug($exception->getMessage() . "\n" .
                $exception->getTraceAsString());
    }
}

A few days ago I was having problems getting my models autoloaded by Zend Framewok, after a little research I found the solution.

For this project I am using Zend_Application and Zend_Application_Bootstrap_Bootstrap for bootstraping my application. Enabling autoloading is as simple as adding this line to application.ini:

1
appnamespace = "Application"

or you could add a $_appNamespace property to your bootstrap class:

1
2
3
4
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
    protected $_appNamespace = 'Application';
}

It is often necessary to differentiate different environments by setting an environment variable with a different value on each of your different systems (development, qa, production). This is very easy to achieve if you are using Apache and PHP. You just need to modify your virtual host definition (See: Creating local virtual hosts with apache) to include a SetEnv directive:

1
2
3
4
5
6
7
8
9
10
11
12
<VirtualHost *:80>
    ServerName ncona.dev
    ServerAlias www.ncona.dev
    SetEnv APPLICATION_ENV development
    DocumentRoot /home/adrian/www/ncona.dev
    <Directory /home/adrian/www/ncona.dev>
        Options FollowSymLinks
        AllowOverride All
        Order allow,deny
        allow from all
    </Directory>
</VirtualHost>

Now you have access to the environment variable from php:

1
getenv('APPLICATION_ENV');

In this article I am going to explain the CSS 3 standard way of applying a shadow to an object. Using only this technique is probably not going to give the cross browser behavior that you are expecting.

The shadow object

The first thing we need to understand in order to apply shadows to an object is how the shadows are constructed. A shadow object has this prototype:

1
<shadow> = inset? && [ <length>{2,4} && <color>? ]