Forem: Kristian Pedersen

#30daysofelm Day 30: Closing thoughts

Kristian Pedersen — Fri, 15 Jan 2021 15:00:18 +0000

This is the last day of my 30 day Elm challenge!

Today is less about code, and more about how this whole project went.

In short, the 30 days have been successful. I'm now at a place where I know enough basics to make something, and be able to ask good questions when I get stuck.

Writing these posts takes a lot of time, so I'm looking forward to putting more energy into some personal projects that I want to to re-make and improve.

Looking at all the comments and help I've gotten, I can safely say that the Elm community is extremely helpful and beginner-friendly. Hopefully I can thank some of the commenters in person at a conference or meetup in the future! :)

I still think it would be nice to write occasionally to keep the momentum going, and get the benefits in terms of deeper thinking and great feedback. I'll think about how to approach this during the weekend.

1. Why Elm?
2. Personal top 5 projects from these 30 days
- 2.1. Day 5: "Lights Out" game
- 2.2. Day 6: Accessible background colors
- 2.3. Day 9: Deploying a Python backend + Elm frontend
- 2.4. Day 15 to 19: From struggling with JSON to decoding JSON from Python
- 2.5. Day 24: Html Msg vs Html msg
3. Things that I like about Elm
- 3.1. If it compiles, it works
- 3.2. Types
- 3.3. elm-format
- 3.4. Syntax
- 3.5. Immutability
4. Things I don't like about Elm
- 4.1. Some parts of the documentation lack examples
- 4.2. Can't mix Floats and Ints
- 4.3. Some things are harder than expected
5. Learning strategy
- 5.1. Things that worked really well
  - 5.1.1. Setting the bar low
  - 5.1.2. Writing
  - 5.1.3. Not following a set structure was mostly really good
- 5.2. Things that could have been better
  - 5.2.1. Not taking enough breaks
  - 5.2.2. Writing too much
6. What's next?

1. Why Elm?

I first learned JavaScript in 2016, thanks to Daniel Shiffman's p5.js videos about visualizing mathematics and physics, and making cool animations.

Already back then, I saw some Elm code, but it looked weird to me: case msg of, square brackets instead of HTML templates, commas at the beginning of each line, no side effects. All that code just to increment a counter? No, thanks.

Then in late 2020, after having learned React for a month or so, I found myself struggling with my 100th runtime exception that day.

I'm not smart enough to write complex JavaScript without shooting myself in the foot, and I remembered Elm's promise of 0 runtime exceptions, and here I am now.

Sure, it would have made sense to learn TypeScript, and maybe incorporate immutable.js and some other libraries, but this diagram helped convince me:

Screenshot from https://www.youtube.com/watch?v=kEitFAY7Gc8 (slightly outdated)

Somehow that same day, I stumbled upon @larsparsfromage's #100daysofhaskell challenge, and decided to do a 30 day Elm challenge with detailed write-ups.

2. Personal top 5 projects from these 30 days

I'm happy with all of them, as they were all part of the journey.

Here's the full list: https://dev.to/kristianpedersen/30-days-of-elm-intro-2lo2

With that said, some were a bit more entertaining or educational than others:

2.1. Day 5: "Lights Out" game

This was my first Elm project where I was both happy with my code, and found myself having fun with the end result.

You have a 5x5 grid of checkboxes. When you toggle one, its neighbors also get toggled. The goal is to clear the board.

https://dev.to/kristianpedersen/30daysofelm-day-5-lights-out-game-4b16

2.2. Day 6: Accessible background colors

