Share
När jag skrev om JSBin ett tag tillbaka, blev det definitivt uppkopplat en hel del konversation och debatt om vilken kodkod editor som var bäst. Ett par alternativ slogs ut, särskilt CodePen.
Med så många läsare att känna sig så passionerad och engagerad i sina specifika val, ville jag göra en writeup som lyfte fram några av coolheten i CodePen. Jag kommer att säga att det här inte är en jämförelsepartikel, främst för att jag verkligen hatar att göra sådana typer av artiklar. Vart och ett av dessa verktyg är unikt och erbjuder sitt eget värde som jag finner koka ner till användarens preferens, i många fall.
Det finns definitivt likheter mellan verktygen, både i användargränssnitt och funktionalitet. Om vi tittar på båda verktygen ser du att flera panelen användargränssnitt är ganska vanligt och med god anledning. det är väldigt intuitivt.
JSBin:
CodePen:
Flerpanel-tillvägagångssättet gör det oerhört enkelt att visualisera alla aspekter av din provkod, så att du snabbt kan uppdatera markup eller JavaScript och få omedelbara resultat. Och det är vad de här verktygen generellt är för; snabb prototyper och testning av kodutdrag.
Förutom användargruppernas likheter tillåter båda redaktörerna att:
Ur mitt perspektiv är dessa alla viktiga funktioner för alla kodverktyg, vilket gör det möjligt för en användare att inte bara prototypa frontend-kod genom att använda de tillgångar som de brukar använda men också låta dem dela den över de flesta medier som används av utvecklare. Som teknisk författare är möjligheten att bädda in ett live-fragment otroligt viktigt eftersom det ger realtids återkoppling för att demo koden som jag skapar, förstärka de begrepp jag skriver om och samtidigt ge reell återkoppling och kod till läsaren.
I vissa fall kolliderar funktionspariteten till kostnad, om dessa funktioner är tillgängliga eller inte. Till exempel, om du vill ha samarbete funktioner, erbjuder JSBin det gratis medan det är en funktion som endast är tillgänglig för CodePens Pro-nivå erbjudande. Och för att vara klar (och jag har sagt det här förut), tycker jag att det är helt bra att ladda för bra funktioner. Så om funktionen är fri eller prenumerationsbaserad är det irrelevant enligt min mening, så länge det ger användaren värde.
Av alla de kodverktyg som jag har använt kan jag säkert säga att CodePen är den mest estetiskt tilltalande och rättvist, det är vettigt. CodePens front-end-design byggdes av den extremt begåvade utvecklaren Chris Coyier som har ett fantastiskt öga för användargränssnitt. Och det visar verkligen i det polerade utseende och känslan av verktyget.
Många tankar har lagts in för att ge enkel åtkomst till de många viktiga funktionerna samtidigt som man ser till att redaktören inte är rörig och funktionerna är inte påträngande. Detta är viktigt eftersom Viewport Real Estate, i denna typ av användargränssnitt, är tätt. Försöker balansera allt, ge en ordentlig kodningsupplevelse på flera språk, samtidigt som det ger omedelbara resultat. Det är knepigt och tvingar lite att tänka när det gäller layout.
Detta framgår tydligt av användningen av välplacerade ikoner inom rubrikerna för varje manuspanel.
Genom att använda en vanligt använd UI-ikon för inställningar (ett redskap) kan du se hur CodePen-teamet har konsoliderat en del viktiga, komplementära funktioner som förbättrar prototypupplevelsen. Det här menar jag med att användargränssnittet inte är påträngande: erbjuder intuitiva genvägar till extrafunktioner. Men det är mer än att bara kasta in extrafunktioner. Dessa är verkliga verktyg som webbutvecklare använder varje dag och är viktiga för att få en legitim känsla för huruvida prototypen ska fungera eller inte.
Funktioner som "detaljer"visa demonstrerar CodePen s fokus på att inte bara tillhandahålla en solid redigeringsupplevelse utan en stark social vinkel som gör det möjligt för användarna att få bättre synlighet i användbarheten av kodprocesserna som de delar:
Nu, samtidigt som båda verktygen erbjuder omfattande kompletterande funktioner, visar CodePen enligt min uppfattning en tydlig snedställd riktning mot att erbjuda bättre verktyg för designers via sitt rika stöd för Sass, LESS och Stylus, inklusive tillägg som Kompass, Bourbon och Nib.
Men medan det lyser i CSS och markup, erbjuder CodePen inte lika mycket som JSBin när det gäller JavaScript-bibliotekstöd. Det är inte att säga att det inte innehåller många av de stora aktörerna, men med de många nya bibliotek och ramar som används idag är det en tydlig skillnad när det gäller inbyggt stöd:
CodePen:
JSBin:
Det är tydligt från dessa skärmdumpar (som endast är partiella fångster) att bredden av JavaScript-ramstöd är mycket mer omfattande än CodePen både i antal och stödda versioner. CodePen erbjuder möjligheten att inkludera en extern JavaScript-resurs i kodfältet, men bekvämligheten att kunna klicka på en rullgardinsmeny och välja från en rad JS-ramar är ganska användbar.
Det finns dock en funktion, det är en hel del för mig och det är detta:
Det är rätt. CodePen inkluderar integration med ett av mina favoritprogram för webbläsare, BrowserStack.com. Jag har skrivit om tjänsten innan och älskar absolut det för sin enkelhet för testning och bredd av webbläsarens täckning, så att se att CodePen erbjuder integration med det är ett stort plus. Men det är mer än den ena knappen som gör det fantastiskt. Det är rullgardinsmenyn bredvid det som låter dig bestämma vilken webbläsare du vill rikta in på:
... som leder dig till BrowserStack med samma information:
När det gäller bekvämlighet är detta en bestämd vinst för utvecklare. Det är viktigt att notera att du kommer att omdirigeras bort från CodePen när du klickar på knappen BrowserStack och du måste ha ett BrowserStack-konto för att kunna använda det.
CodePen kommer i en fri upplaga och en mer funktionell Proffs version. Detta inkluderar funktioner för live förhandsgranskning av kod på flera enheter, samarbete med andra utvecklare, teman av inbyggda kodpennor och intuitiv "Professor Mode" som är mycket användbar för online-träning och klasser.
Av de tillgängliga Pro-funktionerna är de två som jag tycker är mest användbara Realtidsbild och Asset Hosting med det senare tillåter utvecklare att ladda upp tillgångar som bilder och skriptfiler som kan användas direkt i kodpenna.
Du kanske undrar varför detta är användbart? Tja, alternativet är att hitta ett externt värdalternativ som en CDN eller din egen server. Att kunna ladda upp din egen anpassade JavaScript-fil, bilder eller stylesheet löser problemet och gör de tillgångarna lätt tillgängliga att använda i dina kodpennor. När det är uppladdat är det enkelt att klicka på tillgången, ta tag i webbadressen och släppa den i din kod:
Detta ensam förtjänar $ 9 per månad för att använda tjänsten och det verkar unikt för CodePen.
Anledningen till att jag verkligen gillar Realtidsbild funktion är att testning över olika formfaktorer är oerhört viktigt idag. Detta görs genom att skicka pennens länk till enheten du vill testa med. Det kan göras genom att direkt skriva in det i webbläsarens webbläsare eller använda CodePens deldialog för att skicka ett SMS till en mobilenhet:
När pennan uppdateras på din dator, speglar den nästan omedelbart ändringarna över ett antal enheter.
CodePen är ett bra verktyg. Det är mycket polerat och funktionellt med fantastiskt stöd för markup- och CSS-verktyg. Det faktum att vissa funktioner endast är abonnemangsbaserade, fasar inte mig lite eftersom jag inte har något emot att stödja bra programvara. Jag kommer att säga att vissa funktioner verkar som att de borde vara en vanlig del av tjänsten, speciellt skapa privata pennor och visa förhandsvisning, särskilt när andra tjänster redan erbjuder det gratis.
Enligt min åsikt, att ha använt både JSBin och CodePen är det uppenbart att de delar mycket liknande möjligheter och valet av vilken tjänst som ska användas kommer till slut att komma ner till personliga preferenser. Vissa kan tycka om den professionella användargränssnittet för CodePen medan andra kan uppskatta den omfattande bredden av JavaScript-ramstöd i JSBin. Det kan bara koka ner att använda båda för att åstadkomma olika uppgifter, men jag kan säga CodePen är verkligen en bra tjänst att utnyttja och jag lägger till det på mina verktyg i handeln.
Accentsconagua