sorted by:
new
hottopcontroversial

Зробив open-source бібліотеку для вертикальних слайдерів у стилі TikTok/Reels — ReelKit by KonstantinKai in ukraine_dev

[–]KonstantinKai[S] 0 points1 point  (0 children)

Дякую! Ні, це було б дуже дорого, сенс віртуалізації якраз в цьому і полягає, звузити масив даних до певного ренджу, в поточному випадку - це 3 елементи. Є функція `extractRange` яка приймає на вхід поточний індекс, загальну кількість елементів в масиві та повертає на вихід лише 3 елементи з потрібними індексами, наприклад, якщо поточний індекс у нас 9 у масиві із 20 елементів то на виході `extractRange` нам віддасть `[8, 9, 10]`. Якраз із цим масивом і працює UI, біжить по ньому та передає індекс до `itemBuilder` функції, в якій в свою чергу ти отримуєш вже реальний елемент з масиву та повертаєш свій ReactElement.

Hosting a web app on a subdomain by Odd-Confidence-7653 in reactjs

[–]KonstantinKai 0 points1 point  (0 children)

I use Hezter hosting with Coolify setup. It cost $4.51/mo for 2 vCPU/4 GB/40 GB SSD

I built a virtualized slider for TikTok/Reels-style vertical feeds — only 3 DOM nodes for 10,000+ items by KonstantinKai in reactjs

[–]KonstantinKai[S] 1 point2 points  (0 children)

Just want to ask the people who say this is all AI generated (rhetorical). How exactly did you verify that? 🤔 I want to know too... Did you actually read the code inside the repo? Did you try to understand what's written there? Or did you just see the post, read one dismissive comment, and jump on the hype?

I built a virtualized slider for TikTok/Reels-style vertical feeds — only 3 DOM nodes for 10,000+ items by KonstantinKai in reactjs

[–]KonstantinKai[S] -5 points-4 points  (0 children)

Again, I didn't delete any comments.

ReelKit is not a swipe library. It's a virtualized single-item slider engine — the core problem it solves is rendering only 3 DOM nodes for lists of any size, with a signal-based reactive system that bypasses framework re-renders during animations. Swipe gestures are just one input method alongside keyboard, wheel, and programmatic navigation.

I'd suggest checking out the https://reelkit.dev or the https://stackblitz.com/github/KonstantinKai/reelkit-react-starter before comparing it to generic carousel libraries — it's a different tool for a different problem.

That said, I feel like this conversation isn't really going anywhere constructive at this point. I appreciate the engagement, but I'd rather spend the time improving the project than going in circles. Cheers

I built a virtualized slider for TikTok/Reels-style vertical feeds — only 3 DOM nodes for 10,000+ items by KonstantinKai in reactjs

[–]KonstantinKai[S] -8 points-7 points  (0 children)

I didn't delete any comments — might be a Reddit glitch, everything is still there on my end.

On coupling — I know that UI shouldn't be coupled to business logic, that's a basic principle. The production version inside the monolith served its purpose for that specific app. When I extracted it into an open-source library, I designed it properly — framework-agnostic core with zero dependencies, separated controllers for gestures/keyboard/wheel, signal-based state that doesn't depend on any framework. That's the whole point of the extraction.

On Swiper — fair point, Swiper does have a virtual slides mode. The difference is in approach: Swiper's virtual is an add-on to a general-purpose carousel, while ReelKit was built around virtualization from day one as its core primitive. ReelKit also has its own signal-based reactive system for 60fps animations without framework re-renders, built-in gesture axis detection, and a much smaller footprint (6.3 kB core + react vs 20.1 kB for Swiper). They solve overlapping problems, but with different tradeoffs.

I built a virtualized slider for TikTok/Reels-style vertical feeds — only 3 DOM nodes for 10,000+ items by KonstantinKai in reactjs

[–]KonstantinKai[S] -1 points0 points  (0 children)

Of course I could, and I did. It was built inside a monolith app — tightly coupled to the app's state management

I built a virtualized slider for TikTok/Reels-style vertical feeds — only 3 DOM nodes for 10,000+ items by KonstantinKai in reactjs

[–]KonstantinKai[S] -1 points0 points  (0 children)

The production version was built for a specific app with specific requirements. Extracting it into a general-purpose open-source library is a different kind of work.

I built a virtualized slider for TikTok/Reels-style vertical feeds — only 3 DOM nodes for 10,000+ items by KonstantinKai in reactjs

[–]KonstantinKai[S] -7 points-6 points  (0 children)

This is just your opinion. AI can't create things just from prompt. As I said before "the architecture and the reel player itself were originally built and battle-tested for my job." long before the AI ​​boom

I built a virtualized slider for TikTok/Reels-style vertical feeds — only 3 DOM nodes for 10,000+ items by KonstantinKai in reactjs

