❌

Normal view

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]
❌