playground-elm
playground-elm copied to clipboard
:balloon: My playground for playing with elm-lang
|>
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:
- playable: As much as possible, provides a useful and enjoyable content.
🍿 Showcases
Visit the :small_blue_diamond: demo site and play in your browser.
The demo is a pure SPA (100% clientside application) written in elm.
List of showcases:
- asteroids: A simple Asteroids clone in Elm using the ECS pattern and SVG for rendering.
- term: A terminal which evaluates JavaScript code using elm ports.
- physics-engine: Very simple physics engine using Verlet Integration algorithm and rendered through an HTML5 canvas.
- maze: A maze generator using a recursive backtracking algorithm.
- digital-clock: A demo rendering a digital clock in SVG.
- lissajous: Animated Lissajous figures in SVG
- calc: A very simple and basic calculator.
🛠 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:
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
: ELMWith the following (main and non exhaustive) packages:
-
parceljs
: Web application bundler -
bulma
: The modern CSS framework