❌

Normal view

Today β€” 9 March 2026Main stream

filter and sort ui design for products with lots of options

Im building filtering for a product with 20+ possible filters and the UI gets messy fast. Putting all filters visible makes it overwhelming, hiding them in menus makes discoverability bad, using a slide out feels clunky on desktop. Not sure what the right pattern is here. Ive been studying filter implementations on mobbin from ecommerce and marketplace apps since they deal with this problem constantly. Most use some combination of visible key filters plus a "more filters" option. Seems like the trick is identifying which 3-5 filters matter most to users. Still figuring out the exact implementation but at least I have realistic reference points now instead of inventing it from scratch.

submitted by /u/Luckypiniece to r/Frontend
[link] [comments]

Genuinely which one causes less suffering when tests break, cypress or playwright

Cypress breaking on every deploy is not a cypress problem and it never was. Tests written against class names that change every refactor, hardcoded IDs that get swapped out, selectors that have nothing to do with what the user actually sees or does, that is the root of it. Switching tools without fixing that mindset is just rearranging furniture in a burning building and the framework gets blamed every time because it is easier than admitting the whole approach was wrong from the start.

That said there are real architectural differences that matter depending on the use case. Playwright's parallel execution is genuinely better for larger suites, cypress has a better debugging experience when tests do fail. Neither solves the core problem of tests written against implementation details but one of them will waste less of your time depending on how the team writes tests and how much CI time actually costs.

submitted by /u/scrtweeb to r/Frontend
[link] [comments]

Learning Files ?

Hi everyone wondering where do u find some figma design to practice / learn since im getting used to converting a design into fully responsive web app but i couldn't find a proper source to practice Thanks ^

submitted by /u/e1lusion to r/Frontend
[link] [comments]

Do AI-generated UIs actually maintain design consistency?

Hi,

Recently, I have been experimenting with AI tools that generate UI layouts and website sections.

One thing I have been wondering about is design consistency.

AI can generate landing pages, dashboards, and components pretty quickly, but I am not sure how well it maintains consistency across things like:

  • spacing systems
  • typography hierarchy
  • component reuse
  • color systems
  • interaction patterns

Sometimes the generated layouts look good individually, but when you try to build a full product or multi-page app, the consistency starts to break.

So I am curious:

Do you think AI-generated UI can maintain real design consistency, or is it still better to rely on structured design systems and manual design?

Would love to hear what other developers/designers are experiencing.

submitted by /u/riti_rathod to r/Frontend
[link] [comments]
Before yesterdayMain stream

Thoughts on my new professional website?

Thoughts on my new professional website?

Sup everyone!

I just made a new version of my website, oriented to a more terminal-editorial type design, and a more broad communication and animations to better showcase my profile, its full of small details like self-playing minesweeper, tron and chrome dino games.

Would love to get some feedback on it!

You can enter yourself here:

https://codedgar.com/

submitted by /u/codedgar to r/Frontend
[link] [comments]

How do you convince "AI-era" devs that fundamentals of frontend development still matter?

I’m managing a few new junior hires, and they are completely addicted to "vibe coding" with v0, Bolt, and Lovable. They can prompt a beautiful Next.js frontend in minutes, but as soon as something breaks in the logic or they need a custom integration, they’re lost.

They don't want to learn the "heavy" stuff (like deep .NET or complex React state) because they think AI will always have the answer.

submitted by /u/isanjayjoshi to r/Frontend
[link] [comments]

I'm thinking of putting together a course that focuses on frontend troubleshooting and debugging.

I've been in the industry a while (back when tables were used for layout) and I've learned most of what I know through reverse engineering and breaking things/putting back together. I've always had a knack for it, and have helped a lot of developers over the years with tips and tricks I picked up along the way. I've had instances where I've found the solution in minutes that other developers were spending hours on. It's not like I was a better developer, it just seemed I had a process and mental framework whereas they would get overwhelmed on where to start.

My theory is: if developers can be more confident they can troubleshoot problems, they're less likely to feel imposter syndrome. I find I'm at my happiest when I'm being helpful and working with other developers, so I'm moving on something that I've wanted to do for over a decade and put the course together.

I'm working on content, and I'm still proving the concept out, so curious what you guys think. I want to focus on frontend workflows, although IMO, debugging skills are pretty universal.

Landing page: https://confident-coding.com/

submitted by /u/creaturefeature16 to r/Frontend
[link] [comments]

How best can i learn CSS as a backend developer who struggles with design.

Hi so I already know HTML and PHP + the Laravel framework pretty decently. My biggest issue, which is common for backend devs, is CSS. My main issue is actually design, I know the basics like selectors, colors, and some basic flexbox, that's about it. I seriously struggle with design and layout in CSS and especially struggle with forms, buttons, grid design, and cards. How best can I learn if I'm starting from here? All the basics I have pretty much nailed down, but I mostly struggle with overall design, layout, and the other stuff mentioned.

