-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
416 lines (404 loc) · 24.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>There's a fiddle for that!</title>
<link rel="canonical" href="https://fiddles.io">
<link rel="stylesheet" href="css/pure-min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="//fonts.googleapis.com/css?family=Signika+Negative:600&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" type="text/css">
<link href="//fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" onload="this.onload=null;this.removeAttribute('media');" media="print" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous">
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<noscript>
<link href="//fonts.googleapis.com/css?family=Signika+Negative:600&display=swap" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" type="text/css">
</noscript>
<style>
body,p, h1 {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Signika Negative', sans-serif;
}
.pure-button {
position: relative;
float: right;
width: 10em;
margin-top: 2em;
}
.fiddle {
margin-top: 2em;
padding: 10px;
background: #fefeff;
border: 1px solid #eee;
}
.social {
margin-top: 1em;
float: right;
}
.social div {
}
.footer {
margin-top: 3em;
margin-bottom: 1em;
margin-left: 1.5em;
font-size: 0.8em;
}
.left-menu {
background: white;
margin-right: 1em;
}
.left-menu .pure-menu-open {
margin-top: 2em;
background: white;
border: none;
}
.left-menu .pure-menu-selected {
background: #0078e7;
}
.left-menu .pure-menu-selected a {
color: #fff;
}
.left-menu .pure-menu-selected a:hover {
background: #0279e9;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var langs = [];
$(".fiddle").each(function(idx,elem) {
langs.push($(elem).data("lang").split(" "));
});
langs = _.uniq(_.flatten(langs)).sort();
_.each(langs, function(lang) {
$(".filters").append(
"<li class='pure-menu-item'><a class='pure-menu-link' href='#' data-lang='" + lang + "'>" + lang + "</a></li>"
);
});
$(".filters a").click(function(event) {
filter($(event.target).data("lang"));
$(".filters li").toggleClass("pure-menu-selected", false);
$(event.target).parent().toggleClass("pure-menu-selected", true);
});
});
function filter(lang) {
if(lang == null) {
$(".fiddle").show();
} else {
$(".fiddle").hide();
$(".fiddle[data-lang~='" + lang + "']").show();
}
}
</script>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-5 left-menu">
<div class="pure-menu pure-menu-open">
<!--<a href="#" class="pure-menu-heading">Fiddles</a>-->
<ul class="filters">
<li class="pure-menu-selected"><a href="#">Show all fiddles</a></li>
</ul>
</div>
</div>
<div class="pure-u-3-5">
<div class="fiddle" data-lang="HTML CSS Javascript">
<h1>JSFiddle</h1>
The original. Run and share HTML/CSS/Javascript. Includes easy access to various Javascript
libraries.
<a class="pure-button pure-button-primary" href="https://jsfiddle.net">Go to jsfiddle.net</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="C# VB F#">
<h1>.NET Fiddle</h1>
Run and share .NET Visual Basic and C# code. Currently supports console projects.
<a class="pure-button pure-button-primary" href="https://dotnetfiddle.net/">Go to dotnetfiddle.net</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="SQL">
<h1>sqlite3 Fiddle</h1>
Test your SQL in sqlite3 running inside the browser.
<a class="pure-button pure-button-primary" href="https://sqlite.org/fiddle/">Go to sqlite.org</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="SQL">
<h1>SQL Fiddle</h1>
Play around with database, create your schema and test SQL. Supports number of databases,
currently MariaDB, MySQL, Oracle and Oracle PLSQL, PostgreSQL, SQLite and Microsoft SQL Server
<a class="pure-button pure-button-primary" href="http://sqlfiddle.com/">Go to sqlfiddle.com</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="RegEx">
<h1>Regex 101</h1>
Confronted with a problem, you thought "I know, I'll use regular expressions."
<p>
Now you have two problems. regex 101 to rescue!
<a class="pure-button pure-button-primary" href="https://regex101.com/">Go to regex101</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Python">
<h1>Python Fiddle</h1>
Run and share Python code.
<a class="pure-button pure-button-primary" href="http://pythonfiddle.com/">Go to pythonfiddle.com</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Java Javascript HTML Python C C++ Dart Lisp SQL CSS Others">
<h1>Tutorials Point</h1>
This one does not follow the official naming convention but compiles and runs code
written in various languages. Checkout the supported languages from the top menu bar.
The list is exhaustive, from Ada to Verilog via Brainf*ck and other more or less
well known languages.
<a class="pure-button pure-button-primary" href="https://www.tutorialspoint.com/codingground.htm">Go to TutorialsPoint.com</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="R">
<h1>R-Fiddle</h1>
Fiddling with statistics? Try out the R-Fiddle.
<a class="pure-button pure-button-primary" href="http://www.r-fiddle.org/">Go to R-Fiddle.com</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="C++ C">
<h1>Interactive GCC compiler</h1>
This is not a regular fiddle. Instead of letting you execute c/c++ code the interactive
compiler compiles your code and then show the assembler code. This lets you investigate
what kind of machine code is generated for certain structures with specific compiler flags.
<a class="pure-button pure-button-primary" href="https://gcc.godbolt.org/">Go to gcc.gobolt.org</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="ClojureScript">
<h1>ClojureScript REPL</h1>
ClojureScript is a programming language which compiles to Javascript (while regular Clojure targets JVM).
<a class="pure-button pure-button-primary" href="https://clojurescript.io/">Go to REPL</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Clojure">
<h1>Try Clojure</h1>
Clojure REPL and interactive tutorial.
<a class="pure-button pure-button-primary" href="https://tryclojure.org//">Go to REPL</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Logo">
<h1>Logo Interpreter</h1>
Logo Interepreter by Joshua Bell runs logo programs directly in your browser. To get started,
paste some example code from the right side to the field next to "Run" button and hit run.
<a class="pure-button pure-button-primary" href="https://www.calormen.com/jslogo/">Go to Logo Interpreter</a>
<br style="clear: both;" />
</div>
<div class="fiddle" data-lang="Brainfuck">
<h1>Brainfuck visualizer</h1>
Getting your next big thing out with Brainfuck can sometimes be a bit overwhelming. But no worries, with this tool you can easily
step through the app.
<a class="pure-button pure-button-primary" href="https://minond.xyz/brainfuck/">Brainfuck Debugger</a>
<br style="clear: both;" />
</div>
<div class="fiddle" data-lang="HTML Markdown CSS LESS SCSS SASS Javascript CoffeeScript TypeScript Python Others ">
<h1>FiddleSalad</h1>
Create your own web salad by mixing your choice of markup, style and programming logic. FiddleSalad supports
various languages for each part.
<a class="pure-button pure-button-primary" href="https://fiddlesalad.com/">Go to FiddleSalad</a>
<br style="clear: both;" />
</div>
<div class="fiddle" data-lang="Rust">
<h1>Rust Play</h1>
Environment for writing and executing Rust programs.
<a class="pure-button pure-button-primary" href="https://play.rust-lang.org/">Go to Rust Play</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Others">
<h1>ZK Fiddle</h1>
Play around with ZK Java framework for building web applications. Create UI, write Java code. Run and Test.
<a class="pure-button pure-button-primary" href="https://zkfiddle.org/">Go to ZK Fiddle</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Go">
<h1>Go Fiddle</h1>
Nice an clean environment for trying out Go, the statically typed language developed originally at Google.
<a class="pure-button pure-button-primary" href="https://play.golang.org/">Go to Go Fiddle</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Swift">
<h1>Swift Playground</h1>
Test your Swift code with various versions of Swift.
<a class="pure-button pure-button-primary" href="https://swiftfiddle.com/">Jump to sandbox</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="K">
<h1>oK</h1>
oK is a learning environment for the <a href="http://en.wikipedia.org/wiki/K_(programming_language)">K programming language</a>.
In case your K-skills are a bit rusty, check out the <a href="https://github.com/JohnEarnest/ok">oK documentation</a> on Github.
The thing is open source, so you can also run it on your own machine.
<a class="pure-button pure-button-primary" href="https://johnearnest.github.io/ok/index.html">oK</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="PHP">
<h1>PHP Tester</h1>
Code goes left, results come right. Easy as that to test your PHP code. PHP Tester supports multiple versions
from age old 5.x to (almost) latest and the greatest.
<a class="pure-button pure-button-primary" href="http://phptester.net">Run PHP Tester</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Scala">
<h1>Scalastie</h1>
Practise your Scala skills in the interactive playground.
<a class="pure-button pure-button-primary" href="https://scastie.scala-lang.org/">This way to Scala</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Ruby">
<h1>RubyFiddle</h1>
Fiddle with the Ruby language. Create snippets and execute them (also check the
security note on top right corner - people are so clever!</a>). Something totally not related to this
Fiddle is <a href="http://www.helloruby.com">"Hello Ruby" a book about programming aimed for kids</a> by Linda Liukas.
That makes a perfect <a href="https://www.amazon.com/Hello-Ruby-Adventures-Linda-Liukas/dp/1250065003">gift</a>!
<a class="pure-button pure-button-primary" href="https://rubyfiddle.com/riddles/7b6a2">Write Ruby</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="PHP">
<h1>PHPHub</h1>
A PHP playground with MySQL.
<a class="pure-button pure-button-primary" href="https://phphub.net/sandbox/">Fiddle with PHP</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="C++">
<h1>C++ Shell</h1>
Play around with interactive C++ shell. Supports also stdin for your "Hello, [your name here]" fiddling purposes.
<a class="pure-button pure-button-primary" href="http://cpp.sh">C++ shell</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="ColdFusion">
<h1>Try ColdFusion</h1>
Back in the days ColdFusion was the thing.. In case it's still for you, this is something to try.
<a class="pure-button pure-button-primary" href="https://trycf.com/">Try ColdFusion</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="ColdFusion">
<h1>ColdFusion Fiddle</h1>
This one keeps it plain and simple. Your ColdFusion code on left, results on right.
<a class="pure-button pure-button-primary" href="https://cffiddle.org/">ColdFusion Fiddle</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Javascript TypeScript">
<h1>Playcode.io</h1>
Comprehensive solution for playing around with Javascript, TypeScript and various
frameworks.
<a class="pure-button pure-button-primary" href="https://playcode.io/new/">Playcode</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Vyxal">
<h1>Vyxal online interpreter</h1>
Vyxal is a language developed for code golfing. And as the developer puts it,
"[It] takes the idea that conciseness comes at the cost of practicality and throws it out the window"
This site will help you develop, run and share your Vyxal creations.
<a class="pure-button pure-button-primary" href="https://vyxal.pythonanywhere.com/">Vyxal online</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Sentinel">
<h1>Sentinel playground</h1>
Sentinel is a policy as code framework from Hashicorp, embedded into enterprise versions of Consul, Nomad, Terraform and Vault.
With the playground you can learn the framework or prototype new functions and policies.
<a class="pure-button pure-button-primary" href="https://play.sentinelproject.io/">Play with Sentinel</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="PHP">
<h1>ExtendsClass</h1>
PHP playground. Execute PHP MySQL/MongoDB Online.
<a class="pure-button pure-button-primary" href="https://extendsclass.com/php.html">Run PHP MySQL/MongoDB</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="SQL">
<h1>SQLize Online </h1>
Write SQL scripts, test your queries. Support many databases, like Firebirds, MariaDB, MySQL, PostgreSQL, Oracle, Microsoft SQL Server, SQLite.
<a class="pure-button pure-button-primary" href="https://sqlize.online/">Sqlize your query</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="SQL">
<h1>PHPize Online</h1>
Test your PHP 5.x, 7.x or 8.x code against various databases such as Oracle, MySQL and Postgres.
<a class="pure-button pure-button-primary" href="https://phpize.online/">PHPize</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="SQL">
<h1>DB Fiddle</h1>
Play around with many versions of Postgres, MySQL and Sqlite. Pro version available
for private fiddling needs.
<a class="pure-button pure-button-primary" href="https://www.db-fiddle.com/">Fiddle with DBs</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="MongoDB">
<h1>Mongo playground</h1>
Setup your data, run your queries and check results. Easy as that!
<a class="pure-button pure-button-primary" href="https://mongoplayground.net/">Play with MongoDB</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="XSLT">
<h1>.NET XSLT Fiddle</h1>
Test your XSLT transformations with couple of different engines.
<a class="pure-button pure-button-primary" href="http://xsltfiddle.liberty-development.net/">Translate</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="APL">
<h1>Try APL</h1>
"APL is a mistake, carried through to perfection" said Edsger Dijkstra. It's a
array oriented programming language, born in the 1960s and still alive.
<a class="pure-button pure-button-primary" href="https://tryapl.org/">Try APL</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="DuckDB">
<h1>DuckDB Shell in browser</h1>
DuckDB is a fast in-process analytical database. And now it's running in your browser.
Import your data (for example csv files), create some queries, check the results. All of this without
uploading anything to cloud, thanks to the magic of WebAssembly.
<a class="pure-button pure-button-primary" href="https://shell.duckdb.org/">Go to DuckDB shell</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="PHP">
<h1>ExtendsClass</h1>
PHP playground. Execute PHP MySQL/MongoDB Online.
<a class="pure-button pure-button-primary" href="https://extendsclass.com/php.html">Run PHP MySQL/MongoDB</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Numscript">
<h1>Numscript playground</h1>
Numscript is a Domain-Specific Language (DSL) designed to help you model complex financial transactions, replacing complex and error-prone custom code with easy-to-read, declarative scripts.
<a class="pure-button pure-button-primary" href="https://playground.numscript.org/">Numscript playground</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Mermaid">
<h1>Mermaid ASCII</h1>
Create ASCII graphics using the Mermaid language.
<a class="pure-button pure-button-primary" href="https://mermaid-ascii.art/">Mermaid ASCII</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Mermaid">
<h1>Mermaid Live</h1>
<a href="https://mermaid.js.org/">Mermaid</a> is a language for creating diagrams and visualizations using text. With this tool you can play around with the language and try creating graphs.
<a class="pure-button pure-button-primary" href="https://mermaid.live/">Mermaid Live</a>
<br style="clear: both;"/>
</div>
<div class="fiddle" data-lang="Civet">
<h1>Civet Playground</h1>
<a href="https://civet.dev/">Civet</a> is superset of TypeScript that works with existing tooling. It is 99% compatible with TypeScript/JavaScript, but adds certain features and syntactic sugar.
<a class="pure-button pure-button-primary" href="https://civet.dev/playground">Civet playground</a>
<br style="clear: both;"/>
</div>
</div>
<div class="pure-u-1-5">
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-5">
</div>
<div class="pure-u-3-5">
<div class="footer">
Feedback? Did I miss a fiddle? Let me know via email or X: <a href="mailto:juhap@iki.fi">juhap@iki.fi</a>
| <a href="https://x.com/jpalomaki">@jpalomaki</a>
| <a href="http://juhap.iki.fi">Juha Palomäki</a>
</div>
</div>
<div class="pure-u-1-5">
</div>
</div>
</body>
</html>n