❌

Normal view

How do u prevent users from submitting 1-word searches?

I'm tired of building complex filter UIs just for users to ignore them, type "shirt" into the search bar, get 400 results, and instantly bounce. our backend retrieval is actually really fast, but the human query formulation is awful.

Instead of writing 500 lines of custom debounced react filters to try and force them into categories, I'm looking at intercepting the keystrokes with an intent layer on the frontend. basically an ai-autocomplete that formats their vague text into a structured JSON payload before it ever hits the API.

Has anyone used frontend intent layers to fix vague search? looking at commandbar vs just dropping in a lighter ai-autocomplete hook.

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

DateRangePicker - marking second field as invalid

Hey. Currently working on a DateRangePicker and need your opinions. Do you think the second-date-invalidity I show currently by making the second selection-cell red with an icon is good or do you think i should just mark all invalid fields as disabled after the first date is selected?

https://imgur.com/a/qCd7KQk

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

Google l4 Frontend SWE Role

I have been reached out for the Frontend SWE l4 role at Google, can someone share with me what kind of questions to expect in the frontend interview also where to prepare it from, i have worked on frontend but I dont think i know it in depth specially now when most of the work is AI led, so any resources to prepare would be helpful. Also there is supposed to be 2 dsa rounds later afaik, does anyone know what level of questions to expect in that. Also how long do you think they provide to prepare for these, i dont want to take too long but i also dont want to be underprepared. I have searched alot regarding Frontend l4 interviews at Google but i didnt really find much data, so if anyone can help that would be great.

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

How much of your frontend work is now reviewing AI output instead of writing the components yourself?

Feels like well over half my week now is reading through components and styles a model generated and deciding what to keep. Reviewing's a real skill, fine, but the tooling is rough, I'm scanning a wall of JSX and CSS trying to spot what changed, with no clean way to accept this chunk and throw out that one. Is anyone on a review loop that feels like a real diff for generated UI, or are you all just eyeballing the whole component every time?

submitted by /u/ACM-Webdesign to r/Frontend
[link] [comments]

It took me a few months of late nights to build Cashvelope. Here’s what I learned about self-hosting, privacy, and building a finance app completely alone.

Building Cashvelope was a massive personal challenge. I wanted a true envelope budgeting app that put data control back in the user's hands.

Working on this late at night after my main work hours meant dealing with severe burnout, redesigning local data structures three times, and fighting through backend edge cases solo. Building a app end-to-end alone is a completely different beast than writing code for a client.

To fellow devs who built and released your own side projects:

How do you balance feature scope creep with actually getting the app across the finish line?

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

question to understand the logic behind using CSS

hi! I didn't think I'll need that in my life, but I very need to know how to use CSS properly. I mean what are the differences between one thing and another, what's more popular to use etc. So, I'm trying to relearn CSS.

For the context: I learned CSS in 2022 only to pass the exams and that's all, and then I was like "yahoo! I won't return to the web design ever again!". So, I can use the atributes with classes, id etc, but I can't understand what are the important things to properly use them. I didn't think I'll need to program projects related to web programming. I find JS and PHP quite easily to understand, bcz every thing has one meaning there. It was a bit hard to understand HTML for the first time, bcz I thought every tag has its own function, but when I understood that plenty of tags are semantical and I can just use <div> and <span> if I want, I started to use the semantical tags properly. CSS is the hardest part in Front-End for me, bcz Idk if plenty of things are similar to the HTML ones(an atribute is optional and it depends on you if you want/need to use that) or the programming languages(1 thing = 1 meaning).

Here are my questions about CSS to understand it better:

  1. which position is the best? Bcz usually I used "position: absolute";
  2. why to use the coordinates(except for the z-index) if you have the margins?;
  3. why a lot of web developers prefer to use the paths from a vector image instead of uploading the .svg file itself?;
  4. what to use: the standard shadow or something like "filter: drop-shadow(10pt 10pt 6pt);"?;
  5. I liked the grid, but I saw a lot of developers use flexbox. Is it important to choose one thing over another or is it something optional?;
  6. are the CSS similar, but different atributes important only for the browsers?;
  7. what's the point in making something like "p.name1 {}", when I could just create a new class?;

I hope I didn't forget anything, but if I did, I'll make a new post about them

Edit: I can't change the title, but I meant questionS*

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

past 20 devs our release QA cost just exploded

