Motoare de template-uri în Javascript

Zilele astea, mai mult de nevoie dar și de curiozitate am căutat un motor de template-uri în javascript. Probabil mulți sunteți familiarizat cu template engine-uri în PHP, cum e Smarty de exemplu. Eh, trebuie să vă spun că niciodată nu mi-au plăcut template engine-urile pentru PHP de vreme ce PHP însăși e un astfel de motor ;) .

Dar template engine-urile în Javascript chiar încep să îmi placă. De ce?

Desigur nu sunt o alegere viabilă pentru un sait pe internet, care trebuie să aibă link-uri către pagini individuale pe care motoarele de căutare să le poată parsa, de vreme ce motoarele de căutare nu înțeleg  javascript. Da googlebot știe să citească și PDF-uri sau SWF-uri dar javascript nu.

Însă cred că sunt cea mai bună alegere pentru un sait într-un intranet, sau unul cu acces limitat la conturi (utilizator/parolă).   Asta pentru că un astfel de engine îți permite să iei doar datele de care are nevoie clientul de pe server, nu și markup-ul iar template-ul să-l iei dintr-un fișier static în timp ce prelucrarea lui și înlocuirea variabilelor se face pe mașina clientului, care e foarte probabil să aibă mai mulți RAMi disponibili decât serverul tău. Și tu ca programator nu mai trebuie să înveți Smarty dacă știi deja PHP/JavaScript.

Partea cea mai bună e că aveți de unde alege, iar unul dintre inițiatorii curentului este chiar John Resig :

Desigur lista ar putea continua, dar acestea sunt cele pe care le iau eu în considerare bazate pe caracteristicile de compilare și caching. Dar sunt curios ce preferințe aveți și voi?

WP Image Preloader

Great news: version 1.2 of the plugin has been released! Now you can preload more images with a single piece of shortcode.

WP Image Preloader is a plugin for WordPress, made to help you speed up your blog. It pre-loads images using the Javascript technique.

How to preload your images? You can do this in two ways:

  1. Add the relative or absolute url of each imag into the default stack. This way, the image(s) will be preloaded on every page of the blog. Use this if you have hover images for menus.
  2. By adding the shortcode [preload=image_url] for one image or [preload=image_url1, image_url2, image_url3] for more images, into your posts. Note you have to activate the shortcode from the plugin configuration page first. This way the image will be preloaded only when viewing that specific post or page. You can also use relative or absolute urls.

Screenshots:

Documentation:

WP Image Preloader uses a jQuery script to preload images. The basic functionality of the script uses the same document.createElement('img') traditional DOM method. You can find the code in /js/jquery.imagepreloader.js file.

As per server-side, the plugin  uses a global array (stack) $WPIMGP_Queue = array(), to store absolute urls to the images.  The functions used to add urls to the global stack are:  wpimgpreloader_build_default_stack() and wpimgpreloader_parse_stack_from_content($content="") .  So the default stack is added to the array during wp_head action, while images preloaded using shortcodes will be filtered during the_content.

All the urls, are parsed using wpimgpreloader_parse_url($url) function, which also decides whether it should add the blog url at the beginning or not.

After parsing the all of the urls, what remains to do is to output the javascript code for image preloading. This action takes pace during the wp_footer by the wpimgpreloader_preload_js() function. If you take a look at it you’ll notice it first calls another function, wpimgpreloader_js_string_from_array($array, $derrive=false, $value=false) which returns a Javascript – formatted version of the input array.

How to use this plugin with your theme?

Course you can install the plugin and use it as it is, out-of-the-box. But, if you’d prefer you can also “embed” it’s functionality in your theme, and avoit having users to install it.  To do this, you need to add two more files  to your theme: wp-image-preloader-portable.php and jquery.imagepreloader.js, provided with the plugin. Then:
– enqueue the Javascript file (jquery.imagepreloader.js) to load in the header of your theme.
– include the PHP file (wp-image-preloader-portable.php) in your functions.php.
– call wpimgpreloader_enqueue($images) to add urls to your images into the stack. You can use as param a string (single url) or an array of urls, absolute or relative to the blog url.
– in the footer of your theme call wpimgpreloader_preload_js(TRUE) to print the image preloader Javascript.

