CSSkové trojuholníky a bubliny

napísal , 13 Jul 2011
Počul som, že horíš nedočkavosťou vedieť ako robiť takéto bubliny s trojuholníkmi v CSS bez použitia obrázkov!
Hm, to znie ako riadna kravina, povedz mi o tom viac.
Nuž.. všetko to začalo obyčajným štvorcom, ktorý mal "border"...

Rozuzlenie záhady CSS (s cicíkmi™)

napísal , 25 Apr 2011

Ako keby nestačilo, že žiadny browser sa nespráva celkom podľa (chaoticky prekomplikovanej) špecifikácie CSSka, občas máte tú česť naraziť na divné správanie, ktoré zámerne vytvorili jeho autori. Dnešný príklad -keď dáte obrázok do vnútra div elementu, na spodku sa vytvorí medzera. Prečo sa to deje a prečo by mi to malo vôbec vadiť?

Strihal som CSSko s dizajnom, kde má byť pod obrázkom aktuálne veľmi obľúbené "zloženie" za pozadie (ako vidíte na obrázočku vľavo hore). Tak si hovorím, že šak pohoda, spravím div s paddingom na spodku, v ktorom bude ako pozadie ten šedý cicík™ a posuniem celý div doľava. V tomto div-e by potom mohol byť hocijaký obrázok a bol by pekne ocicíkovaný.

.obrazok_s_cicikom {
	float: left;
	padding-bottom: 5px;
	margin-bottom: 8px;
	position: relative;
	left: -6px;
	background: transparent url('cicik.png') 0% 100% no-repeat;
}

No a tu prichádza zrada, cicík je posunutý o 3 pixely nižšie! Pôvodne som myslel, že to je nejaký bug browseru, ale ukázalo sa, že sa rovnako správa vo Firefoxe, Chrome, Opere a dokonca aj IE. Obrázok mal veľkosť 83, div 86. Tak skúšam vypínať bordery, paddingy, marginy, aj keď viem, že tam aj tak nie sú. Zo zúfalosti nahodím celý CSS reset a stále nič.

Po chvíli hľadania som sa dopátral k zaujímavému zisteniu. Obrázok natiahne div preto, že je braný ako inline element, ktorý sa snaží byť zarovno základnej čiary textu (baseline). Text je ale beťár a niektoré znaky má pod touto čiarou (malé "p", "q", "g", ...), takže div sa pre istotu roztiahne.

Divné. Obrázok síce nie je zrovna text, ale v podstate to dáva zmysel.

Čo sa s tým dá teda robiť? Buď spraviť z obrázku "nie-text" (.obrazok_s_cicikom img { display: block; }) alebo, ešte lepšie, nastaviť ho na najspodnejšiu úroveň textu (.obrazok_s_cicikom img { vertical-align: bottom; }).

Tak, tam máš záhada, práve si bola objasnená! Nabudúce si povieme niečo o ešte väčšej a častejšej záhade, o margin collapsingu.

Jak to vlastne natáčam?

napísal , 16 Apr 2011

Pozor, toto je už 6 rokov staré, veci neplatia.
Spravím nový článok alebo kurz o robení kurzov.


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

Spravte si vlastné tričko

napísal , 13 Mar 2011

Trieko

Ako lepšie povedať svetu čo si myslíte, ako keď si to budete hrdo niesť na hrudi? Pokiaľ radi kreslíte, môžete takto zaujímavým spôsobom využiť svoje obrázky.

Vytoriť si vlastné tričko je napodiv relatívne jednoduché a nenákladné. Keďže existuje kopec spôsobov ako na to a každý má svoje špecifiká, rozhodol som sa spraviť menší prehľad a popísať moje skúsenosti s každým z nich.

First things first

Ako to vlastne celé prebieha?
Buď si zvolíte jednoduchú cestu, skúsite nejaký generátor tričiek a poštou vám prijde mačka vo vreci™tričko, ktoré ste nechali na pospas danej firme alebo druhá možnosť, ak chcete mať všetko podľa seba:

  • zoženiete/nakreslíte obrázok s vysokým rozlíšením (aspoň 150 dpi, ideálne 300 alebo vektory)
  • zanesiete ho do firmy, ktorá robí potlač, vyberiete si typ trička, spôsob, farby, atď.
  • počkáte pár dní
  • máte tričká

Bude vás to stáť od 10 až po 30€ aj s tričkom, pričom cena sa skôr pohybuje pri tej dolnej hranici a niektoré spôsoby potlače sú závislé od množstva. Teraz k jednotlivým metódam, ich výhodám a vlastnostiam.

Achievement unlocked!

napísal , 25 Jan 2011

Awww, chudák náš úbohy blog, nejak sme ho v poslednej dobe ignorovali. Za to všetko môže evil škola! (a zajtra.sk ;) But we're back in business a povieme si ako v PHP spraviť nejakú riadnu sprostosť - napríklad achievement generator™.

Myšlienka za ním bola asi taká, že pokiaľ sa niekto zvykne velice chváliť nepodstatnými blbosťami a lezie s tým na nervy, pošlete mu takýto obrázok a možno to bude mať zaujímavý efekt. Pokiaľ ste za posledných pár rokov hrali nejakú novšiu hru, určite vašej pozornosti neuniklo, že vás zasypávajú kadejakými trofejami a achievementami pri každej príležitosti. (Niekoho to akože aj reálne teší? Podľa mňa je väčšina vývojárov dosť slabých psychológov, súdiac podľa toho aký majú achievementy na mňa efekt. :p)

Demo - brm achievement generator™!

Čo sa týka programovania, budeme chciet písať text na obrázok pomocou knižnice GD a odosielať ho ako PNG, plus využijeme nejaký ten URL shortener, aby vaša "obeť" nevidela čo jej to posielate. Všetko samozrejme pôjde cez AJAX.

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.