First off: The eye candy. And the technical stuff. I'm only going to go into the highlights of what I learned while working on this project. This post isn't intended to be a tutorial but hopefully it helps other beginners understand how to learn.
This project truly tested my understanding of async
and await
. It relies on fetch
to interact with the API from Unsplash. When I first looked at the API documentation, I was confused about how to use the official libraries and SDKs. Only after watching this helpful video, did I begin to understand how to use the API for my project. It showed me that I was looking at the wrong section of the documentation. It also showed me how to construct a URL from which I could fetch
photo data relating to the given search term.
Another thing that I learned from looking at a professional developer's code is how to write and refactor code more elegantly. In particular, I learned to break things down into more readable variables and aim for separation of concerns when writing functions.
This lesson was further reinforced by this tutorial - which I used to guide my construction of the tag cloud part of my project. From this tutorial, I learned a couple of nifty tricks:
- Fragments, which are DOM node objects that are used to group elements. When the fragment is appended to the DOM tree, the fragment is replaced by all its children.
- Using a combination of
box-shadow
andtransition
in CSS creates an animated fill effect. - Using a compare function with
sort()
to organise search terms in ascending or descending order.
Although I used a couple of tutorials to help me out, I think the most fun came from the fact that I understood them enough to be able to adapt the code to my needs. I even refactored (and hopefully improved) some of the tutorial code:
- Used the spread operator instead of
map
to create a shallow copy of an array. - Replaced the
let
keyword withconst
where possible. - Used a different compare function in
sort
to allow for thereverse
method to be omitted.
So what tutorials have you learned the most from?
Top comments (0)