Živá úprava CSS vlastností pomocí JavaScriptu

Hezký večer přeji,

býval jsem kóder a často jsem měl problémy s odhadem při převádění návrhů z PSD/PNG do HTML a CSS. Leccos se dá změřit, ale ne vždy je to aplikovatelné. Případně pokud člověk dělá něco bez předlohy, pracuje dle citu. Nebavilo mě neustále ukládat a načítat to v prohlížeči, ani živý náhled v rámci editoru nepomáhal.

Proto mě napadlo, že bych napsal takový malý JavaScriptový nástroj. Je to jeden soubor, který (spolu s jQuery) načtete, označíte pár vlastností v CSS souboru a on vám vygeneruje hejblátka, díky kterým si pak můžete zkoušet, jak by web vypadal při požadovaných změnách.

Máte tady dva příklady, jak funguje první fungující spatlaná verze. Funguje to dobře ve WebKitových prohlížečích, Firefox bohužel nepodporuje input type="range", takže to není tak pohodlné. Internet Explorer po ruce bohužel nemám, takže nemohu sloužit v tomto ohledu.

http://ondrejk.github.com/jManipulate/example/first.html
http://ondrejk.github.com/jManipulate/example/grid.html

Pokud by se vám to líbilo, připadalo vám to užitečné, ocením nějaký feedback. Nejde mi teď o kvalitu kódu, ta je, moc dobře to vím, na docela nízké úrovni. Jde mi tu o ten princip, kdy i nekóder (klient, projektový manažer) může ovlivnit vzhled stránky a okomentovat výsledek. Jelikož je to celé v JavaScriptu, není tam možnost výsledek zpět uložit do CSS souboru, na to by bylo třeba napsat nějaký pomocný back-end.

Nemá to být žádný WYSIWYG, to často nevede k hezkému cíli. Zde člověk jen mění to, co kóder určí.

Pokud byste to zkoušeli i u sebe na lokálu, přečtěte si README, z důvodu bezpečnosti to nemusí fungovat.

Hezký zbytek dne přeji,

Ondřej

Darker:

To jistě, to jsou výborné ladící nástroje (Dragonfly jsem nezkoušel, Firebug mám rád), já jsem to psal s trochu jinou filosofií. Ani ten panel existujících vlastností jsem nechtěl.

Ve Firebugu totiž musíte 1) najít ten element (ať už v kódu nebo na stránce), 2) měnit v textu CSS vlastnosti (nikoliv sliderem či multiple choice radiem). Navíc to děláte až po dopsání kódu. A těch vlastností může být hromada.

Mně zde jde o to, že když píšete CSS kód, řeknete si "Ha, u této vlastnosti si nejsem jist, mohlo by to být ještě takto" a pak po dopsání kódu si můžete jednotlivé záseky projít.

Je to o přístupu. Firebug a ostatní debuggery uznávám, ale mně zde šlo o jinou věc.

Darker:
Ale naopak, jen cpi, já jsem rád za připomínky od zkušenějších.

Dokonce ani ty 2 minuty to člověka nebaví :-) Je to holt rychlá ukázka funkčnosti, jak to kdo použije, to je na něm. Vycházel jsem z vlastních potřeb, které mi jiné nástroje neuspokojily (či jen částečně), proto jsem to zveřejnil. Ale tak každý jsme jiný.

Příklad: když člověk pozicuje nějaký prvek s komplexním pozadím tak, aby to doléhalo na jiné pozadí/obrázek. Ano, může to dopočítat (pokud to jde), může to zkoušet (ať už přes editor nebo přes debugger v prohlížeči), nebo může plynule měnit pozici daného elementu přes slider.

Nebo kdo zažil telefonát od klienta a nutnost měnit kód na základě chaotických instrukcí, by mu nejraději dal do ruky nějaký blbuvzdorný nástroj. Firebug asi ne :-)

Ale přesvědčovat vás nebudu. Pokud budu jediný uživatel, tak mi to vadit nebude, já pro to využití najdu.

Darker:
Taková "inteligence" byla původní myšlenkou, pro přílišnou rozsáhlost CSS jsem to nakonec opustil, ale nebylo by to asi tak náročné. Načítání CSS by v tom případě nemuselo jít přes jQuery, protože se CSS vlastnosti dají velice příjemně procházet přes DOM. Já to vysekávám přes regexpy kvůli tomu, že používám komentáře, které v DOMu nenajdu.

Chamurappi:
Jednoduché je to schválně :-) To neříkám výmluvně, ale nikdy jsem si to složitější ani nepředstavoval. Plní to svůj úkol.

Rozpor v tom nemám, protože předpokládám, že s tím operuje kóder, který výsledek předává právě tomu méně znalému, případně to použije pro vlastní potřebu. A pomocí Firebugu toho neznalý člověk příliš nenadělá z několika důvodů: 1) ten element vůbec najít nemusí (ne vše je viditelné, různá zanořování, ...), 2) nemusí vědět, kterou z vlastností má upravit, 3) nemusí vědět, na co to má změnit.



Mám rád, když se bavím se znalejšími a kriticky nahlížejícími. Nějak jsem si na VŠ zvyknul na to, že nikdo nedebatuje a jen přejímá názory ostatních. Je hezké zažít změnu. Díky.



Kdo pozná, u jakého softwaru jsem se inspiroval s tou filosofií, získá naprosto bezvýznamný bod :-) Většina z vás ho asi nikdy nepoužila, ale někteří studenti by jej mohli znát ze školy či výzkumu.