10 wskazówek Codepen dla początkujących

Codepen to bardzo łatwa i popularna strona długopis w dół działające kombi kodowanie frontonu od razu. Jeśli nie wiesz, czym jest Codepen lub nie słyszałeś o tym wcześniej, to w zasadzie coś takiego internetowy kod źródłowy plac zabaw (nazwijmy to OSCP zabrzmieć nerwowo) dla trzech muszkieterów kodowania front-end; HTML, CSS i JavaScript.

Istnieją inne podobne OSCP, takie jak JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen jest zdecydowanie jednym z najbardziej znanych deweloperów front-end. Bez zbędnych ceregieli wskoczmy w prawo podstawowe i przydatne wskazówki do korzystania z Codepen.

1. Uruchom przycisk

Jeśli nie jesteś fanem sposobu, w jaki wyjście twojego kodu w Codepen jest odświeżane podczas możesz pisać zrezygnować z “Podgląd automatycznej aktualizacji” opcja, i zamiast tego zdobądź przycisk Uruchom. Po kliknięciu będziesz mógł zobaczyć i zaktualizować dane wyjściowe swojego kodu kiedykolwiek chcesz.

Jest to również świetna opcja, jeśli pracujesz z kodem, którego wyjście przechodzi wiele zmian układu, i maluje się za każdym razem, gdy jest aktualizowany, co powoduje powolność.

2. Zwiększanie / zmniejszanie liczby

Zwiększ lub zmniejsz liczby w kodzie w Codepen bez wpisywania nowych numerów. Wszystko, co musisz zrobić, to użyć kombinacji klawiszy Ctrl / Cmd i Strzałki w górę iw dół.

3. Wiele kursorów

Możesz umieścić kursory na wiele punktów w kodzie źródłowym, następnie wpisz lub edytuj we wszystkich tych punktach w tym samym czasie. Działa to tylko wtedy, gdy wprowadzasz te same informacje i zmniejsza potrzebę wklejania kopii. Przytrzymaj klawisz Ctrl / Cmd podczas klikania w tych wielu punktach.

4. Różne kolorowe komunikaty konsoli

The Konsola Obiekt JavaScript ma jeszcze kilka metod oprócz log() pozwolić ci drukuj rzeczy w konsoli internetowej.

Możesz użyć info (), ostrzec() i błąd() metody dla Informacja, ostrzeżenie i błąd. Zazwyczaj konsole internetowe pokolorowują te wiadomości na podstawie typu lub wyświetlają obok nich odpowiednią ikonę (np. Znak ostrzegawczy dla komunikatu ostrzegawczego) dla łatwiejszego rozpoznania.

Codepen ma własną konsolę które możesz otworzyć, klikając przycisk Konsola w lewym dolnym rogu. Jest idealny do szybkiego sprawdzania komunikatów konsoli bez konieczności otwierania konsoli przeglądarki. Ta konsola rozróżnia różne typy komunikatów konsoli z różnymi kolorami tła.

5. Eksportuj

Po zapisaniu a długopis (pojedyncza jednostka Codepen) może być eksportowana jako plik ZIP z całym kodem HTML, CSS i JS w plikach. Istnieje również możliwość zapisania pióra jako istota Github (repozytorium Git). Możesz znaleźć przycisk Eksportuj w prawym dolnym rogu każdego pióra.

6. Znajdź i zamień

Znaleźć zamiennik - niezbędna operacja dla ludzi, którzy mają tendencję do zmiany nazwy swoich zmiennych co jakiś czas. Ctrl / Cmd + Shift + F to kombinacja klawiszy otworzyć “Znaleźć zamiennik” dialog.

7. Emmet Tab Trigger

Czy wiesz o wyzwalaczach tabulacji do kodowania Emmeta? Emmet to narzędzie produktywności dla programistów front-end, które pozwala na wpisz kod szkieletu, który zostanie później rozszerzony. Aby to zrobić w Codepen, po prostu wpisz odpowiedni skrót do edytora, naciśnij klawisz Tab, a pełny kod pojawi się natychmiast. Dostępne tylko dla HTML w Codepen.

8. Uzyskaj indywidualne pliki kodu

Jeśli korzystasz z opcji eksportu, jak wspomniano wcześniej, otrzymasz wszystkie trzy pliki (HTML, CSS i JS) swojego pióra. Ale jeśli jesteś zainteresowany tylko jeden lub dwa z tych plików, i chcesz je pobrać osobno, istnieje również opcja tego w Codepen.

Po zalogowaniu się do Codepen przejdź do swojego pióra i kliknij przycisk Zmień widok w prawym górnym rogu. Na dole listy rozwijanej zobaczysz bezpośrednie linki do pobierania poszczególnych plików.

9. Sprawdź zmienne JavaScript

Ponieważ konsola JavaScript Codepen łączy się z JavaScriptem zapisanym w piórze, możesz go również użyć do szybkiego przetestowania JavaScript. Ta funkcja jest szczególnie przydatna w sprawdzanie zmiennych JS, tak jak ty nie trzeba wstawiać dodatkowych komunikatów konsoli ani alertów do oryginalnego kodu wyłącznie do celów testowych.

10. Przekręć pióro w szablon

Jeśli masz tendencję do uruchamiania większości długopisów za pomocą ten sam zestaw kodu, możesz użyć szablonu do zapisz powtarzający się kod. Aby zamienić pióro w szablon, zaznacz opcję Szablon w menu Ustawienia. Kiedy później utworzysz nowe pióro, możesz zacznij od zapisanego szablonu klikając strzałkę w dół po prawej stronie przycisku Nowe pióro. Zostanie otwarta lista rozwijana ze wszystkimi zapisanymi szablonami do wyboru.