Niezależnie od tego, czy jesteś początkującym programistą, czy doświadczonym programistą, place zabaw z kodem są przydatne podczas udostępniania i uczenia się z innymi.
Plac zabaw z kodem to usługa online, w której można pisać, kompilować (lub uruchamiać) i udostępniać kod innym osobom. Dają ci również możliwość rozwidlenia i zabawy z kodami innych osób.
Jeśli uczysz się tworzenia stron internetowych i ćwiczysz swoje umiejętności HTML lub CSS, korzystanie z placu zabaw kodu byłoby przydatne do tworzenia prostych stron internetowych online. Możesz także skorzystać z projektów trendów na tych platformach i wykorzystać je jako zasoby do nauki.
Z drugiej strony, jeśli jesteś profesjonalnym programistą stron internetowych i chcesz pochwalić się swoją pracą, place zabaw z kodem są do tego idealnym miejscem.
Najlepsze jest to, że większość placów zabaw z kodem ma bezpłatny poziom i możesz osadzać wyniki kodu w swojej witrynie.
Przyjrzyjmy się niektórym z nich!
Spis treści:
JSFiddle
JSFiddle to plac zabaw dla kodu, w którym możesz przetestować fragmenty kodu HTML, CSS i JavaScript. Pochodzi z aplikacji sprawdzającej koncepcję w 2009 roku i obecnie jest jednym z największych placów zabaw dla kodu.
Możesz utworzyć darmowe konto, zapisać wszystkie swoje skrzypce, a także rozwidlić fragmenty innych osób.
Kolejną imponującą rzeczą w JSFiddle są sesje współpracy. Możesz utworzyć sesję czatu audio podczas kodowania na skrzypcach.
Jeśli jesteś blogerem, który chce osadzić wyniki fragmentów kodu, a także ich kod źródłowy, JSFiddle byłby doskonałą opcją.
Oczywiście, w czasie pisania tego kodu, ten plac zabaw nie obsługuje innych popularnych języków programowania, takich jak Python, Go czy PHP, więc nie można oczekiwać, że zbudujesz na nim aplikację z pełnym stosem.
Cechy
- Darmowa platforma
- Minimalistyczny interfejs
- Obsługa HTML, CSS i JS
- Rozwidlaj dowolny publiczny fragment skrzypiec na platformie
- Współpracuj z innymi osobami za pomocą czatu audio bezpośrednio w witrynie
- Dobrze dokumentacja
Podobnie jak w przypadku większości tych platform, istnieje „dodatkowy”, który pomaga utrzymać je w dobrym stanie. Jeśli na nich polegasz, powinieneś rozważyć utworzenie kopii zapasowej.
kodowanie
kodowanie to nie tylko plac zabaw dla kodu, ale społeczność programistów, którzy chcą doskonalić swoje umiejętności i dzielić się najlepszą możliwą pracą.
Przez @Yakudoo
Z ponad 6 milionami użytkowników jest to jeden z najczęściej używanych edytorów kodu online do tworzenia frontendów. Jeśli zaczynasz uczyć się front-endu, znalezienie pomysłów i motywacji do kontynuowania nauki jest idealne.
A co z doświadczeniem deweloperskim?
Mogę ci powiedzieć, że Codepen ma przyjazny dla użytkownika edytor z trzema regulowanymi panelami do kodowania w HTML, CSS i JS. Codepen zawiera wbudowaną obsługę preprocesorów JavaScript i CSS, takich jak TypeScript i Sass. Ponadto, jeśli polegasz na pakiecie npm, możesz go zainstalować z panelu ustawień.
Cechy
- Opcjonalny pro plan
- Łatwy w użyciu edytor kodu
- Świetna społeczność
- Większość kodów jest typu open source
- Idealne miejsce do nauki frontendu
CodeSandbox
Prototypowanie strony internetowej może być trudnym zadaniem, jeśli nie masz odpowiedniej konfiguracji. Za pomocą CodeSandbox powinna być oczywistą decyzją, gdy priorytetem jest szybkie tworzenie stron internetowych.
Jak sama nazwa wskazuje, CodeSandbox zapewnia środowisko piaskownicy do tworzenia frontendów.
Od integracji z GitHub i narzędzi do debugowania po konfigurowalne środowisko przypominające kod VS — ten plac zabaw z kodem zapewnia wszystko, co potrzebne do rozpoczęcia kodowania w ciągu kilku sekund.
Jeśli Twoim głównym celem jest współpraca, wystarczy udostępnić łącze do piaskownicy, a będziesz gotowy do programowania w parach w czasie rzeczywistym.
Na przykład możesz przeglądać starannie wybraną listę najlepsze piaskownice.
Mogłoby zabraknąć czasu na wyliczanie wszystkich cech CodeSandbox, więc wspomnijmy o jego zabójczych funkcjach.
Cechy
- Integracja z GitHubem
- Oparty na edytorze Monaco, który napędza popularny edytor VScode
- Pierwsza platforma współpracy
- Wdróż do Vercel lub Netlify
- Narzędzia do debugowania
- Gotowe do użycia frameworki testowe
- wsparcie np
Nauka solo
Popularna platforma do nauki kodowania Nauka solo ma swoje własne kodowy plac zabaw do tworzenia stron internetowych.
Szczerze mówiąc, nie jest to w pełni funkcjonalne IDE, jak inne edytory online, które widzieliśmy w tym artykule, ale oferuje środowisko wolne od rozpraszania uwagi, w którym można pisać i uruchamiać kod.
To powinno wystarczyć, jeśli dopiero zaczynasz z programowaniem.
Kolejną fajną rzeczą w Sololearn jest świetna społeczność i obsługa kilku języków programowania — co jest całkiem dobre, jeśli chcesz bawić się innymi technologiami.
Cechy
- Bezpłatne korzystanie z konta Sololearn
- Prosty edytor kodu online
- Duża społeczność do udostępniania kodu
- Obsługa wielu języków
- Świetny ekosystem z kursami Sololearn
Podsumowując, plac zabaw Sololearn nie zawiera baterii, ale działa tak, jak powinien, a jeśli należysz już do milionów osób uczących się samodzielnie, powinieneś spróbować.
Kodowanie
Najlepsza rzecz o Kodowanie to obsługa wielu frameworków i bibliotek od razu po wyjęciu z pudełka oraz responsywny edytor kodu zorientowany na projektowanie.
Jeśli dopiero zaczynasz z nowym frameworkiem, takim jak React, Vue lub Angular, Codeply jest doskonałym miejscem do rozpoczęcia dzięki kompletnemu zestawowi początkowych szablonów i wspaniałej społeczności ponad 40 000 programistów.
Cechy
- Darmowa platforma
- Proste, ale proste dokumentacja
- Opłata jednorazowa pro plan
- Zawiera ponad 50 bibliotek
- Przetestuj swoją sieć w różnych rozdzielczościach ekranu
Powtórz
Powtórz jest prawdopodobnie najbardziej odpowiednim środowiskiem IDE online dla każdego programisty. Zawiera dosłownie wszystko, czego potrzebujesz do zbudowania, od prostej strony głównej po złożoną aplikację internetową korzystającą z dowolnej nowoczesnej biblioteki JS.
Dzięki Replit możesz kodować w ponad 50 językach, pisać aplikacje synchronicznie z innymi użytkownikami, testować swoje programy, integrować się z GitHub i uzyskać dostęp do jednej z największych społeczności programistów.
Mógłbym dosłownie zabraknąć papieru wymieniającego wszystkie funkcje Replit, więc przejdźmy do głównych.
Cechy
- Darmowy pakiet startowy lub 5$/miesiąc plan hakerski
- Tryb dla wielu graczy (programowanie w parze na żywo)
- Duża społeczność
- Obsługiwanych jest wiele języków
- Dostosowanie edytora
- Przycisk Uruchom: Uruchom projekt z dostosowywalnymi działaniami
- Tajne przechowywanie
- Hostowany kod
StackBlitz
Jeśli nie możesz żyć bez kodu VS, StackBlitz jest dla Ciebie odpowiednią opcją. Podobnie jak CodeSandbox, jest oparty na edytorze Monaco, który napędza ten popularny edytor kodu.
Po prostu zaloguj się na swoje konto GitHub i voila! Otrzymujesz dostęp do znajomego środowiska.
Oprócz doświadczenia w edytorze kodu, jest to całkiem solidny plac zabaw. Możesz użyć gotowych szablonów dla frameworków i bibliotek frontendowych, takich jak React, Vue, Angular, Svelte i Ionic.
Ale główną osobliwością tego narzędzia jest możliwość zabawy z frameworkami zaplecza, takimi jak Node.js, Next.js i GraphQL.
Cechy
- Bezpłatny plan „Kadet”.
- Doświadczenie kodu VS w przeglądarce. Obejmuje to Intellisense, wyszukiwanie projektów i nie tylko.
- Płynne (naprawdę płynne) doświadczenie w kodowaniu
- Edytor kodu offline (Hej! Może być przydatny, jeśli rozłączysz się na dzień lub dwa)
- Hostowany adres URL aplikacji: łatwe udostępnianie na żywo
Usterka
Nie mniej ważny, Usterka to wspólne środowisko programistyczne, które ułatwia tworzenie aplikacji internetowych.
Ma jeden z najprzyjemniejszych interfejsów do kodowania! Tylko spójrz:
Jeśli się zastanawiasz, tak, ma tryb ciemny.
Oprócz pięknego interfejsu Glitch jest używany przez miliony ze względu na jego użyteczność, programowanie w parach na żywo i przyjazną społeczność.
Możesz tworzyć wszelkiego rodzaju aplikacje z pełnym stosem, używając nie tylko HTML, CSS i JS, ale także Node.js (Backend), React lub jedenaście (o których istnieniu nie wiedziałem przed przejściem na stronę Glitches).
Cechy
- Darmowy plan z opcją aktualizacji
- Twórz pełne aplikacje w swojej przeglądarce
- Programowanie par na żywo
- Przyjemny interfejs
- Aplikacje startowe
- Remiksuj (lub forkuj) publiczne aplikacje innych osób
Wniosek
W dzisiejszych czasach można całkowicie zbudować dowolną aplikację internetową, korzystając z placu zabaw kodu, takiego jak te, które widzieliśmy powyżej. Nie musisz już pobierać ciężkich IDE na swój komputer, podczas gdy możesz budować, debugować, testować i wdrażać bez zamykania przeglądarki internetowej.
Jeśli nie masz pewności co do przejścia na korzystanie z tych narzędzi, sprawdź 10 najlepszych edytorów kodu (tych, które musisz zainstalować na swoim komputerze).