CodePen: Konstruita, Provu, Kunhavigu kaj Malkovru HTML, CSS kaj JavaScript

Codepen: Konstruu, Provu kaj Malkovru Front-End-Kodon

Unu defio kun enhava mastruma sistemo estas provi kaj produkti skriptitajn ilojn. Kvankam tio ne estas postulo por plej multaj eldonistoj, kiel teknologia publikaĵo, mi ŝatas dividi laborajn skriptojn de tempo al tempo por helpi aliajn homojn. Mi dividis kiel uzi Ĝavoskripto por kontroli fortan pasvorton, kiel kontrolu sintakson de retpoŝta adreso per Regulaj Esprimoj (Regex), kaj lastatempe aldonis ĉi tion kalkulilo por antaŭdiri la vendan efikon de interretaj recenzoj. Mi esperas aldoni dekojn da iloj en la retejo, sed WordPress ne ĝuste taŭgas por eldoni tiel ... ĝi estas enhava sistemo, ne evoluiga sistemo.

Do, por ekfunkciigi miajn malgrandajn skriptojn, mi ŝatas uzi CodePen. CodePen estas nete organizita ilo kun HTML-panelo, CSS-panelo, JavaScript-panelo, Konzolo kaj eldonita de la rezulta kodo. Ĉiu panelo havas informojn, kiam vi trolas elementojn, por ke vi komprenu, kio eblas, kaj ankaŭ kolorkodadon de via HTML, CSS kaj JS por helpi vin redakti kaj verki pli facile.

CodePen estas socia disvolva medio. En ĝia koro, ĝi permesas al vi skribi kodon en la retumilo, kaj vidi la rezultojn de ĝi dum vi konstruas. Utila kaj liberiga interreta kodredaktilo por programistoj de iu ajn kapablo, kaj aparte poviga por homoj lernantaj kodigi. CodePen fokusiĝas ĉefe al antaŭaj lingvoj kiel HTML, CSS, JavaScript kaj antaŭprilaborado de sintaksoj, kiuj fariĝas tiuj aferoj.

Pri CodePen

Kun CodePen, mi povis fari la tutan laboron necesan publikigu la kalkulilon Mi enigis en la retejon. Plej multaj kreaĵoj ĉe CodePen estas publikaj kaj malfermfontaj. Ili estas vivaĵoj, kun kiuj aliaj homoj kaj la komunumo povas interagi, de simpla kuraĝo, ĝis lasado de komento, ĝis forko kaj ŝanĝo por siaj propraj bezonoj.

CodePen - kalkulilo por antaŭdiri la vendan efikon de interretaj recenzoj

Kun CodePen, vi povas ŝanĝi vian vidpunkton se vi ŝatus ke la fenestroj estu maldekstre, dekstre aŭ malsupre dum vi laboras ... aŭ vidi la HTML-on en nova langeto. La flank-al-flanka vido funkcias nekredeble bone por testi viajn respondemajn agordojn, ĉar vi povas ĝustigi la grandecon de la videbla fenestro.

Vi povas organizi ĉiun el viaj laboraj skriptoj en Plumojn, kombini ilin en Projektoj (plurdosieraj redaktilo) aŭ eĉ konstrui kolektojn. Ĝi estas esence laboranta biletujo por front-end-kodo, kie vi povas sekvi aliajn aŭtorojn, enkonduki aliajn publike komunajn projektojn por modifi ilin, kaj eĉ lerni kiel fari iujn amuzajn aferojn per defioj.

Vi povas konservi kiel GitHub Gist, eksporti en zip-dosiero, kaj eĉ enkorpigi la plumo en tia artikolo:

Vidu la Plumon
Antaŭvidita Vendefiko De Interretaj Recenzoj
by Douglas Karr (@douglaskarr)
on CodePen.


Unu el la limigoj de la pluma redaktilo estas la ampleksa kodo. Vi eble neniam trafos ĉi tiun numeron, ĉar la redaktoro devas esti bona kun centoj aŭ eĉ miloj da kodlinioj. Sed kiam ili ekos 5,000 - 10,000 aŭ pli da linioj de kodo, vi vidos, ke la redaktoro komencas malsukcesi. Tamen vi povas aldoni eksterajn referencojn al stilfolioj aŭ JavaScript gastigitaj aliloke!

Mi kuraĝigus vin registriĝi. Vi estos abonita al ilia semajna retpoŝto kaj ankaŭ povas aldoni la fluon al via RSS-fluo, por ke vi povu vidi nove eldonitajn plumojn. Kaj, se vi komencas serĉi aŭ trarigardi la publikajn plumojn tie, vi trovos iujn nekredeblajn projektojn ... la uzantoj estas tre talentaj!

sekvi Douglas Karr sur Codepen

La pagita versio, CodePen Pro, ofertas multajn kromajn funkciojn por plibonigita funkciado aŭ teamoj - inkluzive kunlaboron, procezojn, aktiva gastigado, privataj vidpunktoj, kaj eĉ deplojitajn projektojn kun via propra domajno aŭ subdomajno. Kaj, kompreneble, CodePen provizas bonegan deponejon kun Github-integriĝo, kie via tuta teamo povas labori. Se vi nur volas elprovi iun simplan kodon kiel mi, CodePen estas valorega ilo.

Kion vi pensas?

Ĉi tiu retejo uzas Akismeton por redukti spamon. Lernu, kiel via komento datiĝas.