Als je een webontwikkelaar of softwareontwikkelaar bent, ken je waarschijnlijk de CodePen-diensten. Daarom presenteren we je vanuit Neoteo de beste tips om het meeste uit dit platform te halen, zodat je in realtime projecten in HTML, CSS en JavaScript kunt bewerken en maken.
Maar voor wie de functionaliteiten van CodePen niet kent, geven we een korte introductie, zodat je het kunt opnemen in je ontwikkelingshulpmiddelen. CodePen is een platform voor het testen, bewerken, oefenen en delen van kleine web- of frontendprojecten (pens) in HTML, CSS en JavaScript (ondersteunt metatalen); op die manier kunnen jij en de community in realtime verbeteringen aanbrengen.
Knop Run
Als je een van die gebruikers bent die niet tevreden is met de uitvoer van de code tijdens het ontwikkelen, kun je de optie Auto Update Preview uitschakelen en in plaats daarvan een Run-knop krijgen. Zo kun je elke keer dat je het ontwerp bijwerkt op de knop klikken om het te vernieuwen.
Instellingen – Gedrag – (uitschakelen) AUTO UPDATE PREVIEW
Dit raden we aan voor zware projecten met veel code en een mix van talen.
Exporteren
Zodra je de Pen hebt opgeslagen, kun je deze exporteren als ZIP-bestand, met alle talen (HTML, CSS en JS). Maar er is ook een optie om het op te slaan als een GitHub-gist.
Exporteren – Opslaan als GitHub Gist
Op deze manier heb je je werk als een GitHub-repository.
Zoeken en vervangen
Zoeken en vervangen is een van de belangrijkste acties op het platform, omdat ontwikkelaars regelmatig namen, variabelen en andere elementen wijzigen.
Ctrl + Shift + F (zoekscherm inschakelen) – Typ het woord dat je wilt vervangen in Replace – Enter – Typ wat je wilt invoegen in With – Enter – Klik vervolgens op Yes en All.
Individuele codebestanden verkrijgen
Als je een Pen op de gebruikelijke manier exporteert, krijg je de drie bestanden (HTML, CSS en JS), maar als je maar een van de drie nodig hebt, moet je deze actie gebruiken.
Wijzig weergave – Directe codelinks: hier kies je de gewenste taal – En je kunt het opslaan vanuit een browsertabblad.
Pen als sjabloon
Als je bijna al je Pens met dezelfde sjabloon gebruikt, kun je elke Pen die je maakt activeren met de sjabloon die je gewoonlijk gebruikt. Maar eerst moet je het opslaan als een template.
Instellingen – Tittel invullen voor de Pen – Selecteer de optie Template
We hopen dat de tips die we je hebben gegeven om je werk in CodePen te optimaliseren je helpen om meer rendement uit het platform te halen en je ontwikkeling te verbeteren.
Als je een tweede deel van het artikel wilt, horen we graag je reacties.
