Warsztat webmastera

Wraz z kolejnymi godzinami spędzonymi na tworzeniu najlepszych stron na świecie każdy z nas powiększa swój warsztat.

Poniżej chciałem wam przedstawić kilka rzeczy, które znajdują się w moim warsztacie.
Wpis nie będzie idealnie wszystkiego pokazywał, a raczej będzie omówieniem różnych rzeczy i technik. Jeżeli dana idea do was przemówi i będziecie chcieli dokładniej się o niej dowiedzieć, piszcie w komentarzach, albo pytajcie wujka wielkie G.

Edytor tekstu

Osobiście używam 2 narzędzi – SublimeText do szybkich wjazdów na pliki, oraz phpStorm jako mojego głównego edytora.

Z jednej strony każdorazowe otwieranie kombajnu jakim jest phpStorm do prostych, szybkich edycji mija się z celem. Do takich momentalnych manewrów idealnie nadaje się SublimeText (ale spokojnie mógłby to być Atom, Bracket, Visual Studio Code czy podobne, bo też są całkiem spoko).

Głównym narzędziem przy pracy z projektami jest u mnie jednak PhpStorm.
Uważam, że mimo swojej wspaniałości jego mniejsi bracia nie zapewniają tak dobrej kontroli nad kodem jak narzędzia (IDE) ze stajni JetBrains (phpStorm /WebStorm).
Widywałem jak początkujący adepci sztuki gubili się w pracy nad kodem nie z braku wiedzy, a właśnie przez to, że ich edytory nie do końca należycie formatowały pisany kod (np. gubiły wcięcia, co jest dobrym startem do popełniania błędów), a podpowiedzi nie były tak precyzyjne jak w phpStorm/webStorm. Tutaj mała uwaga – spora część takich błędów wynikała z tego, że domyślne wcięcia w wielkości 2 nie są tak dobrze czytelne jak wcięcia wielkości 4 spacji (które jestem fanem)…

Automatyczne formatowanie kodu (Ctrl + Alt + Shift + L) też lepiej działa w phpStorm/webStorm. No ale za takie bajery trzeba swoje zapłacić.
Żebyście źle mnie nie zrozumieli. Atomy, Brackety, Aptany itp. są świetnymi narzędziami. Warto jednak je przynajmniej nieco usprawnić przez najciekawsze rozszerzenia

W każdym z tych narzędzi mam poustawiane kilka rzeczy.

I tak dla SublimeText mam zainstalowany obowiązkowy Package Control, który służy do instalowania dodatków. W Atomie i innych instalacja przebiega trochę inaczej, ale idea jest podobna – instalujemy to co nam się może przydać. Część ustawień dla SublimeText opisywałem dawno temu w tym artykule. Gdy piszę te słowa mam zainstalowane:

  • less, scss – wiadomo (a jak nie wiadomo, to w planie mam kolejny tekst o tych rzeczach)
  • sidebar enhanced – bo boczne menu w sublime text ssie
  • wordpress – a czemu by nie,
  • emmet – by pisanie było przyjemniejsze i o wiele szybsze (dla niedowiarków ten art),
  • markdown highlight i markdown preview – bo pisanie README.md dla githuba ma sprawiać przyjemność

Dodatkowo dla SublimeText mam potworzone kilka snippetów – jak je stowrzyć także opisywałem tutaj (swoje snippety możesz przejżeć wchodząc w Preferences->Browse Packages… i sprawdzając katalog User).
I tak mam snippet dla tworzenia początkowej struktury dokumentu html (są dodatki, które generują początkowy kod, ale ja wolę swój własny). Wpisuję więc html, naciskam tab i dostaję całą strukturę początkowego html.

<!doctype html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta http-equiv="x-ua-compatible" content="ie=edge">        
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            $(function() {

            });
        </script>
    </body>
</html>

