Mapy źródeł – CSS & JS source maps

Może spotkałeś(-aś) się z plikami .map, na przykład używając bibliotek JavaScript’owych. Ten post tłumaczy, do czego one służą i dlaczego warto ich używać.

Temat: Tworzenie stron internetowych
Dział: Front-end
Poziom: Średniozaawansowany

Krótkie wprowadzenie

Kod w przeglądarce po stronie klienta nie musi być czytelny. Poniższe przykłady są równoznaczne.

p.lead,
header.lead,
header .lead {
  text-align: center;
  font-size: 2rem;
}

#navigation {
  padding: 0 20px 1em 20px;
}

header .lead,header.lead,p.lead{text-align:center;font-size:2rem}#navigation{padding:0 20px 1em}
var typeFilter = function (type, array) {
  var test = function (value) {
    return (value.length)
        ? (value[0].toLowerCase() === type.toLowerCase())
        : false;
  };
  return $filter('filter')(array, test);
};
var f=function(e,r){var t=function(r){return r.length?r[0].toLowerCase()===e.toLowerCase():!1};return $filter("filter")(r,t)};

 

Istnieje wiele sposobów na skompresowanie swojego kodu, ale o praktycznych aspektach za chwilę. Minifikacja* (usuwanie zbędnych znaków) jest bardzo pożyteczną praktyką ze względu na wielkość pliku. Niestety komplikuje to debugowanie.

Debugowanie nieczytelnego kodu CSS

Tutaj zaczyna się magia: DevTool w przeglądarce jest w stanie odtwożyć z której linijki jakiego pliku źródłowego dany fragment pochodzi, jeśli dostarczymy mu mapę. Oznacza to, że możesz mieć wgląd w źródła nawet kiedy strona wczytuje „zmielony” i nieczytelny kod.

* Kalka z angielskiego (minification). Tak brzmi hasło w Wikipedii. Dlatego nie lubię pisać na techniczne tematy po polsku.

Praktyka

Jeśli już korzystasz z jakiegokolwiek narzędzia wymagającego używania konsoli (gulp, Grunt, npm scripts) na pewno poradzisz sobie ze znalezieniem opcji umożliwiających wygenerowanie mapy. W przypadku różnego rodzaju dodatków do edytora/IDE może być różnie. Ja zwykle używam gulp’a, albo wtyczki do edytora Brackets. Opisywanie każdego narzędzia nie ma sensu. Zamiast tego proponuję prosty i darmowy program, z którym każdy powinien sobie poradzić.

Aplikacja Koala

Koala. Ustawienia z prawej umożliwiają wygenerowanie mapy.

Jak to działa?

Mapę do kodu można dołączyć na dwa sposoby:

  1. Za pomocą komentarza na końcu pliku:
    /*# sourceMappingURL=style.css.map */
    //# sourceMappingURL=/katalog/functions.js.map
  2. Poprzez nagłówek HTTP X-SourceMap:
    X-SourceMap: /inny_katalog/script.js.map

Szczerze powiedziawszy, nie spotkałem się jeszcze z zastosowaniem tej drugiej opcji.

Składnia pliku to dość czytelny na pierwszy rzut oka JSON. Przykładowo:

{
  "version": 3,
  "file": "style.css",
  "sources": [
    "style.scss"
  ],
  "mappings": ";AAAA,AAAA,IAAI,CAAC;EACH,…",
  "names": []
}

Najciekawszą częścią jest oczywiście mappings. Dane tam zapisane można przetłumaczyć jako:

wiersz: kolumna->w_źródła:k_źródła, kolumna->w_źródła:k_źródła

Dobrym sposobem na zrozumienie o co chodzi jest zobaczenie wizualizacji.

Algorytm to VLQ zakodowany w Base64. Ciekawostka: format ten został po raz pierwszy zdefiniowany do kodowania muzyki w formacie MIDI.

Techniczne szczegóły

Jeśli dalej Ci mało, to prawdopodobnie masz za dużo wolnego czasu. Odsyłam do oryginalnej dokumentacji. Poza tym polecam poradnik Introduction to JavaScript Source Maps i post How do source maps work?, dzięki którym ogarnąłem ten temat.


Dokumentacja offline

Masz laptopa? Ja tak. Zdarza mi się też podróżować, lub ogólnie jechać gdzieś jako pasażer przez ponad godzinę. Pisząc ten post jestem w autobusie do mojej rodzinnej miejscowości. Czas w podróży warto spożytkować na coś produktywnego, na przykład na programowanie, lub ewentualnie sen. Zakładając, że wybieramy programowanie i mamy ograniczony dostęp do internetu, bardzo przydatna może okazać się kopia dokumentacji. Oto gdzie można zdobyć dokumentacje dostępne offline:

DevDocs

Strona internetowa umożliwiająca szybkie i wygodne przeszukiwanie dokumentacji języków programowania, frameworków itd. Tego rozwiązania używam na co dzień. Zdecydowaną wadą jest to, że jeśli wyczyścimy pamięć przeglądarki, przepadnie też dokumentacja offline.

Zeal

Odpowiednik Dash (z OS X) dla systemów Windows i Linux. Świetna opcja, jeśli potrzebujesz czegoś konkretnego i pewnego, zainstalowanego na dysku. Ogromną zaletą jest posiadanie dokumentacji do WordPressa i Javy. Sam trochę przesadziłem z ilością wybranych pakietów (prawie 30) i zajmują one aktualnie ponad 3,5GB. Wpisując tekst w wyszukiwarkę warto poprzedzić interesującą nas komendę nazwą języka i dwukropkiem.


Frameworki CSS i Material Design Lite

