Narzędzia JavaScript Full-Stack Web Developera: Sandboxy

0:00Kolejnym wątkiem w kontekście efektywnego tworzenia kodu są różnego rodzaju lekkie

0:05edytory umożliwiające natychmiastowe podglądanie wyników.

0:09Bez wątpienia jednym z takich narzędzi

0:10jest JS Bin oraz inne dostępne online edytory kodu

0:14i tutaj nie mam wątpliwości, że przynajmniej je kojarzysz.

0:17Jeżeli z nich nie korzystasz, to od czasu do czasu polecam do nich zajrzeć.

0:21Tymczasem chciałbym zwrócić Twoją uwagę na

0:24kilka dodatkowych narzędzi, z których ja osobiście korzystam i bardzo sobie chwalę.

0:28Jednym z nich jest RunJS, czyli typowa w JavaScript piaskownica.

0:32Wykorzystuje ten program głównie do tego,

0:34aby pisać jakieś snippety kodu, które wymagają transwormowania danych i

0:39sama taka procedura jest dość zaawansowana.

0:41I chociażby z tego powodu, jeżeli chciałbym tworzyć takie snippety kodu

0:44bezpośrednio w edytorze, to samo korzystanie z debuggera lub też zaglądanie

0:49do przeglądarki zabierało by po prostu bardzo dużo czasu.

0:52Oczywiście tak jak pokazywałem w jednej z

0:54poprzednich lekcji mógłbym skonfigurować sobie Parcela, natomiast na potrzeby tak

0:58tworzonych skryptów po prostu zależy mi na tym, aby szybko otworzyć edytor i

1:03natychmiast zacząć pisać, jednocześnie podglądając wyniki.

1:06Także po tem edytor sięgam głównie w

1:08sytuacjach, w których nie pracuję aktualnie nad żadnym projektem, ale po

1:12prostu jakaś aplikacja wymaga ode mnie napisania jakiegoś snippetu Java Script.

1:16Ostatnim przykładem w moim przypadku

1:18akurat był Keyboard Maestro, ale jednocześnie pojedyncze snippety kodu mogą

1:22sprawdzać się również w codziennej pracy nad jakimś projektem.

1:25I tutaj muszę przyznać, że analogicznie do RunJS zdarza mi się wykorzystywać

1:29Plugin Quokka, który integruje się bezpośrednio z edytorem.

1:33Tutaj z pomocą skrótu klawiszowego Command Shift i N utworzy sobie teraz ScratchFile,

1:38czyli nic innego jak w tym przypadku Java Scriptowy brudnopis.

1:42Problem w tym, że jeżeli tutaj

1:43przeniesiemy nasz kod, to oczywiście nie widzimy żadnych wyników

1:46i właśnie o tym mówiłem, że na potrzeby

1:48pisania takich snippetów nie możemy tutaj natychmiastowo podglądać wyników.

1:52Ale jeżeli wcisnę teraz dwa razy Shift, a

1:55następnie wyszukamy tutaj Quokka.js, to mogę ją włączyć w trybie automatycznym.

1:59Zaraz potem, jak widzisz mam tutaj

2:01informacje na temat statusu interpretowanego kodu

2:04a tutaj pojawiają się rezultaty.

2:06W tym przypadku mam tutaj console log,

2:08więc automatycznie widzę tutaj rezultat, a tutaj tego console loga nie ma, więc muszę

2:13wykorzystać specjalny komentarz Quokka do tego, aby wyświetlić wynik.

2:17Faktycznie wynik się pojawia i podobnie

2:19jak w przypadku RunJS możemy tutaj swobodnie tworzyć kod

2:23i szczerze mówiąc takie rozwiązanie jest niesamowicie wygodne i co więcej bardziej

2:26elastyczne niż same RunJS w przypadku którego mamy dość ograniczone możliwości

2:31jeżeli chodzi o uruchamianie kodu i sprawdzi się bardziej w przypadku

2:35skryptów, które można zapisać w jednym pliku.

2:38A tutaj gdybyśmy tego tylko chcieli, moglibyśmy utworzyć drugi plik np.

2:42app.js a następnie tutaj możemy eksportować sobie np.

2:46moje imię i analogicznie jak się pewnie domyślasz,

2:48możemy je zaimportować i wyświetlić z pomocą console loga w tym miejscu.

2:52Tutaj rezultat będzie taki, że

2:54oczywiście o ile odpowiednio wyeksportujemy tą zmienną, to będziemy mogli ją tutaj

2:58odczytać, oczywiście po przeładowaniu Quokki.

