Jak to vlastne natáčam?

napísal , 16 Apr 2011

V súvislosti s mojimi Nauč sa jQuery a Nauč sa CodeIgniter videami často dostávam otázku: "Jak to vlastne natáčaš?"

my setup

1. notebook: tu sa deje všetka sranda. Tu nahrávam, píšem kód, ukazujem výsledky v prehliadači.. Vidíte, že otvorené okno nie je maximalizované. Snímam totiž len tú časť obrazovky, kde sa niečo deje. Ostatné nikoho nezaujíma, plus takto ušetrím pár pixelov :)

2. druhý monitor: tu mám poznámky a prípravu. Počas prípravy samotnej veci, ktorú budem v tutoriály vytvárať, si zapisujem postup a myšlienky, ktorým sa chcem venovať. Aby som vedel o čom chcem kecať a v akej postupnosti. Občas tam mám odrážky, občas celé vety, občas kusy kódu.

3. mikrofón: do tohto kecám. Logitech USB Desktop Microphone. Nie je to žiadna sláva, ale rozhodne lepšie ako ten notebookový. Kľudne sa mi ale môžte poskladať na nejakú mašinu a dať mi to na Vianoce alebo niečo. Nebudem proti :) Výhoda je, že ho stačí pripojiť cez USB a šlape. Žiaden driver, nič. A potom už len 1 veľký svietiaci button - keď svieti nahráva, keď nesvieti je ticho.

4. podložka pod myš :) za normálnych okolností ju nepoužívam, ale behať myšou po stole robí slušný rámus. Kto pozeral prvé videá vie o čom hovorím :)

Camtasia Studio 7
Software balík obsahujúci všetko, čo treba k nahrávaniu videotutoriálov. Nahrávanie, strihanie, export do rôznych formátov. Vie nahrať dianie na obrazovke, tvoj škaredý ksicht cez webkameru a tvoj neznesiteľný hlas cez mikrofón. (<- robím si srandu, ale tie veci to fakt vie:) ) Znie to ako zlá reklama, ale toto používam :)

Nahrávam v 1280x720, čo je klasické 720p HD rozlíšenie a tiež veľkosť okna, ktoré snímam. Na export používam Youtube HD preset, ktorý si nepamätám, či tam bol od začiatku alebo som ho vytvoril sám. Každopádne, stiahnite si ho tu :)

Ok, už vieš čím, ešte by sa zišlo vedieť ako. Good news everyone! Prečítaj si môj návod Ako spraviť dobrý videotutoriál :)

Sucker Punch (2011)

napísal , 1 Apr 2011

sucker punch
by Zack Snyder

Drak naháňa lietadlo z druhej svetovej naložené sporo odetými devami, ktoré robia šrot z robotických samurajov a parou poháňaných náckov. Katanami. V slow motion. Do toho hrá Björk. Kuk:

Best movie ever? Nuž...

Odoslanie formuláru cez Shift + Enter a jQuery

napísal , 30 Dec 2010

Vyskúšajte si ako to funguje.

$(function()
{
	var form = $('#form'); // zmenit podla potreby
	
	form.keydown(function(e)
	{
		if (e.keyCode == 16) form.data('shiftPressed', true);
	}).keyup(function(e)
	{
		if (e.keyCode == 16) form.data('shiftPressed', false);
	}).keypress(function(e)
	{
		if (e.keyCode == 13 && form.data('shiftPressed'))
		{	
			form.submit();
			return false; // OH NO, STOP THE ENTERS!!
		}	
	});
})

Stačí skopírovať uvedený kód a podľa potreby zmeniť riadok var form = $('#form'); Tento predpokladá formulár s id="form".

Funkcionalita sa skladá z troch častí - čo sa stane pri keydown, keyup a keypress. Kto klikne na "povedz mi o tom viac", tomu o tom bude povedané viac :)

jQuery: 3 mini triky

napísal , 16 Dec 2010

1) zradné jQuery.submit()