I was happy about how accessible this topic was (shouldn't come as a surprise, I guess).

A slider generates a color palette, which is represented as squares. Each square then gets its text colored white or black text, depending on which accessibility standard you choose.

There's just something about moving a slider and have so many things happen!

https://dev.to/kristianpedersen/30daysofelm-day-6-accessible-background-colors-29ao

2.3. Day 9: Deploying a Python backend + Elm frontend

I had previously made a small Python backend, which fetches astronomy data.

Getting this up and running, and have Elm display the data was amazing!

https://dev.to/kristianpedersen/30daysofelm-day-9-astronomy-data-from-python-in-elm-deployment-difficulties-2i47

2.4. Day 15 to 19: From struggling with JSON to decoding JSON from Python

Decoding JSON was tough, but by asking for help and not giving up, I got it working!

I also learned some lessons about making things as simple as possible, which I'm very happy about.

2.5. Day 24: Html Msg vs Html msg

Finally decided to get to the bottom of this mystery, and also got a sense of types vs type aliases.

Html msg: There no event.
Html Msg: There's an event, and it might have some data associated with it.

I still don't like how similar these two look, so I prefer using Html a instead of Html msg.

https://dev.to/kristianpedersen/30daysofelm-day-24-msg-vs-msg-2n1h

3. Things that I like about Elm

I'm sure there are things that I've forgotten or taken from granted, but here are some things that I've really liked.

3.1. If it compiles, it works

I've had 0 runtime exceptions, which is obviously one of the biggest benefits. In my last React project, everything compiled fine, I clicked around to test everything, and suddenly got a runtime exception out of nowhere.

In Elm, I still get lots of compile-time errors, but I really don't mind. They make it feel like I'm doing pair programming with someone more experienced, and actually getting help.

That feeling when it finally compiles and you know everything is going to work: 10/10

3.2. Types

Coming from JavaScript and some Python, the static typing was weird at first, but they've forced me to think more deeply about what I'm trying to do. Also, types result in better error messages.

Type aliases are very convenient, and types is something I've only recently started to understand the power of.

I really like how the Msg type provides a great overview of an application's possible actions, and I can imagine this benefit holds true with other custom types as well.

I'm very excited by the thought of making impossible states impossible, so I'm looking forward to working more with types.

3.3. elm-format

At first, some of the formatting threw me off, but now I mostly like it.

Practially all Elm code uses elm-format, which sounds restrictive at first, but it's one less thing to worry about, and reading other people's code is made easier.

Things can get a bit messy when doing anonymous functions with let blocks, but in those cases I prefer extracting things into separate functions anyway.

Reading code is quicker with equal signs being followed by a newline, and I now believe that commas do indeed belong at the beginning of the line.

Edit: I forgot one of the most important ones! elm-format automatically sorts all imports and their exposed functions alphabetically! 😍

3.4. Syntax

At first, the view functions in Elm looked insane. All those empty square bracket pairs nearly made me cry.

Then you learn that attributes go in the first one, and content goes in the other one. Not bad after all!

The pipeline operator |> feels nice and familiar, coming from JavaScript's chained function calls.

I like how function definitions have less "noise", along with the fact that all functions return something.

JavaScript:

function double(x) {return x * 2}
or
const double = x => x * 2

Elm:

double x = x * 2

Let's read these out loud:

"function double parenthesis x closing parenthesis curly brace return x times two closing curly brace"
"const double equals x equals is greater than x times two"
"double x equals x times two"

3.5. Immutability

In JavaScript, I have to remember to explicitly make copies of things, and make sure I'm not just doing shallow copies, especially of nested objects.

Having immutability built-in is a relief. Making copies is not a problem, as I'm already used to map, filter and reduce from JavaScript.

I like knowing that nothing external can make my functions do unexpected things.

4. Things I don't like about Elm

4.1. Some parts of the documentation lack examples

I know that OnClick is explained in the Elm Guide, but why not include a basic event example directly in the Html.Events documentation? Switching to another tab feels unnecessary.

(The link to TodoMVC on that page doesn't work any longer, by the way.)

One example would be enough to get beginners going with events more easily:

module Main exposing (..)

import Browser
import Html exposing (button, div, input, p, text)
import Html.Events exposing (onClick, onInput)


main =
    Browser.sandbox { init = init, update = update, view = view }


init = { number = 0, userInput = "" }


type Msg
    = Increment
    | ReceivedInput String


update msg model =
    case msg of
        Increment ->
            { model | number = model.number + 1 }

        ReceivedInput input ->
            { model | userInput = input }


view model =
    div []
        [ button [ onClick Increment ] [ text (String.fromInt model.number) ]
        , input [ onInput ReceivedInput ] []
        , p [] [ text ("The model is: " ++ (model |> Debug.toString)) ]
        ]

Also, if I want to create a canvas element, how do I actually use it? How can I get its context? Is it supported in Elm? This is all I'm getting from the documentation:

canvas : List (Attribute msg) -> List (Html msg) -> Html msg
Represents a bitmap area for graphics rendering.

Scrolling through elm/html, I would have expected to see examples when clicking on an entry.

Maybe experienced Elm devs prefer type annotations over examples, but I just want to know how to make something.

4.2. Can't mix Floats and Ints

Let's say some function returns an Int, and you want to add 0.1 to it:

doesntWork = (floor 1.1) + 0.1

works = (floor 1.1 |> toFloat) + 0.1

Error message:

I need both sides of (+) to be the exact same type. Both Int or both Float.
3| (floor 1.1) + 0.1
^^^^^^^^^^^^^^^^^
But I see an Int on the left and a Float on the right.
Use toFloat on the left (or round on the right) to make both sides match!

There are reasons for this, but it's still a bit annoying.

4.3. Some things are harder than expected

This is just a consequence of how Elm is structured, so I'm not mad about it.

On day 10, I was puzzled by how much code was needed just to get mouse coordinates.

Then again, Elm is better suited for applications of a certain complexity. If I want to make a very quick prototype, I'll just use Svelte.

5. Learning strategy

Next up, I want to examine my methodology for learning Elm. What worked, and what could have been done differently?

5.1. Things that worked really well

I'm happy to report that many things went well during this challenge! :D

5.1.1. Setting the bar low

This was a very successful hypothesis. 30 days of varying productivity is better than a week of divine hustle and blissful inspiration.

If I'm unmotivated or something comes up, I can still succeed by doing the absolute minimum imaginable.

If I'm motivated, I'll keep going because I want to, and end up raising the bar anyway.

Looking back, there were definitely some frustrating days, or days where I really didn't want to do anything.

Almost every time that happened, I told myself that 5 minutes of any Elm code or knowledge was okay, and I usually ended up spending an hour anyway.

Another effect of this was preserving momentum. Some of my most productive or insightful days were preceded by one or more difficult days.

5.1.2. Writing

There were two purposes behind the blogging:

Documenting what it's like to learn Elm, for someone with my experience. Maybe it could help other beginners?
Setting up a situation where I have to think more deeply about concepts and problems. I had several great a-ha moments and blind spot revelations while writing these blog posts.

The third consequence was unintended - amazing help and feedback.

The comments I've gotten on some of my posts have been astoundingly good. I wouldn't have gotten such good help by just asking.

I think people get motivated to help when they see someone really trying, who provides detailed information, thoughts and reflections.

Also, I think many programmers have this instinct of "by the way, you can also do it this much better way". For this reason, beginners shouldn't be shy about sharing their code.

Cunningham's Law states "the best way to get the right answer on the internet is not to ask a question; it's to post the wrong answer."

https://meta.wikimedia.org/wiki/Cunningham%27s_Law

5.1.3. Not following a set structure was mostly really good

I think some of the project ideas in the 30 day list are really cool, and I wouldn't be surprised if I end up working more on them. These wouldn't have been part of a pre-determined learning roadmap.

Not having to do a ton of stuff on low-motivation days was really beneficial. It meant that if I had a bad day, I wouldn't fall behind, which I think was crucial for motivation.

I do have this feeling that I should now learn how to make more "useful" stuff, along the traditional path. Knowing how elm-spa works, making a todo list, doing something with a database, etc.

However, I mostly think many of those things will emerge naturally as I work on increasingly complex projects.

5.2. Things that could have been better

Of course I did some things wrong - or as I like to say, I learned something.

5.2.1. Not taking enough breaks

At my previous job, I was often the one who said "Hey, let's go outside for 5 minutes and stretch!".

Now that I'm on my own, I'm a lot worse at taking regular breaks. I do go for a 1-2 hour walk every day, and I cook proper meals, but I often end up just grinding through lots of computer time, which often ends up not being that efficient anyway.

Unsurprisingly, I often have a-ha moments after I've been outside, talked with someone, or done something completely unrelated.

5.2.2. Coding and writing in one day is a lot of work

The writing has definitely helped a lot, and introduced me to some great people.

However, it does take a lot of time, and I found it a bit stressful. I'm the kind of person who can spend 10-15 minutes on just one sentence.

Sometimes, I would get into a nice flow with the coding, only to realize I needed to start writing soon.

Some 100 day challenges I've seen around just involve a paragraph or two, which sounds a lot more sustainable.

6. What's next?

My primary focus is on implementing a few hobby projects in Elm, and improving them. Other than that, some potential areas of interest are:

Accessibility. What are the different assistive technologies out there? What kinds of tests have to be passed? How do you avoid overloading users' working memory? The web should be for everyone.
Making flexible designs that look good. I just want to know how to make designs that look modern, are easy to change, and users don't even think about. I'm still stuck at using too many borders and computer colors.
Data visualization. Elm has some good tools for this, but Observable seems like a really nice environment for experimentation. For interactive installations, I now know how to control TouchDesigner from Elm!
Backend/cloud/IOT: It would be cool to deploy a web page that displays serial port data from my Arduino, or some other external data. Elixir+Phoenix+LiveView seems really interesting, but I'm open to other options.
Getting a job. I've been to several interviews the past couple of months, and they've been positive regarding background, projects, personality, willingness to learn, etc.However, I lack experience (and probably certain skills aren't useful enough to employers yet). I'm waiting to hear back from many applications, but any advice is helpful. :)

Right now, I'm taking my first weekend off since mid-december. If you have any questions, comments, feedback or anything, I'm here.

Thanks for joining me, and see you around!
- Kristian

#30daysofelm Day 29: Basic map, filter and reduce/foldl

Kristian Pedersen — Thu, 14 Jan 2021 21:51:52 +0000

This is day 29 of my 30 day Elm challenge

Yesterday was fun, but I'm really exhausted today. Maybe it's because I'm almost done with the 30 days, and I need a break.

I sure am glad I didn't commit to 100 days. :D

This is the most unmotivated I've felt since starting this challenge, so today I decided to write about map, filter and reduce.

Going from for loops to these functions really improved my JavaScript code and my experience, and I was happy to see them in Elm too.

1. In depth documentation
2. Array.map / List.map
- 2.1. JavaScript
- 2.2. Elm
3. Array.map / List.indexedMap
- 3.1. JavaScript
- 3.2. Elm
4. Array.filter / List.filter
- 4.1. JavaScript
- 4.2. Elm
5. Array.reduce / List.foldl
- 5.1. JavaScript
- 5.2. Elm
6. Conclusion

1. In depth documentation

I'm only going to explain some simple use cases. Afterwards, make yourself some hot beverage, and read these:

JavaScript array methods:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#instance_methods

Elm list functions:
https://package.elm-lang.org/packages/elm/core/latest/List

2. Array.map / List.map

Applies a function to each element in a list.

2.1. JavaScript

[1, 2, 3].map(number => number + 1) // [2, 3, 4]

2.2. Elm

In Elm, the list usually comes last.

List.map (\number -> number + 1) [1, 2, 3] -- [2, 3, 4]

However, there's a nicer way to do this.

Using the pipeline |>, the result to its left gets passed as the last argument to the function that comes after it:

[1, 2, 3] |> List.map (\number -> number + 1) -- [2, 3, 4]

I think this syntax is intuitive, and very nice to look at.

3. Array.map / List.indexedMap

This is just how the standard JavaScript map function works.

Elm has two map functions: List.map with no index, and List.indexedMap.

3.1. JavaScript

const languages = ["JavaScript", "Elm", "Scratch"]

// Using parentheses to get implicit return on its own line
const withIndex = languages.map((language, index) => (
    `${index}: ${language}`
))

console.log(withIndex) 
// ["0: JavaScript", "1: Elm", "2: Scratch"]

3.2. Elm

languages = ["JavaScript", "Elm", "Scratch"]

withIndex = languages
    |> List.indexedMap (\index language -> 
        (index |> Debug.toString) ++ ": " ++ language
    )

As you can see, the order of index and element are the other way around in Elm.

Also, Elm doesn't have very nice string interpolation, and you have to explicitly convert other types to a string.

4. Array.filter / List.filter

Keeps the items that return true.

The name "filter" is kind of ambiguous to me, so think of it as keepIfTrue instead.

4.1. JavaScript

The => number <= part looks weird, so I added a second option that looks nicer to me.

[1, 2, 3, 4, 5].filter(number => number <= 3) // [1, 2, 3]

[1, 2, 3, 4, 5].filter(number => (
    number <= 3
))

4.2. Elm

[1, 2, 3, 4, 5] |> List.filter (\number -> number <= 3)

Note that Elm's filter function doesn't provide an index.

5. Array.reduce / List.foldl

Reduces an array into one single variable.

JavaScript has reduce and reduceRight, while Elm has foldl and foldr. Left and right just specify if we're looping from the beginning or the end of the list.

In the beginning, I just thought of reduce as the way you get a sum, but now I want to use it for everything.

It's not a replacement for more readable standard functions, although that can be very fun. Anyway:

5.1. JavaScript

We have a variable total, which will be updated from inside a loop that's going through an array.

Many people use the term accumulator, which sounds more fancy than total.

Here's an example without reduce:

let array = [1, 2, 3, 4, 5]
let total = 0 // Could also be a string, array, object, etc.

for (const item of array) {
    total = total + item
}

console.log(total) // 15

However, other parts of the code might use the accumulator, so it's safer to let reduce handle it:

const sumOf1to5 = [1, 2, 3, 4, 5].reduce((total, item) => {
    return total + item
}, 0)

console.log(sumOf1to5) // 15

total refers to 0, which is the initial value, and item is each separate value in the array.

Also, the really cool people don't use variable names that make sense:

const sumOf1to5 = [1, 2, 3, 4, 5].reduce((a, b) => a + b) // 15

5.2. Elm

Firstly, Elm has its own sum and product functions, so you don't need to implement these with List.foldl:

List.sum [1, 2, 3, 4, 5] -- 15

List.sum (List.range 1 100) -- 5050

List.product (List.range 1 5) -- 120

List.foldl works the same way if you want:

[1, 2, 3, 4, 5] |> List.foldl (\item total -> total + item) 0

Beyond that, you can do a bunch of crazy stuff, but I'm not in the mood for that now.

6. Conclusion

I hope this helped, or maybe even steered you away from for loops.

map, filter and reduce are a lot of fun, and they really improved my JavaScript code and experience when I learned them.

See you tomorrow!

#30daysofelm Day 28: Chess board + intro to Knight's Tour

Kristian Pedersen — Wed, 13 Jan 2021 19:55:22 +0000

This is day 28 of my 30 day Elm challenge

Today we're generating a chess board, and dipping our toes in the Knight's Tour problem.

Demo/code: https://ellie-app.com/c59zGwgPN3Ha1

Table of contents

1. Creating a basic chessboard, and calculating a few moves
2. Create a chess board
3. index -> (Int, Int) and index -> letter ++ number
4. Get valid destinations
5. Get the destinations' destionations
6. Things that need fixing

1. Creating a basic chessboard, and calculating a few moves

Eventually, I really want to improve my old React project for solving the Knight's Tour problem, and maybe even compare my home-made algorithm with existing ones.

It's fun to use and I like some of the ideas, but it doesn't look good: https://kristianpedersen.github.io/knights-tour-react/

Today I've just set up some basics:

Create a chess board
Set up two possible representation of the positions on the board:
1. A record with coordinates and various info
2. A human-readable form: "A1".."H8"
For a given position, get the valid destinations on the board.
Later, I will sort those destinations by their number of possible destinations, and move to the one with the fewest destinations. This is known as Warnsdorff's rule.

2. Create a chess board

squareWithCoordinates : Int -> Int -> BoardPosition
squareWithCoordinates boardSize index =
    { x = modBy boardSize index
    , y = index // boardSize
    , visited = False
    , destinations = 0
    }


createBoard : Int -> List BoardPosition
createBoard boardSize =
    List.range 0 ((boardSize ^ 2) - 1)
        |> List.map (squareWithCoordinates boardSize)


chessBoard : List BoardPosition
chessBoard =
    createBoard 8

This way of generating X and Y coordinates seems simpler than dealing with a two-dimensional list.

visited and destinations don't do anything yet. I think I might need them, although maybe it's easier to just build up a new chessboard, move by move?

createBoard relies on partial application. We're not directly passing in index, but the pipeline |> adds the List.range result as the last argument to List.map. These two functions do the same thing:

createBoard1 boardSize =
    List.range 0 ((boardSize ^ 2) - 1)
        |> List.map (squareWithCoordinates boardSize)

createBoard2 boardSize =
    List.range 0 ((boardSize ^ 2) - 1)
        |> List.map (\index -> squareWithCoordinates boardSize index)

Some might prefer the explicitness of createBoard2. Partial application is very useful and very cool, but I can see how it might demand some extra mental capacity when read by others or my future forgetful self.

3. index -> (Int, Int) and index -> letter ++ number

When showing the squares, they should say "A1" up to "H8".

squareView : Int -> Int -> NamedPosition
squareView boardSize index =
    let
        sliceStart =
            modBy boardSize index

        sliceEnd =
            sliceStart + 1
    in
    { x = String.slice sliceStart sliceEnd "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
    , y = (index // boardSize) + 1
    }

I know the board only goes up to 8, but later I want to be able to select other board sizes.

To get the X index of the alphabet string, we use modBy, which takes index / boardSize and returns the remainder.

The // just means integer division, which works just like Math.floor(index / boardSize) if you're coming from JavaScript.

4. Get valid destinations

This one is easier. From a given position, return the pieces that have an XY distance of (1, 2) or (2, 1).

Later on, this will also only include squares that have not been visited.

elm-format looks crazy sometimes when there are no parentheses! :D

Before:

getValidDestinations : List BoardPosition -> BoardPosition -> List BoardPosition
getValidDestinations board current =
    board
        |> List.filter
            (\other ->
                abs other.x
                    - current.x
                    == 2
                    && abs other.y
                    - current.y
                    == 1
                    || abs other.x
                    - current.x
                    == 1
                    && abs other.y
                    - current.y
                    == 2
            )

Still looks kind of messy:

getValidDestinations : List BoardPosition -> BoardPosition -> List BoardPosition
getValidDestinations board current =
    board
        |> List.filter
            (\other ->
                (abs (other.x - current.x) == 2 && abs (other.y - current.y) == 1)
                    || (abs (other.x - current.x) == 1 && abs (other.y - current.y) == 2)
            )

Finally:

getValidDestinations : List BoardPosition -> BoardPosition -> List BoardPosition
getValidDestinations board current =
    board
        |> List.filter
            (\other ->
                let
                    ( xDistance, yDistance ) =
                        ( abs <| other.x - current.x
                        , abs <| other.y - current.y
                        )
                in
                (xDistance == 2 && yDistance == 1) || (xDistance == 1 && yDistance == 2)
            )

I prefer this one by far. The in part explains what we're filtering (keeping).

5. Get the destinations' destionations

Now that we've gotten a list of valid destinations, let's get their valid destinations.

We're just going with a hardcoded starting position of (0, 0). The unused record attributes have been removed for readability.

makeMove : Position -> List Position
makeMove position =
    getValidDestinations chessBoard position


nextDestinations : Position -> List (List Position)
nextDestinations position =
    makeMove position |> List.map (getValidDestinations chessBoard)

Here's some REPL output from testing:

> makeMove {x=4,y=4} |> List.length
8 : Int

> nextDestinations {x=4,y=4} |> List.map List.length
[8,8,8,6,8,6,6,6]
    : List Int

6. Things that need fixing

If I log out nextDestinations {x=4,y=4}, I will get (4,4) as one of the valid destinations, which won't work.

Some places in the code, I'm passing the board (8x8 grid) as a parameter, and other places I'm referring to a function that just returns the initial version.

I'll need to think about this, but maybe my model could consist of two boards? One with the unvisited squares, and another one with the visited ones?

Then of course, there's the part where we've done a few moves, this particular sequence wasn't successful, and we need to rewind. In my JavaScript implementation, each square had an array of its valid moves, so I might need to implement that here too.

#30daysofelm Day 27: Using WebSockets+ports to control TouchDesigner

Kristian Pedersen — Tue, 12 Jan 2021 19:42:10 +0000

This is day 27 of my 30 day Elm challenge

Today we're sending data back and forth between JavaScript and TouchDesigner, using web sockets and ports! We'll compile Main.elm to main.js, and add a few additional lines of JavaScript in index.html.

TouchDesigner might be the coolest programming environment out there. It's like having a mix of After Effects, basic 3D software, Python, and have all changes being reflected instantly.

https://derivative.ca/download

Here's what today's project looks like:

The top row is a 1x1 grayscale noise texture (0-1). We then get its red channel r and convert it to a number. Any value changes trigger the code inside chopexec1.
The other important part here are the two webserver nodes. The bottom one has Python code in it.
constant1 receives our Elm app's slider value! lag1 applies smoothing to it, which is very useful for inputs like mouse movements, or sensor data from an Arduino.

The slider value is one step behind in TD, but it's good enough for me!

If you want to learn TouchDesigner, I highly recommend going through Bileam Tschepe's fantastic beginner videos on YouTube.

A lot of the TouchDesigner setup today is taken from this tutorial: https://thenodeinstitute.org/courses/webserver-dat-level-1/lessons/setting-up-the-webserverdat/topic/create-a-webserverdat/

I'm still a TouchDesigner beginner, so if you have any improvement suggestions, I would be very happy to hear those!

1. Main.elm
2. index.html / Compiling Main.elm with live reload
3. Very brief introduction to TouchDesigner / project screenshot
4. TouchDesigner server
5. Sending data from TouchDesign on value change

1. Main.elm

Today's Elm program is a simpler version of the Ports example in the guide.

There's some stuff in the code I wouldn't have remembered by heart, so I might have to revisit it later on. I find it fairly easy to read though, so I'm not worried:

port module Main exposing (..)

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)



-- MAIN


main : Program () Model Msg
main =
    Browser.element
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }



-- PORTS


port sendMessage : String -> Cmd msg


port messageReceiver : (String -> msg) -> Sub msg



-- MODEL


type alias Model =
    { sliderValue : String
    , noiseValueFromTD : String
    }


init : () -> ( Model, Cmd Msg )
init flags =
    ( { sliderValue = "50", noiseValueFromTD = "" }
    , Cmd.none
    )



-- UPDATE


type Msg
    = ReceivedNoise String
    | NewSliderValue String


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ReceivedNoise noiseValue ->
            ( { model | noiseValueFromTD = noiseValue }, Cmd.none )

        NewSliderValue v ->
            ( { model | sliderValue = v }, sendMessage model.sliderValue )


subscriptions : Model -> Sub Msg
subscriptions _ =
    messageReceiver ReceivedNoise



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ p [] [ text <| "From TouchDesigner: " ++ model.noiseValueFromTD ]
        , input [ type_ "range", onInput NewSliderValue, Html.Attributes.min "0", Html.Attributes.max "100" ] []
        , p [] [ text <| "Slider value is " ++ model.sliderValue ]
        ]

