Every request means that the browser transmit the headers for every file, making the total data transmitted are much greater

If you combine the 10 javascript files into one only file, and the 5 css files into one too, your site only need 2 requests to load all the required files.

To achieve this, we can make all the javascript and css needed, is in one file, ourselves.

But in fact the best way is using the existing tools such as “Minify.”

Minify has two cool features, one of these features is the js and css compression to be sent to the browser by removing spaces and comments for example. But it also has another interesting feature, and is what interests us here.

Here we call a php file, using as parameter a list of js or css files, and this file gives us back the entire contents of all files together in a single request.

Also, Minify has the ability to keep a cache of js or css generated, to return the code directly in one future request, without having to be generated another time.

Installation and use of Minify

1. Download the latest Minify from http://code.google.com/p/minify/ and unzip the files to a new “minify” directory.
2. Copy the “min” folder directly into your DOCUMENT_ROOT.
3. Change the src of scripts tag and the href attribute of link tag to point to Minify tool. For Example:

Change it:

code

1. <script type="text/javascript" src="http://www.beastxblog.com/wp-content/themes/Beastx/scripts/core.js" />
2. <script type="text/javascript" src="http://www.beastxblog.com/wp-content/themes/Beastx/scripts/ui/TabManager.js" />
3. <script type="text/javascript" src="http://www.beastxblog.com/wp-content/themes/Beastx/scripts/ui/FooterToggler.js" />
4. <link rel="stylesheet" href="http://www.beastxblog.com/wp-content/themes/Beastx/style.css" />
5. <link rel="stylesheet" href="http://www.beastxblog.com/wp-content/themes/Beastx/style2.css" />

To:

code

1. <script type="text/javascript" src="http://www.beastxblog.com/min/?f=wp-content/themes/Beastx/scripts/core.js,wp-content/themes/Beastx/scripts/ui/TabManager.js,wp-content/themes/Beastx/scripts/ui/FooterToggler.js"/>
2. <link rel="stylesheet" href="http://www.beastxblog.com/min/?f=wp-content/themes/Beastx/style.css,wp-content/themes/Beastx/style2.css" />

Improvements in the use of Minify

If we have two instances of the blog, one in production (public site) and another in development to develop and test the things that we will publish, we can change some settings depending on the SERVER_NAME to the development server is not used Minify. For example:

code

1. if ($_SERVER['SERVER_NAME'] == 'myTestingServer') {
2.     // development and testing
3.     $min_allowDebugFlag = true;
4.     $min_errorLogger    = true;
5.     $min_enableBuilder  = true;
6.     $min_cachePath      = 'c:\\WINDOWS\\Temp';
7.     $min_serveOptions['maxAge'] = 0;
8. } else {
9.     // production
10.     $min_allowDebugFlag = false;
11.     $min_errorLogger    = false;
12.     $min_enableBuilder  = false;
13.     $min_cachePath      = '/tmp';
14.     $min_serveOptions['maxAge'] = 86400;
15. }

For those who do not want the trouble of installing and configuring Minify, there is also a Wordpress plugin that makes all the js and css use Minify blog.

You can get it here: http://wordpress.org/extend/plugins/wp-minify/ and configure to their liking from the WordPress admin screen.

See you at the next tip.

© beastx for Beastx's Blog, 2010. | Permalink | No comment | Add to del.icio.us
Post tags: blog, CSS, Development, Improvements, Javascript, minify, wordpress

I first want to clarify that I am no expert on the subject, and that what I write in this post are just some tips, which if used together, can provoke that the burden of our blog is much quicker.

I have tested, modified, adapted, all the tips that I find when i try to improved the load of my own blog, which added to the experience I have several years of web development, let me get reduced the load of my Blog 68 seconds to an average of three seconds.

I will divide all the tips in different posts, so that not so long, so, enough of presentation, here are the first tip:

Put all the javascripts files at the end.

When one html page is loading, it loads the files as they appear, first the html, then css, images, flash, etc.

If the js code is into the header tag, it will load before any of the other files listed below them.

If we has this in mind, y we consider that normally the JavaScript code is ready to execute when the page is fully loaded, is a good thing, move all JavaScript code to the footer.

With this tip, the total page load time will be the same, or very like that the original time, but, will make an more efficient load to the user, because he can see the site, before, without need wait for the loading of javascript file.

To make this, we can start using Wordpress functions: remove_filter and add_filter.

