Come back and look again after a break

[vsoch]

Hey @julianpistorius - you can probably tell my sentiment about elm right now based on the title of this PR, it's just a functional mess, and I have no idea how/where to even start fixing something, the compiler is never happy. I have to be honest, I'm not having very much fun at the moment learning this... if you could even call it learning!

Signed-off-by: vsoch vsochat@stanford.edu

[vsoch]

Here is the current state of the mess

Detected problems in 1 module.
-- TYPE MISMATCH -------------------------------------------------- src/Main.elm

The 2nd argument to `column` is not what I expect:

113|         (Element.column []
114|>            [ Element.el []
115|>              Element.Region.heading 2
116|>              { label = Element.text "Random Cats" }
117|>             , viewGif model
118|>            ]

This argument is a list of type:

    List (Html Msg)

But `column` needs the 2nd argument to be:

    List (Element.Element msg)

Hint: I always figure out the argument types from left to right. If an argument
is acceptable, I assume it is “correct” and move on. So the problem may actually
be in one of the previous arguments!

-- TYPE MISMATCH -------------------------------------------------- src/Main.elm

The 2nd argument to `el` is not what I expect:

114|             [ Element.el []
115|>              Element.Region.heading 2
116|               { label = Element.text "Random Cats" }

This `heading` value is a:

    Int -> Element.Attribute msg

But `el` needs the 2nd argument to be:

    Element.Element msg

Hint: I always figure out the argument types from left to right. If an argument
is acceptable, I assume it is “correct” and move on. So the problem may actually
be in one of the previous arguments!

-- TOO MANY ARGS -------------------------------------------------- src/Main.elm

The `el` function expects 2 arguments, but it got 4 instead.

114|>            [ Element.el []
115|               Element.Region.heading 2
116|               { label = Element.text "Random Cats" }

Are there any missing commas? Or missing parentheses?

-- TYPE MISMATCH -------------------------------------------------- src/Main.elm

Something is off with the 3rd branch of this `case` expression:

139|>          [ Element.el []
140|>              (Element.Input.button
141|>                [ Background.color marigold
142|>                ]
143|>                { onPress = MorePlease
144|>                , label = Element.text "More Please"
145|>                }
146|>               ,Element.image 200 200 url)
147|>          ]

The 3rd branch is a list of type:

    List (Element.Element msg)

But the type annotation on `viewGif` says it should be:

    Html Msg

-- TYPE MISMATCH -------------------------------------------------- src/Main.elm

The 2nd argument to `el` is not what I expect:

139|           [ Element.el []
140|>              (Element.Input.button
141|>                [ Background.color marigold
142|>                ]
143|>                { onPress = MorePlease
144|>                , label = Element.text "More Please"
145|>                }
146|>               ,Element.image 200 200 url)

This argument is a tuple of type:

    ( Element.Element msg, b )

But `el` needs the 2nd argument to be:

    Element.Element msg

Hint: I always figure out the argument types from left to right. If an argument
is acceptable, I assume it is “correct” and move on. So the problem may actually
be in one of the previous arguments!

-- TYPE MISMATCH -------------------------------------------------- src/Main.elm

The 2nd argument to `image` is not what I expect:

146|                ,Element.image 200 200 url)
                                       ^^^
This argument is a number of type:

    number

But `image` needs the 2nd argument to be:

    { description : String, src : String }

Hint: I always figure out the argument types from left to right. If an argument
is acceptable, I assume it is “correct” and move on. So the problem may actually
be in one of the previous arguments!

Hint: Only Int and Float values work as numbers.

-- TYPE MISMATCH -------------------------------------------------- src/Main.elm

The 1st argument to `image` is not what I expect:

146|                ,Element.image 200 200 url)
                                   ^^^
This argument is a number of type:

    number

But `image` needs the 1st argument to be:

    List (Element.Attribute msg)

Hint: Only Int and Float values work as numbers.

-- TOO MANY ARGS -------------------------------------------------- src/Main.elm

The `image` function expects 2 arguments, but it got 3 instead.

146|                ,Element.image 200 200 url)
                     ^^^^^^^^^^^^^
Are there any missing commas? Or missing parentheses?

-- TYPE MISMATCH -------------------------------------------------- src/Main.elm

The 2nd argument to `button` is not what I expect:

140|               (Element.Input.button
141|                 [ Background.color marigold
142|                 ]
143|>                { onPress = MorePlease
144|>                , label = Element.text "More Please"
145|>                }

This argument is a record of type:

    { label : Element.Element msg, onPress : Msg }

But `button` needs the 2nd argument to be:

    { label : Element.Element msg, onPress : Maybe msg }

Hint: I always figure out the argument types from left to right. If an argument
is acceptable, I assume it is “correct” and move on. So the problem may actually
be in one of the previous arguments!

-- TYPE MISMATCH -------------------------------------------------- src/Main.elm

Something is off with the 2nd branch of this `case` expression:

135|>          [ Element.el []
136|>              (Element.text "Loading")
137|>          ]  

The 2nd branch is a list of type:

    List (Element.Element msg)

But the type annotation on `viewGif` says it should be:

    Html Msg

-- TYPE MISMATCH -------------------------------------------------- src/Main.elm

Something is off with the 1st branch of this `case` expression:

125|>          [ Element.el []
126|>              (Element.text "I could not load a random cat.")
127|>              , Element.Input.button
128|>                [ Background.color marigold
129|>                ]
130|>                { onPress = MorePlease
131|>                , label = Element.text "Try Again"
132|>                }
133|>          ]  

The 1st branch is a list of type:

    List (Element.Element msg)

But the type annotation on `viewGif` says it should be:

    Html Msg

-- TYPE MISMATCH -------------------------------------------------- src/Main.elm

The 2nd argument to `button` is not what I expect:

127|               , Element.Input.button
128|                 [ Background.color marigold
129|                 ]
130|>                { onPress = MorePlease
131|>                , label = Element.text "Try Again"
132|>                }

This argument is a record of type:

    { label : Element.Element msg, onPress : Msg }

But `button` needs the 2nd argument to be:

    { label : Element.Element msg, onPress : Maybe msg }

Hint: I always figure out the argument types from left to right. If an argument
is acceptable, I assume it is “correct” and move on. So the problem may actually
be in one of the previous arguments!

Why would I use elm when I can literally do this request with a few lines of any other language?

[vsoch]

Here are some ideas for the kinds of things that might help. Most of these are challenging because the way to help I don't think is to explicitly answer "This is how you implement this thing" but rather "Here is the thought process to do it and not get stuck on something."

• Since I'm modifying already existing stuff, I'm thus trying to copy new elements into existing ones and praying that it (or some derivation I come up with off the fly) works. This is a bad strategy because I should be approaching by thinking of the different components, the types allowed, and then how to combine them. I haven't figured out a thought process or workflow that has worked for me, so if you have ideas / dummy examples, this would be help.
• I don't know how to go about developing with elm, step wise. For example, for Python I can open an interactive shell and test as I go. For a compiled language (e.g., GoLang) i can create something that works, and then add tiny pieces (re-compile) and go until it doesn't work. With elm, the issue I'm running into is that when I add a next piece (e.g., defining the output to be rendered into the view) I can't get it to compile at all.
• Debugging: So far I'm approaching it like I normally would, meaning trying to look up elements / types and figuring out what to change. But for the stack trace above, I don't know which to do first (the ones at the top?) and sometimes when it's expecting a type and I've provided another, I'm not sure how to figure out what the expected type looks like.

[julianpistorius]

Hi @vsoch!

I don't know if this will be much consolation, but this pain & frustration sounds absolutely normal. Every Elm programmer I've spoken to has gone through exactly the same thing. It's a completely different way of thinking that you're learning. It's not unlike a developer used to imperative languages (e.g. Python, JavaScript) getting frustrated when first learning SQL. If they persist and learn to think and decompose problems declaratively, SQL can become one of the most valuable tools in their toolbox.

I'll have a look at your code to see how you might approach it step-by-step. Then I'll see if I can come up with some debugging tips.

Another thing that helped me a lot was to pair-program with somebody else, to see how they solved problems. Happy to do some Zoom screensharing if you want.

You may also want to check out the Elm track on exercism.io for some deliberate practice on smaller examples.

Hang in there!

[julianpistorius]

You may also be interested in this book:

https://korban.net/elm/book/

[julianpistorius]

Hi @vsoch! I found this today, which reminded me of our conversation about iterative development:

https://twitter.com/dillontkearns/status/1265282014707474433

Links:

• https://incrementalelm.com/articles/moving-faster-with-tiny-steps/
• https://thoughtbot.com/blog/iterative-development-in-elm-http
• https://www.youtube.com/watch?v=mrwn2HuWUiA