Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice generator app

#accessibility#astro#cypress#tailwind-css#progressive-enhancement
P
markusβ€’ 1,330

@markuslewin

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

P
visualdennisβ€’ 8,295

@visualdenniss

Posted

Amazing work! 1/1 matches the design.

But what caught my attention is that the speed it returns new advice. So far, in all solutions i've seen for this challenge, there was a 2 second waiting time between to make new request, which i think APIs own rate limit. It also works this way in my version where back to back clicks don't return anything.

However in your version it seems to return an advice as soon as clicked, no matter how many times in a row without any time between. I wonder what is it in the app that makes this possible? Is all data pulled out locally? I've tried to check source code but not familiar with astro etc. It looks like it has something to do with faker js, but on the docs i'vent seen a category called "advice" and advice: faker.lorem.paragraph() points to lorem parapgraph but ur app shows a real text not lorem. Would be much appreciated if you could maybe share the secret sauce :) Thanks!

Marked as helpful

2

P
markusβ€’ 1,330

@markuslewin

Posted

@visualdenniss Thank you!

I actually don't do anything special! The docs mention they cache the advice for 2 seconds, but that doesn't seem to be correct.

The response has a cache-control: max-age=2 directive, but it looks like the only cache between the client and the server is the browser cache. The browser cache will be ignored, since I use cache: no-store as an option to fetch (in src/helpers/advice.ts).

Everything inside the cypress folder is part of the automated tests. I use faker to generate mock data. πŸ™‚

1
P
visualdennisβ€’ 8,295

@visualdenniss

Posted

@markuslewin Thanks a lot for ur helpful explanation as always!

I had noticed cache: no-store when i was digging the code and initially thought that might be the one doing the magic, but then i saw faker JS and thought maybe its faster cuz of the generated mock data.

Didn't know cypress before too. Learnt couple of new things :D Thanks again and looking forward to ur upcoming solutions!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord