Base apparel coming soon

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  Hi, Yazdun! 👋

  Congratulations on finishing this challenge! 👏

  Glad you manage taking care of the lady image. 😂

  I notice that you have a sr-only heading one. I would suggest removing it because it's a full webpage (not a component) and also every page should only contain one h1.

  More feedback:

  • Accessibility
    • Good job on using main landmark! 👍
    • The most important content on the page is the logo, definitely not decorative, and surely not one with blank alt="" text. Without that information, how would a screen reader user or a search engine know what your site/project is called?
    • Don't use aria-required attribute when there's the native required attribute. In general, you should use the native HTML elements and attributes.
    • Well done on labeling the submit button but, there are better solutions. Use span with sr-only for the text content or even better use the alternative text of the icon as the text content for the button element. Also, there's no need to tell that it is a button. It's already a button element so the screen reader will pronounce it as a button. Currently, the screen reader will pronounce it as submit button, button.

  <button
    id="btnSubmit"
    type="submit"
    class="showcase__form--submit"
  >
    <img src="./images/icon-arrow.svg" alt="Submit" />
  </button>
  

  • Input element needs a label element. You might want to use sr-only label instead or make the label as a placeholder instead.
  • Add aria-describedby attribute to the input element and reference the error element.
  • Styling
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (by using Tab key) easily.
  • JavaScript
    • I would prefer using querySelector and referencing or selecting the element with js- classes. In my opinion, it makes your code more maintainable and readable because the js- only be used for manipulating the DOM element with JavaScript (no CSS).

  I like the custom validation that you've created, so great job! 👍

  That's it! Hope you find this useful! 😁

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  Here are some resources to learn accessibility.

  • Inclusive Components - Learn how to create an accessible components (toggle buttons, a todo list, etc).
  • Deque - List of axe 4.4 Rules - A manual accessibility checks.
  • Blog Post by Adrian Roselli - Stop Giving Control Hints to Screen Readers
  • Scott O'Hara - Blog Posts
  • Andy Bell - Piccalilli
  • Stephanie Eckles - moderncss.dev - I like the Modern CSS Upgrades To Improve Accessibility blog post. It tells you a practical guide to improve your website accessibility.
  • Checklist - The A11y Project - make sure that your webisite is accessible.
  • WAVE Web Accessibility Evaluation Tool

  I hope this helps you to learn more about accessibility!

  Marked as helpful

  0

  

  Yazdun•1,310

  @YazdunPosted almost 3 years ago

  @vanzasetia Hello Vanza, Thanks for your awesome feedback 😍

  I dived back to the challenge and fixed all the issues you mentioned, It was super helpful 👏

  And the funny thing is : I've dedicated my whole time to learn accessibility and SEO for now, I tried to make this project accessible, and also navigatable (not sure if navigatable is a word 😃) with keyboard, so the resources you provided are like a gem to me right now and I can't thank you enough for that 💎❤️‍🔥

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @Yazdun You're welcome! Glad to know it is helpful for you! 😊

  Nice project! It looks great in my view and the :focus-visible styling is clear! 👏 Is the project is going to be a real blog app? Anyway, good luck with your learning process!

  0

  

  Yazdun•1,310

  @YazdunPosted almost 3 years ago

  @vanzasetia Yes, I'm prototyping it for now, once I gain enough confidence in SEO and nextjs, I'm gonna turn it into a real blog app

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @Yazdun Awesome! Good luck with it! 👌

  0
