DEV Community

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

Posted on

1

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?

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay