Niezależnie od tego czy jesteś początkującym, czy doświadczonym programistą, musisz czasami sprawdzić na szybko, czy coś działa albo czy da się to zrobić w konkretny sposób. Tutaj z pomocą przychodzi code playground, czyli taki „plac zabaw” z kodem. Różnicą jest tylko fakt, iż główną atrakcją jest nie piaskownica, a kod i milion rzeczy, które możemy z nim zrobić.
Co to jest code playground – plac zabaw programisty?
Playgroundy to najczęściej aplikacje webowe, które pozwalają pisać, uruchamiać i udostępniać kod innym. Dają również możliwość zabawy z cudzym kodem poprzez zrobienie forka, czyli kopii zmian, którą możesz potem dowolnie modyfikować, nie wpływając na oryginalny kod. jeżeli zaczynasz naukę webdevelopmentu i chcesz poćwiczyć swoje umiejętności bez organizowania środowiska lokalnego, korzystanie z playgroundu może być dobrym wyborem. Pozwoli Ci od razu sprawdzać w praktyce nowo zdobytą wiedzę. Możesz także skorzystać z gotowych rozwiązań i uczyć się na bazie cudzych rozwiązań.
Z drugiej strony, jeżeli jesteś już starym wyjadaczem programowania, ale chcesz znaleźć inspirację albo stworzyć na gwałtownie prototyp – playground będzie do tego idealnym miejscem. Najlepsze jest to, iż większość niezbędnych funkcjonalności w takiej aplikacji jest bezpłatna i pozwala osadzić wyniki naszej kreatywności, gdzie tylko chcemy. Na własnym blogu, na fejsbuniu czy w zwykłym mailu. 😀
Myślę, iż już wiesz, dlaczego playgroundy są fajne i warto je poznać. Przyjrzyjmy się niektórym z nich!
1. Codepen
O Codepenie wspominałyśmy we wpisie o początkach nauki frontendu, więc możesz go już kojarzyć. 😉
Codepen to nie tylko programistyczny plac zabaw, ale też społeczność programistów, którzy chcą doskonalić swoje umiejętności i dzielić się swoimi najlepszymi projektami. Platformę traktują trochę jak własne portfolio, którym mogą się potem pochwalić np. podczas rekrutacji.
Z prawie 2 milionami użytkowników jest jednym z najczęściej używanych playgroundów do tworzenia frontendu. jeżeli zaczynasz swoją przygodę z frontendem musisz tam zajrzeć. Inspiracje, nowe pomysły i motywacja do dalszej nauki gwarantowane. Codepen zawiera wbudowaną obsługę preprocesorów JavaScript i CSS, takich jak Typescript i Sass. Ponadto, jeżeli korzystasz z pakietów npm platforma pozwala Ci na ich instalację bezpośrednio z panelu konfiguracji.
Wyróżniki:
- prosty i łatwy w korzystaniu edytor kodu
- świetna społeczność
- większość codepenów jest open source
- idealne miejsce do praktyki frontendu
JSFiddle
JSFiddle jest jednym z najstarszych playgroundów. Jest to rozwiązanie jak sama nazwa wskazuje zorientowane na JSa. Dużą zaletą JSFiddles jest to, że pozwala symulować zapytania asynchroniczne. Dzięki czemu możemy na gwałtownie poćwiczyć na nim naszą znajomość ajaxa.
Kolejną niesamowitą rzeczą w JSFiddle są sesje współpracy. Możesz podczas kodowania być na łączach poprzez chat tekstowy i audio, co może być przydatne np. przy pair programmingu czy wspólnym debugowaniu kodu.
Wyróżniki:
- minimalistyczny interfejs użytkownika
- wspólne programowanie przez czat
- dobra dokumentacja
- asynchroniczne zapytania
3. CodeSandbox
Prototypowanie strony internetowej może być trudnym i czasochłonnym zadaniem, jeżeli nie masz odpowiedniej konfiguracji. Korzystanie z CodeSandbox powinno być oczywistą decyzją, gdy priorytetem jest szybkie tworzenie stron.
CodeSandbox zapewnia pełne środowisko do tworzenia frontendu. Od HTMLa do bibliotek JSowych takich jak React, czy Vue. Oprócz tego ma wbudowaną integrację z GitHube i narzędzia do debugowania. Playground zapewnia wszystko, aby w kilka sekund rozpocząć kodowanie.
Wyróżniki:
- integracja z serwisem github
- stworzony na podstawie Monaco Editor, który zasila najpopularniejszy edytor kodu, czyli VScode
- deployment zmian na Netlify i Vercel
- narzędzia do debugowania
- gotowe templatki projektów
- współpraca w czasie rzeczywistym
4. StackBlitz
StackBlitz to nowszy plac zabaw, który obsługuje programowanie front-endowe. Możesz używać gotowych szablonów dla bibliotek frontendowych i frameworków, takich jak React, Vue, Angular, Svelte i Ionic. Ale co odróżnia go od pozostałych opcji to fakt, iż pozwala eksperymentować z kodem back-endowym dzięki Node.js, Next.js i GraphQL.
Ciekawostka: aby wypróbować StackBlitz wpisz „node.new” w pasku adresu przeglądarki.
Wyróżniki:
- Środowisko VS Code w Twojej przeglądarce, obejmuje to Intellisense, wyszukiwanie projektów i nie tylko.
- Płynne działanie (naprawdę płynne)
- Edytor kodu offline (Hej! Może się przydać, jeżeli przejdziesz do trybu offline na dzień lub dwa)
- Adres URL hostowanej aplikacji — łatwe udostępnianie
5. Glitch
Glitch to środowisko programistyczne, które ułatwia tworzenie aplikacji internetowych. Moim zdaniem ma jeden z najprzyjemniejszych interfejsów do kodowania! Tylko popatrz:
Oprócz pięknego interfejsu Glitch jest używany przez miliony ze względu na łatwość obsługi, pair programming, kontrolę wersji, wiele gotowych szablonów, dobrą integrację z GitHub i przyjazną społeczność.
Glitch pozwala budować dowolne aplikacje z pełnym stackiem technologicznym, używając nie tylko HTML, CSS i JS, ale także Node.js (Backend), React lub Eleventy (o którego istnieniu nie wiedziałam, zanim udałam się na ich stronę).
Wyróżniki:
- możliwość tworzenia aplikacji fullstackowej w przeglądarce
- pair programming
- startery aplikacji
- kontrola wersji
- integracja z github
Inne opcje
Opisałam te playgroundy, z których miałam okazję kiedykolwiek korzystać i zdały u mnie egzamin. jeżeli jednak żaden z nich nie skradł Twojego serca pozostało kilka innych playgroundów, które możesz przetestować np. ESNextBin, JSitor, Liveweave czy
Dabblet.
Ok, ale który playground jest dla mnie?
Ciężkie pytanie, na które muszę odpowiedzieć: TO ZALEŻY. Określ, co chcesz stworzyć i jakich funkcji potrzebujesz. Wybierz 2-3 playgroundy i przetestuj, który najbardziej Ci odpowiada. Najważniejsze to nie spędzać nad tym zbyt dużo czasu, bo wypacza to ideę samych playgroundów, które mają gwałtownie i łatwo zorganizować nam przestrzeń do kodzenia. Ja najczęściej korzystam z Codepena do eksperymentów z cssem/jsem i Glitcha do większych projektów.
Podsumowanie
Dzięki playgroundowm jesteś w stanie zbudować dowolną aplikację internetową i to w oknie przeglądarki. Nie musisz pobierać rozbudowanych środowisk IDE, instalować i konfigurować dodatkowych zależności. Możesz tworzyć, debugować, testować i wdrażać pełnoprawne aplikacje bez opuszczania przeglądarki internetowej. Jest to rozwiązanie, które ma wiele zalet, jednak myślę, iż każdy ostatecznie korzysta z lokalnego IDE lub edytora kodu. Głównie przez możliwość maksymalnego dostosowania narzędzia pod swój styl pracy.
PS. Korzystałaś już z któregoś z omówionych aplikacji? A może zapomniałyśmy wspomnieć o Twojej ulubionej? Daj znać w komentarzu. Chętnie poznamy Twoje zdanie. 🙂
