Web Code Playground Narzędzia, które powinieneś wypróbować

Jeśli w ogóle interesujesz się kodowaniem internetowym, prawdopodobnie używałeś co najmniej jednego placu zabaw dla kodu w swoim czasie. To nie są zwykłe edytory kodu, ale miejsca, w których możesz przetestować kod, nie martwiąc się o konfigurację serwera zaplecza. Codepen i JSFiddle są dwoma najpopularniejszymi, ale, co może nie dziwić (biorąc pod uwagę, że docelowymi odbiorcami internetowych placów zabaw z kodem są osoby, które mają umiejętności samodzielnego tworzenia placów zabaw z kodem), istnieją wiele alternatywy

Jeśli chcesz po prostu zbudować szybką aplikację HTML / CSS / JavaScript i bawić się nią, wybrany plac zabaw będzie w zasadzie kwestią osobistych preferencji. Jeśli chcesz mieć więcej funkcji, takich jak kodowanie oparte na współpracy w czasie rzeczywistym, szybki dostęp do frameworków JS, takich jak React lub Vue, wsparcie zaplecza, a nawet po prostu aktywna społeczność kreatywna, możesz rozejrzeć się trochę.

CodePen

Prawdopodobnie najpopularniejszy plac zabaw z kodem front-endowym CodePeni nie bez powodu: jest intuicyjny i łatwy w użyciu, ma dużą i dynamiczną społeczność oraz stał się akceptowanym standardem osadzania działającego kodu internetowego na stronach. Jego szybkie automatyczne aktualizacje i elastyczny podgląd windows sprawiają, że jest dość popularny w projektach animacji CSS. Ma preprocesory CSS / JS i może łatwo łączyć się ze skryptami zewnętrznymi (React, Vue i wszystkim innym dostępnym za pośrednictwem CDNjs), a nawet innymi piórami.

Code Playgrounds Codepen

Ogólnie rzecz biorąc, CodePen zasługuje na najwyższe miejsce, szczególnie w przypadku projektów i portfeli front-end. Nie jest jednak zbudowany na potrzeby zaplecza, a niektóre jego funkcje, takie jak kodowanie oparte na współpracy, wiele projektów (w przeciwieństwie do pojedynczych pisaków) i pełne wyświetlenia na żywo (częściowe wyświetlanie na żywo są bezpłatne), wymagają płatnego pro Subskrypcja.

JSFiddle

Na drugich skrzypcach (choć chronologicznie jest to jedno z najstarszych) w front-endowym świecie zabaw JSFiddle. Jak sama nazwa wskazuje, jest zorientowana na JavaScript, dzięki czemu oferuje więcej gotowych funkcji JS, a mniej HTML / CSS. (Dosłownie, ma domyślną obsługę Sass, ale nie mniej.) Nie jest to jednak duży problem, ponieważ przy odrobinie pracy możesz dodać dowolne funkcje HTML / CSS / JS, a ponieważ obsługuje podpowiedzi do kodu i automatyczne podczas przeładowywania może być nawet nieco lepszy niż CodePen pod względem ogólnych możliwości kodowania.

Code Playgrounds Js Fiddle

Dużą zaletą JSFiddles jest to, że oferuje tryb współpracy (w tym czat głosowy i tekstowy!) Za darmo, umożliwiając pracę nad kodem w tym samym czasie, co inne osoby. W rzeczywistości nie ma wiele aspektów społecznościowych i nie prezentuje interesujących projektów, więc przegrywa z CodePen na tym froncie.

Ogólnie rzecz biorąc, jeśli masz projekt z większą ilością JS lub potrzebujesz wspólnego kodu, JSFiddle jest świetną opcją. Jeśli coś Cię w tym wkurza, istnieje wiele bardzo podobnych do siebie alternatyw na poniższej liście Innych placów zabaw.

Usterka

Okej, więc nie chcesz się tylko bawić z elementami front-end: potrzebujesz czegoś, na czym można zbudować aplikację internetową z pełnym stosem. Wiele placów zabaw dla kodu pozwala po prostu kodować HTML / CSS / JS i generować statyczne strony internetowe, ale Usterka daje ci trochę miejsca do przechowywania, 4000 żądań na godzinę i sprawia, że ​​całkiem łatwo jest uruchomić kod po stronie serwera Node.js. Za absolutną okazyjną cenę $0.00, masz sposób na budowanie i natychmiastowe wdrażanie małych projektów, niezależnie od tego, ile masz doświadczenia.

Glitch Playgrounds

Zawiera także całą masę innych wspaniałych funkcji: wspólne kodowanie, kontrola wersji (zwane przewijaniem do tyłu), wiele zasobów edukacyjnych, dobra integracja z GitHub, łatwe osadzanie, przyjazna społeczność, mnóstwo projektów do remiksowania i zabawy, a nawet Integracja z Visual Studio. Jego interfejs kodowania może nie być tak elegancki jak niektóre inne place zabaw, ale jego ogólna funkcjonalność jest równie dobra. Jeśli szukasz szybkiego i łatwego sposobu na uruchomienie aplikacji internetowej (lub próbujesz dowiedzieć się, jak to zrobić!), Glitch to świetny pierwszy krok.

CodeSandbox

CodeSandbox należy do tej samej kategorii co Glitch, ale jest nieco bardziej złożony i w pełni wyposażony. Podczas gdy Glitch nakłada dość minimalistyczny interfejs na swoją dość potężną funkcjonalność, CodeSandbox udostępnia całą tę moc na zewnątrz, używając tego samego edytora Monaco, który obsługuje VS Code. Dlatego osoby, które czują się dobrze z tym IDE, poczują się jak w domu dzięki CodeSandbox.

Code Playgrounds Codesandbox

