jsbin

JS Bin – byggd för delning, utbildning och realtids rendering

JS Bin är en av de allra första offentliga klistra lådor med realtidsrendering direkt i din webbläsare och som då blir tillgängliga att dela och redigera med den färdiga produktionen. Detta verktyg släpptes 2008 och är nu i sin tredje version. Det är helt gratis att använda alla finesser och finns i öppen källkod som finns tillgängligt på Github.

I huvudsak finns JS Bin av två skäl:

a) Skapa, testa och felsöka kod.
b) Att undervisa och lära av. JS Bin är ett felsökningsverktyg för flera personer. Det gör att du kan redigera och testa JavaScript och HTML (omladdning av URL:en behåller tillståndet i din kod). När du är nöjd kan du spara och dela webbadressen med en eller flera inbördes för granskning och felsökning. Dessa kan sedan göra ytterligare ändringar och spara på nytt om det behövs.

Vad är nytt?

I både nuvarande och tidigare versioner har UX varit en stor del av uppdateringen. JS Bin är idag 100% javascript (Node.js). Denna åtgärd till nod ger möjligheten att introducera två nya användbara funktioner: CodeCasting, Live remote rendering.

Den huvudsakliga skillnaden mellan den gamla och den nya JS Bin är att när du skriver så sparar JS Bin det automatiskt. Med detta menas… så snart de första knapptryckningarna slås, har du fått din egen webbadress. När du fortsätter att skriva, fortsätter JS Bin att spara detta på automatik. Om du vill sluta spara mot den aktuella versionen, skapa då en milstolpe och livesparningen kommer att tillämpas till den nya versionen istället.

CodeCasting

Säg att du håller en demonstration eller en workshop och du vill att alla deltagare ska se JavaScript, CSS och HTML i realtid medan du skriver. Med det nya JS Bin, behöver man inte vara på samma anslutning, utan endast besöka samma webbadress. Istället för att avsluta URL:en med /edit, lägg istället till /watch och de blir deltagande till din livekodning.

Live remote rendering

Har du någonsin velat kontrollera utgången på flera plattformar: Firefox, Chrome, IE, iPads, Androids, Windows Phone etc? Kanske allt på en gång? Trött på att spamma refreshknappen i webbläsaren? Då är JS Bin det perfekta alternativet. Helt enkelt peka enheten eller din webbläsare till URL:en för förhandsgranskning (i princip tar du bort /edit från URL:en) och eventuella ändringar du gör när du skriver kommer att få målenheten att uppdatera innehållet automatiskt.

Fler viktiga funktioner

Det finns en hel del mer att se i den nya versionen av JS Bin. Vissa av dessa funktioner var alltid en del av JS Bin, men dolda inuti betaversioner – som krävde jobbiga konsolkommandon. Med den tredje versionen har dessa funktioner byggts in:

  • Logga in för att komma ihåg din historia
  • Din fullständiga historia på en enda sida med levande förhandsvisning när du hovrar.
  • Ett API för att styra standardinställningarna (användbart om du förbereder en undervisning eller liknande)
  • Processorer, så du kan använda Markdown, CoffeeScript och LESS (bland annat)
  • CSS-panel
  • konsolpanel
  • Stöd för fler bibliotek (inklusive Bootstrap, Backbone etc.)
  • Inbyggt stöd för Adobe Shadow (du kan peka din webbläsare till JS Bin så kommer Adobe Shadow att göra renderingen automatiskt)
  • ”Redigera från dit redigeringsprogram och rendera till en remote URL” funktionen. Du måste se det för att tro det (idé och kod av @wookiehangover)
Avatarbild
Skriven av Emil Andersson i Webbutveckling
Jag är 7 år gammal inom webbutveckling, jag älskar jQuery och CSS3. Är en av skaparna av Kreativo och jobbar på Delive. Jag har också börjat exprimentera med 3D design i Cinema 4D. Fotografering är också något jag gillar.