Mam snippet tworzący tytuły sekcji w css jako sformatowane komentarze. Wpisuję //, naciskam tab i dostaję:

/* ---------------------------------------- */
/* nagłówek strony */
/* ---------------------------------------- */
.page-hader {
    
}

by potem łatwiej mi się czytało css.

Mam snippet dający kończący komentarz w html – wpisuję w html /, naciskam tab i dostaję:

<div class="main-banner">
    <!-- super dużo kodu i znaczników -->
</div><!-- e: main-banner -->

by łatwiej dostrzegać do czego odnosi się zamykający znacznik.
Wreszcie mam zdefiniowane snippety służące do wstawiania grafik placeholderów – np. ten wstawia mi do kodu grafikę z serwisu placehold.it:

<img src="https://placehold.it/200x200" width="200" height="200" alt="Opis obrazka" />

To tylko kilka idei, które warto zawrzeć w swoim warsztacie.

W phpStorm mam podobnie. Po obejrzeniu całej serii filmów z https://laracasts.com/series/how-to-be-awesome-in-phpstorm poustawiałem sobie koniecznie swój własny wygląd, pozmieniałem klawisze (dla przykładu by tak samo jak w sublime text Ctrl + Shift + P wyszukiwał mi pliki w projekcie) oraz pozmieniałem kilka pomniejszych rzeczy jak zachowanie się samego kodu dla odpowiednich języków (wcięcia itp).

Doinstalowałem sobie też plugin https://plugins.jetbrains.com/plugin/7275-codeglance który daje mapkę kodu taką jak w SublimeText (ta po prawej stronie kodu), czy plugin Favourite Folder https://plugins.jetbrains.com/plugin/5940-favoritefolders, który przy wybieraniu katalogu dla projektu dodaje twój ulubiony folder (u mnie ten folder to htdocs z xampp).

Tak samo jak w SublimeText poustawiałem sobie snippety (starałem się by większość z nich była identyczna, by praca w obydwu narzędziach była podobna). W phpStorm snippety zwą się LiveTemplates.

Jako, że w PhpStorm spędzam znacznie więcej czasu, snippetów mam tutaj trochę więcej. Niektóre z nich dodają mi możliwość wstawiania obrazków ze wspomnianymi placeholderami takimi jak placehold.it, placekitten.com czy lorempixel.com (zamiennie, bo zdarzają się dni, kiedy te serwisy mogą się ślimaczyć), a inne służą do obejmowania kodu wstawkami php. Przykładowo robię listę 10 elementów na stronie. Zamiast powtarzać w html dany element 10 razy dla lepszej czytelności okrywam go po prostu snippetem „for” (Ctrl + Alt + J), który wstawia mi pętlę php, która w wyniku powtarza dany kawałek kodu 10 razy:

Co jeszcze? W terminalu phpStorm dodałem sobie Git by łatwiej się z tego korzystało.
https://stackoverflow.com/questions/21676150/setup-git-in-intellij-terminal (zwróć uwagę na cudzysłowy w ścieżce do git)

Całą konfigurację phpStorm wyeksportowałem do pliku (File->Export Settings), który trzymam w katalogu z rzeczami i dodatkami dla różnych programów znajdującym się w moim Dropboxie. Dzięki temu między komputerami mam podobne ustawienia. Podobnie zresztą robię z ustawieniami SublimeText i innych programów…

Git

Skoro wspomniałem o Gicie. PhpStorm w każdym projekcie tworzy ukryty katalog .idea, w którym zapisuje na bierząco ustawienia edytora dla danego projektu, pootwierane dla tego projektu okna, jak formatowany jest w tym projekcie kod itp. Nie chcę tego katalogu wrzucać do repozytorium (czemu? – bo jeżeli kilka osób z zespołu używało by innych edytorów czy dodatkowych programów, które tworzą swoje pliki, to w w wyniku mielibyśmy w projekcie śmietnik). Mógłbym do każdego projektu dodawać plik .gitignore, w którym bym „ukrywał” dla gita ten katalog (dobra rzecz by mieć pewność, że u innych ten śmietnik nie zostanie wrzucany do repo). Ale o wiele lepiej ustawić „globalny ignor” dla całego komputera.
https://stackoverflow.com/questions/7335420/global-git-ignore. Idąc instrukcją z tego wątku stworzylem sobie więc w katalogu %userprofile% (co przenosi mnie do katalogu c:/users/kartofelek – bo taki jest katalog mojego usera) plik .gitignore w którym dodałem linijki

