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, экспартаваць у паштовы файл і нават ўстаўляць ручка ў такім артыкуле:

Глядзіце пяро
Прагназуемы ўплыў продажаў на агляды Інтэрнэту
by Douglas Karr (@douglaskarr)
on CodePen.


Адным з абмежаванняў рэдактара Pen з'яўляецца вялікі аб'ём кода. Вы ніколі не натыкнецеся на гэтую праблему, бо рэдактар ​​павінен мець сотні ці нават тысячы радкоў кода. Але калі яны пачнуць наносіць 5,000 10,000 - XNUMX XNUMX і больш радкоў кода, вы ўбачыце, што рэдактар ​​пачынае выходзіць з ладу. Аднак вы можаце дадаць знешнія спасылкі на табліцы стыляў альбо JavaScript, размешчаныя ў іншым месцы!

Я заклікаю вас падпісацца. Вы будзеце падпісаны на іх штотыднёвыя паведамленні электроннай пошты, а таксама можаце дадаваць канал у RSS-канал, каб вы маглі бачыць нядаўна апублікаваныя ручкі. І калі вы пачнеце там шукаць альбо праглядаць публічныя ручкі, вы знойдзеце некалькі неверагодных праектаў ... карыстальнікі даволі таленавітыя!

прытрымлівацца Douglas Karr на Codepen

Платная версія CodePen Pro прапануе масу дадатковых функцый для паляпшэння функцыянальнасці альбо каманд, уключаючы супрацоўніцтва, працэсы, хостынг актываў, прыватныя прагляды і нават разгорнутыя праекты з уласным даменам або субдаменам. І, вядома, CodePen забяспечвае выдатнае сховішча з інтэграцыяй Github, дзе можа працаваць уся ваша каманда. Калі вы проста хочаце праверыць нейкі просты код, як я, CodePen - гэта неацэнны інструмент.

Што вы думаеце?

Гэты сайт выкарыстоўвае Akismet для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.