we went from a small team to 20+ and release QA scaled worst. more devs shipping more Al-generated code meant more flows to re-verify before each release. it ate real hours. my weekends too. adding people didn't help. the verify work grew faster than the team.

we put the verify step inside the agent loop using testsprite CLI. the agent runs a real session against the live app. when something breaks it gets a failure bundle it can act on and rerun. cloud account was a mild pain to sort out. passing checks pile up into a suite that sticks around so coverage builds as we ship.

people still own the judgment calls and the fuzzy edge cases. moving the routine verify work into the loop stopped release QA from tracking headcount. how are other founders keeping QA cost flat while the team grows?

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

SvGrid: a Svelte native data grid, MIT, plus the UI components that grew out of it

SvGrid: a Svelte native data grid, MIT, plus the UI components that grew out of it

We've been heads-down on SvGrid for a while and it's finally at the point where we want it in front of people who actually ship Svelte apps.

It's written for Svelte 5 directly. Runes, no wrapper around a framework-agnostic core, no adapter layer. That was the whole reason to start.

<script lang="ts"> import { SvGrid, type GridColumns } from '@svgrid/grid' type Person = { firstName: string; age: number; status: string } const data: Person[] = [ { firstName: 'Ada', age: 36, status: 'active' }, { firstName: 'Linus', age: 54, status: 'active' }, ] const columns: GridColumns<Person> = [ { field: 'firstName', header: 'First name' }, { field: 'age', header: 'Age' }, { field: 'status', header: 'Status' }, ] </script> <SvGrid {data} {columns} sortable filterable editable /> 

Every capability is off by default, so a bare <SvGrid {data} {columns} /> is a plain read-only table and you opt into the rest one word at a time.

Underneath: virtualized both directions so a million rows scrolls fine, Excel-style filter menus, inline editing, grouping with aggregation, tree data, pivot, and a server-side row model that pushes sort/filter/group down to your backend instead of pretending your dataset fits in memory. SSR renders the header plus a viewport window of rows.

About 2 KB gzipped for the headless core, 77 KB for the full render component, 9 KB CSS.

The part we didn't plan. A grid needs cell editors. Cell editors need date pickers, comboboxes, tag inputs. Those need a popover layer and focus management. We looked up and had 84 components.

You can poke at any of them without making a project first:

npx @svgrid/ui try calendar 

That caches a tiny Vite sandbox and opens your browser, with a theme picker so you can see it in whatever you're actually using. add writes the starter file into your app instead of the sandbox.

Licensing, since it always comes up. The grid, the UI components, the web component build and the MCP server are MIT with nothing gated. No license key, no watermark, no row cap, no console nag. We charge for Excel/PDF export, Excel import, print, and the Kanban and scheduler renderers. OSS projects get those free, just send us a repo URL.

Where it's weak. The grid has been in production a while. The UI components are much newer and haven't been beaten on anywhere near as hard. If you find something broken we'd rather hear about it than not.

Context on us: we're the jQWidgets team and we've been shipping UI components since 2011. This is the first thing we've built Svelte-first rather than framework-agnostic, and that bet is what I'd most like opinions on. Going deep on one framework buys you a much smaller API, but you'll never see us in a React thread.

Two things I'd take from this thread:

  1. https://svgrid.com/demos is 373 demos with source on every one, which is honestly the fastest way to work out whether it's any good. Break one and tell me which.
  2. What's the grid feature you keep hand-rolling because nothing ships it properly? That list is how we pick what's next.
  3. MCP Server

https://i.redd.it/bni8lzz54xmh1.gif

Repo: github.com/sv-grid/sv-grid

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

Accessibility is and should be an absolute requirement everywhere

Accessibility is and should be an absolute requirement everywhere

The UI stays unobtrusive while we treat accessibility as non-negotiable. There is no bail-out, because we believe that software should be available to everyone. There has been done a lot of work in fully supporting WCAG 2.2, and I'm really proud of the result.

The grid is now one of the most performant, most accessible enterprise type DOM based grids on the planet, supporting a ton of opt-in features, and it's MIT licensed.

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

Changing to flexbox

Hello, so im going over an old website I made back when I first started developing, and silly me decided to build the entire thing with "position: relative, right: -233px" 😭

Am I going to have to redo the entire site CSS to flexbox so it doesnt move about on different screen sizes, or is there an easier way to save this site?

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