Return to Answer

From the functional point of view what you're doing is a bit odd as you always create a link and try to load an image, even for non-existing users.

You should better query the GitHub API and change your model to something like:

type alias Model =
 { username : String -- this is the string typed in the input box
 , user : Maybe User -- this is the parsed result from the API call
 }

then, you can create a viewUser : User -> Html Msg function to show the username and the image. Note that your model has a Maybe User so you'll have to pattern match in view and either call viewUser (if you have something to show) or display some text explaining that the current query doesn't match with a valid GitHub user.

Note that invoking the API and getting a result is a bit more convoluted than it is in JavaScript. You need to do an HTTP request and create a Json decoder.

Said that, let's go back to the code you wrote. I agree with the comments in the other answer and I'd like to add a few things:

• comments like -- MODEL are not particularly useful. I'd get rid of them;
• Change is not really self-explanatory. What does it change? I'd rename it to QueryChanged or something similar.
• as I mentioned already, view could be split in smaller functions each one taking care of visualising/styling a single component.

In your question you asked about how to optimise your code. Are you looking for performance improvement? Why?

From the functional point of view what you're doing is a bit odd as you always create a link and try to load an image, even for non-existing users.

You should better query the GitHub API and change your model to something like:

type alias Model =
 { username : String -- this is the string typed in the input box
 , user : Maybe User -- this is the parsed result from the API call
 }

then, you can create a viewUser : User -> Html Msg function to show the username and the image. Note that your model has a Maybe User so you'll have to pattern match in view and either call viewUser (if you have something to show) or display some text explaining that the current query doesn't match with a valid GitHub user.

Note that invoking the API and getting a result is a bit more convoluted than it is in JavaScript. You need to do an HTTP request and create a Json decoder.

Said that, let's go back to the code you wrote. I agree with the comments in the other answer and I'd like to add a few things:

• comments like -- MODEL are not particularly useful. I'd get rid of them;
• Change is not really self-explanatory. What does it change? I'd rename it to QueryChanged or something similar.
• as I mentioned already, view could be split in smaller functions each one taking care of visualising/styling a single component.

In your question you asked about how to optimise your code. Are you looking for performance improvement? Why?