2. index.html / Compiling Main.elm with live reload

Basically, Main.elm will be compiled to main.js, which is referenced inside index.html.

Some of the HTML is copied from the Ports guide, and some of it is taken from the NODE Institute tutorial.

In the project root, I set up two terminals:

nodemon --exec elm make --output=main.js, which re-compiles the Elm file when I hit CMD+S.
live-server - reload browser on file change

If you don't have nodemon or live-server, get Node.js and run npm install -g nodemon live-server.

At first I tried running elm-live src/Main.elm, which is usually great for other Elm projects, but it overwrote my index.html file.

One important thing I've changed here is the WebSocket URL, which in our case is now ws://localhost:9980:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>Elm + Websockets</title>
    <script type="text/javascript" src="main.js"></script>
</head>

<body>
    <div id="myapp"></div>
</body>

<script type="text/javascript">
    const app = Elm.Main.init({
        node: document.getElementById('myapp')
    });

    const socket = new WebSocket('ws://localhost:9980');

    app.ports.sendMessage.subscribe(function sendToTD (message) {
        socket.send(message);
    });

    socket.addEventListener("message", function receiveFromTD (event) {
        app.ports.messageReceiver.send(event.data);
    });
</script>

</html>

The app constant is just standard boilerplate. app.ports.sendMessage.subscribe is quite a mouthful, which is why I named the function sendToTD.

