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 колдонот. Сиздин комментарий маалымат кандайча иштелишин Үйрөнүү.