This is a collection of cool 3D stuff made 100% in Elm.

Get inspired to play with these tools, build stuff and contribute to public libraries!

If you think that something is missing, you spotted a mistake or you have some feedback, send me a message or — even better — open an issue or send a pull request in this repository.

If you want to learn more about 3D Graphics in Elm, you can start reading the documentation of these libraries and joining the channels #webgl and #gamedev in the Elm Slack.

Enjoy! 🎉

Content

Demos

Balls and Blocks


Mount Fuji seen from Kawaguchi lake by WorldInMyEyes from Pixabay

Lately there has been some interesting discussion about Modern Web.

I personally think that

  • Single Page Applications (SPAs) have been (ab)used in places where a more traditional server side approach could have been a better fit
  • SPAs require extra care (navigation, scrolling, accessibility, SEO, etc.)
  • There are many SPAs that are not well crafted but when they are well made, SPAs can very much enhance the user experience
  • The browser feels like the natural place where to handle complex UIs, not the Server
  • As developers, I (we?) like to keep using my best tools to improve the Developer Experience

Related…


This is an attempt to measure how good are front-end frameworks in dealing with simple errors.

I took the implementations of TodoMVC made in 5 different frameworks: VanillaJS, React, Vue, Svelte and Elm.

Then I injected 7 different errors and I analyzed the behavior.

After injecting error in the 5 implementations, I measured the outcome using this scale (ordered from best to worse):

  • A. Impossible to introduce such error
  • B. Compiler error
  • C. Nothing render on the screen and there is an error in the console at start
  • C (2) .The app render and there are no bugs
  • D. The…

A biased and superficial comparison between two frameworks that compile to JavaScript

I had some fun writing this (probably inconclusive) post about Elm and Svelte. Rich Harris, in Write less code, showcase a small code snippet in Svelte as an example of getting something done writing a small amount of code.

I wrote the same thing in Elm and compared with Svelte using these criteria:

  1. Code Size
  2. Performances
  3. The Architecture
  4. Declarative vs. Imperative Programming
  5. Static vs. Dynamic typing
  6. Data Binding
  7. Single Source of True
  8. Compilers

1. Code Size

Elm, predictably, has more code.

The Svelte version

<script>
let a = 1;
let b = 2;
</script>
<input type="number" bind:value={a}>
<input type="number" bind:value={b}>
<p>{a} + {b} = {a +…


This is a tutorial on how to build a mildly complex web layout without any knowledge of CSS (and also any knowledge of Javascript and HTML for that matter).

The layout is built using Elm and elm-ui. Elm is a pure functional language that compile to Javascript. elm-ui is an Elm library that create a semantic layer on top of CSS and HTML. If you are new to Elm, the Elm official guide and the elm-ui documentation are two good starting points.

TL;DR The result


Photo by Mitchell Hollander on Unsplash

Handling time in Elm seems to be a scaring thing for beginners.

In Elm is not possible to have a function that return the present time because that would not be a pure function and all functions must be pure.

Such a function is not pure because the output is different every time we call it while pure function need to always return the same output given the same arguments.

The function will “contaminate” also any other pure function that call it making your entire code difficult to reason about and to test.

But is this a real issue?

Let’s…


Part 3 of 12 — Add the Pause

Previous: Part 2 — Add Keyboard Support

Next: Part 4—Add the Players (coming soon)

Add the pause

Lucamug

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store