Od jakiegoś czasu dostaję pytania w sprawie „frejmłorków”. W sieci można znaleźć mnóstwo blogów na ten temat. Pisanie własnego eseju, albo porównanie funkcji wydaje mi się bezcelowe. W tej chwili pewno straciłem połowę publiczności, więc nie chcąc stracić reszty zacznę od podsumowania współczesnych (jak na początek 2016) rozwiązań:

  • Dla początkujących polecam Bootstrap 3. Jest łatwy do opanowania, między innymi dzięki ogromnej popularności i wynikającemu z niej wsparciu społeczności.
  • Aktualnie najnowocześniejszym rozwiązaniem jest Foundation 6, którego zaletami jest świetne działanie na urządzeniach mobilnych i poręczny kod SCSS.
  • W wielu przypadkach okaże się, że nie potrzebujesz bardzo zaawansowanych narzędzi. Istnieje mnóstwo małych i praktycznych frameworków, wśród których popularnością wyróżnia się Skeleton.

Co to jest „framework”?

Z angielskiego chodzi tu o strukturę, „ramę”, od której zaczyna się pracę. Framework CSS powinien zawierać:

  • Reset (normalizację) stylów przeglądarki
  • Układ (layout) ułatwiający pozycjonowanie treści (grid system)
  • Ujednolicenie podstawowych elementów (typografii, formularzy itp.)

W poprzedniej sekcji specjalnie nie nazwałem Bootstrapa ani Foundation frameworkami CSS. Dlaczego? Bo nimi nie są! Można to porównać do nazywania Drupala albo WordPressa frameworkiem PHP. Bardziej adekwatną nazwą jest front-end framework, jako że front-end (fasada – wszystko co serwis wyświetla użytkownikowi) dotyczy także skryptów i struktury strony. Słyszałem też bardzo adekwatną nazwę „UI Toolkit” (zestaw narzędzi dla interfejsu użytkownika).

Google Material Design

Ciągnąc wyjaśnienia dalej, Material Design nie jest ani frameworkiem CSS, ani frameworkiem front-endowym. Czym w takim razie jest? To ciekawy zestaw zasad projektowania, dostępny pod adresem www.google.com/design/spec/material-design/. Cała specyfikacja jest zaskakująco uniwersalna i intuicyjna.

Material Design Lite

Material Design Lite – wybór kolorkówOficjalna implementacja Material Design dostępna jest na getmdl.io. Najbardziej precyzyjny opis z jakim się spotkałem, to „a library of components & templates” – biblioteka komponentów i szablonów. Terminologia bywa myląca, ale nie przejmuj się – Antyweb nazwał MDL uniwersalnym frameworkiem dla webmasterów xD.

W przypadku Bootstrapa i Foundation największą zaletą jest modułowość. Znając podstawy preprocesora SASS można łatwo wybrać potrzebne elementy (na przykład framework CSS) i dostosować wygląd. Material Design Lite nie jest pod tym względem zbyt praktyczny. Nie polecam tworzenia i ręcznego kompilowania własnej wersji. Próbowałem. Realistycznie mamy jedynie możliwość dobrania dwóch głównych kolorów. Większa ingerencja wiąże się raczej z nadpisywaniem kodu CSS, czego nie polecam. Zastanawiałem się nad użyciem MDL do mojego kolejnego projektu, ale się rozmyśliłem. Może innym razem.

Alternatywy

Na szczęście istnieje wiele innych wersji, poza tą oficjalną. Wszystkim, którzy czekali na „Bootstrapa od Google” pewno spodoba się Materialize. Poza tym znalazłem motywy/nakładki na wcześniej wspominane popularne frameworki front-endowe, jednak przed ich użyciem stanowczo polecam przeglądnięcie oryginalnych wytycznych.

Podsumowanie

wybór narzędzia


ChomikBox – pobieranie z Chrome

Nielimitowana pojemność i nie naliczanie transferu za własne pliki to według mnie największe zalety Chomikuj.pl. Nie polecam przechowywania tam ważnych plików, zwłaszcza na dłuższy czas. W przyszłości serwis może w końcu zostać zamknięty z powodu piractwa. Póki co świetnie nadaje się do przechowywania kopii zapasowej dla dużych, niezbyt ważnych plików, ewentualnie przesyłania czegoś między własnymi komputerami. Obsługa konta tego przez przeglądarkę jest niewygodna, dlatego ChomikBox to bardzo przydatny program.

Problem

Używając systemu Windows 8.1 (64bit, wersja Pro) w przeglądarce Google Chrome natrafiłem na problem z otwieraniem linków do pobierania. Aktualnie najnowsza wersja przeglądarki Mozilla Firefox radzi sobie bezproblemowo. Zatem dlaczego ChomikBox nie przechwytuje linków z Chrome i nie pobiera plików? Winny jest niepoprawny wpis w systemowym rejestrze. Znalazłem rozwiązanie, dzięki któremu nie trzeba zmieniać przeglądarki, by wygodnie pobierać pliki.

Rozwiązanie

Wadliwy wpis można znaleść otwierając edytor rejestru (Start → Uruchom → regedit) i nawigując do HKEY_CLASSES_ROOT\chomik\shell\open\command. Wartość dla instalacji z domyślnymi parametrami, to: "C:\Program Files (x86)\ChomikBox\\ChomikBox.exe" "%1". Należy poprawić ścieżkę dostępu. W moim wypadku wystarczyło zmienić podwójny backslash na pojedynczy.

Pomogło? Problem jest nieaktualny i został załatany przez Chomikuj lub Google? Daj znać w komentarzu.

Dla leniwych

Pobierz i uruchom plik rejestracji wpisu.

ChomikBox.fix.reg

Uwaga! Rozwiązanie dla leniwych zadziała tylko jeśli program zainstalowany jest w domyślnej lokalizacji na systemie 64 bitowym.