JSFiddle is een extreem snelle en efficiënte en populaire online code editor. Het laat je toe om snel de code te delen en het resultaat voor het oog te zien. JSFiddle is zo wijdverspreid en eenvoudig dat Stack Overflow het heeft geïntegreerd.
JSFiddle is echter alleen voor front-end werk, het ondersteunt het begrip bestanden en mappen niet en er is geen manier om CI/CD-pijplijnen te bouwen.
JS Fiddle is gratis en biedt veel boilerplates (jQuery, Vue, React + JSX, TypeScript, CoffeeScript, SCSS, CSS Grid, Bootstrap, en anderen) om snel aan de slag te gaan.
Hoe werkt JSFiddle
JSFiddle heeft het begrip panels (of tabs als je overschakelt naar de tabbed layout), er zijn 4 panels, 3 waar je code kunt invoeren, en 1 om het resultaat te zien: HTML – structuur code, je hoeft geen body doctype head toe te voegen, dat wordt automatisch toegevoegd, CSS – stijlen. U kunt pre-pocessor schakelen naar SCSS, JavaScript – gedrag. Er zijn veel frameworks en code pre-processors die je kunt gebruiken.
Zodra u code invoert, drukt u op “Uitvoeren” in de bovenste actiebalk, en het vierde paneel met resultaten verschijnt. Met SFiddle kun je de layout van de editor veranderen van het klassieke 2×2 raster naar iets dat past bij jouw behoeften. Naast de rastermodus is er ook een modus met tabbladen. Roosters zijn volledig aanpasbaar. Als toevoeging zal het resizen van het resultatenpaneel de breedte aangeven (handig voor het werken met media queries).