CodePen: buduj, testuj, udostępniaj i odkrywaj HTML, CSS i JavaScript

Codepen: buduj, testuj i odkrywaj kod front-end

Jednym z wyzwań związanych z systemem zarządzania treścią jest testowanie i tworzenie narzędzi skryptowych. Chociaż nie jest to wymagane dla większości wydawców, jako publikacja technologiczna lubię od czasu do czasu udostępniać działające skrypty, aby pomóc innym ludziom. Podzieliłem się, jak używać JavaScript, aby sprawdzić siłę hasła, jak sprawdź składnię adresu e-mail za pomocą wyrażeń regularnych (Regex), a ostatnio dodał to kalkulator do przewidywania wpływu recenzji online na sprzedaż. Mam nadzieję, że dodam do serwisu dziesiątki narzędzi, ale WordPress nie sprzyja takim publikacjom… to system treści, a nie system rozwoju.

Tak więc, aby moje małe skrypty działały, lubię ich używać CodePen. CodePen to starannie zorganizowane narzędzie z panelem HTML, panelem CSS, panelem JavaScript, konsolą i publikacją powstałego kodu. Każdy panel zawiera informacje po najechaniu kursorem myszy na elementy, aby zrozumieć, co jest możliwe, a także kodowanie kolorami kodu HTML, CSS i JS, aby ułatwić edycję i pisanie.

CodePen to środowisko rozwoju społecznego. W istocie umożliwia pisanie kodu w przeglądarce i oglądanie wyników podczas budowania. Przydatny i wyzwalający edytor kodu online dla programistów o dowolnych umiejętnościach, szczególnie ułatwiający naukę kodowania. CodePen koncentruje się głównie na językach frontonu, takich jak HTML, CSS, JavaScript i składniach przetwarzania wstępnego, które zamieniają się w te rzeczy.

O CodePen

Dzięki CodePen mogłem wykonać całą niezbędną pracę opublikuj kalkulator Osadziłem na stronie. Większość kreacji na CodePen jest publicznych i open source. Są żywymi istotami, z którymi inni ludzie i społeczność mogą wchodzić w interakcje, od prostego serca, przez pozostawienie komentarza, po rozwidlenie i zmianę dla własnych potrzeb.

CodePen - kalkulator do prognozowania wpływu recenzji online na sprzedaż

Dzięki CodePen możesz zmienić widok, jeśli chcesz, aby okienka znajdowały się po lewej, prawej lub dolnej stronie podczas pracy… lub wyświetlić kod HTML w nowej karcie. Widok obok siebie działa niesamowicie dobrze do testowania responsywnych ustawień, ponieważ możesz dostosować rozmiar widocznego okienka.

Możesz zorganizować każdy ze swoich skryptów roboczych w pióra, połączyć je w projekty (edytor wielu plików), a nawet zbudować kolekcje. Jest to w zasadzie działająca witryna z portfolio dla kodu front-end, w której możesz śledzić innych autorów, rozwidlać inne publicznie udostępnione projekty do swoich własnych, aby je modyfikować, a nawet nauczyć się robić fajne rzeczy poprzez wyzwania.

Możesz zapisać jako GitHub Gist, wyeksportować w pliku zip, a nawet osadzać pióro w artykule takim jak ten:

Zobacz pióro
Przewidywany wpływ recenzji online na sprzedaż
by Douglas Karr (@douglaskarr)
on CodePen.


Jednym z ograniczeń edytora Pen jest ogromna ilość kodu. Możesz nigdy nie natknąć się na ten problem, ponieważ edytor powinien sobie poradzić z setkami, a nawet tysiącami linii kodu. Ale kiedy zaczną trafiać od 5,000 do 10,000 lub więcej wierszy kodu, zobaczysz, że edytor zaczyna zawodzić. Możesz jednak dodać zewnętrzne odniesienia do arkuszy stylów lub JavaScript hostowanych gdzie indziej!

Zachęcam do rejestracji. Zostaniesz zasubskrybowany ich cotygodniowy e-mail, a także możesz dodać kanał do swojego kanału RSS, abyś mógł zobaczyć nowo opublikowane pióra. A jeśli zaczniesz tam szukać lub przeglądać publiczne pióra, znajdziesz niesamowite projekty… użytkownicy są całkiem utalentowani!

Śledź nas w social mediach Douglas Karr na Codepen

Wersja płatna, CodePen Pro, oferuje mnóstwo dodatkowych funkcji dla ulepszonej funkcjonalności lub zespołów - w tym współpracę, procesy, hosting zasobów, prywatne widoki, a nawet wdrożone projekty z własną domeną lub subdomeną. I oczywiście CodePen zapewnia świetne repozytorium z integracją z Github, w którym może pracować cały Twój zespół. Jeśli chcesz po prostu przetestować prosty kod tak jak ja, CodePen jest nieocenionym narzędziem.

Co o tym myślisz?

Ta strona używa Akismet do redukcji spamu. Dowiedz się, jak przetwarzane są dane komentarza.