.submit() je metóda, ktorá sa zavolá pri pokuse o odoslanie formuláru.

$('form').submit(function() 
{ 
	var data = $(this).serialize();
});

V data teraz máme uložený obsah formuláru, ktorý by sme mohli poslať AJAXom ďalej na spracovanie. Pretty sweet. Zrada je v tom, že submit nefunguje, ak máte vo forme element s id="submit" alebo name="submit". Takže pozor na to.

2) vytvorenie nového elementu

Chcem pridať nový div na koniec stránky. $('<div>bla</div>').appendTo('body'); je jedna možnosť. V jQuery na vytvorenie prázdneho elementu však stačí $('<div/>'). Ako druhý parameter môžem poslať object s atribútmi pre tento div. Like this:

$('<div/>', { 
	text: 'bla',
	css: {
		color: 'red'
	},
	click: function() {
		alert('gule');
	}
}).appendTo('body');

Oh btw, toto funguje od verzie 1.4. V starších sa na to ide takto: $('<div/>').text('bla').css(...)... Ale ak fungujete na staršom jQuery, tak prestaňte ;)

3) linky v novom okne pre validných

Môj pohľad na html validáciu už poznáte. Každopádne, ak chcete otvárať linky v novom okne bez toho, aby validátor protestoval, máte problém. V závislosti od doctype.

Za predpokladu, že všetkým linkom pridáte class="ext", pomôže nasledovné:

$('a.ext').attr('target', '_blank'); 

Samozrejme toto nie je jQuery špecifická finta. Point is: vyber elementy na základe class a pridaj im target="_blank".


Ďalšie jQuery tipy a (video)tutoriály nájdete v sekcii.. well.. jQuery.

PHP html/plaintext email

napísal , 12 Dec 2010

Čo to o posielaní mailov sme si povedali v našom článku Informácie o prehliadači v kontaktnom formulári (je to fakt užitočná vec, go check it out). Teraz prišiel čas podeliť sa o php funkciu, ktorá vie posielať html aj plaintext emaily. Naraz. Behold:

/**
 * odosiela multipart spravy - html aj plaintext pre hnilych klientov
 * linky pri plaintext mailoch su zamenene za samotne "href" hodnoty
 * html tagy a uderene charaktery su pri nich odstranene a "<br>" je zmenene na "\n"
 */
function send_mail($from, $subject, $body, $plaintext = NULL, $to = NULL)
{
	// ak neni zadany to, zvoli sa defaultny:
	if (!$to) $to = 'default@mail.sk';

	// zostavi html mail:
	$html  = "<html>\n";
	$html .= "<body style=\"font-family: Verdana, Geneva, sans-serif; font-size: 14px; color:#333;\">\n";
	$html .= $body;
	$html .= "</body>\n";
	$html .= "</html>\n";

	// ak neni zadany plaintext, zostavi sa z povodneho html mailu:
	if ( ! $plaintext)
	{
		// odstrani "\n" a potom nahradi "<br>" za "\n" pre plaintext:
		$body = preg_replace('/<br\\s*?\/??>/i', "\n", str_replace("\n", '', $body));

		// odstrani tagy (okrem <a>)
		$plaintext = strip_tags($body, '<a>');

		// matchne "<a>" tag a jeho "href" hodnotu:
		$pattern = '%<a\s[^>]*href=["/\'](.*)["/\']\s*>(?:.*)</a>%im';
		preg_match_all($pattern, $plaintext, $matches, PREG_SET_ORDER);

		// vymeni nazov linku za "href" hodnotu a na koniec prida medzeru 
		// (vraj to pomaha)
		foreach ($matches as $link)
		{
			$plaintext = str_replace($link[0], $link[1] . ' ', $plaintext);
		}

		// odstrani interpunkciu a prehodi html entities na text
		$plaintext = remove_accents(html_entity_decode($plaintext));

		// prida newline na konci plaintext mailu (bez toho to blbne):
		$plaintext .= "\n";
	}

	# -=-=-=- MIME BOUNDARY
	$mime_boundary = "----AWESOME----" . md5(time());

	# -=-=-=- MAIL HEADERS
	$headers  = "From: $from\n";
	$headers .= "Reply-To: $from\n";
	$headers .= "Return-Path: <default@mail.sk>\n";
	$headers .= "MIME-Version: 1.0\n";
	$headers .= "Content-Type: multipart/alternative; charset=UTF-8; boundary=\"$mime_boundary\"\n";

	# -=-=-=- TEXT EMAIL PART
	$message  = "--$mime_boundary\n";
	$message .= "Content-Type: text/plain; charset=UTF-8\n";
	$message .= "Content-Transfer-Encoding: 8bit\n\n";
	$message .= $plaintext;

	# -=-=-=- HTML EMAIL PART
	$message .= "--$mime_boundary\n";
	$message .= "Content-Type: text/html; charset=UTF-8\n";
	$message .= "Content-Transfer-Encoding: 8bit\n\n";
	$message .= $html;

	# -=-=-=- FINAL BOUNDARY
	$message .= "--$mime_boundary--\n\n";

	# -=-=-=- SEND MAIL
	$subject="=?UTF-8?B?".base64_encode($subject)."?=\n";
	$mail_sent = @mail( $to, $subject, $message, $headers );	
	
	return $mail_sent;
}