For example you can add this in your theme functions file:

code

1. <?php
2. if (!is_admin()) {
3.     remove_action('wp_head', 'wp_print_scripts');
4.     remove_action('wp_head', 'wp_print_head_scripts', 9);
5.     remove_action('wp_head', 'wp_enqueue_scripts', 1);
6.     add_action('wp_footer', 'wp_print_scripts', 5);
7.     add_action('wp_footer', 'wp_enqueue_scripts', 5);
8.     add_action('wp_footer', 'wp_print_head_scripts', 5);
9. }
10. ?>

This makes Wordpress wp_print_scripts or wp_enqueue_scripts run when the function wp_footer is called, instead of wp_head.

Of course, for this to wo rk our theme has to call wp_footer.

Another thing we have to do is that the javascripts files of our theme will are loaded by wp_enqueue_scripts, instead of are declared using the script tag in the html of the head of our theme.

For this, we are removing the scripts tags of html code, and we will add to the function file of our theme as follows:

code

1. <?php
2. function beastxPrintScriptsAction() {
3.     wp_enqueue_script('beastxCore', get_bloginfo('url') . '/wp-content/themes/Beastx/scripts/core.js', false, false, true);
4.     wp_enqueue_script('beastxTabManager', get_bloginfo('url') . '/wp-content/themes/Beastx/scripts/ui/TabManager.js', false, false, true);
5.     wp_enqueue_script('beastxFooterToogler', get_bloginfo('url') . '/wp-content/themes/Beastx/scripts/ui/FooterToggler.js', false, false, true);
6. }
7.  
8. if (!is_admin()) {
9.     add_action('init', 'beastxPrintScriptsAction');
10. }
11. ?>

Of course, this is only an example. You need change  the enqueue scripts for your scripts.

After that, the only thing left to do is check if any of the plugin you have installed, use one or more javascript files through any manner that is not wp_enqueue_script and change it.

This is all for today, I will post the second tip in short time. Bye

© beastx for Beastx's Blog, 2010. | Permalink | One comment | Add to del.icio.us
Post tags: blog, browser, CSS, Development, HTML, HTTP, improvement, Javascript, page load, wordpress

First Person Tetris

The first game, “First Person Tetris” is a very fun Tetris variant in which the rotate functionality, rotate the whole screen instead of just turning the piece that is falling down.

You have to select different music, and two different viewing modes, the “normal view”, where you see a beloved Nintendo video games console with a TV screen, and a “night view”, which sees only a black background screen with the piece that should be falling in the middle.

I don’t remember exactly, but I think that my record playing this game is approximately 7000 points.

The Url is: http://firstpersontetris.com/

Multi Task

Multi Task is a very addictive game, very simple in the beginning, but after a few seconds is getting much more complicated, reaching in the first minute to be almost impossible for someone who does not have absolute control over their fingers.

When you start, you control a bar with the keys left and right, keeping it in level trying that does not drop a ball that is above the bar.

After 15 seconds, the screen is divided into two parts, leaving the first bar to the left and putting a new challenge to the right. In this case we have to move with the up and down keys, a piece, avoiding that this is touched by arrows that move from side to side into the box.

When the screen is divide, we must control not only the first bar, but also must be careful that we not lose in the second block.

After a few seconds you add a 3rd block where we handle a square with the keys w, a, s and d.

Then a fourth block, and the truth, I does not play without loose, the sufficient time to see if there will be a fifth or more.

I played awhile ago, made several attempts, and the most of times, I was loss in the game, in a maximum of 60 seconds I think.

The Url is: http://lantae.com/mediatrola/latrola5/multilol.swf

You can play the games, and post a comment with your records.

© beastx for Beastx's Blog, 2010. | Permalink | One comment | Add to del.icio.us
Post tags: addictive, flash game, Fun, game, geek, online game

To make the first drawing, I chose the linux ubuntu logo. (only the graph, the “ubuntu word” is not drawed, are only common chars).

With you… The result:

The logo was drawed using pure html + css, you can see the code with any developer tool that allows showing html source. (Firebug obviously is the best).

Also you can try to zoom in or zoom out (ctrl and +, or ctrl and -) and see that the graphic still looks good.

Day after day I love the power of CSS code more and more when you have some extra time to make crazy things like this.

I tested in FF, Chrome and Internet explorer. As usual, IE has one problem. one utf8 character is not well shown.

