chevron-left chevron-right

[Webmastering] Koduj strony w stylu Zen

Dzisiejszy wpis będzie o tym jakich narzędzi można użyć, aby dobrze pisać kod stron internetowych i aplikacji internetowych. Zamierzam omówić kilka bardzo użytecznych narzędzi oraz sposoby ich wykorzystania. W pewnym stopniu, ukażę też mój codzienny warsztat pracy, dzięki któremu mogę pisać kod, którego nie muszę się wstydzić.

Twoje okno na ... kod

Pierwszą rzeczą, wręcz niezbędną, jest wybór odpowiedniego narzędzia do pisania kodu, nie ma znaczenia czy piszesz w CSS, JS, PHP czy w jakimkolwiek innym języku. Znaczenie ma narzędzie, którego głównym zadaniem jest danie poczucia pewności, jakości i elastyczności w pisaniu kodu.

Dla mnie takim narzędziem jest edytor Sublime Text 2. Dzięki niemu, nie muszę się martwić o brak jakiejkolwiek dla mnie ważnej funkcjonalności, np. kolorowanie składni czy też szybkie wyszukiwanie kawałków kodu w różnych plikach. Niewątpliwą zaletą tego edytora kodu jest jego otwartość na rozszerzenia tworzone przez społeczność fanów tego edytora. Dzięki nim, mamy dostęp do bibliotek kodu (code snippets) dla różnych bibliotek JavaScript (jQuery, Backbone) czy chociażby, tak bardzo popularnego, frameworka do prototypowania aplikacji jakim jest Twitter Bootstrap.

Sublime pozwala również na tworzenie własnych bibliotek kodu czy też rozszerzeń (interfejsu lub funkcjonalności). Takimi rozszerzeniami, które implementuję na każdym komputerze na którym pracuję są:

  1. Snippety do uzupełniania kodu

    Dwa, które muszą być u mnie zawsze to:

    Snippet ze strukturą dokumentu w HTML5
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

          <snippet>
        <content><![CDATA[
          <!DOCTYPE html>
          <html>
          <head>
            <meta charset="utf-8">
            <title>TEST</title>
            <meta name="viewport" content="width=device-width, maximum-scale=1.0">
            <meta name="author" content="Piotr Nalepa">
            <link rel="stylesheet" href=""/>
          </head>
          <body>
              <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
              <!--[if lt IE 9]>
                <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
              <![endif]-->
          </body>
          </html>
        ]]></content>
        <tabTrigger>html5</tabTrigger>
      </snippet>

    Taki snippet można uruchomić po wpisaniu w edytorze słowa html5 i wciśnięciu klawisza Tab.
    Snippety kodu można utworzyć poprzez kliknięcie w Tools->New Snippet w edytorze Sublime.

    Snippet JS Strict
    1
2
3
4
5
6
7
8
9

          <snippet>
        <content><![CDATA[
        (function () {
          'use strict';
        })();
        ]]></content>
        <tabTrigger>js-strict</tabTrigger>
        <scope>source.js</scope>
      </snippet>

    Ten kawałek kodu generuje szkielet funkcji samowywyłującej się wraz z implementacją JS Strict, czyli dyrektywy do walidacji kodu JS. Będzie on odpalany tylko i wyłącznie w plikach gdzie jest obsługiwany kod JavaScript (czyli pliki z rozszerzeniem *.js oraz między tagami script w HTML). Ten snippet odpalimy po wpisaniu js-strict i wciśnięciu klawisza Tab.

  2. Nieszablonowy układ paneli

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

          [{
        "id": "view",
        "children": [{
          "id": "layout",
          "children": [{
            "command": "set_layout",
            "caption" : "Mój układ paneli: 2 wiersze, dolny wiersz podzielony na dwa kolumny",
            "mnemonic": "C",
            "args": {
              "cols": [0.0, 0.5, 1.0],
              "rows": [0.0, 0.5, 1.0],
              "cells": [
                [0, 0, 2, 1],
                [0, 1, 1, 2],
                [1, 1, 2, 2]
              ]
            }
          }]
        }]
      }]
    Niestandardowy układ paneli w edytorze Sublime Text 2

    Powyższy kod utworzy niestandardowy layout edytora, który podzieli ekran na 3 części. Górna połowa ekranu, jest panelem o pełnej szerokości. Natomiast dolna połowa ekranu edytora Sublime jest podzielona na 2 mniejsze panele o identycznej szerokości. W ten sposób, mogę pracować nad głównym plikiem JS i pod ręką mieć podgląd na inne pliki do których się odwołuję.

    Tak napisany kod trzeba zapisać jako plik o rozszerzeniu [nazwa-pliku].sublime-menu w katalogu C:\Users\[nazwa-użytkownika]\AppData\Roaming\Sublime Text 2\Packages\User (tak wygląda ścieżka dla systemu Windows).
    Utworzony w ten sposób uklad paneli w edytorze możemy użyć za pomocą opcji wyboru układu paneli (Layouts).

  3. Niezbędne rozszerzenia dla pracy webdevelopera

    • Emmet - szybkie pisanie kodu HTML i CSS,
    • SublimeCodeIntel - autouzupełnianie kodu i nie tylko,
    • SublimeLinter - walidacja kodu JS

  4. Ulubione schematy kolorów kolorowania składni

    Zdecydowanym faworytem jest zestaw wyglądów od Dayle Rees, a w nim - Laravel. Jak dla mnie, mieszanka ciepłych kolorów wraz z ciemnoszarym tłem, to idealna kompozycja kolorów, która nie męczy wzroku podczas dłuższej pracy przy monitorze.

    Sublime Dayle Rees Laravel

