Narzędzia JavaScript Full-Stack Web Developera: Lekkie edytory kodu

0:00Poza samym głównym edytorem kodu, którego

0:02konfiguracja bez wątpienia jest bardzo istotna

0:05moim zdaniem warto też posiadać jakiś lżejszy edytor, który będziemy

0:09wykorzystywać na potrzeby prostej edycji plików.

0:11Moim zdaniem jedynym słusznym wyborem

0:14jeżeli chodzi o taki rodzaj edytorów kodu jest wyłącznie Sublime Text 4.

0:19I tutaj trzeba przyznać, że na rynku

0:20funkcjonowały jeszcze edytory takie jak Brackets oraz Atom.

0:23Natomiast o Brackets dawno już nie słyszałem

0:26w przypadku Atoma projekt zostanie zamknięty 15 grudnia tego roku.

0:30Zatem tak jak powiedziałem, jedynym

0:32słusznym wyborem jest Sublime Text 4 i bardzo polecam Ci zainstalować ten edytor.

0:37Poza tym w jednej z poprzednich lekcji wspominałem, że warto jeszcze aktywować

0:41sobie Command Line Interface w przypadku Sublime Text, aby szybciej otwierać pliki.

0:46W tej lekcji pokażę Ci również, w jaki

0:47sposób możesz wykorzystać tą opcję do pójścia jeszcze krok dalej.

0:52Tymczasem jeżeli zastanawiasz się po co Ci

0:54w ogóle taki lekki edytor kodu, to pokażę Ci kilka przykładów, które ja wykorzystuję

0:58i bez których faktycznie trudno mi jest momentami wyobrazić sobie efektywną pracę.

1:03Jednym z przykładów jest chociażby praca z obiektami JSON bądź różnego rodzaju zestawami

1:08danych, czy nawet zwykłym, obszernym tekstem.

1:11Mianowicie, tak jak w tym przypadku, ten

1:13obiekt JSON jest naprawdę trudny do odczytania,

1:16w związku z tym mam tutaj zainstalowane

1:17rozszerzenie, które jest mi w stanie go sformatować.

1:20Mało tego, jeżeli pojawiają się tutaj

1:22jakieś błędy, to naturalnie zostaną one wskazane.

1:25Następnie natychmiast mam tutaj rezultat, z którym mogę pracować.

1:29No i teraz możesz zaznaczyć, że przecież to samo mogę robić w IntelliJ.

1:33Oczywiście jest to prawda.

1:34Natomiast jednocześnie chodzi mi tutaj wyłącznie o tą szybką edycję pojedynczych

1:38plików bądź zestawów danych, które niekoniecznie są związane z projektem, na

1:42którym pracuję, ale z jakiegoś powodu mogę mieć potrzebę, aby właśnie w ten sposób

1:46podejrzeć sobie zawartość obiektu JSON.

1:49Kolejnym elementem, który wykorzystuje w

1:50swojej pracy są konkretne makra w Keyboard Maestro, które pozwalają mi formatować i parsować

1:56obiekty JSON oraz ewentualnie zamieniać je JSON String.

1:59Działa to w taki sposób, że przykładowo

2:01zaznaczam sobie tekst, kopiuję go, a następnie np.

2:04z pomocą Keyboard Maestro wybieram sobie opcję Stringify.

2:08Następnie w wyniku działania tego makra

2:10moja zawartość schowka zostaje zamieniona i pojawia się w nim JSON String.

2:14No i teraz też mogą zdarzyć się sytuacje, w których mam obiekt JSON i potrzebuję

2:18go sformatować, a jednocześnie z jakiegoś powodu nie chcę w ogóle otwierać edytora

2:22kodu i w związku z tym wybieram sobie makro format JSON i również na tym

2:26etapie do mojego schowka trafia sformatowany obiekt.

2:30Dodatkowo poza samą edycją np.

2:32obiektów JSON i pracy z jakimiś fragmentami kodu, zdarza mi się często

2:36wykorzystywać Sublime Text do edycji tekstów.

2:39Jego wydajność sprawia, że obsługuje nawet

2:41bardzo obszerne pliki, a jednocześnie możliwości edycji np.

2:45takie jak Multi Cursor są tutaj

2:47niesamowicie wygodne do wprowadzenia różnego rodzaju zmian.

2:51Jedną z takich zmian może być przykładowo

2:52łączenie wielu linii w jedną, bądź wręcz przeciwnie.

2:55Tutaj w pierwszym przypadku wykorzystałem skrót klawiszowy Command, Shift i J

2:59do tego, aby połączyć wszystkie linie w jedną, a w drugim przypadku zaznaczyłem

3:03spację, a następnie wybrałem skrót klawiszowy Command Control G do tego, aby

