Home-theater-designers
Rozpoczęcie tworzenia stron internetowych w JavaScript może być frustrującym procesem, ale istnieją narzędzia, które to ułatwiają.
CodePen.io to środowisko kodowania w przeglądarce przeznaczone zarówno do nauki kodowania, jak i szybkiego prototypowania pomysłów przy minimalnym wysiłku.
W tym artykule przyjrzymy się niektórym funkcjom witryny i temu, jak mogą one pomóc Ci stać się lepszym programistą.
Co to jest CodePen?
CodePen zapewnia coś, co nazywa się długopis , który składa się z trzech różnych okien HTML, CSS i JavaScript oraz okienka podglądu, które aktualizuje się w czasie rzeczywistym podczas pisania.
Chociaż jest często używany przez twórców stron internetowych do prezentowania pomysłów na strony internetowe, jest to również świetne miejsce do nauki podstaw tworzenia stron internetowych. Oto najważniejsze funkcje, które musisz znać podczas korzystania z CodePen.
1. Preprocesory
Preprocesory to interpretowane lub kompilowane języki zaprojektowane w celu uproszczenia kodowania. Mogą dodawać funkcje do języka dla wygody i ułatwiać odczytywanie kodu. W tworzeniu stron internetowych do szybkiego tworzenia czystego kodu używa się kombinacji preprocesorów dla HTML, CSS i JavaScript.
Jeśli uczysz się tworzenia stron internetowych i chcesz wypróbować różne preprocesory, CodePen umożliwia przełączanie preprocesorów w locie i zobaczenie kodu, do którego się kompiluje w czasie rzeczywistym. Każdy z trzech paneli w aplikacji CodePen ma rozwijane menu w prawym górnym rogu. Wybierz Wyświetl skompilowany kod HTML/CSS/JS aby zobaczyć, jak kod zostanie zinterpretowany.
W tym długopisie stworzyliśmy prostą witrynę za pomocą Haml oraz Sass do stylizacji tekstu nagłówka. Wybieranie Zobacz skompilowane pokazuje standardowy HTML i CSS. W tym przykładzie różnica jest minimalna. Jednak podczas nauki nowego języka przydatne może być sprawdzenie, jak wstępnie przetworzony kod wygląda po skompilowaniu.
2. Zasoby zewnętrzne
Oprócz natywnej obsługi preprocesorów, CodePen obsługuje zewnętrzne skrypty. To sprawia, że jest to idealne miejsce do praktycznego korzystania z bibliotek do osobistych projektów lub do odświeżenia popularnych bibliotek aplikacji internetowych, takich jak React .
Aby dodać bibliotekę zewnętrzną, otwórz Ustawienia na swoim piórze i przejdź do zakładki JavaScript. Zasoby można dodawać na dwa sposoby: ręcznie dodając adres URL zasobu lub wyszukując.
Wykorzystaliśmy tę funkcję w naszym okładce artykułu animacja internetowa z mo.js , wraz z przetwarzaniem wstępnym Babel.
Zobacz pióro Przykład Mojs MUO przez Iana ( @Bardoctorus ) na CodePen.
Tak, długopisy CodePen mogą być osadzone! Śmiało i kliknij okienko podglądu powyżej, aby zobaczyć wyniki samouczka Mo.js!
Inne pisaki można importować podobnie jak biblioteki zewnętrzne. Oznacza to, że możesz pobierać elementy z wcześniej napisanych długopisów, aby używać ich jako modułów w swoich nowych długopisach. Adama użytkownika CodePen Prosta ankieta długopis jest tego dobrym przykładem.
3. Szablony
Kiedy uczysz się nowych koncepcji lub testujesz nowe pomysły, często używasz podobnych komponentów i powtarzasz te same kroki na początku. CodePen umożliwia tworzenie pisaków szablonowych, które mogą wyciąć powtórzenia i pozwolić od razu przejść do sedna.
Aby utworzyć szablon, otwórz nowe pióro, wprowadź zmiany i wybierz Szablon suwak w menu ustawień.
https://vimeo.com/221428690
Do niedawna wolni użytkownicy mogli tworzyć tylko trzy szablony, ale teraz wszyscy użytkownicy mogą mieć tyle szablonów na swoim koncie, ile chcą. Idealny do rozpoczęcia nowego pomysłu z minimalnym opóźnieniem!
4. Współpraca modowa
Umiejętność współpracy i nauczania za pomocą CodePen może być jego największym atutem. Istnieje już wiele wspaniałych narzędzi do współpracy dla programistów, ale podejście CodePen jest proste i intuicyjne.
Zawodowi użytkownicy CodePen mogą stworzyć nowe pióro i otworzyć je na współpracę w ramach Zmień widok menu. Spowoduje to zmianę łącza pióra w zaproszenie do udostępniania, które może pomieścić większą liczbę osób w zależności od planu CodePen Pro.
jak zatrzymać laptop przed przegrzaniem
W tym przypadku napisałem HTML, podczas gdy znajomy aktualizował CSS w czasie rzeczywistym, z oznaczonym kursorem zidentyfikowanym, gdzie pracują.
Każdy, kto ma link, może dołączyć i korzystać z funkcji czatu w przeglądarce, niezależnie od tego, czy jest użytkownikiem pro, czy nawet posiada konto CodePen. Pod warunkiem, że automatyczne zapisywanie jest wyłączone, tylko właściciel pióra może zapisać wszelkie zmiany, dzięki czemu jest to bezpieczny sposób na otwarcie kodu dla innych bez ryzyka.
Otwarty charakter tego trybu jest korzystny dla początkujących, ponieważ możesz zaprosić prawie każdego do swojego pióra, aby poprowadził Cię przez trudną koncepcję. Jest to również przydatny tryb, dzięki któremu można się dobrze poznać, ponieważ jest idealny do przeprowadzania rozmów kwalifikacyjnych z potencjalnymi pracownikami i już został w ten sposób wykorzystany profesjonalnie !
5. Tryb profesorski
Tryb Profesor umożliwia jednemu użytkownikowi Pro hostowanie pokoju, w którym tylko on może edytować kod. Od 10 do 100 użytkowników może oglądać i czatować w zależności od planu Pro gospodarza.
Tryb Profesor pozwala na elastyczność między nauką w klasie a nauką na odległość lub połączeniem obu. Korzystanie z trybu Profesora umożliwi osobom z tyłu klasy doświadczenie tych z przodu, a nauczycielowi pokazanie poprawek błędów, które będą aktualizowane w czasie rzeczywistym.
6. Tryb prezentacji
Tryb prezentacji został zaprojektowany, jak można się spodziewać, z myślą o prezentowaniu kodu. Aplikacja wyświetla się w uproszczonym widoku, zaprojektowanym do pracy z rzutnikami. CodePen zoptymalizował tryb prezentacji do użytku na połączeniach internetowych o niższej prędkości i słabszym sprzęcie.
Sprytni czytelnicy mogli już zdać sobie sprawę, że darmowa wersja CodePen zapewni dokładnie tę funkcję, chociaż tryb Pro ma kilka przydatnych funkcji. Układ, rozmiar czcionki i motywy można szybko zmieniać w locie, aby dopasować je do prawie każdego ustawienia, a wyświetlenie łącza do pióra powoduje wyświetlenie skróconego adresu URL o rozmiarze dużym, co ułatwia udostępnianie projektu.
Te niewielkie zmiany, wraz z możliwością skalowania okna podglądu, aby pasowało do tego, co pokazujesz, sprawiają, że tryb prezentacji jest idealny zarówno dla nauczycieli, jak i programistów prezentujących pomysły współpracownikom. Tryb prezentacji to również przejrzysty i prosty sposób na przedstawienie kodu, jeśli znajdziesz się na rozmowie kwalifikacyjnej na stanowisko programistyczne.
7. Wzory
Poszukiwanie inspiracji jest znacznie łatwiejsze dzięki kolekcji CodePen z Wzorce projektowe .
Każda kategoria to zbiór przykładowych kodów dostarczonych przez użytkowników CodePen dla określonych zadań. Szukasz sposobu na stworzenie dynamicznych przycisków dla swojej witryny? Akordeonowe menu? Istnieje wiele kategorii, które pasują do niemal każdego przykładu.
Te wzorce są również świetnym sposobem na poznanie działania przycisków interaktywnych i różnych sposobów działania dynamicznych interfejsów użytkownika.
8. Emmet
Mrówka , wcześniej znany jako Zen Coding, jest powszechnie uważany za największą oszczędność czasu podczas tworzenia HTML i CSS. Wtyczka pobiera część kodu, który często piszesz, i konwertuje je na proste skróty.
Zobaczenie tego w akcji jest lepsze niż wyjaśnianie, więc zastosuj zwykłą konfigurację dla dokumentu HTML:
Dodanie tego do każdego dokumentu HTML zostało zredukowane do dwóch czynności. Używając Emmeta, wpisz ! i uderz w Patka klucz. Magia!
Emmet jest standardowo aktywny w CodePen i jest szczególnie przydatny, jeśli próbujesz nauczyć się nowej koncepcji w JavaScript i potrzebujesz szybko utworzyć wspierający HTML i CSS.
Rozwijaj za pomocą CodePen, aby uzyskać lepsze wrażenia
CodePen to doskonałe narzędzie dla twórców stron internetowych, a dziedzina stale się rozwija. JavaScript to świetny język do nauki na przyszłość w tworzeniu stron internetowych.
przenieś aplikację do katalogu głównego karty SD
Dostępnych jest kilka świetnych samouczków i kursów dla osób, które chcą zacząć korzystać z JavaScript , a CodePen to świetne środowisko do przetestowania nowych umiejętności.
Udział Udział Ćwierkać E-mail 8 najlepszych stron internetowych do pobierania audiobooków za darmoAudiobooki są doskonałym źródłem rozrywki i są znacznie łatwiejsze do strawienia. Oto osiem najlepszych stron internetowych, z których można je pobrać za darmo.
Czytaj dalej Powiązane tematy- Programowanie
- HTML
- Tworzenie stron internetowych
- JavaScript
- CSS
Ian Buckley jest niezależnym dziennikarzem, muzykiem, performerem i producentem wideo mieszkającym w Berlinie w Niemczech. Kiedy nie pisze ani nie występuje na scenie, majstruje przy elektronice DIY lub kodowaniu w nadziei, że zostanie szalonym naukowcem.
Więcej od Iana BuckleyaZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować