Deel je scripts makkelijk met JSFiddle

Soms heb je op forums hulp nodig. Je wilt dan wat code laten zien en een live voorbeeld waar mensen aan kunnen sleutelen. Helaas heb je geen host of heb je geen zin/tijd om het op je host te zetten. Wat doe je dan?

JSfiddle

JSfiddle is slechts een van die vele 'playgrounds voor developers' waarmee je scripts en live voorbeelden kunt delen. Anderen zijn bijv. tinkerbin, JSbin, CSSdesk en codepen. Met JSfiddle heb je 4 grote inputvelden: HTML, CSS, JS en Result. Je kan zo wel zien waar ze voor zijn.

JSfiddle heeft standaard al een HTML documentje klaar, dit betekend dat je alleen het geen in de body in het HTML veld moet stoppen. In de CSS stop je gewoon je stylesheet en in JS je script file.

Als je op Run klikt (of Ctrl + Enter) zal JSfiddle het samenvoegen en in een iFrame tonen in het Result panel. JSfiddle voegt zelf een doctype, html, head + children en body element in. Hierdoor hoef je echt alleen maar de basis in te voegen en JSfiddle maakt er een website van.

Choose Framework

De plaats van invoegen

JavaScript kun je op 2 plaatsen invoegen: In de head of vlak voor </body>. Dat zijn de eerste 2 opties. Vervolgens kun je ook nog kiezen voor een wrap. Er zijn 2 wraps: window.onload en DOM ready. Wat JSfiddle dan doet is de JavaScript code in de head plaatsen en een window.onload of een DOM ready event (is iets ingewikkelder) eromheen zetten. Hierdoor voorkom je errors als DOM not ready.

Frameworks

Vervolgens kun je in een select box kiezen uit een heel scala JavaScript frameworks, waaronder MooTools; jQuery; Pototype; YUI; DoJo; ect. Van al deze frameworks kan je ook nog uit meerdere versies kiezen. Als je een framework kiest laad JSfiddle dit framework automatisch in, in de head. Je kan ook No-libary selecteren, dan wordt er niks ingeladen.

Een input veld daaronder zie je 'Libary tag attributes' dit zijn eventuele attributen die bij de scripttag worden gevoegd waarin de libary wordt ingeladen:

1
<script src=http://lib.path/to/some/lib.min.js {libary_tag_attributes}></script>

Extra libaries

De meeste JS frameworks hebben ook nog wat extra sublibaries. Als je er eentje uitkiest, bijv. jQuery, krijg je de mogelijkheid om dingen als jQuery UI/Mobile nog erbij te laden. Hierdoor hoef je dat niet zelf in je HTML code te doen en houd je je 3 inputs schoon.

Normalize.css

Als laatst kun je nog aangeven of je normalize.css, een van de beste CSS reset stylesheets wilt gebruiken of niet.

Panels

Zoals je nu wel weet heb je 4 panels: HTML, CSS, JS en Result. Je kan deze ook aanpassen. I.p.v. CSS kun je bijv. ook SASS (een CSS pre-processor) gebruiken. Of i.p.v. JS coffeescript.

Add Resources

Soms moet je wel eens iets extra's inladen. Denk dan bijv. aan een jQuery plugin of een default stylesheet. Dat kun je allemaal doen in het Add Resources menu. Plaats de exacte URL naar een JavaScript of CSS bestand en klik op de +.

Info

Het laatste menu wat ik met je wil bespreken is het info menu. Hierbij kun je wat informatie over jou fiddle plaatsen en kun je eventuele klassen toevoegen aan de body tag of het doctype veranderen.

Shortcuts

JSfiddle heeft een heleboel shortcuts, een paar opgesomd:

  • Ctrl + Enter - Run jou fiddle
  • Ctrl + S - Sla je fiddle op
  • Ctrl + pijl omhoog/pijl naar beneden - Navigeer tussen de panels
  • Ctrl + Shift + pijl omhoog - Toggle sidebar

Je fiddle delen

Om hem met iemand te delen moet je je fiddle opslaan en de link doorsturen naar een ander. Het opslaan doe je door op Save te klikken (of de shortcut). Vervolgens wordt je door gelinkt naar de link met jou fiddle. De URL kun je dan kopiëren en aan de ander geven. Of je klikt op share en dan op share link

Je kan je code ook embedden (in een iFrame). Hiervoor hebben ze een speciale url. Namelijk jsfiddle.net/FiddleCode/embedded/panels. De FiddleCode is de code van jou fiddle en bij panels kun je, met spaties gescheiden, de panels invullen die je wilt laten zien. Elk panel is full-screen en in de bar bovenin kun je dan switchen tussen de panels. De panels komen in de volgorde dat jij aangeeft in de URL en het eerste panel wordt meteen getoond.

Je kunt ook nog de skin aanpassen in de embedded page. Je kan kiezen uit light (normaal), dark of presentation (lettertype groter). Dit plaats je helemaal aan het eind na de panels.

Meer informatie

Voor meer informatie over JSfiddle en hoe je het moet gebruiken kun je terecht in de documentatie van JSfiddle.

comments powered by Disqus