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. Udostępniłem 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ę dodać dziesiątki narzędzi na stronie, ale WordPress nie do końca sprzyja takim publikacjom… to system treści, a nie system programistyczny.

Tak więc, aby moje małe skrypty działały, lubię ich używać CodePen. CodePen to zgrabnie zorganizowane narzędzie z panelem HTML, panelem CSS, panelem JavaScript, konsolą i opublikowanym kodem wynikowym. Każdy panel zawiera informacje po najechaniu myszą 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 panele znajdowały się po lewej, prawej lub na dole podczas pracy… lub wyświetlić kod HTML w nowej karcie. Widok obok siebie działa niesamowicie dobrze, aby przetestować ustawienia responsywne, ponieważ możesz dostosować rozmiar widocznego okienka.

Możesz organizować każdy ze swoich skryptów roboczych w pióra, łączyć je w projekty (edytor wielu plików), a nawet tworzyć kolekcje. Jest to w zasadzie działająca witryna portfolio dla kodu front-endowego, w której możesz śledzić innych autorów, tworzyć własne projekty udostępnione publicznie, aby je modyfikować, a nawet nauczyć się robić zabawne 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 (@douglasaaaaaaaaaaaaaaaaaaaaaaaaaaaaa nie..! !)
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. Będziesz subskrybować ich cotygodniowe wiadomości e-mail, a także możesz dodać kanał do swojego kanału RSS, aby zobaczyć nowo opublikowane pióra. A jeśli zaczniesz tam szukać lub przeglądać publiczne pisaki, znajdziesz niesamowite projekty… użytkownicy są całkiem utalentowani!

Obserwuj Douglas Karr na Codepen

Wersja płatna, CodePen Pro, oferuje mnóstwo dodatkowych funkcji poprawiających funkcjonalność lub zespoły – 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ą Github, w którym może pracować cały zespół. Jeśli chcesz 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.