Front end dev things.

by Brendan Jefferis

Elm + Atom

Read this first

Organising Elm components

Quick follow up to my previous post, this assumes that you have set up your app and dev environment in the way I described.

 1. Add a Component directory

mkdir src/Component

 2. Create a component

touch src/Component/Hello.elm

 3. Edit the component

Notice the magic namespacing here - our module name Component.Hello is derived from the name of the directory and filename.

// src/Component/Hello.elm
module Component.Hello where

import Html exposing (..)

sayHello : String -> Html
sayHello greeting =
    div
        [ ]
        [ text (greeting ++ " from Hello component") ]

 4. Import into Main.elm

Note: as Hello is simply an alias to Component.Hello which allows us to call its functions a little more concisely.

// src/Main.elm
module Main where

import Html exposing (..)
import Component.Hello as Hello

main =
    Hello.sayHello "uhh... hi"

Continue reading →


Setting up a dev environment in Elm using Atom

 It’s as easy as 1,2,… uhh.. 10

Our goal is to put together an Elm environment that includes custom HTML/SCSS and is suitable for a professional workflow for web applications.

The approach outlined here puts an emphasis on simplicity and minimal dependencies.

 Features of this environment

  • Customise your index.html (for including css/js etc)
  • Autocompile your Elm code on save (and view errors in IDE)
  • Autocompile your scss
  • Use elm-reactor as a local web server for development

 Current limitations

This approach does not yet support use of the elm debugger. If that is unsuitable for you then I encourage you to print this post out and throw it in the trash.


 OK, Let’s do this thing.

 1. Install Atom IDE

I chose Atom over Sublime Text (which is admittedly faster and more stable), Light Table, Microsoft VS Code because it currently has the best Elm language support and is easily

Continue reading →