DEV Community

loading...

Things I learnt doing a small fuzzy search UI element

zunh profile image Denis Rodionov ・1 min read

I added search functionality to Opus Classical. It was quite simple, but I learnt a few things.

Alt Text

Adding CORS to Saturn is pretty straightforward

let configureCors (builder: CorsPolicyBuilder) =
    builder
        .AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader()
    |> ignore

let app =
    application {
        // ...
        use_cors "All" configureCors
        // ...
    }
Enter fullscreen mode Exit fullscreen mode

Svelte is fantastic for this kind of thing

Choose a node, attach a Svelte component to it. Have reactivity, nice clean syntax and TypeScript.

5kb of compressed JS bundle is pretty comparable to what I would have had with Vanilla JS and hardly possible with Vue/React/Angular.

Postgres trigram is godly

Do an index:

CREATE INDEX idx
   ON composers USING gin(last_name gin_trgm_ops);
Enter fullscreen mode Exit fullscreen mode

Make super fast fuzzy search selects:

select id, last_name, similarity(last_name, 'beth') as score
from composers
where last_name % 'beth'
order by score desc
limit 5
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

Forem Open with the Forem app