10 Codepen Tips voor beginners

Codepen is een supergemakkelijke en populaire site voor pen een werkende front-end codecombinatie meteen. Als je niet weet wat Codepen wel of niet eerder heeft gehoord, is het in feite een online broncode speelplaats (laten we het noemen OSCP om nerdier te klinken) voor de drie musketiers van front-end codering; HTML, CSS en JavaScript.

Er zijn andere vergelijkbare OSCP's zoals JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen is absoluut een van de meest bekende onder front-end ontwikkelaars. Zonder verder oponthoud, laten we direct in wat springen eenvoudige en nuttige tips voor het gebruik van Codepen.

1. Startknop

Als u geen fan bent van de manier waarop de uitvoer van uw code in Codepen zich blijft verfrissen terwijl je typt, dat kan opt-out van de “Voorbeeld van automatische update” keuze, en in plaats daarvan een knop Uitvoeren krijgen. Wanneer u erop klikt, kunt u de uitvoer van uw code bekijken en bijwerken wanneer je maar wilt.

Dit is ook een goede optie als u werkt met een code waarvan de uitvoer doorloopt veel lay-outwijzigingen, en overschildert telkens wanneer het wordt bijgewerkt, wat resulteert in traagheid.

2. Aantal toename / afname

Verhoog of verlaag de cijfers in uw code in Codepen zonder de nieuwe nummers in te typen. Het enige dat u hoeft te doen, is de toetsencombinatie Ctrl / Cmd gebruiken en Pijl-omhoog en pijl-omlaag.

3. Meerdere cursors

Je kunt cursors plaatsen meerdere punten in de broncode, typ dan of bewerk op al die punten tegelijkertijd. Dit werkt alleen als u dezelfde informatie invoert en de noodzaak voor kopiëren-plakken vermindert. Houd de Ctrl / Cmd-toets ingedrukt terwijl u op die meerdere punten klikt.

4. Verschillende gekleurde consoleberichten

De Troosten JavaScript-object heeft een paar andere methoden behalve log () om u toe te laten dingen in de webconsole afdrukken.

U kunt de info (), waarschuwen() en fout() methoden voor informatie, waarschuwing en fout. Doorgaans kleurt Webconsoles deze berichten in de vorm van een soort, of wordt er een passend pictogram naast weergegeven (zoals een waarschuwing voor het waarschuwingsbericht) voor eenvoudiger herkenning.

Codepen heeft een eigen console die u kunt openen door op de knop Console in de linkerbenedenhoek te klikken. Het is ideaal voor een snelle controle van consoleberichten zonder de console van de browser te hoeven openen. Deze console onderscheidt de verschillende typen consoleberichten met verschillende achtergrondkleuren.

5. Exporteren

Eenmaal opgeslagen, a pen (een enkele Codepen-entiteit) kan worden geëxporteerd als een ZIP-bestand met al zijn HTML-, CSS- en JS-code in bestanden. Er is ook een optie om de pen op te slaan als een Github-essentie (een Git-repository). U vindt de knop Exporteren in de rechterbenedenhoek van elke pen.

6. Zoeken en vervangen

Zoeken & vervangen - een essentiële operatie voor mensen die de neiging hebben om hun variabele namen af ​​en toe te hernoemen. Ctrl / Cmd + Shift + F is de belangrijkste combo voor open de “Zoeken & vervangen” dialoog.

7. Emmet Tab-trigger

Kent u tabtriggers voor Emmet-codering? Emmet is een productiviteitstool voor front-end ontwikkelaars waarmee u dit kunt doen type skeletcode die later wordt uitgebreid. Om dit in Codepen te doen, typt u snel de juiste afkorting in de editor, drukt u op de Tab-toets en de volledige code verschijnt in een keer. Alleen beschikbaar voor HTML in Codepen.

8. Download individuele codebestanden

Als u de Export-optie gebruikt zoals eerder vermeld, krijgt u alle drie de bestanden (HTML, CSS en JS) van uw pen. Maar als je geïnteresseerd bent in slechts een of twee van die bestanden, en wil je ze individueel downloaden, daar is ook een optie in Codepen voor.

Als u bent aangemeld bij Codepen, gaat u naar uw pen en klikt u op de knop Weergave wijzigen in de rechterbovenhoek. Onderaan de vervolgkeuzelijst ziet u de directe downloadkoppelingen voor de afzonderlijke bestanden.

9. Inspecteer JavaScript-variabelen

Omdat de JavaScript-console van Codepen verbinding maakt met de JavaScript-code die in uw pen is opgeslagen, kunt u deze ook gebruiken om uw JavaScript snel te testen. Deze functie is vooral handig in JS-variabelen inspecteren, zoals deze manier jij hoef geen extra console of waarschuwingsberichten in te voegen in de originele code uitsluitend voor testdoeleinden.

10. Draai de pen naar sjabloon

Als u de meeste van uw pennen begint met de dezelfde set code, je kunt een sjabloon gebruiken om bewaar die herhalende code. Om een ​​pen in een sjabloon te veranderen, vink de optie Sjabloon aan onder het menu Instellingen. Wanneer u later een nieuwe pen maakt, kunt u begin met je opgeslagen sjabloon door op de pijl-omlaag aan de rechterkant van de knop Nieuwe pen te klikken. Er wordt een vervolgkeuzelijst geopend met al uw opgeslagen sjablonen om uit te kiezen.