8 Awesome CodePen-funksjoner for programmering og webutvikling

Komme i gang med JavaScript webutvikling kan være en frustrerende prosess, men det finnes verktøy der ute som gjør det enklere.

CodePen.io er et kodingsmiljø i nettleser designet for både å lære å kode og for å prototype ideer raskt med minimal problemfrihet.

I denne artikkelen ser vi på noen av nettstedets funksjoner og hvordan de kan hjelpe deg til å bli en bedre programmerer.

Hva er CodePen?

CodePen gir noe som heter a penn, som består av tre forskjellige vinduer for HTML, CSS og JavaScript, pluss en forhåndsvisningsrude som oppdateres i sanntid mens du skriver.

Selv om det ofte brukes til webutviklere til å presentere ideer til nettsteder, er det også et flott sted å lære grunnleggende om front-end webutvikling. Her er de mest bemerkelsesverdige funksjonene du trenger å vite når du bruker CodePen.

1. Preprosessorer

Preprosessorer tolkes eller samles språk utviklet for å forenkle kodingen. De kan legge til funksjoner på et språk for enkelhets skyld, og gjøre kode enklere å lese. I webutvikling brukes en kombinasjon av preprosessorer for HTML, CSS og JavaScript til å lage ren kode raskt.

Hvis du lærer webutvikling og vil prøve forskjellige preprosessorer, kan CodePen du bytte preprosessorer i fly, og se koden den kompilerer ned til i sanntid. Hver av de tre rutene på CodePen-appen har en rullegardinmeny øverst til høyre. Å velge Se kompilert HTML / CSS / JS for å se hvordan koden skal tolkes.

I denne pennen har vi opprettet et enkelt nettsted ved hjelp av Haml og sass å style litt headertekst. Velge Se kompilert viser standard HTML og CSS. I dette eksemplet er forskjellen minimal. Mens du lærer et nytt språk, kan det imidlertid være nyttig å se hvordan den forhåndsbehandlede koden ser ut når den er kompilert.

2. Eksterne ressurser

I tillegg til opprinnelig støtte til preprosessorer støtter CodePen eksterne skript. Dette gjør det til det perfekte stedet å få praktisk erfaring med biblioteker for dine personlige prosjekter, eller å pusse opp på populære webappbibliotek som React 7 Best Free Tutorials for Learning React og Making Web Apps 7 Best Free Tutorials for Learning React and Making Web Apps Gratis kurs er sjelden så omfattende og hjelpsomme - men vi har funnet flere React-kurs som er gode og vil komme deg i gang på høyre fot. Les mer .

For å legge til et eksternt bibliotek, åpne innstillinger ruten på pennen, og gå til JavaScript-fanen. Det er to måter å legge til ressurser, enten ved å legge ressursadressen manuelt, eller ved å søke.

Vi brukte denne funksjonen i vår artikkel som dekker web animasjon med mo.js, sammen med Babel preprocessing.

Se Pen Mojs MUO eksempel av Ian (@Bardoctorus) på CodePen.

Ja, CodePen penner kan bli integrert! Gå videre og klikk på forhåndsvisningsruten over for å se resultatene av Mo.js-opplæringen!

Andre penner kan importeres mye som eksterne biblioteker. Dette betyr at du kan ta elementer fra tidligere skrevet penner for å bruke som moduler i de nye pennene dine. CodePen-brukeren Adams enkle avstemningspenn er et godt eksempel på dette.

3. Maler

Når du lærer nye konsepter eller tester ut nye ideer, bruker du ofte lignende komponenter og regisserer de samme trinnene som kommer i gang. CodePen tillater opprettelse av malpenner som kan klippe ut repetisjonen, og la deg komme rett til poenget.

Hvis du vil opprette en mal, åpner du en ny penn, gjør endringene, og velger Mal skyveknappen i innstillingsmenyen.

Inntil nylig kunne gratis brukere bare lage tre maler, men nå kan alle brukere ha så mange maler i sin konto som de vil. Perfekt for å komme i gang med en ny ide med minimal forsinkelse!

4. Samarbeidsmodus

Evnen til å samarbeide og undervise med CodePen kan være den største aktiviteten. Det er allerede et vell av gode samarbeidsverktøy for programmerere, men CodePen-tilnærmingen er enkel og intuitiv.

Pro-brukere av CodePen kan lage en ny penn, og åpne den for samarbeid under Endre syn Meny. Dette endrer pennens lenke til en delbar invitasjon som imøtekommer et skaleringsnummer av mennesker, avhengig av CodePen Pro-planen din.

I dette tilfellet skrev jeg HTML mens en venn oppdaterte CSS i sanntid, med en merket markør identifisert hvor de jobbet.