Currently, we're just sending one value. I guess if we wanted to be specific, we would have to set up Elm to send something like this: { op = "constant1", value = sliderValue }.

Now we have everything we need in the browser - let's head over to TouchDesigner!

3. Brief explanation of TouchDesigner data types (CHOP/DAT/TOP)

TouchDesigner is a node-based programming tool for Windows and MacOS, which feels like a realtime version of After Effects + Python, with some 3D capabilities.

Only boxes of the same data type can be connected, although they can be converted.

There are a couple of other data types in TD, but these are the ones I'll mention today:

CHOP (Channel Operators): Numbers
DAT (Data operators): Strings/tables/code/text
TOP (Texture operators): Image data (computed on the GPU)

These all have separate menus, which are accessed by double-clicking anywhere, and hitting Tab to cycle between the different menus.

4. TouchDesigner server

Add a Web Server DAT, and set its active status to on. Hit p if its parameters are hidden.

This will set up a web socket server on localhost:9980.

Expand Web Server by pressing the pink arrow on its bottom right, and edit the code by hitting CTRL+E. A lot of this code is not needed, so I replaced it with a simplified version of the Node Academy tutorial code:

# This code goes in webserver1_callbacks

def onHTTPRequest(webServerDAT, request, response):
    target_operator = op(request['uri'])

    if target_operator.isDAT:
        response['data'] = target_operator.text
    if 'data' in response:
        response['statusCode'] = 200  # OK
        response['statusReason'] = 'OK'

    return response

# Slider value from Elm comes in here (gets converted from String to Int automatically - yikes! :D)
def onWebSocketReceiveText(webServerDAT, client, data):
    op('constant1').par.value0 = data
    return

def onWebSocketOpen(webServerDAT, client, uri):
    op('table1').appendRow(client) # Adds connected address to our list
    return


def onWebSocketClose(webServerDAT, client):
    op('table1').deleteRow(client)
    return

For this code to work, we need a Constant CHOP with name "constant1", and a Table DAT with name "table1". Both of these names are automatic when you create a node.

We can now receive web socket messages from the browser, but how about sending messages?

5. Sending data from TouchDesign on value change

To send continuous data, we can use a CHOP Execute DAT.

Make sure Value Change is set to On, enter the name of the CHOP you want to toggle data sending (topto1 in my case), and add this code:

def onValueChange(channel, sampleIndex, val, prev):
    data = op("topto1")[0]
    client = op('table1')[1, 0].val
    op('webserver1').webSocketSendText(client, data)
    return

That's pretty much it, as far as I can see. You can actually also get images from TouchDesigner into the browser, but given the data amount, I guess still images are the best choice for this.

Very cool! :D

#30daysofelm Day 26: Debug.log, Debug.toString and the REPL

Kristian Pedersen — Mon, 11 Jan 2021 17:08:57 +0000

This is day 26 of my 30 day Elm challenge

Today I learned how to test my functions in the REPL, instead of logging them with Debug.log or displaying them in the view function with text (myVariable |> Debug.toString).

1. Debug.log: Like console.log(), but only in the browser
2. text (variableOfAnyType |> Debug.toString)
3. My Main.elm code
4. Starting and using the REPL
5. Screenshot
6. Conclusion

My project is just a new directory where I've entered elm init and created a src/Main.elm file.

The REPL can be launched from the project root if there's an elm.json file, by entering elm repl. Note how it says Say :help for help and :exit to exit! More at https://elm-lang.org/0.19.1/repl.

CTRL+C didn't work on my Mac, but :exit did.

1. Debug.log: Like console.log(), but only in the browser

This one had me confused at first. In JavaScript, you can just put console.log() wherever you want.

In Elm, Debug.log has to be within a let block (edit: not accurate - see comments). Most code I've seen just refer to it with an underscore _ since its value isn't important (does it even have a value?):

rangeEcho =
    List.range 1 5
        |> List.map
            (\n ->
                let
                    _ = Debug.log "The number is: " n
                in
                n
            )

The lonely n is there because we have to return something.

Interestingly, the numbers come out backwards! I'd love to know why this is.

Keep in mind, this only displays in the browser dev tools, not in the terminal.

2. text (variableOfAnyType |> Debug.toString)

The above function can also be displayed in the DOM, like this:

view = 
    text (rangeEcho |> Debug.toString)
-- [1,2,3,4,5]

It's a bit nicer than Debug.log, but I've found the REPL to be the far most engaging and flexible experience.

3. My Main.elm code

If you're using VS Code with the Elm Tooling extension, it will probably add a line like this to the top:

module Main exposing (..)

With this in place, you can test anything you want from your file, try passing it different parameters, or try combining functions.

Here's the file I was working on: https://ellie-app.com/c4cRdN4y4Pta1

4. Starting and using the REPL

Open a terminal and enter elm repl in your project root. There has to be an elm.json file there.
Enter import Main exposing (..) (or whatever your filename is)
Now you can just type function names from your project.
You can even modify or create new functions in Main.elm, and the REPL will automatically have access to them without needing to restart!

I gotta say, this is a much nicer way of working than what I've done up until now.

To learn more, here's the REPL documentation: https://github.com/elm/compiler/blob/master/hints/repl.md

5. Screenshot

First, you can see that test results in an error, but works after I've entered import Main exposing (..).

That last line with grid |> List.filter (\xy -> ...)) was particularly nice. Testing stuff interactively like this feels better than regular logging, although they all have their place, I suppose.

6. Conclusion

This was a fun thing to learn! I just wish I could get tab completion for Main.elm functions, not just for the ones that are created during the REPL runtime.

Happy logging, and see you tomorrow!

#30daysofelm Day 25: Displaying a List (List String)

Kristian Pedersen — Sun, 10 Jan 2021 20:44:26 +0000

This is day 25 of my 30 day Elm challenge

Today we'll create a very basic chess board view from a 8x8 List.

This is the final result:

A8B8C8D8E8F8G8H8
A7B7C7D7E7F7G7H7
A6B6C6D6E6F6G6H6
A5B5C5D5E5F5G5H5
A4B4C4D4E4F4G4H4
A3B3C3D3E3F3G3H3
A2B2C2D2E2F2G2H2
A1B1C1D1E1F1G1H1

Demo/code: https://ellie-app.com/c3QTnvkpn7ha1

1. Creating a single row
2. Creating a grid (list of rows)
3. Creating a grid with chess position names (A1, A2, .. H8)
4. Refactoring: Named functions look nicer than long anonymous ones
5. Creating the view

1. Creating a single row

This is easy in Elm:

List.range 1 8 -- [1, 2, 3, 4, 5, 6, 7, 8]

If you want the list to contain something else, you can use List.map:

List.range 1 8 
    |> List.map (\item -> "lol") -- ["lol", "lol", "lol", "lol", "lol", "lol", "lol", "lol", ]

2. Creating a grid (list of rows)

Instead of having a list of numbers, we can imagine each number being replaced with a List:

verySimpleGrid : List (List Int)
verySimpleGrid =
    List.range 1 8 -- [1, 2, 3, 4, 5, 6, 7, 8]
        |> List.map (\number -> List.range 1 8)
        -- Each individual number in the previous list is replaced with [1, 2, 3, 4, 5, 6, 7, 8]
        -- [[1, 2, 3, 4, 5, 6, 7, 8], [1, 2, 3, 4, 5, 6, 7, 8], etc]

3. Creating a grid with chess position names (A1, A2, .. H8)

This was my initial approach:

letters : String
letters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZ"


grid : List (List String)
grid =
    List.range 1 8
        |> List.map (\row -> List.range 1 8)
        |> List.indexedMap
            (\y row ->
                List.map
                    (\x ->
                        String.slice (x - 1) (x + 0) letters ++ String.fromInt (y + 1)
                    )
                    row
            )
        |> List.reverse

letters is one of my favorite hardcoded things I've done. Very nice!

The first two lines of the grid function are the same as before.

List.indexedMap works the same way as JavaScript's regular Array.map, except it's index first, and then element.

First, we're getting the Y index and its row (List String).
Then, using List.map on row, we get each X value.
The X coordinates should go from A to H. This is done with String.slice, which cuts from index1 up to (not including) index2.
The Y coordinates work as usual, except chess board have 1-based indexing.
The rows are reversed, so that A1 isn't at the top of the board.

4. Refactoring: Named functions look nicer than long anonymous ones

Looking at the code above, all that indentation is awkward to read, and none of the functions passed to List.map or List.indexedMap are reusable.

I get shivers from anonymous functions that span more than one line. I'm feeling lazy today, but I'm doing this just so I can sleep well at night.

letters : String
letters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZ"


singleCell : Int -> Int -> String
singleCell x y =
    String.slice (x - 1) (x + 0) letters ++ String.fromInt (y + 1)


chessRow : Int -> List Int -> List String
chessRow y row =
    row |> List.map (\x -> singleCell x y)


grid : List (List String)
grid =
    List.range 1 8
        |> List.map (\row -> List.range 1 8)
        |> List.indexedMap chessRow
        |> List.reverse

I think that is so much nicer to read, I'm actually a bit impressed at how much of a difference that makes.

5. Creating the view

All that's left is getting the grid displayed in the browser. I guess I could have done nested List.maps, but again, I think separate functions look nicer.

First, we need to put each row into one div.

Then those divs all get put into one main div.

rowDiv : List String -> Html a
rowDiv row =
    div [] (row |> List.map (\boardPosition -> text boardPosition))


main : Html a
main =
    div [] (grid |> List.map rowDiv)

Looking good. See you tomorrow!

