ugrás a tartalomhoz

CSS reloaded

Bártházi András · 2012. Feb. 28. (K), 11.13

A sitebuilder élete nem csak játék és mese, az egyik legjobban kikopott gomb a billentyűzetén valószínűleg az F5 (vagy ízlés szerint Ctrl-R, ⌘-R). Pedig nem kell így lennie, a folyamatos CSS változtatások gyorsabb megtekintésére több lehetőség is van.

Alapból ha szerkesztjük a CSS fájlokat, akkor a böngészőben újra kell töltenünk az oldalt, hogy láthassuk változtatásaink eredményeit. Apróságokat jellemzően ki lehet próbálni a böngésző fejlesztői eszközeivel (példéul a Chrome-os beépítettre, vagy a Firefox Firebugjára gondolok), de a kedvenc editorunkban szerkesztés azért jellemzően kényelmesebb. Ebben a bejegyzésben négy eszközről is szó lesz:

  • CSS reloader: kiterjesztés Firefox-hoz
  • Vogue: node.js-es újratöltős megoldás
  • LiveJS: AJAX-szal változások figyelése, újratöltés
  • Backfire: a böngésző fejlesztői eszközeiben végzett változtatások szerverre mentése

CSS reloader

A CSS reloader egyszerű feladatra vállalkozik, és azt jól csinálja: az oldal újratöltése nélkül lehet az oldal CSS-eit betölteni. Windows alatt az F9 gombot is használhatjuk. Ez igazából nem tűnik egy hatalmas előrelépésnek az F5 gomb nyomkodásához képest, amit nyerhetünk vele, hogy akármilyen gyors is a fejlesztői környezetünk, az oldal előállításának idejét megspórolhatjuk. Hátránya ez: ablakváltásokat, gomb nyomkodásokat nem spórolunk.

Vogue

A Vogue egy Node.JS-ben írt mini szerver, melyet a saját gépen kell futtatni, és beinclude-olni a céloldalon. Figyeli a fájlok módosulását a fájlrendszeren, és ha módosul valamelyik, akkor beindít egy frissítést, az adott fájl befrissül a böngészőben (a beinclude-olt kódon keresztül).

Live.JS

A LiveJS egy szerver oldal nélküli megoldás, AJAX kéréseket indít folyamatosan a szerver felé HEAD kérésekkel, s ha azt látja, hogy változás volt, akkor újra tölti azokat. Ahhoz, hogy működésbe lépjen, nem kell csinálni sokat, csak beinclude-olni, sőt, bookmarklet is rendelkezésre áll, bármikor működésbe lehet állítani include-olás nélkül is.

Backfire

A Backfire egy igen érdekes módon működik: egy kis JavaScript könyvtár észleli a böngészőben végzett (Firebug, vagy hasonló eszköz által) módosításokat, elküldi azokat a szervernek, ami menteni tudja azokat. A szerver kód egy példa implementáció C#-ban, de más nyelven is implementálható. Vannak ismert hibái.

Összefoglalás

Mivel alapvetően most nem sitebuilderként dolgozom, ezért napi szinten egyik eszközt sem használom, de az egyik branchemben például bekötöttem a Live.JS-t (commit nélkül), és érdekes élmény. :) A Backfire-t nem próbáltam, de félnék a problémáitól, a másik két eszköz pedig jól működött, de annyira nem fogott meg. A problémára többféleképpen nehéz lenne választ adni, viszont a gyakorlott sitebuildereknek valószínűleg annyira ráállt már a kezük a megfelelő billentyűkombókra, hogy nehezen fog beépülni a napi gyakorlatukba bármelyik eszköz is.

 
1

Talán a legegyszerűbb

Hidvégi Gábor · 2012. Feb. 28. (K), 12.53
Talán a legegyszerűbb megoldás, ha a window onfocus eseményére teszünk egy újratöltést.
2

Interakció

Poetro · 2012. Feb. 28. (K), 13.07
És így hogy teszteled a felhasználói interakciókat. Például mikor valaki egy gombra kattint stb. Ezeknek lehet CSS következményei is, (lásd például :target) és természetesen jó lenne látni, ha van JS, akkor az épp mit csinál, és az hogyan néz ki. Az onfocus nem igazán hasznos ebben az esetben.
6

Nem igazán értem, amit írsz.

