Design comparison
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
- @o-gtkvPosted 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 helpful0@rileydevdznPosted over 1 year agoHi 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!
0
Please log in to post a comment
Log in with GitHub
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