Victor

971 posts

Victor banner
Victor

Victor

@TheFireAndCode

Frontend dev (React & TS) | Accessibility & performance advocate | Christian | Building @paige_devmotion | AI enthusiast | Leveraging grace for impact💻✨

heavenly places शामिल हुए Nisan 2020
701 फ़ॉलोइंग131 फ़ॉलोवर्स
Victor रीट्वीट किया
Carl 💥 Creative Coding Club
Struggling to learn GSAP? Not sure where to start? Intimidated by the docs? Everyone gets a student discount on my complete GSAP course bundle for a very short time. Final stretch. Just a few left. creativecodingclub.com/bundles/creati…
Carl 💥 Creative Coding Club tweet media
English
0
1
6
241
Carl 💥 Creative Coding Club
My Free GSAP Course is now 👉 More Free 🎉 Now you can watch a bunch of videos before you even enroll! If you want to master the art of hand-coded animations I'll guide you step-by-step through the most powerful features of the GSAP API. #frontend #tutorials #webAnimation
English
3
7
31
2.3K
Robin
Robin@solarise_webdev·
Oh nice - probably "not very" ultimately 😂 Didn't know about that one, but similar principles. Looks a lot more lightweight too. Mine's primarily from experimentation with brush rendering and things like that. I'm using canvas rather than svg, so probably more potential for graphical effects, but that's a really cool little library.
English
1
0
3
380
Robin
Robin@solarise_webdev·
Since typography is the Hot New Thing right now, a perfect opportunity to repost my marker highlighter library Highlight text on websites with colourful wavy lines. Spans multiple lines! Responsive! Nice! (if you like that sort of thing) marker-highlight.solarise.dev Nothing to do with pretext (and won't actually work with pretext right now, but that'll be a relatively simple fix)
English
15
40
582
37.8K
Victor
Victor@TheFireAndCode·
@iPariola Amazing breakdown! I learnt this trick from the Piggyvest's testimonial section (on their landing page) back in the day.
English
0
0
1
147
P!
P!@iPariola·
✨ Truly Infinite Marquee 1. Setup: We render 4 identical groups side-by-side using flexbox. - We use 4 groups to ensure no empty spaces on large (4k) screens. 2. Marquee Movement: Structure shifts left by exactly the width of ONE group + its gap. - transform: translateX(calc(-100% - gap)) At 100%, Group 1 is off-screen and Group 2 is in Group 1’s starting position. - The animation loops instantly back to 0%, creating a seamless illusion because - The Group 1 and Group 2 are identical.
English
4
7
83
4K
Victor
Victor@TheFireAndCode·
@SST_dev The King in the North is baccckkkk
English
0
0
1
679
SST
SST@SST_dev·
GIF
ZXX
31
10
339
23.5K
Victor
Victor@TheFireAndCode·
@rabi_guha Basically, rendered regular text in streamdown from ai-elements and display the UI in <Render/>
English
0
0
0
17
Victor
Victor@TheFireAndCode·
@rabi_guha That's incredible! What I mean is the ability to inline Generated UI in Assistant chat messages like this. I couldn't find any directions on that except for using the "Rendered"(Which strips other text except the Generated UI)
Victor tweet media
English
1
0
0
13
Rabi Shanker Guha
Rabi Shanker Guha@rabi_guha·
Generative UI agents can now render real @shadcn/ui components. @shadcn /ui support is now live in OpenUI.
English
22
27
552
54.7K
Victor
Victor@TheFireAndCode·
@rabi_guha I've got a chat app and want the ability to allow my UI live inside my chat text responses. Something like this: chat-demo.json-render.dev is that possible with OpenUI.
English
1
0
0
46
Victor
Victor@TheFireAndCode·
Tiger Abrodi@TAbrodi

