|> playground-elm

My playground I use for playing with fancy and exciting technologies. This one's for elm.

🎯 Purpose

The purpose of this playground is to explore, study and assess the elm language — a delightful language for reliable webapps.

The showcases are intended to be:

• simple: Fairly simple and understandable. Every showcase is implemented in a single elm file.
• exploratory:
  • Highlight some aspects of the elm language, like immutability, reactiveness, performance and interoperability with other JS libraries and CSS frameworks.
  • Explore some architectural/design patterns around reactive static/serverless SPA
• playable: As much as possible, provides a useful and enjoyable content.

🍿 Showcases

Visit the 🔹 demo site and play in your browser.

The demo is a pure SPA (100% clientside application) written in elm.

List of showcases:

• glsl: A dynamic WebGL electricity effect created with GLSL shaders, featuring interactive 3D rotation with smooth inertia.

• soundWave toggle: A simple sound wave toggle button rendered in SVG.

• dApp: A straightforward decentralized application (dApp) that interfaces with various wallets, utilizing EIP-6963.

• asteroids: A simple clone of the classic game Asteroids, implemented in Elm using the Entity Component System (ECS) pattern, rendered with SVG.

• term: A web-based terminal that evaluates JavaScript code using Elm ports for interactivity.

• physics: A straightforward physics engine utilizing the Verlet Integration algorithm, rendered on an HTML5 canvas.

• maze: A maze generator crafted using the recursive backtracking algorithm.

• digital clock: A digital clock demo, visually represented using SVG.

• lissajous: Animation of Lissajous figures, depicted in SVG.

• calc: A basic calculator designed for simple arithmetic operations.

🛠 Building and Running

Elm 0.19

Elm 0.19 broke me as many other coders, due to a lot of changes on topics I used in this project with previous version:

• elm.json file
• JSON decoding
• String / Int / Float conversions
• Browser application, routing
• Url management
• date time (Posix, Zone)
• lots of incompatible packages
• ...

I finally managed to migrate to this new version but instabilities can be noticed though.

Prerequisites

Be sure to have the following properly installed:

• Node.js v18.17 (hydrogen)
• pnpm v8.3

Build

The project now relies on parceljs, a web application bundler which handles elm builds at free.

At first, all the node packages this project depends on must be installed locally. This can be done with the following command:

pnpm install

The build can be launched with:

pnpm build

Then, open ./dist/index.html file in your browser.

If you prefer, the site can be published by a local HTTP server. In this mode, if any change is detected, the build of the project will be started again, and the site automatically updated in the browser; which is nice during the development phases.

The publication is launched with the following command:

pnpm serve

The site is accessible through the "/ endpoint.

🔋 Technologies

• elm: ELM

  With the following (main and non exhaustive) packages:

  • Chadtech/elm-vector
  • avh4/elm-color
  • cuducos/elm-format-number
  • elm-explorations/markdown
  • simonh1000/elm-colorpicker
  • joakin/elm-canvas
  • wsowens/term
  • MacCASOutreach/graphicsvg
  • harmboschloo/elm-ecs
  • BrianHicks/elm-particle
  • elm-explorations/webgl
  • nphollon/geo3d

• parceljs: Web application bundler

• bulma: The modern CSS framework

📜 License

MIT © Chris Camel