Šikovný prográmek na komprimaci css

31.05.2004 21:46

Chtěl bych vynést na světlo perfektní miniaturní prográmek na komprimaci CSS. Jeho autorem je můj kolega Mirek Kučera. Díky tomuto prográmku lze bezpracně ušetřit i několik Kb v CSS! A to klidně můžete používat pořádné komentáře, odsazovat a lépe svůj stylový předpis strukturovat.

Jak funguje?

Prográmek odstraní všechny tabulátory, mezery a jiné bílé znaky kolem čárek, středníků a chlupatých závorek. V ostatních případech bíle znaky zkrátí na jednu mezeru. Smaže také všechny nové řádky, takže styl je celý v jedné řádce. Pokud je středník u uzavírací chlupaté závorky, tak je také smazán. Samotná komprimace souboru se provede přetažením souboru (souborů) nad ikonku programu nebo se v příkazové řádce napíše název souboru. Program styl načte, zkomprimuje ho, a uloží do nového souboru. Původní soubor zůstane nezměněn. Z toho vyplývá, že program zatím funguje pouze pod Windows, ale v plánu je i Linux verze. S MacOS bohužel nemám žádné zkušenosti po straně vývoje, existuje vůbec nějaký kompilátor pro C++?

Co hacky?

Program respektuje CSS hacky. Aby se uspořilo místo, program by rád vyhazoval komentáře. Takže pokud chcete používat komentáře (což doporučuji), které se mohou odstranit, musíte je zapsat s mínusem, tzn. /*- tento komentář se smaže -*/ a /* tento komentář zůstane */.

Jestli program nějaký hack zruší, dejte mi prosím vědět na email a provedeme nápravu. U všech hacků co používám mi nevznikl žádný problém.

Ukázka komprimace

Stažení programu


Chcete vědět jak vypadá výstup z javascriptu?

27.05.2004 23:19

V IE existuje jeden malý trik, který umožňuje zobrazit stránku nevykreslenou, ale jako text! To se velmi hodí třeba v případě, že potřebujeme odladit nějaký výstup z javascriptu nebo jeho pomocí něco vytváříme a nejsme si jisti skutečným výsledkem. Rozkrýt karty nám pomůže prvek XMP (není to překlep).

XMP

HTML prvky uvnitř prvku XMP se totiž zobrazí jako text, nikoliv jako zformátované HTML. To znamená, že vidíte přesně to, co vidí prohlížeč, tj. i části stránky vytvořené javascriptem.

Použití

Stránku, kterou chceme takto zobrazit klasicky otevřeme v prohlížeči a až se načte, vložíte do adresní řádky následující zápis a ihned se zobrazí aktuální stránka v “textovém” režimu.

javascript:'<xmp>'+document.documentElement.outerHTML+'</xmp>';

Příklad

Samozřejmě jsem nezapomněl na ukázku, ve které se javascriptem vypisuje obsah a je na ní dobře vidět, jak krásně tato “vychytávka” funguje. Někdy si říkám, že by IE chtěl pořádně prozkoumat, protože i přes to, jak je hrozný, tak může mít spoustu užitečných vychytávek.

Více informací naleznete u Microsoftu.

Aktualizace

Mirek Komárek mě e-mailem upozornil, že XMP není specialitka IE, nýbrž jde o zastaralý tag (via w3.org). XMP funguje kromě IE také v Opeře (testováno ve verzi 7.5). Ani prohlížeče s Gecko jádrem (Mozilla, Firefox, NN) nejsou mimo hru, ale nelze použít stejný zápis. Pro Gecko prohlížeče vypadá např. takto:

javascript:'<xmp>'+document.getElementsByTagName("html")[0].innerHTML+'</xmp>';

Z toho je dobře vidět, že do tagu XMP můžete vložit prakticky jakýkoliv skript a nechat si zobrazit jen konkrétní část stránky.


Bude nejnavštěvovanější stránka u nás tvořena relativně pomocí em?

25.05.2004 22:12

Dnes se ke mě dostala testovací verze nové homepage Seznamu. Bylo to z důvodu, abych se pokusil o oponenturu (nebo spíše kritiku?) stylového předpisu a HTML kódu stránky. Na první pohled je zřejmé, že homepage byla odlehčená o přebytečné mini-obrázky růžků, balast v kódu a optimalizace se také dočkal javascript.

V nedávné době mezi blogerskou komunitou probíhala diskuse, vyvolaná článkem Martina Kopty, o tom jaká má vlastně být správná šířka stránek?

