Beyond the Usual, Passive DEI Efforts in Tech

Blog:Spectrum - a Multifaceted Photo

Loading...
Manny Becerra as a child

November 2020

While riding my bike the other evening, I noticed some new lights along a wall in the downtown Reno corridor. These lights caught my attention because they were configured to be lit-up in a spectrum of colors, which I thought was cool.

Views: 55,621 View on Unsplash

Download: Full / High-Quality

Person walking in-front of a lit-up corridor of downtown Reno a little after sunset. The lights were configured to showcase the color spectrum (aka: rainbow colors). Photo by Manny Becerra (Nov. 2020)

As I stopped to take a closer look, I pulled out my camera to capture a few shots, one of which is displayed above with a person walking in front of the lights that created a silhouette of their legs. To me, this moment—the specific light configuration with a person's silhouette—represented a reminder of how people are multifaceted. Whether it's in day-to-day life interactions or, for instance, creating digital products, someone's multifacetedness is something for all of us to keep-in-mind to help guide us in trying to better understand one another in lieu of jumping to potentially harmful conclusions of others.

Statically displaying a dynamic photo

For the curious, the photo above is actually pulled-in to this page dynamically from Unsplash's API. In combination with Next.js' getStaticProps, I am able to fetch this particular picture alongside its dynamic attributes, like how many times the picture has been viewed, downloaded, starred, etc., all while deploying and bundling this markdown page in production in a statically generated manner to help with performance load.

Loading...

Sample snippet of code on how to fetch a specific Unsplash image using their API

The following is a snippet of how to instantiate the Unsplash API and make a photo request.

... // Imports, variable declarations, etc. removed for brevity

// Server-side code (in my case, JavaScript ala node.js)
// 1. Establish our Unsplash instance
// @see https://github.com/unsplash/unsplash-js#creating-an-instance
const unsplash = new createApi({ accessKey: accessToken })

// 2. Make the fetch request passing along a specific photo ID
let resultError
const results = await unsplash.photos.get({ photoId: id }).then(result => {...

// 3. Return & use the (photo) result
// @see https://github.com/unsplash/unsplash-js#response
return results

Once the photo is successfully fetched from Unsplash on the server-side, I can pass this along to the client-side and render the photo along with any other provided attributes returned (e.g. view count) just like any other, standard image on the Web using common HTML elements, like the img tag, however, in my particular case, I leverage custom React components I've built for my site over time.

Any who, hope you enjoy both the picture and the method for how to pull-in any of your photos from Unsplash to share it on your website (or wherever you fancy). In 2019, I created a similar demo on my Next.js with Theme UI Starter Kit that allows one to perform a fuzzy search to find a picture on Unsplash with keywords. Check it out, especially if you're curious on how to implement something similar or very different!

Related:

Resources:


Loading...
Manny Becerra as a child

I operate from a place of compassion, possibility and imagination. My work and efforts share a common goal: create a better, sustainable and equitable world by building inclusive communities, products & experiences.