CodePen: gebouwd, test, deel en ontdek HTML, CSS en JavaScript

Codepen: front-endcode bouwen, testen en ontdekken

Een uitdaging met een contentmanagementsysteem is het testen en produceren van scripttools. Hoewel dat voor de meeste uitgevers geen vereiste is, deel ik als technologiepublicatie graag af en toe werkende scripts om andere mensen te helpen. Ik heb gedeeld hoe te gebruiken JavaScript om de wachtwoordsterkte te controleren, hoe controleer de syntaxis van het e-mailadres met reguliere expressies (regex), en laatst toegevoegd calculator om de verkoopimpact van online beoordelingen te voorspellen. Ik hoop tientallen tools aan de site toe te voegen, maar WordPress is niet bepaald bevorderlijk om op deze manier te publiceren ... het is een inhoudssysteem, geen ontwikkelingssysteem.

Dus om mijn kleine scripts te laten werken, gebruik ik graag CodePen. CodePen is een netjes georganiseerde tool met een HTML-paneel, een CSS-paneel, een JavaScript-paneel, Console en een gepubliceerde code van de resulterende code. Elk paneel bevat informatie wanneer u met de muis over elementen beweegt, zodat u begrijpt wat er mogelijk is, evenals kleurcodering van uw HTML, CSS en JS om u te helpen gemakkelijker te bewerken en te schrijven.

CodePen is een omgeving voor sociale ontwikkeling​ In wezen stelt het u in staat om code in de browser te schrijven en de resultaten ervan te zien terwijl u bouwt. Een nuttige en bevrijdende online code-editor voor ontwikkelaars van elke vaardigheid, en vooral voor mensen die leren coderen. CodePen richt zich voornamelijk op front-end-talen zoals HTML, CSS, JavaScript en voorverwerkingssyntaxis die in die dingen veranderen.

Over CodePen

Met CodePen kon ik al het werk doen dat daarvoor nodig was publiceer de rekenmachine Ik heb ingebed in de site. De meeste creaties op CodePen zijn openbaar en open source. Het zijn levende dingen waar andere mensen en de gemeenschap mee kunnen omgaan, van een eenvoudig hartje tot het achterlaten van een opmerking, tot het forceren en veranderen voor hun eigen behoeften.

CodePen - calculator voor het voorspellen van de verkoopimpact van online beoordelingen

Met CodePen kunt u uw weergave wijzigen als u wilt dat de panelen aan de linkerkant, rechterkant of onderkant zijn terwijl u werkt ... of bekijk de HTML in een nieuw tabblad. De zij-aan-zij-weergave werkt ongelooflijk goed om uw responsieve instellingen te testen, aangezien u de grootte van het zichtbare deelvenster kunt aanpassen.

U kunt al uw werkscripts in pennen ordenen, ze combineren in projecten (editor voor meerdere bestanden) of zelfs verzamelingen opbouwen. Het is eigenlijk een werkende portfoliosite voor front-end code waar je andere auteurs kunt volgen, andere publiekelijk gedeelde projecten in je eigen project kunt splitsen en zelfs kunt leren hoe je leuke dingen kunt doen door middel van uitdagingen.

U kunt opslaan als een GitHub Gist, exporteren in zip-bestand en zelfs insluiten de pen in een artikel als dit:

Zie de pen
Voorspelde verkoopimpact van online beoordelingen
by Douglas Karr (@douglaskarr)
on CodePen.


Een van de beperkingen van de Pen-editor is de enorme hoeveelheid code. U zult dit probleem misschien nooit tegenkomen, aangezien de editor in orde zou moeten zijn met honderden of zelfs duizenden regels code. Maar wanneer ze 5,000 - 10,000 of meer regels code beginnen te raken, zul je zien dat de editor begint te falen. U kunt echter externe verwijzingen toevoegen aan stylesheets of JavaScript die elders worden gehost!

Ik zou je aanmoedigen om je aan te melden. U wordt geabonneerd op hun wekelijkse e-mail en kunt de feed ook toevoegen aan uw RSS-feed, zodat u nieuw gepubliceerde pennen kunt zien. En als je begint met zoeken of bladeren door de openbare pennen daar, zul je een aantal ongelooflijke projecten vinden ... de gebruikers zijn behoorlijk getalenteerd!

Volg Douglas Karr op Codepen

De betaalde versie, CodePen Pro, biedt een heleboel extra functies voor verbeterde functionaliteit of teams - inclusief samenwerking, processen, activahosting, privéweergaven en zelfs geïmplementeerde projecten met uw eigen domein of subdomein. En, natuurlijk, CodePen biedt een geweldige repository met Github-integratie waar je hele team kan werken. Als je gewoon wat eenvoudige code wilt testen zoals ik ben, is CodePen een hulpmiddel van onschatbare waarde.

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.