DEV Community

Cover image for My Unsplash Search Cloud
Ewe Lin Loo
Ewe Lin Loo

Posted on

My Unsplash Search Cloud

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 and transition 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 with const where possible.
  • Used a different compare function in sort to allow for the reverse method to be omitted.

So what tutorials have you learned the most from?

Top comments (0)