Robíme WordPress - nový seriál!

napísal , 23 Apr 2012

Hej! Nauč sa jQuery a Nauč sa CodeIgniter majú nového súrodenca! Začal som seriál, nultá epizóda:

Je o WordPresse.
Budeme v ňom robiť stránky a témy a pluginy a widgety a podobné srandy. Bude developersko-dizajnérsky. Nebudem vás teda učiť "písať články vo wordpresse" alebo iný trapas.

Seriál predpokladá základné vedomosti HTML a CSS a PHP a tak vôbec. Ak ich nemáte, počkajte na ďalšie seriály, aj na to príde:)

Volá sa "Robíme WordPress". Predbežne. Asi aj finálne.
"Dizajnovanie pre WordPress" sa mi nepáčilo a "I R WURDPRSS AND SO CAN U" by prešlo, len keby ste všetci šlahnutí jak ja. Takže "Robíme WordPress", lebo je to krátke a výstižné.

So have fun & stay tuned! (It's Bieberific!)

Btw hudba je od @tscorbeaux a dá sa stiahnuť tu. Šikovný chlapec. And ladies? He's totally single.

Ako vznikalo " Nauč sa písať "

napísal , 13 Jan 2012

Nauč sa písať mal byť pôvodne projekt o niečo väčších rozmerov a plánoval som spolu s jeho uvedením začať sériu článkov, podrobne popisujúcich jeho tvorbu. Chcel som začať prvotnou myšlienkou a skončiť podrobným tutoriálom pre každú z použitých technológií. Medzitým by bola rozobraná "analýza" a "návrh" a videli by sme screenshoty vyvíjajúceho sa dizajnu s okomentovaním každej zmeny a tak vôbec. Prvý článok som písal už počas tvorby stránky, potom som sa na pár mesiacov zasekol, takmer som na celý "projekt" zabudol a neskôr som ho v mierne okresanej verzii predsa len spustil. Články sa mi už samozrejme písať nechcelo, tu je ale ten prvý, v neupravenej podobe. Možno si v ňom niečo nájdete...


SSD v notebooku

napísal , 27 Dec 2011

Asi ste už počuli skratku SSD. "Solid State Drive" je moderná verzia klasického pevného disku (HDD), ktorá má namiesto otáčajúcich sa diskov rýchlu flash pamäť. To prináša viacero výhod - väčšiu odolnosť, nulovú hlučnosť a hlavne mega rýchlosť.

Aby som uviedol do obrazu, klasický notebookový disk má prenosové rýchlosti ~60MB/s, kým SSD dosahuje cez 500MB/s. Hlavnou praktickou výhodou je ale rýchlosť náhodného čítania. Pri čítaní roztrúsených súborov (najčastejší prípad) sa klasický disk musí fyzicky posunúť na dané miesto, čo nejaký čas trvá a SSD môže čítať odkiaľkoľvek, hneď. Pozrite si porovnanie HDD a SSD, v tejto tabuľke. V prvom stĺpci je veľkosť dát, ktoré sa čítali z náhodných miest a v druhom počet takýchto blokov, ktoré disk prečíta za sekundu.

Obyčajný disk zvláda maximálne 50 náhodných čítaní za sekundu a SSD viac ako 10000. Holy balls! :) Maximálne rýchlosti SSDčka sú v mojom prípade "len" 256MB/s, lebo nemám rozhranie SATA3, iba SATA2 s polovičnou rýchlosťou.

V praxi to znamená, že Windows sa spustí za 15 sekúnd, Word za 1 sekundu, Photoshop za 6, Chrome za štvrť sekundy.. you get the idea. Rozdiel je cítiť skoro pri všetkom. Všetko sa deje takmer okamžite. (Okrem spúšťania veľkých bordelov ako je Photoshop alebo Windows;)

I want it NOW

Keďže sa píše rok 2011(2), pravdepodobne používate notebook a notebooky majú miesto len na jeden disk. Ak by ste chceli nahradiť pôvodný 500GB harddisk 500GB SSDčkom, vyšlo by vás to okolo 1000€. To je, samozrejme, hovadina. Za normálnu cenu (okolo 100€) dostanete len 60 gigabajtové SSD, čo je na reálne existovanie málo. Kam by ste sťahovali všetky tie seriály a porná? ;)

Achievement unlocked!

napísal , 25 Jan 2011

Awww, chudák náš úbohy blog, nejak sme ho v poslednej dobe ignorovali. Za to všetko môže evil škola! (a zajtra.sk ;) But we're back in business a povieme si ako v PHP spraviť nejakú riadnu sprostosť - napríklad achievement generator™.

Myšlienka za ním bola asi taká, že pokiaľ sa niekto zvykne velice chváliť nepodstatnými blbosťami a lezie s tým na nervy, pošlete mu takýto obrázok a možno to bude mať zaujímavý efekt. Pokiaľ ste za posledných pár rokov hrali nejakú novšiu hru, určite vašej pozornosti neuniklo, že vás zasypávajú kadejakými trofejami a achievementami pri každej príležitosti. (Niekoho to akože aj reálne teší? Podľa mňa je väčšina vývojárov dosť slabých psychológov, súdiac podľa toho aký majú achievementy na mňa efekt. :p)

Demo - brm achievement generator™!

Čo sa týka programovania, budeme chciet písať text na obrázok pomocou knižnice GD a odosielať ho ako PNG, plus využijeme nejaký ten URL shortener, aby vaša "obeť" nevidela čo jej to posielate. Všetko samozrejme pôjde cez AJAX.

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.

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!

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.