Pandify - porady jak projektować strony internetowe, darmowe materiały, liczne inspiracje web design.

Roots Sage oczami frontendowca – usprawnienie codziennej pracy z kodem

Artykuł pojawił się 31.10.2016, autorem jest Agressiva i wpadł do kategorii Frontend WordPress

O Roots Sage usłyszeliśmy na WordCamp Polska Kraków w 2015 roku. Jadąc na tą konferencję zdawaliśmy sobie sprawę, że musimy nieco nadrobić i umilić sobie życie pewnymi zmianami w codziennym procesie pracy nad projektami.

Sage okazał się przełomowym dla nas narzędziem. Z początku nieco przerażało mnie, że poza pisaniem kodu w edytorze muszę jeszcze czuwać w konsoli i co jakiś czas wykonywać określone komendy. Do tamtej pory do kompilacji Sass stosowałam program Prepros, który w porównaniu do konsoli był przyjemny pod względem interface’u i użytkowania dla prostego człowieka. Przerażenie minęło w moment kiedy okazało się, że konsola wcale nie gryzie, widziane do tej pory przez ramię Maćka krzaczki okazały się zrozumiałe, a czas pracy skrócił się dzięki temu znacznie. Do tej pory też moja znajomość codexu opierała się na kilku podstawowych fragmentach kodu. Dzięki Sage – zupełnie nieświadomie zaczęłam lepiej rozumieć to czym zajmuje się na co dzień Maciek.

Pierwszy projekt na Sage był dla nas polem do eksperymentów.
To co zmieniło się najbardziej szczególnie w moim przypadku – kod html tworzę od razu w skórze WordPress. Od razu mam podział na header.php, footer.php, index.php, single.php, etc. Ominęliśmy dzięki temu etap, kiedy po zakończeniu przeze mnie pisania podstawowego kodu HTML/ Sass, Maciek musiał przenieść go do plików WordPressowych i podzielić na odpowiednie pliki. Od razu dostaje jak na talerzu odpowiednie fragmenty, w odpowiednich plikach. Nie musi dłużej zastanawiać się co i gdzie zamieścić.

Funkcje WP

Jakie funkcje są najbardziej przydatne podczas pisania kodu HTML/Sass/JS bezpośrednio w Roots Sage i samym WordPressie?

  • bloginfo( 'template_url' );
    Jest to funkcja, która podaje nam url skóry. Przydaje się gdy chcecie w kodzie odnieść się bezpośrednio do określonego pliku w skórze, np.:
    <?php bloginfo( 'template_url' ); ?>/dist/images/logo.svg
  • bloginfo( 'url' );
    Jest to funkcja, która podaje nam url tworzonej strony. Przydaje się gdy chcecie podlinkować logo w headerze do strony głównej.
    Znając adresy podstron możecie go także użyć jako ścieżki do nich:
    <?php bloginfo( 'url' ); ?>/about/
  • bloginfo( "description" ); i bloginfo( "name" );
    Te dwie funkcje pokażą nam nazwę strony oraz jej opis, który podamy w panelu administracyjnym, Ustawienia – Ogólne.

Inne przydatne funkcje z kategorii bloginfo znajdziecie na stronie dokumentacji WordPress.

  • get_template_part( 'templates/partname' );
    Ta funkcja bardzo fajnie sprawdza się kiedy chcemy rozdzielić nasz kod na osobne pliki, z indywidualną funkcjonalnością, aby kod był czysty i uporządkowany. Rozdzielenie jest też wygodne od razu dla programisty.
  • _e( 'Twoja fraza', 'sage' );
    To również jest bardzo prosta do zapamiętania funkcja, która w WordPressie pomaga przy późniejszym wprowadzaniu wersji językowych strony. Frazy zapisane w tej sposób są wyszukiwane przez program do tłumaczenia np. Poedit. W programie tym od razu mamy listę fraz do przetłumaczenia na wybrane języki, lista fraz jest także automatycznie aktualizowana kiedy wprowadzone są zmiany w motywie.
    W postaci tej funkcji zapisywane są rzeczy, które nie są edytowane bezpośrednio poprzez panel administracyjny. Są elementami stałymi motywu. Dzięki temu, że ja od razu zapiszę wybrane frazy w ten sposób – programista później nie musi wyławiać ich z setek linijek kodu.

Troszkę magii

Ponadto Sage za pośrednictwem Gulp świetnie kompiluje tworzone pliki scss oraz js. W przypadku jakiegokolwiek błędu od razu mamy o nim informację i możemy naprawić go szybciej.
Mamy do dyspozycji także optymalizację załączanych w skórze obrazków.

Za pomocą Bowera możemy instalować i zarządzać pluginami JS / Sass / HTML. Bardzo dobrze uporządkowuje to zewnętrzne dodatki, które instalujemy za pomocą bardzo prostego polecenia w konsoli, np.:
bower install plugin-name --save.
Jeżeli tylko pakiet jest poprawnie przez autora skonstruowany nie tylko mamy pobrany plugin, ale też od razu podłączony do naszej skóry – nie musimy się martwić, że jakiś plik umknie naszej uwadze i będziemy szukać błędu przez kawałek dnia. Z potencjalnymi błędami ze strony autorów spotkałam się jak dotąd tylko dwa razy. Nie pamiętam już nawet nazw tych dodatków, ale nie były one wybitnie potrzebne i szybko znalazłam dla nich zastępstwo.

Dzięki Roots Sage nasze projekty stały się stosunkowo jednolite w pozytywnym tego słowa znaczeniu, ponieważ nieważne kto i kiedy wprowadza zmiany do projektu – zawsze wie gdzie i czego szukać. Z dodatkowo dobrze przygotowaną wewnętrzną dokumentacją o lokalizacji i zawartości poszczególnych plików, można niemalże z zamkniętymi oczami przystąpić do dewelopowania.

Łącząc Sage z takimi udogodnieniami jak Git i zautomatyzowany deployment – znacznie ułatwiamy i umilamy sobie codzienną pracę – szczególnie w znaczeniu całego zespołu.

Polecam wypróbowanie Sage jako WordPress Starter Theme – szczególnie osobom takim jak ja – siedzącym w designie i HTMLu. Zobaczycie jak fajnie to narzędzie usprawni Waszą współpracę z programistami. Sage w wersji z Bootstrap możecie pobrać z oficjalnej strony Roots. Wersję opartą o framework Zurb Foundation znajdziecie na GitHubie.
Trwają prace nad  Sage 9, który zamiast Bowera będzie wykorzystywać Webpack. Czekamy na ukazanie się wersji stable, na pewno od razu przejdziemy do testów i powiadomimy Was o nowościach w tym temacie.

Agressiva

Od 10 lat pracuję w branży IT. Początkowo zajmowałam się tylko projektowaniem stron internetowych pod względem graficznym, ale bardzo szybko stałam się web designerem i web developerem w jednym. Poza pracą żyję też kolarstwem, street foodami i rysowaniem.

Bądź na bieżąco!

Jeżeli chcesz otrzymywać informacje o najnowszych wpisach na blogu Pandify.pl zapisz się do naszego newslettera za pomocą poniższego formularza. Obiecujemy nie wysyłać nic więcej.