Alle med linken kan bli med og bruke nettleser-chat-funksjonen, uansett om de er en pro bruker eller til og med har en CodePen-konto. Forutsatt at autosave er slått av, kan eieren av pennen bare lagre endringer, noe som gjør det til en trygg måte å åpne koden for andre uten risiko.

Den åpne typen av denne modusen er gunstig for nybegynnere, da du kan invitere nesten alle til pennen din til å veilede deg gjennom et vanskelig konsept. Det er også en praktisk måte å kjenne deg rundt, da den er perfekt for intervjuing av potensielle ansatte, og har allerede blitt brukt profesjonelt på denne måten!

5. Professor Mode

Professor-modus tillater en Pro-bruker å være vert for et rom der bare de kan redigere koden. Mellom 10-100 brukere kan se og chatte avhengig av vertens Pro-plan.

Professor-modusen tillater fleksibilitet mellom klasseromsundervisning og fjernundervisning, eller en kombinasjon av de to. Ved å bruke professormodus kan folk på baksiden av klassen ha samme opplevelse av dem foran, og for læreren å vise feilrettinger som vil oppdatere i sanntid.

6. Presentasjonsmodus

Presentasjonsmodus er utformet, overraskende, med presentasjonskode i tankene. Appen vises i en forenklet visning, designet for å fungere med overheadprojektorer. CodePen har optimalisert presentasjonsmodus for bruk på lavhastighets Internett-tilkoblinger og svakere maskinvare.

Skarpe lesere har kanskje allerede innsett at den frie versjonen av CodePen ville gi nøyaktig denne funksjonen, selv om Pro-modusen har noen nyttige funksjoner. Layout, skriftstørrelse og temaer kan raskt endres på flyet for å passe nesten alle innstillinger, og viser koblingen til pennen bringer opp en jumbo-størrelse forkortet nettadresse som gjør det lettere å dele prosjektet.

Disse små endringene, sammen med å kunne forme forhåndsvisningsvinduet for å passe det du viser deg, gjør presentasjonsmodus perfekt for både lærere og utviklere som presenterer ideer til kolleger. Presentasjonsmodus er også en skikkelig og enkel måte å presentere kode på hvis du finner deg selv intervjuende for en programmeringsposisjon. Hvordan forberede deg på et programmeringsintervju. Hvordan forberede deg på et programmeringsintervju Det beste råd for programmeringsintervjuer. Eventuelt intervju kan være skremmende. Vet du nok til å passere? Vil dine løsninger være gode nok? Hva om du choke? Påfør disse fem tipsene. Les mer .

7. Mønstre

Søker etter inspirasjon gjøres mye enklere med CodePens samlinger av Design Patterns.

Hver kategori er en samling av eksempelkoden som tilbys av CodePen-brukere for bestemte oppgaver. Leter du etter en måte å opprette dynamiske knapper på nettstedet ditt? Accordioning menyer? Det finnes et vell av kategorier for å passe nesten ethvert eksempel.

Disse mønstrene er også en fin måte å lære hvordan interaktive knapper fungerer, og på forskjellige måter dynamiske brukergrensesnitt kan fungere.

8. Emmet

Emmet, tidligere kjent som Zen Coding, anses allment som den største tidsbesparelsen for HTML og CSS-utvikling. Pluggen tar litt av koden du finner selv skriver mye og konverterer dem til enkle snarveier.

Å se det i aksjon er bedre enn å forklare det, så ta det vanlige oppsettet for et HTML-dokument:

Hvis du legger til dette i hvert HTML-dokument, er det redusert til to handlinger. Bruk Emmet, skriv inn ! og treffer Tab nøkkel. magi!

Emmet er aktivt som standard på CodePen og er spesielt nyttig hvis du prøver å lære et nytt konsept i JavaScript og trenger å lage den støttende HTML og CSS raskt.

Utvikle med CodePen for en bedre opplevelse

CodePen er et utmerket verktøy for webutviklere, og feltet vokser kontinuerlig. JavaScript er et godt språk å lære for en fremtid i webutvikling.

Det er noen gode opplæringsprogrammer og kurs tilgjengelig for folk som ønsker å komme i gang med JavaScript. Virkelig Lær JavaScript med 5 Top Udemy-kurs. Lær deg JavaScript med 5 Top Udemy-kurs. JavaScript er programmeringsspråket på nettet. Hvis du har grunn til å lære JavaScript, kan disse fem utmerkede kursene fra Udemy være stedet å begynne din kodende reise. Les mer, og CodePen er et flott miljø for å teste ut dine nye ferdigheter.

Utforsk mer om: CSS, HTML, JavaScript, Webutvikling.