Detectarea platformelor mobile in PHP

Folosind diverse resurse online (inclusiv lista de User-Agents folositi de dispozitivele mobile de aici), am scris o mica clasa PHP ce detecteaza platforma mobila a utilizatorului din cele mai cunoscute (fara nici o pretentie de exhaustivitate):

Modul de utilizare este foarte simplu, descris in detaliu pe Google Code

Nu am avut foarte multe device-uri la indemana pentru teste (decat cateva standard, plus un iPhone si un Blackberry), asa ca as aprecia daca m-ati atentiona daca nu functioneaza cum ar trebui.

May 21, 2009 | Filed Under PHP | 1 Comment 

FTL jump … now!

Fiecare fisier JavaScript, CSS, imagine, Flash, etc. afisat utilizatorului reprezinta un request catre server. Pentru fiecare asemenea fisier browserul trimite cererea, serverul o preia, proceseaza, serveste fisierul cerut, si tot asa. La site-urile “mari” se simte. In load-ul serverului, in latimea de banda consumata, in experienta utilizatorilor.

Urmand recomandarile echipei de la Yahoo!, o sa va arat la ce solutie am ajuns.

Dar mai intai … cifre. Am ales Okazii.ro drept studiu de caz (toate masuratorile sunt facute cu YSlow, folosind o versiune salvata a primei pagini):

Fara FTL (pagina salvata aici)

Cu FTL (pagina salvata aici)

Calculat la traficul lor (aprox. 82.000 vizitatori unici pe zi), netinand cont de cache in nici unul din cazuri, asta se traduce in o diferenta de 902.000 de request-uri si 14.1 GB trafic lunar.

Cum se foloseste

Presupunand urmatoarea structura de directoare:

/public
    /css
    /js
index.php

Descarcati arhiva si extrageti fisierele in root asa incat noua structura va fi:

/ftl
    /cache
    /lib
    CSS.php
    File.php
    JS.php
    config.php
    index_css.php
    index_js.php
/public
    /css
    /js
index.php

Mutati fisierele index_css.php si index_js.php din directorul /ftl in directorul /public/css, respectiv /public/js, si redenumiti-le in index.php:

/ftl
    /cache
    /lib
    CSS.php
    File.php
    JS.php
    config.php
/public
    /css
        index.php
    /js
        index.php
index.php

Adaugati liniile urmatoare in .htaccess:

1
2
3
4
5
6
7
8

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType application/x-javascript A315360000
    ExpiresByType text/css A315360000
</IfModule>
 
RewriteEngine On
RewriteRule ^public/(js|css)/([a-z0-9\.]+)\.(js|css)$    public/$1/index.php?hash=$2

Includeti fisierele necesare in index.php:

1
2
3
4

<?php
    include("ftl/JS.php");
    include("ftl/CSS.php");
?>

Totul e pregatit, tot ce mai trebuie sa facem e sa incarcam in pagina fisierele. Spre exemplu, ca sa incarc in <head> cateva fisiere CSS si JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
    $css = new FTL_CSS();
    $js  = new FTL_JS();
 
    $css->add('reset')
        ->add('typo')
        ->add('layout')
        ->add('error')
        ->add('ie', 'lte IE 7');
 
    $js->add('prototype')
       ->add('sizzle')
       ->add('effects')
       ->add('lightbox');
 
    echo $css->render();
    echo $js->render();
?>

Nu uitati sa setati drepturi de scriere pe subdirectoarele din directorul /ftl/cache.

Codul HTML generat va arata in felul urmator:

1
2
3

<link rel="stylesheet" type="text/css" media="screen" href="public/css/1e9dd525d1fbe94f7b8aede22cc141f5.1242750618.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="screen" href="public/css/25400724d7370b0b29c9369d9af3dd21.1242750626.css" /><![endif]-->
<script type="text/javascript" src="public/js/56c728a5a7689ab1663359a7edff160a.1242751025.js"></script>

Doua fisiere .css (unul pentru cele standard, unul incarcat doar pentru IE), si un fisier .js. 3 request-uri in loc de 9, si o dimensiune totala de aprox. 6.5 ori mai mica. Fisierele sunt atat minified cat si gzipped, folosind librariile CSSTidy, respectiv Packer

Suna bine, dar ce se intampla cand …

May 19, 2009 | Filed Under JavaScript, PHP | 10 Comments 

Prototype: Carousel – Update

A venit vremea ca si Carousel.js sa primeasca un binemeritat update, si sa fie mutat in noua lui casa, Google Code.

Asadar, update-urile si bug-tracking-ul vor fi de acum aici.

PS: Cateva din noilea feature-uri sunt in exemple.

April 24, 2009 | Filed Under JavaScript | 7 Comments 

Prototype: Zoomer

M-a rugat cineva acum cateva zile sa recreez un inedit mod de a face zoom pe o imagine. Mi s-a parut foarte interesant, asa ca am scris o mica si rapida extensie de Prototype pentru asta.

Cu ocazia asta am creat si primul proiect pe Google Code, loc in care le voi muta si pe cele anterioare.

Un demo este aici, iar pagina proiectului pe Google Code este asta.

April 14, 2009 | Filed Under JavaScript | 2 Comments 

Sizzle si Prototype

Framework-ul JS jQuery foloseste mai nou un selector engine foarte rapid numit Sizzle.

Cum jQuery intotdeauna a stat mai bine la capitolul viteza a selectorilor, inlocuirea selector engine-ului Prototype cu Sizzle ar trebui sa aduca un binevenit boost de performanta.

Urmarind instructiunile din acest articol, este suficient sa incarcam Sizzle (4KB minified si gzipped) si sa adaugam urmatorul cod dupa Prototype:

1
2
3
4
5
6
7
8
9
10
11

//Overwrite findChildElements to use Sizzle http://sizzlejs.com
Selector.findChildElements = function(element, expression){
    expression = expression.join(", ");
    var results = Sizzle(expression, element);
    if(results.length > 0){
        for(var i=0; i < results.length; i++){
            results[i] = Element.extend(results[i]);
        }
    }
    return results;
};

Acum atat $$ cat si Element#select vor folosit Sizzle. Unul din avantajele majore (pe langa viteza mult imbunatatita) este acela ca in afara de schimbarea de mai sus, nu implica nici o alta modificare in codul nostru, fiind deci posibila trecerea la Sizzle in mijlocul procesului de dezvoltare a proiectului.

Teste

SlickSpeed

SlickSpeed Selectors Test

Puteti rula un test comparativ intre Prototype, Prototype cu Sizzle, si jQuery accesand link-ul de mai sus.

Scorurile din imagine reprezinta medii ale rularilor multiple (scorul mai mic e mai bun). Toate au fost rulate sub Windows. Din ele reies cateva concluzii:

PS: voi sterge orice comentariu care se rezuma la “[insert framework name] sucks! Mine is bigger and better.” :)

March 27, 2009 | Filed Under JavaScript | 3 Comments