Improving Swipe Gesture Recognition with Velocity Calculation

Shipped a few performance improvements this week. Started from one important part: the critical rendering path. I thought: if I don’t know what blocks first paint, I'm optimizing blindly. ✅ Code splitting - Removed non-critical UI (dialogs, popovers, interaction-only components) from the initial bundle and lazy loaded them. ✅ Network requests Audited every fetch with two questions: → Does this need to happen now? → Does it need to happen this often? - Found a Stripe call firing on every popover open. The response is stable within a session → now fetched once and reused. - Replaced fixed polling with exponential backoff for async processes. Same outcome, fewer requests. ✅ Skeleton screens: They don’t make data faster, but they improve perceived performance and reduce drop-off. #webperformance #frontend #reactjs #nextjs #performance #ux #developers #softwareengineering #buildinpublic #webengineering #webdevelopment #javascript #webdev --- I post about web engineering, front-end and soft skills in development. Follow me here: Irene Tomaini

Just rebuilt my portfolio website from scratch and used it as an experiment in working more intentionally with AI. Here’s what I shipped in a single afternoon: a fully responsive portfolio built with Next.js 16 and React 19, Framer Motion for smooth micro-interactions, Tailwind CSS v4 for styling, and Radix UI primitives for accessible components. Instead of getting stuck in endless design decisions and boilerplate, I focused on the experience while letting AI help with scaffolding, refactors, and repetitive code. Along the way, I leaned into a “vibe coding” approach: start from a clear vision, move quickly in small iterations, and avoid perfectionism so ideas can get into the browser fast. The stack includes a custom cursor, preloader, scroll-based animations, a command menu, and a layout that adapts cleanly across devices. For me, this isn’t about shortcuts; it is about using AI as a practical coding partner so more time goes into the parts that matter most—content, interaction design, and how it all feels to the user. If you’re curious about how this looks in practice, you can explore the live site here https://lnkd.in/g_ybb86D #WebDevelopment #NextJS #React #AI #Frontend #Portfolio #BuildInPublic

Built and deployed a Weather Dashboard. This project fetches real-time weather data using the Fetch API and displays it with a clean, responsive UI. Features: * Search weather by city * Current location using Geolocation API * Search history with localStorage * Loading states and basic animations * Error handling for invalid inputs Tech: JavaScript, Fetch API, HTML, CSS, Vite JASIQ Labs Live: https://lnkd.in/dJR2SX2h GitHub: https://lnkd.in/dpych_QJ This helped me improve my understanding of APIs, async JavaScript, and frontend UX. Feedback is welcome. #javascript #webdevelopment #frontend #project

A dashboard I worked on became slower over time. At first, we blamed the backend. It wasn’t the backend. Here’s what was happening 👇 Problem: → UI lag after filters → Slow rendering with large datasets Root cause: → Uncontrolled re-renders → Large lists rendered fully → Expensive computations repeated What I did: → Controlled render flow → Introduced list virtualization → Optimized heavy calculations Result: → Smooth UI → Faster interactions → Better UX Insight: Performance issues are rarely one big problem. They’re small inefficiencies at scale. #ReactJS #Performance #Frontend #SoftwareEngineering #CaseStudy #JavaScript #WebDevelopment #Engineering #Optimization #FrontendDeveloper

“Most developers build navbars. I engineered one.” Most navbars just sit there. I wanted mine to adapt. So I built a transparent → glass-morphing navbar that responds to user scroll. At the top: → Fully transparent → Keeps focus on the hero section On scroll: → Smooth transition to a blurred glass effect → Improves readability without breaking immersion Sounds simple. It’s not. The real challenge was: • Maintaining visual hierarchy without layout shift • Ensuring performance (blur can be expensive) • Handling mobile behavior without breaking UX • Keeping the implementation clean and scalable What I learned: Good UI is not about adding more—it’s about removing friction. Small details like this: → Increase perceived quality → Improve user focus → Make interfaces feel alive This is the kind of frontend engineering I enjoy—where design meets behaviour. Next: pushing this further with micro-interactions and scroll-based animations. #FrontendDevelopment #ReactJS #UIUX #WebDevelopment #JavaScript #OpenSource #BuildInPublic