#30daysofelm Day 24: msg vs. Msg

Kristian Pedersen — Sat, 09 Jan 2021 21:53:55 +0000

This is day 24 of my 30 day Elm challenge

My original intention was to work further on yesterday's UI, but I kept getting weird errors about Msg and msg and weird type annotations.

Today's project is just me finally trying to get my head around Msg and msg.

1. msg vs Msg
- 1.1. Msg vs Msg Float, Msg String, etc.
- 1.2. Float -> Msg
- 1.3. msg is just a placeholder
2. Summary

1. `msg` vs `Msg` (you can choose your own names, too)

I've seen msg and Msg all over the place, and I've always thought this ambiguous convention was really confusing and annoying as a beginner.

You can of course name these whatever you want. I took elm-lang.org's clock example and mofified it, by changing Msg to MsgForYouMyDude and Svg msg to Svg abc. In the update function, I changed msg model to massage supermodel: https://ellie-app.com/c3r3mdDh3YRa1

However, I see these exact names everywhere, so I think it's probably a good idea to just learn them, so what's going on?

Rupert's example made me get a feel for it: https://discourse.elm-lang.org/t/html-msg-vs-html-msg/2758/2

view : Html msg
view = div [] []

vs.

type Msg = Click

view : Html Msg
view = div [ onClick Click ] []

The first one (msg) has no event. It could if it wanted to, but it's too busy vaping, watching documentaries about ancient civilizations and UFOs, and listening to 432 Hz music.

The last one (Msg) deals with an important message that I've defined, which will get sent to the update function.

1.1. `Msg` vs `Msg Float`, `Msg String`, etc.

The simplest one to understand for me is Msg. The one with the capital letter is the one you make yourself. This describes different messages that can be picked up by your update function.

type Msg
    = NewBoardSize Float
    | NewAnimationSpeed Float

Now how do we get the Float value?

My current understanding is that this is how you deal with continuous events in Elm:

Continuous events, like input: Get MyMessage (uppercase) and a value of a certain type. Input events return a string (event.target.value in JavaScript terms).
Momentary events, like click: Something happened. No value required.

You can however have extra values along with your click events as well, Joel told me.

1.2. `Float -> Msg`

I hadn't seen this before that I could remember, but I was getting an error about how my slider was receiving an Msg instead of a Float -> Msg.

Normally, I think this would have been caught by Elm's type inference, but my slider attribute type annotation was causing problems.

joelq was kind enough to help me out on Slack:

Before: https://ellie-app.com/c3mJCmb9Mqta1
After: https://ellie-app.com/c3nw4rHyftKa1

To be fair, I could have found it right there in the elm-ui slider documentation. :)

The only two changes were as follows:

SliderAttribute's message field was changed from message : Msg to message: Float -> Msg
The createSlider function was changed from createSlider : Model -> SliderAttributes -> Element msg to createSlider : Model -> SliderAttributes -> Element Msg

The compiler highlights the last error pretty well, but even after reading up on this subject and getting help, my brain just sees Msg and msg and thinks they're the same thing.

1.3. `msg` is just a placeholder

My conclusion is that msg can basically just be anything. So why isn't the convention just a, value, yourTypeHere or something similar? I don't know.

Again, here's from Joel in the thread I linked to above:

While the lowercase msg variable name has good intentions of communicating “the type that would go here fills the role of a message (definition 1)”, my experience is that many people read it as “the type that would go here is going to be a Msg (definition 2)”.

Personally, I’ve started using Html a in my own code rather than Html msg to avoid this confusion

https://discourse.elm-lang.org/t/html-msg-vs-html-msg/2758/4

2. Summary

I realize Msg and msg have pretty much become standards in Elm, and you will see them in most Elm code, so I don't know if it's a good idea to change at this stage.

As a beginner, it would have been helpful to have a separate Msg vs. msg section in the guide.

By the way, you also have things like this:

update : Msg -> Model -> Model
update msg model = ...

Here, msg is a reference to Msg, but it's just a local variable name, so it could have been a reference to any type. It's not a msg like Html msg, but I guess it would refer to the Msg in Html Msg?

See you tomorrow! :D

#30daysofelm Day 23: Simple layout with elm-ui

Kristian Pedersen — Fri, 08 Jan 2021 20:29:07 +0000

This is day 23 of my 30 day Elm challenge

Try + view source: https://ellie-app.com/c2WWjMTM4ZLa1

About today's project

I made a React project a few months back that I eventually want to remake in Elm: https://kristianpedersen.github.io/knights-tour-react/

Basically, you click a chess board position, and the program finds a valid sequence of moves where the knight visits every position on the board.

I'm happy with the concept and interactions, but the visuals need a lot of work.

Especially the board being positioned all the way to the left looks weird, and somehow in my caffeine-crazed coding bonanza, I managed to get the SVG lines to resize, but a "fix" stopped the board from resizing. :D

Also, the colors and borders make it look like it was made 15 years ago.

Elm-ui is much nicer to read

I touched upon this in my previous quick elm-ui encounter, but CSS can be difficult.

In my case, struggling with CSS is mostly my own fault for not bothering to learn it properly.

Still though, here's a centered div:

<html>
    <head>
    <style>
        .center-screen {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            min-height: 100vh;
        }

    </style>
    </head>

    <body>
        <div class="center-screen">
            I'm in the center
        </div>
    </body>
 </html>

From https://stackoverflow.com/questions/31217268/center-div-on-the-middle-of-screen

Here's my elm-ui program from day 7:

import Element exposing (..)


centeredDiv =
    column
        [ width (px 200)
        , height (px 200)
        , centerX
        , centerY
        ]
        [ el [ centerX, centerY ] (text "I am centered")
        ]


main =
    layout [] centeredDiv

There's just a lot less noise in the second example. Now, if this is true in such a small example, imagine how this adds up.

Today's code

I'm still an elm-ui beginner. I had some problems initially that happened because I provided the wrong type annotations.

Once I removed them, the errors went away too, so today is an automatic type inference day.

Generic slider function

The code for making a slider in elm-ui is kind of long, to be honest.

My project needed two sliders, but I didn't want two huge slider functions, so I made one generalized slider function:

slider attributes =
    Input.slider
        [ height (px 30)
        , behindContent
            (el
                [ width fill
                , height (px 2)
                , centerY
                , Background.color (rgb255 255 255 255)
                , Border.rounded 2
                ]
                none
            )
        ]
        { onChange = attributes.message
        , label =
            Input.labelAbove []
                (text attributes.text)
        , min = attributes.min
        , max = attributes.max
        , step = Just 1
        , value = attributes.value
        , thumb =
            Input.defaultThumb
        }

attributes is a record that contains the info I would want in a smaller slider function.

The sliders for the board size and animation speed now look nicer, instead of repeating the whole mess above twice:

sliderBoardSize model =
    el [ alignLeft ]
        (slider
            { min = 5
            , max = 26
            , value = model.boardSize
            , text = "Board size"
            , message = UpdateBoardSize
            }
        )


sliderAnimationRate model =
    el [ alignRight ]
        (slider
            { min = 5
            , max = 1000
            , value = model.animationSpeed
            , text = "Animation speed"
            , message = UpdateAnimationSpeed
            }
        )

Panel for the controls

The two sliders then get included in a "nav bar", which looks like this:

controls model =
    row [ width fill, centerX, spacing 30, padding 30, Background.color (rgb255 200 200 100) ]
        [ sliderBoardSize model
        , sliderAnimationRate model
        ]

What's there to say? It's a full-width row with two sliders in it. elm-ui code is just so nice to look at! <3

Info text

Then underneath the controls, I wanted some info text to be displayed:

infoText model =
    row
        [ width fill
        , centerX
        , spacing 30
        , padding 30
        , Background.color (rgb255 50 50 50)
        , Font.color (rgb255 200 200 200)
        ]
        [ el [ centerX ]
            (text
                ("The board size is "
                    ++ (model.boardSize |> Debug.toString)
                    ++ ", and the animation interval is "
                    ++ (model.animationSpeed |> Debug.toString)
                    ++ " ms"
                )
            )
        ]

"Board"

Honestly, I just want to watch some Netflix right now, so I didn't bother doing the board properly with the letters and numbers. I'll do that tomorrow.

For now, it expands and contracts along with the board size slider, which I think is pretty cool. :)

showRow model =
    row [ width fill, height fill ] <|
        (List.range 1 (floor model.boardSize)
            |> List.map (\_ -> el [ width fill, centerY ] (text "Hi there"))
        )


showBoard model =
    column [ width fill, height fill, Font.center ]
        (List.range 1 (floor model.boardSize)
            |> List.map (\_ -> showRow model)
        )

First, we create a row of 8 cells: ********
Then, we create a column with 8 of those:

********
********
********
********
********
********
********
********

The main fullscreen container, and the view function

view model =
    Element.layout []
        (fullscreenContainer model)


fullscreenContainer model =
    column [ width fill, height fill, spacing 0, padding 0 ] <|
        List.map
            (\elmUiSection -> elmUiSection model)
            -- I want to add the "buttons" function to this list, but Elm won't let me because of a type mismatch
            [ controls, infoText, showBoard ]

Element.layout is the topmost level in this elm-ui application. In my case, it just takes a column that contains everything.

I'm using map, because each of the elmUiSections, ([controls, infoText, showBoard]) take the model as their argument.

I could have also written this:

column [ width fill, height fill, spacing 0, padding 0 ] <|
    [ controls model, infoText model, showBoard model ]

But that kind of needless repetition just puts me asleep.

The "buttons" function didn't work in this list. Lists can only consist of items of the same type, and the button is a different type because of its onPress message.

