Titor

Fullstack Developer

[Titor @v_polouch]

I finally did my first CSS art ! Feel free to share your thoughts and improvements 😊
Thanks for the motivation @Prathkum 💪

https://t.co/EhKaHumVwf

[jhey ʕ•ᴥ•ʔ @jh3yy]

add to cart button interaction 🛒

jus' css + svg + await element.getAnimations()
transitioning grid-template keeps it responsive 👨‍🍳

[jhey ʕ•ᴥ•ʔ @jh3yy]

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳

[jhey ʕ•ᴥ•ʔ @jh3yy]

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 📍

[jhey ʕ•ᴥ•ʔ @jh3yy]

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)

[jhey ʕ•ᴥ•ʔ @jh3yy]

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 🥇

[jhey ʕ•ᴥ•ʔ @jh3yy]

responsive stacked tabs w/ CSS grid 👨‍🍳

+ works with keyboard navigation + drag gestures
+ container queries for orientation

[Ben Holmes @BHolmesDev]

⭐ overscroll-behavior: contain is the key to native-feeling scroll views

[Una 🇺🇦 @Una]

CSS

[jhey ʕ•ᴥ•ʔ @jh3yy]

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 🤙

[jhey ʕ•ᴥ•ʔ @jh3yy]

css animation tip

don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇

[Seb ⚛️ ThisWeekInReact.com @sebastienlorber]

TIL about timing attacks with an easy-to-understand JS example

[Una 🇺🇦 @Una]

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)

https://t.co/5FricqQlAX

[Matt Pocock @mattpocockuk]

Here's a fun TS tip:

Use a template literal string to make sure your Authorization headers are correctly formatted.

[colinhacks/zod @colinhacks]

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

[CSS by T. Afif @ChallengesCss]

Another shape made easy using the new shape() function.

https://t.co/mKiU5lF2HN

I think I just found my new favorite CSS feature. 😍

[React Native @reactnative]

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.

https://t.co/tNrnPcnSGi

[CSS by T. Afif @ChallengesCss]

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...

[Mackenzie Child @mackenziechild]

Just keep clicking until it fits your vibe.

[Adam Argyle @argyleink]

how to add 3D perspective to your view transitions?

https://t.co/yFQuevcUJF

[Aiden Bai @aidenybai]

in JavaScript, `globalThis` is `window` in the browser, and `global` in Node.js

this is useful for library code if you need to attach a value to the global object