Blog

• Decode dropped directory of files (12 10 2024)

  In 2018, Elm got support for Files from HTML drop events. This enabled Elm developers to work with the contents of a File and upload it elsewhere or read the content into their program.

• Recursive event handler decoders (28 12 2021)

  Here’s a technique for using a single event handler for a portion of the DOM, which uses an event’s “dataset” to keep track of what was clicked. We use this in production code to render clickable, user-declared html.

• Elm + Google-map web component (24 08 2019)

  In the Elm community ‘use a Port’ is a near-constant refrain, if you need to interoperate with Javascript. But more recently, web components have become a workable alternative. This post is a companion to Elm (0.18) & Ports - Google Maps quick and dirty, providing a guide to using the official Google-maps web component with Elm 0.19. The full code is here.

• Impressions from Elm Europe 2017 (10 06 2017)

  So, hundreds of European Elmers meet in Paris and what is the result? A lot of energy, confidence, much fun and - for me at least - ever more enthusiasm to get back to my Elm code as it prepares for production. There was a lot to be learned in the conference talks, and even more from the conversations in the sunny garden of the Parisian technical college hosting us.

• Elm Effect Managers - an introduction (05 05 2017)

  It started with a casual remark from a colleague: “How about debouncing that?” I had a drop down menu that, on a single click needed to navigate to a new page and remove the dropdown, while a double click should make the menu item editable. The trouble was that the second clikc was never detected as Elm had already cleared away the menu. A quick look on packages.elm-lang.org led to 6 debouncing libraries (!), all based on storing Msgs in the model. But which Msg - this is multi page App - and where?

• Elm (0.18) & Ports - Google Maps quick and dirty (16 12 2016)

  This is an update of my earlier post, and is an example of using ports to work with the ubiquitous Google Maps library.

• Uploading to S3 from Elm (07 12 2016)

  Storing binary data on S3 is a typical front-end need, and often has be to implemented with authorisation to ensure that only designated users can upload. To do that, uploads need to be ‘signed’ with a secret key. There are several possible approaches:

• Developing Elm using Gulp with Elixir / Phoenix (11 10 2016)

  I found brunch did not work so well with Elm, so my fall back was Gulp, which I know well. Here are my notes on setting up Phoenix and Gulp for an Elm project.

• Connecting Elm with Phoenix using Channels (22 05 2016)

  One of the big strengths of Phoenix is Channels. Channels seem to have been a key motivation for Elm’s recent 0.17 release, which introduced a new WebSocket library (that takes advantage of Elm’s new effects handlers). I had a go at trying to wire it up a simple chat app. There are many posts about Channels already so the focus here will be on Elm.

• Phoenix & Elm - authentication with Json Web Tokens (21 05 2016)

  Json Web Tokens (Jwts) are a rich alternative to cookies for ensuring authenticated access to protected assets, and it is now easy to implement them in a Phoenix-Elm (i.e. single page) environment using the Guardian and (my own) Elm-Jwt libraries respectively. This blog accompanies the example code in my Github repo, and steals gratefully from Daniel Neighman’s post on Guardian for APIs.

• Angular 2: one-way data flow with Redux (20 10 2015)

  Horrified! That seemed to be the collective reaction when the Angular team announced two-way data binding would not be directly present in Angular2. Since then, the team have worked hard to reassure the community.

• Elm and lazy loading Google Maps (15 10 2015)

  Imagine you have multi-view Elm app, where one of the views includes a Google map. I covered previously the basics of wiring up a Google Maps in Elm but, in that example, the div for the Google Map was hard coded into the html, and Elm was was run via the embed method. What if you want to run fullscreen, with Elm creating the div for the map?

• Google Maps with Elm (0.16) and ports (09 10 2015)

  This post is the start of a series about Elm and Google Maps, but the key learning from my initial ‘quick and dirty’ approach was how to use ports with the ubiquitous Elm Architecture.

• SystemJS, Angular and Wordpress (27 09 2015)

  SystemJS needs some quite careful configuration, especially with Angular, and Wordpress plays around with paths quite a bit, so getting the three to play nicely is possible but fiddly. Here’s how I made it all work.

• Responsive images (srcset / sizes) (31 08 2015)

  A responsive website will need to work across a very wide range of eventualities. In order to cater for the largest, high density screens, a very large image needs to be server, but that is overkill for cheap smartphone screens (with bandwidth limitations too).

• Monads and mutable data structures (06 11 2014)

  I’m following the Stanford Algorithms MOOC and trying to implement the problems using Haskell. Many of the algorithms require quite a bit of data juggling, and my pure solutions are running way slower than benchmarks people are quoting for imperative languages. This is due to expensive copying and appending.