Hidvégi Gábor · 2012. Feb. 28. (K), 13.15
Nem igazán értem, amit írsz. A window onfocus eseménye akkor fut le, amikor aktív lesz az aktuális tab, például amikor visszaváltasz a szövegszerkesztőből a böngészőbe, és ilyenkor megspórolhatunk egy F5-öt.
3

CSSrefresh

cSuwwi · 2012. Feb. 28. (K), 13.10
Én egy Live.JS variánst használok: CSSrefresh-t, de az elve ugyanaz. HEAD kérések, ha változott letölti. Bookmarkletből jó, csak akkor nyomom be, ha css-t szerkesztek, fejlesztői gépen nem okoz gondot.
CSSrefresh
4

Vogue

Poetro · 2012. Feb. 28. (K), 13.11
Ha valakit érdekel, pár hónappal ezelőtt teljesen újraírtam a kliens oldali kódot, aminek azóta mindenki örülhet.
Egyébként a Vogue Socket.IO-t használ, ezáltal WebSocket, Flash XMLSocket, long polling stb. technikákon keresztül küld üzenetet a fájlok frissüléséről, ezáltal elég gyorsan reagál a kliens.

Másik dolog, hogy én mouse gesture-t használok az oldal újratöltésére.
5

Most az jutott eszembe, hogy

Karvaly84 · 2012. Feb. 28. (K), 13.13
Most az jutott eszembe, hogy egy ajax hivással le lehet kérni a css-t, és fejlécből kiolvasható a status, ez alapján elvileg egy sima replaceChild függvénnyel azonnal érvényre is juttatható a változás. De persze nem biztos, de ezt mingyá kiprobálom
7

Live.JS

Bártházi András · 2012. Feb. 28. (K), 13.28
Ez miben különbözik a Live.JS koncepciójától? :)
8

igaz semmiben, figyelmetlenül

Karvaly84 · 2012. Feb. 28. (K), 13.36
igaz semmiben, figyelmetlenül olvastam.
9

autohotkey

Baldric · 2012. Feb. 28. (K), 14.41
Én az autohotkey nevű alkalmazással rendeltem egy apró makrót az egyik egérgomb és a ctrl+s billentyűk együttes lenyomásához, a makró menti a fájlt, előtérbe hozza a böngészőt, és frissíti az oldalt.
11

Használhatatlanok

Blintux · 2012. Feb. 28. (K), 16.45
Én a jó öreg F5-özést használtam eddig, de úgy látom marad is az.
Az egyetlen megoldás ami szimpatikus volt, az a Live.JS, viszont pont Rockmeltben nem működik!
A többi is kiesik, mivel én FTP-n keresztül szerkesztek, nem a saját gépen.

Update!
Találtam egy Chrome kiegészítést, ami működik Rockmelt alatt is!
CSS Refresh
Ctrl+Alt+R, vagy CMD-ALT-R használatával frissíti a CSS-t.
10

Számomra fejlesztéshez alkalmatlan

Adam · 2012. Feb. 28. (K), 16.44
Mivel fejlesztéskor sok kis CSS file-t használok és deploy-kor build-elem őket egyetlen CSS file-lá, ezért számomra nem használható, marad a ⌘+R.

Kis projekteknél nagyon hasznos tud lenni, én a Live.JS-t használtam korábban.
14

A LiveReload állítólag kezel

tgr · 2012. Feb. 28. (K), 23.11
A LiveReload állítólag kezel build folyamatokat.
12

Jó jó, de hát így meg a

scidar · 2012. Feb. 28. (K), 18.10
Jó jó, de hát így meg a ctrl+s fog kikopni :)
13

Aki Chrome-ot használ, annak

Tóth Máté · 2012. Feb. 28. (K), 22.33
Aki Chrome-ot használ, annak ajánlom a Stylebot nevű kis plugint. Real-time lehet vele szerkesztgetni az oldal CSS-ét.

Hasznos ha ki akarunk próbálni valamit, vagy gyorsan akarjuk megnézni egy-egy elem több variációját (pl. szín, margók, stb...).
16

miert nem jo a beepitett

ciluu · 2012. Feb. 29. (Sze), 01.00
miert nem jo a beepitett developer toolbar? ott is tudsz on the fly css-t szerkeszteni.
15

Auto Reload

adikahorvath · 2012. Feb. 29. (Sze), 00.06