Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

TailwindCss&Gulp switcherMode&prefersColorScheme&sessionStorage

Szymon Rojekā€¢ 4,540

@SzymonRojek

Desktop design screenshot for the Social media dashboard with theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone! :D,

Finally, I can publish this challenge. I concluded thatĀ every project, even small, will teach something. First time I was working with theĀ TailwindCssĀ framework andĀ gulp.

** =>Ā Please, let me know if you have got any suggestions, especially aboutĀ HTML structure and accessibility.**

A short explanation:

  • I have chosen a button but probably the radio-button or checkbox could be a better choice (the design of it could be nicer);
  • I didn't do the border-top gradient because Tailwind doesn't have very good support with it yet (I still learn how to create different plugins);
  • manually switching the mode between light/dark (smooth transition). I want to detect if the user has requested the mode: light or darkĀ (prefers-color-scheme)Ā => in this case I have decided to work with theĀ sessionStorageĀ instead of theĀ localStorageĀ because the main goal was to come back to the user's preferences (prefers-color-scheme) which in the meantime may have changed the theme in the general settings.
  • added small animation updating the total number (the main idea is copied from the web developer but I've changed a bit it's content to get more readable code - in the meantime I want to create my version of it);
  • footer displays on preview site;
  • deploy the project toĀ Github Pages with GitHub Actions.

Thank you so much. Ps. don't forget to upvote my project if you like it.

Greetings :D

Community feedback

Al Nahianā€¢ 775

@alnahian2003

Posted

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

@SzymonRojek

Posted

Thank you Al!

I really appreciated it :D

0
P
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Posted

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

@SzymonRojek

Posted

@ApplePieGiraffe

Thank you so much,

I am happy to hear that.

Have a nice time :D

0
Szymon Rojekā€¢ 4,540

@SzymonRojek

Posted

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

P
Matt Studdertā€¢ 13,611

@mattstuddert

Posted

@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

@SzymonRojek

Posted

@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
P
Matt Studdertā€¢ 13,611

@mattstuddert

Posted

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

@SzymonRojek

Posted

This comment was deleted

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord