Share
Da jeg skrev om JSBin en stund tilbake, var det definitivt opphørt mye samtale og debatt om hvilken online kodestykker redaktør var best. Et par alternativer ble kastet ut, spesielt CodePen.
Med så mange lesere som føler seg så lidenskapelige og forpliktet til sine bestemte valg, ville jeg gjøre en writeup som fremhevet noen av CoolPools kulde. Jeg vil si at dette ikke er en sammenligningsartikkel, hovedsakelig fordi jeg virkelig hater å gjøre disse typer artikler. Hvert av disse verktøyene er unikt og tilbyr sin egen verdi som jeg finner koker ned til brukerpreferanse, i mange tilfeller.
Det er definitivt likheter mellom verktøyene, både i brukergrensesnitt og funksjonalitet. Hvis vi ser på begge verktøyene, ser du at multi-panel-brukergrensesnittet er ganske vanlig og med god grunn. det er veldig intuitivt.
JSBin:
CodePen:
Flerpanel-tilnærmingen gjør det utrolig enkelt å visualisere alle fasene i prøvekoden din, slik at du raskt kan oppdatere markup eller JavaScript og få umiddelbare resultater. Og det er hva disse verktøyene generelt gjelder for; rask prototyping og testing av kodestykker.
I tillegg til brukergrensesnittene, tillater begge redaktørene brukere å:
Fra mitt perspektiv er disse alle kritiske funksjonene til ethvert kodeboksverktøy, slik at en bruker ikke bare kan prototype frontend-kode ved hjelp av de eiendelene de vanligvis bruker, men også tillater dem å dele den over de fleste medier som brukes av utviklere. Som teknisk forfatter er evnen til å bygge inn en live-kode veldig viktig siden den gir tilbakemelding i sanntid for å demo koden jeg lager, forsterker konseptene jeg skriver om, samtidig som jeg gir ekte tilbakemelding og kode til leseren.
I noen tilfeller koker funksjonen paritet ned til kostnad, om disse funksjonene er tilgjengelige eller ikke. For eksempel, hvis du vil ha samarbeidsfunksjoner, tilbyr JSBin det gratis, mens det er en funksjon som bare er tilgjengelig for CodePens Pro-nivå-tilbud. Og for å være klar (og jeg har sagt dette før), synes jeg det er greit å lade for gode funksjoner. Så om funksjonen er gratis eller abonnementsbasert, er det irrelevant etter min mening, så lenge det gir brukeren verdi.
Av alle de kodingsverktøyene jeg har brukt, kan jeg sikkert si at CodePen er langt den mest estetisk tiltalende og ærlig, er det fornuftig. CodePens front-end-design ble bygget av den ekstremt talentfulle utvikleren Chris Coyier som har et fantastisk øye for brukergrensesnittdesign. Og det viser sikkert i det polerte utseendet på verktøyet.
Mange tanker har blitt satt inn for å gi enkel tilgang til de mange viktige funksjonene, samtidig som det sikres at redaktøren ikke er rotete og funksjoner ikke er påtrengende. Dette er viktig siden viewport eiendom, i denne typen brukergrensesnitt, er stramt. Forsøker å balansere alt, gi en anstendig kodingserfaring på flere språk, samtidig som det gir umiddelbare resultater; Det er vanskelig og krever litt tenkning når det gjelder layout.
Dette er tydelig tydelig i bruken av velplasserte ikoner innenfor overskriftene til hver skriptrute.
Ved å utnytte et ofte brukt UI-ikon for innstillinger (et utstyr), kan du se hvordan CodePen-teamet har godt konsolidert en del viktig, komplementær funksjonalitet som forbedrer prototyping-opplevelsen. Dette er hva jeg mener med brukergrensesnittet ikke å være påtrengende: tilbyr intuitive snarveier til ekstra funksjoner. Men det er mer enn å kaste inn ekstra funksjoner. Dette er virkelige verktøy som webutviklere bruker hver dag og er viktige for å få en legitim følelse av om prototypen skal fungere eller ikke.
Funksjoner som "detaljer"visning viser CodePen s fokus på å tilby ikke bare en solid redigering opplevelse, men en sterk sosial vinkel som gjør det mulig for brukere å få bedre synlighet i nytten av kodestykker de deler:
Nå, mens begge verktøyene tilbyr omfattende komplementære funksjoner, viser CodePen etter min mening et klart skrå mot å gi bedre verktøy for designere via sin rike støtte til Sass, LESS og Stylus, inkludert tilleggsprogrammer som Compass, Bourbon og Nib.
Men mens det skinner i CSS og markup, tilbyr CodePen ikke så mye som JSBin når det gjelder JavaScript-bibliotekstøtte. Det er ikke å si at det ikke inkluderer mange av de store aktørene, men med de mange nye bibliotekene og rammene som er i bruk i dag, er det en klar forskjell når det gjelder innebygd støtte:
CodePen:
JSBin:
Det er klart fra disse skjermbildene (som bare er partielle fangster) at bredden av JavaScript-rammeverkstøtte er langt mer omfattende enn CodePen både i tall og støttede versjoner. CodePen tilbyr muligheten til å inkludere en ekstern JavaScript-ressurs i kodebiten din, men det er ganske praktisk å kunne klikke på en rullegardin og velge fra en rekke JS-rammer..
Det er en funksjon, men det er et totalt skiller ut for meg, og det er dette:
Det er riktig. CodePen inkluderer integrering med et av mine favoritt nettleser testing verktøy, BrowserStack.com. Jeg har skrevet om tjenesten før og elsker absolutt det for sin enkelhet for testing og bredde i nettleserdekningen, så å se at CodePen tilbyr integrering med det er et stort pluss. Men det er mer enn den ene knappen som gjør det fantastisk. Det er dropdown ved siden av det som lar deg bestemme hvilken nettleser du vil målrette mot:
... som deretter leder deg til BrowserStack med samme informasjon:
Med hensyn til bekvemmelighet er dette en klar vinner for utviklere. Det er viktig å merke seg at du blir omdirigert fra CodePen når du klikker på BrowserStack-knappen, og du må ha en BrowserStack-konto for å kunne bruke den.
CodePen kommer i en gratis utgave og en mer funksjonsrik Pro versjon. Dette inkluderer funksjoner for live forhåndsvisning av kode på tvers av flere enheter, samarbeid med andre utviklere, tema av innebygde kodepenner og intuitiv "Professor Mode" som er veldig nyttig for online trening og klasser.
Av de tilgjengelige Pro-funksjonene er de to som jeg finner mest nyttige, de Sanntid og Asset Hosting med sistnevnte lar utviklere laste opp eiendeler som bilder og skriptfiler som kan brukes direkte i kodepennen.
Du lurer kanskje på hvorfor dette er nyttig? Vel, alternativet er å finne et eksternt hosting-alternativ som en CDN eller din egen server. Å kunne laste opp din egen egendefinerte JavaScript-fil, bilder eller stilark løser dette problemet og gjør at disse eiendelene er lett tilgjengelige for bruk i kodepennene dine. Når det er lastet opp, er det enkelt å klikke på aktiva, ta tak i nettadressen og slippe den inn i koden din:
Dette alene fortjener $ 9 per måned for å bruke tjenesten, og det virker unikt for CodePen.
Grunnen til at jeg virkelig liker Sanntid funksjon er fordi testing over forskjellige formfaktorer er utrolig viktig i dag. Dette gjøres ved å sende pennens link til enheten du vil teste med. Det kan gjøres ved å skrive det direkte inn i nettleserens nettleser eller ved hjelp av CodePens delingsdialog for å sende en tekstmelding til en mobilenhet:
Når pennen er oppdatert på datamaskinen, gjenspeiler den nesten umiddelbart endringene på tvers av alle enheter.
CodePen er et flott verktøy. Den er veldig polert og funksjonell med fantastisk støtte for markup og CSS verktøy. Det faktum at noen funksjoner bare er abonnementsbaserte, faser meg ikke litt siden jeg ikke har noe imot å støtte god programvare. Jeg vil si at noen funksjoner virker som om de burde være en standard del av tjenesten, spesielt å lage private penner og vise forhåndsvisning, spesielt når andre tjenester allerede tilbyr det gratis.
Etter min mening, etter å ha brukt både JSBin og CodePen, er det klart at de deler svært liknende evner og valget av hvilken tjeneste å bruke, vil til slutt komme ned til personlig preferanse. Noen kan likte den profesjonelle brukergrensesnittet til CodePen, mens andre kan sette pris på den omfattende bredden av JavaScript-rammeverkstøtte i JSBin. Det kan bare koker ned til å bruke begge for å oppnå forskjellige oppgaver, men jeg kan si CodePen er absolutt en verdig tjeneste å utnytte, og jeg vil legge den til mine verktøy for handel.
Accentsconagua