[005.6] Elm Weekly Drip #5 and Exercise: External APIs and JSON

Quite a few links around the Elm ecosystem, and an exercise to build an app around a Chuck Norris API.

Subscribe now

Elm Weekly Drip #5 and Exercise: External APIs and JSON [05.13.2016]

This week we'll create an app using our newfound JSON Decoding knowledge and and external API. First, some links!

There are a lot of dense links this week. Maybe too many. But there's a trove of useful information if you want to deep dive into understanding the core concepts behind Elm.

Evan Czaplicki - Let's be mainstream! User-focused Design in Elm

A discussion from Elm's creator about the thought that's gone into making the language more pleasant for its end users.

Concurrent FRP - Evan's thesis paper on Elm

If you want to dive into the thought behind Elm's design decisions, you can't do worse than this paper. It's fairly lengthy, at 47 pages, but entirely accessible. Also not remotely necessary if you just want to learn Elm, but really pleasant to read if you're interested in CS.

NOTE: This is not teeeeerribly relevant any longer after 0.17, but it's still a great paper :)


A tool to see the code generated by a given chunk of Elm code, easily, online.


A simple example of how to render 3D and 2D with WebGL and Elm.

Elm Tutorial

A great tutorial on developing single page web applications with Elm.

How to Think Elm

A fun presentation on how to think Elm


A UI Library in Elm.

Wikipedia page on the Unit Type

We discussed Elm's Unit Type () this week, so here's the wikipedia page explaining it in type theoretical terms.


Today's exercise will combine everything we learned about Ports and JSON decoding into a simple web app that will return random Chuck Norris quotes by hitting an external API.

  • Make a basic interface that has a button, and a model that can hold a joke. The joke has an icon_url, an id, and a value, all of which are strings.
  • When clicking that button, fetch a random Chuck Norris joke from https://api.chucknorris.io/jokes/random
  • Place this new joke into the application's model, after decoding the JSON result.
  • Display the joke.

You'll need to use ports and JSON decoding. Have fun!