Home-theater-designers
At komme i gang med JavaScript -webudvikling kan være en frustrerende proces, men der er værktøjer derude, der gør det lettere.
CodePen.io er et in-browser kodningsmiljø designet til både at lære at kode og hurtigt prototype ideer med minimalt besvær.
I denne artikel ser vi på nogle af webstedets funktioner, og hvordan de kan hjælpe dig med at blive en bedre programmør.
Hvad er CodePen?
CodePen giver noget, der kaldes a pen , som omfatter tre forskellige vinduer til HTML, CSS og JavaScript plus en forhåndsvisningsrude, der opdateres i realtid, mens du skriver.
Selvom det ofte bruges til webudviklere til at fremvise ideer til websteder, er det også et godt sted at lære det grundlæggende i front-end webudvikling. Her er de mest bemærkelsesværdige funktioner, du skal vide, når du bruger CodePen.
1. Forbehandlere
Forprocessorer fortolkes eller kompileres sprog designet til at forenkle kodning. De kan tilføje funktioner til et sprog for nemheds skyld og gøre kode lettere at læse. I webudvikling bruges en kombination af præprocessorer til HTML, CSS og JavaScript til hurtigt at oprette ren kode.
Hvis du lærer webudvikling og vil prøve forskellige forprocessorer, giver CodePen dig mulighed for at skifte preprocessorer med det samme og se koden, den kompilerer til i realtid. Hver af de tre ruder i CodePen -appen har en rullemenu øverst til højre. Vælg Se kompileret HTML/CSS/JS for at se, hvordan koden vil blive fortolket.
I denne pen har vi oprettet et simpelt websted ved hjælp af Haml og Sass at style nogle overskriftstekster. Valg Se kompileret viser standard HTML og CSS. I dette eksempel er forskellen minimal. Mens du lærer et nyt sprog, kan det imidlertid være nyttigt at se, hvordan den forbehandlede kode ser ud, når den er blevet kompileret.
2. Eksterne ressourcer
Ud over native support til forbehandlere understøtter CodePen eksterne scripts. Dette gør det til det perfekte sted at få praktisk erfaring med biblioteker til dine personlige projekter eller til at børste op på populære web-app-biblioteker som React.
Hvis du vil tilføje et eksternt bibliotek, skal du åbne Indstillinger rude på din pen, og gå til fanen JavaScript. Der er to måder at tilføje ressourcer på, enten ved at tilføje ressource -URL manuelt eller ved at søge.
Vi brugte denne funktion i vores artikeldækning webanimation med mo.js sammen med Babel -forarbejdning.
Se pennen Mojs MUO eksempel af Ian ( @Bardoctorus ) på CodePen.
Ja, CodePen penne kan indlejres! Fortsæt, og klik på forhåndsvisningsruden ovenfor for at se resultaterne af Mo.js -selvstudiet!
Andre penne kan importeres ligesom eksterne biblioteker. Det betyder, at du kan tage elementer fra tidligere skrevne penne til at bruge lignende moduler i dine nye penne. CodePen -bruger Adams Enkel meningsmåling pen er et godt eksempel på dette.
3. Skabeloner
Når du lærer nye koncepter eller afprøver nye ideer, bruger du ofte lignende komponenter og genstarter de samme trin for at komme i gang. CodePen tillader oprettelse af skabelonpenne, som kan afbryde gentagelsen og lade dig komme direkte til sagen.
For at oprette en skabelon skal du åbne en ny pen, foretage dine ændringer og vælge Skabelon skyderen i indstillingsmenuen.
https://vimeo.com/221428690
Indtil for nylig kunne gratis brugere kun lave tre skabeloner, men nu kan alle brugere have så mange skabeloner på deres konto, som de vil. Perfekt til at komme i gang med en ny idé med minimal forsinkelse!
4. Modesamarbejde
Evnen til at samarbejde og undervise med CodePen kan være dens største aktiv. Der er allerede et væld af gode samarbejdsværktøjer til programmører, men CodePens tilgang er enkel og intuitiv.
Pro -brugere af CodePen kan oprette en ny pen og åbne den for samarbejde under Skift visning menu. Dette ændrer pennens link til en invitation, der kan deles, og som kan rumme et antal personer afhængigt af din CodePen Pro -plan.
bedste videospil soundtracks at studere til
I dette tilfælde skrev jeg HTML, mens en ven opdaterede CSS i realtid med en mærket markør, der identificerede, hvor de arbejdede.
Alle med linket kan deltage og bruge chatfunktionen i browseren, uanset om de er en pro-bruger eller endda har en CodePen-konto. Forudsat at autolagring er slået fra, er det kun ejeren af pennen, der kan gemme eventuelle ændringer, hvilket gør det til en sikker måde at åbne din kode for andre uden risiko.
Denne tilstands åbne karakter er fordelagtig for begyndere, da du kan invitere næsten alle ind i din pen til at guide dig gennem et svært koncept. Det er også en praktisk tilstand at kende din vej rundt, da den er perfekt til at interviewe potentielle medarbejdere, og har allerede blevet brugt professionelt på denne måde !
5. Professor Mode
Professor -tilstand tillader en Pro -bruger at være vært for et værelse, hvor kun de kan redigere koden. Mellem 10-100 brugere kan se og chatte afhængigt af værtens Pro-plan.
Professortilstanden giver fleksibilitet mellem klasselæring og fjernundervisning eller en kombination af de to. Brug af professor -tilstand gør det muligt for folk bagest i klassen at have den samme oplevelse som dem foran, og for læreren at vise fejlrettelser, der opdateres i realtid.
6. Præsentationstilstand
Præsentationstilstand er ikke overraskende designet med præsentationskode i tankerne. App'en vises i en forenklet visning, der er designet til at arbejde med overheadprojektorer. CodePen har optimeret præsentationstilstand til brug på internetforbindelser med lavere hastighed og svagere hardware.
Kloge læsere har måske allerede indset, at den gratis version af CodePen ville levere netop denne funktion, selvom Pro -tilstanden har et par nyttige funktioner. Layout, skriftstørrelse og temaer kan hurtigt ændres i farten, så de passer til næsten enhver indstilling, og ved at vise linket til pennen får du en forkortet URL i jumbo-størrelse, der gør det lettere at dele projektet.
Disse små ændringer, sammen med at de kan skalere forhåndsvisningsvinduet, så det passer til det, du viser frem, gør præsentationstilstand perfekt til både lærere og udviklere, der præsenterer ideer for kolleger. Præsentationstilstand er også en ren og enkel måde at præsentere kode på, hvis du finder dig selv til at interviewe for en programmeringsposition.
7. Mønstre
Søgning efter inspiration er blevet meget lettere med CodePens samlinger af Designmønstre .
Hver kategori er en samling eksempler på kode, der leveres af CodePen -brugere til specifikke opgaver. Leder du efter en måde at oprette dynamiske knapper til dit websted? Harmonika -menuer? Der er et væld af kategorier, der passer til næsten ethvert eksempel.
Disse mønstre er også en fantastisk måde at lære, hvordan interaktive knapper fungerer, og de forskellige måder dynamiske brugergrænseflader kan fungere på.
8. Emmet
Emmet , tidligere kendt som Zen Coding, betragtes bredt som den største tidsbesparelse for HTML- og CSS -udvikling. Pluginet tager noget af den kode, du finder dig selv at skrive meget og konverterer dem til enkle genveje.
At se det i aktion er bedre end at forklare det, så tag den sædvanlige opsætning for et HTML -dokument:
Tilføjelse af dette til hvert HTML -dokument er reduceret til to handlinger. Brug Emmet til at skrive ! og ramte Tab nøgle. Magi!
Emmet er aktiv som standard på CodePen og er især nyttig, hvis du forsøger at lære et nyt koncept i JavaScript og hurtigt skal oprette understøttende HTML og CSS.
Udvikl med CodePen for en bedre oplevelse
CodePen er et glimrende værktøj til webudviklere, og feltet vokser konstant. JavaScript er et godt sprog at lære for en fremtid inden for webudvikling.
hvorfor vil min computer ikke oprette forbindelse til internettet
Der er nogle gode selvstudier og kurser til rådighed for folk, der ønsker at komme i gang med JavaScript, og CodePen er et godt miljø til at afprøve dine nye færdigheder.
Del Del Tweet E -mail De 8 bedste websteder til gratis download af lydbøgerLydbøger er en fantastisk underholdningskilde og meget lettere at fordøje. Her er de otte bedste websteder, hvor du kan downloade dem gratis.
Læs Næste Relaterede emner- Programmering
- HTML
- Web-udvikling
- JavaScript
- CSS
Ian Buckley er freelance journalist, musiker, performer og videoproducent bosat i Berlin, Tyskland. Når han ikke skriver eller på scenen, piller han med DIY -elektronik eller kode i håb om at blive en gal videnskabsmand.
Mere fra Ian BuckleyAbonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
Klik her for at abonnere