Articles from Alex Korban

Primary tabs

elm-ui: Forget CSS and enjoy creating UIs in pure Elm

Creating UIs with CSS is rarely as straightforward as you expect.

A few weeks ago I wanted to make the navigation on my site responsive, having it switch from a row of links to a hamburger slideout menu. Seems like a reasonable thing to do with CSS, right?

Not really. As often happens, I tried a few reasonable things -- they didn't work. I started searching for solutions -- most involved JavaScript.

I finally found a solution that was CSS-only, and then spent a couple of hours trying differe...

UICards: create UIs without the laborious reload-navigation-input test loop

Crafting a nice UI can suck up a lot of time due to its stateful nature. We're all familiar with this cycle: make some tweaks, reload the app, navigate to the relevant page, click around and type for a while to get the right state, only to see that the spacing in one of the dropdowns still doesn't look quite right. Rinse and repeat.

If you use something like elm-live, you can cut out the reload step and have it done automatically on every code change. But you still need to do the rest of the s...

Practical Elm book: Elm 0.19 update published

I've published the Elm 0.19 update of my book, Practical Elm for a Busy Developer. This update is also based on the latest versions of elm-ui and elm-test packages.

Why Elm?

If you're not familiar with Elm, why would you choose it? There are many good reasons, whether your goal is to broaden your knowledge or to find a new language to use for production applications. Here are a few:

Its goal is to produce no runtime exceptions
It can be a relatively easy introduction to functional programmin...

Build complex forms with validation in Elm

In addition to the two hardest problems in computer science — cache invalidation and naming things — I would add one more, which is dealing with user input via forms.

Somehow, forms tend to evolve into a tangle of interdependencies between fields and byzantine validation rules. "This field is optional based on particular values of three other fields, and not shown at all if another checkbox is selected (but we still want the corresponding value to be calculated as an average of the...

Restarting the Elm Weekly newsletter

It's not so easy to keep up with what's going on in the Elm world these days. On one hand, as the language becomes more popular, the volume of posts on Discourse and the traffic on Slack is going up. On the other hand, I'm still often surprised to run into an interesting article or a useful package that slipped under the radar.

Other languages and technologies have weekly digest emails -- JavaScript Weekly, React Weekly, Haskell Weekly etc. These can be very helpful for keeping up to date. Eve...

Make sure your views are bug-free by testing them with elm-test

You have a bug in your view that only shows up sometimes, under as-yet-undetermined conditions, but the problem is that this view is part of a specific workflow in the application, so you have to get to the right page, fill out a form and click through a couple of dialogs before you can even see if the view is displaying correctly. If not, it's back to tweaking the code to introduce a potential fix, then reload the application, and start over to get to the view again. Does this sound familiar?

The missing part of the Elm guide: URL handling with Browser.application

I saw a tweet from someone who was confused by the missing section in the URL Parsing chapter of the Elm 0.19 guide.

The chapter shows several examples of URL parsers made with Url.Parser, but the Synthesis section at the end is just a TODO. However, the section does suggest what should be in it:

> The major new things are:
> 1. Our update parses the URL when it gets a UrlChanged message.
> 2. Our view function shows different content for different addresses!
> It is really not too fancy. N...

Minimal static boilerplate for Ellie

If you use Ellie for quick non-interactive experiments like I do when playing with different language features or trying out API ideas, you probably find yourself either deleting the default code that a new Ellie is populated with, or somewhat awkwardly adding bits to it.

I kept doing that for a while, and finally I decided to document a minimal boilerplate for static content:

module Main exposing (main)

import Browser
import Html exposing (text)

main : Program () () Never
main =

The basic steps to publish a package with Elm 0.19

I was gearing up to publish my first package, and was a bit surprised that I was unable to find an explanation of the basic steps involved. There are a couple of posts for Elm 0.18 but they are out of date now, so I decided to write down all the things I had to do as I went. Granted, the steps are quite straightforward, as you will see, but it's still a bit of a barrier when they aren't spelled out (or at least a great excuse to procrastinate for me)!

You can get started the same way as you wo...

A straightforward introduction to custom elements

[Note: I wrote this post from the point of view of an Elm developer, however aside from a few Elm related notes, it's really just an introduction to custom elements and Shadow DOM. There isn't any Elm code in this post - it's all JavaScript.]

Quite often, you may need to integrate a complex JavaScript UI component into your Elm application, like a rich text editor, or a calendar, or an image editor, or some kind of visualisation. Such components usually have a lot of state, so you might be con...