8 Zabawa w kodowanie do nauki tworzenia stron internetowych

Niezależnie od tego, czy jesteś początkującym programistą, czy doświadczonym programistą, place zabaw kodu są przydatne podczas udostępniania i uczenia się z innymi.

Plac zabaw dla kodu to usługa online, w której można pisać, kompilować (lub uruchamiać) i udostępniać kod innym. Dają również możliwość rozwidlenia i zabawy z kodami innych.

Jeśli uczysz się tworzenia stron internetowych i ćwiczysz swoje umiejętności HTML lub CSS, korzystanie z placu zabaw kodu przyda się do tworzenia prostych stron internetowych online. Możesz także skorzystać z projektów trendów na tych platformach i wykorzystać je jako zasoby edukacyjne.

Z drugiej strony, jeśli jesteś profesjonalnym programistą internetowym i chcesz pochwalić się swoją pracą, place zabaw dla kodu są idealnym miejscem do tego.

Najlepsze jest to, że większość platform z kodem ma warstwę bezpłatną i możesz osadzić wyniki kodu w swojej witrynie.

Przyjrzyjmy się niektórym z nich!

JSFiddle

JSFiddle to plac zabaw dla kodu, w którym możesz testować fragmenty kodu HTML, CSS i JavaScript. Pochodzi z aplikacji do weryfikacji koncepcji w 2009 roku, a teraz jest jednym z największych programów do tworzenia 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 kodu źródłowego, JSFiddle będzie doskonałą opcją.

Oczywiście w czasie pisania ten plac zabaw kodu nie obsługuje innych popularnych języków programowania, takich jak Python, Go lub PHP, więc nie można oczekiwać, że zbudujesz na nim aplikację z pełnym stosem.

Cechy

• Darmowa platforma
• Minimalistyczny interfejs
• Wsparcie dla HTML, CSS i JS
• Rozwiduj dowolny fragment publicznego fidel na platformie
• Współpracuj z innymi osobami za pomocą czatu audio bezpośrednio na stronie
• Dobra dokumentacja

Codepen

Codepen to nie tylko plac zabaw dla kodu, ale społeczność programistów, którzy chcą doskonalić swoje umiejętności i dzielić się najlepszą pracą, jaką mogą.

Z ponad 6 milionami użytkowników jest jednym 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 programistycznym?

Mogę 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 plan pro
• Łatwy w użyciu edytor kodu
• Świetna społeczność
• Większość codepenów jest open-source
• Idealne miejsce do ćwiczenia frontendu

CodeSandbox

Prototypowanie strony internetowej może być trudnym zadaniem, jeśli nie masz odpowiedniej konfiguracji. Korzystanie z CodeSandbox powinno być prostą decyzją, gdy priorytetem jest szybkie tworzenie stron internetowych.

Jak sama nazwa wskazuje, CodeSandbox zapewnia środowisko piaskownicy do programowania frontendu.

Od integracji GitHub i narzędzi do debugowania po konfigurowalne środowisko przypominające kod VS, ten plac zabaw dla kodu zapewnia wszystko, aby rozpocząć kodowanie w kilka sekund.

Jeśli Twoim głównym celem jest współpraca, wszystko, czego potrzebujesz, to udostępnienie linku do piaskownicy i będziesz gotowy do programowania par w czasie rzeczywistym.

Na przykład możesz przeglądać ręcznie wybraną listę najlepszych piaskownic.

Mógłbym zabraknąć czasu na wymienienie wszystkich cech CodeSandbox, więc wspomnijmy o jego zabójczych funkcjach.

Cechy

• Integracja z GitHub
• Oparty na edytorze Monaco, który obsługuje popularny edytor VScode
• Współpraca pierwsza platforma
• Wdróż w Vercel lub Netlify
• Narzędzia do debugowania
• Gotowe do użycia frameworki testowe
• wsparcie npm

Nauka indywidualna

Popularna platforma do nauki kodowania Sololearn ma własny plac zabaw z kodowaniem do tworzenia stron internetowych.

