[031.5] Elm Weekly Drip #31 and Exercise: Close Drawer on Click

An exercise to improve the user experience in our Elm+Polymer app, and a host of links.

Subscribe now

Elm Weekly Drip #31 and Exercise: Close Drawer on Click [12.15.2016]

This week's exercise: add a port to close the drawer when clicking a link in it. But first, to the links!

In the links this week: An Elm-powered forum; some illustrations; drag and drop; elm-http-builder's new release; Swift+Elm; and a discussion with Evan about how Elm got started.

Introducing Firestorm

An Elm-powered Forum built atop Elixir and Phoenix.

DailyDrip is Kickstarting a project to build a forum in Elixir and Phoenix, with an Elm frontend. There are more details in the blog post and on the Kickstarter page.

[ h/t @dailydripcom ]

Elm Town Episode 6

Talking with Evan about how thing started, where Elm came from, and where it’s going!

The latest episode of Elm Town is a discussion with Evan Czaplicki about the past, present, and future of Elm!

[ h/t @elmtownpodcast and @czaplic ]

Programming People

Did you ever wonder what a given programming language would look like as a person? Because leftoversalad did.

[ h/t @DavidMarinology ]


An easy way to make DOM elements draggable.

Bogdan Zaharia gives us a package for making draggable elements easily. There are some great demos on the GitHub page - in particular, I like this example, which will let you constrain dragging to a given axis by holding down the A or W keys

[ h/t @zaboco ]


Chainable functions for building HTTP requests.

Luke Westby released version 5.0.0 of elm-http-builder, which provides a great API for gradually building and chaining HTTP requests.

[ h/t @luke_dot_js ]

Swift implementation of The Elm Architecture

Swift :heart: elm

Rudolf Adamkovič provides a nice implementation of The Elm Architecture in the Swift Programming Language.

(By the way, did you know we had a topic on Swift that's pretty great?

[ h/t @salutis ]


For this week's exercise, we'll modify elm_web_components_playground to add a port to close the drawer when a link is clicked.

To see the problem in action, resize your browser so that the menu is hidden. Then pull it out and click a link in the menu. The User Experience is not so great, because the content that you wanted to see remains hidden!

HINT: This requires adding a port and reading the docs for app-layout.

NOTE: Try it out both in mobile and on the desktop. There's a trick. You'll need to read the docs a bit.