Main, model, update, the usual stuff

module Main exposing (..)

import Browser
import Element exposing (Element, alignLeft, alignRight, behindContent, centerX, centerY, column, el, fill, height, none, padding, px, rgb255, row, spacing, text, width)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Element.Input as Input


main : Program () Model Msg
main =
    Browser.sandbox
        { init = init
        , view = view
        , update = update
        }


type alias Model =
    { boardSize : Float
    , animationSpeed : Float
    }


init : Model
init =
    { boardSize = 8, animationSpeed = 50 }


type Msg
    = UpdateBoardSize Float
    | UpdateAnimationSpeed Float
    | BoardSizeFromButton Int


update : Msg -> Model -> Model
update msg model =
    case msg of
        UpdateBoardSize v ->
            { model | boardSize = v }

        UpdateAnimationSpeed v ->
            { model | animationSpeed = v }

        BoardSizeFromButton v ->
            { model | boardSize = toFloat v }

This is a very standard Elm setup. I'd definitely change the Msg names, as they're not really clear. SliderBoardSize, SliderAnimationSpeed and ButtonBoardSize would be better names for me.

Also, almost at the top, rather than exposing so many individual things from Element, I think I would just expose all.

Conclusion

This was my 2nd time using elm-ui. Type annotations gave me some trouble to begin with, but other than that, I must say that it feels really intuitive.

I'm just going to be honest and say that it would have taken me a lot more effort to make today's project in CSS.

My CSS skills aren't good, so I use elm-ui, and my React code gives me runtime errors, so I use elm.

I'll definitely look more into elm-ui for future projects - it's really nice.

#30daysofelm Day 22: Simple codewars.com challenges

Kristian Pedersen — Thu, 07 Jan 2021 11:28:32 +0000

This is day 22 of my 30 day Elm challenge

Code+demo: https://ellie-app.com/c2kXwQbnFbja1

1. About today's project
2. Can number A be divided to get number B?
3. Get the sum of all numbers from 1 to n
4. Get a list of 1 to n (also with partial application example)
5. Time since midnight in milliseconds
6. Formatting large numbers
7. Remove all spaces from a string
8. Conclusion

1. About today's project

I like doing small CodeWars challenges sometimes, just to practice some basics.

They're often quite simple, but sometimes the simplicity can be deceiving, and occasionally I find myself not having read the requirements well enough.

My "next binary number with same number of 1's" was a CodeWars challenge. I also wrote about 4 CodeWars challenges on day 14.

While it's very good to push yourself like I've done lately, it can also be good to get some easy wins, while also picking up a new thing or two.

I hope today's writedown can be a nice resource for other beginners. Some Elm beginners immediately want to decode JSON and get into complex types, while others just want to know how to make an array of numbers from 1 to 100 (that's me).

Note: I usually skip a few CodeWars challenges, usually because they're poorly written, or they don't interest me.

2. Can number A be divided to get number B?

All we have to do is check if there's a remainder or not.

The remainder of 10 / 2 is 0, while the remainder of 9 / 2 is 1.

checkIfFactor : Int -> Int -> Bool
checkIfFactor factor base =
    remainderBy base factor == 0

checkIfFactor 10 2 -- True
checkIfFactor 9 2 -- False

A slightly shorter solution would be this:

checkForFactor : Int -> Int -> Bool
checkForFactor a b = 
      modBy b a == 0

The difference between modBy and remainderBy has to do with negative numbers: https://package.elm-lang.org/packages/elm/core/latest/Basics#modBy

3. Get the sum of all numbers from 1 to n

I'm sure I can solve this one easily, but it's still good to practice the very basics, and there might be solutions I haven't thought of.

Here's what I came up with, which is very easy to read:

summation : Int -> Int
summation n =
    List.range 1 n |> List.sum

I saw some other interesting ones. I know which approach I prefer.

summation : Int -> Int
summation n =
  if modBy 2 n == 0 then
    n // 2 * (n + 1)
  else
    (n - 1) // 2 * (n + 1) + (n  + 1) // 2

summation : Int -> Int
summation n = round (toFloat n / toFloat 2 * toFloat (n + 1))

4. Get a list of 1 to n (also with partial application example)

The next one seemed even simpler one than the previous, but I decided to try it anyway. I was confident my solution would be the shortest and simplest.

Count the monkeys!
You take your son to the forest to see the monkeys. You know that there are a certain number there (n), but your son is too young to just appreciate the full number, he has to start counting them from 1.

As a good parent, you will sit and count with him. Given the number (n), populate an array with all numbers up to and including that number, but excluding zero.

For example:
monkeyCount(10) // --> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
monkeyCount(1) // --> [1]

And here's my solution. Easy!

monkeyCount : Int -> List Int
monkeyCount x = List.range 1 x

But then to my surprise and delight, I found an even shorter solution! You can use partial application:

monkeyCount2 : Int -> List Int
monkeyCount2 = List.range 1

To understand what's going on, let's look at the type annotation for List.range:

range : Int -> Int -> List Int

So when we store List.range 1, we've supplied 1 argument, and another one remains. What we get is a function that looks like this:

monkeyCount2 : Int -> List Int

I still think my solution is easier to read, but it's a good example of partial application.

Then you have examples that go the other way. No comment:

monkeyCount : Int -> List Int
monkeyCount = monkeyCountHelper []

monkeyCountHelper : (List Int) -> Int -> List Int
monkeyCountHelper c x = 
  case x of
    0 ->
      c
    _ ->
      monkeyCountHelper (x :: c) (x-1)

5. Time since midnight in milliseconds

I eventually want to deal with time in my astronomy project. I've already written the most important functions, but it's good to just get this stuff into my head.

Given a number of hours, minutes and seconds, return the number of milliseconds that have passed since midnight.

Seconds to milliseconds = seconds * 1000
Minutes to milliseconds = minutes * 1000 * 60
Hours to milliseconds = hours * 1000 * 60 * 60

Going by this, I decided to submit this solution:

past : Int -> Int -> Int -> Int
past h m s = 
    (s * 1000) 
  + (m * 1000 * 60) 
  + (h * 1000 * 60 * 60)

I could have written 60000 and 3600000, but again, I think that affects readability.

By far the most interesting solution was this one:

expand : Int -> Int
expand =
  (*) 60

past : Int -> Int -> Int -> Int
past h m s =
  h
    |> expand
    |> (+) m
    |> expand
    |> (+) s
    |> (*) 1000

6. Formatting large numbers

The resulting number of milliseconds since midnight is a big number. These are hard to read, so it's nice to add some formatting, like this:

const n = 1234567890
const formatted = n.toLocaleString("NO") // "1 234 567 890"

I found cuducos/elm-format-number and included it in my project.

First I did elm install cuducos/elm-format-number, and then these were the imports I used:

import FormatNumber exposing (format)
import FormatNumber.Locales exposing (Decimals(..), usLocale)

At first, I was disappointed that it adds .00 to the end by default, but that's easy to fix:

-- 49,062,000.00
toFloat (millisecondsSinceMidnight 13 37 42)
    |> format usLocale


-- 49,062,000
toFloat (millisecondsSinceMidnight 13 37 42)
    |> format usLocale

7. Remove all spaces from a string

In advance, I think this should just be split " " |> join "" or something like that.

Here's what these two functions do:

split " " will add a new list item for every space it comes across.

"cat dog human" becomes ["cat", "dog", "human"]. The spaces aren't included - they're used as delimiters.

String.split "***" "a***b***c" becomes ["a", "b", "c"].

String.join turns an array of strings into one string, and adds a character (or none) between each item. String.join "-" ["o", "m", "g"] becomes "o-m-g".

Instead of the dash, you can also pass an empty string, like I did:

noSpace : String -> String
noSpace s =
    s |> String.split " " |> String.join ""

After submitting my solution, I saw a more elegant approach:

noSpace2 : String -> String
noSpace2 s =
    s |> String.replace " " ""

JavaScript has this functionality as well, but I keep forgetting about it. :)

"a b c".replaceAll(" ", "-") // a-b-c

8. Conclusion

I really enjoyed practicing some basics, and I was excited to discover a couple of solutions I wouldn't have thought of.

See you tomorrow!

#30daysofelm Day 21: Planet list -> SVG drawings

Kristian Pedersen — Wed, 06 Jan 2021 21:38:56 +0000

Demo: https://ellie-app.com/c25wRvWCppXa1

This is day 21 of my 30 day Elm challenge

Today I had some fun with elm/svg, using hardcoded data to draw some fake orbits and planets.

The reason I got into JavaScript in the first place was Daniel Shiffman's visualizations of mathematics, fractals, physics and animations. You're guaranteed to find something cool in his Coding Challenge playlist.

In other words, I had a great time drawing circles and lines with code again. :)

1. About the project
2. Imports, Model and Msg
3. The data
4. Displaying individual planets and orbits
5. Displaying multiple planets and orbits
6. View
7. Main function with what's needed to get the browser width and height
8. Conclusion

1. About the project

I want to draw something, based on a data source.

Orbits: Transparent circles with black strokes. radius = index * someNumber

Planets: Filled circles. Index lets us calculate X and Y coordinates, by doing something like this:

x = middleOfScreen + (sin angle * (index * radius))
y = middleOfScreen + (cos angle * (index * radius))

2. Imports, Model and Msg

module Main exposing (main)

import Browser
import Browser.Dom exposing (Viewport)
import Html exposing (Html)
import Html.Attributes exposing (attribute)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Task


type alias Model =
    { width : Float, height : Float }


initialModel : Model
initialModel =
    { width = 0, height = 0 }


