Mastodawn

Torsten Grust Apr 3, 2023

I'm trying to put together a list of interactive playgrounds. Here's a list of what I have so far (playgrounds for floating point, CSS, DNS, nginx, postgres, sqlite, git, unicode, compilers, Rust, Go, and other languages). https://gist.github.com/jvns/3cfd81a58bcecb11c7f097ebcc8e923d

What other great interactive playgrounds am I missing?

list-playgrounds.md

GitHub Gist: instantly share code, notes, and snippets.

Gist

Edward J. Stembler Apr 3, 2023

@b0rk Are you considering tools like rubular.com? Python has a similar site

Stuart Langridge Apr 3, 2023

@b0rk Definitely jsbin.com for html/css/js. Also I don't know if https://the-echoplex.net/flexyboxes/ is too niche for that list, but I use it all the time.

Flexy Boxes — CSS flexbox playground and code generation tool

Online CSS flexbox playground and code generator. Supports all existing flexbox implementations.

@b0rk does https://regex101.com count?

regex101: build, test, and debug regex

Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET, Rust.

regex101

DCoder 🇱🇹❤🇺🇦Apr 3, 2023

@janl @b0rk
see also https://regexper.com/ and https://www.debuggex.com/ , the visualisations can be very helpful.

E.g. the regex to detect log4shell is much easier to follow in a visual format: https://www.debuggex.com/r/xMOkIpADRPR-HWCy

Regexper

Regular expression visualizer using railroad diagrams

Julia Evans Apr 3, 2023

@janl yes!!

Bill Mill Apr 3, 2023

@b0rk https://godbolt.org , for many languages

Compiler Explorer

Compiler Explorer is an interactive online compiler which shows the assembly output of compiled C++, Rust, Go (and many more) code.

John-Mark Gurney Apr 3, 2023

@llimllib
Came here to post that.

And it's also a great way for exploring computer architectures as well (at least their assembly syntax).

Bill Mill Apr 3, 2023

@b0rk I built a little bloom filter playground: https://llimllib.github.io/bloomfilter-tutorial/

Bloom Filters by Example

Toby Jaffey Apr 3, 2023

@b0rk https://explainshell.com

explainshell.com - match command-line arguments to their help text

match command-line arguments to their help text

Bill Mill Apr 3, 2023

@b0rk https://www.shadertoy.com is a shader playground

Steven Dollins Apr 3, 2023

@llimllib @b0rk And paired with shadertoy.com is vertexshaderart.com

Julia Evans Apr 3, 2023

@llimllib thank you, can't believe I forgot shadertoy!

Alex Apr 3, 2023

@b0rk I'd name it "awesome-playgrounds" as many list of links start with "awesome"

Bill Mill Apr 3, 2023

@b0rk There are many regular expression playgrounds, https://regex101.com is the one I've used.

This is an extremely broad topic that could have a very long list!

regex101: build, test, and debug regex

Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET, Rust.

regex101

Bill Mill Apr 3, 2023

@b0rk https://fffuel.co/sssvg/ for playing with SVG shapes/fills/strokes/gradients etc

SSSVG: An Interactive SVG Reference

A visual & interactive SVG reference. Quickly look up how to define SVG shapes, transforms, masks, patterns, gradients, text and more.

fffuel.co

wiretransfer Apr 3, 2023

@b0rk https://www.shadertoy.com/ ?

xmlns="Dan"Apr 3, 2023

@b0rk

https://xsltfiddle.liberty-development.net

XSLT fiddle is great for testing XML transforms. Can use Saxon, MSXML or the browsers built in processor.

.NET XSLT Fiddle

xmlns="Dan"Apr 3, 2023

@b0rk https://xqueryfiddle.liberty-development.net/

They also have something for XQuery!

.NET XQuery Fiddle

Bill Mill Apr 3, 2023

@b0rk http://immersivemath.com/ila/index.html is an interactive playground for linear algebra? Really not sure if your list intends to cast this broad a net, but it's certainly fun

Immersive Math

Matthew McPherrin Apr 3, 2023

@b0rk I use https://lapo.it/asn1js/ for exploring the encoding of certificates all the time, though I'm not sure it fits exactly as "interactive"

ASN.1 JavaScript decoder

Michał Apr 3, 2023

@b0rk https://pythontutor.com/

Python Tutor - Python Online Compiler with Visual AI Help

Alex White Apr 3, 2023

@b0rk online Swift playground https://online.swiftplayground.run/

Online Swift Playground

Self hosted and embeddable Swift Playground solution with a third-party module support baked in.

chrysn Apr 3, 2023

@b0rk For the #CBOR data encoding, there is https://cbor.me/

CBOR playground

Cwality Apr 3, 2023

@b0rk lots of little tools in https://www.freeformatter.com/ like https://www.freeformatter.com/cron-expression-generator-quartz.html

