{"id":13561289,"url":"https://github.com/ccamel/playground-elm","last_synced_at":"2025-04-13T06:11:03.743Z","repository":{"id":37826944,"uuid":"98299102","full_name":"ccamel/playground-elm","owner":"ccamel","description":" :balloon: My playground for playing with elm-lang","archived":false,"fork":false,"pushed_at":"2024-04-04T17:35:12.000Z","size":6259,"stargazers_count":15,"open_issues_count":5,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-04T18:47:37.261Z","etag":null,"topics":["bootstrap","demo-site","elm","elm-demos","parceljs","playground","spa","web-application"],"latest_commit_sha":null,"homepage":"https://ccamel.github.io/playground-elm/index.html","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ccamel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-07-25T11:30:21.000Z","updated_at":"2024-07-11T23:00:25.346Z","dependencies_parsed_at":"2023-11-13T07:25:29.711Z","dependency_job_id":"23bead08-a364-4d5e-8272-8fb711312e10","html_url":"https://github.com/ccamel/playground-elm","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccamel%2Fplayground-elm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccamel%2Fplayground-elm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccamel%2Fplayground-elm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccamel%2Fplayground-elm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ccamel","download_url":"https://codeload.github.com/ccamel/playground-elm/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670434,"owners_count":21142904,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","demo-site","elm","elm-demos","parceljs","playground","spa","web-application"],"created_at":"2024-08-01T13:00:54.497Z","updated_at":"2025-04-13T06:11:03.737Z","avatar_url":"https://github.com/ccamel.png","language":"Elm","funding_links":[],"categories":["Elm"],"sub_categories":[],"readme":"# `|\u003e` playground-elm\n\n[![release](https://img.shields.io/github/release/ccamel/playground-elm.svg?style=flat)](https://github.com/ccamel/playground-elm/releases)\n[![MIT](https://img.shields.io/badge/licence-MIT-lightgrey.svg?style=flat)](https://tldrlegal.com/license/mit-license)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fccamel%2Fplayground-elm.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fccamel%2Fplayground-elm?ref=badge_shield)\n[![build-status](https://github.com/ccamel/playground-elm/actions/workflows/build.yml/badge.svg)](https://github.com/ccamel/playground-elm/actions/workflows/build.yml)\n[![quality-grade](https://app.codacy.com/project/badge/Grade/05944c94318b4da3b8f438f8d441d869)](https://app.codacy.com/gh/ccamel/playground-elm/dashboard?branch=main)\n[![ELM](https://img.shields.io/badge/elm-0.19.1-blue.svg?style=flat\u0026logo=elm)](http://elm-lang.org/)\n\u003ca href=\"https://bulma.io/\"\u003e\u003cimg height=20px src=\"https://bulma.io/assets/images/made-with-bulma.png\" alt=\"made with bulma\"\u003e\u003c/a\u003e\n[![pnpm](https://img.shields.io/badge/pnpm-%234a4a4a.svg?style=flat\u0026logo=pnpm\u0026logoColor=f69220)](https://pnpm.io)\n[![git3moji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square)](https://gitmoji.carloscuesta.me)\n[![StackShare](https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat\u0026logo=stackshare)](https://stackshare.io/ccamel/playground-elm)\n[![Demo](https://img.shields.io/badge/play-demo!-b30059.svg?style=flat)](https://ccamel.github.io/playground-elm/)\n\n\u003e My playground I use for playing with fancy and exciting technologies. This one's for [elm][].\n\n## 🎯 Purpose\n\nThe purpose of this playground is to explore, study and assess the [elm][] language — a delightful language for reliable\nwebapps.\n\n[![https://ccamel.github.io/playground-elm/](./screenshot.webp)](https://ccamel.github.io/playground-elm/)\n\nThe showcases are intended to be:\n\n- **simple**: Fairly simple and understandable. Every showcase is implemented in a single elm file.\n- **exploratory**:\n  - _Highlight_ some aspects of the [elm][] language, like immutability, reactiveness, performance and interoperability\n    with other JS libraries and CSS frameworks.\n  - _Explore_ some architectural/design patterns around reactive static/serverless [SPA][]\n- **playable**: As much as possible, provides a useful and enjoyable content.\n\n## 🍿 Showcases\n\nVisit the :small_blue_diamond: [demo site](https://ccamel.github.io/playground-elm/) and play in your browser.\n\nThe demo is a pure [SPA][] (100% clientside application) written in [elm][].\n\nList of showcases:\n\n- [terrain](https://ccamel.github.io/playground-elm/#terrain): A retro-inspired endless terrain flyover, featuring a procedurally generated 1D landscape, rendered in [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics).\n\n- [glsl](https://ccamel.github.io/playground-elm/#glsl): A dynamic [WebGL](https://www.khronos.org/webgl/) electricity effect created with [GLSL](https://en.wikipedia.org/wiki/OpenGL_Shading_Language) shaders, featuring interactive 3D rotation with smooth inertia.\n\n- [soundWave toggle](https://ccamel.github.io/playground-elm/#sound-wave-toggle): A simple sound wave toggle button\n  rendered in [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics).\n\n- [dApp](https://ccamel.github.io/playground-elm/#dapp): A straightforward decentralized application (dApp) that\n  interfaces with various wallets, utilizing [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963).\n\n- [asteroids](https://ccamel.github.io/playground-elm/#asteroids): A simple clone of the classic game Asteroids,\n  implemented in [Elm][] using the\n  [Entity Component System (ECS)](https://en.wikipedia.org/wiki/Entity_component_system) pattern, rendered with\n  [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics).\n\n- [term](https://ccamel.github.io/playground-elm/#term): A web-based terminal that evaluates JavaScript code using\n  [Elm ports](https://guide.elm-lang.org/interop/ports.html) for interactivity.\n\n- [physics](https://ccamel.github.io/playground-elm/#physics-engine): A straightforward physics engine utilizing the\n  [Verlet Integration](https://en.wikipedia.org/wiki/Verlet_integration) algorithm, rendered on an HTML5 canvas.\n\n- [maze](https://ccamel.github.io/playground-elm/#maze): A maze generator crafted using the\n  [recursive backtracking](https://en.wikipedia.org/wiki/Maze_generation_algorithm#Recursive_backtracker) algorithm.\n\n- [digital clock](https://ccamel.github.io/playground-elm/#digital-clock): A digital clock demo, visually represented\n  using [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics).\n\n- [lissajous](https://ccamel.github.io/playground-elm/#lissajous): Animation of\n  [Lissajous](https://en.wikipedia.org/wiki/Lissajous_curve) figures, depicted in\n  [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics).\n\n- [calc](https://ccamel.github.io/playground-elm/#calc): A basic calculator designed for simple arithmetic operations.\n\n## 🛠 Building and Running\n\n### Elm 0.19\n\nElm 0.19 broke me as many other coders, due to a lot of changes on topics I used in this project with previous version:\n\n- `elm.json` file\n- JSON decoding\n- String / Int / Float conversions\n- Browser application, routing\n- Url management\n- date time (`Posix`, `Zone`)\n- lots of incompatible packages\n- ...\n\nI finally managed to migrate to this new version but instabilities can be noticed though.\n\n### Prerequisites\n\nBe sure to have the following properly installed:\n\n- [Node.js](https://nodejs.org/ru/) `v20.18` ([lts/iron](https://nodejs.org/en/blog/release/v20.18.1))\n- [pnpm](https://pnpm.io/) `v8.3`\n\n### Build\n\nThe project now relies on [parceljs][], a web application bundler which handles [elm][] builds at free.\n\nAt first, all the node packages this project depends on must be installed locally. This can be done with the following\ncommand:\n\n```bash\npnpm install\n```\n\nThe build can be launched with:\n\n```bash\npnpm build\n```\n\nThen, open `./dist/index.html` file in your browser.\n\nIf you prefer, the site can be published by a local HTTP server. In this mode, if any change is detected, the build of\nthe project will be started again, and the site automatically updated in the browser; which is nice during the\ndevelopment phases.\n\nThe publication is launched with the following command:\n\n```bash\npnpm serve\n```\n\nThe site is accessible through the `http://localhost:1234` endpoint.\n\n## 🔋 Technologies\n\n- [`elm`](http://elm-lang.org/): ELM\n\n  With the following (main and non exhaustive) packages:\n\n  - [Chadtech/elm-vector](https://package.elm-lang.org/packages/Chadtech/elm-vector/latest/)\n  - [avh4/elm-color](https://package.elm-lang.org/packages/avh4/elm-color/latest/)\n  - [cuducos/elm-format-number](https://package.elm-lang.org/packages/cuducos/elm-format-number/latest/)\n  - [elm-explorations/markdown](https://package.elm-lang.org/packages/elm-explorations/markdown/latest/)\n  - [simonh1000/elm-colorpicker](https://package.elm-lang.org/packages/simonh1000/elm-colorpicker/latest/)\n  - [joakin/elm-canvas](https://package.elm-lang.org/packages/joakin/elm-canvas/latest/)\n  - [wsowens/term](https://package.elm-lang.org/packages/wsowens/term/latest/)\n  - [MacCASOutreach/graphicsvg](https://package.elm-lang.org/packages/MacCASOutreach/graphicsvg/latest/)\n  - [harmboschloo/elm-ecs](https://package.elm-lang.org/packages/harmboschloo/elm-ecs/latest/)\n  - [BrianHicks/elm-particle](https://github.com/BrianHicks/elm-particle)\n  - [elm-explorations/webgl](https://github.com/elm-explorations/webgl)\n  - [nphollon/geo3d](https://github.com/nphollon/geo3d)\n\n- [`parceljs`](https://parceljs.org/): Web application bundler\n- [`bulma`](https://bulma.io/): The modern CSS framework\n\n## 📜 License\n\n[MIT][] © [Chris Camel][]\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fccamel%2Fplayground-elm.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fccamel%2Fplayground-elm?ref=badge_large)\n\n[elm]: http://elm-lang.org/\n[parceljs]: https://parceljs.org/\n[spa]: https://en.wikipedia.org/wiki/Single-page_application\n[chris camel]: https://github.com/ccamel\n[mit]: https://tldrlegal.com/license/mit-license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fccamel%2Fplayground-elm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fccamel%2Fplayground-elm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fccamel%2Fplayground-elm/lists"}