anthony

something that’s been on my mind a lot recently is worrying too much about the future. this ranged from worrying about where I’ll be in a few years, what I’ll be doing in a few years, or who I’ll even be as a person in a few years. I’ve eventually come to the realization that nobody can predict what will happen tomorrow, or even if there will be a tomorrow, let alone what the rest of our lives will look like. so, it’s best to let go of the stress and uncertainty that’s holding you back from giving it your all to preparing for the future. you’re much better off focusing on what you can control, doing what you’re supposed to be doing, and trusting that, in time, the right opportunities will come your way.

for the love of god, stop abbreviating your variable names! not everyone will have the same level of context as you, so be descriptive as possible.

claude is an audio engineer fr

added a theme wiping animation on my portfolio with the view transitions api 👀

In CSS, there are cases where you want to dynamically style an element based on its index relative to its siblings. For instance, in this demo, we want to dynamically set each element’s 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍-𝚌𝚘𝚕𝚘𝚛 and 𝚣-𝚒𝚗𝚍𝚎𝚡 properties. Usually, you would retrieve an element’s index value through array mapping in JavaScript by destructuring it. But what if I told you there’s a way to retrieve each element’s index value with 0 JavaScript? There are two CSS functions I want to talk about in particular: 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚒𝚗𝚍𝚎𝚡() and 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚌𝚘𝚞𝚗𝚝(), which were recently marked baseline across all major browsers. 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚒𝚗𝚍𝚎𝚡() gives you the position of the current element relative to its siblings. For example, the first element would be 1, the next would be 2, and so on. 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚌𝚘𝚞𝚗𝚝() gives you the total number of sibling elements (direct children of the parent). Using these functions, you can style elements as follows (relevant styles from the video): .𝚜𝚒𝚋𝚕𝚒𝚗𝚐 { --𝚑𝚞𝚎: 𝚌𝚊𝚕𝚌(𝟸𝟶𝟶 + 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚒𝚗𝚍𝚎𝚡() * 𝟹𝟶); 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍-𝚌𝚘𝚕𝚘𝚛: 𝚑𝚜𝚕(𝚟𝚊𝚛(--𝚑𝚞𝚎, 𝟺𝟻𝚍𝚎𝚐) 𝟻𝟻% 𝟻𝟻%); 𝚣-𝚒𝚗𝚍𝚎𝚡: 𝚌𝚊𝚕𝚌(𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚌𝚘𝚞𝚗𝚝() - 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚒𝚗𝚍𝚎𝚡()); 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗: 𝚖𝚊𝚛𝚐𝚒𝚗-𝚒𝚗𝚕𝚒𝚗𝚎-𝚜𝚝𝚊𝚛𝚝 𝟸𝟶𝟶𝚖𝚜 𝚎𝚊𝚜𝚎-𝚒𝚗-𝚘𝚞𝚝; } .𝚙𝚊𝚛𝚎𝚗𝚝-𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛:𝚑𝚘𝚟𝚎𝚛 .𝚜𝚒𝚋𝚕𝚒𝚗𝚐 { 𝚖𝚊𝚛𝚐𝚒𝚗-𝚒𝚗𝚕𝚒𝚗𝚎-𝚜𝚝𝚊𝚛𝚝: -𝟶.𝟻𝚛𝚎𝚖; }

thanks for all the support! tracemark is currently at 12 users :) I plan on making QOL updates the following weeks, so stay tuned! tracemark.fun/

what the hell, rauno you always manage to teach me something new everyday 😭🙏

a lot of great design also happens to be intentional design. having relevant context/understanding of a specific product/topic is what fuels creativity -> leads to good design.

I added a new creative works section to my portfolio, showcasing some of the frontend work I’ve done in the past! it was also a good reminder of the importance of respecting user preferences, especially reduced motion by default, videos autoplay when they enter the viewport and loop without controls but for users who prefer reduced motion, videos won’t autoplay or loop, and controls are enabled so they can watch at their own pace

about a year and a half ago, I had the honor of shipping @magichourai's new landing page I've just written and posted a case study on it :) (link below: ↓)

my @IBM PR got merged 🥹 (granted it's a pretty simple one)

seeing this never fails to bring joy to my face

some more portfolio updates 👀 each preexisting craft item I had now have their own dedicated notes that you can take a look at these notes contain: - a high level explanation of how a given craft item works - any issues I encountered while making it - and how it was made (↓ link below)

hot take: PLEASE stop using margin to space items inside of a container, just use flexbox with gap

always nice to see an @infisical ad on the subway

hey man there isn't anything wrong with geist 😔

is writing vanilla css from scratch considered a flex in 2026?