Prototype: Hotkeys

Am scris un mic plugin pentru Prototype ce permite inregistrarea oricator hotkeys si combinatii de taste (poate inclusiv sa “suprascrie” combinatii de taste ale browserului, in genul CTRL+S).

Documentatia si codul sunt pe pagina de la Google Code, o sa redau si aici exemplul: Presupunem ca vrem sa rulam functia add cu doi parametri la apasarea tastelor ALT+A:

1
2
3
4

function add(a, b) {
    alert(parseInt(a) + parseInt(b));
}
Hotkeys.bind("alt+a", add, 3, 4);

Pentru mai multe feature-uri, precum si lista de alias-uri pentru taste, consultati pagina proiectului.

May 26, 2009 | Filed Under JavaScript | 2 Comments 

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 | Leave a 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 | 4 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 

  • Arhiva