The latest articles on Forem by Carlos (@filoxo). https://forem.com/filoxo https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F582446%2Fb48207d3-2e9d-40a3-bf81-d3db854aed21.JPG https://forem.com/filoxo en Carlos Sun, 09 Jun 2024 07:01:34 +0000 https://forem.com/filoxo/glam-up-my-markup-beaches-1e56 https://forem.com/filoxo/glam-up-my-markup-beaches-1e56 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-05-29">Frontend Challenge v24.04.17</a>, Glam Up My Markup: Beaches</em></p> <h2> What I Built </h2> <p>i set out to build a page that felt worth sharing with a friend, neighbor, or even stranger! imagining the beach always evokes a sense of happiness and freedom for me, and i really enjoyed what i was able to build!</p> <p>(shameless plug!)<br> this month’s theme is also serendipitously aligned with <a href="https://www.travelpass.com/guides/all">Travelpass Guides</a>, a new product feature my team and i’ve been passionately exploring and developing, making this Challenge entry a natural extension to explore some creative experiences on web!</p> <h2> Demo </h2> <p><a href="https://glam-up-my-markup-11ty.pages.dev/">Online demo</a><br> <a href="https://github.com/filoxo/glam-up-my-markup-11ty/tree/attempt-1">glam-up-my-markup repo on GitHub</a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0fcz7sg4faddufy7dcpg.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0fcz7sg4faddufy7dcpg.png" alt="Screenshot of submission, details below" width="800" height="906"></a></p> <h2> Journey </h2> <p>i found that i starting having fun once i got to work on some features that i'd never implemented before. a few highlights stand out:</p> <ul> <li>technical : i started with what i thought was going to be the hardest feature - the animated background. the subtle changing colors remind me of how waves come and go out of view. the pattern comes from <a href="https://heropatterns.com/">https://heropatterns.com/</a> (CC BY 4.0). i thought i would need js for this, but using an external svg file + embedded style sheet is all this is. </li> <li>technical : i sourced most images from <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a> so as to avoid licensing issues. </li> <li>creative : i also enjoyed the extra challenge of not modifying the html at all. i created a class-less theme by composing unocss/tailwind classes together into a html-only selectors. pretty powerful!</li> <li>creative : the hover effect had a couple of iterations to figure out. i had considered hue-shifting, desaturation and blurring/glassmorphism but ultimately a simple color gradient gave me a better way to have the text over the photo. its still very imperfect though and i suspect would not pass WCAG rigor.</li> <li>creative : the border is a little reminiscent of a postcard or polariod frame</li> <li>other: the script font is called <a href="https://fonts.google.com/specimen/Seaweed+Script?query=script">seaweed script</a> 🤣</li> <li>accessibility : if you're sensitive to motion, then enabling your browsers "prefers reduced motion" will make the cards taller, preventing as much of the bg image from growing!</li> <li>todo : because the html uses non-interactive elements, i was puzzling how i could make for a more interesting mobile experience where hovering. i think it would be cool to setup an intersectionobserver that would expand the card when its title is visible. perhaps a exercise for the reader!</li> </ul> devchallenge frontendchallenge css javascript