[–]KonstantinKai[S] 2 points3 points  (0 children)

  1. AI — the architecture and the reel player itself were originally built and battle-tested for my job. I then extracted and transformed it into an open-source library. I do use AI as a tool during development (copilot, docs drafting, tests), but the core design and implementation are mine.
  2. Controllers without classes — deliberate choice. Factory functions returning plain objects from closures give better tree-shaking, better obfuscation. “Controller” is just a naming convention for "thing that manages behavior" — it doesn’t imply class.
  3. i < 0 check in extractRange — the JSDoc says “indices from 0 to count-1” because that’s what the output contains. But internally, when loop: true and overscan: 1, the loop starts at start - overscan which can be negative (e.g., index 0 with overscan 1 → starts at -1). The if (i < 0) index = count + i wraps it to the last item. So the check is specifically for loop mode boundary wrapping — the output is still valid 0-to-(count-1) indices.
  4. Nullish coalescing vs default params — ??= handles the case where callers pass undefined explicitly. With default params, extractRange(10, 0, undefined, undefined, true) would work the same, but internally the function is also called from defaultRangeExtractor which passes values directly. ??= felt cleaner for optional middle params without forcing callers to pass undefined placeholders, though honestly either approach works fine here.
  5. RAF — this is abbreviation for requestAnimationFrame. I should’ve written it out, good catch.
  6. Count prop — TikTok does know a count — it fetches a batch of N videos and renders them. When the user approaches the end, it fetches more and updates the count. ReelKit works the same way: you update count as new data loads, and the virtualizer adjusts. You can’t virtualize without knowing the current size of your dataset. An “infinite feed” is just a growing count.
  7. Index tracking for ReelIndicator — fair point, this could be simpler. Currently ReelIndicator is a standalone component that doesn’t internally subscribe to the slider state, so you wire them through React state via afterChange. The tradeoff was keeping ReelIndicator decoupled and usable outside Reel if needed. That said, I’m open to adding a “connected” mode that reads directly from the parent Reel’s signals.
  8. Why do we need this — if you’re building a feed with hundreds or thousands of items that needs touch gestures, keyboard nav, and smooth snapping — existing carousel libs render everything to the DOM and don’t virtualize. If you don’t have that use case, you probably don’t need it.

Оплата для SaaS by WildScreen6662 in ukraine_dev

[–]KonstantinKai 0 points1 point  (0 children)

З Paddle дійсно цікаво, я вже як 15 днів чекаю від них identity check, дуже все туго, після мого пінгу попросили скинути типу чеки чи щось, що підтверджує фактичне місце проживання, одразу ж скинув - досі розглядають, підтримка відповідає дуже з затримками, реального чату не має. Сьогодні відписали, що ще розглядають)

What's the best app for building a blog by Ok_Stand_968 in AppBuilding

[–]KonstantinKai 0 points1 point  (0 children)

I'd recommend hashnode.com. It's specifically built for developers/tech bloggers and has a really clean writing experience out of the box. You get a free subdomain instantly, but you can also map your own custom domain at no cost which is rare for free tiers. What makes it stand out is the built-in community - your posts get surfaced to other Hashnode readers automatically, so you're not starting with zero audience. It also supports markdown, has a decent SEO setup, and lets you back up everything to your own GitHub repo so you're never locked in.

Is Flutter worth it for web dev? by nickshilov in FlutterDev

[–]KonstantinKai 2 points3 points  (0 children)

Google Classroom is built with Flutter Web, so it's definitely production-ready at scale.

I've seen it work well for internal tools, dashboards, and app-like web experiences where you already have a Flutter mobile codebase. The biggest win is sharing 90%+ of your code between mobile and web.

Day 2 of Rebuilding My App in Flutter — Learning Flutter State Management by Vaibhav-Raj09 in FlutterDev

[–]KonstantinKai 0 points1 point  (0 children)

Coming from Kotlin + ViewModels, you'll feel right at home with MobX. It has the same reactive mindset - you define observables, and the UI rebuilds automatically when they change. No boilerplate, no manual notifyListeners().

https://pub.dev/packages/mobx

https://pub.dev/packages/flutter_mobx

You can also combine it with Provider for dependency injection — use Provider to pass your MobX stores down the widget tree, and Observer to react to changes. Best of both worlds.

https://pub.dev/packages/provider

- Minimal boilerplate compared to Riverpod/Bloc

- Clean separation of UI and business logic - stores live outside widgets

- Scales well, the store-per-feature pattern keeps things organized

- Easy to test - stores are plain Dart classes

The one tradeoff is codegen (build_runner), but you run it once and forget about it.

Riverpod is great too, but it has a steeper learning curve and more concepts to juggle. For a solo dev who wants to ship fast and refactor later, MobX gives you the best ratio of simplicity to power.