Skip to content
OverviewSolutions
41
Comments
4
Abhijith Muthyala
@abhijithmuthyala

All comments

  • Abhijith Muthyala•760
    @abhijithmuthyalaSubmitted over 1 year ago

    Technologies / Concepts used:

    • React:
      • State, reducers, effects, context, custom hooks.
      • Composition pattern to decrease prop-drilling.
      • Kept state close to the components that directly need it, to decrease unnecessary rerenders.
    • Tailwind- I initially started out with sass, but it quickly became a pain to handle so many different files for components and styles. I've been using some reusable classes like .align-center in the challenges done so far, so switching to tailwind felt natural. Also, no more thinking hard for a class name on a div that is used just for layout!
    • Browser API's:
      • dialogElement.showModal() and dialogElement.close(): For better accessibility, as recommended by MDN
      • window.matchMedia: To conditionally render the lightbox component.

    Ecommerce product page (React and Tailwind)

    1
    Abhijith Muthyala•760
    @abhijithmuthyalaPosted over 1 year ago

    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+.

    0
  • Abhijith Muthyala•760
    @abhijithmuthyalaPosted over 1 year ago

    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

    0
  • Zubair Adham•400
    @atmahanaSubmitted over 1 year ago

    Hello everyone!

    First of all, mainly I use Firefox for web development instead of Chrome and for this particular challenge, I did encounter a weird problem regarding API fetching on Firefox.

    Somehow on Firefox, I keep getting the same response on every request from the API. After hours of pulling hairs, I decided to test it on Chrome and somehow it does gives me different responses on every request.

    On the API doc, it is stated that Advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice. But I did tried sending request using both browser every 5 seconds and I still got the same problem on Firefox.

    Anyone here have any idea why this happens?

    Thank you in advance!

    Advice generator app

    1
    Abhijith Muthyala•760
    @abhijithmuthyalaPosted over 1 year ago

    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.

    0
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarSubmitted about 2 years ago

    Hi there, I’m Melvin and this is my solution for this challenge. 👋

    • I add a delay and a spinner during loading to prevent the user from spamming the button. Do you think the spinner is accessible enough?
    • What tips would you give me to improve the accessibility of the page?

    Any feedback on how I can improve and reduce unnecessary code is welcome!

    Thank you. :)

    Advice Generator App (SASS + JS + BEM + Mobile-first)

    2
    Abhijith Muthyala•760
    @abhijithmuthyalaPosted almost 2 years ago

    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
    0