Jak se zdá, Seznam zkouší řešení: “Pružná šířka závislá na velikosti písma a další kombinace” (formulace převzata z Pixyho článku). To znamená, že stránka není dělaná klasicky “pixelově”, ale pomocí relativních jednotek - em a její šířka je závislá na velikosti fontu uživatele, podobně jako zdařilý měšec.cz. Nyní pracuji na “seznamu mušek”, které jsem již našel, ale celkově mám z technického provedení dobrý dojem, jaký je Váš?

Připomínky mají směřovat na email design@firma.seznam.cz, který čtou odpovědní webmasteři Seznamu.

Související:


Zachytávání chyb a vyjímek v JavaScriptu u klienta na server

21.05.2004 16:41

Od “pradávných dob” webmasteři navštěvovaných webů bojují s JavaScriptem. Nejde ani tak o jeho syntaxi, ale o funkčnost (nebo spíše nefunkčnost) v širokém pásmu zobrazovacích zařízení. Určitě velice pomáhá DOM, který je nyní vesměs plně podporován, ale díky neomezenému počtu kombinací různých překážek na straně klienta se ne vždy se podaří vše odladit.

Pokud chceme mít své javascripty co nejvíce odladěné, musíme především o dané chybě vědět. A to je u javascriptu nejhorší. Uživatel zpravidla chybovou hlášku odklikne, ignoruje nebo se mu vůbec nezobrazí.

Autor webu se pomocí dvou technik v javascriptu může o chybě dozvědět a navíc ji může pomocí jednoduchého triku zapisovat do logů serveru.

Try-catch

Tato metoda se hodí tam, kde si potřebujeme být jisti, že se určitá část skriptu provedla bez problému. Do try bloku lze uzavřít libovolnou část kódu nebo funkce a pokud při zpracování dojde k jakékoliv chybě zavolá se blok catch.

Obecný zápis je takto:

try {
   kód
}
catch (proměnná) {
   kód
}

V jednoduché ukázce si můžete try-catch prohlédnout v akci. Tento zápis funguje ve všech moderních prohlížečích (IE5+, Mozilla, Opera, Safari…).

Více informací k try-catch-thow naleznete například na devedge.netscape.com nebo přes Googl.

Globální zachytávání chyb přes window.onerror

Pokud chceme kontrolovat všechny javascripty na webu, je ideální “pověsit” na událost onerror svoji funkci, která bude chyby zpracovávat. Vypadá to asi takto:

<script type="text/javascript">
function er(a,b,c) {
	alert(a);
	return true;
}
window.onerror = er;
</script>

Samozřejmě i pro tento způsob jsem připravil ukázku. Příklad je stejný jako předchozí, jen se liší ve způsobu zachycení chyby.

Zapisování chyb na server

Dostat na server chybovou hlášku nebo obecně jakoukoliv informaci od klienta je velice jednoduché. Pokud nemáte přístup do logů Apache, tak plně postačí i jednoduchý PHP skript, který data někam uloží. Celý “trik” spočívá v poslání potřebných parametrů v URL, tedy klasicky přes GET, jako když děláte odkaz, ale místo odkazu dáte parametry do obrázku.
Použití v javascriptu:

objekt_obr = new Image;
objekt_obr.src = "http://www.server.cz/log.php?chyba=neco&popis=neco";

Takto je to jednoduché. V případě že máte přistup do logů od serveru, lze nahrát na server prázdný 1px obrázek a na tento obrázek dávat požadavky. V kódu zaměňte log.php třeba za log.gif a poté potřebné informace vcelku bez problému vytáhnete z logu serveru. Log serveru nám může poskytnout automaticky informace o prohlížeči, pokud log nemáme, PHP tuto informaci také dokáže získat.


Seznam optimalizuje své stránky pro pomalejší připojení

16.05.2004 18:14

Největší český portál Seznam.cz začíná datově a technologicky optimalizovat své stránky. Již jsme mohli zaregistrovat, že se snaží propagovat své dial-up připojení jistou formou benefitů (např. zmizení horní reklamy v e-mailu). Dalším vstřícným krokem k uživatelům s pomalejším připojením bylo vložení všech invokačních (spouštěcích) kódů reklam na úplný konec stránky.

Proč JavaScript až na konci stránky?

