Loopstudios - Sass, intersection observer API, mobile first

Community feedback

• 

  Phan lê thanh trường•1,070

  @truong231298Posted 8 months ago

  @tediko Your decision-making and problem-solving skills are incredible. i can't say anything beacause your code is so clean and easy to understand. moreover, you have some new ideas which i can learn more.

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  I really love this, and love the way you've thought things through.

  Only a few very minor amends to suggest really ☺

  • alt="Home page" doesnt say the name of the site / product. Maybe consider a convention like Site - page LoopStudios - Home or similar
  • I don't think you need a negative tabindex on a span(?)
  • the footer nav needs an aria label
  • I'm not sure if the see all buttons should be button elements... I would expect them to trigger navigation so would probably use anchor tags there.

  I'd need to test out how links wrapping figures and captions would be announced by a screenreader tbh, no idea about that one. It might be fine but I'm not sure.

  2

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  I just checked it with android talkback and it announces each creation 3 times

  • once for the link
  • once for the image
  • once for the caption

  So... I'm not convinced figure is a great idea for this. And maybe reduce the number of times it can be announced by hiding the image or something.

  Just some ideas: I think I would use an image (in a picture element) with an alt that describes what the image actually is OR has an empty alt attribute and is aria-hidden OR (probably most likely) I'd make those images background-images. Then Id place a link (anchor tag) around the words. I would make the container around image and link position relative, and then create a pseudo element off the anchor tag sized to 100% height and width.

  That's a technique to make a whole card clickable without wrapping multiple dom elements in an anchor tag

  Like I said, just ideas ☺

  1

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @grace-snow Thank you for feedback! On my way to change this home page alt text and footer nav aria-label. Regarding to negative tabindex. I did it to prevent showing focus state after mouse click on hamburger, but keep focus state when user is using keyboard. Read about this here stack overflow. Lead me out of error if it's wrong. As for buttons. I thought "see all" can trigger expand on gallery and show more cards so i thought button is good for that.

  Thanks again!

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @tediko on that stackoverflow there is a much better solution just above the one you've used where you use focus-visible in combination with a focus+not-focus-visible. That sounds promising to me, so I'll be trying it out tomorrow. Thanks for the link!

  1

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @grace-snow Seems like I have to re-read it! :D

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hey there, yet again, tediko! 👋

  Fantastic work on this challenge! 🙌 The sticky navigation bar is a great idea and the hover state of the cards in the "Creations" section looks great! 🤩 All of the other details (such as the "shake" animation on the social media icons and the transition of the mobile menu) are nice additions! 👍

  Of course—keep coding (and happy coding, too)! 😁

  1

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @ApplePieGiraffe Hello, APG! :) Thank you for your feedback and nice words.

  Have fun coding too! 💪

  0
• 

  Jay•695

  @JunjiequanPosted over 3 years ago

  Hi tediko,

  Your work just blown me away. Literally everything, animation, navbar transition, button hover effect, scss files architecture etc...

  Im even getting a bit of envy feelings, just by looking at your scss structure, that is exactly how I want my code look like.

  I really want to ask you how long have you been doing front end things, but I guess the answer won't help me in anyway.

  Thank you so much for positing your solution, that gave me a direction to where I should be forwarded.

  1

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @a331998513 Hello, Jay! Thank you for kind words, it really means a lot to me. Please don't make my mistakes tho and STOP comparing yourself to others. There will always be someone who will be better, faster learner etc. Everyone have own life speed and it is important to START comparing yourself to who you were yesterday! Believe me, I was there and I stopped coding for four months because I compared myself to the others, i thought my learning curve is slow and it takes all my fun from coding. Comparison is the thief of joy!

  Have a good day, and have fun coding! 💪

  1
• 

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  Hello tediko !

  Nice to hear that you found comment helpful ! 😄

  I really like all the animations you did on your solution, it looks super cool ! 🤩

  I will definitely study your code, your Sass structure looks really clean and I didn't know about Intersection Observer API.

  Have a nice day 🌞

  1

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @RayaneBengaoui Hello! Thank you for your feedback! Check Sass 7-1 Pattern to organize your Sass structure.

  Have a nice day too! 😊

  1
• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  Excellent job, tediko! 🙌 🎉

  The “slide overlay and tilt zoom” hover effect on the cards is really neat, and I see you’ve added some extra animations to the social icon hovers! 😄👍 The fixed menu bar on scroll is also a nice touch, as well as the lazy loading - I’ll have to check out that API for myself! The whole project responds beautifully. Again, great job!

  Thanks for the shoutout! 😊 I tested out reduced motion, and it seems to work perfectly. You might want to consider applying it to the hover state for the cards, or doing a simpler version for those who prefer it. It’s just a minor suggestion though, and I’m not sure it’s actually needed.

  The only other small thing I noticed is that the image in the about section seems to peek out the bottom about 1px on the horizontal/desktop version. I can’t quite figure out what’s causing it. 🤔

  1

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @brasspetals Thank you! Definitely you have to check this API. It is easy to work with and have a few options so you can create really cool things with that and it replace you a lot of code when you didn't have to check for window offsets etc :D

  Yeah i should apply this reduced motion on every animation i have, even hovers.

  I use firefox so I didn't saw this bug. I checked on chrome and somehow my box with white background was 1px off compared to firefox version.. I fixed it :)

  Thanks for your feedback! 👍

  1