Vylepšíme tému, rozložíme ju na viac template files a tie rozhýbeme WordPress Loop-om.
WordPress Loop je akýsi základný stavebný kameň WordPressu.

Keď si vyžiadame vo stránku, WP sa pozrie do nastavení v dashboarde, podľa nich vytiahne príspevky z databázy a uloží si ich. WordPress Loop je funkcia, ktorá k týmto uloženým informáciám pristupuje a po jednej nám ich všetky dovolí vypísať a robiť s nimi veci.

A to si ukážeme.
A ukážeme si aj HTML5 a veci okolo.
Pretože v našej téme budeme používať nové HTML5 elementy.

A to všetko do ľúbezných rytmov kráľa fontány, Vasha P.

Stiahnite si vyrábanú tému: amazeballs_v023.zip

yablko, 5 May 2012 | permalink
kategórie: PHP, Tutoriály, Videá

Dnes si vytvoríme prvú vlastnú tému, yay!
Bude veľmo veľmo jednoduchá, žiadne zázraky nečakajte. Ale bude.

Témy:

• sa starajú nielen o výzor ale aj o funkcionalitu
• sú kolekcia súborov, ktoré spoločnými silami dajú stránku do pohybu
• potrebujú minimálne 2 súbory - style.css a index.php (napríklad)
• môžu okrem Template Files obsahovať súbor functions.php
• existujú

A tak ďalej. Pozri si video, dozvieš sa viac:)
Ospravedlňujem sa za kvalitu zvuku, je menej než ideálna. Snažil som sa odfiltrovať kopu okolitého rámusu, z čoho mi vychádza, že by mi niekto z vás mal kúpiť RØDE Podcaster ;)

Ostatné seriály nájdeš na yablko.sk, kde ma môžeš aj podporiť. Dík!
Prípadne ma sleduj skrz @yablko.

Hudba je od Neural Corrosion a dá sa stiahnuť (zadarmo, bitches!) na neuralcorrosion.com. Ak poznáš Stevena Wilsona, prípadne ak sa ti páči psychedelicko-divný rock, budeš tam ako doma.

yablko, 5 May 2012 | permalink
kategórie: PHP, Tutoriály, Videá

Čo robíme:

• stiahneme a nainštalujeme wordpress
• prebehneme jeho administrátorské rozhranie (dashboard)
• zbehneme základné features
• ukážem ako cez DB resetnúť administrátorské heslo
• ukážem trik, ako WP nakopnúť do debug módu
• metal

Ak s WP pracuješ, ak ho poznáš, ak ho máš nainštalovaný.. preskoč toto video. Nepozeraj ho. Skapeš od nudy. A nehovor, že som ťa nevaroval;) But there IS metal, so.. je to na tebe.

Ostatné seriály nájdeš na yablko.sk, kde ma môžeš aj podporiť. Dík:)
Prípadne ma sleduj skrz @yablko.

Hudba od @tscorbeaux, k stiahnutiu cez bandcamp. Enjoy!

yablko, 4 Apr 2012 | permalink
kategórie: PHP, Tutoriály, Videá

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.

yablko, 4 Apr 2012 | permalink
kategórie: Tutoriály, Videá

Canary je dev build prehliadača, updatovaný takmer denne. V praxi to znamená, že dostaneš prístup k experimentálnym fičúram hneď, ako je to možné. Chrome ich má dosť, väčšinou sú skryté v about:flags (napíš about:flags do adresového riadku).

Pre programátora je najužitočnejšie asi to, že má vždy prístup k najnovšej verzii developer tools (ctrl+shift+i / F12), ale dôvod prečo som to nahodil je, že Canary vie šlapať súčasne s obyčajným Chrómom. Čo som využil na vytvorenie dvoch prostredí - developerského a browsovacieho.

V našej branži k robote stačí internet a počítač a schopnosť potlačiť slzu a sadnúť k nemu ráno zas. A aj napriek tomu, že nemusíme, kopa z nás uteká do kanclov a coworking officov a tak. Preč z domu. Chceme vybudovať odlišný rytmus pre prácu a civil a chceme jasne cítiť, kedy skončilo jedno a začalo druhé. Keď vypadnem officu, chcem cítiť, že robota skončila a s tými paddingami sa budem jebkať zajtra, aj keď by to trvalo len 5 minút.

Rozhodnúť sa prestať sa dá aj doma, ale odolať je ťažké a ľudia sú slabučkí.

