Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Ahoj programátoři, v pravidelné minisoutěži o placu a nálepky si tento týden zkusíme naprogramovat optimizer CSS stylů v PHP.

Jak váš web roste, roste s ním i jeho CSS soubor. Takové velké CSSko budete jistě chtít okomentovat a rozdělit do více menších souborů. Ve finále je ale kvůli výkonu potřeba, aby byl výsledný CSS soubor jen jeden a bez komentářů. Právě tuto úpravu vykoná soutěžní PHP skript.

Navrhněte skript, který:

  1. Dostane na vstupu několik CSS souborů
  2. Obsah těchto souborů minifikuje (odstraní komentáře a bílé místo, samozřejmě tak, aby soubor nerozbil)
  3. Vrátí jeden velký výsledný CSS soubor

Tipy: Zadání není těžké. Snažte se o objektovou aplikaci. Prohlížeč nemusí soubor s příponou .php cachovat, je nutné mu v hlavičce sdělit, aby to dělal.

Čas si dejme do neděle 13.10.2013 do 18:00. Vítěz získává placku na batoh, samolepky a ocenění do profilu :)

Odpovědět  +3 8.10.2013 10:39
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Michal Vašíček:

Konečně něco, čeho se můžu zůčastnit :)

Nahoru Odpovědět 8.10.2013 13:59
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Michal Žůrek (misaz):

Jinak kdy by neměl nějaké css, tak můžete použít moje z webu misaz.moxo.cz
Ve složce styles jsou styly (viz. obr). U těchto stylů si však doplňte komentáře pro zkoušení.

Nahoru Odpovědět 8.10.2013 14:58
Nesnáším {}, proto se jim vyhýbám.
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Daniel Vítek:

Vypadá zajímavě :P Dáváš za tohle i placku na algoritmy nebo jen na PHP ?

 
Nahoru Odpovědět 8.10.2013 15:51
Avatar
Odpovídá na Daniel Vítek
Michal Žůrek (misaz):

pokud nepoužiješ regex tak asi jo.

Nahoru Odpovědět 8.10.2013 15:53
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Dostal
Redaktor
Avatar
Odpovídá na Daniel Vítek
David Dostal:

Hezké. Ještě by se to ale dalo vylepšit. Kupříkladu nav ul se ti optimalizuje jako navul.

Editováno 9.10.2013 20:29
 
Nahoru Odpovědět 9.10.2013 20:28
Avatar
Fredep
Redaktor
Avatar
Odpovídá na Daniel Vítek
Fredep:
content: 'V textu jsou /* komentáře chápany jako text... */';

...a mezery v textu to také odstraní...

Editováno 10.10.2013 7:19
Nahoru Odpovědět 10.10.2013 7:17
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
Michal Žůrek (misaz):

Tak přidávám sem svůj výtvor: http://misaz.moxo.cz/…ptimizer.zip Pokud se vám bude jevit výsledek nezoptimalizovaný, zakomentujte/od­komentujte řádek 70 v souboru CSSOptimizer.php. Používá se to jednoduše.

Naimportujete si soubor CSSOptimizer.php, vytvoříte instanci třídy CSSOptimizer.php, volitelně ji předáte pole stringů se styly. Dále můžete naimportovat všechny csska ze složky metodou loadStylesFrom­Folder("složka"). Výsledek vypíšete (nečekaně) metodou Vypis() .

Ukázka použití (soubor style.php):

require_once("CSSOptimizer.php");
$styl = new CSSOptimizer();
$styl->loadStylesFromFolder("css");
$styl->Vypis();
Nahoru Odpovědět  +1 12.10.2013 8:56
Nesnáším {}, proto se jim vyhýbám.
Avatar
FastNode
Redaktor
Avatar
FastNode:

Prosím ještě chvíli, už finishuju.

Bohužel to asi nestihnu, bude vadit, když to nebude umět spojovat více css souborů?

Editováno 13.10.2013 17:57
 
Nahoru Odpovědět 13.10.2013 17:55
Avatar
Nahoru Odpovědět 13.10.2013 17:56
Nesnáším {}, proto se jim vyhýbám.
Avatar
FastNode
Redaktor
Avatar
FastNode:

Ok. Moje první objektová aplikace a první soutěž. Čekám hlavně kritiku, díky které se budu moci příště zlepšit.

http://www.itnetwork.cz/dev-lighter/228

Teď jsem zjistil, že procházení složek mi nefunguje, takže se s tím ani nezatěžujte, umí to zpracovat pouze samostatné css.

Editováno 13.10.2013 18:07
 
Nahoru Odpovědět 13.10.2013 18:04
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
David Čápka:

Nikde tu nevidím tvůj zdroják.

Nahoru Odpovědět 13.10.2013 18:16
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
FastNode
Redaktor
Avatar
Odpovídá na FastNode
FastNode:

Ještě jsem to upravil, což je zřejmě proti pravidlům. Takže už to zpracovává samostatný css, složku s css a pole s názvy css. Komentáře jsem fakt nestihl přidat.

Editováno 13.10.2013 18:22
 
Nahoru Odpovědět 13.10.2013 18:21
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na FastNode
David Čápka:

