CSS Flexbox, CSS display: flex

napísal , 8 Dec 2014

Floaty neboli nikdy určené pre čarovanie s layoutom stránky. Floaty nám mali len dať možnosť hodiť obrázok do textu a nechať text obtekať okolo neho. My sme ale večne nespokojní a chceme pekné stránky a chceme sa podobať knihám a časopisom a mať hlavičky a pätičky a sidebary a všetky tieto veselosti. Flexbox je prvý CSS modul špeciálne určený pre layout. Vďaka nemu môžeme zabudnúť na všetko to floatovanie a clearovanie a margin: autovanie a iné špinavé odžuby. Vďaka flexboxu CSS vyzerá, že funguje:)

Flexbox, CSS display: flex

Responzívny layout cez CSS display: flex

Flex je pre nás užitočný hlavne pri responzívnom dizajne. A sním je spojený aj nasledovná finta.

Box-sizing: border-box, CSS funckia calc()

Tieto videá sú súčasťou balíčka http://webrebel.sk/.
Kde nájdeš kopu ďalších šikovností.

Videokurz Webrebel: HTML a CSS, Responzívny dizajn, Javascript a jQuery

napísal , 3 Dec 2014

Nový kurz WordPress pre programátora

Posledné mesiace som v tichosti pracoval na velikánskom videokurze, ktorý by pokryl základy font-end developmentu. To sú všetky tie HTMLká a CSSká a Javascripty. Výsledkom spolupráce s learn2code.sk je videokurz, ktorý pozostáva z dobrých 20 hodín videa, rozdelených do cca 115 nových videotutoriálov.

Viac info a samotný kurz na webrebel.sk / cz.

Z mojim predošlých kurzov a videí viete, že s všetko snažím vysvetliť zrozumiteľnou, uvoľnenou slovenčinou, nechcem, aby to znelo ako nudná technická príručka. Snažím sa vysvetľovať tak, ako keby si bol môj kamarát, čo sedí vedľa mňa, čumí mi do monitora a pýta sa otázky. Chcem, aby to bolo pokiaľ možno humorné, pretože keď sa povie programovanie, ľudia si predstavia nudu:) A toto nie je nuda:)

Na týchto videách som si dal extra záležať. Žiadne pauzy, žiadne "hmmmm", žiadne čakanie, kým napíšem 20 riadkov kódu, tieto videá šlapú jak guľa, hodiny a hodiny seriózneho makania:) A majú lepší obraz a ešte lepší zvuk:)

Nebudem nikoho bullshitovať - tieto videá sa predávajú. Ale predtým, než poviete "pffft, to ti já akurát tak móžem", pozrite na to, čo obsahujú. Pretože je toho kurva veľa:)

HTML a CSS

  1. 00: Začiatok HTML/CSS kurzu
  2. 01: Úvod do HTML, HTML tagy a prvá stránka
  3. 02: Doctype a kostra HTML dokumentu
  4. 03: Formátovanie textu v HTML

rozbaliť zvyšných 36 epizód

Toto sú iba niektoré zo stránok, ktoré vytvoríme v rámci HTML a CSS kurzu.

HTML a CSS sú síce absolútny základ, pilier, na ktorom všetko stojí a treba ich mať zmáknuté odpredu-odzadu. Avšak bez responzivity a Javascriptu sa plnohodnotné stránky už nezaobídu. A preto..

Responzívny webdizajn

  1. 01: Úvod do responzívneho webdizajnu
  2. 02: Static vs Liquid vs Adaptive vs Responsive
  3. 03: CSS media queries
  4. 04: Prerábka statického blogu na adaptívny dizajn - hlavička

rozbaliť zvyšných 28 epizód

Do Responzívneho dizajnu som zakomponoval nielen zaužívané postupy, ale aj novinky v HTML a CSS, ktoré sa používať ešte len začínajú - Flexbox layout modul, obrázky cez <img srcset> alebo nový HTML <picture> element. Obrázkom je venovaných niekoľko videí, pretože s nimi je to v tejto dobe mobilov a retín veľmo komplikované.

