Ostatnimi dniami, poszukując w pracy pewnych informacji na temat jQuery, całkiem przypadkowo natrafiłem na świetne narzędzie (właściwie to aplikacje webową), jakim jest jsFiddle. jsFiddle, pozwala na szybkie testowanie stron WWW, wykorzystujących takie technologie jak:

• HTML
• CSS
• JavaScript

Przy okazji punktu związanego z naszym ulubionym językiem skryptowym warto wspomnieć, że jsFiddle wspiera wszystkie popularne frameworki (Dojo, Mootools, jQuery itd.), dzięki czemu całe narzędzie jeszcze bardziej zyskuje na znaczeniu.

Praca z jsFiddle

Praca z jsFiddle, jest łatwa, prosta i przyjemna. Po uruchomieniu aplikacji, pojawi się okienko widoczne na screenie 1.

Tworzenie kodu, powinniśmy rozpocząć od wyboru frameworka JavaScript (oczywiście istnieje opcja No-library, która pozwoli na tworzenie czystego JS). W zależności od wybranej biblioteki, pojawić mogą się różne opcje dodatkowe. Np. w przypadku jQuery jest to opcja włączenia dodatkowych modułów (UI, Mobile) itp.

W sekcji ustawień, możemy również wybrać moment ładowania skryptu (np. po załadowaniu dokumentu - onDomReady).

Oprócz tego, możemy jeszcze np. zarządzać zasobami dodatkowymi (zewnętrznymi plikami JavaScript/CSS). Opcji ukrytych w bocznym panelu jest oczywiście znacznie więcej, warto jednak samemu poeksperymentować by osiągnąć jak najbardziej satysfakcjonujące efekty.

Czas przejść jednak do meritum niniejszego wpisu.

Testowanie kodu

Jeśli zdefiniowaliśmy podstawowe ustawienia naszego środowiska testowego, to możemy rozpocząć pisanie kodu (oczywiście do ustawień można wrócić później).

Nasz testowy kod, wprowadzamy w trzech wyszczególnionych obszarach:

• HTML
• JavaScript
• CSS

Na pochwałę należy się autorom funkcjonalność kolorowania składni i automatyczne wcinanie pisanego przez nas kodu.

Bardzo miłym dodatkiem jest również JSLint (przycisk u góry), który umożliwia testowanie poprawności kodu. Jeśli w kodzie, znajdować będzie się błąd, to zostanie on wyświetlony mniej więcej tak jak na screenie 3.

Jeśli napisaliśmy już kod i jest on poprawny, to za pomocą przycisku Run, możemy go przetestować. Po kliknięciu na przycisk, rezultat działania skryptu, zostanie zaprezentowany w ramce Result.

Jeśli jesteśmy niezadowoleni z efektu, to z czystym sumieniem możemy eksperymentować dalej. W przeciwnym wypadku, możemy porzucić, bądź zapisać utworzony przez nas kod (przycisk Save).

Po zapisaniu kodu, strona zostanie przeładowana, a adres widoczny w pasku przeglądarki zostanie wzbogacony o identyfikator naszego snippetu. Dzięki temu, będziemy mogli podzielić się naszym kodem z innymi.

Przykładowo, kod widoczny na screenach, można znaleźć pod tym linkiem. Co ciekawe, raz zapisany kod, możemy zaktualizować, a jsFiddle zapamięta wszystkie nasze rewizje! W gruncie rzeczy, działa to jak bardzo uproszczony system kontroli wersji.

jsFiddle, mimo faktu, że znajduje się dopiero w fazie alpha, to już w tym momencie bardzo przypadł mi do gustu:) Szczerze polecam wszystkim, szczególnie webmasterom!

Data ostatniej modyfikacji: 28.11.2011, 18:36.