CodePen: Izdelano, preizkušeno, skupno rabo in odkrivanje HTML, CSS in JavaScript

Codepen: izdelava, preizkušanje in odkrivanje čelne kode

Eden od izzivov sistema za upravljanje vsebin je preizkušanje in izdelava skriptnih orodij. Čeprav to pri večini založnikov ni zahteva, kot tehnološka publikacija občasno rad izmenjujem delovne skripte, da bi pomagal drugim. Delil sem, kako uporabljati JavaScript za preverjanje moči gesla, kako preverite sintakso e-poštnega naslova z regularnimi izrazi (Redni izraz), in nazadnje to dodal kalkulator za napoved vpliva prodaje spletnih pregledov. Upam, da bom na spletno mesto dodal na desetine orodij, vendar WordPress ni ravno naklonjen takšnemu objavljanju ... je vsebinski sistem in ne razvojni sistem.

Torej, da bi moje male skripte delovale, z veseljem uporabljam CodePen. CodePen je lepo organizirano orodje s ploščo HTML, ploščo CSS, ploščo JavaScript, konzolo in objavljeno nastalo kodo. Vsaka plošča ima informacije, ko z miško premikate elemente, da boste razumeli, kaj je mogoče, pa tudi barvno kodiranje HTML-ja, CSS-ja in JS-ja za lažje urejanje in pisanje.

CodePen je okolje socialnega razvoja. V svojem srcu vam omogoča, da v brskalnik napišete kodo in si ogledate njene rezultate med gradnjo. Koristni in osvobajajoči spletni urejevalnik kod za razvijalce kakršnih koli spretnosti in zlasti opolnomočen za ljudi, ki se učijo kodiranja. CodePen se osredotoča predvsem na čelne jezike, kot so HTML, CSS, JavaScript in sintakse predobdelave, ki se spremenijo v te stvari.

O CodePenu

S CodePenom sem lahko opravil vse potrebno delo objavi kalkulator Vdelal sem v spletno mesto. Večina kreacij na CodePenu je javnih in odprtokodnih. So živa bitja, s katerimi lahko komunicirajo drugi ljudje in skupnost, od preprostega srčka, do dajanja komentarjev, do vilic in spreminjanja za lastne potrebe.

CodePen - kalkulator za napovedovanje vpliva prodaje na spletne preglede

S CodePenom lahko spremenite pogled, če želite, da so podokna na levi, desni ali spodnji strani med delom ... ali si ogledate HTML v novem zavihku. Vzporedni pogled neverjetno dobro deluje pri preizkušanju odzivnih nastavitev, saj lahko prilagodite velikost vidnega podokna.

Vsak svoj delovni skript lahko organizirate v pisala, jih združite v Projekti (urejevalnik več datotek) ali celo zgradite zbirke. V bistvu gre za delujoče spletno mesto s portfeljsko kodo, na katerem lahko spremljate druge avtorje, viličaste druge javne projekte, ki jih želite spremeniti, in se celo naučite, kako narediti nekaj zabavnih stvari z izzivi.

Shranite lahko kot GitHub Gist, izvozite v zip datoteko in celo Embed pero v takem članku:

Glej pero
Predvideni vpliv prodajnih pregledov na prodajo
by Douglas Karr (@douglaskarr)
on CodePen.


Ena od omejitev urejevalnika Pen je velik obseg kode. Morda ne boste nikoli naleteli na to težavo, saj bi moral urejevalnik imeti na stotine ali celo tisoče vrstic kode. Ko pa začnejo udarjati 5,000 - 10,000 ali več vrstic kode, boste videli, da urejevalnik začne odpovedovati. Lahko pa dodate zunanje sklice na tabele stilov ali JavaScript, ki gostuje drugje!

Priporočam vam, da se prijavite. Naročeni boste na njihov tedenski e-poštni naslov, vir pa lahko dodate tudi v svoj vir RSS, da boste lahko videli na novo objavljene pisala. In če začnete tam iskati ali brskati po javnih pisalih, boste našli nekaj neverjetnih projektov ... uporabniki so nadarjeni!

Sledite Douglas Karr na Codepenu

Plačljiva različica CodePen Pro ponuja številne dodatne funkcije za izboljšano funkcionalnost ali skupine - vključno s sodelovanjem, procesi, gostovanjem sredstev, zasebnimi pogledi in celo postavljenimi projekti z lastno domeno ali poddomeno. In seveda CodePen ponuja odlično shrambo z integracijo Github, kjer lahko deluje celotna ekipa. Če želite preizkusiti preprosto kodo, kakršna sem jaz, je CodePen neprecenljivo orodje.

Kaj menite?

Ta stran uporablja Akismet za zmanjšanje nezaželene pošte. Preberite, kako se vaš komentar obravnava.