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. :)

Jednoduchý export z PHP do Excelu

napísal , 9 Dec 2010

Je veľká šanca, že pokiaľ robíte webovú aplikáciu s akýmikoľvek tabuľkovými dátami, ktorá je určená pre ne-IT ľudí, budú od vás chcieť export údajov do Excelu. Ak nemajú veľmi obskúrne požiadavky (grafy, farebne odlíšené políčka, ...), môžete im pomerne jednoducho spraviť radosť - here's how:

V prvom rade nebudeme používať .xls, lebo to je škaredý binárny formát :), ale primitívny formát .csv (comma-separated values), ktorý vie Excel čítať a basically vyzerá takto:

Stlpec1,ďalší stĺpec,ešte stĺpec...
10,12,42
32,23,64
128,0,256

Na stránke asi používate UTF-8, takže samozrejme bude v Exceli problém s diakritikou a špeciálnymi znakmi. Problémy s enkódovaním sa dajú riešiť tak, že zakódujete súbor do Unicode a ako oddeľovače použijete taby (namiesto čiarok). Unicode sa dá vyjadriť veľa spôsobmi (UTF-8 je jedným z nich), ale Excel a Windowsovské veci vo všeobecnosti rozumejú iba UCS2/UTF-16 with BOM, čo znamená, že všetky znaky sú 16-bitové a súbor má na začiatku špeciálny znak (Byte Order Mark) udávajúci usporiadanie bitov (Big Endian alebo Little Endian - Windows používa ten druhý).

Vygenerované .csv nakoniec treba browseru odoslať ako súbor (inak by sa namiesto download okna zobrazil obsah súboru v prehliadači), na čo stačí zmeniť HTTP hlavičky.

$export = "Stlpec\tĎalší stĺpec\tEšte stĺpec\n";
while ($o = mysql_fetch_object($res)) $export .= "$o->stlpec\t$o->dalsi\t$o->este\n";

header('Content-type: text/csv');
header('Content-Disposition: attachment; filename="drist.csv"');
echo chr(0xFF).chr(0xFE) // BOM pre Little Endian
     .mb_convert_encoding($export, "UCS-2LE", "UTF-8"); // konvertujeme z UTF-8 do UCS2/Little Endian

Pro tip: ak by sa v samotných hodnotách mali objaviť taby (čo to máte pre boha za údaje? :), treba celú hodnotu dať do úvodzoviek:

"I can has	tabs"	bla	dríst

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;

Dojmy z TEDx Prague

napísal , 22 Nov 2010

TEDxPrague

TED je pozoruhodná konferencia "o nápadoch", ktorá sa každoročne koná v Kalifornii. Heslo TEDu "Ideas worth spreading" je asi najvýstižnejšou definíciou, pretože témy prednášok sú tak rôznorodé ako málokde. Celá konferencia je skutočne o nápadoch hodných šírenia, ktoré môžu zmeniť vás, vaše vnímanie, ľudí, rôzne oblasti výskumu a možno aj celý svet.

Väčšina prednášok je natoľko inšpiratívna, že sú z nich zverejňované videá (TED talks), ktoré v súčasnosti dosahujú hranicu okolo 300 miliónov pozretí. TED ale nie je len o prednáškach, je predovšetkým o zaujímavých ľuďoch a otvorenej atmosfére. Medzi blokmi prednášok je priestor na diskusiu, v ktorom sa môžete rozprávať so všetkými účastníkmi o čom chcete a aby to bolo jednoduchšie, každý má menovku s tromi témami, ktoré ho zaujímajú.

Problém je, že účastníkov môže byť len limitovaný počet a aj cena lístka je pre väčšinu ľudí úplne nereálna - $6000. Preto vznikol formát TEDx (x = independently organized TED event), ktorý spočíva v tom, že dobrovoľníci môžu organizovať menšie lokálne "polooficiálne" konferencie, ktoré sa nesú v duchu veľkého TEDu a podliehajú zopár jeho pravidlám (hlavne čo sa týka formátu a konceptu). Takáto dobrovoľníkmi organizovaná konferencia bola zrovna predvčerom v Prahe.

Po výborných zážitkoch z jarného TEDx Bratislava som neváhal ani minútu a hneď kupoval lístok na pražský TEDx. Bratislavský TEDx mal neuveriteľne príjemnú a inšpiratívnu atmosféru a bol tak dobre organizovaný, že som ani nečakal, že ho može aktuálny pražský prekonať. Nuž, popravde sa vôbec nedokážem rozhodnúť ktorý bol lepší :), iba viem, že na žiadny iný event sa mi neoplatilo ísť viac na ako tieto dva.

Na pražskom TEDx-e (s podtitulom ReSTART - začněme jinak) sa zišlo 450 ľudí, prednášalo cca 20 speakerov a bol štruktúrovaný do troch blokov prednášok na témy Rekreace a znovu(s)tvoření, Naděje - děti a vzdělávání a Recyklace civilizace a hodnot. V každom bloku boli speakeri z Česka aj zahraničia a púšťalo sa jedno video TEDtalk.

Užitočné CSS tipy a triky

napísal , 15 Nov 2010

Nedávno sme si ukázali esenciálne css tipy a triky, teda veci, ktoré potrebujete vedieť. Dnes si ukážeme užitočné css tipy a triky, teda veci, ktoré je fajn vedieť.

CSS reset

Čo: CSS reset je CSSko obsahujúce nastavenia, ktoré pomáhajú zabezpečiť kompatibilitu prehliadačov.

Prečo: veci, ktorým presne neurčíte ako majú vyzerať, prehliadač vykreslí podľa vlastného uváženia. A každý z nich môže uvažovať inak. Medzery medzi <p> môžu byť rôzne, veľkosti písma v <h1>...<h6> môžu byť rôzne, niektoré prehliadače môžu okolo obrázkov zobrazovať border atď. Použitím CSS resetu vytvoríte pre všetky prehliadače rovnakú štartovaciu pozíciu.

rozdiely v renderovani
<p> v <div>, firefox má odsadenie, IE nie... zdroj obrázku

Ako: toto Eric Meyer's Reset (prípadne upravenú verziu) hodíte do svojho HTML pred ostatné CSSká, prípadne stačí skopírovať kód na začiatok svojho CSS súboru.

Čo dodať: Existujú aj resety od iných autorov, tento je však zrejme najpoužívanejší. Je to obyčajné CSS a je teda dobrý nápad si ho upraviť podľa vlastnej potreby. Nie vždy budete používať všetky elementy, ktorých štýly sú "resetované", takže ich môžete kľudne z resetu odstrániť a vo všeobecnosti si to upraviť ako len chcete.

Môžno si práve hovoríte "Toto je všetko pekné a fajn, ale..." a ja to plne chápem. Možno vám vyhovuje spôsob, akým prehliadače vykresľujú veci. Možno vám nevadí, že niektoré veci vyzerajú v IE trochu ináč. Možno máte dojem, že je to plno zbytočného kódu a že ak vám aj niečo bude prekážať, upravíte si to sami. A to je v poriadku. Je však dobré vedieť, že možnosť ako CSS reset existuje.

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. :)