Preload obrázkov v JavaScripte

napísal , 23 Oct 2010
<script>
  new Image().src = '/images/masivne_gule.png';
</script>

je všetko, čo treba k tomu, aby ste načítali obrázok ešte predtým ako sa zobrazí.

Pri rýchlostiach dnešných pripojení to možno nemá až take opodstatnenie, ale existujú prípady, kedy vás to vytrhne z biedy - ak robíte nejakú prudko kickass galériu obrázkov alebo pokiaľ by ste vo Firefoxe chceli zobraziť niektoré obrázky až PO submitnutí multipart formulára (napríklad progress bar uploadu). Tiež nezaškodí už dopredu načítať ajax-loading-obrázky.

Generovanie pekných URL

napísal , 20 Oct 2010

Pre SEO sú veľmi dôležité vhodne formátované URL adresy. Taká dobrá URL by mala obsahovať viac menej len text úzko súvisiaci s obsahom, avšak bez diakritiky a podobnej chamrade, aby nevznikali problémy pri kopírovaní linkov a parsovaní adries vyhľadávačmi.

Chamraď sa dá buď nahradiť URL entitami (%20 je napríklad medzera), čo môže byť pri niektorých znakoch stále nespoľahlivé alebo sa z nej dá odstrániť diakritika a zvyšok nahradiť pomlčkami.

Druhý spôsob sa nám najviac osvedčil a používame naň túto funkciu:

function seo_url($str)
{
  $str = remove_accents($str);
  $str = preg_replace('/[^a-zA-Z0-9-]/', '-', $str);	
  return strtolower(trim(preg_replace('/-+/', '-', $str), "-"));
}

V prvom riadku sa odstáni z písmen diakritika:
Bŕm™ džžž DrÍST ブレイド!   ->   Brm™ dzzz DrIST ブレイド!

v druhom riadku sa nahradia všetky znaky okrem písmen a číslic pomlčkami:
Brm--dzzz-DrIST------

a v treťom sa všetky susediace pomlčky spakujú do jednej, odstránia sa pomlčky z krajov a všetky písmená sa premenia na malé:
Brm-dzzz-DrIST-   ->   Brm-dzzz-DrIST   ->   brm-dzzz-drist

Funkcia remove_accents() potom vyzerá nasledovne:

function remove_accents($str)
{
  return str_replace (
  array(
    'à','á','â','ã','ä','å','æ','ç','ć','č','ď','đ','ð','è','é','ê','ë','ę','ě','ì','í','î','ï','ĺ','ľ','ł','ň','ñ','ò','ó','ô','õ','ö','ő','ø','ŕ','ř','ś','š','ß','ť','þ','ù','ú','û','ü','ű','ů','ý','ÿ','ž',
    'À','Á','Â','Ã','Ä','Å','Æ','Ç','Ć','Č','Ď','Ð','È','É','Ê','Ë','Ę','Ě','Ì','Í','Î','Ï','Ĺ','Ľ','Ł','Ň','Ñ','Ò','Ó','Ô','Õ','Ö','Ő','Ø','Ŕ','Ř','Ś','Š','Ť','Þ','Ù','Ú','Û','Ü','Ű','Ů','Ý','Ÿ','Ž'
  ),
  array(
    'a','a','a','a','a','a','ae','c','c','c','d','d','d','e','e','e','e','e','e','i','i','i','i','l','l','l','n','n','o','o','o','o','o','o','o','r','r','s','s','ss','t','th','u','u','u','u','u','u','y','y','z',
    'A','A','A','A','A','A','AE','C','C','C','D','D','E','E','E','E','E','E','I','I','I','I','L','L','L','N','N','O','O','O','O','O','O','O','R','R','S','S','T','TH','U','U','U','U','U','U','Y','Y','Z'
  ), $str );
}

Takýto "brute force" spôsob je momentálne jediný spoľahlivý a obdobná funkcia by oficiálne mala byť až v PHP 6. Konkrétne táto funkcia je využiteľná viac menej vo všetkých krajinách používajúcich latinku okrem Vietnamu a možno pár inch krajín, ktoré majú fakt divoké znaky a nechcelo sa mi nimi zapodievať ^^. Ak by aj náhodou neodstránila diakritiku, jediné čo sa stane je, že z URL vypadne daný znak.

ǚ
evil u is evil

Viac "localhostov"

napísal , 15 Oct 2010

Občas sa môže stať, že potrebujete lokálne pracovať na stránkach, ktoré sú robené s tým, že budú uložené v "roote" domény a využívajú (mimochodom veľmi pohodlné) "polo-relatívne" URLká - napríklad /brm/bla.php. V takom prípade je treba vypratávať všetko, čo máte vo www-roote vášho lokálneho webservera. A to je pain in the ass, hlavne pokiaľ potrebujete naraz robiť s viacerými projektami.

Apache a Windows sa dajú celkom ľahko nakonfigurovať aby sa okrem adresy localhost mohla používať hocijaká iná, pri ktorej sa budú súbory ťahať z iného miesta na disku - príklad:
http://localhost/ -> C:\Program Files\wamp\www
http://tosumiveci/ -> C:\Program Files\wamp\www2
Vďaka tomu môžete v konečnom dôsledku mat k dispozícií viac "localhostov".

localhost in ur localhost

that's one seriously pimped up localhost!

Ako na to?

1) Povolíme v konfigurácii Apacha modul Virtual host.
Konfiguračný súbor Apachu sa volá httpd.conf a vo WAMPe sa nachádza v "C:\Program Files\WAMP\bin\apache\Apache2.2.11\conf\". Tam treba nájsť riadok #LoadModule vhost_alias_module modules/mod_vhost_alias.so a odstrániť znak komentára (#).

