Lokala kodningsmiljöer är bra, men det är ofta så att jag inte vill spricka öppen espresso och tillbringa några minuter på att koda när allt jag verkligen vill är att testa en idé eller jobba på en bugg. Dessutom är delningsalternativ för de flesta lokala kodande appar begränsade och kräver vanligtvis att en extern app som Dropbox integreras.
Online lekplatser eller sandlådor som jsFiddle löser detta problem genom att ge dig en omedelbar redo kodningsmiljö för att du ska börja experimentera så snart sidan laddas. Med dessa verktyg kan du kombinera CSS, HTML och ofta även JavaScript för att skapa och dela kodningsexempel. Jag är helt beroende av dessa saker och har utfört testade alla som jag kan ta hand om. Idag går jag över mina fem favoriter och diskuterar inte bara varför vad jag tycker om varje alternativ, men också där de blir korta.
CSSDesk
Jag börjar med CSSDesk eftersom det är en av de äldsta på den här listan. Det har funnits i många år som ett tyst och obskyrligt litet verktyg som är extremt användbart för att spela med grundläggande webbkod. CSSDesk är ett mycket enkelt verktyg som fokuserar rent på HTML och CSS.
Vad jag tycker om CSSDesk
Det finns många saker som jag bara älskar om CSS Desk. Det finns tre huvuddelar: HTML, CSS och live preview, vars storlekar lätt kan tweaked med ett klick och dra. Jag gillar att du enkelt kan se allt du behöver i en enkel vy. Det finns ingen ansträngning eller installation här, ladda bara sidan och börja skapa.
Det finns också grundläggande syntaxhöjning som alla andra verktyg på den här listan. En ganska unik egenskap som du inte ofta ser i dessa typer av verktyg är linjenummer. Det är ett så enkelt tillägg men jag tenderar att tycka om linjenumrar så jag uppskattar verkligen införandet.
Funktionerna i verktygsfältet är också ganska coola och ger några alternativ som du helt enkelt inte hittar andra platser. Utöver standard delningsfunktionen har du också möjlighet att ladda ner det du just byggt. Vidare finns det en uppsättning standard bakgrundstexturer som appliceras om du inte manuellt åsidosätter dem. Det här är roligt om du bara bygger en knapp eller widget av något slag och vill ha något annat än den typiska vanliga vita bakgrunden.
Vad jag inte tycker om CSSDesk
Ärligt talat, det finns inte mycket att ogillar om den här. Visst, det är enkelt och har inte några av de snygga funktionerna som de andra alternativen har, men det är också det som gör det bra. Jag brukar aldrig använda den här längre men varje gång jag gör det så trevligt tycker jag att jag borde sluta med oftare.
Den största nackdelen för hardcore-kodare är bristen på JavaScript-stöd. Om det här är en avbrottsbrytare för dig, försök kolla in ett av de andra alternativen.
JS Bin
JS Bin är en annan populär plats att tinker runt med din kod. Utformningen av denna app är ganska minimal och låter dig verkligen fokusera på koden. Som standard visar sidan endast HTML och Live preview-paneler, men du kan även enkelt lägga till JavaScript på det.
Vad jag tycker om JS Bin
Det finns en hel del fina funktioner på JS Bin. Det första som jag befann mig uppskattar är att uppdatering av sidan inte dödar ditt arbete. Förhandsgranskningen uppdateras automatiskt, men för de sällsynta tiderna när du behöver en manuell uppdatering är det trevligt att din första instinkt (Command-R) inte resulterar i en oavsiktlig förlust av en timmes värde av tinkering.
Som med CSSDesk sparar du, delar och laddar ner ditt arbete. Platsen där detta uppenbarligen kommer framåt är JavaScript-implementeringen. Du kan självklart skriva in din egen JS men som en bonus kan du välja att inkludera populära bibliotek som jQuery.
En annan cool funktion är möjligheten att styra vilka rutor du ser genom att manipulera webbadressen. Till exempel,? Http: //jsbin.com/#javascript,html,live? kommer du att få alla tre rutorna medan? http: //jsbin.com/#html,live? kommer bara att få dig två.
Vad jag inte tycker om JS Bin
För att vara ärlig är JS Bin min favorit alternativ på den här listan. Det är inte dåligt, men det saknar definitivt de andras charm. En sak som alltid får mig är att det inte finns någon dedikerad plats för CSS, vilket tvingar dig att bädda in den i din HTML. Det fungerar bra, men det är inte lika bra som den avsiktliga separationen som ses i de andra alternativen.
jsFiddle
jsFiddle har helt tagit av de senaste månaderna till ett år och är förmodligen det mest populära alternativet på den här listan för tillfället. Och med god anledning är det här en fantastisk app. Låt oss möta det, när du gräver in i jsFiddle kan du aldrig titta på något av de andra alternativen igen.
Vad jag tycker om jsFiddle
Det finns massor av bra saker att täcka i min lista med anledningar till varför du ska använda jsFiddle. Först upp är layouten. Det finns fyra paneler (HTML, CSS, JavaScript och förhandsgranskning) så att du kan se allt du behöver omedelbart och ändra storlek på varje område i flygningen. Layoutsystemet här känns väldigt flexibelt och är egentligen roligt att leka med.
Medan vi diskuterar paneler kan du anpassa CSS- och JavaScript-paneler för att använda dina favoritverktyg från tredje part. Du hittar stöd för Sass SCSS-syntaxen och CoffeeScript.
jsFiddle kan du skapa en inloggning och visa en översikt av ditt tidigare sparade arbete. Det finns massor av menyalternativ och verktyg när du har sparat en fiol, mina favoriter är möjligheten att snabbt skapa en gaffel och möjlighet att automatiskt städa upp din röriga kodstruktur.
Förutom alternativen för panelanpassning har sidofältet en massa andra bra funktioner också. Du kan till exempel snabbt lägga till några större bibliotek som du vill inkludera (jQuery, MooTools, etc.) och dina egna JavaScript / CSS-resurser.
Ett sista fantastiskt jsFiddle-alternativ som jag bara upptäckt den andra dagen: du kan bädda in fiddlar till en webbsida. Det här alternativet finns under delningsmenyn och är ett bra alternativ till andra kodinbäddningstjänster.
Vad jag inte gillar om jsFiddle
Mitt huvudbiff med jsFiddle är bristen på en automatisk uppdateringsalternativ för förhandsgranskningen. När du har använt alla andra alternativ på listan och upplevt glädje av automatisk uppdatering, är det svårt att lägga upp manuella uppdateringar varje sekund i jsFiddle.
När det gäller andra funktioner går det bäst på listan, men den irriterande driver mig ofta någon annanstans om jag bara vill byta ut ett snabbtest. Tangentbordsgenvägar hjälper, men de är fortfarande inte så snälla som något automatiskt.
Dabblet
Dabblet är ett ganska nytt barn i kvarteret i denna genre. Liksom CSSDesk fokuserar den endast på HTML och CSS utan JavaScript. Räkna inte ut det eftersom det ger en seriös innovation till tabellen som du inte hittar i någon annan redaktör.
Vad jag tycker om Dabblet
Som standard delas Dabblet i tre flikar: CSS & Resultat, HTML & Resultat och Resultat. Detta ger flexibilitet och fokus samtidigt som du alltid kan hålla koll på resultatet.
Du kan ändra saker med kontrollerna som visas nedan. Uppdelningen kan vara vertikal, horisontell eller helt uttagen. Det finns också en intressant? Bakom kod? läge där ditt resultat helt enkelt är bakgrunden för kodningsområdet. Observera att det också finns ett meddelande om att använda prefix-fri. Jag använder Dabblet hela tiden och märkte aldrig detta förrän just nu! Detta innebär att du inte behöver använda galena leverantörs prefix och kan koda de enkla standardvärdena, den dolda JavaScript kommer att se till att dina webbläsare tolkar det korrekt.
Dabblet har några bra sparningsalternativ, liksom? Spara anonymt.? Det länkar också till ditt GitHub-konto, vilka kodande nördar som kommer att älska.
Min favorit Dabblet-funktion är den super slick-svängareffektintegrationen i CSS. De är enklare att visa den beskrivningen. Här två få exempel:
Som du kan se, svävar över vissa bitar av CSS dessa små verktygstips som är riktigt bra. Du kan få förhandsgranskningar för teckensnitt, färger, storlekar och jämnbilder.
Vad jag inte tycker om Dabblet
Dabblet är lite knäppt ur ett visuellt perspektiv, du älskar antingen det eller hatar det. Jag tycker verkligen om att använda det men önskar verkligen att jag hade större kontroll över panelstorleken. Att ha en auto 50/50 split är bra, men jag borde kunna manuellt justera det jag väljer.
Såvitt jag vet finns det inte heller möjlighet att visa din HTML och CSS samtidigt, vilket är lite irriterande om du är van vid alternativ som jsFiddle där du kan hålla ett öga på allt på en gång.
Tinkerbin
Tinkerbin är det närmaste alternativet till jsFiddle som jag har hittat. Även om det inte har alla de snygga funktionerna som finns i jsFiddle, har det några egna tricks som är riktigt fina.
Vad jag tycker om Tinkerbin
Standardpanellayouten på Tinkerbin är förmodligen min favorit på hela denna lista. Det är en väldigt logisk layout som sätter koden till vänster och en fin stor automatisk uppdatering till höger. HTML-, CSS- och JavaScript-sektionerna är staplade ovanpå varandra, med valfria flikar som låter dig fokusera på bara en av dessa.
Vidare stöder Tinkerbin ännu mer alternativa syntaxalternativ än jsFiddle. Du kan välja HTML eller HAML; CSS, SCSS (med kompass), den gamla SASS-syntaxen eller LESS; och JavaScript eller CoffeeScript. Det är självklart att om du gräver förprocessorer är det här alternativet.
Tinkerbin är det enda alternativet som låter dig byta ut förhandsgranskningen för en fin, omfattande? View Source? fönster.
Vad jag inte tycker om Tinkerbin
Ännu mer än Dabblet är Tinkerbin-layouten helt styv. Visst, jag gillar standardinställningen bäst, men ibland vill jag göra den förhandsgranskningen bredare och jag har helt enkelt inte möjlighet här.
Vidare är besparingsalternativen inte bäst. Det finns ingen kontoinställningar, instrumentpanel, GitHub-integration etc. Du sparar bara dina experiment till en förkortad URL.
Slutsats
Nu är jag säker på att du kan se fördelarna med att ha några av dessa webbplatser bokmärkta. Jag uppmuntrar dig att experimentera så ofta som möjligt med nya idéer för att hålla dig frisk och dessa tjänster ger ett fantastiskt sätt att göra det.
Jag hoppas att denna översyn har fungerat som ett användbart inslag i detaljerna i var och en av dessa lösningar. Du borde nu veta inte bara vad som gör varje alternativ unikt men också där varje faller kort. Detta hjälper dig att fatta ett välgrundat beslut om vilken som helst eller två som främst ska fokusera på.
Jag personligen studsa fram och tillbaka med dem alla ganska regelbundet men senast har jag hängt ut mestadels i jsFiddle, Dabblet och Tinkerbin. Vilken av dessa är din favorit och varför?