Free Online Tools For Developers - FreeFormatter.com

Free online tools for developers, including formatters (JSON, XML, HTML, SQL, etc.), minifiers (JavaScript, CSS), validators, compactors and many more!

Larry Clapp Apr 3, 2023

GopherJS, Go in the browser: https://gopherjs.github.io/playground/

GopherJS Playground

Françoise Conil Apr 3, 2023

@b0rk Docker playground : https://labs.play-with-docker.com/

Play with Docker

Rev. GothAlice Apr 3, 2023

@b0rk Thanks for your list! I'll integrate it into my bookmark set shortly…

https://pinboard.in/search/u:amcgregor?query=tool (interactive tooling) and https://pinboard.in/search/u:amcgregor?query=%23webdev (#webdev IRC learning channel curated picks; fewer interactive playgrounds… for now) are mine, and where your contributions will end up. 😉

See also: https://pinboard.in/search/u:amcgregor?query=generator (arbitrary tools generating "things" like code, fonts, CSS, or even RPG tools from donjon 😝)

Oh! And you mentioned floating point? That's its own tag: https://pinboard.in/u:amcgregor/t:ieee/

Pinboard: Searching amcgregor

Hans de Graaff Apr 3, 2023

@b0rk Ruby has https://try.ruby-lang.org/

TryRuby: Learn programming with Ruby

Learn to program in Ruby in 30 minutes

Predrag Gruevski Apr 3, 2023

@b0rk I'm about to push an update to the Trustfall query engine's web playground.

Folks can use it to run database-like queries over public APIs and data sets like:
- HackerNews: https://play.predr.ag/hackernews
- Rust crates' APIs: https://play.predr.ag/rustdoc

I'm also planning to add more data sources over time.

Trustfall Query Playground

Query data sources like HackerNews and Rust crates directly in your browser.

Miro Spönemann Apr 3, 2023

@b0rk We made a language syntax playground for Langium: https://langium.org/playground/

Langium

Langium is an open source language engineering tool with first-class support for the Language Server Protocol, written in TypeScript and running in Node.js.

Langium

Rob Russell Apr 3, 2023

@b0rk wow "Mess With DNS" is an awesome idea. I put some random stuff in the box and expected it to just output some analysis. But I made a subdomain with a non-routable address!

Julia Evans Apr 3, 2023

@Rob_Russell yeah the whole point of it is that it runs a real DNS server :)

DCoder 🇱🇹❤🇺🇦Apr 3, 2023

@b0rk I would also suggest https://cdecl.org/ and https://defuse.ca/online-x86-assembler.htm

cdecl: C gibberish ↔ English

@b0rk Not sure if in scope, but frequently I have to re-explore the sites that tell me my IP, IPv6 and VPN or censorship status. But I never found the ultimate one. It could be a fit to the list.

@b0rk Haskell playground https://play.haskell.org/

Haskell Playground

Leon Cowle Apr 3, 2023

@b0rk For #Fastly (a CDN)'s language VCL (Varnish) they have an open interactive playground at https://fiddle.fastly.dev/

Fiddle - Fastly

Play with the full features of the Fastly Edge cloud without logging in.

jan-erik Apr 3, 2023

@b0rk @predrag's Trustfall playground: https://play.predr.ag

Trustfall Query Playground

Query data sources like HackerNews and Rust crates directly in your browser.

Bruno Girin Apr 3, 2023

@b0rk replit has support for a lot of stuff: https://replit.com/

There was also a SQL one I used a couple of times. I'll try to remember the name.

Replit – Build apps and sites with AI

Build and deploy software collaboratively with the power of AI without spending a second on setup.

replit

Julian Fietkau Apr 3, 2023

@b0rk Hmm. Have you seen Nicky Case's interactive explainers? Not all focused on tech, but maybe some of them are in scope for you. https://ncase.me/ and in particular https://explorabl.es/

It's Nicky Case!

i make shtuff for curious & playful peeps

Ьλ∂λ Apr 3, 2023

