8 Awesome CodePen-functies voor programmeren en webontwikkeling

Aan de slag met JavaScript-webontwikkeling kan een frustrerend proces zijn, maar er zijn hulpmiddelen die het gemakkelijker maken.

CodePen.io is een ingebouwde codeeromgeving die is ontworpen voor zowel leren coderen als om prototypes van ideeën snel te maken met minimale problemen.

In dit artikel bekijken we enkele van de functies van de site en hoe deze u kunnen helpen een betere programmeur te worden.

Wat is CodePen?

CodePen biedt iets dat a heet pen, die 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 voor webontwikkelaars om ideeën voor websites te presenteren, is het ook een geweldige plek om de basisprincipes van front-end webontwikkeling te leren. Hier zijn de meest opvallende kenmerken die u moet weten wanneer u CodePen gebruikt.

1. Preprocessors

Preprocessors zijn geïnterpreteerde of gecompileerde talen die zijn ontworpen om codering te vereenvoudigen. Ze kunnen gemakshalve functies aan een taal toevoegen en de 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 in een handomdraai van preprocessor wisselen, en de code bekijken die deze in realtime compileert. Elk van de drie vensters in de CodePen-app heeft een vervolgkeuzemenu in de rechterbovenhoek. kiezen Bekijk Gecompileerde HTML / CSS / JS om te zien hoe de code zal worden geïnterpreteerd.

In deze pen hebben we een eenvoudige site gemaakt met behulp van Haml en Sass om wat koptekst te stijlen. selecteren Bekijk gecompileerd toont de standaard HTML en CSS. In dit voorbeeld is het verschil minimaal. Tijdens het leren van een nieuwe taal kan het echter handig zijn om te zien hoe de voorverwerkte code er eenmaal gecompileerd uitziet.

2. Externe bronnen

Naast native ondersteuning voor preprocessors, ondersteunt CodePen externe scripts. Dit maakt het de perfecte plek om hands-on ervaring op te doen met bibliotheken voor uw persoonlijke projecten, of om populaire webapp-bibliotheken op te frissen, zoals React 7 Beste gratis handleidingen voor leren Reageren en web-apps maken 7 Beste gratis tutorials voor leren Reageren en maken Web Apps Gratis cursussen zijn zelden zo uitgebreid en nuttig - maar we hebben verschillende React-cursussen gevonden die uitstekend zijn en waarmee u op de juiste manier kunt starten. Lees verder .

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 gebruikten deze functie in ons artikel over webanimatie met mo.js, samen met de preprocessing van Babel.

Zie het Pen Mojs MUO-voorbeeld van 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 bekijken!

Andere pennen kunnen net als externe bibliotheken worden geïmporteerd. Dit betekent dat u elementen uit eerder geschreven pennen kunt gebruiken om soortgelijke modules in uw nieuwe pennen te gebruiken. CodePen-gebruiker Adam's Simple Poll-pen is daar een goed voorbeeld van.

3. Sjablonen

Wanneer u nieuwe concepten aan het leren bent of nieuwe ideeën uitprobeert, gebruikt u vaak gelijksoortige componenten en haalt u dezelfde stappen uit om aan de slag te gaan. CodePen maakt het maken van sjabloonpennen mogelijk die de herhaling wegnemen en u meteen ter zake kunnen brengen.

Als u een sjabloon wilt maken, opent u een nieuwe pen, brengt u uw wijzigingen aan en selecteert u de Sjabloon schuif in het instellingenmenu.

Tot voor kort konden gratis gebruikers maar drie sjablonen maken, maar nu kunnen alle gebruikers zoveel sjablonen in hun account plaatsen als ze willen. Perfect om met een minimale vertraging aan een nieuw idee te beginnen!

4. Samenwerkingsmodus

Het vermogen om samen te werken en les te geven met CodePen kan de grootste troef zijn. Er zijn al een schat aan geweldige samenwerkingshulpmiddelen 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. Hierdoor verandert de koppeling van de pen in een deelbare uitnodiging voor een aantal mensen, afhankelijk van uw CodePen Pro-abonnement.

In dit geval heb ik HTML geschreven terwijl een vriend de CSS in realtime heeft bijgewerkt, met een gelabelde cursor die identificeerde waar ze aan het werk waren.