.idea
.idea/*

a następnie zgodnie z instrukcją z tamtego wątku dodałem to do gita (odpowiednia linijka jest opisana w wątku – dla każdego systemu inna).
Od tej pory w każdym projekcie katalog .idea jest niewidoczny dla gita. Amen.

Ok. Katalog z .idea mam z głowy. Żeby jeszcze bardziej przyśpieszyć pracę z gitem i nie pisać każdorazowo git commit -m "...", git status, git diff nazwa_pliku itp stworzyłem sobie aliasy, dzięki czemu piszę git cm "...", git st, git df nazwa_pliku itp.

Jeżeli wykonasz wsępną konfigurację GIT na komputerze (https://git-scm.com/book/pl/v1/Pierwsze-kroki-Wst%C4%99pna-konfiguracja-Git), to w katalogu z userem ( %userprofile% ) stworzony zostanie plik .gitconfig z ustawieniami usera i emaila dla twojego konta git.

Wystarczy dodać do niego sekcję z aliasami (pod sekcją z User) np.
https://gist.github.com/johnpolacek/69604a1f6861129ef088

Moje są prostsze:

[alias]
    ls = log --pretty=format:"%C(yellow)%h%Cred%d\\ %Creset%s%Cblue\\ [%cn]" --decorate
    ll = log --pretty=format:"%C(yellow)%h%Cred%d\\ %Creset%s%Cblue\\ [%cn]" --decorate --numstat
    lnc = log --pretty=format:"%h\\ %s\\ [%cn]"
    lds = log --pretty=format:"%C(yellow)%h\\ %ad%Cred%d\\ %Creset%s%Cblue\\ [%cn]" --decorate --date=short
    ld = log --pretty=format:"%C(yellow)%h\\ %ad%Cred%d\\ %Creset%s%Cblue\\ [%cn]" --decorate --date=relative
    le = log --oneline --decorate
    st = status
    df = diff
    cm = "!f() { git commit -m \"$@\"; }; f"

najważniejsze tutaj są git cm "..." który robi commita z opisem, git st który pokazuje status plików, oraz git df nazwa_pliku (o tym za sekundę), który pokazuje zmiany od ostatniego commita.

Terminal

Domyślny terminal cmd w Windowsie ssie, a i Gitowy Bash w Windowsie też nie jest lepszy. Dlatego ja osobiście używam nakładki ComEmu.

Dla lepszej wygody dodałem do ComEmu Gita:
https://superuser.com/questions/454380/git-bash-here-in-conemu, dzięki czemu mogę go w ComEmu odpalać przez menu kontekstowe (gdy kliknę prawym guzikiem na katalog) lub w samym ComEmu przez ikonkę zielonego plusa.

Od tej chwili mam więc w menu kontekstowym i Git Bash (taki se) i Gita w ComEmu (o wiele fajniejszy).

Co dalej?
Przy robieniu commmitów tylko przy swoich prywatnych „leniwych” projektach używam git add .. Nie interesuje mnie tutaj jak wygląda drzewo commitów (bo leniwy ze mnie dziad), a tylko wrzucenie plików w repozytorium (…).

Przy bardziej normalnych projektach zazwyczaj zaczynam od git status, które pokazuje mi w konsoli listę zmienionych plików. Następnie wpisujęgit add (spacja na końcu) i tutaj 2x klikam w ComEmu na wypisane za pomocą git st czerwone pliki, a następnie prawym klawiszem myszki dodaję odpowiednie pliki do commita (i naciskam spacje by rozdzielić kolejno dodawane pliki). Dzięki temu commity są bardziej sprecyzowane i sensowne – np git zawiera zmiany w nagłówku strony, pliki css itp, a nie wszystko (a po co w ogóle trzymać taki „porządek” w commitach – to pytanie do was, a przynajmniej temat na osobny art…)

Tyle z gita.

Rzeczy graficzne

Jako ulubieniec „tańca z kodem” (swoją drogą może kiedyś stworzą taki program dla nerdów?)
uwielbiam mini programy, które mi tą pracę ułatwiają.

Jednym z takich ułatwień jest pobieranie koloru z pulpitu, czy pobieranie miar z pulpitu. Przetestowałem naście programów do tego celu. Większość z nich niby spełnia swoje zadanie, ale ogólnie nie były totalnie wygodne. Detaliki, detale. Całkiem dobrym jest Instant Eyedropper. Jest dobry, ale tylko gdy używasz jednego monitora, bo na drugim monitorze nie chciał łapać koloru. Przy pracy z dwoma monitorami w moim przypadku najlepiej sprawdził się FastStone Capture. Reszta programów albo nie działała na dodatkowym monitorze, albo nie ma możliwości zdefiniowania klawiszy skrótów itp. Detaliki, które w codziennej pracy przeszkadzały. FastStone ma to wszystko plus kilkanaście innych rzeczy jak łapanie kawałków ekranu (z dodatkowym pokazywaniem rozmiaru – co idealnie nadaje się do mierzenia elementów), jakieś lupki, linijki, nagrywanie fragmentu ekranu, robienie zrzutów długich stron itp. Ogólnie jest najwygodniejszy ze wszystkich, które przejżałem.

Wystarczy, że nacisnę ustawione klawisze, by od razu zmierzyć/złapać kawałek ekranu. To samo przy łapaniu koloru.

Jeżeli chodzi o programy graficzne. Próbowałem kilku alternatyw dla Photoshopa, niestety większość z nich jest „taka se”. Do rysowania najlepiej wypadła Krita (nawet w wielu miejscach lepiej niż PS), ale do cięcia layoutów pozostaje raczej Photoshop. Tutaj stworzyłem sobie akcje, które już kiedyś opisywałem. Poza domyślnym generatorem sprawdzają się po dzień dzisiejszy…
Nowa wersja PS ma już w sobie generator grida (Widok->Nowy układ linii pomocniczych…), więc nie potrzeba nic więcej instalować. Ale gdybym chciał, to pewnie dorzucił bym tutaj dodatek GuideGuide. Nic więcej tutaj nie używam. Ustawienia zarówno patternów, próbek kolorów, pędzli itp mam zapisane w Dropboxie.

…Próbowałem zamiast Photoshopa używać Affinity, ale tak sobie radzi z formatem .psd, nie czytając odpowiednio warstw tekstowych, co jest sporym minusem.

Drugim programem graficznym o którym warto wspomnieć jest Riot (wersji portable). Pisałem już wam o tym w artykule o Gulpie. Jako osoba graficzna, lubię optymalizować grafiki widząc rezultat, a nie tylko polegając na konsolowych automatach. Riot jest jednym z najlepszych programów tego typu. Ma też batcha, który umożliwia optymalizację wielu plików na raz. Innym rozwiązaniem dla optymalizacji jest XnView Convert, który też ma batcha i zbiorową konwersję (dla zbiorczych konwersji i modyfikacji plików jest jeszcze lepszy od Riota, bo nie tylko optymalizuje, ale dodaje różne modyfikacje, które sobie wybieramy). Co kto komu…

W zapasie do powyższego czasami używam też pngOptimizer, który służy do optymalizacji pngów. Wygodny, chociaż tylko do zbiorczych optymalizacji z zaufaniem :)

Coś jeszcze?
Jeżeli chciałbym zapisać kawałek ekranu do gifa, użył bym pewnie wspomnianego wcześniej FastStone Capture lub bardzo fajnego ScreenToGif.

Do generowania favikony często używam Green Fish Icon, ale w necie istnieją całe generatory paczek favikonek (np. ten), więc to raczej marginalny program.

Co następne? Do zarządzania fontami na komputerze używam NexusFont. Bardzo fajnie się on sprawuje gdy zainstaluję na komputerze wszystkie fonty od wujka Googla.

Zakładki, nauka

Jest dużo sposobów aby aktualizować swoją wiedzę (uczyć się, pić wódkę z innymi webludźmi itp). Niektórzy używają czytników RSS, inni specjalistycznych stron, które zbierają ciekawe linki (np. 1, 2, 3, 4).
Ja stosuję bardziej prymitywne, a i wygodne dla mnie metody. Jedna z nich to dodatek do przeglądarki, który na stronie startowej tworzy miniaturki ze stron, które chcę często odwiedzać. Dla Firefoxa i Chrome dodatek ten to FastDial. DLa Firefoxa działa on lepiej, ale w Chromie żyć też się da… Mam w nim ustawione naście stron, które muszę odwiedzać – http://smashingmagazine.com, http://tympanus.net/codrops/, http://tutorialzine.com grafmag.pl, https://medium.muz.li/ itp.

Dodatkowo na pasku zakładek w centralym miejscu (tak by rzucało się po oczach) mam katalog Narzędzia, w którym gromadzę najważniejsze narzędzia, które używam podczas codziennej pracy. Są to różne generatory css, jakieś testery, wzorce kolorów, snippety, loremy itp. Wszystko ładnie poukładane w foldery by móc potem szybko się w tym odnaleźć.

Możesz je pobrać tutaj (RMB i zapisz jako, bo to jest plik html). By je sobie dodać w Chrome odpalasz menadżera zakładek (Ctrl + Shift + O lub 3 krokpki w górnym prawym rogu i wybrać odpowiednią opcję), klikasz na Organizuj (na górze okna) i Importuj zakładki z pliku Html… Bez obaw – twoich zakładek to nie skasuje…

Dodatkowo w głównym pasku zakładek mam katalog „na dziś”. Trafiają tam zakładki, które powinienem jak najszybciej przejrzeć. Powinienem, bo folder ten non stop się powiększa i w wielu przypadkach strony te nigdy nie zostaną przeze mnie przeczytane (czasami dodaję kolejny folder – super na dziś itp). Czasami próbowałem najważniejsze linki wrzucać bezpośrednio w pasek zakładek co by mnie zmusiło do przejrzenia i sprzątnięcia tego zakładkowego bałaganu. Żadna z tych metod nie jest jednak w pełni skuteczna. Dyscyplina drogi milordzie…

Serwery bajery

Co jeszcze? Jako że pracuję w PHP i Nodzie, zainstalowałem sobie serwer Xampp oraz Node. Do tego drugiego globalnie zainstalowany mam Gulp i BrowserSync (ten drugi często używam odpalając go nie tylko za pomocą gulpa, ale i ręcznie z konsoli – jak to jest pokazane w tym artykule) oraz rimraf – by w Windowsie bez problemów usuwać katalogi node_modules, z którym są czasami problemy przez zbyt długie ścieżki…
Sam folder z projektami i bazami mysql mam na oddzielnym dysku. Zmianę katalogu z projektami robi się w pliku xampp\apache\conf\httpd.conf. Katalog z bazami możesz zmienić w pliku xampp\mysql\bin\my.ini. Można też zastosować mklink by zrobić wirtualne sprzężenie katalogów mklink. Dzięki temu jeżeli któregoś dnia będę musiał przeinstalować system, bez wahania zastosuję sczepionkę formatC.

Skróty w menu start

Dla poprawiania wygody stworzyłem sobie odpowiednie skróty w Menu Start, na pulpicie i w szybkim dostępie.

Skrót „vhost host” otwiera do edycji 2 pliki – plik z hostami Windowsa i wirtualnymi hostami Apache (Xampp), bo zawsze dodawanie wirtualnego hosta odbywa się w obydwu plikach. Dlatego ścieżka tego pliku zawiera 2 elementy (zwróć uwagę na cudzysłowy – występują w ścieżkach, gdzie są spacje):

Ścieżka na powyższym screenie to:

"C:\Program Files\Sublime Text 3\sublime_text.exe" C:\xampp\apache\conf\extra\httpd-vhosts.conf C:\Windows\System32\drivers\etc\hosts

Menu kontekstowe

Poza tworzeniem plików w edytorach (za pomocą snippetów itp), dodałem sobie tworzenie pliku html z menu kontekstowego po kliknięciu prawym guzikiem myszki. Dzięki temu mam 100% boosta gdy chcę coś szybko przetestować czy na szybko sprawdzić.

Skorzystałem tutaj z tej metody: http://www.askvg.com/how-to-add-remove-items-from-new-menu-in-Windows/. W moim przypadku nie miałem katalogu ShellNew w Windows. Musiałem go stworzyć ręcznie (szczerze mówiąc już nie pamiętam czy mogłem go stworzyć bezpośrednio w katalogu Windows, czy musiałem go stworzyć na pulpicie i skopiować go do katalogu Windows). Czyli – stworzyłem katalog Windows/ShellNew. W nim stworzyłem sobie plik index.html z templatką html (tą z pierwszego snippeta dla SublimeText). Następnie w edytorze regedit dodałem odpowiednie klucze dla HKEY_CLASSES_ROOT->.html (6 pkt w powyższym artykule).

Kolejne coś jeszcze

O kurcze. Zostało wiele rzeczy, o których chciałbym napisać, a które wychodzą z czasem. Tekst się jednak niemiło rozrasta, a palce odmawiają posłuszeństwa.

W zestawie powinien się znaleźć obowiązkowo FileZilla – bardzo dobry klient ftp.
Do tego VMWare Player, na którym mam zaisntalowane Ubuntu. By testować strony z komputera, w Ubuntu dodaje do /etc/hosts wpisy na ip mojego komputera (podobne co w pliku host w Windowsie). IP komputera pobieram w cmd. Więc w C:\Windows\System32\drivers\etc\hosts mam np wpis 127.0.0.1 kursjs.lh a na wirtualnej maszynie w /etc/hosts mam wpis 192.168.0.xx kursjs.lh

Do powyższych programów dochodzi skonfigurowany Gulp, lub w prywatnych projektach bardzo wygodny Prepros, który załatwia wszystko to co mam w Gulpie.

Nie mogę też nie wspomnieć o popierdółkach – które są czasami bardzo przydatne – DeskPin do przypinania okien nad innymi (jak się koduje i ogląda SouthPark :_) i Slack do rozmów z innymi (a i tak większość pisze przez messengera).

Na zakończenie

Ostatnią rzeczą (w tym skromnym zestawieniu), która powinna znaleźć się w warsztacie każdego frontendowca jest – regularnie minimum to: https://www.youtube.com/watch?v=Lmoh85q65vo

Komentarze

  • Deser

    Dev na Xamppie, prod na Unixie?

    • kartofelek007

      U mnie nie ma aż takiego zaawansowania w projektach. Dev na xampie a jak wszystko jest ok, to leci na produkcję czyli linuxpl.
      Ubuntu raczej do zabawy czy testowania czy na linuxowych przeglądarkach jest wszystko cacy. Niestety jestem dzieckiem Windowsa…

  • Świetny i rozbudowany artykuł. Tak trzymaj! :)