Fedor

Design Engineer / Freelancing
{ stealth startup }

[Fedor @fedorivanenko_]

@wwwjim He is extremely good. Also could recommend 'What Engineers Know and How They Know It', if by any chance you're not familiar with

[Fedor @fedorivanenko_]

@wwwjim Dependency is the liability

[Fedor @fedorivanenko_]

@caidanwilliams @wwwjim Halfway through I realized it should actually be an engine, and it’s kinda harder than I thought it would be 😂

I can’t build directly on top of visx → it needs an abstraction layer, and I need a bit more time to think it through

[Fedor @fedorivanenko_]

@caidanwilliams @wwwjim I still owe you a PR for the charts for the Sacred Computer 😅

[Fedor @fedorivanenko_]

“Printing demands a humility of mind”, The Crystal Goblet, Beatrice Warde

I feel like this almost 100-year-old essay is still valid

A working instrument doesn’t need ornamentation. It can have it, but never where ornament blurs function

The clarity and elegance of a wine glass come from the pure utility of its parts. So, the elegance of the Aqua style comes from a pure need for night contrast, solved beautifully

Nowadays, with all these brilliant technologies—WebGL, 3D, animation—we risk becoming like the poor glassmaker who hides the natural color of the wine behind tinted glass

https://t.co/wyeqDeL4iB

[Fedor @fedorivanenko_]

“Printing demands a humility of mind”, The Crystal Goblet, Beatrice Warde

I feel like this almost 100-year-old essay is still valid

A working instrument doesn’t need ornamentation. It can have it, but never where ornament blurs function

The clarity and elegance of a wine glass come from the pure utility of its parts. So, the elegance of the Aqua style comes from a pure need for night contrast, solved beautifully

Nowadays, with all these brilliant technologies—WebGL, 3D, animation—we risk becoming like the poor glassmaker who hides the natural color of the wine behind tinted glass

https://t.co/wyeqDeL4iB

[Fedor @fedorivanenko_]

A bit more chart explorations

[Fedor @fedorivanenko_]

Fighting for <2s LCP on Slow-4G throttling
Currently at 2.3s (~top 5% of all websites)

Chapter: Font optimization
→ I use the gorgeous Iosevka quasi-proportional sans-serif

Default hinted TTF → 2.2 MB
Strip OpenType hintage → 1.4 MB
Strip non-Latin chars subsets → 23 KB
Compress with WOFF2→ 10 KB (!)

The font loading time is ~220 ms, which is practically non-existed

[Fedor @fedorivanenko_]

A quick Tufte-style chart exploration

[Fedor @fedorivanenko_]

Could it be that economic growth is increasingly captured by people who already exist? Primarily through accumulated wealth and extended lifespan

Long-run economic growth has stayed remarkably stable since the Industrial Revolution (~1.75% annually)

If most of the newly created economic value flows to existing individuals, rather than creating opportunity for new entrants, then producing new people becomes economically irrational

The relative cost of raising a child rises while the relative advantage of incumbents grows → that would naturally put downward pressure on birth rates

[Fedor @fedorivanenko_]

If you’re doing frontend, you have to read this

[Fedor @fedorivanenko_]

@iamsahaj_xyz Never get tired of sharing this incredible work from Joe Liccini
https://t.co/p9ffXzqLqf

[Fedor @fedorivanenko_]

@iamsahaj_xyz Never get tired of sharing this incredible work from Joe Liccini
https://t.co/p9ffXzqLqf

[Fedor @fedorivanenko_]

@AdamDraper &gt;how are we going to make bio and health better
Obviously, expressing responsibility, commitment, and care and providing clear data and an open methodology

Theranos has poisoned the industry for decades, and it’s a reasonable concern to not let it happen again

[Fedor @fedorivanenko_]

Glass Button progress

Normally you’d need 3D in JS for this, but this is pure CSS. The trick is understanding the material’s physics, how the 2D projection changes on rotation, and then recreating it

Made with mask() and transform()
Next step is proper reflections and edge highlighting

[Fedor @fedorivanenko_]

Worth checking

[Sam Selikoff @samselikoff]

Had a blast talking about Next.js 16 at React Summit yesterday!

I built a Chatbot to show off some new features in Next that help you build apps with instant page navs and snappy interactions, even for apps with dynamic personalized data.

Here's some highlights from the talk:

[Fedor @fedorivanenko_]

if you need to build an extremely performant and beautiful website with great user experience, and you need it to be built fast —

— I am open for projects as a developer+designer combo:

4+ years of dev experience, 8 years in UX.
Highly autonomous, can build end-to-end

TypeScript, React, Next.js applications + websites, CMS integration (Sanity), Shopify, AI SDK, motion and 3D in web

We'll get along if you care about experience, performance, and beauty

My rates:
daily — $400/day
per project — from $3,500
subscription — from $2,000/month

Open to full-time offers if there is a strong fit

→ DM
or [email protected]

https://t.co/fIipBccNLf

If you are not looking for help,
→ 🔃 Repost or 👍 Like to spread the word

[Fedor @fedorivanenko_]

When animating transitions between distant colors, like yellow and cyan, always use OKLAB

Cylindrical projections like OKLCH and HSL sweep through every intermediate color, which looks unnatural

OKLAB uses Cartesian coordinates, so the shortest path between two distant colors passes through a neutral gray region, which feels natural and coherent

Powered by a custom OKLCH interpolation function

[Fedor @fedorivanenko_]

@sorenblank @SebCornelius awesome!

[Fedor @fedorivanenko_]

A hover micro-interaction

Keep the whole component shifting hue together — background, border, text, shadow

That’s how real objects change color in light, and this makes the animation feel coherent

When the background warms up but the text and decoration stay neutral, you get a temperature mismatch that feels off

Powered by a custom OKLCH interpolation function