AlexLit

Front-end developer

[AlexLit @alexlit_webdev]

https://t.co/I1HP8v5DjM

[jhey ʕ•ᴥ•ʔ @jh3yy]

product spotlight cards 🔦

w/ depth map lighting + css scroll tricks

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS card parallax with pointermove + custom props 🧑‍🍳

<div class=ring style="--i: 2">
.ring {
translate: calc(var(--px) * (var(--i) * -2rem))
calc(var(--py) * (var(--i) * 2rem));
}

trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙

check it 👇

[Ryan Hart @thisdudelikesAI]

🚨 BREAKING: Google just released AI courses for free.

No prerequisites or fees required.

Here are 10 courses you don't want to miss:

[Hugo @hugorcd]

🚀 Introducing Nuppets!

Never write the same @nuxt_js code twice. A collection of carefully crafted snippets for @raycastapp that will change how you write Nuxt apps.

From components to API routes - everything you need, just a shortcut away ⚡️

https://t.co/xakeD689fX

[Zain Kahn @heykahn]

Wild that we have an AI App Store with almost 400k apps and almost nobody is talking about it

[Satya Nadella @satyanadella]

GitHub Copilot Free for VS Code has arrived.

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS container query for when an element is stuck with position: sticky 🔥

nav { container-type: scroll-state; }
@​container scroll-state(stuck: top) {
.nav__content { --expand: 1; }
}

use custom property to morph CTA into a nav bar with transitioned grid-template-columns 😎

[Mike Bespalov @bbssppllvv]

Thanos Effect? I think it’s perfect naming. All code finally available on CodePen. Snap responsibly https://t.co/76kOcrNHNV

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS placeholder shimmer effect ✨

– overlay a placeholder element
– set aria-hidden and pointer-events: none
– show when :placeholder-shown
– visually hide actual :placeholder
– use mask for the border
– background-clip for the text 🤙

Check the debug 👇🎬

[Hassan @nutlope]

Announcing https://t.co/dBo5WECbkQ!

An open source wireframe to app tool powered by Llama 3.2 vision. Upload a screenshot of a simple site/design & get code.

100% free and open source.

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS only animated exclusive accordion update 🚀

details { interpolate-size: allow-keywords; }
::details-content {
transition: content-visibility, height;
transition-behavior: allow-discrete;
}
[open]::details-content { height: auto; }
<details name=accordion>

[MadeWithVueJS @MadeWithVueJS]

.@pruvious is a free &amp; open-source CMS for your Nuxt apps by @murisceman that helps you to quickly build modular websites 📦️⚙️ - https://t.co/FlJVbBd2Jx

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Scroll-driven knockout text using SVG filter 🥊

section { filter: url(#​knockout); }
section h1 { animation: shrink; }
@​keyframes shrink { 0% { scale: 36; }}

Animate text scale on a video overlay ✅
Knock out text using SVG filter ✅
Drive with scroll ✅

[Shripal Soni @codewithshripal]

CSS Tip 💡

We can't change the color of an external SVG icon using fill/storke properties.

Here is a trick to do that using CSS mask 🤩 👇

[jhey ʕ•ᴥ•ʔ @jh3yy]

Neat piece is the responsive morph using CSS min() ✨

[popover] {
transition-property: display, width, height;
transition-behavior: allow-discrete;
width: anchor-size(width);
@​starting-style {
width: min(640px, 100vw - 2rem);
}}

[Azat S. @azat_io]

Выпустил ESLint Plugin Perfectionist v3.0.0.

Плагин сортировки импортов, объектов, TS типов, JSX и др.

В новой версии: типизация ESLint плагина, стандартизация конфигураций, новые правила, новый сайт документации и много улучшений.

https://t.co/sTM8BE6Cxt

Подробнее в треде ⬇️

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS scroll to unblur text ✨

.word {
--start: calc(var(--i) * var(--pxPerWord));
--end: calc((var(--i) + 1) * var(--pxPerWord));
animation: fx;
animation-timeline: --section;
animation-range: var(--start) var(--end);
}
@​keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

[jhey ʕ•ᴥ•ʔ @jh3yy]

Image crossfade on scroll with CSS ✨

img {
animation: fade;
animation-timeline: view();
mix-blend-mode: plus-lighter
}
img:last-of-type { animation-direction: reverse; }
@​keyframes fade { to { opacity: 0; }}

[Nikita Dubko @dark_mefody]

Эмиль Ковальски показывает, чем отличается классная анимация от обычной. Каждый пункт откликается в сердечке.

https://t.co/jh9WE1t2H5