Can we actually build a <Popover /> component just like shadcn/ui from scratch? Yes — and it's easier than you might think. A few weeks ago, I was struggling with the usual popover headaches: - Z-index conflicts - Positioning issues inside deeply nested containers - Content getting clipped by parent elements with overflow: hidden Then I discovered (and truly understood) ReactDOM.createPortal. Here's the game-changer: By using a portal, we can render the PopoverContent outside the normal DOM tree — directly into the <body> (or a dedicated portal container). This instantly solves: - Z-index battles - Clipping and overflow problems - Complex positioning issues But I didn't stop there. I also added smart positioning logic (inspired by how shadcn + Radix UI works): → When the PopoverContent doesn't have enough space at the bottom, it automatically flips and appears on top of the trigger. → Same for left/right sides. The result? A clean, smooth UX that feels premium — exactly like shadcn/ui's popover. This small deep dive into frontend system design taught me something important: The real skill upgrade doesn't come from just copying components. It comes from understanding why they work the way they do — and then building them yourself. Portals + floating UI logic = powerful mental model for any overlay (tooltips, dropdowns, modals, etc.). Have you built your own popover or tooltip from scratch? Or are you still fighting z-index wars in your projects? 😅 Drop a comment — I'd love to hear your experience (and any tips you have!). #React #Frontend #WebDevelopment #JavaScript #SystemDesign #shadcn

Not every assessment feels like a real product build — this one did. As part of a screening proces, I worked on a Finance Tracking Dashboard designed to go beyond basic CRUD and focus on a clean, intuitive user experience. Instead of just “making it work”, I focused on: • Structured and scalable component design • Smooth interactions and modern UI patterns • Meaningful insights from transaction data TechStack: React • Tailwind CSS • Context API The goal was simple — build something that feels like an actual dashboard, not just an assignment. A great experience blending logic with design. Github Link : https://lnkd.in/dNaAS8NS #React #FrontendDevelopment #UIUX #TailwindCSS #Zorvyn #BuildInPublic

eq_ui v0.3.0 just dropped on crates.io 🦀 So I've been building a Dioxus 0.7 component library because apparently I enjoy pain and CSS gradients in equal measure. What's new in v0.3.0: EqButton — 5 variants, 3 sizes, and gradient hover transitions that actually morph colors smoothly using CSS @property. Yes, I spent an unreasonable amount of time making buttons change color nicely. You can control the gradient angle, disable the animation, override text color, or go fully solid. 21 themes, each with hand-picked default and hover palettes. The Watermelon theme literally goes from red to green. Because watermelon. EqCheckbox — Three-state checkbox (checked, unchecked, indeterminate) rendered with Phosphor Icons. No <input type="checkbox"> was harmed in the making of this component. EqGrid upgrades — Drag-and-drop row reordering with a grip handle, multi-column sorting, and CSV/JSON export. You can now move rows around, sort by everything, and export the results. Basically a spreadsheet that doesn't judge your data. 21 built-in themes — From Nord to Dracula to Egypt to Gold. Each one has its own button gradient palette because I believe buttons deserve personality. Everything follows atomic design: atoms → molecules → organisms. Fully portable, zero JavaScript, pure Rust + Tailwind CSS. cargo add eq_ui GitHub: https://lnkd.in/d2k-qXrn crates.io: https://lnkd.in/di-p9Dmk Feedback, issues, and PRs welcome. Or just tell me your favorite theme I'll take that too. #Rust #RustLang #Dioxus #OpenSource #WebDev #ComponentLibrary #UI #UX #CratesIO #Frontend #TailwindCSS #AtomicDesign #WebAssembly #WASM #RustUI #DevTools

Developers waste HOURS writing small CSS again and again… border-radius… gradients… shadows… clip-path… Same thing. Every. Single. Time. 😩 So I built something for this 👇 👉 FrontendBaba.dev A collection of simple tools to generate CSS instantly: ⚡ Gradient Generator ⚡ Box Shadow Generator ⚡ Border Radius Generator ⚡ Clip-Path Generator ⚡ Text Effects Generator ⚡ ...many more No login. No clutter. Just generate → copy → paste. Stop Googling snippets. Start building faster 🚀 🌐 frontendbaba.dev #frontend #webdevelopment #css #webdesign #developer #ui #ux #frontendtools #productivity #buildinpublic #frontendbaba

Claude Code in Action: A Frontend Nightmare? 🤖 I decided to check out Anthropic’s courses recently. First on the list was "Claude Code in Action." I figured I’d take a look - maybe they’d show something new. If you’ve used Claude even a little bit, the content is pretty much what you already know. But as a frontend developer, I couldn't help but "enjoy" the styling on the quiz page. I’ve attached a screenshot so you can share my pain. Check out this "magnificence": 1. The checkboxes on the left align according to some kind of magical rule I don't understand. 2. The radio button alignment deserves its own medal. 3. The text size in the buttons is basically a vision test. The way the styles are written under the hood is a whole different story. It’s 2026, yet we’re seeing hardcoded px and CSS selectors like this: #details-pane #details-pane-summary-content .lesson-description-content p { ... } I have a strong feeling this entire UI was generated by Claude Code itself. Thoughts? Is this the future of AI-driven web development? 😅 #Anthropic #ClaudeCode #Frontend #WebDev #CSS #CodeQuality #UX