Narzędzia

Poniżej kilka narzędzi, które przydadzą nam się w czasie zabaw z Javascript.

Edytor tekstu / IDE

Jeżeli chodzi o edytor tekstu, to Windowsowy Notatnik zostawmy sobie w spokoju. Nas interesują edytory z kolorowaniem kodu, zwijaniem fragmentów kodu i ewentualnymi podpowiedziami. Warto przetestować kilka takich programów, by wybrać swój ulubiony.
W chwili pisania tego tekstu najpopularniejszymi są:

Który wybrać?
Webstorm jest jednym z najlepszych narzędzi w swojej branży. To taki Photoshop dla programistów. Niestety jego subskrypcja kosztuje.
Jeżeli interesuje nas coś darmowego, Visual Studio Code mocno ostatnio zyskał na popularności. Ja używam właśnie tych dwóch.

Poza nimi Atom, Bracket czy Sublime Text też są dobrym wyborem.

Tak naprawdę wszystkie te narzędzia mają swoje plusy i minusy. Wybierz po prostu to, które będzie Tobie odpowiadało.

Jeżeli chodzi o ustawienia takich edytorów, polecam w Internecie poszukać frazy "nazwa-mojego-super-edytora best plugins", "mój-wypasiony-edytor best shortcuts" lub "najlepszy-na-swiecie tips tricks". Artykułów o tej tematyce są miliony.

Przydatne strony

Z narzędzi internetowych czasami pewnie będziemy chcieli używać https://jsbin.com/?html,js,output, który pozwala pisać kod JavaScript i w razie czego go udostępniać innym. Podobną funkcjonalność ma kilka innych stron - w tym bardzo popularny https://codepen.io.

Na stronie http://jsben.ch/index będziemy mogli przetestować szybkość różnych wersji naszych skryptów.

Język JavaScript, podobnie jak CSS charakteryzują się tym, że jest różnie wspierany na różnych przeglądarkach.
Aby sprawdzić jak dana funkcjonalność jest wspierana na danej przeglądarce, możemy posłużyć się stronami http://caniuse.com, http://kangax.github.io/compat-table/es2016plus/, lub dokumentacją MDN która częstokroć na końcu tematów pokazuje wsparcie danej funkcjonalności.

Jako, że frontend nie kończy się na Javascripcie, warto też regularnie przeglądać niektóre z poniższych stron:

Poza tym polecam też dodać sobie do przeglądarki 2 dodatki: muzli2 i daily.dev. Oba służą do serwowania nowości gdy otwierasz nową kartę w przeglądarce. Dość ważna rzecz, gdy chcesz być na bieżąco z frontendem.

Poza powyższymi warto też przejrzeć sobie zestawienia narzędzi na stronach https://www.bookmarks.design/, https://undesign.learn.uno/ czy http://frontendtools.com/. Szczególnie tą pierwszą polecam przejrzeć.

Chat GPT

Jeżeli nie słyszałeś o Chat GPT, zgaduję, że albo jesteś niedźwiedziem, który ostatnie pół roku zalegał w jaskini, albo mieszkasz w Bieszczadach.

Coraz więcej osób które goszczę na kursie korzysta z tego narzędzia. Sam może nie jestem póki co wielkim użytkownikiem AI, ale kilka razy zdało mi się z niej korzystać i efekty były całkiem udane.

Linter

W czasie pisania kodu przydało by się by ktoś lub coś go analizowało i wskazywało nam potencjalne pomyłki lub rzeczy możliwe do poprawy (np. formatowanie, czy w danym miejscu potrzebny jest średnik, że użyliśmy tu i tu innych cudzysłowów itp.). Można zaopatrzyć się w kota, można też w specjalne do tego celu narzędzia.

Edytory, które wymieniłem powyżej całkiem dobrze wskazują potencjalne pomyłki. W domyślnej konfiguracji WebStorm zdecydowanie robi to najlepiej, natomiast Visual Studio Code i podobne radzą sobie ciut gorzej ale w codziennej pracy niczemu to nie przeszkadza i w zasadzie rozchodzi się o przyzwyczajenie.

Jeżeli chcesz jeszcze bardziej wymusić na tych narzędziach kontrolę twojego kodu, możesz doinstalować sobie odpowiednie lintery, które właśnie służą do sprawdzania naszego kodu. Na chwilę obecną najpopularniejszymi są ESLint, JSLint i JSHint.

W ostatnich latach najczęściej wybierany jest ESLint. Aby go użyć w danym projekcie, musisz mieć na komputerze zainstalowane środowisko Node.js (będziemy się nim zajmować w jednym z późniejszych rozdziałów) oraz zainstalować sobie pakiet ESLintera (globalnie lub lokalnie). Gdy już go zainstalujesz, w głównym katalogu danego projektu powinieneś stworzyć plik konfiguracyjny za pomocą polecenia npx eslint --init (lub eslint --init jeżeli zainstalowałeś ten pakiet globalnie). Zostaniesz zapytany o kilka preferowanych przez ciebie ustawień odnośnie pisania kodu. Na oficjalnej stronie ESLinta znajdziesz odpowiednią instrukcję do tych czynności.

Domyślnie lintera takiego używa się bezpośrednio z terminalu, gdzie po wpisaniu odpowiedniej komendy wypisuje w nim listę rzeczy, które powinieneś w swoim kodzie poprawić. Takie użycie nie jest w żaden sposób wygodne i mija się z sensem. Dlatego po zainstalowaniu i stworzeniu pliku konfiguracyjnego, możesz włączyć lintera w twoim edytorze. Instrukcję dla Webstorm znajdziesz tutaj: 1. Dla Visual Studio Code musisz doinstalować sobie odpowiedni dodatek 2).

Dzięki temu stosowne powiadomienia będziesz miał zaznaczone bezpośrednio w kodzie (tak jak resztę błędów) i nie będziesz musiał wpisywać w terminalu dodatkowych komend.

Zdaję sobie sprawę, że z powyższego opisu nie wszystko może być jasne. Takie są niestety uroki naszej branży - właśnie wsiadasz do super ekspresu, który pędzi coraz szybciej. Daj sobie czas, skup się na podstawach. Gdy przerobisz w końcu dział o Node, wróć do powyższych tematów, w przeciwnym razie będziesz robił coś, czego nie do końca będziesz rozumiał.

Wstęp O Javascript, wersjach itp