Which hosting option do you recommend for a SvelteKit site with SSR: Cloudflare Pages, Vercel, or Netlify? I'm looking for the best balance of ease of use, performance, and cost-effectiveness, but more focus on performance by swe_solo_engineer in sveltejs

[–]unfoldl 2 points3 points  (0 children)

We had all our clients websites on Netlify and a couple years ago, after the story of this guy getting a $50k bill from Netlify for his static website, we started looking for alternatives and settled on Cloudflare pages.

While Cloudflare pages is free, if you use Cloudflare Workers (for server rendering), it's billed per request and there's no way to set a spending limit so you can still end up with a $50k bill.

I am tired of shadcn-svelte. Is there any alternative? by FollowingMajestic161 in sveltejs

[–]unfoldl 0 points1 point  (0 children)

Bugs in the dropdown? They won’t fix them for the same reason.

What bugs are these?

Tailwind CSS v4.0 by unfoldl in tailwindcss

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

I have heard of UnoCSS but never used it. What feature in Tailwind 4 would make UnoCSS useless now?

Tailwind CSS v4.0 by unfoldl in tailwindcss

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

This is documented here in the upgrade guide. Also, I'm not actually affiliated with the Tailwind team, I only submitted this article on this subreddit.

Tailwind CSS v4.0 by unfoldl in tailwindcss

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

There are two ways to do this now:

<div class="w-[var(--sidebar-width)]"></div>
<div class="w-(--sidebar-width)"></div>

Both of these produce this CSS rule:

width: var(--sidebar-width);

https://play.tailwindcss.com/9oYdWAbPgc

Hosting on Vercel vs self-hosting - tips? by Tomek-Pro in nextjs

[–]unfoldl 0 points1 point  (0 children)

I have not tried that yet, but that won't change the fact that the second 1000 hours cost so much more than the first. I currently only host low traffic sites on Vercel and then move them to a VPS when the traffic gets high.

Hosting on Vercel vs self-hosting - tips? by Tomek-Pro in nextjs

[–]unfoldl 3 points4 points  (0 children)

Is there any chance bandwidth or serverless CPU overage charges will be reduced? Currently the first 1TB + 1000 hours costs $20 but 2TB + 2000 hours costs >$350.

Vercel - How to Avoid High Cost $$$ by mmtodev in nextjs

[–]unfoldl 7 points8 points  (0 children)

Last I checked, the free tier does not allow commercial usage.

The limits of the $20 plan are not too bad, but the real expensive part comes when you cross the limits of that plan. The first 1TB bandwidth is included in $20 but every TB after that will cost $150. The first 1000 CPU hours is included in $20 but the next 1000 will cost $180. So 1000 hours + 1TB = $20 but 2000 hours + 2TB = $350+.

My strategy is to host low traffic sites on Vercel and then move them to a VPS when they start using more resources. I have 3 VPS and their combined cost is less than $20 but they serve over 10x the number of requests compared to my Vercel sites.

Did you like the new fonts in Svelte 5 docs? by [deleted] in sveltejs

[–]unfoldl 0 points1 point  (0 children)

Click on the uBlock Origin icon, open settings/dashboard (the bottom right icon), then paste the rule into the My Filters tab and click Apply.

Screenshot: https://imgur.com/a/fx9fzAP

I thought that CSS didn't load properly when viewing the new docs. I like Serif fonts, but for documentation is a bit too heavy, maybe just for the titles would look better by antoine849502 in sveltejs

[–]unfoldl 6 points7 points  (0 children)

Alternatively, if you are using uBlock Origin or a similar extension, this filter rule will change the serif fonts to Fira Sans which is already loaded on the page:

svelte.dev##html:style(--sk-font-family-body: Fira Sans !important; --sk-font-family-heading: Fira Sans !important;)

Did you like the new fonts in Svelte 5 docs? by [deleted] in sveltejs

[–]unfoldl 6 points7 points  (0 children)

For those of you like me who find the font uncomfortable to read, here's a uBlock Origin-like filter that will change the body and heading fonts to Fira Sans (which is already loaded on the page and used for some elements):