3:08zaznaczyć wszystkie wystąpienia i wcisnąłem Enter.

3:11W ten sposób znak spacji został zamieniony

3:13na Enter, a ja uzyskałem pożądany rezultat.

3:16Oczywiście coś takiego nie zadziałało by w momencie, gdyby np.

3:18słowo zawierało spacje

3:20natomiast wydaje mi się, że pokazuje to koncepcję, jaką mam na myśli.

3:23Teraz chciałbym pokazać Ci jeszcze jedną zaawansowaną formę edytowania i

3:27modyfikacji tekstu, jaką są wyrażenia regularne.

3:30Oczywiście nie mam wątpliwości, że sam termin jest Ci znany, ale niewykluczone,

3:34że nie wykorzystujesz ich w codziennej pracy.

3:37Tym bardziej, że nie bez powodu wiele osób

3:39po prostu radzi ich unikać lub też celowo nie podejmuje się ich wykorzystywania.

3:44Okazuje się jednak, że jest to dość błędne

3:46myślenie ze względu na to, że podstawowe wyrażenia regularne są całkiem proste do

3:50zapamiętania i wykorzystywania, a jednocześnie użyteczność i efektywność,

3:54jaką otrzymujemy w zamian są naprawdę niesamowite.

3:58Swoją drogą też przez lata myślałem, że wyrażenia regularne są zbyt skomplikowane,

4:02żebym były w stanie je ogarnąć, a w praktyce okazują się niesamowicie proste.

4:06I tutaj tylko zaznaczę, że naturalnie nie chodzi mi o budowanie jakiś

4:09skomplikowanych wyrażeń, tylko bardziej o to podstawowe wykorzystanie w celu np.

4:14modyfikowania zawartości plików.

4:16I tutaj przykładowo nawet możemy zapisać w

4:18ten sposób i zaznaczamy w ten sposób cyfry, które występują w naszym tekście.

4:22Jednocześnie, jeżeli tych cyfr byłoby więcej i z jakiegoś powodu chcielibyśmy je

4:26zaznaczyć, również moglibyśmy to zasygnalizować.

4:29I teraz po co nam w ogóle takie wyrażenia regularne?

4:32Ano po to, aby np.

4:34wyeliminować sobie liczby z naszego tekstu poprzez zastąpienie ich w ramach bieżącego

4:38pliku pustym ciągiem znaków, czyli po prostu ich wyeliminowaniem.

4:42Rezultat może w tym przypadku jest mało

4:44imponujący, ale wyobraź sobie teraz bardzo obszerny plik, na którym przyjdzie Ci

4:48pracować i normalnie jego modyfikacja zajęłaby Ci mnóstwo czasu

4:51a tak z pomocą dosłownie trzech znaków.

4:53praca jest jakościowa, wykonana. Naturalnie

4:56tutaj musisz zwracać uwagę na fakt, że naprawdę łatwo jest się pomylić

5:00w przypadku wyrażenia regularnego i

5:02przypadkowo w błędny sposób wprowadzić modyfikacje.

5:05Z tego powodu zawsze pamiętaj o tym, aby

5:07wykonywać kopię danych, na których pracujesz oraz dodatkowo uważnie

5:11sprawdzić, czy rzeczywiście wprowadzone zmiany są tymi, których oczekujesz.

5:15W każdym razie, jeżeli chodzi o wyrażenia regularne, jeżeli z jakiegoś powodu

5:19jeszcze ich nie znasz i mam tutaj na myśli naprawdę proste posługiwanie się nimi, to

5:23odsyłam Cię teraz do mojego warsztatu na Eduweb.pl,

5:26który trwa niecałe 35 minut i po którego ukończeniu będziesz w stanie bez problemu

5:31odczytać nawet wyrażenie, które w tej chwili znajduje się na ekranie.

5:35Analogicznie też będziesz w stanie tworzyć

5:37swoje własne wyrażenia właśnie na potrzeby edytowania plików i wyszukiwania różnego

5:42rodzaju informacji w długich ciągach znaków.

5:45Jednocześnie też pokazuje, w jaki sposób

5:47można wykorzystać te wyrażenia regularne, na przykład bezpośrednio w JavaScripcie

5:51i to również może Cię zainteresować.

5:54Na tym etapie warto jeszcze zaznaczyć, że same wyrażenia regularne możesz

5:57wykorzystać również wewnątrz Keyboard Maestro

6:00i jest to również niezwykle użyteczne.

6:02Z tego powodu bardzo zachęcam Cię do tego,

6:04aby zapoznać się z tym warsztatem, ponieważ rzeczywiście po tych 35 minutach

6:09będziesz w stanie tworzyć wyrażenia regularne na własne potrzeby.

6:13I teraz ostatnim wątkiem, który w

