TailwindCss&Gulp switcherMode&prefersColorScheme&sessionStorage

Community feedback

• 

  Al Nahian•775

  @alnahian2003Posted almost 4 years ago

  Great Job! Dear, Szymon Rojek

  You did excellent and brilliant work on completing this challenge. I'm really glad to see your project and I already checked every functionality that you've implemented in this project and I also inspected your code.

  Here is my honest feedback:-

  • I really loved the Counter Animation on the numbers of the dashboard.

  • When I was checking your JS Source code, I've found that you have added a mindblowing functionality to Auto Detect the User's Device Default Theme which is really super cool! Hats off to you for this great idea!!!

  • I actually liked the interaction with Session Storage in this project. You did this thing in a very clever way.

  • Finally, I liked the Responsiveness of the entire project on any viewport.

  That's all.

  Happy Coding, mate!

  3

  ---

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Thank you Al!

  I really appreciated it :D

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, Szymon Rojek! 👋

  Nice to see you complete another challenge! 😀 Good job on this one! 👏

  Like alnahian2003 mentioned, the counter animation you added to the "Total followers" count is pretty awesome! I like the smooth transition between light/dark modes of the page (and deciding to take the user's system preferences into account was such a thoughtful idea)! 👍

  Keep coding (and happy coding, too)! 😁

  2

  ---

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @ApplePieGiraffe

  Thank you so much,

  I am happy to hear that.

  Have a nice time :D

  0
• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Matt,

  I am very glad to get a factual comment from you :D

  1. According to the first point: I did it before and I removed it, what's a pity. Anyway, I have added sr class so the screen reader will read Facebook, then will read Page Views. Now I will remove the alt, just leave it empty so will be ignored by assistive technologies, such as screen readers.

  2. about toggle: I'd like to say something about my short experience with the Tailwindcss: I did enjoy. It is very easy to learn from scratch but it takes time to achieve new naming, classes, shorthands etc. I don't know very well this framework so for me was a bit difficult to create this toggle from scratch. It will cost me so much effort. That's a reason why I have decided to use a button and focus on its accessibility. For example, I don't know yet how to work with pseudo-elements using this frame - after, before are very important during a building process of the toggle. Another point => plugins. It takes time to learn but I will come back from time to time to the Tailwind. From the other hand, I feel that I have to stick do CSS for a while and get better skills (framework can wait).

  3. I've added additional div, which contains followers and numbers (reversed). It will be like this below (I removed the classes just to have readable code for you):

       <article class="flex flex-col justify-center items-center ">
                 <a href="#" aria-label="Go to Facebook">
                    <img src="./img/iconfinder-fb.svg" alt="Facebook">
                    @szymon
                </a>
                <div class="flex flex-col-reverse justify-center items-center">
                  <p>
                    Followers
                  </p>
                  <span>
                    1981
                  </span>
                </div>
      
  </article>
  

  Can I change paragraph followers to h3?

  According to the 1 point, what's about the top of this article above with the anchor and img inside. There is aria-label pointing to the Twitter so we can remove the alt text - now, what's about the img? In my opinion it has stay inside of the link because after img there is text "@szymon", which is inline together with the img icon => perchance, instead of it I can create another div and add flex-row, but is it necessary?

  I'm immensely grateful to you. Thanks.

  1

  ---

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  @SzymonRojek no problem! Here are my answers:

  1. I'd recommend removing the anchor tag, as you wouldn't necessarily expect it to be clickable if this was a dashboard showing stats.
  2. That's fair enough about the toggle!
  3. Yeah, I'd change the paragraph to a h3 so that it's a heading for that component. The anchor tag completely depends on whether or not it would be a clickable link if this were a real dashboard. I'd probably say it wouldn't be, so I'd remove the anchor tag and set the alt attribute to be black. I'd then add some more sr-only text to read out "Facebook Followers 1981" on screen readers.

  I hope that's clear enough!

  1

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @mattstuddert

  Thank you Matt. I did, it was a good idea to remove these links. Sometimes I tend to add unnecessary stuff but I am glad to get hints from experienced developers.

  Greetings :D

  0
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  Hey Szymon,

  Great work on this challenge! How do you like working with Tailwind? It's something I've not dived into yet, but I'm definitely interested in giving it a go!

  Your solution looks great and functions really well. Here are some thoughts after taking a look at your code:

  • It's great to see you add sr-only classes so that screen reader software would add the name of the relevant social media channel, like "Facebook Page Views", for example. Because you've added this, I'd remove the alt text in the Facebook image icon and remove the anchor tag that wraps the icon. The icon shows which social media channel each stats card is for, but if you're adding the sr-only class with additional text, you don't need the extra context on the icon.
  • I'd recommend trying to re-create the dark/light theme toggle based on the design. It will be a good exercise to go through. I'd personally go with the checkbox approach, but others may have different opinions.
  • In the top row of cards, you've put the numbers as headings and the followers/subscribers text as paragraphs. I'd say the followers/subscribers text should be defined as headings and I'd use span elements for the numbers, as I also wouldn't class them as paragraphs. To get screen readers to read out the content as "Followers 1981", to match the heading/content flow, you could switch their order in the HTML and then use flex-direction: column-reverse; to flip them to look like the design.

  I hope that helps. Let me know if you have any questions!

  1
• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  This comment was deleted almost 4 years ago

  1