Ještě čekám na kód od Daniel Víteka. U tebe úplně nechápu, proč "zachraňuješ" text mezi uvozovkami?

Nahoru Odpovědět 13.10.2013 18:29
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
FastNode
Redaktor
Avatar
Odpovídá na David Čápka
FastNode:

Protože hned poté vyhazuju bílé znaky a při větším počtu mezer je zkracuji na 1. Tím bych ovšem ovlivnil i text v uvozovkách. Snažil jsem se to napsat tak, aby veškerý obsah v uvozovkách zůstal v původním tvaru. Takže nejdřív si vše z uvozovek vytáhnu do pole, pak zbytek pročistím a potom do těch uvozovek ten text vrátím v původním tvaru.

Např. kdyby někdo zešílel a napsal třeba p:before { content:"A   H O     J­"; } tak se snažím mu vrátit p:before{conten­t:"A   H O     J­"} a nikoliv p:before{content:"A H O J"}

Snad jsem to srozumitelně vysvětlil

Editováno 13.10.2013 18:39
 
Nahoru Odpovědět 13.10.2013 18:36
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na FastNode
David Čápka:

Nenapadá mě proč bych do uvozovek v CSS psal mezeru?

Nahoru Odpovědět 13.10.2013 18:38
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
FastNode
Redaktor
Avatar
Odpovídá na David Čápka
FastNode:

Ani mě ne. Ale přesto si myslím že by ten skript neměl nijak upravovat obsah v uvozovkách, možná jsem jenom uvedl špatný příklad.

 
Nahoru Odpovědět 13.10.2013 18:40
Avatar
FastNode
Redaktor
Avatar
Odpovídá na David Čápka
FastNode:

někdo může použít v content třeba hvězdičku a u ní mezeru, která by se jinak odstranila

 
Nahoru Odpovědět 13.10.2013 18:47
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na FastNode
David Čápka:

Máš pravdu, blbnu, mezera tam samozřejmě může být, třeba u názvů fontů. Řešil bych ale spíše kdy mezeru můžu vymazat než je vymazat všude a pak vrátit obsah uvozovek. Smazat je potřeba vlastně jen více mezer zasebou nebo mezery za : a před {.

Nahoru Odpovědět 13.10.2013 18:48
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
FastNode
Redaktor
Avatar
Odpovídá na David Čápka
FastNode:

Mezery zkracuju na jeden znak v kódu, v uvozovkách se snažím nechat vše na místě.

Je to prasárna, ale když někdo udělá dvě mezery "  " tak se mu snažím vyhovět tím, že je tam nechám. Jen k tomu jsou funkce saveText a recoverText. Pokud někdo nepíše jako prase a nemá třeba "/*", tak je může vypustit.

 
Nahoru Odpovědět 13.10.2013 19:02
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Každopádně už jsme tedy asi všichni.

Danovi to maže mezery všude. Snaha se cení, ale již jsem ti říkal asi tisíckrát, že "Uprav" není vhodný název pro třídu :) Třída je objekt, ne akce.

Misaz pěkně načítá vše ze složky, kód se zdá objektový. Splitování na selektory mi přijde trochu zbytečné.

FastNode na to šel poměrně brutální metodou saveText, kde je kód dost redundantní a hlavně by to určitě zvládl regulární výraz. deleteUselessChar() se mi naopak líbí, je dobře kompaktní. Škoda té zmatenosti s uvozovkami, která asi není ani potřeba a také neexistující možnosti procházet více souborů.

Zrovna to implemnetuji na devbooku a myslím, že by mělo bohatě stačit tohle:

// Odstranění komentářů
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// Odstranění některých mezer
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace(', ', ',', $buffer);
// Odstranění konců řádků
$buffer = str_replace(array("\r\n", "\t", "\r", "\n"), '', $buffer);

Ještě to testuji, ale vypadá to ostylované dobře :)

Nějak se nemohu rozhodnout mezi Michal Žůrek (misaz)em a FastNode, tak vám ji pošlu oběma :) Adresu prosím pošlete x do PM a FastNode si nějak upraví ty for cykly :P

Nahoru Odpovědět 13.10.2013 19:09
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
FastNode
Redaktor
Avatar
Odpovídá na David Čápka
FastNode:

Skvělé, děkuji. S tím kódem si ještě nějak pohraju, dneska to bylo narychlo (ráno v 1:00 -> poté v autě -> metru -> autobuse a u večeře už jsem finišoval :D).

 
Nahoru Odpovědět 13.10.2013 19:28
Avatar
Odpovídá na David Čápka
Michal Žůrek (misaz):

Tak já už jednu fyzickou placku na PHP mám a nenapadá mě žádná, která by se k tomu hodila a ještě ji nemám. Fyzickou placku mi ted posílat nemusíte, staří mi když mi ji napíšete do profilu.

Jinak já jsem na svém webu taky script implementoval.

Nahoru Odpovědět  +1 13.10.2013 19:45
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Čápka
Tým ITnetwork
Avatar
Nahoru Odpovědět 13.10.2013 19:49
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 26 zpráv z 26.