When exploring custom elements (often called Web Components) in combination with Elm, the following techniques seemed to be very important to me, and I want to have them easily available for future reference:

Techniques

1. Pass stringified data from Elm to the custom element as an HTML attribute (the custom element can watch on changes for these).
2. Pass arbitrary JSON (also opaque objects like RTCPeerConnection) from Elm to the custom element
3. Pass arbitrary JS data from the custom element to elm using DOM events

I use them also for the elm-conf example, but this post is easier to use as a cheat sheet.

This post shows how custom elements (often called Web Components) can be used to create a simple WebRTC conference solution with Elm.

The source code is available on github and the behavior is similar to the simple example from the W3C WebRTC spec.

My main goal was to NOT have two applications that need to synchronize state, but instead keep all state inside the Elm app and use ports to mutate it, and display it using custom elements.

I wrote an answer on stackoverflow about rendering a gantt chart in elm, which positions tasks inside a calendar-like grid, so one can easily see if a task can only be started if all tasks that it depends on were done.

I started with this simple data structure:

type alias Task =
    { id : TaskId
    , dependsOn : List TaskId
    , color : Color
    }

In order to render it, it will be transformed into a list of DrawableTask. Each drawable task contains the information, where in the grid it will be rendered.
For simplicity, I decided that each task has a length of one, but adding a length field will not be hard.

type alias DrawableTask =
    { id : TaskId, col : Int, row : Int, color : Color }

In the end, it looks like this:

In case the iframe does not load open it directly.

My Android app for the FOSS TonUINO DIY music box now also supports NFC tags that support the MIFARE Ultralight standard.

As visible in the picture, the sticker is quite small when compared to a card and allows for neat applications like adding it to a small toy. Note that my sticker has a diameter of 3cm, but I also saw some with less than 18mm².

The feature is available starting with v0.6. More information about the app is in an earlier post.

Reminder of what fields are necessary to display additional information when sharing a link e.g. via WhatsApp.

After building releases for F-Droid was done, I set off to make releases for Google Play easier.

Again, using WSL Ubuntu on Windows 10 by following the instructions from raveesh-me for Ubuntu 18.04:

How to build an android app for fdroid using WSL Ubuntu on Windows 10

I started with the official description, which tells us to first follow the fdroid quickstart

For the TonUINO Android app I wanted to setup a CI system that also creates github releases.

The initial configuration worked (and is triggered after I push a vX.Y.Z tag to the repository) at first, but unfortunately an Android app must be signed before it can be deployed to and executed on an actual device.

So this is how I set up signing on CircleCI in addition to compilation, test execution and creating apk releases.

I wrote an Android app for the FOSS TonUINO DIY music box. The box uses NFC tags to play different music files (or in my case audio books) while being usable by small children.
With it one can easily read the contents of the NFC tags that TonUINO uses and change the values as needed or copy them.

It needs an Android device with enabled NFC (and support for NXP MIFARE Classic or MIFARE Ultralight (since v0.6)) and then the necessary data may be written by pressing one button.

I released the code on Github and the app on Google Play and F-Droid.

The elm parser has problems when trying to parse an integer number followed by a dot ("."), issue 14 describes this problem.

There is a nice solution on the elm discourse platform from dmy, which also demonstrates how to chomp a string using chompWhile and getChompedString.