dictionary app

lessons learned

• Web APIs

  I tackled this Frontend Mentor challenge to build experience working with web APIs. I chose to interpret the search functionality as updating the result live, rather than the user manually submitting a search.

  The issue: how did I ensure that I wasn't blasting the API with a request for every character the user typed?

  A bit of Googling lead to me learning about debouncing. I built a simple hook to debounce the text input to make a GET request after enough time had passed that the user would most likely have stopped typing (500ms).

• user testing/experience

  After building an MVP of the search functionality, I asked my partner and my parents (the ultimate test) to use the app to get real life feedback on how intuitive it was to use. Here's what I learned:

  • They didn't know that all they had to do was type: their instinct was to put a word into the search input and hit enter.
  • After they'd done that, they weren't sure if the app was working or not: there was no feedback that the word had been accepted as the app was not only waiting for the bounced value, but then also had to fetch the data.

  This feedback lead to me implementing two UX changes:

  1. I'd never implemented a loading skeleton before, and it felt like this would tackle both of the above identified issues. Now, the moment a user starts typing, the loading skeleton appears to inform the user that the app is loading a result.
  2. It made a lot of sense that people will hit 'enter' in these situations. I felt the best way to handle this "unnecessary" action was to simply mimic the behaviour of what the user would expect if they pressed enter on an input: disable focus on the input.
• Responsive design

  Wherever possible, I try to avoid using media queries to implement changes to layout — for example, it feels a little clunky when a heading suddenly shifts from 36px to 64px.

  This lead me to learn more about the CSS clamp function, and how we can use fluid typography tools to implement them.

  However, it's simply not scalable to go to a website, plug in your values and then paste the result into your app.

  So, I did what any lazy efficient developer would do... I wrote a reusable function to do it for me with full documntation using JSDoc.

  Now, I simply use this function when building my CSS custom properties for any layout element that needs to smoothly transition between 2 sizes when the viewport width changes.