Tester kodu WWW#

W czasie nauki programowania istotna jest nie tylko prezentacja gotowego kodu, ale i możliwości jego szybkiego uruchomienia z możliwością drobnych modyfikacji. Aby ułatwić to zadanie sobie i innym postanowiłem utworzyć proste narzędzie działające wprost w przeglądarce internetowej. Wystarczy w lewym boksie wprowadzić podstawowe polecenia (X)HTML, CSS, JavaScript a w drugim podziwiać efekty działania. Testowanie kodu jeszcze nigdy nie było tak proste i przyjemne.

Oczywiście celem tego projektu nie jest zastąpienie wyspecjalizowanych narzędzi do tworzenia i debugowania kodu webowego, jak chociażby wbudowanych w przeglądarki narzędzi deweloperskich, Firebuga czy JSFiddlera (i jego odpowiedników). Motywowałem się raczej chęcią utworzenia własnego środowiska do testowania umieszczonych na stronie przykładów, działającego w sposób jednolity (niezależnie od stosowanej przeglądarki) czy też stanu połączenia internetowego. Mając całkowitą kontrolę nad narzędziem mogę w każdej chwili wprowadzić jakieś ciekawe usprawnienia, na czym szczególnie mi zależało.

Na dzień dzisiejszy tester występuje w dwóch odmianach:

Wszystkie przykłady umieszczone na stronie pozwalają na bezpośrednie uruchomienie w wybranym testerze (wystarczy skorzystać z interaktywnych przycisków).

Uwaga na skrótu klawiszowe#

Już na samym początku pragnę nadmienić, że wszelkie skróty klawiszowe ustawione dla testera mogą nie działać prawidłowo. Wynika to głównie z używanego po stronie użytkownika środowiska, które bez problemu może takie skróty przesłonić. Winowajcy należy upatrywać w samym systemie operacyjnym, przeglądarce internetowej czy każdym innym programie lub nawet w jego pluginie! Próbowałem ustawić jakieś sensowne kombinacje, które nie powinny sprawić większych problemów (szczególnie w systemach z rodziny Windows).

Wersja v2#

Najnowszy wariant tworzony z myślą o aktualnych przeglądarkach. Tym razem postanowiłem sięgnąć po gotowy i znany CodeMirror, czyli edytor tekstu zaimplementowany w czystym JS, z którego korzystają same przeglądarki internetowe (np. Firefox czy Chrome). Opcji jest multum, najważniejsze to po prostu kolorowanie składni (dostępne wiele motywów), numeracja wierszy, standardowe operacje tekstowe znane z klasycznych edytorów tekstowych, no i oczywiście obsługa rozszerzeń. Poniżej zamieszczam zrzut z przykładowym kodem (strona lewa) i wynikiem jego uruchomienia (strona prawa):

Tester kodu WWW v2 - mieszanka kodu HTML, CSS i JS

Rysunek. Tester kodu WWW v2 - mieszanka kodu HTML, CSS i JS

W ramach poszerzenia funkcjonalności postanowiłem zintegrować następujące dodatki:

Tester wyposażyłem także w kilka użytecznych przycisków:

Przypominam tylko, że CodeMirror sam w sobie zawiera wiele przydatnych poleceń. Części z nich przypisano skróty klawiszowe. Warto pamiętać o tych najważniejszych:

Druga wersja testera to w zasadzie rozeznanie w możliwościach oferowanych przez CodeMirror. W niedalekiej przyszłości mam zamiar przebudować cały layout, wprowadzić selekty z adresami dla najpopularniejszych bibliotek oraz udostępnić jakąś formę konfiguracji (przynajmniej w podstawowym zakresie).

Wersja v1#

Jest to pierwsza wersja testera opracowana jeszcze w czasach IE6. Pozostawiłem ją głównie ze względu na możliwość przetestowania przykładów w wyjątkowo starych przeglądarkach, dla których większość opcji z drugiej wersji testera nie będzie działać prawidłowo (jeśli nie wszystkie).

Tester kodu WWW v1 - widok ogólny

Rysunek. Tester kodu WWW v1 - widok ogólny

Nie ma kolorowania i podpowiadania składni, a jedyne usprawnienie to w zasadzie wszczepienie Zen Codinga, kilka dodatkowych przycisków (tj. uruchomienie kodu, wstawienie znacznika skryptu, odświeżenie i wyczyszczenie pamiętanych danych) oraz usprawnienia przy formatowaniu kodu (np. wciśnięcie Entera powoduje przejście do kolejnej linii z zachowaniem znaków tabulacji linii poprzedniej czy przechwycenie zachowania dla wciśnięcia klawiszy Tab oraz Shift+Tab).

Tester kodu WWW v1 - integracja z Zen Coding

Rysunek. Tester kodu WWW v1 - integracja z Zen Coding

Wersja ta nie jest już rozwijana i najprawdopodobniej zostanie całkowicie usunięta przy okazji kolejnej przebudowy serwisu.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Tester kodu WWW (H1) Uwaga na skrótu klawiszowe (H2) Wersja v2 (H2) Wersja v1 (H2)