Maybe I will try to fix this problem in another moment I’m bored.

If you can’t see the drawed logo properly, please leave me a comment with the browser that you use, and the exact description of the problem.

© beastx for Beastx's Blog, 2010. | Permalink | One comment | Add to del.icio.us
Post tags: CSS, Development, Firefox, Fun, HTML, Internet Explorer

The magic methods are methods that are automatically called by PHP to certain situations.

These methods are characterized by starting with __ (2 underscores)

• __construct()
• __destruct()
• __call()
• __get()
• __set()
• __isset()
• __unset()
• __sleep()
• __wakeup()
• __toString()
• __clone()

PHP reserves all function names starting with __ as magical. It is recommended that you do not use function names with __ in PHP unless you want some documented magic functionality.

Each of these methods is called by PHP when a certain “event” occurs (this event depends on which method we’re talking about). By implementing such a method, we make sure that certain code to run when the event in question occurs.

For example, the method __destruct () is called when an object is destroyed. To implement it, we make sure that PHP, by destroying an object run some code (obviously this “some code” is the implementation that we give the method.)

All are very different and can be use for different things, so the best way to understand what are they for is to see in detail each one of them.

__construct()
This method was added in PHP 5. Is an constructor, and should be used instead of the PHP 4 constructor (an method with the same name of the class) because these way are deprecated.
It’s called when the object is constructed.

__destruct()
This method was added in PHP 5 too, and obviously is called when the object is destroyed. This method don’t have parameters and don’t return anything, and is used to free resources.

__call()
This method is called when you call one method of an object and these method don’t exists.
Allows you to find ways to avoid undefined error occurs. Although at first sight may not see this method as very useful… Yes this method is very useful! As you know, PHP does not support overloaded methods, but with this magic method, you can “simulate” the overloading. You can do many interesting things with this method, look at this example:

code

1. < ?php
2.  
3. class Car {
4.     private $Brand;
5.     private $Model;
6.     private $Color;
7.  
8.     function __call($method, $arguments) {
9.         $methodPrefix = strtolower(substr($method, 0, 3));
10.         $property = strtolower(substr($method, 3));
11.  
12.         if (empty($methodPrefix) || empty($property)) {
13.             return;
14.         }
15.  
16.         if ($methodPrefix == "get" && isset($this->$property)) {
17.             return $this->$property;
18.         }
19.  
20.         if ($methodPrefix == "set") {
21.             $this->$property = $arguments[0];
22.         }
23.     }
24. }
25.  
26. $myObj = new Car;
27. $myObj->setBrand('Ford');
28. $myObj->setModel('Mondeo');
29. $myObj->setColor('black');
30.  
31. echo "Brand: " . $myObj->getBrand() . "n";
32. echo "Model: " . $myObj->getModel() . "n";
33. echo "Color: " . $myObj->getColor() . "n";
34. ?>

Now? If this method seems interesting right? just avoid the tedious task of having to create methods setX () and getX () for each property.

__get() and __set()
This 2 method are very useful too.
It’s are called when an attribute don’t exist and can be used for much interesting thing.
For example when we need have a way to access to attributes that we don’t know in the compilation time or if we want use getter and setter to get or set values of a array index as normal attributes.

code

1. <?php
2. class Test {
3.     var $properties;
4.     function __set($property_name, $val) {
5.         $this->properties[$property_name] = $val;
6.     }
7.  
8.     function __get($property_name) {
9.         if(isset($this->properties[$property_name])) {
10.             return($this->properties[$property_name]);
11.         } else {
12.             return(NULL);
13.         }
14.     }
15. }
16. $testObj = new Test();
17. $testObj->anyProperty = “Any property”;
18. echo $testObj->anyProperty;
19. ?>

__sleep()
Is called when you serialize the object. Can be used to clean some attributes, vars, and another thing that you don’t want to be serialized.

__wakeup()
Is called when you deserialize an object. Normally is used to perform “reinit” tasks.

__toString()
Is called when an object is used as string.
For example when you make some like this:

code

1. <?php
2. class Person {
3.     var $fullName;
4.  
5.     function __toString() {
6.         return $this->fullName;
7.     }
8. }
9.  
10. $personObj = new Person();
11. $personObj->fullName = "Leandro Asrilevich";
12. echo $personObj; // this print "Leandro Asrilevich"
13. ?>