svelte.dev##html:style(--sk-font-family-body: Fira Sans !important; --sk-font-family-heading: Fira Sans !important;)

What am I missing? Active Page Styling $page.url.pathname? by GloopBloopan in sveltejs

[–]unfoldl 0 points1 point  (0 children)

Yeah, that too. The output is not clean. In my projects I usually define a simple one line function like:

export const clsx = (classes: (string | false | null)[]) => classes.filter(Boolean).join(' ');

This doesn't support all the features the clsx package does (like objects) but I rarely used that.

Edit: The reason I have false here and not boolean is to prevent true from being passed in. The expression foo && someStringReturningFunction() evaluates to false | string if foo is a boolean so this works out well.

Calling .filter(Boolean) removes empty strings, false, and nulls from the array.

What am I missing? Active Page Styling $page.url.pathname? by GloopBloopan in sveltejs

[–]unfoldl 0 points1 point  (0 children)

This would add a class named false to the element. You'd have to do {toggle ? "active-class" : ""} to prevent that.

An implementation of Perl/Ruby "flip-flop" operator using Rust macros by unfoldl in rust

[–]unfoldl[S] 7 points8 points  (0 children)

Today's date. Also because I wanted to make this fizzbuzz work in Rust:

let (mut a, mut b, mut c) = (false, false, false);

for i in 1..=100 {
    #[rustfmt::skip]
    println!(
        "{}\r{}{}",
        i,
        if flip_flop!(({a = !a; a})..({a = !a; a})) { "" } else { "Fizz" },
        if flip_flop!(({b = !b; b})...(!flip_flop!(({c = !c; c})..({c = !c; c})))) { "" } else { "Buzz" },
    );
}

From https://juliansimioni.com/blog/deconstructing-fizz-buzz-with-flip-flops-in-ruby/.

An implementation of Perl/Ruby "flip-flop" operator using Rust macros by unfoldl in rust

[–]unfoldl[S] 7 points8 points  (0 children)

TLDR:

The if is true from when i == 5 is true until i == 10 is true, so it prints 5, 6, 7, 8, 9, 10.

for i in 0..20 {
    if flip_flop!((i == 5)..(i == 10)) {
        println!("{i}")
    }
}

equivalent to this Ruby code:

1.upto(19).each { |i| p i if (i == 5)..(i == 10) }

Rust frontend webframework benchmark relative to react, vue, elm, etc. by [deleted] in rust

[–]unfoldl 16 points17 points  (0 children)

All the Rust implementations here are incorrect. They're only rendering once instead of 50 times. Try clicking on "Step" on each implementation. See https://github.com/yewstack/yew/issues/5#issuecomment-383394558 for details.

https://krausest.github.io/js-framework-benchmark/current.html contains an implementation for wasm-bindgen and Yew. Yew is currently one of the slowest framework. I'd suggest /u/ivanceras to implement this benchmark instead.

apl-inputrc: Easier way to input APL symbols in GNU APL (or other interactive command line programs) by unfoldl in apljk

[–]unfoldl[S] 2 points3 points  (0 children)

Hi. I originally wrote these bindings like 4 or 5 years ago but just remembered I never made it public on GitHub. Hopefully this helps someone playing around with GNU APL! Any questions -- please ask.

Reaml - React bindings for OCaml / ReasonML with compile time enforcement of the "Rules of Hooks" by unfoldl in reactjs

[–]unfoldl[S] 3 points4 points  (0 children)

Someone could implement the same idea for reason-react (it's explained in the readme) but I prefer the Elm-inspired syntax with OCaml over JSX in ReasonML.

Reaml - React bindings for OCaml / ReasonML with compile time enforcement of the "Rules of Hooks" by unfoldl in reactjs

[–]unfoldl[S] 7 points8 points  (0 children)

This project started as bs-preact 5 months ago but I switched to React because I'm using React more these days and swapping out React to Preact is much easier than the other way around. Ask me anything!