Jest niezwykle elastyczny i konfigurowalny, open source, umożliwia wdrażanie pełnych aplikacji internetowych (choć wymaga kilku kroków więcej niż Glitch), hostuje twoje pliki, ma klimat społeczności i wykonuje wiele zadań w tle, uwalniając cię do napisz kod i wdróż swoją aplikację. Ma także integrację GitHub i VS Code, Emmet (ekspander skrótów) oraz mnóstwo innych funkcji, które docenią zarówno zaawansowani użytkownicy, jak i mniej doświadczeni koderzy. Prawdopodobnie jest to przesada, jeśli po prostu się bałaganisz, ale jeśli twój projekt po prostu nie pasuje już do CodePen i nie przeszkadza ci krzywa uczenia się, sprawdź CodeSandbox.

Repl.it

Ten plac zabaw / IDE nie jest na końcu, ponieważ jest moim najmniej ulubionym (na pewno nie): jest ponieważ Repl.it jest w swojej kategorii. Obsługuje tona języków, od Python do LOLKOD (preferowany język programowania Lolcats), ma obsługę kodu front-end i back-end, pozwala wdrażać witryny i aplikacje, zapewnia bardzo ścisłą integrację z GitHub, hostuje dużą i bardzo aktywną społeczność programistów oraz ma intuicyjny interfejs, który zaprzecza jak potężny jest naprawdę.

Place zabaw Code Replit

Repl.it ma wszystkie funkcje, których oczekujesz od innych placów zabaw na tej liście, od wspólnego kodowania do osadzania, i chociaż jest to przede wszystkim narzędzie do prototypowania i udostępniania kodu, zdecydowanie ma wystarczającą ilość soku dla większości małych i średnich projekty wielkości (o ile masz stałe połączenie z Internetem). To może być trochę więcej, jeśli robisz tylko projekty front-endowe lub dopiero zaczynasz programować, ale jeśli programujesz w ogóle regularnie, warto je zbadać.

Inne bardzo niesamowite place zabaw do sprawdzenia

Kod Place zabaw Flems

Place zabaw powyżej to moje osobiste rzeczy, ale jest ich o wiele więcej. Wszyscy są bardzo zdolni do wykonywania podstaw, a każdy z nich ma swój własny styl, który przemawia do innej potrzeby. JSFiddle wyraźnie zainspirował wiele z nich, więc jeśli szukasz alternatywy dla tej aplikacji, możesz ją znaleźć tutaj.

  • Liveweave: bardzo podobny do JSFiddle, ale bardziej zorientowany na projekt. Szczególnie wyróżnia się wbudowanym CSS, narzędziami do generowania kolorów i edytorem wektorów.
  • JSItor: alternatywa JSFiddle o bardzo podobnym odczuciu, a zwłaszcza aplikacje na Androida / iOS.
  • StackBlitz: doskonałe IDE oparte na przeglądarce, zbudowane z edytora Monaco, który obsługuje VS Code. Wygląda trochę jak CodeSandbox, ale jest nieco prostszy, ponieważ nie ma wsparcia dla backendów.
  • Flems: oklep, minimalistyczny plac zabaw. Idealny, jeśli chcesz coś z 0 bzdury i / lub wolne od zakłóceń.
  • JSBin: bardziej minimalistyczna wersja JSFiddle.
  • CSSDeck: bardzo prosty plac zabaw dla dzieci. Jeśli chcesz bezproblemowo przetestować kilka pomysłów w HTML / CSS i podstawowym JS, to dobry wybór.
  • ICECoder: jest to plac zabaw online z funkcjami porównywalnymi do wielu innych, ale jego główną zaletą jest to, że również program do pobrania, który działa w twojej przeglądarce, co zasadniczo czyni z niego IDE offline.
  • Plunker: narzędzie front-endowe, które pozwala na zabawę plikami nieco bardziej niż na niektórych innych placach zabaw i ma dobrą integrację pulpitu / GitHub.
  • Scrimba: okej, ten nie jest wyłącznie placem zabaw dla kodu, jest witryną z innowacyjną kombinacją edytora wideo / kodu, która zapewnia środowisko uczenia się i plac zabaw w tym samym czasie. Warto poszukać uczniów!
  • Web Maker: dobry plac zabaw z funkcjami offline, a nawet integracją CodePen!
  • Dabblet: całkiem prosty plac zabaw dla HTML / CSS / JS, ale ładny design.
  • PlayCode: ładny, podstawowy plac zabaw dla HTML / CSS / JS. Największy minus: denerwujący komunikat, który pojawia się co 60 sekund, informujący o konieczności przejścia na plan profesjonalny.

Jest za dużo! Który wybrać?

Tak, istnieje milion placów zabaw z kodem internetowym, ale nie zgub się, decydując między nimi i poświęcając tyle czasu, ile możesz poświęcić na robienie rzeczy! Jeśli masz w połowie przyzwoite wyobrażenie o tym, czego szukasz w środowisku kodowania online, po prostu zawęź to do dwóch lub trzech aplikacji, które mają te funkcje, spróbuj trochę z nimi pracować i przekonaj się, która z nich jest dla Ciebie ważna . Wiele z nich i tak ma funkcje integracji i / lub eksportu / importu GitHub, więc to nie tak, że na zawsze blokujesz sobie złą decyzję.

Osobiście używam CodePen do prostych statycznych stron i eksperymentów projektowych, a Glitch do większych projektów, choć doceniam CodeSandboxs VS Code Design i konsolę Repl.its. Jeśli przegapiłem Twój ulubiony plac zabaw lub zaniedbałem wspominając o niesamowitej funkcji, skomentuj poniżej, aby inni mogli ją znaleźć!

Czy ten artykuł jest przydatny?