Szczerze mówiąc, nie jest to w pełni funkcjonalne środowisko IDE, jak inne edytory online, które widzieliśmy w tym artykule, ale oferuje wolne od rozpraszania środowisko, w którym można pisać i uruchamiać kod.

To powinno wystarczyć, jeśli dopiero zaczynasz programować.

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 Twojego kodu
• Wsparcie dla wielu języków
• Świetny ekosystem z kursami Sololearn

Podsumowując, plac zabaw dla kodu Sololearn nie zawiera baterii, ale działa tak, jak powinien, a jeśli jesteś już częścią milionów uczących się w pojedynkę, powinieneś spróbować.

Kodeksu

Najlepszą rzeczą w Codeply jest wsparcie dla wielu frameworków i bibliotek po wyjęciu z pudełka oraz responsywny, zorientowany na projektowanie edytor kodu.

Jeśli dopiero zaczynasz z nowym frameworkiem, takim jak React, Vue lub Angular, Codeply jest świetnym miejscem do rozpoczęcia ze względu na kompletny zestaw szablonów startowych i wspaniałą społeczność ponad 40 000 programistów.

Cechy

• Darmowa platforma
• Prosta, ale przejrzysta dokumentacja
• Jednorazowy abonament pro
• Obejmuje ponad 50 bibliotek
• Przetestuj swoją sieć w różnych rozdzielczościach ekranu

Powtórz

Replit 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 uzyskiwać dostęp do jednej z największych społeczności programistów.

Mógłbym dosłownie zabraknąć papieru wymieniającego wszystkie funkcje Replita, więc przejdźmy do głównych.

Cechy

• Darmowy pakiet startowy lub plan hakerski za 5$/miesiąc
• Tryb wieloosobowy (programowanie pary na żywo)
• Duża społeczność
• Obsługa wielu języków
• Dostosowanie edytora
• Przycisk Uruchom: Uruchom projekt z konfigurowalnymi akcjami
• Tajne miejsce do przechowywania
• Kod hostowany

StackBlitz

Jeśli nie możesz żyć bez kodu VS, StackBlitz jest odpowiednią opcją dla Ciebie. Podobnie jak CodeSandbox, opiera się na edytorze Monaco , który obsługuje ten popularny edytor kodu.

Po prostu zaloguj się na swoje konto GitHub i voila! Otrzymasz dostęp do znajomego środowiska.

Poza doświadczeniem edytora kodu, jest to całkiem solidny plac zabaw. Możesz użyć gotowych do użycia szablonów dla frontendowych frameworków i bibliotek, takich jak React, Vue, Angular, Svelte i Ionic.

Ale główną osobliwością tego narzędzia jest możliwość zabawy z frameworkami backendowymi, takimi jak Node.js, Next.js i GraphQL.

Cechy

• Bezpłatny plan „Kadet”
• Środowisko VS Code w Twojej przeglądarce. Obejmuje to Intellisense, wyszukiwanie projektów i nie tylko.
• Płynne (naprawdę płynne) kodowanie
• Edytor kodu offline (Hej! może się przydać, jeśli rozłączysz się na dzień lub dwa)
• Adres URL hostowanej aplikacji: łatwe udostępnianie na żywo

Usterka

Wreszcie, Glitch to wspólne środowisko programistyczne, które ułatwia tworzenie aplikacji internetowej.

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 na żywo i przyjazną społeczność.

Możesz tworzyć dowolne aplikacje z pełnym stosem, używając nie tylko HTML, CSS i JS, ale także Node.js (Backend), React lub Eleveny (o których istnieniu nie wiedziałem, zanim wszedłem na stronę Glitches).

Cechy

• Bezpłatny abonament z opcją uaktualnienia
• Twórz aplikacje z pełnym stosem w swojej przeglądarce
• Programowanie pary na żywo
• Przyjemny interfejs
• Aplikacje startowe
• Remiksuj (lub forkuj) publiczne aplikacje innych osób

Wniosek

W dzisiejszych czasach możesz 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 środowisk IDE na swój komputer, a jednocześnie 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 (te, które musisz zainstalować na swoim komputerze).