Javascript a jQuery

  1. 01: Úvod do JavaScriptu a jQuery
  2. 02: Úvod do programovania - Javascript konzola a premenné
  3. 03: Úvod do programovania - čísla a reťazce
  4. 04: Úvod do programovania - polia a objekty

rozbaliť zvyšných 41 epizód

S tým, že počet JS/jQuery kapitol sa rozrastie minimálne na dvojnásobok. Všetky videá budú vypustené na v januári nového roka, tieto Javascriptové práve teraz dokončujem. To je tiež dôvod, prečo stránka webrebel.sk / cz hovorí o 15+ hodinách a ja tu hovorím o 20-tich. Ešte neviem, kam presne to padne, ale je to v tomto rozmedzí a v každom prípade je to hodín veľa:) Edit: je to 20 hodín;) Javascript videí je nakoniec 45.

Tieto Javascript videá majú zmysel aj pre tých, čo sledovali môj Nauč sa jQuery seriál. Pretože aj keď koncepty stále platia, už má chudák nejaký ten rôčik. Tento kurz sa venuje novinkám v jQuery, všetko ukazuje na kompletne nových príkladoch a ukazuje koncepty a pricípy, ktorým sa prvý seriál vôbec nevenoval. Cieľ bol nepoužiť z pôvodného seriálu nič, spraviť všetko na novo a inak. Rozhodne nechcem, aby ste platili za niečo, čo ste už videli zadarmo.

Kompletný balíček všetkých videí stojí 99 eur a dá sa kúpiť na webrebel.sk / cz. Existujú aj lacnejšie a drahšie verzie, takže preskúmajte stránku a vyberte, čo vám sedí. Hlásiť sa môžete okamžite, všetky videá sa odomknú 8. janára 2015 a zostanú vám naveky.

Edit: pridali sme verziu ZDARMA - prvých 15 kapitol a ostatné si môžete dokúpiť.
Viac info o free verzii.

Bolo to naozaj veľa roboty, a ak sa môžem sám pochváliť, je to fakt kvalitný materiál:) Sú to moje najlepšie videá. Tak sa netoto a dajte si vianočný darček a naučte sa robiť stránky, čo sa budete:) A ak nie, dajte vianočný darček niekomu inému! A ak ani to nie, veľmi ocením, aj keď budete tento článok (prípadne odkazy na webrebel.sk / cz) zdieľať po všetkých tých facebookoch a podobných veciach:) Beriem ktorúkoľvek formu pomoci:)

Keď si to tak vezmete, 100 videí za 99 eur, to je ani nie euro na video. To sú tak 4 videá na jeden hambáč v mcdonalde a garantujem vám, že tieto sú výživnejšie:)

Ok, tak veselé Vianoce a dúfam, že tento rok medzi Die Hard a Mrázika zaradíte aj Webrebel videá:)

Edit: pridal som ukážky z kurzu, celé videá, na ochutnanie tu Ukážka WEBREBEL kurzu a tu a tu a na youtube. Na stránke tiež pribudli odpovede na často kladené otázky.

Edit: do komentárov som pridal vysvetlenie, prečo je kurz časovo obmedzený

Je Atom lepší ako Sublime Text?

napísal , 12 Mar 2014

Svojho času som spravil video Sublime Text 2 je lepší ako tvoj editor, medzičasom Github spravil editor Atom.io a teraz je najvyšší čas ho vyskúšať.

V prípade, že blbne youtube a nechce zobraziť video, skúste tu: http://youtu.be/LOFcvAMaUtY

Nové videotutoriály

napísal , 6 Jan 2014

V krátkosti - začal som točiť nové videotutoriály. Chcem prejsť cez základy (HTML, CSS, PHP, MySQL) k ďaľším technológiám, možno jazykom, postupom. Chcem spraviť seriál pre PHP framework Laravel, chcem dokončiť WordPress. Niektoré seriály chcem vydať, až keď budú hotové celé. Čas od času možno vydám video samostatne.

