En af de mange frustrerende ting ved webudvikling er ikke det at have en nem måde at dele dine projekter med andre. I mange tilfælde er du nødt til at være vært for dit projekt på en webserver eller sende alle de tilsvarende filer til en, der vil se, hvad du har oprettet. Men takket være et pænt online-værktøj kaldet CodePen, behøver du ikke bekymre dig om noget af det længere.
CodePen.io
CodePen er et gratis værktøj, der giver dig mulighed for at være vært for dine projekter online uden nogensinde at skulle betale en krone. For at komme i gang skal du gå til CodePen.io og oprette en gratis konto.
Når du har gjort det, kan du oprette en "pen" ved at klikke på knappen "Ny pen" øverst til højre på skærmen.
Derefter kan du tilføje enhver HTML, CSS og JavaScript til deres tilsvarende felter. Når du begynder at tilføje en eller anden kode, får du en direkte forhåndsvisning af, hvad du opretter. Du kan title din første pen i øverste venstre hjørne. Når du har klikket på din første "Gem", kan du bare dele URL-adressen til siden med venner, familie og kolleger, så de kan se, hvad du arbejder på.
Sådan ser din pen ud med en eller anden kode i den (med tilladelse til et Free Code Camp-projekt kaldet Tribute Page):
Når du opretter din egen pen, skal du gennemgå Indstillingerne, inden du kommer i gang. Når du klikker på knappen "Ny pen", skal du se en pen skabelon, der er klar til at begynde at indtaste en kode. I øverste højre hjørne er der en "Indstillinger" -knap. Klik på det (du skal se nedenstående skærmbillede).
Her kan du gå gennem fanerne HTML, CSS og JavaScript for at tilføje visse oplysninger. I fanen HTML kan du tilføje meta-oplysninger, ting, der skal gå i
fane osv. Under CSS kan du tilføje CSS-forprocessorer som LESS og Sass. Ikke kun det, men du kan tilføje ekstern CSS som Bootstrap og Foundation. Under fanen JavaScript kan du tilføje en JavaScript-forarbejder som Babel eller CoffeeScript. Derudover kan du tilføje eksterne JavaScript-rammer som Angular, React, Lodash, D3 og så videre.
Endelig vil CodePen give dig mulighed for at ændre den "Visning", du ser på. Standardvisningen er Editor View, så du kan indtaste din kode og få en lille forhåndsvisning i konsollen nedenfor. Men der er også andre muligheder, hvor en særlig praktisk visning er "Full Page" -visning, hvor du får se et projekt, som om det var live på et websted. Der er en håndfuld andre visninger tilgængelige at skifte til, det er værd at lege med!
CodePen er virkelig et pænt værktøj, og vi har kun berørt overfladen af dets brugbarhed. Det er værd at gå videre til CodePen.io og bruge den til at arbejde på et par projekter, og derefter, hvis du har lyst til det, så del det med dine venner eller kolleger.
Hvad synes du om CodePen? Har du brugt et lignende værktøj? Fortæl os det i kommentarfeltet nedenfor!
