Upload progressbar s PHP a jQuery

napísal , 1 Nov 2010

upload progressbar

Pri uploadovaní cez HTML formulár, hlavne ak sa jedná o veľké súbory, môže byť problém, že používateľ nevie aká časť zo súboru sa uploadla, či sa súbor vôbec uploaduje a prinajhoršom si myslí, že sa vôbec nič nedeje a nervózne kliká na submit. Ešte horšie ako zvýšená záťaž na server, ktorú generuje, je riziko, že sa na celú stránku vyserie, lebo si myslí, že nefunguje. :)

V tomto tutoriale si povieme ako za pomoci PHPčka a jQuery jednoducho vytvoriť progress bar, ktorý sa priebežne obnovuje podľa množstva prenesených dát z uploadovaných súborov a snáď pomôže predísť úniku netrpezlivých používateľov zo stránky.

Aby ste vedeli o čom je reč, tu si môžete pozrieť demo.

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.

Kirby's Overrated Yarn

napísal , 23 Oct 2010

Recenzia Kirby's Epic Yarn
Kirby's Epic Yarn (2010)
by Good-Feel, HAL Laboratory, Nintendo

Keď sa už spomína Kirby, dotiahnem to do úspešného konca a vylejem trocha svojho žiaľu nad posledným dielom z tejto série. Nintendo by sa len tak mimochodom mohlo spamätať a po pár desiatkach rokov prísť aj s nejakou novou sériou. Mariov, Zield™, Metroidov, Kirbyov a Donkey Kongov bolo už naozaj dosť. Na Kirby's Epic Yarn som sa napriek tomu tešil - stačí pozrieť ako nádherne a unikátne vyzerá a hneď pochopíte prečo. :)

Screenshot Kirby's Epic Yarn

Vzhľad si naštastie zachoval a musím povedať, že celá hra je fakt pekná, zlatá a adorabilná. :) Na druhej strane sa zastaralosť Wii prekvapivo silne prejavila aj napriek tomu, že hra je 2D a stále som mal pocit, že na estetické kvality takého kalibru je obraz strašne rozmazaný. Predsa len 640x480 je ukrutne málo a nezachráni to ani RGB kábel. Nad toto by som sa však vedel v pohode povzniesť, keby je hra zábavná.

Problém tkvie v tom, že Epic Yarn nepredstavuje skoro žiadnu výzvu. Zomrieť sa proste nedá a najhorší trest je, že vám vypadnú nazbierané body, ktoré si môžete následne pozbierať.. Uf.. Kirby je tým pádom nezastaviteľné hovädo, ktorému nevie nikto a nič zabrániť v tom, aby sa bez väčšej námahy pretlačil na koniec úrovne. Takýto štýl by možno vyhovoval menším deťom (spolu s celkovou infantilnosťou hry), akurát že to si nemám ako overiť, takže mi nezostáva nič iné len to súdiť podľa seba. :p

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

Scott Pilgrim vs. the World (2010) by 81403

napísal , 16 Oct 2010

Recenzia Scott Pilgrim vs. the World
by Edgar Wright, as seen by 81403

S radosťou a nadšením môžem konečne povedať, že som videl film inšpirovaný hrami, ktorý nestál za hovno! \o/
Podotýkam, že inšpirovaný hrami ako takými a nie priamo konkrétnou hrou, na to si musíme ešte počkať. Lepšie povedané - inšpirovaný komixom, ktorý bol inšpirovaný hrami ako takými. :)

Príbeh sa točí okolo 22 ročného nerda a basáka, ktorý chce chodiť s babou jeho snov (doslova) a musí preto poraziť jej 7 bývalých. Ak vám to príde ako blbosť, vôbec sa nebudem čudovať. :) Príbeh v podstate nie je až taký dôležitý a slúži ako základ na ktorom môže stavať jadro filmu, ktorým je jeho forma. Over-the-top, komixová, plná pixelov, mincí padajúcich z nepriateľov, zvukových efektov napísaných na orazovke, ukazovateľov zdravia a neskutočného množstva ďalších vecí nesúcich sa v tomto štýle.

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!

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.