Jeśli jesteś programistą webowym lub programistą aplikacji, z pewnością znasz usługi CodePen. Z tego powodu w NeoTeo przedstawimy Ci najlepsze porady, aby wyciągnąć jak najwięcej z tej platformy. Dzięki nim będziesz mógł edytować i tworzyć projekty w HTML, CSS i JavaScript w czasie rzeczywistym.
Ale dla tych, którzy nie znają możliwości CodePen, przygotujemy krótkie wprowadzenie, abyś mógł włączyć je do swoich narzędzi deweloperskich. CodePen to platforma do testowania, edytowania, ćwiczenia i udostępniania małych projektów webowych lub frontendowych (penów) w HTML, CSS i JavaScript (obsługuje metalangue), dzięki czemu Ty i społeczność możecie wprowadzać ulepszenia na bieżąco.
Przycisk Run
Jeśli należysz do użytkowników, którzy nie są zadowoleni z podglądu kodu podczas jego tworzenia, możesz wyłączyć opcję Auto Update Preview i zamiast tego otrzymać przycisk Uruchom (Run). Dzięki temu za każdym razem, gdy zaktualizujesz projekt, klikniesz przycisk i odświeżysz podgląd.
Settings – Behavior – (wyłącz) AUTO UPDATE PREVIEW
Zalecamy to w przypadku ciężkich projektów z dużą ilością kodu i mieszanką języków.
Eksportowanie
Po zapisaniu Pena będziesz mógł wyeksportować go jako plik ZIP ze wszystkimi językami (HTML, CSS i JS). Istnieje również opcja, aby zapisać jako Github gist.
Export - Save as GitHub Gist
W ten sposób będziesz mieć swoją pracę jako repozytorium Github.
Wyszukiwanie i zamiana
Wyszukiwanie i zamiana to jedna z najważniejszych czynności na platformie, ponieważ programiści bardzo często zmieniają nazwy, zmienne i inne elementy.
Ctrl + Shift + F (włączasz wyszukiwanie) – wpisujesz słowo do zastąpienia w polu Replace – Enter – wpisujesz to, co chcesz wstawić, w polu Witch – Enter – następnie klikasz Yes i All.
Uzyskiwanie poszczególnych plików kodu
Jeśli wyeksportujesz Pena w konwencjonalny sposób, otrzymasz trzy pliki (HTML, CSS i JS), ale jeśli potrzebujesz jednego z nich, musisz skorzystać z tej akcji.
Change View – Direct Code Links: tutaj wybierasz język, jaki chcesz – i możesz go zapisać z karty przeglądarki.
Pen jako szablon
Jeśli używasz prawie wszystkich swoich Penów z tym samym szablonem, możesz aktywować każdy Pen tworzony z tym szablonem, którego zwykle używasz. Ale najpierw musisz zapisać go jako szablon.
Settings – Wpisz tytuł w Pen – Wybierz opcję Template
Mamy nadzieję, że porady, które Ci udzieliliśmy, pomogą Ci zoptymalizować pracę w CodePen, abyś mógł wyciągnąć więcej z platformy i ulepszyć swoje projekty.
Jeśli chcesz, abyśmy przygotowali drugą część artykułu, czekamy na Twoje komentarze.