Notes:

This plugin only generates the Javascript code to preload images. How fast the images are loaded is entirely the job of the web server serving the image(s).  Use it for images you may need later in the page (like hover) , not for images loaded anyway with the <img>  tag.
As the plugin name says it is for pre-loading images not for optimizing image(s) load.

Download:

You can always download the latest version from wordpress plugin’s page.

Questions?

If you need help,  have a question or suggestions, please add a comment to this article. Comments are held for moderation, but don’t worry I’ll try to get you an answer asap.

Găsește adresa gazdei (host-ul) curente cu javascript

Nu de puține ori s-a întâmplat să am  nevoie, într-un fișier sursă JavaScript, de adresa/domeniul pe care se găsește script-ul pentru a înlocui diferite variabile: calea către o imagine, statistici, etc.

Prima opțiune de rezolvare a problemei este destul de simplă și presupune înlocuirea unei variabile JavaScript din PHP. De exemplu:

Unde $_HOST este o variabilă generată din PHP pentru stabilirea host-ului. Dar, dacă fișierul js este static, și deci nu putem executa cod decât pe client, trebuie să apelăm la variabila window, mai exact la window.location.href. Codul de mai jos creează o variabilă globală, _WWW_HOST reprezentând adresa gazdei pe care rulează script-ul. De asemea, protocolul este extras separat, pentru a detecta dacă rulează sub HTTP sau HTTPS:

Funcția get_abspath() poate fi folosită și pentru a afla calea absoultă a unei resurse, trimițând ca parametru calea relativă.
Pentru a downloada scriptul dați click-dreapta și “Save link as…” .

download

Cum să faci un ligthbox să stea la mijloc cu jQuery

Am avut de executat recent un script care să facă un facebox să stea în mijlocul ferestrei chiar dacă aceasta își schimbă dimensiunile, de exemplu atunci când este redimensionată de utilizator. De fapt, thickbox are implicit această funcție, însă sit-ul respectiv utiliza facebox, din motive de …. design.

jQuery și-a dovedit și de această dată utilitatea. În cazul meu, div-ul pricina avea id-ul facebox, așa că este adresat cu ”#facebox”. Iar aici e script-ul:

Asta ține lightbox-ul în mijloc atunci când fereastra navigatorului este redimensionata. Pentru a poziționa un lightbox în centru, la încărcare, avem următorul cod:

Insa cele mai multe lightbox-uri au deja implementată funcția de centare, așa că nu veți mai avea nevoie de acest cod.

jQuery – headcraft scripting!


Primul meu contact cu jQuery l-am avut anul trecut, cand a trebuit sa transform un tabel intreg intr-un drop-down menu fara sa afectez css-ul sau html-ul site-ului si binenteles “asap”.

Si uite asa am dat de magic-ul jQuery – cu doua linii de script am facut meniul, si fara bataie de cap cu compatibilitatea cu alte browsere.

De atunci folosesc jQuery aproape zilnic. Pana acum nu i-am gasit nici un punct slab. Inca de la versiunea 1.2.3, libraria jQuery avea metode pentru AJAX atat prin POST cat si GET, sincron sau asincron cu functie de callback care se poate apela cu rezultatul cererii ca parametru – ce mai ai la dispozitie toata banda sa comunici cu clientul in cel mai elegant mod posibil.
Despre efecte: slideUp, slideDown, fade, hide, animate etc. – trebuie sa le incercati pe toate!

De asemenea dispune de foarte multe pluginuri. De cele mai multe ori nu trebuie sa-ti bati capul sa inventezi ceva – cauti prin lista de plugin-uri!

Site-uri de vazut: www.jquery.com (site-ul oficial), www.visualjquery.com (documentatie), interface.eyecon.ro (plugin-uri si demo), www.leandrovieira.com (lightbox plugin pt jquery).

Spor la scriptat!