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.

Vylepši si internety s UserScripts

napísal , 30 Jul 2012

Predstavte si, že sa vám nepáči nejaký web. Máte veľmi jasnú predstavu ako ho vylepšiť, ale nemáte nad ním žiadnu kontrolu. Buď napíšete adminovi (veľa šťastia pri stránkach ako Google;) alebo si napíšete Userscript. (alebo napíšete do Googla a on vám nájde Userscript)

UserScripts sú minimalistické rozšírenia pre Chrome, Firefox a Operu, ktoré slúžia na vylepšenie vzhľadu a správania stránok. Občas aj na vylepšenie správania celého prehliadača. Fungujú veľmi jednoducho - na stránkach definovaných skriptom sa spustí kúsok javascriptu, ktorý stránku "opraví". Narozdiel od extensions, Userscripty majú takmer nulový dopad na svižnosť prehliadača a spotrebovanú pamäť.

Čo je veľmi dôležité. Napríklad taký AdBlock (v základnom nastavení) pre Chrome pridá k načítaniu stránky aj viac ako sekundu. Na čo sa dajú UserScripty použiť, uvidíte na pár príkladoch, ktoré často používam.

Twitter bullshit remover

Mňa osobne maximálne nezaujímajú kydy z 4square-u, akákoľvek zmienka Klout-u a podobné kraviny, preto som spravil skript, ktorý skrýva tweety obsahujúce "4sq" alebo "klout". Protip: 4square zaujíma len tých, čo sú na 4square-i, ostatných nie! Keď vypnete automatické postovanie na Twitter, veľa ľudí dozaista potešíte. A sorry, Marcel, že som zrovna teba použil ako príklad, na niekoho to už len muselo padnúť :)

Download - Bullshit remover for Twitter.user.js (filterPattern si môžete upraviť podľa ľubovôle).

Informácie o prehliadači v kontaktnom formulári

napísal , 14 Nov 2010

Kompatibilita prehliadačov je stále lepšia, ale ešte stále sa môže veľmi ľahko stať, že návštevníkom vašej stánky bude blbnúť nejaký prvok. Hlavne pokiaľ je určená netechnickým ľudom, ktorých absolútne netrápi, či majú nový prehliadač, prípadne čo to ten prehliadač vôbec je.

Pri troche šťastia sa vám pôjdu niektorí ľudia posťažovať, že im niečo nefunguje, napíšu napríklad cez kontaktný formulár a vy sa budete ako správny developer snažiť opraviť chybu. Pokiaľ vám všetko fungovalo, daný človek musí mať určite iný prehliadač. Ale aký? ..no to sa od netechnického človeka dozviete veľmi ťažko :p

A tu prichádza na rad tento malý tip.

Do kontaktného formulára (a v postate hocikde, kde je šanca, že sa používatelia môžu na vašu stránku sťažovať:) pridajte takéto skryté pole a ušetríte si kopu starostí:

<?php
	$dbg = (count($_COOKIE) ? 'cookies: on' : 'COOKIES: OFF!').', '
		.'browser: '.$_SERVER['HTTP_USER_AGENT'].', '
		.'ip: '.$_SERVER['REMOTE_ADDR'].', '
		.'js: OFF!';
?>
<input type="hidden" name="extra" id="extra" value="<?=$dbg?>">
<script>
$(function()
{
	$("#extra").val( 
		$("#extra").val().replace("JS: OFF!","JS: on")
		+"; resolution: " + screen.width+"x"+screen.height
		+", document: "+window.innerWidth+"x"+window.innerHeight 
	);
});
</script>

Vďaka tomuto políčku budete hneď po kontaktovaní vedieť aký ma človek prehliadač, IP adresu, rozlíšenie displaya, veľkosť okna browsera a či má zapnuté cookies a Javascript. Podľa potreby môžete pridať kontrolu Flashu, Javy, premenných zo $_SESSION a kadečoho iného. Kontrola cookies cez PHP funguje samozrejme iba v prípade, že ich používate. ..ale pokiaľ ich nepoužívate, asi vás ani nebude trápiť, či používateľovi fungujú :)

Pre lepšiu predstavu - výstup vyzera približne takto:

cookies: on, browser: Opera/9.80 (Windows NT 6.1; U; en) Presto/2.6.30 Version/10.63, IP: 78.98.13.37, JS: on; resolution: 1600x900, document: 1600x815

Aby sme neobišli bez nejakých tých zrád, tak Opera/9.80 je v skutočnosti 10.xx a Windows NT 6.1 je Windows 7 :)

Kontaktný formulár by mal aj niekoho kontaktovať, na čo sa dá použiť PHPčková funkcia mail(), ktorej ale treba trocha pomôcť, aby sa v maile zobrazoval správny odosielateľ a diakritika.

$header = "MIME-Version: 1.0\n"
	."Content-type: text/plain; charset=UTF-8\n"
	."From: vasa@stranka.sk\n"
	."Reply-to: ".$_POST['email']."\n";

$predmet = '=?UTF-8?B?'.base64_encode('[kontaktný formulár] správa od: '.$_POST['meno']).'?=';

$sprava = $_POST['sprava']."\n-------------------\n".$_POST['extra'];

mail("sem.chcem.dostavat@maily.sk", $predmet, $sprava, $header);

V takomto prípade v pohode stačí plaintextový mail. Ak ale chcete byť fancy, k dispozícií sú HTML maily o ktorých si povieme nabudúce. :)

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.

Najrýchlejší úvod do vytvárania web stránok

napísal , 3 Oct 2010

Tento návod som sa rozhodol napísať, keďže už dosť ľudí po mne chcelo, nech im vysvetlím ako sa dajú tvoriť vlastné web stránky, ako to všetko okolo nich funguje a kde sa to naučiť. Samozrejme, že si môžu nakúpiť knihy, ale tie bývajú spravidla tak rozťahané, že ich veľa ľudí ani nedočíta. Plus zaťažujú množstvom detailov, ktoré na začiatku iba mýlia a zdržujú.

Preto píšem tento návod čo najstručnejšie, aby slúžil ako alternatíva k prehnane ukecaným knihám a aby ste namiesto zbytočného čítania mohli radšej kódiť. :p

Najskôr zbežný prehľad o tom, čo všetko sa deje, keď si v prehliadači otvoríte nejakú stránku. To aby ste vedeli kde sa vlastne používajú všetky tie technológie ako je HTML, CSS, PHP, SQL, JavaScript, jQuery, AJAX a iné.

1) Zadáte URL adresu - to je celý ten text, čo vidíte hore v address bare prehliadača.

2) Na základe názvu stránky (t.j. domény) sa zistí IP adresa servera, na ktorom sa nachádza hľadaná stránka. (Na toto slúži DNS server, ktorého adresu poznáme)

JavaScript - bodkočiarky a iné zrady

napísal , 27 Sep 2010

Ktorý spôsob indentácie (zarovnávania? uhm..) používate?

function meow ($meows) {
  // oh noes, god just killed a kitten :(
}
function meow ($meows) 
{
  // happy kitty, whee
}

Asi je zrejmé, ktorý preferujeme my ;) Douglas Crockford by nám ale jednu vylepil, keby to vidí. Prečo? Hah.. funny story..

12