Kreuj wygląd strony w stylu Zen

Tak jak wcześniej wspomniałem, do szybkiego pisania kodu HTML i CSS używam Emmeta. Jest to następca popularnego rozszerzenia o nazwie Zen Coding.
Jego zadaniem jest usprawnienie pisania kodu HTML i CSS poprzez pisanie jak najmniejszej ilości tekstu, która zostanie następnie przekonwertowana na pełnoprawny HTML czy też CSS. Temat związany z wykorzystaniem tego rozszerzenia jest na tyle duży, że można bez problemu napisać osobny wpis dotyczący jego możliwości wykorzystania.
Jako przedsmak, warto się zapoznać z tym przeglądem funkcjonalności.

Debugguj w stylu Ninja

Pisanie kodu JS już nie jest takie samo jak kilka lat temu, kiedy zbytnio nie dbano o konwencje i traktowano JavaScript jako język skryptowy do pisania tylko i wyłącznie badziewnych efektów na stronach internetowych. Dzisiaj, możliwości języka JavaScript są coraz bardziej rozszerzane. Można się już spotkać nie tylko z JavaScriptem wykonywanym tylko i wyłącznie w oknie przeglądarki internetowej. JavaScript pojawia się również jako pełnoprawny język backendowy, ktory odpowiada za pracę zasobów serwera w sposób asynchroniczny, tak jak to może mieć miejsce w bibliotece Node.js.
Ponadto, w JavaScripcie powstały i nadal powstają potężne frameworki do budowania aplikacji internetowych.

Za każdym razem, gdy piszemy kod JS, nie ważne czy po stronie przeglądarki czy też po stronie serwera, warto dbać o zachowanie jednolitego standardu kodu, co zapewnia wyższą jakość aplikacji, łatwiejsze zarządzanie jej kodem, a także pomaga w wystrzeganiu się błędów wynikających z różnic działania kodu JS w zależności od silnika przeglądarki.
W codziennej pracy bardzo pomocnymi narzędziami są rozszerzenie SublimeLinter - pomaga zachować jednolitą strukturę kodu, walidując go według ustalonych reguł, oraz wszelkiego rodzaju konsole JavaScript dostarczane wraz z przeglądarkami, np. Firebug czy też Chrome Developer Tools.

Dzięki tym dwóm ostatnim, jestem w stanie debuggować kod i sprawdzić jak zmieniają się wartości zmiennych na poszczególnych etapach realizacji kodu JS przez przeglądarkę. W tym celu warto korzystać z wywoływacza debugger;, który możemy wstawiać bezpośrednio w kodzie JS i przeglądarka automatycznie spauzuje wykonywanie kodu w momencie, gdy dojdzie do miejsca gdzie wywoływacz został wpisany w kodzie. Bardzo to pomaga zrozumieć, to co się dzieje w trakcie działania programu.

W przypadku tworzenia aplikacji czy stron dla środowisk zamkniętych, np. dla aplikacji w nowoczesnych telewizorach, zamiennikiem przeglądarkowego Firebuga jest Firebug Lite, ktory możemy dołączyć bezpośednio do kodu strony. W ten sposób, mamy możliwość debuggowania (ograniczonego, ale zawsze to niż nic) aplikacji w starszych przeglądarkach i zamkniętych środowiskach uruchomieniowych.

Podsumowanie

Pokrótce przedstawiłem swoje środowisko pracy na co dzień. Dodam tylko, że wspomniane wcześniej rozszerzenia, np. Emmet, można zainstalować bezpośrednio z poziomu edytora Sublime Text 2 po zainstalowaniu menedżera kontroli pakietów. Po zainstalowaniu go dostaniesz dostęp do wymienionych rozszerzeń, a także wielu, wielu innych które na pewno w jakiś sposób będą ułatwiały pracę w zależności od potrzeb.

Pochwal się swoim miejscem pracy

środowisko pracy