Hvad hvis der var en platform, hvor du kunne redigere kode, teste et bibliotek, en ramme eller en komponent og se ændringerne ske lige foran dine øjne? Og hvad nu hvis du kunne dele dine eksperimenter med andre udviklere eller kopiere fra dem for at forbedre dine kodningsevner, fejlsøge dit arbejde hurtigt og finde inspiration?
Jeg prøvede et værktøj, der gør softwareudviklerens liv meget lettere: KodePen, selvbeskrevet som „a socialt udviklingsmiljø til front-end designere og udviklere“.
Denne artikel vil forklare Hvad er CodePen, hvad du kan gøre med det og hvordan, og hvorfor det kan være et meget nyttigt værktøj til at fremskynde din front-end udvikling.
CodePen er en udviklingsplatform, hvor alle kan redigere front-end sprog som HTML, CSS og JavaScript fra deres browser uden at downloade nogen software.
Det bedste er, at resultaterne kan ses i realtid, hvilket giver mulighed for hurtigere fejlfinding. Udviklere og designere kan også oprette og dele kodestykker (kaldet penne) med resten af verden.
Takket være det store samfund, som CodePen har bygget, er der tusindvis af brugere opretter og deler Deres ideer om Front-end komponenter, animationer og endda næsten færdige layouts af websider. Hvis du har nogle egne ideer, der kan være nyttige for andre front-end-fagfolk, er dette det perfekte sted at dele dem. Alt du behøver er at sikre dig, at din kode er fri for ophavsret.
Hvis du ikke er interesseret i at bruge andres kode, kan du altid bruge CodePens online kodeditor til oprette typografien til dine projektkomponenter. På denne måde kan du sikre, at din ikke påvirkes af kode beregnet til at style andre komponenter. Du kan tænke på det som en blankt lærred.
Jeg anbefaler at oprette en pen til hver komponent, da du arbejder med mindre kode hver gang. På denne måde forhindrer du fejl (som at ændre kode for en komponent, der ødelægger en anden) og kun indser det i sidste ende.
CodePens browserbaserede editor er et godt værktøj til at teste og køre en ny ramme eller bibliotek. Du behøver ikke at oprette et nyt miljø, hver gang du vil se, om dine ændringer fungerer. Editorvisningen viser samtidig tre redigeringsområder og forhåndsvisning, opdaterer de endelige resultater hver gang noget ændrer sig.
Nu hvor du ved, hvad CodePen bruges til, lad os undersøge, hvordan det fungerer. Platformen er meget brugervenlig og indeholder en masse funktioner. Nogle kan endda gå ubemærket hen, selvom du allerede har brugt det flere gange.
Lige på hovedsiden får du et glimt af, hvad du kan søge: specifikke kuglepenne, mennesker, projicerer eller samlinger. Du kan også tjekke CodePen-forslag (det er en god mulighed at se andres kode og lære nogle tricks), eller du kan trykke på søgefeltet for at lede efter noget mere specifikt. Hvis du er hurtig til at skrive og trykke på enter, vil du sandsynligvis ikke bemærke det Du kan udforske emner! De er organiseret i tre forskellige kategorier:
Hvert emne har en side, hvor du kan udforske penne, skabeloner og ressourcer. Listen over emner er lukket, men du kan udfylde en formular og bede om en bestemt.
Hvis du ser på eksemplerne, vil du hurtigt se et skærmbillede af pennen forhåndsvisning af det endelige resultat og overvej, om det er noget værd at interessere dig.
Derefter kan du enten klikke direkte på pennen og åbne Redigeringsvisning (hvor du kan spille med koden) eller klik på ekspansionspilene i højre øverste hjørne for at åbne Detaljer Vis. Denne visning giver dig mulighed for at kommentere pennen, synes godt om og følge forfatteren, se og interagere med det, som denne pen, hvor du kan spille xylofonen.
Du kan også fastgøre det for at se det eller bruge det senere. På navigationslinjen inde i Din sektionen, disse penne vises i gruppen med fastgjorte emner.
Den Kodeditor er min yndlingsdel af CodePen. Med dette værktøj kan du se HTML-redaktør, den CSS-redaktør, og Javascript-editor samtidig med forhåndsvisningen, det opdateres automatisk, når du ændrer koden.
Der er ingen grund til at skifte mellem fil- og browserfaner, hvilket gør kodningsprocessen hurtigere. Desuden, hvis du ikke har brug for en af disse sektioner, kan du skjule den ved at justere dens størrelse.
Du kan altid tilpasse layoutet af din pen. Standardvisningen har tre kodesektioner øverst og den forhåndsvisning nederst. Men hvis du har brug for mere højde i din forhåndsvisning, som en mobilversion af en webapp, kan du ændre layoutet under Skift visning menu og juster kodeafsnittene lodret.
Som jeg har nævnt tidligere, CodePen giver dig mulighed for at arbejde med mere end bare ren HTML, CSS og Javascript. Hvis du vil inkludere andre rammer, bibliotek eller præprocessor, skal du gå til Indstillinger. Du finder en fane for hver af kodesektionerne med muligheder for ændre forprocessoren og inkludere eksterne kilder, som stylesheets eller scripts.
Hvis du ved en eller anden tilfældighed er mere bekendt med Haml end ren HTML, skal du vælge Haml i den første rullemenu. Hvis du vil bruge Bootstrap på din pen, skal du gå til de eksterne stylesheets i CSS-sektionen, skrive „Bootstrap“, vælge den mulighed, du vil bruge, og inkludere så mange kilder, som du har brug for! Det er virkelig meget nemt at sætte en pen op.
På indstillingerne kan du også:
Derudover har du stadig adgang til andre funktioner i Code Editor, herunder aktiver til professionelle brugere, en fejlfindingskonsol, og komplet liste over projekteksportmuligheder.
En af de mest interessante og ubemærkede knapper på Code Editor er“nøgler„. Her finder du komplet liste over genveje tilgængelig på CodePen, herunder Autofuldfør funktion, som du, ligesom mig, sandsynligvis troede ikke eksisterede.
Hvis du er en KodePen Pro bruger, tilføjelse af et billede er en tre-trins proces:
Hvis du, ligesom mig, bruger gratis version af CodePen, skal du hoste dit foto et eller andet sted online for at have et link klar til brug. Nogle af de tilgængelige muligheder er Imgur , IMGBb men der er mange andre websteder, der tilbyder gratis hosting til dine fotos. Upload det billede, du vil bruge, og kopier linket. Nu kan du placere det som en img src, baggrundsbillede, osv.
Den nemmeste måde at downloade din pen på er kopiere og indsætte Koden i dit projekt Det er det, jeg plejer at gøre. Ikke desto mindre kan du eksport pennen som en zip-fil eller som en Github Resumé.
„Eksport“ er den anden knap, der tæller fra højre på sidefoden (hvis du ikke kan se den, skal du gemme din pen først). Klik på det, og vælg din yndlingsmulighed.
Hvis du spørger „Kan jeg bruge React på CodePen?“, svaret er „Ja!“. Hvis du bruger et andet JavaScript-bibliotek, vil svaret også være ja i næsten 100% af tilfældene.
For at bruge React på CodePen skal du få adgang til indstillinger af din pen og vælg fanen JS. Hvis du åbner den og ser på indstillingerne i den første rullemenu, ser du ikke React, kun de let tilgængelige forprocessorer.
Sådan tilføjer du React til Codepen du skal vælge kombinationsboksen på „Tilføj eksterne scripts/penne“ og skriv „React“ for at vise alle de tilgængelige muligheder. Vælg dem, du har brug for, og du er klar til at kode!
På CodePen er det også muligt at bruge Flutter og Vue, men du vil ikke være i stand til at vælge dem ligesom du gjorde med React. Husk emner Da jeg forklarede hvordan man søger på CodePen? Det er kun gennem dem, du kan få adgang Vue og Flutter personlige redaktører.
Gå til siden „Udforsk emner“, vælg det, du ønsker, og i øverste højre hjørne finder du „Åbn editor“ knap. Du har kun to sektioner om disse redaktører: den ene til kode og den anden til forhåndsvisning.
Bare rolig, hvis du bruger SCSS i stedet for CSS, men dit projekt understøtter kun almindelig CSS. Du har mulighed for transformere det med et enkelt klik.
På pilen i øverste højre hjørne af det valgte kodeafsnit har du mulighed for at „Vis kompileret...“. Alt du skal gøre er at klikke på det, og det er gjort.
Vær ikke bange for at gøre det; du kan ændre det tilbage. Når du downloader koden, vil du også se en mappe med den kompilerede version inde.
CodePen er fantastisk til at redigere kode og se resultaterne i realtid, mens det giver dig mulighed for at lære kode effektivt. Hvis du starter et nyt front-end udviklingsprojekt, her er de vigtigste grunde til, at du skal bruge CodePen.
Hvad skal jeg ellers sige? Du kan gøre alt, hvad jeg har nævnt ovenfor Uden at skulle betale noget. Hvis du vil, kan du Gå til Pro og betal et månedligt abonnement for at få adgang til yderligere funktioner som private kuglepenne, personlige skærmbilleder, aktiver og flere visningslayouter.
Jeg har en gratis konto, og jeg havde ikke brug for disse ekstra funktioner indtil videre.
Hvis du ikke vil oprette en konto, behøver du ikke. Du kan stadig søge og bruge kodeditoren. Imidlertid, du vil ikke være i stand til at gemme dine kuglepenne for at besøge dem senere. Så hvis du kun vil teste et par ting, kan du gøre det uden en konto.
En af de største fordele ved CodePen er evnen til Se alt på en enkelt skærm. Ikke at skulle skumme gennem browserfaner eller filfaner gør min kodning hurtigere og lettere. Derudover giver det en forhåndsvisning i realtid, hvilket reducerer tiden for genindlæsning af sider, hver gang vi har brug for at se resultatet af kodeændringerne.
CodePen er et koderedigeringsværktøj, hvor vi kan bruge foruddefinerede forprocessorer, biblioteker og rammer, hvilket gør vores liv lettere. Vi kan gøre det med blot et par klik og opsæt en pen på det sprog, vi ønsker at bruge. Hvor fantastisk er det her?
Hvis du har brug for at finde eksempler på noget, der tidligere er gjort, vil du sandsynligvis finde dem! Animationer, elementer, fulde sider, du navngiver det. CodePen har det!
CodePen var en enorm hjælp til mit afhandlingsprojekt, hvor jeg var nødt til at oprette en helt ny front-end til et eksisterende projekt. Jeg bruger det hver gang jeg vil lære noget nyt som React og Animations eller teste et bibliotek/ramme/komponent isoleret.
Når jeg bruger CodePen, er jeg ikke bekymret for eksisterende kode. Det giver mig frihed til at skabe UI komponenter rolig og anvend dem på projektets kode, risikofri.
Som en softwareudvikler ved Imaginær sky, Jeg føler, at dette er et af de værktøjer, der virkelig kan fremskynde din udvikling som koder. Prøv det!
Webudvikler med en særlig kærlighed til front-end. Mor til katte. Jeg forsøger at hjælpe med at redde planeten i min fritid ved at dele miljøvenlige alternativer.
People who read this post, also found these interesting:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
