Polski frontend

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, że 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śli 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śli jesteś już starym wyjadaczem programowania, ale chcesz znaleźć inspirację albo stworzyć na szybko prototyp – playground będzie do tego idealnym miejscem. Najlepsze jest to, że 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ę, że 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śli 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śli 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 szybko 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śli 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, że pozwala eksperymentować z kodem back-endowym za pomocą 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śli 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śli jednak żaden z nich nie skradł Twojego serca jest jeszcze 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ą szybko 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ę, że 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. 🙂

Artykuł Code Playground – 5 miejsc do zabawy z kodem pochodzi z serwisu Frontowisko.