Reklamní kódy jsou na Seznam vkládány převážně přes javascript, a pokud je takový javascript někde uprostřed stránky, tak prohlížeč nepokračuje s načítáním stránky dokud nemá stažený includovaný javascript. A to ještě nepočítám s dalším http požadavkem. Jestliže měl uživatel pomalé připojení (např. modem), tak se výrazně prodlužovala doba načítání stránky, protože bylo nutné čekat na odpověď od reklamního serveru. To s přesunutím kódů na konec stránky odpadá a stránky se bez jediného “zaseknutí” stáhnou celé (myšleno obsahově). A když uživatel má obsah, začnou postupně naskakovat reklamy.

Toto řešení je ideální z hlediska provozovatele webu. Zadavatel reklamy by mohl přijít s námitkou, že se reklama nebude zobrazovat tak často. Jistě, to je možné, a tak záleží na dohodě obou stran, ale reálná čísla ze statistik které mám k dispozici ukazují, že tomu tak není a nevniká žádný významnější rozdíl v počtu impresí.

Technické řešení

Umístěním javascriptů na konec stránky nám vznikne menší problém - Jak výsledek skriptu dostat na své místo ve stránce? Určitou pomocí mohou být CSS, ale ne vždy se dají aplikovat. Seznam to řeší pomocí jednoduchého javascriptu, který přes DOM rozhazuje výsledky javascriptů na správné místo ve stránce. Stačí ve stránce vytvořit prvek, přiřadit mu unikátní identifikátor (např. id=”sem-dej-vysledek”) a zavolat příslušný skript, který se postará o vše potřebné. Zmíněný skript vypadá takto:

<script type="text/javascript">
function placeAds(advertsCont) {
	var isdom = (navigator.platform.indexOf("Mac")!=-1) ? true : false;
	var adsCont = document.getElementById(advertsCont);
	var ads = adsCont.getElementsByTagName('div');
	for (i = 0; i < ads.length; i++){
		x = (isdom) ? 0 : i;
		if ((ads[x]) && (ads[x].id.indexOf('Box') != -1)){
			var aa = ads[x].id.substring(0,ads[x].id.indexOf('Box'));
			if (document.getElementById(aa)) {
				var kam = document.getElementById(aa);
				if (isdom) kam.appendChild(ads[x]);
				else kam.innerHTML = ads[x].innerHTML;
			}
		}
	}
}
placeAds('reklamy');
</script>

Skript pro svojí práci potřebuje zadat pouze název rodičovského prvku, který má procházet a poté jeho “děti” začne dávat na správné místo ve stránce. Zde je důležité dám “dětem” správné id, protože podle toho skript pozná, kam má obsah prvku na stránce vložit. Identifikátor je velmi podobný, jen je rozšířen o “Box”, tedy např. id=”sem-dej-vysledekBox”). Skript zmíněné “Box” odřízne a již ví, kam má obsah prvku umístit. Toto řešení je naprosto obecné a skript je schopen rozmístit cokoliv.

Lepší než dlouhé sáhy textu je jednoduchý příklad, na kterém si lze velmi dobře představit, jak skript pracuje.

Komprimace stránek pomocí GZIP

Seznam již v současné chvíli provádí poslední testy s komprimací stránek pomocí Gzip. Dnes je široká podpora komprese na straně prohlížečů, a tak lze již gzip kompresi vcelku bez obav použít. Ale v případě, že klient komprimaci nepodporuje, není problém poslat nezkomprimovanou stránku.

Gzip díky svému algoritmu (který je mimořádně vhodný pro HTML) dokáže velmi efektivně zkomprimovat zdrojový kód. Z vlastní zkušenosti vím, že se kompresní poměr pohybuje mezi 60-80%, což je velmi pěkné číslo. Aplikace Gzip je nejsnažší a nejméně nákladná na web, který má předgenerované statické stránky. Nicméně každému je jasné, že takových webů příliš není a většina stránek je generovaná “on-the-fly” (při požadavku). Ale ani generované stránky nejsou pro gzip problém, když se Apache dobře nakonfiguruje. Nicméně je nutné počítat s tím, že znatelně stoupne režie na výdej stránky, cca o 25%. To je pochopitelné, protože on-line komprimace je samozřejmě velmi náročná na CPU. To ale kompenzují velké úspory přenosu dat a podstatné zrychlení stahování stránek.

Pro základní zasvěcení to stačí a zatím se nechci detailně rozepisovat o způsobu konfigurace apache, gzipu a ani o jeho algoritmu apod., leda že by byli zájemci :) Hodně informací k tématu je také v knize Zrychlete si své WWW stránky, kterou taktéž doporučuji.