JSBin

JS Bin on web-pohjainen ympäristö, jolla voi nopeasti kokeilla HTML-koodista, CSS-tyyleistä sekä Javascript-tiedostoista koostuvaa kokonaisuutta.

JS Bin on avoimen lähdekoodin palvelinohjelmisto, jota voi käyttää www-tekniikoiden opetteluun, opettamiseen, harjoitteluun sekä kokeilemiseen taikka ohjelmointivirheiden etsimiseen yhteistyössä web-pohjaisesti selaimella. Sitä on mahdollista käyttää jsbin.com-palvelussa tai vaihtoehtoisesti sen voi asentaa omalle koneelle tai palvelimelle.

Palvelun toimintaideana on, että näyttö on valinnan mukaan jaettu korkeintaan viiteen palstaan, joissa ovat nähtävillä tai muokattavissa HTML-koodi, CSS-tyylisäännöt, Javascript-ohjelmakoodi, interaktiivinen Javascript-konsoli sekä näistä muodostuvan www-sivun sisällön näyttävä Output-näkymä. Kunkin sarakkeista voi kytkeä päälle tai pois näkymän yläreunassa olevilla nappuloilla. HTML-koodin ja CSS-tyylien muokkaaminen päivittävät tulostussarakkeen sisältöä välittömästi. Javascript taas suoritetaan valinnan mukaan joko jokaisen päivityksen yhteydessä automaattisesti taikka vasta nappia painamalla.

Uuden JS Bin -työn, eli binin, aloittaminen luo palveluun uuden tähän istuntoon viittaavan url-osoitteen, esimerkiksi http://jsbin.com/ohevev/1/edit ja aloittaan kyseisen sivukokonaisuuden ensimmäisen version muokkaamisen. Muokkaukset tallentuvat automaattisesti palvelimelle ja samaa biniä pääsee muokkaamaan menemällä selaimella uudelleen samaan muokkausosoitteeseen. Nykyisen version pystyy lukitsemaan, jonka jälkeen muokkaaminen tapahtuu seuraavalla versionumerolla. Versionumero on aina nähtävissä binin osoitteessa. Osoitteen voi myös jakaa muille käyttäjille nähtäväksi katseluversiona (esimerkiksi http://jsbin.com/ohevev/2/watch), joka päivittyy reaaliaikaisesti sitä mukaa kun muokkausversiota päivitetään. Binistä voi jakaa myös vain valmiin tuloksen näyttävän näkymän (esimerkiksi http://jsbin.com/ohevev/2). Binistä voi myös tehdä itselleen kloonin, joka on kopio alkuperäisestä, mutta uudella osoitteella. Tätä ominaisuutta voi käyttää esimerkiksi opetuksessa antamalla opiskelijoille linkin alkuperäiseen tehtävänantona toimivaan biniin ja käskemällä opiskelijoita kloonaamaan sen itselleen ja tekemään omaan versioonsa käsketyt tehtävät.

JS Biniin on mahdollista myös rekisteröityä. Rekisteröitynyt käyttäjä pystyy selaamaan kaikkia muokkaamiaan binien versioita. Tarpeeksi uudessa JS Binin versiossa on lisäksi ominaisuus, joka suojaa rekisteröityneen käyttäjän aloittamat binit niin, että vain sama käyttäjä voi muokata sitä. Jos joku muu käyttäjä yrittää muokata tällaista suojattua biniä, luodaan siitä automaattisesti uusi klooni uudella url-osoitteella.

Muokattavaan biniin voi pudotusvalikosta lisätä yleisimpiä Javascript-kirjastoja. Listassa ovat valittavina muun muassa jQuery, jQuery-ui, jQuery Mobile, Bootstrap, Prototype ja MooTools. HTML-näkymään voi toki lisätä script-tagilla viittauksen myös mihin tahansa muuhun kirjastoon. HTML-, CSS- ja Javascript-palstoilla on lisäksi valittavissa asetus, joka määrää, missä muodossa niiden sisältö syötetään. HTML-palstaan on mahdollista syöttää puhtaan html-tekstin sijasta myös Markdown-syntaksilla kirjoitettua tekstiä, jossa esimerkiksi listat on merkitty rivin aloittavalla tähdellä. Sisältö on mahdollista kirjoittaa myös Jade-kielellä. Myös tyylit on mahdollista kirjoittaa normaalin CSS-kielen sijasta LESS- tai Stylus-kielillä. Javascript voidaan puolestaan korvata CoffeeScriptillä taikka muutamalla muulla Javascriptiksi käännettävällä kielellä. Vaihtoehtoisilla kielillä kirjoitetut sisällöt, tyylit sekä ohjelmakoodit on mahdollista muuntaa kirjoittamisen jälkeen html-, css- ja Javascript-koodiksi. Bin on myös mahdollista ladata itselleen yhtenä html-tiedostona, joka sisältää tyylisäännöt ja Javascript-koodin.

JS Bin tukee myös syntaksin korostusta sekä Zen Coding -lyhenteiden käyttöä.

JS Bin on alun perin toteutettu PHP-kielellä, mutta sen kehitys on sittemmin siirtynyt käyttämään Javascriptiä Node.js-alustalla. Ohjelma on asennettavissa käyttämään kumpaa tahansa näistä kielistä, mutta eräät viimeisimmistä ominaisuuksista toimivat vain Node.js-versiossa.

Kotisivu
http://jsbin.com

Lisenssi
MIT

Toimii seuraavilla alustoilla
Linux, Windows, Mac OS X, FreeBSD, NetBSD, OpenBSD, palvelinohjelma

Asennus
JS Binin lähdekoodi ja asennusohjeet ovat saatavilla Githubista. Ohjelma vaatii toimiakseen Node.js-ympäristön. Sen varhaisemmat versiot toimivat myös PHP-alustalla.

Käyttöohjeet
Opasvideoita JS Binin käyttöön löytyy Youtubesta.