Many don't get why this is cool. I spent a lot of time optimizing web performance. It was one of the main things I did at both lovable and spawn. Here's somewhat simple and thorough explanation: The browser rendering pipeline goes: Style → Layout → Paint → Composite. Layout is the expensive step. It calculates where everything goes on the page. Positions. Sizes. Line breaks. When you read offsetHeight or getBoundingClientRect, you force the browser to run layout. If you wrote to the DOM before that read, it recalculates everything. That's reflow. A lot of layout work is text measurement. Where does this line wrap. How tall is this paragraph. How wide is this word. The browser is the only thing that can answer these questions. There's no alternative. You have to go through the DOM. This is the root cause behind a lot of performance problems people deal with daily. Virtual scrolling exists because you can't know element heights without rendering them first. CSS contain exists to tell the browser "don't recalculate layout outside this box." Batching DOM reads and writes exists because mixing them causes layout thrashing. Text measurement is a big part of all of these. It's slow and locked inside the browser. You see it in real apps too. Slack estimates message heights for virtual scrolling. When the estimate is wrong the scroll jumps. You've seen this. Google Docs recalculates every paragraph below your cursor when a line wraps. Every keystroke. This is why it gets slow on long documents. AI chat apps get janky when streaming because each new token can cause a line wrap which changes the height which causes the page to jump. Same problem every time. Need text measurements. Only way to get them is the DOM. DOM is slow. --- Over the years people have moved pieces of UI work out of the browser's layout engine. Rendering moved to Canvas and WebGL. Scrolling moved to custom implementations with transforms. Positioning moved to JavaScript-calculated coordinates. Interaction handling was always just JS. But text was the one thing you couldn't move out. You always had to go back to the DOM to ask "how does this text wrap." Every other piece had an alternative. Text didn't. --- Enter Pretext. Pure TypeScript text measurement and line wrapping. No DOM. No reflow. You give it text, a font, and a width. It returns exact line breaks, widths, heights. Just a function call. Pure math. Text measurement was the last piece of layout with no alternative outside the DOM. Now it does.

English
1
0
0
45
Victor
Victor@TheFireAndCode·
@jh3yy Genuine question: What's the fuss about pretext then?
English
1
0
0
111
Melissa Valesca
Melissa Valesca@MelValesca·
@IsaacHinman @appandflow Probably what it would be. I did share the example repo so you can go check it out and try it. It took a lot of added views before reanimated started slowing down.
English
1
0
3
1.4K
Melissa Valesca
Melissa Valesca@MelValesca·
npm i react-native-ease Reanimated is an incredible library. But react-native-ease by @appandflow is opening the door to new possibilities. Pure native animations. No JS thread. Built this particle cube with EaseView, then recreated it with Reanimated. What do you think?
English
12
39
482
40.9K
Victor
Victor@TheFireAndCode·
@Rasmic What subscription do you use?
English
0
0
0
141
Micky
Micky@Rasmic·
guys i can't stop using opencode... opencode is great
English
24
1
338
40.1K
Victor
Victor@TheFireAndCode·
@zeeg Yup. It is time to move
English
0
0
0
27
David Cramer
David Cramer@zeeg·
Guess ill move off of Vercel for (unpaid) personal projects at this point. I dont mind if people ask permission for this, and everyones free to make their own choices, but I am your funnel, not your product.
David Cramer tweet media
English
43
38
785
72.8K
Victor
Victor@TheFireAndCode·
@03balogun That's called "taste"
English
0
0
1
11
The Artist
The Artist@03balogun·
Sometimes you spend hours on work that will only be noticed for a few seconds.
English
2
0
4
143
Victor
Victor@TheFireAndCode·
@benln Amazing 🤩
English
0
0
0
60
Ben Lang
Ben Lang@benln·
Cafe Cursor in Nairobi
Ben Lang tweet mediaBen Lang tweet media
English
72
81
1.2K
77.6K
Victor
Victor@TheFireAndCode·
@cramforce Why not "best Auth"…
English
0
0
0
305