Iedereen met de link kan deelnemen aan en gebruik maken van de in-browser chatfunctie, ongeacht of deze een professionele gebruiker is of zelfs een CodePen-account heeft. Als 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 loodsen. Het is ook een handige modus om je weg te kennen omdat het perfect is voor het interviewen van potentiële werknemers en het is al op deze manier professioneel gebruikt!

5. Professor-modus

In Professor-modus kan een Pro-gebruiker een ruimte hosten waarin alleen zij de code kunnen bewerken. Tussen 10-100 gebruikers kunnen kijken en chatten, afhankelijk van het Pro-plan van de host.

De Professor-modus biedt flexibiliteit tussen klassikaal leren en afstandsonderwijs, of een combinatie van beide. Als je de Professor-modus gebruikt, kunnen mensen achter in de klas dezelfde ervaring hebben als degenen aan de voorkant, en kan de docent bugfixes laten zien die in realtime worden bijgewerkt.

6. Presentatiemodus

Presentatiemodus is ontworpen, niet verwonderlijk, met de presentatie code in het achterhoofd. De app wordt weergegeven in een vereenvoudigde weergave, ontworpen om te werken met overheadprojectors. CodePen heeft de Presentatiemodus geoptimaliseerd voor gebruik op internetverbindingen met een lagere snelheid en zwakkere hardware.

Slimme lezers beseffen mogelijk al dat de gratis versie van CodePen precies deze functie zou bieden, hoewel de Pro-modus enkele handige functies heeft. Lay-out, lettertypegrootte en thema's kunnen snel worden aangepast om vrijwel elke instelling aan te passen, en het tonen van de link naar de pen brengt een jumbo-formaat verkorte URL naar voren waardoor het delen van het project gemakkelijker wordt.

Deze kleine wijzigingen, samen met het kunnen schalen van het voorbeeldvenster zodat het past bij alles wat u laat zien, maken de presentatiemodus perfect voor zowel docenten als ontwikkelaars die ideeën presenteren aan collega's. Presentatiemodus is ook een overzichtelijke en eenvoudige manier om code te presenteren als u een gesprek met een programmeerpositie aan het voeren bent. Hoe u zich op een programmeergesprek kunt voorbereiden Hoe u zich op een programmeergesprek kunt voorbereiden Het beste advies voor het programmeren van interviews. Elk interview kan ontmoedigend zijn. Weet je genoeg om te slagen? Zullen je oplossingen goed genoeg zijn? Wat als je stikt? Pas deze vijf tips toe. Lees verder .

7. Patronen

Inspiratie zoeken wordt veel gemakkelijker gemaakt met de collecties ontwerppatronen van CodePen.

Elke categorie is een verzameling voorbeeldcodes die door CodePen-gebruikers wordt verstrekt voor specifieke taken. Bent u op zoek naar een manier om dynamische knoppen voor uw site te maken? Accordeonmenu's? Er zijn 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 tijdbesparing voor HTML- en CSS-ontwikkeling. De plug-in neemt een deel van de code die je zelf schrijft veel op en zet ze om in eenvoudige snelkoppelingen.

Zien in actie is beter dan uitleggen, dus neem de gebruikelijke setup voor een HTML-document:

Het toevoegen van dit aan elk HTML-document is teruggebracht tot twee acties. Gebruik Emmet, typ ! en druk op de tab sleutel. Magie!

Emmet is standaard actief op CodePen en is vooral handig als u een nieuw concept in JavaScript wilt leren en snel de ondersteunende HTML en CSS moet maken.

Ontwikkel met CodePen voor een betere ervaring

CodePen is een uitstekende tool voor webontwikkelaars en het veld groeit gestaag. JavaScript is een geweldige taal om te leren voor een toekomst in webontwikkeling.

Er zijn een aantal geweldige tutorials en cursussen beschikbaar voor mensen die aan de slag willen met JavaScript. Echt leer JavaScript met 5 Top Udemy Cursussen Leer echt JavaScript met 5 Top Udemy Cursussen JavaScript is de programmeertaal van het web. Als je een reden hebt om JavaScript te leren, kunnen deze vijf uitstekende cursussen van Udemy de plaats zijn om aan je codeerreis te beginnen. Lees meer en CodePen is een geweldige omgeving om uw nieuwe vaardigheden te testen.

Ontdek meer over: CSS, HTML, JavaScript, Webontwikkeling.