What I like about this type of scroll snapping is that it allows me to predict how far the page will scroll whenever I press Space. Each scroll distance equals the combined heights of the visible tweets that are entirely on the screen. In other words, the partially visible tweet at the bottom of the screen will move to the top of the screen, which is precisely what I want.
However, trying to style a <meter> element to look like a star rating is …tricky at best. Not to mention that this approach won’t even work in Shadow trees (unless you include the CSS in every single shadow tree). So, I set out to create a proper web component for star ratings.
If you like math and CSS, you’ll love this one. We don’t need to use media queries to change the values of some CSS properties — font-size, padding, margin etc. — depending on the viewport width, with the CSS clamp function. But: we still need to use media queries for changing colors, borders, shadows and other CSS styles.
It’s tempting to solve any design issue by using modal windows. Especially when we have to deal with forms. After all, a lot of pain points are solved. However, sooner or later you may encounter a lot of problems. And one of the best solutions is to simple abandon using modals and use a separate page instead.
There are many ways to skin this particular cat. I’m basing this code on the idea that once people start toggling the dark/light option on the page, that they no longer want the Operating System to control it, so flipping the option in the OS then does nothing. However, I am also storing nothing, so a refresh of the page sets everything back to the OS setting as default.
A frontend developer’s job is to look at a design, interpret it, and translate it to HTML and CSS. Unfortunately, information often gets lost in translation because we rely too much on visual aspects of a design, rather than its semantic meaning. In his talk, Manuel Matuzović uncovers the invisible patterns we should recognise in a design, and how they affect accessibility.