Frontend Mentor | Thomas's profile

tediko• 6,580

@tediko

Submitted about 3 years ago

Hello👋!

Damn! It was really tough challenge. This was my second time i tried to finish it, this time successfully. This is few things I used while creating this project:

Used backface-visibility property. This property defines whether or not the back face of an element should be visible when facing the user. So when i rotate my cards, back of them isn't visible to the user so I can create this nice flip animation.
Added .sr-only element to announce countdown time to screen readers. Also used aria-live="polite" attribute to expose dynamic content changes in a way that can be announced by assistive technologies after every minute of countdown.
For interactive elements like socials icons i used :focus-visible pseudo class (spec). This selector indicate focus when it is helpful to the user - such as in cases where the user interacts with the page via a keyboard or some other non-pointing device.
Implement prefers-reduced-motion CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. I used it in my resets so every element with animation apply to that.
I didn't like flip animation when these "holes" on card were done with before/after elements. Instead i created svg-backgrounds for cards and this way card animation also contains these holes - I think it looks way better.
Hats off to Wes Bos, I found his countdown timer tutorial and it was really helpfull to understand how countdown should work. Even tho it was just tip of the iceberg when it comes to JS in this project i think it was very helpful to understand how countdown timer should work.

I ran into a problem with safari where my card flip was looking good both on firefox and chrome, but on safari there was a weird bug where two my animated cards was shown at once. I struggled with if for two days but turned out that I have to use backface-visibility on two rotated cards instead just on one. It seems like safari ignores my z-indexes in this case, and firefox/chrome doesn't - but working good now.

No specific questions here but any additional feedback will be appreciated!

Thanks! 😁

Countdown timer - Mobile first, Flexbox, Sass, JS, backface-visibility

Thomas• 185

@thomas-auffroy

Posted about 3 years ago

Great job !

Thomas

All comments

Responsive Landing page using: HTML5, Sass, JavaScript, Bootstrap

Countdown timer - Mobile first, Flexbox, Sass, JS, backface-visibility