Fullstack Developer
Paris, France
Joined October 2012
- Tweets651
- Following412
- Followers57
- Likes2.2K
Pinned Tweet
I finally did my first CSS art ! Feel free to share your thoughts and improvements 😊
Thanks for the motivation @Prathkum 💪
codepen.io/victorpolouchine/…
Titor retweeted
Did I mention that `flex-wrap: balance` landed in Chrome stable last month!? 👀
Titor retweeted
add to cart button interaction 🛒
jus' css + svg + await element.getAnimations()
transitioning grid-template keeps it responsive 👨🍳
Titor retweeted
messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨🍳
Titor retweeted
sidebar details 🤌
CSS auto-height transition w/ grid 🎬
li > div[inert] { grid-template-rows: 0fr; }
li > div {
grid-template-rows: 1fr;
transition: grid-template-rows .26s;
}
arrow keys for navigation 📍
Titor retweeted
cursor tracking on 3D CSS surfaces 👨🍳
inverse projection mappin' to calculate proximity in 3D space and apply an eased 0-1 value 🤙
the key: measuring the 4 corners, check the reveal 👇
(ideal for 2D canvas w/ 3D transforms)
Titor retweeted
JavaScript Tip ⭐️
Avoid setTimeout when dealing with element animations ⚠️
Use Element.getAnimations() and tap into the animation lifecycle instead of guessing 🙏 Great for unmount animations in React, etc.
Let your CSS be the source of truth 🥇
JavaScript && CSS Tip! 🎞️
Need to do something or detect when a bunch of CSS transitions/animations end? 📽️
You can use document.getAnimations() 🤙 and await the finished Promises of those animations 😎
const animations = document.getAnimations()
.map(a => a.finished)
await Promise.all(animations)
A handy but often overlooked JavaScript API 🤙
Pretty cool if you need to hook into some staggers or places where you aren't using WAAPI, etc. ✨
Take this demo. It's toggling an attribute on click. That could fire any transitions/animations defined in our CSS. We use getAnimations() to grab the animations and use a Promise so we know when they're all finished. You could even filter by the animation name, target, etc. ⚡️
Check the console out for the demo 👀
@CodePen link below! 👇
Titor retweeted
responsive stacked tabs w/ CSS grid 👨🍳
+ works with keyboard navigation + drag gestures
+ container queries for orientation
Titor retweeted
keypad w/ CSS + <img> layers 🧑🍳
.key { mask: url(keycap.png); }
.key:active img { translate: 0 20%; }
use keycap images as a mask for the container that they translate in ✨
bonus: clip-path to clip the hit area + filter to style the keys 🤙
Titor retweeted
css animation tip
don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇
Titor retweeted
Great CSS trick documented by @shadeed9 for showing conditional border radius (border radius on desktop, none on mobile)
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;
(via @argyleink at #CSSDay)
ishadeed.com/article/conditi…
Titor retweeted
Here's a fun TS tip:
Use a template literal string to make sure your Authorization headers are correctly formatted.
Titor retweeted
whoa. I just found a way to properly infer recursive types in z.object() — no casting, no z.lazy(), no scopes/registries, no special syntax.
i've been trying to do this for literally years
Titor retweeted
Another shape made easy using the new shape() function.
css-tip.com/heart/
I think I just found my new favorite CSS feature. 😍
ALT CSS code to create a heart shape
ALT A heart shape
Another shape with rounded corners using shape()!
This time it's an arrow-like box. A single-element responsive implementation easy to adjust using CSS variables.
css-tip.com/arrow-like-box/
A follow up to a post by @chriscoyier
ALT Overview of the CSS code from the provided link
ALT Arrow-like box with rounded corners
Titor retweeted
React Native 0.79 is now available!
This release includes several performance improvements. Metro is now >3x faster to cold start! Android apps will also be faster thanks to changes to JS bundle compression.
reactnative.dev/blog/2025/04…
Titor retweeted
I just wrote my first if() in CSS combined with other modern stuff.
Looks like I am programming with CSS?!! 🤓
A new article coming soon...
ALT A cool CSS code where I am using the new if() statement.
Titor retweeted
how to add 3D perspective to your view transitions?
nerdy.dev/view-transitions-3…
ALT To give View Transitions a perspective, either: ::view-transition-image-pair(--foo) { perspective: 500px; } /* or */ ::view-transition-new(--foo) { transform: perspective(500px); } Hope this finds someone well.