CodePen: Itinayo, Subukan, Ibahagi at Tuklasin ang HTML, CSS, at JavaScript

Codepen: Bumuo, Sumubok, at Tuklasin ang Front-End Code

Ang isang hamon sa isang sistema ng pamamahala ng nilalaman ay ang pagsubok at paggawa ng mga tool sa script. Habang hindi iyon isang kinakailangan para sa karamihan sa mga publisher, bilang isang publication ng teknolohiya, nais kong magbahagi ng mga gumaganang script paminsan-minsan upang matulungan ang ibang mga tao. Ibinahagi ko kung paano gamitin JavaScript upang suriin ang lakas ng password, Paano suriin ang syntax ng email address sa Mga Regular na Pagpapahayag (Regex), at pinakahuling idinagdag na ito calculator upang mahulaan ang epekto sa benta ng mga online na pagsusuri. Inaasahan kong magdagdag ng dose-dosenang mga tool sa site ngunit ang WordPress ay hindi eksaktong kaaya-aya sa pag-publish tulad nito ... ito ay isang sistema ng nilalaman, hindi isang sistema ng pag-unlad.

Kaya, upang magamit ang aking maliit na mga script nasisiyahan ako sa paggamit CodePen. Ang CodePen ay isang maayos na nakaayos na tool na may isang HTML panel, isang CSS panel, isang JavaScript panel, Console, at isang nai-publish ng nagresultang code. Ang bawat panel ay may impormasyon kapag na-mouse mo ang mga elemento upang maunawaan mo kung ano ang posible, pati na rin ang color-coding ng iyong HTML, CSS, at JS upang matulungan kang mag-edit at magsulat ng mas madali.

Ang CodePen ay isang kapaligiran sa pag-unlad ng lipunan. Sa gitna nito, pinapayagan kang magsulat ng code sa browser, at makita ang mga resulta nito habang bumubuo ka. Isang kapaki-pakinabang at nagpapalaya ng editor ng online code para sa mga developer ng anumang kasanayan, at partikular na nagbibigay kapangyarihan sa mga taong natututo mag-code. Pangunahin na nakatuon ang CodePen sa mga wikang pang-front tulad ng HTML, CSS, JavaScript, at preprocessing syntaxes na naging mga bagay na iyon.

Tungkol sa CodePen

Sa CodePen, nagawa ko ang lahat ng gawaing kinakailangan ilathala ang calculator Naka-embed ako sa site. Karamihan sa mga nilikha sa CodePen ay pampubliko at bukas na mapagkukunan. Ang mga ito ay mga nabubuhay na bagay na maaaring makipag-ugnay ng ibang mga tao at ng pamayanan, mula sa isang payak na puso, hanggang sa pag-iwan ng komento, sa forking at pagbabago para sa kanilang sariling mga pangangailangan.

CodePen - calculator para sa paghula ng epekto sa pagbebenta ng mga online na pagsusuri

Sa CodePen, maaari mong baguhin ang iyong view kung nais mong ang mga pane ay nasa kaliwa, kanan, o ibaba habang nagtatrabaho ka… o tingnan ang HTML sa isang bagong tab. Ang tabi-tabi ng pagtingin ay gumagana nang hindi kapani-paniwala upang masubukan ang iyong mga tumutugong setting dahil maaari mong ayusin ang laki ng natatanaw na pane.

Maaari mong ayusin ang bawat isa sa iyong mga gumaganang script sa Mga Pens, pagsamahin ang mga ito sa Mga Proyekto (multi-file editor), o kahit na bumuo ng mga koleksyon. Karaniwan ito ay isang gumaganang portfolio site para sa front-end code kung saan maaari mong sundin ang iba pang mga may-akda, tinidor ang iba pang mga proyekto na ibinahagi sa publiko sa iyong sarili upang mabago, at kahit na malaman kung paano gumawa ng ilang mga nakakatuwang bagay sa pamamagitan ng mga hamon.

Maaari kang makatipid bilang isang GitHub Gist, mag-export sa zip file, at pantay -embed na ang panulat sa isang artikulong tulad nito:

Tingnan ang Panulat
Hinulaang Epekto sa Pagbebenta Ng Mga Online na Review
by Douglas Karr (@douglaskarr)
on CodePen.


Ang isa sa mga limitasyon ng editor ng Pen ay ang dami ng code. Maaaring hindi ka makatakbo sa isyung ito, dahil ang editor ay dapat na pagmultahin ng daan-daan o kahit libu-libong mga linya ng code. Ngunit kapag sinimulan nila ang pagpindot sa 5,000 - 10,000 o higit pang mga linya ng code, makikita mo ang editor na magsisimulang mabigo. Gayunpaman, maaari kang magdagdag ng mga panlabas na sanggunian sa mga styleheet o JavaScript na naka-host sa ibang lugar!

Hikayatin kita na mag-sign up. Mag-subscribe ka sa kanilang lingguhang email at maaari mo ring idagdag ang feed sa iyong RSS feed upang makita mo ang bagong nai-publish na mga panulat. At, kung sinimulan mong maghanap o mag-browse sa mga pampublikong panulat doon, mahahanap mo ang ilang hindi kapani-paniwalang mga proyekto ... ang mga gumagamit ay may talento!

sundin Douglas Karr sa Codepen

Ang bayad na bersyon, CodePen Pro, ay nag-aalok ng isang toneladang mga karagdagang tampok para sa pinahusay na pag-andar o mga koponan - kasama ang pakikipagtulungan, proseso, pagho-host ng asset, pribadong mga pagtingin, at kahit na nagpakalat ng mga proyekto gamit ang iyong sariling domain o subdomain. At, syempre, nagbibigay ang CodePen ng isang mahusay na imbakan na may pagsasama ng Github kung saan maaaring gumana ang iyong buong koponan. Kung nais mo lamang subukan ang ilang simpleng code tulad ko, ang CodePen ay isang napakahalagang tool.

Ano sa tingin ninyo?

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.