Week 1 - Joppe Koops

[joppekoops]

Enhancement

Name

Joppe Koops

Class

Tech 2

Repo link

Repo: https://github.com/jkhvacmd209/blok-tech
Wiki: https://github.com/jkhvacmd209/blok-tech/wiki/Enhancement

Summary

I started this week with refreshing my knowledge about JavaScript with the assignments on GitHub. This went very well.
I did some research on progressive enhancement, mostly looking at other websites (almost everything is not correctly progressively enhanced).
I also made a little start with my own feature and built an input for images.

Resources used

Any thoughts?

Most of the homework was doable, but the part about server vs. client side and the API's was a little difficult because I don't know what is possible there yet.

[Chazzers]

Hi Joppe, studentassistent here (I don't know if I should respond in English or Dutch...)!

So to elaborate on your remark on the server vs client side... Basically what you need to do for this subject is create a progressive enhancement. This basically means adding layers that improve a feature with each added layer. The base layer is HTML, then you add the layer css, and afterwards you add the layer client-side js. Each layer here improves UX.

Now if you were to turn off javascript in your browser, which is the part you will be tested on, your feature still needs to work. But turning off JS in the browser won't mean that the JS on the server will be turned off as well. Meaning you can make a feature work server-side, and then enhance that feature with client-side JavaScript. This means if you turn off client-side javascript your feature will still work.

For example with the feature liking:
Server-side and html:

• Form with a "like" button that sends a post request to the server on submit
• Handle this post request by storing the like in the database
  The downsides of only doing this server-side are:
  The page refreshes, and no cool animation, meaning you can progressively enhance this by adding to the client-side
• Stop the request to the server
• Handle the request on the frontend
• Awesome like animation

I hope this helps! If you've got any other troubles, or run into issues and need some help, don't be afraid to reach out to me or any of the other studentassistents!