Noe av det mange frustrerende ved nettutvikling er å ikke ha en enkel måte å dele prosjektene dine med andre på. I mange tilfeller må du være vertskap for prosjektet ditt på en webserver eller sende over alle de tilsvarende filene til noen som vil se hva du har laget. Men takket være et pent online verktøy som heter CodePen, trenger du ikke å bekymre deg for noe av det lenger.
CodePen.io
CodePen er et gratis verktøy som lar deg være vert for prosjektene dine på nettet uten å måtte betale en krone. For å komme i gang, gå over til CodePen.io og opprett en gratis konto.
Når du har gjort det, kan du opprette en "penn" ved å klikke på "Ny penn" -knappen øverst til høyre på skjermen.
Etter det vil du kunne legge til HTML, CSS og JavaScript i de tilsvarende boksene. Når du begynner å legge til en kode, får du se en forhåndsvisning av det du oppretter. Du kan tittelen din første penn i øverste venstre hjørne. Etter at du har klikket på den første "Lagre", vil du ganske enkelt kunne dele URL-adressen til siden med venner, familie og kolleger, slik at de kan se hva du jobber med.
Slik vil pennen din se ut med en kode i den (med tillatelse av et Free Code Camp-prosjekt kalt Tribute Page):
Når du oppretter din egen penn, vil du gå gjennom Innstillinger før du kommer i gang. Når du klikker på "Ny penn" -knappen, skal du se en pennmal som du kan begynne å legge inn kode. Øverst i høyre hjørne vil du finne en “Innstillinger” -knapp. Klikk på det (du skal se skjermbildet nedenfor).
Her vil du kunne gå gjennom fanene HTML, CSS og JavaScript for å legge til viss informasjon. I HTML-fanen kan du legge til metainformasjon, ting som bør gå i
fane, og så videre. Under CSS vil du kunne legge til CSS-forprosessorer som LESS og Sass. Ikke bare det, men du kan legge til ekstern CSS som Bootstrap og Foundation. Under JavaScript-fanen kan du legge til en JavaScript-forprosessor som Babel eller CoffeeScript. I tillegg kan du legge til eksterne JavaScript-rammer som Angular, React, Lodash, D3 og så videre.
Endelig vil CodePen tillate deg å endre "Visningen" du ser på. Standardvisningen er Editor View, slik at du kan angi koden din og få en liten forhåndsvisning i konsollen nedenfor. Men det er andre alternativer også, med en spesielt praktisk visning som "Full Page" -visning, hvor du får se et prosjekt som om det var live på et nettsted. Det er en håndfull andre visninger tilgjengelig for å bytte til, det er verdt å leke med!
CodePen er virkelig et pent verktøy, og vi har bare berørt overflaten av dens nytte. Det er verdt å ta turen over til CodePen.io og bruke den til å jobbe på noen få prosjekter, og deretter, hvis du vil, del med vennene dine eller kollegene.
Hva synes du om CodePen? Har du brukt et lignende verktøy? Gi oss beskjed i kommentarfeltet nedenfor!
