Home-theater-designers
Å komme i gang med JavaScript -webutvikling kan være en frustrerende prosess, men det finnes verktøy som gjør det enklere.
CodePen.io er et kodemiljø i nettleseren designet for både å lære å kode og for raskt å prototype ideer med minimal stress.
I denne artikkelen ser vi på noen av nettstedets funksjoner og hvordan de kan hjelpe deg med å bli en bedre programmerer.
Hva er CodePen?
CodePen gir noe som kalles a penn , som består av tre forskjellige vinduer for HTML, CSS og JavaScript, pluss en forhåndsvisningsrute som oppdateres i sanntid mens du skriver.
Selv om det ofte brukes for webutviklere for å vise frem ideer for nettsteder, er det også et flott sted å lære det grunnleggende om front-end webutvikling. Her er de mest bemerkelsesverdige funksjonene du trenger å vite når du bruker CodePen.
1. Forbehandlere
Forbehandlere er tolket eller kompilert språk designet for å forenkle koding. De kan legge til funksjoner på et språk for enkelhets skyld, og gjøre koden lettere å lese. I webutvikling brukes en kombinasjon av forbehandlere for HTML, CSS og JavaScript for å lage ren kode raskt.
Hvis du lærer webutvikling og vil prøve forskjellige forhåndsbehandlere, lar CodePen deg bytte forhåndsbehandlere i farten og se koden den kompilerer til i sanntid. Hver av de tre rutene i CodePen -appen har en rullegardinmeny øverst til høyre. Plukke ut Se kompilert HTML/CSS/JS for å se hvordan koden vil bli tolket.
I denne pennen har vi opprettet et enkelt nettsted ved hjelp av Haml og Sass for å style litt overskriftstekst. 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
Ved siden av native support for preprocessors, 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 populære webappbiblioteker som React.
For å legge til et eksternt bibliotek, åpne Innstillinger ruten på pennen din, og gå til JavaScript -fanen. Det er to måter å legge til ressurser på, enten ved å legge til ressursens URL manuelt eller ved å søke.
Vi brukte denne funksjonen i artikkelen vår webanimasjon med mo.js , sammen med Babel -forbehandling.
Se pennen Mojs MUO eksempel av Ian ( @Bardoctorus ) på CodePen.
Ja, CodePen -penner kan legges inn! Fortsett og klikk på forhåndsvisningsruten ovenfor for å se resultatene av Mo.js -opplæringen!
Andre penner kan importeres omtrent som eksterne biblioteker. Dette betyr at du kan ta elementer fra tidligere skrevne penner for å bruke lignende moduler i de nye pennene. CodePen -bruker Adams Enkel meningsmåling pennen 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 går om på de samme trinnene for å komme i gang. CodePen lar deg lage malpenner som kan kutte ut repetisjonen, og la deg komme rett til poenget.
Hvis du vil lage en mal, åpner du en ny penn, gjør endringene og velger Mal glidebryteren i innstillingsmenyen.
https://vimeo.com/221428690
Inntil nylig kunne gratis brukere bare lage tre maler, men nå kan alle brukere ha så mange maler på kontoen som de vil. Perfekt for å komme i gang med en ny idé med minimal forsinkelse!
4. Motesamarbeid
Evnen til å samarbeide og undervise med CodePen kan være dens største ressurs. Det er allerede et vell av flotte samarbeidsverktøy for programmerere, men CodePens tilnærming 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 invitasjon som kan deles med plass til et skalert antall mennesker, avhengig av CodePen Pro -planen din.
oppgavelinjen som vises i fullskjerm Windows 10
I dette tilfellet skrev jeg HTML mens en venn oppdaterte CSS i sanntid, med en merket markør identifisert hvor de jobbet.
Alle med lenken kan bli med og bruke nettleserens chatfunksjon, uavhengig av om de er proffbrukere eller til og med har en CodePen-konto. Forutsatt at autolagring er slått av, er det bare eieren av pennen som kan lagre eventuelle endringer, noe som gjør det til en trygg måte å åpne koden for andre uten risiko.
Den åpne karakteren til denne modusen er fordelaktig for nybegynnere, ettersom du kan invitere nesten hvem som helst inn i pennen din for å veilede deg gjennom et vanskelig konsept. Det er også en praktisk måte å kjenne deg på, ettersom den er perfekt for å intervjue potensielle ansatte, og har allerede gjort det blitt brukt profesjonelt på denne måten !
5. Professor Mode
Professor -modus lar 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 gir fleksibilitet mellom klasseromslæring og fjernundervisning, eller en kombinasjon av de to. Ved å bruke professor -modus vil folk bakerst i klassen få den samme opplevelsen som de foran, og for læreren å vise feilrettinger som oppdateres i sanntid.
6. Presentasjonsmodus
Presentasjonsmodus er designet, ikke overraskende, med tanke på presentasjonskode. Appen vises i en forenklet visning, designet for å fungere med overheadprojektorer. CodePen har optimalisert presentasjonsmodus for bruk på Internett -tilkoblinger med lavere hastighet og svakere maskinvare.
Kloke lesere kan allerede ha innsett at gratisversjonen av CodePen ville gi akkurat denne funksjonen, selv om Pro -modusen har noen nyttige funksjoner. Oppsett, skriftstørrelse og temaer kan raskt endres i farten for å passe til nesten alle innstillinger, og ved å vise lenken til pennen får du opp en forkortet URL i jumbo-størrelse, noe som gjør det lettere å dele prosjektet.
Disse små endringene, sammen med å kunne skalere forhåndsvisningsvinduet slik at det passer til det du viser frem, gjør presentasjonsmodus perfekt for både lærere og utviklere som presenterer ideer for kolleger. Presentasjonsmodus er også en ren og enkel måte å presentere kode på hvis du finner intervjuer for en programmeringsposisjon.
7. Mønstre
Å lete etter inspirasjon er gjort mye enklere med CodePens samlinger av Designmønstre .
Hver kategori er en samling med eksempelkode levert av CodePen -brukere for spesifikke oppgaver. Leter du etter en måte å lage dynamiske knapper for nettstedet ditt? Trekkspillmenyer? Det er et vell av kategorier som passer til nesten alle eksempler.
Disse mønstrene er også en fin måte å lære hvordan interaktive knapper fungerer, og de forskjellige måtene dynamiske brukergrensesnitt kan fungere.
8. Emmet
Emmet , tidligere kjent som Zen Coding, er allment ansett som den største tidsbesparende for HTML- og CSS -utvikling. Programtillegget tar en del av koden du finner deg selv å skrive mye og konverterer dem til enkle snarveier.
Det er bedre å se det i aksjon enn å forklare det, så ta det vanlige oppsettet for et HTML -dokument:
Å legge dette til hvert HTML -dokument har blitt redusert til to handlinger. Bruk Emmet til å skrive ! og slå på Tab nøkkel. Magi!
Emmet er aktiv som standard på CodePen og er spesielt nyttig hvis du prøver å lære et nytt konsept i JavaScript og trenger å lage HTML og CSS som støtter raskt.
Utvikle med CodePen for en bedre opplevelse
CodePen er et utmerket verktøy for webutviklere, og feltet vokser kontinuerlig. JavaScript er et flott språk å lære for en fremtid innen webutvikling.
plugget inn ikke lader windows 10
Det er noen gode opplæringsprogrammer og kurs tilgjengelig for folk som ønsker å komme i gang med JavaScript, og CodePen er et flott miljø for å teste ut de nye ferdighetene dine.
Dele Dele kvitring E -post De 8 beste nettstedene for å laste ned lydbøker gratisLydbøker er en flott underholdningskilde, og mye lettere å fordøye. Her er de åtte beste nettstedene der du kan laste dem ned gratis.
Les neste Relaterte temaer- Programmering
- HTML
- Webutvikling
- JavaScript
- CSS
Ian Buckley er frilansjournalist, musiker, utøver og videoprodusent bosatt i Berlin, Tyskland. Når han ikke skriver eller står på scenen, pusler han med DIY -elektronikk eller kode i håp om å bli en gal forsker.
Mer fra Ian BuckleyAbonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!
Klikk her for å abonnere