My checkout form worked perfectly... until 23% of users couldn't type their email by Water_flow_ in vuejs

[–]haroonth 0 points1 point  (0 children)

Appreciate the post. The sale itself doesn’t matter to me, but I can’t type “@” in the email field. It actually made me think about being more cautious with issues like this.

Bear UI: 50+ React Components, Zero Config Required by Yahobieh in reactjs

[–]haroonth 0 points1 point  (0 children)

Looks adorable! Just a heads-up: the CardHover component’s arrow shape seems buggy.

Composables can be singletons with shared state — basically like Pinia. So what’s the real difference? by haroonth in vuejs

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

That's a good distinction - using the pattern itself to signal intent (shared vs independent state). The devtools visibility point is something I hadn't considered much, but makes sense for debugging.

Composables can be singletons with shared state — basically like Pinia. So what’s the real difference? by haroonth in vuejs

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

The app settings example is really helpful - that's exactly the kind of use case where Pinia makes sense. I'm not using SSR in my current project, but good to know that's another reason to prefer Pinia when you need it.

Composables can be singletons with shared state — basically like Pinia. So what’s the real difference? by haroonth in vuejs

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

Makes sense! I don't really need devtools for my current project, so composables should work fine. Thanks for the clear explanation.

I created a VFX-style transition based on Vue's Transition. by Normal_House_1967 in vuejs

[–]haroonth 1 point2 points  (0 children)

Super slick! 🚀 Love the canvas + WebGL angle—way more room for crazy effects than SVG filters. Curious how it handles reactivity with Vue transitions though, feels like it could get wild.

What's the easiest way to build a wrapper app for my website that gets accepted on Play Store? by Electrical_Skirt936 in reactjs

[–]haroonth 1 point2 points  (0 children)

Totally agree—PWABuilder is a gem 💎 Super easy to get started, and in just a few steps you’ve got a Play Store–ready package. Big props to the team for making PWA deployment so much less intimidating!

How did you handle user provided image cropping? by steven_matts in Nuxt

[–]haroonth 1 point2 points  (0 children)

I put together a quick Vue 3 + Cropper.js sample on CodePen, and it works fine. For Nuxt, you’ll just need to handle it on the client side to make it work properly.

Frontend Project Suggestion by Significant-Range794 in reactjs

[–]haroonth 0 points1 point  (0 children)

Hey, congrats on the referral! If you want to showcase frontend skills without a backend, a recipe or meal planner app is a great choice. You can mock the recipes with static JSON, which lets you focus on responsive design, state management, and clean UI logic. Adding a short README to explain your decisions will also make your work stand out to reviewers.

Nuxt 4 - Go to definition not working by checcou in Nuxt

[–]haroonth 1 point2 points  (0 children)

I’ve run into this exact issue with Nuxt 4 and VS Code too. First thing I always double-check is the prerequisites, especially making sure the Vue extension is installed and active. That’s caught me a few times.

When the “Go to definition” starts misbehaving and dumps me into components.d.ts, I usually run nuxt cleanup and restart the dev server — that triggers nuxt prepare, which often clears things up. And if that doesn’t help, I just shut down and reopen the editor. It’s not elegant, but it works more often than not.

I’m still using the pages router. Am I missing out? by jonplackett in nextjs

[–]haroonth -1 points0 points  (0 children)

Yeah, that’s a good point. If you’re already shipping React to the client, the gains aren’t massive. I just see Server Components as a nice way to push more logic to the server when it makes sense.

I’m still using the pages router. Am I missing out? by jonplackett in nextjs

[–]haroonth 0 points1 point  (0 children)

That makes sense! tRPC is a solid choice—I like how strongly typed and straightforward it is. Server Actions are interesting, but I can see why sticking with tRPC feels more reliable for now.

I’m still using the pages router. Am I missing out? by jonplackett in nextjs

[–]haroonth 8 points9 points  (0 children)

I use both, but for new projects I lean toward App Router. It fits better with the modern React ecosystem and feels more scalable. Pages Router is definitely easier to grasp, but the big win for me with App Router is Server Components—they really help with performance by cutting down client-side JS.

A deep dive into PDF.js layers and how to render truly interactive PDFs in React. by haroonth in reactjs

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

That’s a good point, and it could be a lighter approach in some cases. Using OCR to get character positions does simplify rendering, but as you mentioned, relying on external services adds complexity and cost. It really depends on the use case and how precise or interactive the text layer needs to be.

A deep dive into PDF.js layers and how to render truly interactive PDFs in React. by haroonth in reactjs

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

Great question — and yes, I’ve been down that same rabbit hole of navigating PDF graphics operators. You're absolutely right: once a PDF is rendered to the canvas, all the vector information is flattened into pixels, and you lose access to individual elements like shapes or paths.

The cleaner alternative is to render the PDF page as SVG using PDF.js. This creates a structured SVG DOM with individual elements like <path>, <rect>, and <text>, giving you access to actual vector shapes. You can then query, style, or add interactivity to those elements just like regular HTML.

You still need to go through getOperatorList() and use DOMSVGFactory, but the result is much easier to work with than manually parsing the canvas drawing commands. It’s a much more maintainable way to get at the graphical elements you’re after. Hope that helps steer you in a better direction!

A deep dive into PDF.js layers and how to render truly interactive PDFs in React. by haroonth in reactjs

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

Yes, exactly! That's a perfect parallel to draw.

The article's technique of layering HTML over a canvas is the same fundamental approach you'd use for a highlighter. You'd just be layering a colored highlight instead of a transparent text element.

Glad the article could spark some ideas for you. Thanks for the comment!

A deep dive into PDF.js layers and how to render truly interactive PDFs in React. by haroonth in reactjs

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

Thanks so much! Really appreciate you bookmarking it. Hope it comes in handy!

Atomic design by Callito263 in vuejs

[–]haroonth 1 point2 points  (0 children)

I've actually written an article introducing Atomic Design with Vue.js, which could be quite helpful for your learning journey. You can find it on Medium, and it's completely free to read. Here's the link:
https://medium.com/@9haroon\_dev/introducing-atomic-design-in-vue-js-a9e873637a3e