3:01Zatem jeżeli chodzi o rozstrzeżenie Quokka,

3:04to szczerze mówiąc pomimo tego, że ono samo jest płatne to i tak bardzo polecam

3:08Ci je wykupić ze względu na to, że tutaj mówimy o opłacie rocznej, która każdego

3:12kolejnego roku jest pomniejszona o z tego co pamiętam 30%

3:16a jednocześnie muszę przyznać, że poza

3:18może GitHub Copilotem jest to najbardziej usprawniające moją pracę rozszerzenie,

3:23które wykorzystuję w tym przypadku w IntelliJ,

3:26natomiast Quokka jest też dostępna na Visual Studio Code, więc jeżeli nadal z

3:30niego korzystasz, to jak najbardziej możesz po nią sięgnąć.

3:33No i teraz ostatnią aplikacją, która

3:35również może okazać się dla Ciebie przydatna jest Expressions.

3:39Jest to aplikacja dostępna w pakiecie Setapp,

3:41więc jest to kolejny powód, aby po niego sięgnąć

3:44i w tym przypadku, w przeciwieństwie do Quokki czy RunJS

3:47możemy tutaj pisać i testować wyrażenia regularne.

3:50Przykładowo możemy tutaj zapisać sobie

3:52kropka oraz + aby zaznaczyć wszystkie znaki.

3:55Tutaj w szczególności polecam zwrócić

3:57uwagę na te panele boczne, które możemy sobie wysunąć

4:00i tutaj w ramach Expressions możemy tworzyć sobie nowe wyrażenia i w ten sposób tworzyć

4:05bibliotekę snippetów, po które łatwo będziemy mogli sięgnąć.

4:08No i dalej mamy ściągawki, które ułatwią Ci tworzenie wyrażeń regularnych.

4:12Jest to szczególnie przydatne w momencie, gdy potrzebujesz zapisać jakieś wyrażenie

4:16regularne, a następnie od razu przetestować je na różnego rodzaju frazach

4:20i dopiero wtedy skopiować i wkleić do swojej aplikacji.

4:24Szczerze mówiąc, z tego narzędzia

4:25korzystam niemal na każdym kroku, ponieważ odkąd przynajmniej w podstawowym stopniu

4:29poznałem wyrażenia regularne, sięgam po nie niemal na każdym kroku, szczególnie na

4:34własne potrzeby, a nie koniecznie na potrzeby aplikacji, która rozwijam,

4:38ze względu na to, że w przypadku wyrażeń

4:40regularnych trzeba o tym pamiętać, że pomimo tego, że są one naprawdę elastyczne

4:44i dają dość dużą moc, to jednocześnie nie zmienia to faktu, że osób, które kojarzą i

4:49potrafią z nimi pracować jest naprawdę bardzo mało.

4:52Z tego powodu za każdym razem, gdy

4:53będziemy po nie sięgać, musimy się z tym liczyć, że osoba, która będzie potem

4:57pracowała z tym kodem może mieć naprawdę dużą

5:00trudności w zrozumieniu tego, co próbowaliśmy napisać.

5:04Zatem wniosek z tej lekcji jest

5:05następujący. Nie zawsze warto pisać kod bezpośrednio w edytorze.

5:09RunJS jest świetną aplikacją,

5:11szczególnie do naprawdę małych przykładów np.

5:14w momencie, gdy próbujesz coś komuś

5:15wyjaśnić albo napisać jakiś naprawdę prosty skrypt.

5:19Quokka.js to w mojej opinii niezbędne

5:21rozszerzenie i naprawdę niesamowicie mi się przydaje.

5:24Oczywiście możesz tutaj skorzystać z

5:26okresu próbnego i w ogóle sprawdzić, czy w Twoim przypadku będzie podobnie,

5:29natomiast ja dosłownie nie mogę żyć bez tego rozszerzenia.

5:33No i ostatnia aplikacja Expressions

5:35sprawdzi się wyłącznie wtedy, jeżeli faktycznie tworzysz wyrażenia regularne.

5:39Jeżeli chodzi o tą lekcję, to by było na tyle,

5:42mam nadzieję tylko, że to co zapadnie Ci tutaj w pamięci to fakt, że Twój główny

5:46edytor nie musi być jedynym miejscem, w którym tworzysz kod.

5:50Przypominam tutaj również o Sublime Text 4, który również warto przynajmniej

5:55podstawowo skonfigurować do swoich potrzeb

5:57na sytuacje, w których konieczna będzie szybka edycja treści pliku.

6:01Dzięki za uwagę i do usłyszenia za chwilę.