CodePen: Изграден, тестван, споделян и откриващ HTML, CSS и JavaScript

Codepen: Създаване, тестване и откриване на преден код

Едно предизвикателство със системата за управление на съдържанието е тестването и производството на скриптови инструменти. Въпреки че това не е изискване за повечето издатели, като технологична публикация обичам да споделям от време на време работещи скриптове, за да помогна на други хора. Споделих как да използвам JavaScript за проверка на силата на паролата, как да проверете синтаксиса на имейл адреса с регулярни изрази (Регулярно изражение) и наскоро добави това калкулатор за прогнозиране на въздействието върху продажбите на онлайн отзиви. Надявам се да добавя десетки инструменти на сайта, но WordPress не е особено благоприятен за публикуване по този начин ... това е система за съдържание, а не система за разработка.

Така че, за да работят малките ми сценарии, ми харесва да използвам CodePen. CodePen е добре организиран инструмент с HTML панел, CSS панел, JavaScript панел, конзола и публикуван от получения код. Всеки панел има информация, когато премествате курсора на мишката върху елементи, така че да разберете какво е възможно, както и цветово кодиране на вашия HTML, CSS и JS, за да ви помогне да редактирате и пишете по-лесно.

CodePen е среда за социално развитие. В основата си тя ви позволява да пишете код в браузъра и да виждате резултатите от него, докато изграждате. Полезен и освобождаващ онлайн редактор на код за разработчици на всякакви умения и особено овластяващ за хората, които се учат да кодират. CodePen се фокусира предимно върху интерфейсни езици като HTML, CSS, JavaScript и синтаксиси за предварителна обработка, които се превръщат в тези неща.

За CodePen

С CodePen успях да свърша цялата необходима работа публикувайте калкулатора Вградих в сайта. Повечето творения в CodePen са публични и с отворен код. Те са живи същества, с които други хора и общността могат да си взаимодействат, от просто сърдечно, до оставяне на коментар, до разклоняване и промяна за собствените си нужди.

CodePen - калкулатор за прогнозиране на въздействието върху продажбите на онлайн отзиви

С CodePen можете да промените изгледа си, ако искате панелите да са отляво, отдясно или отдолу, докато работите ... или да прегледате HTML в нов раздел. Страничният изглед работи невероятно добре, за да тества вашите отзивчиви настройки, тъй като можете да регулирате размера на видимия прозорец.

Можете да организирате всеки от вашите работещи скриптове в писалки, да ги комбинирате в проекти (многофайлов редактор) или дори да изграждате колекции. По принцип това е работещ портфолио сайт за преден код, където можете да следвате други автори, да разклонявате други публично споделени проекти във ваши собствени, за да ги модифицирате и дори да научите как да правите някои забавни неща чрез предизвикателства.

Можете да запишете като GitHub Gist, да експортирате в zip файл и дори Закрепвам писалката в статия като тази:

Вижте писалката
Прогнозирано въздействие върху продажбите на онлайн отзивите
by Douglas Karr (@douglaskarr)
on CodePen.


Едно от ограниченията на редактора на писалката е огромният обем код. Възможно е никога да не срещнете този проблем, тъй като редакторът трябва да се справи със стотици или дори хиляди редове код. Но когато започнат да удрят 5,000 - 10,000 XNUMX или повече реда код, ще видите, че редакторът започва да се проваля. Можете обаче да добавяте външни препратки към таблици със стилове или JavaScript, хоствани другаде!

Бих ви насърчил да се регистрирате. Ще бъдете абонирани за техния седмичен имейл и можете също да добавите емисията към вашата RSS емисия, така че да можете да видите новоиздадените писалки. И ако започнете да търсите или разглеждате публичните химикалки там, ще откриете невероятни проекти ... потребителите са доста талантливи!

Следвай ни Douglas Karr на Codepen

Платената версия CodePen Pro предлага много допълнителни функции за подобрена функционалност или екипи - включително сътрудничество, процеси, хостинг на активи, частни изгледи и дори внедрени проекти със собствен домейн или поддомейн. И, разбира се, CodePen предоставя чудесно хранилище с интеграция на Github, където целият ви екип може да работи. Ако просто искате да изпробвате някакъв прост код като мен, CodePen е безценен инструмент.

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.