6:14przypadku Sublime Text sprawdza mi się bardzo dobrze, jest tworzenie prostych

6:19interfejsów lub też w ogóle bardzo małych projektów z wykorzystaniem parcela.

6:23Całkiem niedawno pojawiła się jego druga

6:25wersja, w przypadku której zostało mocno przebudowany, jego wydajność wzrosła

6:30i tak samo pojawiły się różne funkcje oraz

6:32wsparcie dla różnego rodzaju frameworków i narzędzi.

6:35W związku z tym jego wykorzystanie w

6:37zasadzie sprowadza się do uruchomienia takiego polecenia na pliku index.html,

6:41w przypadku którego

6:42jeżeli potrzebujesz jakiegoś prostego pliku JavaScript, pamiętaj tylko proszę o

6:46tym, aby do tagu script dodać atrybut type ustawiony na module.

6:51Dzięki temu, jeżeli teraz przejdziemy sobie do tego katalogu, a następnie uruchomimy

6:55polecenie parcel index, no to w przeglądarce będziemy mogli otworzyć

6:59ten adres, gdzie otworzy się nasz projekt, w przypadku którego od razu mamy np.

7:03hot reload w związku z czym edytowanie np.

7:06takiego pliku na podzielonym ekranie jest

7:08niezwykle efektywne ze względu na to, że natychmiast otrzymujemy tutaj feedback i

7:12jesteśmy w stanie szybko wprowadzać jakieś proste zmiany.

7:15Przykładem prostej zmiany, w przypadku

7:17której może okazać się to dla Ciebie przydatne, może być np.

7:20projektowanie szablonu wiadomości transakcyjnej.

7:23W takiej sytuacji zwykle po prostu

7:24wyciągam szablon sendgrida, a następnie edytuje go sobie właśnie w takim formacie

7:28i szczerze mówiąc, jest to nieporównywalnie bardziej wygodne niż np.

7:32edytowanie wiadomości wewnątrz edytora wbudowanego w system mailingowy bądź

7:36w system do wysyłania wiadomości transakcyjnych.

7:39Także podsumowując, jeżeli coś nie byłoby

7:41tutaj jasne, to przede wszystkim wykonujemy tutaj polecenie yarn init -y

7:45po to, aby zainicjalizować projekt i utworzyć plik package.json

7:49tutaj też możemy zainstalować Parcela w wersji 2, a następnie tworzymy plik index.html

7:54i w razie potrzeby dołączamy do niego plik app.js.

7:56czy w ogóle jakikolwiek inny plik

7:59JavaScript i dodatkowo upewniamy się, że mamy tutaj ustawiony atrybut

8:02ze względu na to, że bez niego nie będzie nam działać hot-reloading, czyli to

8:07natychmiastowe odświeżanie zawartości okna przeglądarek.

8:10No i tutaj jeszcze na sam koniec chciałbym

8:12zwrócić uwagę na makra, które stosowałem w przypadku Keyboard Maestro

8:16bo jeżeli interesuje Cię ich wykorzystanie

8:18to paczkę z nimi dołączam do zasobów tej lekcji.

8:21Jednocześnie jeżeli zajrzysz sobie tutaj do środka, to po prostu wykorzystujemy

8:24tutaj ustawienie zmiennej na zawartość schowka, a następnie wykorzystujemy tutaj

8:29JavaScript, który modyfikuje nam jego zawartość

8:32i tutaj mam ustawione, że rezultat z

8:34ostatniej linii zostanie zapisany jako nowa zawartość schowka.

8:37Jeżeli chodzi o proste edytoru kodu i takie najważniejsze transformacje tekstu i

8:42szybkie tworzenie projektów, wydaje mi się, że to byłoby już na tyle.

8:45I tutaj jeszcze na sam koniec zaznaczę, że w przypadku np.

8:49budowania interfejsów w niektórych przypadkach może sprawdzić się narzędzie

8:52Shuffle bądź podobne buildery do tego, aby np.

8:56połączyć się z Tailwind CSS, a następnie z pomocą gotowych komponentów wyklikać

9:01sobie interfejs, który potem stopniowo przeniesiesz sobie do swojej aplikacji.

9:05Tutaj muszę przyznać, że właśnie pod kątem tworzenia interfejsów np.

9:09strony zautomatyzowani.pl,

9:10taki rodzaj buildera przydał nam się niesamowicie.

9:13I swoją drogą właśnie to był Shuffle,

9:15tylko wtedy funkcjonował jeszcze pod wcześniejszą nazwą.

9:18Mam nadzieję, że ta wskazówka może okazać się dla Ciebie przydatna

9:21a tymczasem dziękuję Ci za uwagę i słyszymy się za chwilę w kolejnej lekcji.