Perfection or Vanity

Przez ostatni tydzień firma, w której mam przyjemność pracować, przygotowywała betę narzędzia online do edycji zdjęć i obrazów. Podstawowa funkcjonalość to załadowanie obrazka z URL-a albo dysku, zmiana rozmiarów, przycinanie i obrót o 90°. Wszystko działające na Ajaxie, a jakość obrazka nie pogarsza się (dopóki nie zwiększymy go ponad oryginalne rozmiary).

Dostępna jest złożona historia - nieskończona ilość akcji może być ponowiona oraz cofnięta, a wszystko dzieje się prawie natychmiastowo. Oprócz przycisku Cofnij / Ponów można używać także okienka Historii, gdzie widoczne jest każde przekształcenie (działają skróty Ctrl + Z|Y). Po kliknięciu parę razy na obrót wszystkie akcje są zapisywane, ale wyświetlony zostaje tylko rezultat ostatniego przekształcenia.

A wraz z nim jeszcze prostszy i bardziej intuicyjny sposób na umieszczanie napisów na stronach WWW za pomocą dowolnie wybranej czcionki. Wszystko dzięki JavaScript i Flashowi. Jak to działa? Otóż przez JavaScript sprawdzana jest obecność pluginu - jeśli jest zainstalowany (i jest w odpowiedniej wersji) to żądane elementy (na przykład nagłówki) są podmieniane przez obiekt Flasha. Wyświetla on oryginalny tekst i skaluje go korzystając z odpowiednich reguł CSS. Tekst można zaznaczać (kopiować), zamieniać na link. Oczywiście dzięki podmianie przez JavaScript takie nagłówki są dostępne dla wyszukiwarek i czytników ekranu.

Problem z emami w CSS jest taki, że po piątym zagnieżdżonym elemencie traci się orientację jaką wartość to teraz trzeba wstawić (zwykle na podstawie makiety projektu). Można sobie pisać komentarze z pikselami na boczku, ale i tak jest to męczące.

Napisałem więc w JavaScript aplikację do zarządzania takim drzewkiem DOM - Em Calculator 1.0 - sama liczy odpowiednie wartości em oraz zaokrągla do którego miejsca po przecinku chcemy. Można także wpisywać nazwę gałęzi i to niekoniecznie trzeba element - jeśli chcesz ustawić grubość podkreślenia w emach to proszę bardzo, zapisz to sobie. ;)

Od dłuższego czasu korzystam z tych statystyk i sprawują się świetnie. Problemem było dla mnie ładowanie się zewnętrznego pliku .js, który potrafił zablokować stronę, jeśli serwer nie odpowiadał. Rozwiązaniem doraźnym było przemieścić kod z head na dół body. Nie uważałem tego za dobre wyjście.

Całe szczęście Rafał Lindemann wpadł na rozwiązanie, które chciałem zaprezentować większemu gronu - jest o wiele bardziej przemyślane. Całość dotyczy nie tylko sposobu wklejania kodu, ale też przechwytywania danych z dynamicznych URL-i. Wracając jednak - chodzi o to, że używamy funkcji, która doda odpowiedni element <script/> do bloku <head/> po załadowaniu się strony (czy innym zdarzeniu, zależy od Twojego kodu):

Głównym powodem dla którego trzymam i używam Firefoksa jest zdumiewająca łatwość w webdevelopowaniu. Gecko jest najdoskonalszym znanym mi silnikiem renderującym. Jeśli pamiętając o specyfikacjach robisz stronę „dla” Firefoksa, to możesz być pewien, że na innych przeglądarkach osiągniesz zadowalający efekt.

Dostałem dzisiaj od Aulego link do Kwality Testera. Nazwa może przesadzona, bo wiemy że wszelkiej maści walidatory i parsery są tylko głupimi algorytmami, mogącymi jedynie wskazać miejsca w których myślenie programu zostało zakłócone.

Jednakże ten zmyślny skrypt przeskanuje nam stronę i pokaże wszelkie nieścisłości, z jego punktu widzenia, źle wpływającego na jej jakość i dostępność.

U mnie pokazało, że mam podwójny ten sam link nazywany inaczej - chodzi o to, co kiedyś miało opis „Dodaj komentarz”. ;) Także zwróciło uwagę na brak <label/> przy polach formularza oraz linki bez słów - chodzi o moje przypisy dolne. A na koniec przyczepiło się do zbytecznej nowomowy, którą skrytykowało za brak atrybutów lang. :P

Ogólny wynik procentowy - 76%.