• 

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  Hi @Yazdun !

  Well done with that one ! I particullary like the animations in intro ! I'll dig the code later, to see how you did that.

  Then, I don't know much stuff about accessibility, but I can tell you some stuffs about your background properties !

  It's a transparent .svg image, so you can add a background: linear-gradient( 135deg, hsl(0, 0%, 100%), hsl(0, 100%, 98%)) property to your body. Unfortunetely, this will remove your background-image (and alterate your animation, by the way). But that being said, I think it's better if your background: url(../../images/bg-pattern-desktop.svg) is on your .showcase container, it seems to be the purpose, on this exercice. After all, your can still keep animation on showcase__logo and showcase__wrap, to don't show there's no background behind showcase__img. Doing that, you'll be closest to the design.

  Then, I liked your error design, with transform: scale on hover, pretty interactive ! One last thing : your color property for .alert .success doesn't work for me, maybe your box shadow neither. It should be closer to the .alert background-color property. Ealier in the year, I read an ebook called Refactoring UI by Adam Wathan. Maybe you already know it, but it's simply a goldmine about UX & UI stuffs. The .pdf is really quick to read, and shows you all the good practise in UX/UI nowadays. I highly recommand it, the design vibes are close to the ones on this website !

  I hope my comment was readable, and you learned something from it ! I didn't digged into your .js file, I trust in you for this competence field..

  Have a great day, keep up the nice work mate !

  Marked as helpful

  0

  ---

  

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  @FlorianJourde Hello and well done back to yourself for such a great feedback 😁

  • So for the background issue I dived back into the challenge again, added linear-gradient to body which seems I completely forgot, but here is why we can't add background image to the showcase :

  • Here is the issue that I run into for every challenge, it seems to me that these svgs are designed to fit 1366 x 768 pixels, it looks great on devices with that screen size, but as soon as we go beyond that ( I mean wide screen monitors ), things start to fall apart, for example in this case, .showcase has max-width on it which will be fine when user is on laptop or any screen at 1366 x 768 pixels range, but when user is using a wider screen, there will be an ugly svg edge which I really hate it ! so I add these svgs to body tag to stretch on wider screens and they look kinda weird to me, and I run into this issue every time 😁 There is a messy way to kinda fix this problem, I add image to markup and give position absolute to them, Now I updated this challenge background with this method and I think it got more tolerable ! I'll appreciate it if you check it out and tell me what you think about it.

  • for animation, I've been avoiding it for a long time and finally decided to jump into it on this challenge, It's crazy how easy it is ! check ./stylesheets/abstracts/_animations.scss on the repo and you will find all intro animations there, feel free to use them on your own projects !

  • for alert issue, do you mean success alert didn't show up any text ? because I'm using javascript to render error texts and maybe that's the issue, If you can be more clear on that would be great

  • For ebook's recommendation I can't thank you enough for that I've downloaded it now, such a great suggestion 👏

  1

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @Yazdun Don't have much time to answer now, I'll do it soon ! but you're still welcome !

  0

  

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  @FlorianJourde Thats totally fine 🤝

  0

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @Yazdun Hi mate ! I finally got some time to answer to you !

  First of all, it sounds weird to me that .svg images are designed for a special size. They could be done baddly sometimes, with no height/width reference for exemple, but an svg image is vectorial, by definition. It means you can resize it as much as you want, since it's only mathematical coordinates for curves and colors. It meens that you can print it over a fifty floors building if you want (not sure about the necessity however..).

  So, your problem seems to mostly come from image proportions. Usually, when I put an image inside a div or background, I try to always keep the right ratio, and svg are usually made for that. When it's about background, I often start with backgound-size: cover property, to keep the original ratio. Then, by training on this website, I noticed how background-position property is powerful. You can even have two backgrounds and display them where you want in the same CSS property, look at this ! But it's just to give you more details ! What you did after your last commit is far more than tolerable, in my opinion !

  I'll, for sure, steal you this animation bunch of code for next purposes ! Thanks for inspiration, again !

  When I told about alert issues, it was more like a francization, a syntax error ! Don't worry, your JS is working. I mean, the color and the background-color don't "work" together, in my opinion. I took Refactoring UI as reference to say that, here is what I meant. But still, it's a tiny detail. By the way, hope you'll like the book ! It's a kind of my bible from now !

  Here it is, hope I helped you with this comment ! It's time to work on a new challenge for me now ! Talk you soon, and have fun !

  Edit : Just find out this tool, while working on a new challenge. Maybe it can help you later. I guess there's no destruction, since svg are not pixel images.

  Marked as helpful

  0

  

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  @FlorianJourde Silly me I was treating these svgs like images ! Now that I'm looking into it there so much that can be done with them, looks like I can even edit their ratio on my own ! Thank you so much this was greatly helpful, Keep it up and good luck on your new challenge 👏👏👏

  1