2) Do toho istého súboru pridáme adresu nového localhostu a cestu k jeho súborom.
Napríklad ja mám na adresu 127.0.0.2 nastavený adresár www_brmbrm. Tento krok môžete samozrejme zopakovať ľubovoľne veľa krát pre rôzne adresy a cesty.

<Directory "C:/Program Files/wamp/www_brmbrm*">
Options FollowSymLinks
AllowOverride All
Order deny,allow
Satisfy all
</Directory>

<VirtualHost 127.0.0.2>
ServerName brmbrm
DocumentRoot "C:/Program Files/wamp/www_brmbrm"
Directoryindex index.php index.html index.htm
AccessFileName .htaccess
</VirtualHost>

3) A aby to malo gule, do systémového DNS ešte pridáme alias pre našu novú IP adresu. :p
[Windows only] Takže na koniec súboru C:\WINDOWS\SYSTEM32\DRIVERS\ETC\HOSTS dopíšeme

127.0.0.2 brmbrm

That's it!

Ikonky pri linkoch cez CSS

napísal , 13 Oct 2010

Niekedy je dobrý nápad zakomponovať ikonky pri odkazoch cez CSS background, namiesto kombinácie <img> a <a>. Menej písania, menej html elementov, je to kompaktnejšie a pre prípadnú zmenu dizajnu netreba loziť do html.


ikonka cez obrázok: comments awesome comments

<a href="#">
  <img src="comments.png" alt="comments" style="vertical-align: middle; border: 0;"> 
  awesome comments
</a>

V niektorých browseroch podčiarknutie textu zasahuje do samotného obrázku. Vybrať <img> von z <a> by to síce vyriešilo, potom by ale kliknutie na obrázok nefungovalo ako link. Fix:


ikonka cez css: really awesome comments

<a href="#" style="padding-left: 21px; background: url('comments.png') 0px 2px no-repeat;">
  really awesome comments
</a>

Wheee:)

padding-left: 21px je tu potrebný, aby obrázok neprekrýval text - vyhradíme mu 21px na ľavej strane, v nich sa môže realizovať a text nechá na pokoji.

Yellow fade efekt v jQuery [video]

napísal , 11 Oct 2010

Čo najčastejšie vidíte po úprave profilu? Správu typu "Váš profil bol úspešne upravený". V dnešnej dobe preplnených stránok je ale často problém všimnúť si už len túto správu, nie ešte práve upravený element, na ktorý sa správa vzťahuje.

Yellow fade technika od 37signals proti tomu bojuje šikovným spôsobom - element sa cez JavaScript zvýrazní žltou farbou, ktorá postupne zmizne. To zaručene získa pozornosť a človek hneď vie, na čom je. Like this:

Video ukazuje a vysvetľuje implementáciu yellow fade efektu na stránke, na ktorej práve makáme. Používame jQuery a ideme na to bez pluginov a dodatočných súborov. Riešenie možno nie je ideálne (ani univerzálne), rozhodne je však dostatočne obskúrne a tým pádom hodné podelenia o :) Ostatne pointou týchto videí je predstaviť užitočné koncepty a ukázať veci, ktoré ste (nielen) o jQuery možno nevedeli.

Bug v poli

napísal , 9 Oct 2010

...alebo skôr feature? Keď v PHP používate foreach s referenciou (&), treba si dávať veľký pozor. Môžu sa diať vcelku záhadné veci. Zoberme si takýto príklad:

$ciselka = array(1,2,3,4,5,6);

foreach ($ciselka as &$cislo) $cislo *= 10;

foreach ($ciselka as $cislo) echo "$cislo ";

V prvom foreach cykle všetky čísla v poli vynásobíme desiatimi a v druhom ich vypíšeme - triviálna vec, takže výsledok je úplne jasný:
10 20 30 40 50 60

Alebo aj nie? Ak to skúsite naozaj spustiť v PHP, uvidíte niečo trocha iné:
10 20 30 40 50 50 - WTF is goin' on?

Prečo sú posledné 2 prvky rovnaké? Cyklus foreach funguje tak, že do pomocnej premennej ($cislo) vždy kopíruje aktuálny prvok poľa a podľa toho, či pred ňu nedáme alebo dáme "&" sa buď do nej skopíruje hodnota aktuálneho prvku alebo odkaz/pointer na aktuálny prvok. V prvom cykle úkladáme do pomocnej premennej odkazy na prvky poľa, takže po skončení je v premennej $cislo odkaz na posledný prvok.

Ak by sme teraz premennej $cislo priradili hocijakú hodnotu, zmenila by sa aj hodnota posledného prvku poľa. A presne toto sa deje pri druhom cykle foreach - postupne, ako prechádzame poľom, sa priraďujú premennej $cislo hodnoty 10, 20, 30, 40, 50. Takže je logické, že keď prijdeme na posledný prvok, je v ňom hodnota predposledného prvku.

Ako tomu zabrániť? Nuž velice jednoducho. :p
Za prvý foreach stačí napísať unset($cislo). Premenná prestane existovať, odkaz sa zruší a v druhom cykle sa úplne nanovo vytvorí premenná $cislo, takže sa nič nebude prepisovať.

Je diskutabilné, či sa toto vôbec dá označiť ako bug... Na jednej strane prakticky nepredvídateľné, ale na druhej aj celkom logické. Asi preto je to v PHP nezmenené odvtedy ako existuje foreach s referenciou.

Hráme sa s formulármi, CSS3 a jQuery [video]

napísal , 7 Oct 2010

Aké jednoduché je vytvoriť formulár ako tento od nuly? Takto jednoduché:

Klikni na "povedz mi o tom viac" a dozvieš sa, ako presunúť labels priamo do inputov, ako zariadiť aby zmizli, keď do nich človek klikne a iné JavaScript srandy (warning: includes jQuery).