__autoload()
This is called when you intent create a new instance that do not exists.
You can use this to try to load the file that content the class code in the moment in that you try to create a new instance.
For example:

code

1. <?php
2. function __autoload($className) {
3.     require_once ('path/to/class/' . $className . '.php');
4. }
5.  
6. $obj1 = new AnyClass();
7. $obj2 = new OtherClass();
8. ?>

© beastx for Beastx's Blog, 2010. | Permalink | No comment | Add to del.icio.us
Post tags: Development, magic methods, method, php class, php object

Related Posts

• List of useful and frequently used UNIX commands

© beastx for Beastx's Blog, 2010. | Permalink | No comment | Add to del.icio.us
Post tags:

If you would like to reach me for any reason (question, private comment, development support, or just want to say hello), please do not hesitate to contact me. I try to respond within 24 to 48 hours if I’m available, but no guarantees!

Thanks and have a great day!

You can contact me by:

@Gtalk – beastx@gmail.com
@Msn – beastx [at] gmail.com
@Email – beastx [at] gmail.com
@Skype – leandro.asrielvich
@Facebook – http://www.facebook.com/leandro.asrilevich
@Twitter – http://twitter.com/beastxblog
@LinkedIn – http://ar.linkedin.com/pub/leandro-asrilevich/6/459/619

Or you can complete this form:

[contact-form]

© beastx for Beastx's Blog, 2010. | Permalink | No comment | Add to del.icio.us
Post tags:

I am an frontEnd/User interface programmer.

I am also a deadline-driven professional set on providing the best  online presence for all kinds of business platforms.

Specialized in XHTML and CSS web development, I guarantee creative and  search engine friendly websites, intuitive and appealing digital  interfaces, killer banner advertising or cost-effective webdesign  consultancy.

© beastx for Beastx's Blog, 2010. | Permalink | No comment | Add to del.icio.us
Post tags:

The site is http://consollection.de/, and into the page you can see a picture of every console. If you click in the picture, you can see the picture in a larger format, the packaging picture, and some info about the console.

From the list, I known almost 20 consoles, and I had 5 (Atari 7800, Nintendo NES, Sega Mega Drive, Nintendo Super NES and my actual console, Nintendo Wii).

© beastx for Beastx's Blog, 2010. | Permalink | One comment | Add to del.icio.us
Post tags: consoles, Fun, game, game console, nintendo, playstation, sega

This tips are written by me after several years of experiencie in this work.

I accept all suggestions and changes they consider appropriate to improve the guide.

Requirements

• A lot of patience
• Very quiet personality
• boxing bag to calm nerves
• Super powerful PC to support IE leaks (4gb ddr3 minimum to don’t see performance decreasing in the first 15 minutes)
• A lot of coffee to prepare until IE restart when he crash

Step by step work

1. Start IE
2. Accept IE dialog about it crashing and send information to Microsoft (and go to prepare coffee until IE restarts)
3. Start IE again
4. Open IEDevToolbar to clear cache because original IE tools for clean cache never works
5. Select “Always refresh page from server” option (This point is useless because every time that you reload a page in IE you clear cache again )
6. Open our application
7. IE again crash. Please repeat from second step  (and go to prepare coffee until IE restarts again. Punch boxing bag to calm nerves from you head too)
8. When you are in this step, you can open Mantis and see witch one bug you can solve
9. Select any bug, no matter which all bug in IE have the same difficulty and all are very very crazy too.
10. Go to the place in the application where we have the bug
11. Before 15 minutes (5 minutes per click to go to place where we have the bug) IE crash…  and again… please repeat from second step. (yes that is not a joke)
12. When you are in this step, you can pray that the bug is a known IE bug
13. When you known the amount of crazy of that bug, you can go to google and search if any other person (that hate IE same you) found the same bug, and solve it and put the solution in some web page.
14. when you see that any person found any bug so crazy as our bug you can start to try crazy and idiot solutions to solve that bug.
15. Until you try several solutions IE crashes again … Please repeat from second step.
16. Before that 2 days of hard work and 10% of you brain is burned you can found one crazy solution.
17. Please don’t express happiness. That is not finished. Your solution always but always produces another crazy bug in other place! 

© beastx for Beastx's Blog, 2010. | Permalink | One comment | Add to del.icio.us
Post tags: CSS, Development, Fun, HTML, IE, Internet Explorer, Javascript