#elm-lang

I’ve made a puzzle game (prototype) based for A Game By It's Cover 2018 based on based on this 'my famicase' by @louistrations.

This week I spoke at the GOTO Chicago conference and the speaker before me, Richard Feldman, talked about JavaScript interrop with the Elm programming language. If you're not familiar with Elm (I wasn't), it's a statically typed programming language that compiles to JavaScript, with a focus on performance and no runtime exceptions. When I spoke with Richard about accessibility on the speaker drink track later, he mentioned a colleague had been working on an accessibility library. Enter Elm-HTML-A11y, a set of helpers to encourage accessible HTML in Elm.

From developer Tessa Kelly:

“I've been working on a library in Elm that adds helpers for aria attributes and presents a nice API so that it's easier for developers to make the accessible-friendly decision. I've been working from the WAI-ARIA spec, and just trusting that assistive technologies support the attributes I'm adding.”

Elm-HTML-A11y currently covers form inputs, tabs, and images, enforcing accessible defaults with labels, roles and text alternatives. Tessa maintains the repository on Github, so if you have a feature request or issue be sure to let her know!

The third  iteration of the bread baking puzzle game "Mai-chans Sweet Buns" is out now.

Play it on itch!

New and noteworthy:

Ingredients falling now has an animation

Internal: Updated to Elm 0.19

After almost one year of taking a break to learn new programming technique and patterns, I have finally started working on my side project again. If it’s one thing I have learned this year it’s the importance of being declarative and explicit.

Having had to look at almost my whole project as I was upgrading from Elm 0.18 to 0.19, I had a lot of  “omg what was I thinking?!” moments. After the upgrade was complete I was ready to refactor all the things. Starting by going for some of the lowest hanging fruit I wanted to make my imports more explicit.

It’s important to be explicit about where types and function come from so anyone else contributing and future me doesn’t have to guess or search to find out where functions or types come from.

Having no other reason in mind besides clarity,  I removed the implicitness from an import and immediately stumbled across a much more valuable upside to making my imports more explicit.

Out of place code is waaaay more obvious.

What I mean by this is that if you have to explicitly say which module/file a type or function is from, then a function or chunk of code that deals predominantly with those types is going to look very out of place.

Let me show you the exact example that gave me this ah-ha moment.

Here is one import from the root file of my project “Main.elm”.

The Controller import is exposing its’ two main types as well as a few other functions.

Here is what it looks like after removing direct access to Controller’s internals.

Much simpler. Now to the errors!

Now we explicitly tell our Model type where the Controller type is from and…

...the Controller type is from the module Controller. That makes things more straightforward.

The next error was in another type defined in the Main file. It’s roughly the same story as above so I won’t include it here.

Then I stumbled into(I’ll lay out the steps to give you a chance to spot what is a little off)

...

...

...

Hmmmmm… I don’t like the way this looks…

The type signature is really long! Some might even say…. Too long.

And I agree! But why?! What is the problem?

My original mistake was thinking that the problem is that it’s literally just too long, that’s it.

But now I realize that the length is only a symptom of the real problem.

Almost everything about this function revolves around Controller related things…

So why the heck is it here in the Main file instead of the Controller module where literally everything revolves around Controller stuff?

The real solution? Move that function to the Controller module!

And the result?

The types and function “updateController” uses are right here in the Controller module. It is now in its rightful place.

Just to tie up loose ends. Where was this “updateController” being used?

And after the new solution.

I’m turning this into a real game for ‘A Game By Its Cover 2018′ .

After three days of tinkering (at a comfortable pace and with distracting nice summer weather) it’s starting too look like something that could almost be mistaken for a game.

It took me some time to figure out how this combination works. Finally, it is rather easy.

Starting from ...

mix new myapp --umbrella

cd apps

mix phx.new myweb

... you should have a running Phoenix application now.

Add Elm

cd apps/myweb/lib/mywebweb/assets

npm install elm --save-dev

elm package install -y elm-lang/html

Add Your Elm App

mkdir assets/elm

mkdir assets/elm/src

touch assets/elm/src/Main.elm

Edit Main.elm

module Main exposing (..) import Html exposing (h1, text, p, div) import Html.Attributes exposing (style) elmStyle = style [ ("backgroundColor", "darkred") , ("height", "auto") , ("width", "100%") , ("color", "white") , ("padding", "1em" ) ] main = div [ elmStyle ] [ h1 [] [ text "Hello, Elm!"] , p [] [text "This is Elm in an elixir/phoenix umbrella app"] ]

Modify brunch-config.js To

exports.config = { files: { javascripts: { joinTo: "js/app.js" }, stylesheets: { joinTo: "css/app.css" }, templates: { joinTo: "js/app.js" } }, conventions: { assets: /^(static)/ }, paths: { watched: ["static", "css", "js", "vendor", "elm"], public: "../priv/static" }, plugins: { babel: { ignore: [/vendor/] }, elmBrunch: { mainModules: ["elm/src/Main.elm" ], makeParameters: ["--debug"], outputFile: "elm.js", outputFolder: "../assets/js" } }, modules: { autoRequire: { "js/app.js": ["js/app"] } }, npm: { enabled: true } };

Add A "div" For The Elm Application

in any of your phoenix-template-files

<div id="elm-container"></div>

Add The Following Code To The End Of assets/app.js

// Elm import Elm from "./elm"; const elmContainer = document.querySelector("#elm-container"); if (elmContainer) Elm.Main.embed(elmContainer);

Optional

If you're using Git, you may add the following lines to your .gitignore file

apps/myweb/assets/js/elm.js apps/myweb/assets/elm-stuff/

DONE

Your application should now show

wherever you put the div-tag mentioned above.

I just finished chapter five of Programming Elm and want to highly recommend this (beta)book to everyone who wants to learn the Elm-language.

As I follow the chapters of the book you can follow each step of my experience at my repository on Github by browsing through the commits. Although, I recomend to buy the book and make this experience on your own.

What else should a programmer do on a cloudy Sunday afternoon if not fiddle around with something new? So, since I'm practicing some functional stuff a while now (Elixir, Erlang, and Phoenix-Framework) I wonder if there is a good functional oriented frontend language for the browser. And of course, there is one: ELM-LANG

I bought a course on PragmaticStudio and did my first steps in elm. Boy, that's cool and has the potential to keep the frontend code pretty well organized, eliminating side effects, and keep it readable in a gorgeous way.