type Msg
    = NoOp
    | ReceivedViewport Viewport

Viewport and Task are used to get the browser's dimensions. Looking at my code from day 8, I'm wondering if just getting those from JavaScript using innerWidth and innerHeight would be a cleaner solution. Maybe it has some drawbacks.

Yesterday, I used Task to get the browser size, but I also implemented a resize solution. Today, I decided not to bother with that, just to keep it simple.

NoOp is just "don't do any commands", while ReceivedViewport will be used to update the model.

3. The data

type alias Planet =
    { name : String
    , size : Int
    , color : String
    }


type alias WindowDimensions =
    { width : Float
    , height : Float
    , centerX : Float
    , centerY : Float
    }


hardcodedPlanets : List Planet
hardcodedPlanets =
    [ { name = "Mercury", size = 8, color = "gray" }
    , { name = "Venus", size = 24, color = "yellow" }
    , { name = "Earth", size = 32, color = "blue" }
    , { name = "Mars", size = 16, color = "red" }
    , { name = "Saturn", size = 56, color = "orange" }
    , { name = "Jupiter", size = 64, color = "gold" }
    , { name = "Uranus", size = 48, color = "lightblue" }
    , { name = "Neptune", size = 40, color = "blue" }
    , { name = "Pluto", size = 8, color = "beige" }
    ]

I'm appreciating type aliases and the resulting type annotations more and more.

Seeing actual words instead of just Float and List String is really nice, and we'll see some examples of this later in the code.

4. Displaying individual planets and orbits

viewOrbit : WindowDimensions -> Float -> Html msg
viewOrbit window index =
    circle
        [ cx (window.centerX |> String.fromFloat)
        , cy (window.centerY |> String.fromFloat)
        , r ((index + 1) * 50 |> String.fromFloat)
        , fill "none"
        , stroke "black"
        ]
        []


viewPlanet : WindowDimensions -> Float -> Planet -> Html msg
viewPlanet window index planet =
    circle
        [ cx ((window.centerX + sin index * ((index + 1) * 50)) |> String.fromFloat)
        , cy ((window.centerY + cos index * ((index + 1) * 50)) |> String.fromFloat)
        , r (planet.size |> String.fromInt)
        , fill planet.color
        , stroke "black"
        ]
        []

Looking at this code, the index should have been part of the Planet instead. Oh well.

Because we're dealing with SVGs, the numbers need to be converted to strings. It's mildly annoying, but I can live with it.

As we can see, the orbits' radiuses will increase by the same number of pixels. It's not accurate, but visualizing the real orbits would have been silly.

The planet positions are calculated this way: centerOfScreen + (angle * radius).

Using the index for angles is a bit silly, but I like doing silly things sometimes. Later on, my goal is to get accurate angles from my Python backend.

5. Displaying multiple planets and orbits

viewOrbits : WindowDimensions -> List (Svg msg)
viewOrbits window =
    hardcodedPlanets
        |> List.indexedMap (\index planet -> viewOrbit window (toFloat index))


viewPlanets : WindowDimensions -> List (Svg msg)
viewPlanets window =
    hardcodedPlanets
        |> List.indexedMap (\index planet -> viewPlanet window (toFloat index) planet)

These are almost identical, but I figured there might be scenarios where you might wish to toggle just one of them.

The window is just being passed to the individual viewOrbit and viewPlanet functions.

List.indexedMap gives us access to both the index and element, just like JavaScript does natively: array.map((e, i) => ...).

6. View

view : Model -> Html msg
view model =
    let
        window =
            { width = model.width
            , height = model.height
            , centerX = model.width / 2
            , centerY = model.height / 2
            }
    in
    svg
        [ width (window.width |> String.fromFloat)
        , height (window.height |> String.fromFloat)
        , viewBox
            ("0 0 "
                ++ (window.width |> String.fromFloat)
                ++ " "
                ++ (window.height |> String.fromFloat)
            )
        ]
    <|
        viewOrbits window
            ++ viewPlanets window

The let statement isn't strictly necessary, but I just think window.width sounds a lot better than model.width.

There's a lot of String.fromFloat going on here. On one hand, I want to write a very short function to make things less verbose, but then everyone else would have to learn about my spcial snowflake function.

The ++ works for converting multiple lists into one, which is pretty cool. I almost created two separate SVG elements here!

7. Main function with what's needed to get the browser width and height

main : Program () Model Msg
main =
    let
        handleResult v =
            case v of
                Err err ->
                    NoOp

                Ok vp ->
                    ReceivedViewport vp
    in
    Browser.element
        { init = \_ -> ( initialModel, Task.attempt handleResult Browser.Dom.getViewport )
        , view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        }

If your read the let statement first, this may look confusing. Things look better if we start with Browser.element.

Init equals an anonymous function which returns a tuple, consisting of:

The inital model
A function called Task.attempt, which sends a message handleResult, depending on the outcome of Browser.Dom.getViewport

If you then read the let statement, things make a bit more sense. NoOp or ReceivedViewport get sent to the update function, I believe.

8. Conclusion

Drawing stuff with code is still fun.

It was good to have a more relaxing kind of project today. The last days have been challenging.

I went for two walks today, which was a very good idea.

#30daysofelm Day 20: Getting the browser's width and height

Kristian Pedersen — Tue, 05 Jan 2021 21:31:23 +0000

This is day 20 of my 30 day Elm challenge

Today I wanted to do something visual, but I wanted the SVG to fill up the available space.

Instead, this turned out to be a day where we learn about getting information about the browser's width and height.

In JavaScript, I can just ask for innerWidth and innerHeight. In Elm, it's more difficult.

This post is written with confusion and poor sleep. :)

Code/demo: https://ellie-app.com/bZDy65SqXXFa1

1. Getting the browser's width and height
2. Responding to window resize events
3. The code
- 3.1. Model and Msg
- 3.2. Main and subscription
- 3.3. Update
- 3.4. View
4. Conclusion

1. Getting the browser's width and height

My experience with Elm documentation has been a bit frustrating. The descriptions are often good, and the type annotations help, but there have been a few occasions where just one or two code examples would have helped a lot.

For example, Browser.Dom.getViewport sounds good, but how do I use it? Its type annotation says Task x Viewport. I've seen Task mentioned before, and Viewport is explained very well, but what on earth is an x?

Of course, I should have read the documentation more thoroughly, but just having a practical example would have been nice for developers at any level.

The type alias is easy to understand:

type alias Viewport =
    { scene :
          { width : Float
          , height : Float
          }
    , viewport :
          { x : Float
          , y : Float
          , width : Float
          , height : Float
          }
    }

However, when trying to return Browser.Dom.getViewport.scene in a function, I get this error:

This is not a record, so it has no fields to access!
23| Browser.Dom.getViewport.scene
^^^^^^^^^^^^^^^^^^^^^^^
This getViewport value is a:
Task.Task x Browser.Dom.Viewport
But I need a record with a scene field!

Well excuse me for reading the type alias and thinking curly braces equal a record. ;)

So I read up on the Task documentation, and revisit the time example, and try Task.perform GetBrowserDimensions Browser.Dom.getViewport, with the following code:

type Msg
    = GetBrowserDimensions


dimensions =
    Task.perform GetBrowserDimensions Browser.Dom.getViewport

This resulted in a type of error message I've seen before, but I still struggle a bit with. Msg and msg - not a good choice of convention. :/

28| Task.perform GetBrowserDimensions Browser.Dom.getViewport
^^^^^^^^^^^^^^^^^^^^
This GetBrowserDimensions value is a:
Msg
But perform needs the 1st argument to be:
a -> msg

I asked at the Elm Slack channel, and got help very quickly:

Samuel Kacer 28 minutes ago
The first argument to Task.perform needs to be a function that will take the result from the Task and wrap it in some kind of message. so for the case of getViewPort, the argument needs to be of type Viewport -> Msg.
the first argument you are providing, GetBrowserDimensions, is of type Msg, so I assume it doesn't contain anything and has a definition something like this:
type Msg =
...
| GetBrowserDimensions
but instead needs to be something like
| GetBrowserDimensions Viewport
that way the constructor for that message variant will have a type of Viewport -> Msg, which would fit for the Task you are wanting to perform

arkham 27 minutes ago
you can check out this ellie https://ellie-app.com/bZvHnKqpPrCa1

Also, I decided I needed it to respond to window resize events, which was also confusing, since the onResize documentation uses Cmd Msg as its type, but apparently I needed to use a Sub Msg in my case:

Kristian Pedersen 2 hours ago

2. Responding to window resize events

Actually, I realized I wanted it to update on window resize. Again, I think I’m almost there, but it’s telling me I need a sub msg, not a cmd msg:
https://ellie-app.com/bZBqjmgPS9pa1
What also confuses me is that going by the documentation, the subscriptions function returns a cmd msg, but in my example, it need to be a sub msg: https://package.elm-lang.org/packages/elm/browser/latest/Browser-Events#onResize

arkham 1 hour ago
hey @kristian Pedersen, it’s just the type of the subscription is a Sub Msg instead of a Cmd Msg , so your subscriptions function should be a Sub Msg, here’s a working ellie https://ellie-app.com/bZC6k6dv9wna1

arkham 1 hour ago
I also converted the Ints to Floats to get the type checker to be happy

arkham 1 hour ago
and here’s a very simple example of a subscription: https://guide.elm-lang.org/effects/time.html

arkham 1 hour ago
oh, and to be clear: the documentation is saying that onResize returns a Sub msg https://package.elm-lang.org/packages/elm/browser/latest/Browser-Events#onResize

Thanks for the help and patience, Arkham! You're a legend.