- CSS/HTML/JS: [flems](https://flems.io) by Rasmus Porsager

Flems

Flems is a Playground for web development. Use it for examples, presentations, documentation, issues and what not.

Ьλ∂λ Apr 3, 2023

@b0rk Unparalleled as far as responsivity goes. IT loads and refreshes instantly.

Ьλ∂λ Apr 18, 2023

@b0rk Hello Julia, I forgot "https://" in the link above, and now the link to flems.io on https://jvns.ca/blog/2023/04/17/a-list-of-programming-playgrounds/ is broken

A list of programming playgrounds

A list of programming playgrounds

Julia Evans

Erik Mogensen Apr 3, 2023

@b0rk https://xstate.js.org/viz/ is an interactive playground for statecharts/state machines. #xstate

XState Visualizer

Michael Macnair Apr 3, 2023

@b0rk I enjoyed playing with the raft protocol simulator, not sure if it’s full featured enough to count as a playground https://raft.github.io/

Raft Consensus Algorithm

Raft is a consensus algorithm that is designed to be easy to understand.

@b0rk Regex: regex101.com

Bill Mill Apr 3, 2023

@b0rk Bézier curves: https://www.jasondavies.com/animated-bezier/

Jason Davies has a bunch of good ones in this field

Animated Bézier Curves

Animated Bézier curves.

Douglas Creager Apr 3, 2023

@b0rk tree-sitter has a playground for writing and testing programming language parsers https://tree-sitter.github.io/tree-sitter/playground#

Tree-sitter｜Playground

The0x539 Apr 3, 2023

@b0rk https://sharplab.io

SharpLab

C#/VB/F# compiler playground.

Olivier Forget Apr 3, 2023

@b0rk I wrote an interactive playground/tool for CSS shape-outside some time ago:

https://olivierforget.net/css-shape-outside/

shape-outside-editor

Olivier Forget Apr 3, 2023

@b0rk I made a decent explainer for how to use this tool and how to use shape-outside. And I even made a Unsplash gallery of photos that are well-suited to use with shape outside.

Good work younger me!

https://olivierforget.net/css-shape-outside/static/welcome/index.html

https://unsplash.com/collections/1312739/css-shape-outside-images

Looking back at this tool it's clear I put a lot of work into it. No idea why 😅

CSS Shape Outside Playground Welcome

definitely just a musician Apr 3, 2023

@teleclimber @b0rk for an introduction to css, i once wrote an article https://www.shopify.com/partners/blog/intro-to-css and built four playgrounds to explore concepts

typography:
https://codepen.io/tylerchilds/full/ZEYXOvw

box model:
https://codepen.io/tylerchilds/full/YzPrqLo

transforms:
https://codepen.io/tylerchilds/full/dyPaOxj

animations:
https://codepen.io/tylerchilds/full/QWwZMOX

i think originally, i put so much effort into those to build the foundation for a low-code tool but have never come back around to the idea.

Intro to CSS: A Beginner’s Guide to Cascading Style Sheets - Shopify

This intro to CSS will help you gain an understanding of the role CSS plays in web applications and everything you should know about this key tool.

Shopify

Olivier Forget Apr 3, 2023

@tychi @b0rk Lol yeah I think I was exploring similar ideas. I think in my case I was realizing that my project http://Cicerone.co was turning into a web design tool instead of a rich content authoring environment and I was exploring whether I wanted to go there. The answer was "no". 😆😭

Cicerone

Elecia White Apr 3, 2023

@b0rk https://wokwi.com/ for boards! (C, C++, Circuit Python, Rust)

and maybe https://mermaid.live for markdown diagrams though that is more of a tool than a playground

Wokwi - World's most advanced ESP32 Simulator

IoT and Embedded System Simulator: ESP32, STM32, Arduino, Raspberry Pi Pico, displays, sensors, motors and WiFi simulation.

Julia Evans Apr 3, 2023

@logicalelegance thank you!! I'd seen that before and I was so impressed but I forgot about it

Kyle Conroy Apr 3, 2023

@b0rk sqlc has one at https://play.sqlc.dev

sqlc - Playground

Torsten Grust Apr 3, 2023

@b0rk Hi Julia. I throw tryapl.org (interactive APL REPL) and shell.duckdb.org (modern in-browser SQL engine based on DuckDB) into the mix.

Gonzalo Correa-Young Apr 3, 2023

@b0rk the TypeScript playground is great to write quick snippets and see how they behave, but also to check the resulting JavaScript code: https://www.typescriptlang.org/play

TS Playground - An online editor for exploring TypeScript and JavaScript

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

Pär Björklund Apr 3, 2023

@b0rk Microsoft has a dotnet playground project people can embed on their own sites https://dotnet.microsoft.com/en-us/platform/try-dotnet and also use it themselves https://dotnet.microsoft.com/en-us/learn/dotnet/in-browser-tutorial/1

Try .NET | Runnable .NET code on your site

Try .NET is a service that allows you to embed runnable .NET code snippets into your website, blog, or documentation. Go beyond copy and paste samples to live snippets.

Microsoft

Łukasz Krenski Apr 3, 2023

@b0rk https://scastie.scala-lang.org/ for #Scala is pretty awesome :)

Scastie - An interactive playground for Scala.

//> using scala 3.8.3 transparent inline def !!!(msg: String="Unreachable") = throw new AssertionError(msg) @main def example = (Some("a"), Some("b")).match { case (Some(_), Some(_)) => println("a") case (None, None) => println("b") case _ => !!!("because I say so!") }

Adrian Apr 3, 2023

@b0rk There is a playground for JSON-LD: https://json-ld.org/playground/

Also, our team has been working on a playground for the metadata transformation tool kit @metafacture : https://metafacture.org/playground/

JSON-LD Playground