CodePen: gebou, toets, deel en ontdek HTML, CSS en JavaScript
Een uitdaging met 'n inhoudbestuurstelsel is die toets en vervaardiging van teksinstrumente. Alhoewel dit vir die meeste uitgewers nie 'n vereiste is nie, hou ek daarvan om van tyd tot tyd werkskrifte te deel om ander mense te help. Ek het vertel hoe om dit te gebruik JavaScript om die wagwoordsterkte na te gaan, Hoe om te kyk na die e-posadresintaksis met Regular Expressions (regex), en dit onlangs bygevoeg sakrekenaar om die verkoopsimpak van aanlynresensies te voorspel. Ek hoop om tientalle instrumente op die webwerf toe te voeg, maar WordPress is nie juis bevorderlik vir publisering soos hierdie nie ... dit is 'n inhoudstelsel, nie 'n ontwikkelingstelsel nie.
Dus, om my klein skrifte te laat werk, gebruik ek dit graag CodePen. CodePen is 'n netjies georganiseerde instrument met 'n HTML-paneel, 'n CSS-paneel, 'n JavaScript-paneel, 'n konsole en 'n gepubliseerde kode. Elke paneel bevat inligting as u die muis oor elemente hou sodat u verstaan wat moontlik is, sowel as kleurkodering van u HTML, CSS en JS om u te help redigeer en skryf.
CodePen is 'n sosiale ontwikkelingsomgewing. In sy hart laat dit u toe om kode in die blaaier te skryf en die resultate daarvan te sien terwyl u bou. 'N Nuttige en bevrydende aanlyn-kode-redakteur vir ontwikkelaars van enige vaardigheid, en veral bemagtigend vir mense wat leer kodeer. CodePen fokus hoofsaaklik op front-end tale soos HTML, CSS, JavaScript en voorverwerkende sintaksis wat in hierdie dinge verander.
Oor CodePen
Met CodePen kon ek al die nodige werk doen om publiseer die sakrekenaar Ek het die webwerf ingebed. Die meeste skeppings op CodePen is openbare en open source. Dit is lewende dinge waarmee ander mense en die gemeenskap kan kommunikeer, van 'n eenvoudige hart tot die kommentaar lewer, om te vurk en te verander vir hul eie behoeftes.
Met CodePen kan u u siening verander as u wil hê dat die ruite links, regs of onder moet wees terwyl u werk ... of die HTML in 'n nuwe oortjie wil sien. Die sy-aan-sy-aansig werk ongelooflik goed om u responsiewe instellings te toets, aangesien u die grootte van die sigbare venster kan aanpas.
U kan elkeen van u werkskrifte in penne organiseer, dit in projekte (multi-lêer-redakteur) kombineer, of selfs versamelings uitbou. Dit is basies 'n werkende portefeuljewebwerf vir front-end-kode waar u ander outeurs kan volg, ander openbaar gedeelde projekte in u eie kan instel om aan te pas en selfs te leer hoe om 'n paar prettige dinge te doen deur middel van uitdagings.
U kan as 'n GitHub Gist stoor, uitvoer in zip-lêer en selfs embed die pen in 'n artikel soos hierdie:
Sien die pen Voorspelde verkoopsimpak van aanlynresensies by Douglas Karr (@douglaskarr) Op CodePen.
Een van die beperkings van die Pen-redakteur is die groot hoeveelheid kode. U kan hierdie probleem nooit raakloop nie, aangesien die redakteur goed moet wees met honderde of selfs duisende reëls kode. Maar as hulle 5,000 - 10,000 of meer reëls kode begin slaan, sien u dat die redakteur begin misluk. U kan egter eksterne verwysings na stylblaaie of JavaScript wat elders aangebied word, byvoeg!
Ek wil u aanmoedig om aan te meld. U sal op hul weeklikse e-pos ingeteken word en kan ook die voer by u RSS-feed voeg, sodat u nuut gepubliseerde penne kan sien. En as u daar begin soek of deur die openbare penne gaan blaai, sal u ongelooflike projekte vind ... die gebruikers is redelik talentvol!
Die betaalde weergawe, CodePen Pro, bied 'n klomp addisionele funksies vir verbeterde funksionaliteit of spanne - insluitend samewerking, prosesse, bate-hosting, private sienings en selfs ontplooide projekte met u eie domein of subdomein. En natuurlik bied CodePen 'n uitstekende bewaarplek met Github-integrasie waar u hele span kan werk. As u net 'n eenvoudige kode wil toets soos ek is, is CodePen 'n waardevolle hulpmiddel.
