CodePen: HTML, CSS жана JavaScript курулган, сыналган, бөлүшкөн жана табылган

Codepen: Куруу, Сыноо жана Front-End Кодун табуу

Мазмунду башкаруу тутумунун бир көйгөйү - скрипт куралдарын сыноо жана өндүрүү. Көпчүлүк жарчылар үчүн мындай талап болбосо дагы, мен технологиялык басылма катары, башка адамдарга жардам берүү үчүн, иштеп жаткан сценарийлерди маал-маалы менен бөлүшүп турууну жактырам. Кантип колдонуу керектиги менен бөлүштүм Сырсөздүн бекемдигин текшерүү үчүн JavaScript, кантип электрондук почта дарегинин синтаксисин Regular Expressions менен текшерүү (Regex), жана жакында кошту онлайн сын-пикирлердин сатыкка тийгизген таасирин алдын-ала эсептөөчү калькулятор. Мен сайтка ондогон шаймандарды кошом деп үмүттөнөм, бирок WordPress мындай жарыялоого толук ылайыктуу эмес ... бул өнүгүү тутуму эмес, контент тутуму.

Ошентип, кичинекей сценарийлеримдин иштеши үчүн мен аларды колдоном CodePen. CodePen - HTML панели, CSS панели, JavaScript панели, Console жана натыйжада чыккан код жарыяланган тыкан уюштурулган курал. Ар бир панелде элементтердин үстүнөн чычканыңызда, мүмкүн болгон нерсени түшүнүү үчүн маалымат, ошондой эле оңдоо жана жазуу үчүн HTML, CSS жана JS түс коду бар.

CodePen бул социалдык өнүгүү чөйрөсү. Жүрөктүн түпкүрүндө ал браузерге код жазууга жана анын натыйжаларын куруп жатканда көрө аласыз. Ар кандай жөндөмдөрдү иштеп чыгуучулар үчүн пайдалуу жана боштондукка чыгаруучу онлайн-код редактору, өзгөчө код жазууну үйрөнүп жаткан адамдарга мүмкүнчүлүк берет. CodePen биринчи кезекте HTML, CSS, JavaScript сыяктуу алдыңкы тилдерге жана ошол нерселерге айланган синтаксистерди алдын-ала иштеп чыгууга басым жасайт.

CodePen жөнүндө

CodePen менен, мен бардык керектүү жумуштарды аткара алдым эсептегичти жарыялоо Мен сайтка жайгаштырылдым. CodePenдеги көпчүлүк чыгармалар жалпыга ачык жана ачык булак болуп саналат. Алар башка адамдар жана жамаат өз ара байланышта боло турган, жөнөкөй жүрөктөн, комментарий калтыруудан, өз муктаждыктары үчүн алмаштырып, өзгөртө алган жандуу нерселер.

CodePen - онлайн сын-пикирлердин сатыкка тийгизген таасирин божомолдоочу калькулятор

CodePen менен, сиз иштеп жатканда панелдер сол, оң же ылдый жагында болушун кааласаңыз, анда көрүнүшүңүздү өзгөртө аласыз… же HTMLны жаңы өтмөктө көрө аласыз. Жанаша көрүү укмуштуудай жакшы иштейт, анткени сиз көрүү панелинин өлчөмүн жөндөп аласыз.

Ар бир иштеп жаткан сценарийиңизди Пенске жайгаштырып, Долбоорго бириктирип (көп файлдуу редактор), ал тургай коллекцияларды түзсөңүз болот. Бул негизинен алдыңкы код үчүн иштөөчү портфолио сайты, анда сиз башка авторлорду ээрчип, жалпыга ачык долбоорлорду өзүңүзгө киргизип, өзгөртсөңүз болот, жана кыйынчылыктар аркылуу кызыктуу нерселерди жасоону үйрөнсөңүз болот.

GitHub Gist катары сактап, zip файлга экспорттой аласыз, жада калса кыналган ушул сыяктуу макалада калем:

Пендин кара
Онлайн сын-пикирлердин болжолдонгон сатык таасири
by Douglas Karr (@douglaskarr)
on CodePen.


Pen редакторунун чектөөлөрүнүн бири - бул коддун көлөмү. Сиз эч качан бул көйгөйгө туш болбойсуз, анткени редактор жүздөгөн, ал тургай миңдеген саптар менен иштеши керек. Бирок алар 5,000 - 10,000 же андан ашык сап сабына кире баштаганда, редактор иштебей калганын көрө аласыз. Бирок, башка жакта жайгаштырылган стилдик баракчаларга же JavaScriptке тышкы шилтемелерди кошо аласыз!

Мен сизди катталууга үндөйт элем. Сиз алардын жумалык электрондук почтасына жазыласыз жана ошондой эле RSS түрмөгүңүзгө канал кошуп, жаңы чыккан калемдерди көрө аласыз. Эгерде сиз ошол жерден коомдук калемдерди издеп же издей баштасаңыз, анда сиз укмуштуудай долбоорлорду таба аласыз ... колдонуучулар абдан таланттуу!

ээрчүү Douglas Karr Codepenде

Акы төлөнүүчү CodePen Pro иштеши же командалары үчүн бир топ кошумча мүмкүнчүлүктөрдү сунуштайт - кызматташуу, процесстер, активдерди жайгаштыруу, жеке көз караштар, жада калса өз домениңиз же субдомен менен долбоорлор. Албетте, CodePen Github интеграциясы менен мыкты репозиторийди камсыз кылат, анда сиздин бүт командаңыз иштей алат. Эгерде сиз жөн гана мен сыяктуу жөнөкөй кодду сынап көргүңүз келсе, CodePen бул баа жеткис курал.

Эмне деп ойлойсуң?

Бул сайт спам азайтуу Akismet колдонот. Сиздин комментарий маалымат кандайча иштелишин Үйрөнүү.