CodePen: HTML, CSS, JavaScript-ийг барьсан, туршсан, хуваалцсан, нээсэн

Codepen: Front-End Code бүтээх, турших, нээх

Агуулгын менежментийн системтэй тулгардаг нэг бэрхшээл бол скрипт хэрэгслийг туршиж, үйлдвэрлэх явдал юм. Энэ нь ихэнх хэвлэн нийтлэгчдэд тавигдах шаардлага биш боловч технологийн хувьд би бусад хүмүүст туслах зорилгоор скриптүүдээ үе үе хуваалцаж байх дуртай. Би хэрхэн ашиглахаа хуваалцсан Нууц үгийн хүчийг шалгахын тулд JavaScript, яаж ердийн илэрхийлэл бүхий имэйл хаягийн синтаксийг шалгах (Режекс), мөн хамгийн сүүлд үүнийг нэмсэн онлайн тоймуудын борлуулалтын үр нөлөөг урьдчилан тооцоолох тооцоолуур. Би сайт дээр хэдэн арван хэрэгслийг нэмнэ гэж найдаж байна, гэхдээ WordPress нь иймэрхүү нийтлэхэд яг тохирохгүй байна ... энэ бол хөгжүүлэлтийн систем биш агуулгын систем юм.

Тиймээс жижиг скриптүүдээ ажиллуулахын тулд ашиглах дуртай байдаг Кодепен. CodePen бол HTML самбар, CSS самбар, JavaScript самбар, Консол болон үр дүнгийн кодыг нийтэлсэн цэвэр зохион байгуулалттай хэрэгсэл юм. Самбар бүрт элементүүдийг хулганаар оруулах үед мэдээлэл байгаа бөгөөд ингэснээр юу болж болохыг ойлгох боломжтой бөгөөд HTML, CSS, JS-ийн өнгөт кодчилол нь танд засварлах, бичихэд хялбар болно.

CodePen бол нийгмийн хөгжлийн орчин юм. Энэ нь зүрх сэтгэлдээ хөтөч дээр код бичих, бүтээх явцдаа түүний үр дүнг харах боломжийг олгодог. Аливаа ур чадварыг хөгжүүлэгчид, ялангуяа код сурч буй хүмүүст хүчирхэгжүүлэхэд ашигтай, чөлөөлөгдсөн онлайн кодын редактор. CodePen нь HTML, CSS, JavaScript, эдгээр зүйл болж хувирдаг синтаксууд гэх мэт урд талын хэлнүүд дээр голчлон анхаарлаа төвлөрүүлдэг.

CodePen-ийн тухай

CodePen-ийн тусламжтайгаар би шаардлагатай бүх ажлыг хийж чадсан тооцоолуурыг нийтлэх Би сайтад суулгасан. CodePen дээрх ихэнх бүтээлүүд олон нийтэд нээлттэй, нээлттэй эх сурвалжууд байдаг. Тэд бол бусад хүмүүс, олон нийттэй харилцаж болох энгийн зүйлүүд бөгөөд энгийн зүрх сэтгэлээс сэтгэгдэл үлдээх, өөрсдийн хэрэгцээнд зориулж өөрчлөх, өөрчлөх.

CodePen - онлайн тоймуудын борлуулалтын үр нөлөөг урьдчилан тооцоолох тооцоолуур

CodePen-ийн тусламжтай та ажлынхаа хажуугаар зүүн, баруун, доод талдаа байхыг хүсвэл харахаа өөрчилж болно ... эсвэл HTML-г шинэ таб дээр үзэх боломжтой. Харааны цонхны хэмжээг тохируулах боломжтой тул таны хариу үйлдэл хийх тохиргоог шалгахын тулд зэрэгцүүлэн харах нь гайхалтай сайн ажилладаг.

Та өөрийн ажиллаж буй скрипт бүрийг Pens болгон зохион байгуулж, тэдгээрийг Projects (олон файлын редактор) болгон нэгтгэх эсвэл бүр цуглуулга хийх боломжтой. Энэ нь үндсэндээ бусад зохиогчдыг дагаж, бусадтай хуваалцсан төслүүдийг өөр дээрээ өөрчилж өөрчлөх, сорилт бэрхшээлээр хэрхэн хөгжилтэй зүйлс хийхийг сурах боломжтой урд портод зориулсан портфолио сайт юм.

Та GitHub Gist хэлбэрээр хадгалах, zip файл болгон экспортлох, тэр ч байтугай оруулах иймэрхүү нийтлэл дэх үзэг:

Үзэг үзнэ үү
Онлайн тоймд урьдчилан таамагласан борлуулалтын нөлөө
by Douglas Karr (@ douglaskarr)
on Кодепен.


Pen редакторын хязгаарлалтуудын нэг бол маш их хэмжээний код юм. Редактор нь хэдэн зуун эсвэл хэдэн мянган мөр кодтой байх ёстой тул та хэзээ ч энэ асуудалтай тулгарахгүй байж магадгүй юм. Гэхдээ тэд 5,000 - 10,000 ба түүнээс дээш мөрийг цохиж эхлэхэд редактор доголдож эхлэхийг харах болно. Гэсэн хэдий ч, та хэв маягийн хуудас эсвэл бусад газарт байрлуулсан JavaScript-т гадны лавлагаа нэмж болно!

Би чамайг бүртгүүлэхийг зөвлөж байна. Та тэдний долоо хоног тутмын имэйлийг захиалах бөгөөд RSS тэжээл дээрээ тэжээл нэмж оруулах боломжтой тул шинээр хэвлэгдсэн үзэгнүүдийг харах боломжтой болно. Хэрэв та олон нийтийн үзэг хайж эсвэл хайж эхэлбэл гайхалтай төслүүдийг олох болно ... хэрэглэгчид нь маш авъяаслаг хүмүүс юм!

дагаарай Douglas Karr Codepen дээр

Төлбөртэй хувилбар болох CodePen Pro нь сайжруулсан функциональ байдал эсвэл багуудад зориулсан олон тооны нэмэлт функцуудыг санал болгодог. Мэдээжийн хэрэг, CodePen нь таны бүх баг ажиллах боломжтой Github интеграцтай гайхалтай репозитороор хангадаг. Хэрэв та зүгээр л над шиг энгийн кодыг туршиж үзэхийг хүсч байвал CodePen бол үнэлж баршгүй хэрэгсэл юм.

Чи юу гэж бодож байна?

Энэ сайт нь спамыг багасгахын тулд Akismet-ийг ашигладаг. Таны өгөгдлийг хэрхэн боловсруулдаг талаар суралц.