Ok thanks, now back to your grave Oscar.

Iný prehliadač je virtuálny odvar kancelárie.

Ako svetový šampión paniky a prokrastinácie, vždy keď sa v robote objaví čelindž, otváram nový tab a klikám na všetky bookmarky. To samozrejme môžem aj Canary, keďže väčšina bookmarkov a nastavení sa synchronizuje, ale tam nie som na stránkach prihlásený;)

A keďže ľudia sú nielen slabučkí ale aj leniví (a keď hovorím "ľudia", myslím "ja"), ono to stačí. Hádam to nebudem manuálne vypĺňať? Sa na to vyprdnem a vrátim sa k robote.

A keď Canary zavriem, viem, že robota skončila. Že má inú ikonku a že v ňom mám iné Extensions a vôbec fakt, že vyzerá inak, je tiež bonus. A že mi v ňom nikde nesvieti počet neprečítaných mailov je ešte lepší bonus;)

Pred časom som písal o prechode z Opery na Chrome. Je tam zoznam extensions, ktorý sa odvtedy zmenil. Navyše sa rozdelil, pretože developerské v browsovacom prostredí nepotrebujem a naopak. Takto nejak to vyzerá teraz:

povedz mi o tom viac

yablko, 4 Apr 2012 | permalink
kategórie: thoughts / ideas

Responsive design je v poslednej dobe je tak omieľaný trend, že o ňom hovorí pomaly aj moja babka. V zásade ide o fajn koncept. Namiesto kódenia a udržiavania niekoľkých samostatných verzií stránky (normálnej desktopovej verzie a mobilnej verzie) sa spraví jedna s pár dodatočnými informáciami, vďaka ktorým sa stránka prispôsobí akémukoľvek (rozumnému) rozlíšeniu. Od mobilu až po FullHD display.

Otvorte si demo, pohrajte sa so šírkou prehliadača a hneď pochopíte.

Skôr, ako prejdem ku konkrétnemu kódu, by bolo vhodné povedať, prečo uprednostniť responsive design pred starším trendom mobilných verzií.

Nuž. V ideálnom prípade stačí responsive design vytvoriť pridaním pár riadkov CSSka, v horšom aj pár riadkami JavaScriptu (tj. robota na pár hodín). Mobilná verzia je proste iná verzia generovaná serverom. Čiže má samostatné HTML, CSS a zrejme aj JavaScripty. Ak chcete niečo pridať, musíte prepisovať obe verzie.

povedz mi o tom viac

81403 (blade), 4 Apr 2012 | permalink
kategórie: CSS, HTML

Predstavte si, že vaša životná púť dospeje do situácie, kedy chcete niečo zapísať do MySQL tabuľky, ale nechcete sa zapodievať kontrolami, či daný záznam už existuje. Čo s tým..

1) Chcem vložiť riadok do tabuľky. Ak už existuje, nič sa nebude zapisovať.

INSERT IGNORE INTO vajcia (id, nazov, kaliber)
VALUES(NULL, 'Vajčisko', 'masívny')

Úplne normálny INSERT s tým rozdielom, že keď ak by sa bili primárne kľúče alebo unikátne kľúče (čiže záznam už existuje), query sa odignoruje. Vloženie sa odignoruje alebo riadok sa uloží neočakávaným spôsobom aj ak bude obsahovať iné chyby, na čo si treba dávať pozor.

2) Chcem vložiť riadok do tabuľky. Ak už existuje, chcem update-núť jeho údaje

INSERT INTO checkins (id, id_user, id_venue, count, last_checkin)
VALUES (NULL, 230, 6434, 1, NOW())
ON DUPLICATE KEY UPDATE count = count + 1, last_checkin = NOW()

Príklad ukazuje niečo ako "check in" na 4square. Pri prvom raze sa vloží záznam, že som na nejakom mieste vôbec bol, pri ostatných razoch sa zvýši počítadlo návštev a čas posledného check-in-u sa aktualizuje. Je to v podstate INSERT a UPDATE spojený do jednej query.

3) To isté čo druhý prípad, s malým rozdielom
Ak by som vkladal nejaký dlhý text, musel by som ho v predchádzajúcom spôsobe zopakovať 2x (raz v INSERTE a raz v UPDATE časti). Pri extrémne dlhých textoch by nám to teoreticky mohlo vadiť. Situáciu zachráni REPLACE.

