Skip to content
OverviewSolutions
41
Comments
4

Abhijith Muthyala

@abhijithmuthyalaIndia760 points

Aspiring frontend web developer

I’m currently learning...

Next.js App Router, React Server Components, Suspense, React Query

Latest solutions

View more solutions

Latest comments

  • Abhijith Muthyala•760
    @abhijithmuthyala

    Update: Added the experimental view transitions and just like that, the links menu, cart and lightbox all animate with a nice default fade animation! Works in chrome 111+.

  • Abhijith Muthyala•760
    @abhijithmuthyala

    I'm not sure why the design comparision doesn't match here. I'm using Polypane browser which has the design image overlay feature, and my solution matches perfectly (almost) in it.

    Design comparision in polypane browser

  • Abhijith Muthyala•760
    @abhijithmuthyala

    I can reproduce the issue, but if you keep the dev tools opened, the app somehow works as intended. Infact, when the dev tools is kept open, I got different responses even though I was clicking very fast. This is super weird indeed.

  • Abhijith Muthyala•760
    @abhijithmuthyala

    Hi, the loading spinner looks great! Few things I noticed:

    • The loading spinner keeps animating even when it is not visible, which might be unnecessary. Changing the animation declaration on .loader::before to .loader.visible::before would only animate it when it is visible.

    • While operating through keyboard (Enter / Spacebar), the focus state on the button is lost. I think it would be better to reset the focus back onto the button for better accessibility.

    • I've also been learning about accessibility, and from what I understand, setting aria-live to polite instead of assertive would be better since it doesn't interrupt what the screen reader is currently reading - More info on MDN. I used aria-live='polite' on the new advice text in my solution and the screen reader(NVDA) reads out the new advice.

    Marked as helpful