I don't want to do Codecademy or anything like this, honestly I don't like its design/layout and it's very boring to go through. I do watch Kevin Powell, he is great, but I can never really wrap my head around a lot of it. I also have big problems with nested divs and knowing what goes where. I would love to make really nice, functional websites by myself and not have to rely on paying someone to make something nice for me. I don't want to use Tailwind or other frameworks either, to be honest, I would much prefer to make my own designs so I know exactly what's what. Thank you.

submitted by /u/absolutelyWrongsir to r/Frontend
[link] [comments]

E2E testing for frontend developers, when does it actually become worth it

The standard frontend testing strategy usually ends up being unit tests for complex logic and manual testing for the UI while hoping nothing breaks in production. It works okay until it doesn't. Every attempt to add E2E tests inevitably leads to frustration over how brittle they are. A single class name change or component refactor breaks the suite, meaning the tests that are supposed to provide confidence just create more maintenance work. At what point does E2E testing actually become worth the investment for a frontend team, or is there a specific codebase size where the tradeoff starts making sense?

submitted by /u/melonPOGGER to r/Frontend
[link] [comments]

Want a best HTML tutorial for my web development journey........

Hey πŸ‘‹ everyone... currently I'm in first year of btech CSE....2 nd semester currently running, mai web development journey start Krna chahta hu for placement and freelancing ke purpose toh kya Koi muze ek aachi si.... youtube tutorial bta sakto ho .....aur sabse important baat padhta ka effective Way Kya Hai....isse pehle maine jee ka hi padhai kri Toh waha notes wagerh Banya karta tha....aur muze chize jaldi bhulane ki aadat hai aur likhne ke badh hi chize yaad rehti hai Toh muze Kuch Kuch copy me bhi. Notes banane chahiye....so My seniors... classmate... bhaiya didi Koi muze ek Aachi si youtube tutorial suggest kr do plz ?

submitted by /u/KeyInternational1552 to r/Frontend
[link] [comments]

Figma

Hi everyone

I’m new to frontend development. So far, I’ve learned HTML, CSS, and the basics of JavaScript.

I’ve heard a lot of people mention Figma, but I’m still a bit confused about what it actually is and how it’s used in frontend development.

Could someone explain its purpose and guide me on how to get started with it? I’d really appreciate the help.

Thanks

submitted by /u/Sad_Draft_4151 to r/Frontend
[link] [comments]

Do you know anything about Micro Frontends?

Hi! I'm working on my undergraduate thesis right now and I need your help(I didn't find any rules against this, so I hope it's fine). My research is about Micro Frontends and its impact on companies and development teams and I would be really happy if you guys can take a look, answer it, maybe even share with your coworkers(if they themselves use/have used micro frontends).

Anyway, here is the Link for the survey.

If that's against the rules just tell me and I delete it.

Thanks in advance!

submitted by /u/glacierthrust to r/Frontend
[link] [comments]

audited 11 sites last month. same 3 frontend problems showed up in 9 of them and none of the owners had any clue

so last year our team kept running into this wierd pattern we genuinely couldn't figure out. sites would launch fine QA done client happy and then somewhere around the 2 or 3 month mark things would just quietly start falling apart. slower underperforming nothing dramatic just off. so we decided to stop taking on new stuff and actually went back and did a proper audit across 11 sites we were actively working on. different stacks different industries totally different budgets. we honestly expected to find 11 completely different problems.

we didn't. same 3 things kept showing up. 9 out of 11 sites. images that somebody had compressed at some point but were still loading at full desktop resolution and just getting scaled down in CSS so mobile users were litterally downloading 3 to 4MB files that displayed at like 120px wide and nobody caught it because it looked completley fine visually. third party scripts sitting in the head with no async or defer anywhere and one marketing tag alone was blocking render for 700 to 900ms on 3 of the sites every single page load and had probably been doing that for over a year. and then forms with zero error state handling which honestly hit the hardest. 7 out of 11 sites if a submission failed the user just got complete silence. no message no error no nothing. fixed the error states on one site and form completions went up 23% in the first month. we'll never know how many leads just silently disappeared before that.

worst part is none of these were neglected sites. regular updates regular maintenance all the usual stuff. the issues were just never specificaly looked for so they just sat there the whole time. running perfectly fine on a decent connection in a desktop browser while quietly bleeding on mobile for real users. all frontend fixes. days not weeks no rebuilds nothing crazy. load times improved somewhere between 20 to 51% depending on the site. its just one of those things where running fine and actually healthy really arent the same thing at all and doing these audits really hammered that home for us.

whats the worst silent frontend issue youve found on a site that everyone just assumed was working fine?

submitted by /u/supreme_tech to r/Frontend
[link] [comments]
❌
❌