Chcem, aby vychádzali na novej stránke. Začal som na nej pracovať. Neviem, kedy bude hotová. Snáď čoskoro. Neviem, v akom poradí, v akej forme a ako často budú videá a seriály vychádzať. Treba tomu dať čas, treba sa zamyslieť, treba skúsiť, všetko sa uvidí. Niektoré seriály budú možno platené.

Teší ma úspech predošlých seriálov a som veľmi rád, že napriek dlhej odmlke sa stále nájdu ľudia, ktorí chcú viac. Ja tiež chcem. Baví ma to. Zároveň však dúfam, že neutečiete, ak si občas vypýtam nejaký peniaz:) Nie za všetky videá. Za niektoré. Spraviť niečo a spraviť to dobre, stojí naozaj veľa času. A toho voľného moc nazvyš nie je. Snáď sa dohodneme:) Sľubujem, že spravím všetko pre to, aby sa to prípadným platiteľom oplatilo.

Ďakujem za čakanie.
A ďakujem za pozornosť.

Keď budú novinky, podelím sa o ne. Tu alebo na twitteri. Aj keď teda tam budete musieť znášať kopu tutoriálov-sa-netýkajúcich žvástov, takže je to vás:)

Držte palce, nech to ide rýchlo.

Recenzia Pebble

napísal , 10 May 2013

Pebble smart hodinky

Aké sú jedny z prvých "smart" hodiniek? TL;DR: fajn.

Pebble sú snáď prvé "digitálky", ktoré nie sú škaredé. Aspoň to som od nich ja očakával a to aj splnili. Narozdiel od ostatných smartwatches, sú to reálne hodinky - čiže nepretržite ukazujú čas. To je veľmi dôležité. Hodinky, ktoré treba zakaždým zapnúť, sú zbytočný gadget nahraditeľný telefónom.

Pebble sú zatiaľ viac hodinky ako "smart". Z hľadiska softvéru je dostupný iba úplný základ a SDK na akékoľvek aplikácie je ešte stále vo fáze prípravy. Čo do kvality, Pebblom dodaný/overený softvér funguje perfektne, 3rd party veci sú niektoré fajn, niektoré nepoužiteľné a nestabilné.

EDIT 16.5.: práve vyšlo Pebble SDK s obojsmernou komunikáciou. To znamená, že za chvíľu by mali byť dostupné aplikácie na všetko možné! (najväčší zoznam aktuálne tu http://forums.getpebble.com/categories/watchapp-directory)

Notebook, adaptér a hluk v reproduktoroch

napísal , 11 Feb 2013

Po pripojení notebooku k reproduktorom alebo k nejakému audio systému dosť často nastáva problém, že namiesto ticha ide z reprákov dosť veľký hluk z notebooku. Niečo takéto:

To kliknutie pred koncom je zvuk ako som odpojil adaptér od notebooku. Rámus evidentne zmizol. Podobná vec sa deje aj keď pripojíte monitor cez VGA - obraz sa vlní a šumí. Dlho ma trápilo čo je to za hovadinu a ako šum odstrániť, tak som sa konečne odhodlal o tom napísať.

Všetok tento trapas sa deje iba v prípade, že notebook aj reproduktory sú pripojené do elektriny "trojitou" zástrčkou (to je tá s dierkou) alebo ak sú k reproduktorom s obyčajnou zástrčkou pripojené 2 zariadenia s trojitou zástrčkou. Podobne s monitorom.

Problém je v tom, že vznikajú zemné slučky (anglicky ground loops). Na wikipédii je to, samozrejme, maximálne blbo vysvetlené, ale v zásade ide o to že zle navrhnuté zariadenia (ako napríklad adaptér) menia potenciál zeme a vďaka slučkám pomedzi zariadenia premáva neželaný prúd a robí hluk. Alebo také niečo.

Update: pridal som druhú, menej hackerskú metódu

Robíme WordPress #7 - Jarné upratovanie a editácia dashboardu

napísal , 2 Feb 2013

Dnešné video je plné škaredej roboty, na konci ktorej nie je víťazstvo, ale treba ju spraviť. Upraceme rozbordelený functions.php, zakážeme WordPressu generovať žvásty a upravíme admin dashboard, pretože môžeme.