Chunky Bacon: learn Ruby in your browser
Chunky Bacon is an interactive Ruby course that needs no setup. You open the page, and Ruby runs right there in your browser, compiled to WebAssembly with ruby.wasm. The course is in German and English, and the whole thing is open source: github.com/Largo/chunkybacon.
It builds on the same foundation as my Ruby Koans in the Browser, but it is a course rather than a set of exercises, with lessons that start from puts "Hallo, Welt!".
How it works
The lessons are a notebook. Text and runnable code cells alternate, and you run a cell with Shift+Enter. All cells of a lesson share one binding, so a variable from the first cell is still there in the fifth. Every cell shows the value of its last expression as => …, so you do not need puts to see a result.
There are 37 lessons. They go from the first line of Ruby through classes and modules, IRB and gems, to HTML parsing with Nokogiri, exact arithmetic with BigDecimal, web routing with Sinatra and Roda, 3D graphics, and PowerPoint decks made with ruby_pptx. A project track builds a small time tracker.
Gems in the browser
Most Ruby courses stop where the gems begin. Chunky Bacon has an in-browser gem installer:
install_gem "chunky_png"
Pure-Ruby gems are fetched from a cache or from rubygems.org through a same-origin proxy. They are unpacked onto the WebAssembly filesystem, and their load paths are put on $LOAD_PATH, so require, require_relative and autoload behave as they do on disk.
Gems with a C extension cannot run in WebAssembly. For the important ones there are pure-Ruby stand-ins. Nokogiri comes from my nokogiri-pure, a port of Nokogiri 1.19.4 with libxml2, libxslt and gumbo ported to Ruby. A dependency on bigdecimal installs bigdecimal-pure. Other native gems fail with an explanation that names the gem with the C code, which is often a dependency of the one you asked for.
Widgets
Some lessons use widgets that appear below a cell:
show_irbis a real IRB terminal with multi-line input and authentic prompts.show_browseris a fake browser window that talks Rack directly to your Sinatra or Roda app.show_imageshows PNGs made with chunky_png.show_threeis a WebGL stage for scenes built with three-rb.
Any file a cell writes, for example deck.save("chunky.pptx"), appears as a download link below the cell.
Beside the lessons there is a small workshop for your own multi-file programs, with require_relative between files and input for gets.
Your progress stays with you
Nothing is stored on a server. Progress, code and workshop files live in your browser. You can save them as a progress file and load it again later, or, in Chrome and Edge over https, connect a folder where the workshop files are real files. The fonts are self-hosted, so a visit makes no third-party requests.
The first visit downloads about 32 MB for the Ruby runtime. After that it is cached.
The fox
Chunky Bacon, an original cartoon fox, cheers you on. The name is an homage to why’s (poignant) guide to Ruby by why the lucky stiff. The mascot is my own character and not a copy of _why’s foxes.
The repository
The repository has the app in html/, the lesson texts in html/lessons.js, and a test folder. One harness checks that in every lesson the starter code fails and the solution passes. Another tests the gem installer offline, and Playwright tests run the page end to end. To run it locally:
docker compose up -d # serves on port 8011
The code is MIT licensed. The lesson texts and the fox are CC BY-SA 4.0, and both licenses allow commercial use. If you teach Ruby, you can adapt the course, as long as adapted versions stay under CC BY-SA. Third-party components keep their own licenses, listed in the repository. Issues and pull requests are welcome.