Submitted over 1 year ago

JS Advice Generator API with random number gen

Riley• 260

@rileydevdzn

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Advice generator app

HTML
CSS
JS
API

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey everyone!

Another JS build, this time with the API. After making a simple incremental counter, I created a random number generator for the advice # for a bit more fun 😊

Was able to fix the “sticky” behavior of :focus on button click with :focus-visible. As I was digging into this, there’s a ton more I’d like to learn about accessibility.

This is my first time working with APIs and fetch(). It works well in the browsers I tested, except for Firefox. In FF, a new piece of advice is provided on page load, and also when you click the button the 1st time (works as expected). But after the 1st button click, the advice doesn’t update anymore on click. The counter updates, so I think it’s something in the way I used fetch(). None of the solutions I’ve found so far (mostly StackOverflow) seem to help. 🤔

So my questions this time around:

Know of any sites that totally rock accessibility? I’ve found the WAI tutorials W3C provides and common design pattern best practices with ARIA and the WCAG guidelines as references. I’m interested in finding great IRL implementation examples or a particular site/dev/expert to follow so I can level up 📚 my skills in this area
Not sure what in my JavaScript is causing the Firefox issue (maybe something missing from my code?). Any suggestions/recommendations would be greatly appreciated!

Thanks!

Community feedback

Oleg• 350

@o-gtkv

Posted over 1 year ago

Hi, Riley

"Not sure what in my JavaScript is causing the Firefox issue (maybe something missing from my code?)."

It's all about caching. After first fetch call, all following requests get data from cache, not from server. And so it will be until the cache will be expired. When exactly this happens depends on server's response, namely on HTTP header Cache-Control, and directive max-age. Its value can be seen on the Network tab in DevTools. So, in the server response it is listed twice as

cache-control: max-age=2
cache-control: max-age=600

2 seconds and 10 minutes. A server-side bug, apparently. Chrome takes the first value and ignores the second. Firefox vice versa (you can see the exact cache expiration time in about:cache). That is, everything works in Firefox too, but only once every ten minutes :) This can be fixed by passing, for example, { cache: "no-store" } object as second parameter to fetch. (more details here and here)

Hope this helps )

Marked as helpful

Riley• 260

@rileydevdzn

Posted over 1 year ago

Hi Oleg!

I looked up the cache: "no-store" parameter as you suggested, added it to fetch and it works perfectly in Firefox now. This is exactly what I needed, very helpful and well explained :)

Thank you so much for the help!

Please log in to post a comment

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