Kopírujte, prípadne si stiahnite súbor priamo: awesome_email.zip

Prečo? Nuž, HTML je v emailových klientoch podporované extrémne biedne. Niektoré ho nepodporujú vôbec, iné dokážu správu zhovadiť tak, že sa stane pre mnohých nepoužiteľná. Prudký geek z takého mailu linky vyťažiť dokáže, obyčajný Joe sa tým zaoberať nebude a váš business je ohrozený :P Niekedy to dokonca nemusí byť možné. Ak máte link v tvare <a href="http://awesome.bla/gule">haha link</a> a ono vám z toho náhodou spraví haha link? Useless. Táto funkcia pre plaintext časť emailu vytiahne adresu a zobrazí tú.

Pre väčšiu kompatibilitu odstráni aj interpunkciu a prehodí html entities na text. Keď už osekávame, tak poriadne ;) Na interpunkciu používa funkciu remove_accents, ktorú sme spomínali v článku Generovanie pekných URL. Je súčasťou toho .zipu tam hore.

$from mail, z ktorého bude správa poslaná (od koho)
$subject predmet mailu
$body text mailu
$plaintext ak chceme, môžeme plaintext pridať pridať sami, inak sa vygeneruje z $body
$to mail, na ktorý bude správa poslaná (komu)

Ak sa divíte, prečo sa mail "komu" zadáva ako posledný atribút... častejšie(?) budete chcieť, aby maily boli posielané vám. Prípadne klientom, ak robíte stránku pre klienta. Cez kontaktný formulár napríklad. A vtedy stačí napísať vašu adresu priamo do tela funkcie (namiesto default@mail.sk) a potom používať len prvé 3 atribúty.

Like this: send_mail($_POST['email'], 'Ahoj', 'Smrdí ti.');

Ak to nevyhovuje, nič vám nebráni prepísať si funkciu podľa seba :) Vráti TRUE ak sa mail podarilo odoslať, inak FALSE. Takže tak.

Enjoy. :)

Community (2009 - ?)

napísal , 1 Dec 2010

community
by Dan Harmon

3 dni, 34 epizód a cca 20 strán diplomovky. Keď som nepísal diplomovku, sledoval som Community. Keď som nesledoval Community, snažil som sa písaniu vyhnúť iným spôsobom. Ale nie to som chcel.

Community je seriál (je to seriál, btw), ktorý má gule. Nebojí sa zostaviť snáď politicky najkorektnejšiu zmes postáv ever a potom si z toho uťahovať. In fact, obsadenie je tak korektné, že obsahuje aj starého nadržaného rasistického homofóba ;) Toto je seriál, ktorý sa nebojí naplniť všetky seriálové stereotypy, vyhodiť nám to na oči a potom si z toho robiť prdel. Toto je seriál, ktorý sa nebojí rozpútať zombie apokalypsu do rytmov ABBAs Greatest Hits a povedať: "Troy. Make me proud. Be the first black man to make it to the end!". Toto je seriál, ktorý sa nebojí zareagovať, ako by v danej situácii zareagoval každý z nás: "HOLY CRAP IT'S A ZOMBIE!"

Konečne niekto! THANK YOU COMMUNITY! (ok, Shaun of the Dead si z toho tiež robil srandu svojim "We don't use the z-word." ale aj tak.. also, THANK YOU MR. WRIGHT!). Toto je seriál...

..wait... nemajú tieto veci začínať nejakým úvodom, kde zdelím čo a ako? Uh.. ok.. Jeff, jemne arogantný coolest-guy-ever-type, je bývalý právnik, ktorému prišli na falošný školský titul. Prichádza na Greendale Community College (vysoká škola pre úplných loserov, failures a dropouts) aby nazbieral dostatočný počet kreditov a znova si vybavil právnickú licenciu. Stretáva Brittu, ktorej skillz zo španielčiny sú nepriamo úmerné jej hotness (hehe.. see what i did there?) Hm.. počkať, aby sme si to ujasnili. Britta je hot. A Španielčina, jeden z predmetov na škole, jej nejde. Ani Jeffovi, na rozdiel od klamania - presvedčí ju k doučovaniu, ktoré má eventuálne viesť k večeri, avšak skupinka sa rozrastie, Jeffove klamstvo je odhalené a HILARITY ENSUES!! ..ehm..

It's blood! I thought it was paint, but I'm just bleeding! Talk about luck.

Praktické CSS3 praktiky

napísal , 22 Nov 2010

Najprv sme si ukázali Esenciálne CSS tipy a triky, nasledovali Užitočné CSS tipy a triky a dnes si povieme čo to o CSS3.

CSS3 je nová špecifikácia, ktorá do CSS pridáva kopu efektov a srandičiek. A mnohé z nich radikálne uľahčujú dizajnérom život. Zatiaľ to nie je oficiálny štandard, čo niektorí chápu ako povolenie vystupovať proti jeho používaniu. Kravina, CSS3 je awesome a je použiteľné už dnes.

Fun fact: aby sa špecifikácia stala oficiálnym štandardom, musia ju plne podporovať dva prehliadače. CSS2.1, ktoré používate, nie je plne podporované žiadnym. Najbližšie k tomu má IE8 ;) (zdroj: remy sharp)

Realita je taká, že moderné prehliadače podporujú mnohé z CSS3 atribútov už dnes a kľudne ich môžete používať. Staršie prehliadače neznáme atribúty jednoducho odignorujú a svet sa nezrúti keď v IE ten tieň nebude ;)

Noviniek v CSS3 je veľa, reálne použiteľných je ich menej a my si ukážeme tie, ktoré v rámci brm používame najčastejšie. Ak budem v texte používať výraz "moderné prehliadače", myslím tým Operu, Firefox, Chrome a Safari. Sorry ostatní :)

Pozor: v starých prehliadačoch nasledovné efekty nemusia byť viditeľné. Ak je toto váš prípad, stiahnite si najnovšiu verziu svojho prehliadača, v tomto prípade je novšie prakticky vždy lepšie ;)

text-shadow: [px] [px] [px] [farba]

Tieň pod písmom patrí medzi tie subtílne efekty, ktoré je fajn mať, ale ak nie sú, nič závažné sa nestane. text-shadow podporujú všetky moderné prehliadače bez problémov už nejakú tú dobu a funguje asi takto:

brm brm brm

text-shadow: 2px 2px 3px #317392;

bla bla bla

text-shadow: -1px -1px 0px #ccc;