Jeopardy Heatmap Written in Elm | Hacker News Reader

Jeopardy Heatmap Written in Elm

szcz.org

24 pointsmsszczep28 comments

Nice, simple and easy to use! I implemented a copy in Derw[0] here[1], with a link back to yours, of course.

[1] - https://derw-lang.github.io/examples/jeopardy/

It's a simple app but it's pleasant to be able to understand without knowing Elm.

Yeah, not that hard to understand, but as the size of the application grow, so seems like the syntax would. I find it hard to imagine staring at so much code with so little value per character/word/syntax as what this seems to have.

Take this chunk of code as an example:

  makeRectangle answer =
      div
          [ Html.Attributes.style "width" "140px"
          , Html.Attributes.style "height" "100px"
          , Html.Attributes.style "margin-top" "10px"
          , Html.Attributes.style "padding-top" "5px"
          , Html.Attributes.style "padding-left" "5px"
          , Html.Attributes.style "background-color" (getColor (Tuple.second answer))
          , Html.Attributes.style "border" "2px solid black"
          ]
          [ button [ onClick (SetCorrect (Tuple.first answer)) ] [ Html.text "Yes" ]
          , Html.text " "
          , button [ onClick (SetIncorrect (Tuple.first answer)) ] [ Html.text "No" ]
          , Html.text " "
          , button [ onClick (SetUnread (Tuple.first answer)) ] [ Html.text "Reset" ]
          ]

It's really hard to see what is what, without really digging into it, and everything is repeated everywhere for maximum explicitness (thanks types?). Why is `Html.Attributes.style` and `HTML.text` repeated so many times when it's just style declaration for one thing and of course a string would be Html.text, what else could it be? It seems so verbose.

But then my benchmark for expressiveness would probably be Clojure (ClojureScript in this case [Reagent]), and it would look like this:

  (defn make-rectangle [answer]
    [:div
      {:style {:width "140px"
               :height "100px"
               :margin-top "10px"
               :padding-top "5px"
               :padding-left "5px"
               :background-color (get-color (second answer))
               :border "2px solid black"}}
      [:button {:onClick (set-correct (first answer))}
        "Yes"]
      [:button {:onClick (set-correct (first answer))}
        "No"]
      [:button {:onClick (set-unread (first answer))}
        "Reset"]])

Same amount of lines as Elm example, but things have room to breath. It's clear what belongs to what based on the indentation.

You can also `import Html.Attributes as Attr` and do `Attr.style "foo" "bar"`, or `import Html.Attributes exposing (style)` and do `style "foo" "bar"`.

Or, you know, since it's a composable ML-style functional language, you can grab a package like elm-css[0] and do:

  makeRectangle answer =
      div
          [ css
              [ width (px 140)
              , height (px 100)
              , marginTop (px 10)
              , paddingTop (px 5)
              , paddingLeft (px 5)
              , backgroundColor (getColor (Tuple.second answer))
              , border3 (px 5) solid black
              ]
          ]
          [
            ...
          ]

...which gives you full compile-time type-checked styles with a no-crash guarantee. Can Clojure Spec give you the same in your example above?

Incidentally, it's also less noisy than the equivalent block of Clojure code. Elm isn't perfect, and definitely gets verbose at points, but if you're going to criticize, make an informed comparison.

[0] https://package.elm-lang.org/packages/rtfeldman/elm-css/late...

> Why is `Html.Attributes.style` and `HTML.text` repeated so many times

Because it is constructor.

   Html.text "STRING"

constructs a HTML text element from "STRING".

But because of

    import Html exposing (br, button, div, p, text, h3, a)
    import Html.Attributes exposing (style, href)

the `HTML` and `Html.Attributes` prefixes are actually not needed and not used in the lower part (in the `view` function).

> what else could it be

For example an attribute like the `id`, or a class name or ... Yes, Ok, it actually can't be in the second array, the first array is for the attributes and the second one for the child elements.

To be honest, the differences between Clojurescript with Reagent, Elm or PureScript with Halogon / React are minimal for me.

an unminified transpiled too, rare

heh, just took a look. I don't, in this case, it's worth it. It's "unminified", but it's certainly not readable or at least not worth reading through for a simple application like this. I understand that this is just the output of the elm compiler along with its standard libraries.

i believe app code start at line 4372, and the meat around 5733 5785 etc to 5990

Reply on news.ycombinator.com