Om du följer Chris Coyier på Twitter så har du ingen tvekan sett att några anmärkningar går under de senaste månaderna av ett inte så hemligt projekt som heter CodePen. Chris lovade oss att det här nya verktyget skulle gå med i leden av jsFiddle och Tinkerbin, som fungerar som en slags online lekplats för att experimentera med och dela CSS, HTML och JavaScript demos.
Som ett barn i december som väntar på juledag, har jag dött för att se vad Chris och hans team skulle komma med. Lyckligtvis har jul kommit fram. CodePen är ett live-projekt och jag kan inte vänta med att berätta allt om det.
Gott sällskap
Nyligen skrev jag en artikel som jämför de fem största lekplatserna för HTML, CSS och JavaScript. I den här artikeln dyker jag in hur varje av följande lösningar fungerar och skisserat vad jag gör och inte tycker om var och en av dem:
- CSSDesk
- JS Bin
- jsFiddle
- Dabblet
- Tinkerbin
Dessa verktyg är en mild missbruk för mig och jag kan helt enkelt inte få nog av dem. Som du kan se är marknaden full av riktigt bra alternativ, som alla har sina egna styrkor och svagheter.
Med tanke på att de befintliga verktygen redan var så stora var jag ganska angelägen om att se den unika riktningen som CodePen skulle ta och huruvida det skulle bli min standard go-to app för snabba webexperiment. Låt oss se om det lever upp till det hoppet.
Möt CodePen
Som du kan se på skärmdumpen ovan är CodePen en skarp utseende. Plocka upp det mörka användargränssnittet, känns färgpalettens CodePen mycket liknande av Photoshop CS6, med några Apple-liknande linne-texturer som kastas i bra takt.
Också en stor hatt tips till de begåvade designers och utvecklare bakom denna webbplats för att ta det extra steget att göra det lyhört.
En mer social erfarenhet
Det som är uppenbart för mig om CodePen är att den här sidan skiftar fokus lite i jämförelse med de andra i sin klass. Med alla andra sidor som jag sett så här kommer hemsidan till redaktören. Tonvikten är att få dig att koda så snart sidan laddas. Det finns delningsfunktioner, men delning görs direkt av dig genom att klistra in länkar.
CodePen plockar dock upp Dribbble-tillvägagångssättet. Hemsidan är fylld med senaste användarexempel för att du ska kunna bläddra igenom och tweak. Det finns för närvarande tre flöden att välja mellan: Redaktörens val, Populära och Senaste.
Som du kan se, precis som Dribbble, var? Pen? visas med två statistik: gånger visade och gånger älskade. Dessutom kan du, precis som du förväntar dig, följa användare som lägger ut innehåll som du tycker om.
För mig är denna modell oändligt mer sannolikt att hämta och ta av. I stället för ett inåtriktat fokus på enskilda utvecklare har den här appen ett starkt fokus på gemenskapen som säkerställer att användarna har ett intresse av att återvända varje vecka eller till och med dagligen för att se vilken fräck awesomeness andra användare har lagt upp.
Vidare kan ingen motstå alliansen att se sina egna siffror stiga när de publicerar något, så begåvade författare kommer att få en tydlig anledning att fortsätta att skapa nya inlägg.
Använda CodePen
När jag såg CodePen-redaktören för första gången älskade jag genast det. Det är rent, attraktivt och gör helt enkelt utmärkt utnyttjande av ledigt utrymme.
Layout
De andra kodlekarna har försökt att knäcka det perfekta systemet för att visa din kod och förhandsgranskning tillsammans, men för att vara ärlig blir jag så småningom frustrerad med dem alla av en eller annan anledning. Men CodePen verkar som att det slår bollen ut ur parken.
Som du kan se finns det en tre kolumnlayout för HTML, CSS och JavaScript, som sitter ovanpå en live-förhandsgranskning med full bredd som uppdateras utan att det behövs manuella uppdateringar.
Fantastiska funktioner
Varje kodmodul kan utökas för att uppta den fullständiga bredden av de tre kolumnerna, därigenom gömma de andra modulerna, med en snabb snabbtangent. Tyvärr är dessa genvägar i strid med Safari: s inbyggda genvägar, men du kan också klicka på ?? 1? text för att expandera kolumnen så det är inte så mycket.
Killarna bakom CodePen gick alla ut för att se till att all den senaste kodande awesomenessen är tillgänglig för dig. Till exempel tillåter HTML-modulen att HAML, Markdown och Slim används. Min favoritfunktion här är faktiskt helt dold: CodePen stöder ZenCoding! Det var min enda funktionsbegäran för det här nya verktyget och jag är glad att det gjorde snittet.
Hoppar över till CSS-modulen, här har du tillgång till LESS, Sass och SCSS, samt olika återställningsalternativ och Prefix-fria, vilket låter dig använda CSS3 utan att krama till webbläsarprefix. En annan fantastisk funktion: Live-förhandsvisning fortfarande automatisk uppdateringar även om du använder Preprocessors (Tinkerbin gör det inte).
Slutligen tillåter JavaScript-modulen dig att använda CoffeeScript samt kasta i några vanliga bibliotek som jQuery och MooTools.
Om du hoppar in i kontoinställningarna kan du faktiskt tweak alla dina standardinställningar så att du inte behöver ställa in ditt arbetsflöde varje gång. Gör SCSS till ditt standard CSS-språk, byt till ett ljust färgschema eller välj att alltid inkludera Modernizr.
Går längre
När du kodar din egen lilla demo, ger CodePen dig fyra alternativ längst upp på skärmen: Uppdatering, gaffel, detaljer och delning (någon annans penn ger dig gaffel, dela och kärlek). CodePen kontosystemet är byggt på GitHub API så Git fans kommer känna sig riktigt hemma.
Det finns en brytare högst upp till höger om gränssnittet som tar dig från redigeringsvyn till detaljervyn. Den senare av dessa visas nedan:
Här kan du få en fullständig beskrivning av Pennan, se intressant statistik och lämna? Trevligt? kommentarer.
Vad är domen?
Jag hade stora förhoppningar om CodePen, förväntningar som skulle vara svårt för någon fri produkt att leva upp till.Lyckligtvis är det allt jag ville ha och mer. Som jag sa tidigare älskade jag alla tidigare försök till en app så här, men de verkade bara lite av och var alla frustrerande på sin egen väg.
CodePen är däremot helt enkelt en glädje att använda. Det är inte bara det snyggaste verktyget av sitt slag, det är också det mest funktionella. Alla de små funktionerna och alternativen som jag vill använda är närvarande och lätt att implementera och den sociala aspekten gör hela upplevelsen mycket mer än vad jag kan komma med, vilket är exakt varför den här webbplatsen kommer att bli enorm.
Vad tror du?
Nu när du har sett min rant, hoppa över till CodePen webbplatsen, ge det en snurr och kom tillbaka för att låta mig veta vad du tycker om det.
Är det det bästa verktyget i sitt slag? Hur är det bättre än de andra fem som nämns ovan? Hur är det värre? Jag skulle gärna höra dina tankar!