REPLACE INTO poznamka (id, id_projekt, datum, text)
VALUES (NULL, 42, '2012-12-12', 'Všetko som vybavil, môžme spustiť tú apokalypsu... [1MB dalsich kecov]')

Je tu však jedna zradafeature. Ak záznam existuje, vymaže sa a vloží sa nový, čiže sa zmení aj primárny kľúč (ak je AUTO_INCREMENTovací).

Bonus
Prvý prípad s INSERT IGNORE sa dá riešiť trocha lepším, ale divnejším spôsobom, použitím ON DUPLICATE KEY UPDATE, takto:

INSERT INTO vajcia (id, nazov, kaliber)
VALUES(NULL, 'Vajčisko', 'masívny')
ON DUPLICATE KEY UPDATE id = id

Výhoda je, že sa neignorujú žiadne chyby, iba duplicitné kľúče. Nevýhodou je trocha mätúca syntax.

Teraz si už len treba dávať pozor na tie ženské.

81403 (blade), 2 Feb 2012 | permalink
kategórie: SQL

Snippety
html-ipsum.com - predvyplnené HTML listy a formy a tak
wp-snippets.com - WordPress snippets
baconipsum.com - BACON!

Text
google.com/webfonts#ChoosePlace:select - Google Web Fonts
fontsquirrel.com/fontface/generator - @font-face generátor
network-science.de/ascii - ASCII generátor
copypastecharacter.com - keď potrebuješ spešl znak

CSS
matthewlein.com/ceaser - pomoc s CSS transitions
border-radius.com
prefixr.com - doplní vendor prefixes ( -moz- -webkit- atď. )
css3please.com - niečo podobné, kind of
necolas.github.com/normalize.css - dobrý štartovný bod pre CSS

Grafika a obrázky
0to255.com - odtiene farieb, pre border a hover a tak
subtlepatterns.com - patterny pre background
placehold.it - image placeholders
spriteme.org - vytvorí sprite z obrázkov.. hádam
ajaxload.info - generátor AJAX loading gifov

Javascript
picnet.com.au/picnet_table_filter.html - jQuery plugin na filtrovanie HTML tabuliek
fgnass.github.com/spin.js - AJAX loading "obrázky"
rickharrison.github.com/validate.js - form validácia
github.com/bartaz/impress.js - framework na prezentácie

Pieskoviská
jsbin.com
jsfiddle.net
tinkerbin.com
cssdesk.com
css3.mikeplate.com

Feature Detection & Polyfills
modernizr.com - skript zistí, čo prehliadač podporuje
html5please.com - navrhne čo použiť, ak prehliadač danú feature nepodporuje
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Ostatné
dochub.io - instantná dokumentácia pre CSS, jQuery a tak vôbec
chopapp.com - keď chcete zdieľať kód
html5boilerplate.com - v kóde sa dá nájsť kopa fajn trikov
initializr.com - nastav čo chceš od boilerplate
htmlemailboilerplate.com

Niektoré používam často, niektoré občas a niektoré mám odložené na horšie časy. Možno niekomu pomôžu.

yablko, 2 Feb 2012 | permalink
kategórie: Efektivita

Sťahuj:
:: sublimetext.com/2 - stabilná verzia
:: sublimetext.com/dev - dev build

Je šikovný a nelezie do cesty

• rýchly, svižný, krásne čistý - ako "jednoduchý" textový editor
• napriek tomu zvláda IDE fičúry
• a ako dobre pri tom vyzerá
• všetko reaguje okamžite, nič netreba zbytočne potvrdzovať [ pozri video ]
• viac okien v jednom okne, minimapa súboru, full-screen nothing but text mode...

CTRL/CMD + P

• "go to anything"
• extrémne rýchle prepínanie / otváranie súborov
• súbory vyhľadáva naprieč celým projektom - napíšem "Controllers php" a dostanem zoznam všetkých php súborov v Controllers adresári a je jedno, ako hlboko je zahrabaný
• vyhľadávanie je fuzzy, takže stačí keď sa trafím približne
• zobrazenie všetkých metód / funkcií v súbore - CTRL + R / CTRL + P + '@'
• choď na riadok / goto line - CTRL + G / CTRL + P + ':'

function send_sms($number, $text)
{
	static $connection = false;

	if (!$connection)
	{
		require_once('extensions/SMS/connect.php');
		$connection = new SMSConnect();
		if (!$connection->create("login","heslo")) return false;

		$callback = function() use($connection)
		{
			$connection->Logout();
		};

		register_shutdown_function($callback);