3. The code

Once all the confusion and going back and forth had settled, my resulting code mostly looks pretty nice, to be honest.

3.1. Model and Msg

type alias Model =
    { width : Float, height : Float }


initialModel : Model
initialModel =
    { width = 0, height = 0 }


type Msg
    = NoOp
    | GotInitialViewport Viewport
    | Resize ( Float, Float )

The model is straight forward. Although GotInitialViewport and Resize look different, they both involve dealing with two Floats.

I don't really like how this looks. Maybe it would have been cleaner to just do it through JavaScript interop?

3.2. Main and subscription

main : Program () Model Msg
main =
    let
        handleResult v =
            case v of
                Err err ->
                    NoOp

                Ok vp ->
                    GotInitialViewport vp
    in
    Browser.element
        { init = \_ -> ( initialModel, Task.attempt handleResult Browser.Dom.getViewport )
        , view = view
        , update = update
        , subscriptions = subscriptions
        }


subscriptions : model -> Sub Msg
subscriptions _ =
    E.onResize (\w h -> Resize ( toFloat w, toFloat h ))

That's a pretty chunky main function compared to what I've seen before.

When the task handleResult is done, it will return one of those two Cmd Msgs in the let statement.

3.3. Update

setCurrentDimensions model ( w, h ) =
    { model | width = w, height = h }


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        GotInitialViewport vp ->
            ( setCurrentDimensions model ( vp.scene.width, vp.scene.height ), Cmd.none )

        Resize ( w, h ) ->
            ( setCurrentDimensions model ( w, h ), Cmd.none )

        NoOp ->
            ( model, Cmd.none )

Cmd.none just seems like it could be implicit instead, although I guess Elm favors explicitness a lot more than I'm used to.

It adds a bit extra overhead to me as a beginner, but I guess it can be nice to see Cmd.none at a glance.

Again, I don't like my double approach, where I get the width and height two different ways: through a vp variable, and through a ( w, h ) tuple. It just feels wrong.

3.4. View

Just displaying some data. A nice ending to a confusing day:

view : Model -> Html Msg
view model =
    div []
        [ text
            ("The width is "
                ++ (model.width |> String.fromFloat)
                ++ "px, and the height is "
                ++ (model.height |> String.fromFloat)
                ++ "px"
            )
        ]

4. Conclusion

This is one case where I don't immediately see the benefit in doing it the Elm way, rather than just doing it through JavaScript interop, using window.eventListener.

I definitely need to re-read the Browser.Dom and Task documentation.

What I also need is a good night's sleep. (I highly recommend "Why We Sleep" by Matthew Walker)

I woke up way too early, didn't have a siesta, and I'm noticing the negative effects on my thinking and mood. I've been through frustrating learning moments before, so I'll get through this one as well.

Get a good night's sleep you too, and see you tomorrow!

#30daysofelm Day 19: Basic time

Kristian Pedersen — Mon, 04 Jan 2021 22:21:07 +0000

This is day 19 of my 30 day Elm challenge

Table of contents
1. About today's project
2. Time in Elm
3. What is different from the example code?
- 3.1 View
4. Summary

1. About today's project

https://ellie-app.com/bZcnMkJZvrVa1

The main piece of information I want to convey in this project is distance and time.

Building on the astronomy project, the main thing we're working with is light minutes, which tells us how far light travels in a certain number of minutes.

Light years sound a bit weird, but we're already using time for distance. The nearest city from my parents' place is one -hour- away.

What I want to display in this project is users_current_time - lightMinutes. If you were observing your house from a given solar system body, how far back in time would you see?

I don't feel like doing much today, so I'll focus on getting a hardcoded proof of concept working first.

2. Time in Elm

As a starting point, I just copied and pasted this code: https://guide.elm-lang.org/effects/time.html

In JavaScript, I'm used to the Date object, which has some weird quirks:

const d = new Date()
// Checking if it's the 24th day of the 12th month
const isXmas = d.getDate() === 24 && d.getMonth() === 11 // lol wtf

const year = d.getYear() 
// Returns 121! You need to use d.getFullYear() to get 2021 :D

Elm on the other hand uses Posix time:

With POSIX time, it does not matter where you live or what time of year it is. It is just the number of seconds elapsed since some arbitrary moment (in 1970). Everywhere you go on Earth, POSIX time is the same.

3. What is different from the example code?

Except from the view, I haven't added anything. I just want to subtract X minutes from the time, so there's no need in over-complicating things.

I could have chosen to update the time less frequently. We're only displaying the hours and minutes, so updating it every second means that only one of 60 ticks will result in a view update.

However, I kept everything as is. I wouldn't like it if the GUI and the user's computer didn't change the minutes at the same time.

3.1 View

view : Model -> Html Msg
view model =
    let
        lightMinutes =
            75

        currentHour =
            Time.toHour model.zone model.time

        currentMinute =
            Time.toMinute model.zone model.time

        newMinutes =
            (currentHour * 60) + currentMinute - lightMinutes

        h =
            floor (toFloat newMinutes / 60)
                |> String.fromInt
                |> String.padLeft 2 '0'

        m =
            remainderBy 60 newMinutes
                |> String.fromInt
                |> String.padLeft 2 '0'
    in
    h1 [] [ text <| h ++ ":" ++ m ]

currentHour and currentMinute look different from JavaScript, but I think it's pretty clear what they do.

As I'm writing this, the time is 17:50. A time difference of 75 minutes means we should get 16 for the hours and 35 for the minutes.

To get the new time, we can first find out how many minutes have passed today since midnight.

If we're sticking with 17:50, the total number of minutes would be ((17 * 60) + 50). We then subtract the lightminutes from that number.

17 * 60 + 50 = 1070
We subtract 75 minutes, which is 995.
floor 995 / 60 = 16
remainderBy 60 995 = 35
The new time is 16:35

If the number is less than 10, we use String.padLeft to add a 0. Make sure to wrap the 0 character in single quotes, or Elm will think it's a character, not a string.

Edit: I didn't include 00:00 - 1 = 23:59. Here's what that would look like:

getNewHour currentHour hoursToSubtract =
    let
        timeDifference =
            currentHour - hoursToSubtract

        newHour =
            if timeDifference < 0 then
                24 - abs timeDifference

            else
                timeDifference
    in
    newHour

4. Summary

I had hoped this would be a simple exercise, and I was right. This will be very useful later on.

Some funky numbers are displayed the first second, but I'm too tired to fix that now.

See you tomorrow!

Forem: Kristian Pedersen

#30daysofelm Day 30: Closing thoughts

1. Why Elm?

2. Personal top 5 projects from these 30 days

2.1. Day 5: "Lights Out" game

2.2. Day 6: Accessible background colors

2.3. Day 9: Deploying a Python backend + Elm frontend

2.4. Day 15 to 19: From struggling with JSON to decoding JSON from Python

2.5. Day 24: Html Msg vs Html msg

3. Things that I like about Elm

3.1. If it compiles, it works

3.2. Types

3.3. elm-format

3.4. Syntax

3.5. Immutability

4. Things I don't like about Elm

4.1. Some parts of the documentation lack examples

4.2. Can't mix Floats and Ints

4.3. Some things are harder than expected

5. Learning strategy

5.1. Things that worked really well

5.1.1. Setting the bar low

5.1.2. Writing

5.1.3. Not following a set structure was mostly really good

5.2. Things that could have been better

5.2.1. Not taking enough breaks

5.2.2. Coding and writing in one day is a lot of work

6. What's next?

#30daysofelm Day 29: Basic map, filter and reduce/foldl

1. In depth documentation

2. Array.map / List.map

2.1. JavaScript

2.2. Elm

3. Array.map / List.indexedMap

3.1. JavaScript

3.2. Elm

4. Array.filter / List.filter

4.1. JavaScript

4.2. Elm

5. Array.reduce / List.foldl

5.1. JavaScript

5.2. Elm

6. Conclusion

#30daysofelm Day 28: Chess board + intro to Knight's Tour

1. Creating a basic chessboard, and calculating a few moves

2. Create a chess board

3. index -> (Int, Int) and index -> letter ++ number

4. Get valid destinations

5. Get the destinations' destionations

6. Things that need fixing

#30daysofelm Day 27: Using WebSockets+ports to control TouchDesigner

1. Main.elm

2. index.html / Compiling Main.elm with live reload

3. Brief explanation of TouchDesigner data types (CHOP/DAT/TOP)

4. TouchDesigner server

5. Sending data from TouchDesign on value change

#30daysofelm Day 26: Debug.log, Debug.toString and the REPL

1. Debug.log: Like console.log(), but only in the browser

2. text (variableOfAnyType |> Debug.toString)

3. My Main.elm code

4. Starting and using the REPL

5. Screenshot

6. Conclusion

#30daysofelm Day 25: Displaying a List (List String)

1. Creating a single row

2. Creating a grid (list of rows)

3. Creating a grid with chess position names (A1, A2, .. H8)

4. Refactoring: Named functions look nicer than long anonymous ones

5. Creating the view

#30daysofelm Day 24: msg vs. Msg

Table of contents

1. msg vs Msg (you can choose your own names, too)

1.1. Msg vs Msg Float, Msg String, etc.

1.2. Float -> Msg

1.3. msg is just a placeholder

2. Summary

#30daysofelm Day 23: Simple layout with elm-ui

About today's project

Elm-ui is much nicer to read

Today's code

1. `msg` vs `Msg` (you can choose your own names, too)

1.1. `Msg` vs `Msg Float`, `Msg String`, etc.

1.2. `Float -> Msg`

1.3. `msg` is just a placeholder