[HN Gopher] Jeopardy Heatmap Written in Elm
___________________________________________________________________
Jeopardy Heatmap Written in Elm
Author : msszczep2
Score : 20 points
Date : 2022-01-22 17:08 UTC (5 hours ago)
(HTM) web link (www.szcz.org)
(TXT) w3m dump (www.szcz.org)
| agumonkey wrote:
| an unminified transpiled too, rare
| nullspace wrote:
| 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.
| agumonkey wrote:
| i believe app code start at line 4372, and the meat around
| 5733 5785 etc to 5990
| derw-lang wrote:
| Nice, simple and easy to use! I implemented a copy in Derw[0]
| here[1], with a link back to yours, of course.
|
| [0] - https://derw-lang.github.io/
|
| [1] - https://derw-lang.github.io/examples/jeopardy/
| threatofrain wrote:
| It's a simple app but it's pleasant to be able to understand
| without knowing Elm.
| capableweb wrote:
| 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.
| nateabele wrote:
| 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...
| ReleaseCandidat wrote:
| > 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.
___________________________________________________________________
(page generated 2022-01-22 23:01 UTC)