Home-theater-designers
Aan de slag gaan met JavaScript-webontwikkeling kan een frustrerend proces zijn, maar er zijn tools die het gemakkelijker maken.
CodePen.io is een in-browser coderingsomgeving die is ontworpen om zowel te leren coderen als om snel prototypes te maken van ideeën met minimale moeite.
In dit artikel bekijken we enkele functies van de site en hoe ze je kunnen helpen een betere programmeur te worden.
Wat is CodePen?
CodePen biedt iets dat a . wordt genoemd pen , dat bestaat uit drie verschillende vensters voor HTML, CSS en JavaScript, plus een voorbeeldvenster dat in realtime wordt bijgewerkt terwijl u typt.
Hoewel het vaak wordt gebruikt door webontwikkelaars om ideeën voor websites te presenteren, is het ook een geweldige plek om de basisprincipes van front-end webontwikkeling te leren. Dit zijn de meest opvallende functies die u moet weten bij het gebruik van CodePen.
1. Preprocessors
Preprocessors zijn geïnterpreteerde of gecompileerde talen die zijn ontworpen om codering te vereenvoudigen. Ze kunnen voor het gemak functies aan een taal toevoegen en code leesbaarder maken. Bij webontwikkeling wordt een combinatie van preprocessors voor HTML, CSS en JavaScript gebruikt om snel schone code te maken.
Als u webontwikkeling aan het leren bent en verschillende preprocessors wilt uitproberen, kunt u met CodePen direct van preprocessor wisselen en de code zien waarnaar het in realtime wordt gecompileerd. Elk van de drie vensters van de CodePen-app heeft een vervolgkeuzemenu in de rechterbovenhoek. Selecteer Gecompileerde HTML/CSS/JS bekijken om te zien hoe de code wordt geïnterpreteerd.
In deze pen hebben we een eenvoudige site gemaakt met behulp van Hamli en Sass om wat koptekst op te maken. Selecteren Bekijk samengesteld toont de standaard HTML en CSS. In dit voorbeeld is het verschil minimaal. Bij het leren van een nieuwe taal kan het echter handig zijn om te zien hoe de voorverwerkte code eruitziet als deze eenmaal is gecompileerd.
2. Externe bronnen
Naast native ondersteuning voor preprocessors, ondersteunt CodePen externe scripts. Dit maakt het de perfecte plek om praktijkervaring op te doen met bibliotheken voor uw persoonlijke projecten, of om populaire webapp-bibliotheken zoals React op te frissen.
Om een externe bibliotheek toe te voegen, opent u de Instellingen deelvenster op uw pen en ga naar het JavaScript-tabblad. Er zijn twee manieren om bronnen toe te voegen, door de bron-URL handmatig toe te voegen of door te zoeken.
We hebben deze functie gebruikt in ons artikel over: webanimatie met mo.js , samen met Babel-voorbewerking.
Zie de Pen Mojs MUO voorbeeld door Ian ( @Bardoctorus ) op CodePen.
Ja, CodePen-pennen kunnen worden ingesloten! Ga je gang en klik op het voorbeeldvenster hierboven om de resultaten van de Mo.js-zelfstudie te zien!
Andere pennen kunnen net als externe bibliotheken worden geïmporteerd. Dit betekent dat u elementen van eerder geschreven pennen kunt gebruiken om als modules in uw nieuwe pennen te gebruiken. CodePen-gebruiker Adam's Eenvoudige peiling pen is hier een goed voorbeeld van.
3. Sjablonen
Wanneer u nieuwe concepten leert of nieuwe ideeën uitprobeert, gebruikt u vaak vergelijkbare componenten en herlees u dezelfde stappen om aan de slag te gaan. Met CodePen kunnen sjabloonpennen worden gemaakt die de herhaling kunnen wegnemen en waarmee u meteen ter zake komt.
Om een sjabloon te maken, opent u een nieuwe pen, brengt u uw wijzigingen aan en selecteert u de Sjabloon schuifregelaar in het instellingenmenu.
https://vimeo.com/221428690
Tot voor kort konden gratis gebruikers slechts drie sjablonen maken, maar nu kunnen alle gebruikers zoveel sjablonen in hun account hebben als ze willen. Perfect om met een minimum aan vertraging aan de slag te gaan met een nieuw idee!
4. Modesamenwerking
De mogelijkheid om samen te werken en les te geven met CodePen is misschien wel de grootste troef. Er is al een schat aan geweldige samenwerkingstools voor programmeurs, maar de aanpak van CodePen is eenvoudig en intuïtief.
Pro-gebruikers van CodePen kunnen een nieuwe pen maken en deze openen voor samenwerking onder de Verander perspectief menu. Dit verandert de link van de pen in een deelbare uitnodiging voor een schaalbaar aantal mensen, afhankelijk van je CodePen Pro-abonnement.
geen geluid uit luidsprekers windows 10
In dit geval schreef ik HTML terwijl een vriend de CSS in realtime bijwerkte, met een gelabelde cursor die aangaf waar ze aan het werk waren.
Iedereen met de link kan deelnemen en de chatfunctie in de browser gebruiken, ongeacht of ze een professionele gebruiker zijn of zelfs een CodePen-account hebben. Op voorwaarde dat automatisch opslaan is uitgeschakeld, kan alleen de eigenaar van de pen eventuele wijzigingen opslaan, waardoor het een veilige manier is om uw code zonder risico voor anderen te openen.
Het open karakter van deze modus is gunstig voor beginners, omdat je bijna iedereen in je pen kunt uitnodigen om je door een moeilijk concept te leiden. Het is ook een handige modus om je weg te vinden, want het is perfect voor het interviewen van potentiële werknemers, en heeft al op deze manier professioneel is gebruikt !
5. Professor-modus
In de Professor-modus kan één Pro-gebruiker een ruimte hosten waarin alleen zij de code kunnen bewerken. Tussen 10-100 gebruikers kunnen kijken en chatten, afhankelijk van het Pro-abonnement van de host.
De Professor-modus biedt flexibiliteit tussen klassikaal leren en leren op afstand, of een combinatie van beide. Door de Professor-modus te gebruiken, kunnen mensen achter in de klas dezelfde ervaring hebben als degenen voorin, en kan de leraar bugfixes tonen die in realtime worden bijgewerkt.
6. Presentatiemodus
De presentatiemodus is, niet verwonderlijk, ontworpen met het presenteren van code in gedachten. De app wordt weergegeven in een vereenvoudigde weergave, ontworpen om te werken met overheadprojectoren. CodePen heeft de presentatiemodus geoptimaliseerd voor gebruik op internetverbindingen met een lagere snelheid en zwakkere hardware.
Slimme lezers hebben zich misschien al gerealiseerd dat de gratis versie van CodePen precies deze functie zou bieden, hoewel de Pro-modus een paar handige functies heeft. Lay-out, lettergrootte en thema's kunnen snel worden aangepast aan bijna elke instelling, en als de link naar de pen wordt weergegeven, wordt een verkorte URL van jumbo-formaat weergegeven, waardoor het delen van het project gemakkelijker wordt.
Deze kleine veranderingen, samen met de mogelijkheid om het voorbeeldvenster te schalen zodat het past bij alles wat je laat zien, maken de presentatiemodus perfect voor zowel docenten als ontwikkelaars die ideeën presenteren aan collega's. De presentatiemodus is ook een overzichtelijke en eenvoudige manier om code te presenteren als je merkt dat je solliciteert voor een programmeerfunctie.
7. Patronen
Zoeken naar inspiratie wordt veel gemakkelijker gemaakt met CodePen's collecties van Ontwerp patronen .
Elke categorie is een verzameling voorbeeldcode die door CodePen-gebruikers wordt geleverd voor specifieke taken. Bent u op zoek naar een manier om dynamische knoppen voor uw site te maken? Accordeon menu's? Er is een schat aan categorieën die in bijna elk voorbeeld passen.
Deze patronen zijn ook een geweldige manier om te leren hoe interactieve knoppen werken en de verschillende manieren waarop dynamische gebruikersinterfaces kunnen functioneren.
8. Emmet
Emmet , voorheen bekend als Zen Coding, wordt algemeen beschouwd als de grootste tijdsbesparing voor HTML- en CSS-ontwikkeling. De plug-in neemt een deel van de code die u veel schrijft, en zet deze om in eenvoudige snelkoppelingen.
Het in actie zien is beter dan het uit te leggen, dus neem de gebruikelijke instellingen voor een HTML-document:
Dit toevoegen aan elk HTML-document is teruggebracht tot twee acties. Typ met behulp van Emmet ! en raak de Tab toets. Magie!
Emmet is standaard actief op CodePen en is vooral handig als je een nieuw concept in JavaScript probeert te leren en snel de ondersteunende HTML en CSS moet maken.
Ontwikkelen met CodePen voor een betere ervaring
CodePen is een uitstekende tool voor webontwikkelaars en het veld groeit voortdurend. JavaScript is een geweldige taal om te leren voor een toekomst in webontwikkeling.
software om bestanden en mappen te ordenen
Er zijn een aantal geweldige tutorials en cursussen beschikbaar voor mensen die aan de slag willen met JavaScript, en CodePen is een geweldige omgeving om je nieuwe vaardigheden te testen.
Deel Deel Tweeten E-mail De 8 beste websites om gratis audioboeken te downloadenAudioboeken zijn een geweldige bron van entertainment en veel gemakkelijker te verteren. Hier zijn de acht beste websites waar je ze gratis kunt downloaden.
Lees volgende Gerelateerde onderwerpen- Programmeren
- HTML
- Webontwikkeling
- JavaScript
- CSS
Ian Buckley is een freelance journalist, muzikant, performer en videoproducent die in Berlijn, Duitsland woont. Als hij niet aan het schrijven of op het podium staat, sleutelt hij aan doe-het-zelf-elektronica of code in de hoop een gekke wetenschapper te worden.
Meer van Ian BuckleyAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren