CodePen: Вграден, тестирај, сподели и откриј HTML, CSS и JavaScript

Codepen: Изгради, тестирај и откриј го кодот од предната страна

Еден предизвик со системот за управување со содржини е тестирање и производство на скриптирани алатки. Иако тоа не е услов за повеќето издавачи, како технолошка публикација, сакам да споделувам работни скрипти од време на време за да им помагам на другите луѓе. Споделив како се користи JavaScript за да ја проверите јачината на лозинката, како да проверете ја синтаксата на е-пошта со редовни изрази (Regex), и неодамна го додаде ова калкулатор за да го предвиди влијанието на продажбата на прегледите преку Интернет. Се надевам дека ќе додадам десетици алатки на страницата, но 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 или повеќе линии на код, ќе видите дека уредникот започнува да не успева. Сепак, можете да додадете надворешни препораки на стилови или JavaScript хостирани на друго место!

Јас би ве охрабрил да се регистрирате. Beе бидете претплатени на нивната неделна е-пошта и исто така можете да ја додавате информацијата во RSS-каналот за да можете да ги гледате ново објавените пенкала. И, ако започнете да пребарувате или прелистувате јавни пенкала таму, ќе најдете неколку неверојатни проекти… корисниците се прилично талентирани!

Следете Douglas Karr на Кодепен

Платената верзија, CodePen Pro, нуди тон дополнителни функции за подобрена функционалност или тимови - вклучувајќи соработка, процеси, хостирање средства, приватни прегледи, па дури и распоредени проекти со ваш сопствен домен или поддомен. И, се разбира, CodePen обезбедува одлично складиште со интеграција на Github каде што може да работи целиот ваш тим. Ако сакате само да испробате некој едноставен код каков што сум јас, CodePen е непроценлива алатка.

Што мислите?

Оваа страница користи Akismet за намалување на спам. Научете како се обработува вашиот коментар.