5 ms·

Alright, I’m gonna be that guy. Right now, sveltekit + skeleton has absolutely blown my mind at how fast you can make a usable prototype. It’s honestly insane.

by roblh 3y ago

Alright, I’m gonna be that guy. Right now, sveltekit + skeleton has absolutely blown my mind at how fast you can make a usable prototype. It’s honestly insane. You don’t even need to know svelte, really. As long as you can understand the file based routing thing, the rest is just html unless you really need more. Especially with the tailwind stuff built right in and a mostly vanilla looking theme. I’ve tried probably a dozen different things in the last few months, ranging from Astro to Lit to NextJs to using the built in golang templating system, pug, eleventy, and more I’m forgetting. So far this is my favourite in just about every way.

zztop44 3y ago
I agree. Yes, it’s a “framework” but it easily outputs static sites that work fine without JS enabled, you don’t need to know any Svelte to use it (but it’s there if you want it), Tailwind works out of the box, and deploying it to eg Netlify is dead simple (much easier than FTP). If you ask me, it’s the best static site builder right now, and a lot simpler than what’s described in this article.
tornato7 3y ago
This is a great recommendation. I'm interested in hearing more of your experiences trying different web frameworks. Did you try Flutter as well?
- roblh 3y ago
  I haven’t tried flutter! It looks interesting, but I don’t have much interest in learning Dart so it’s pretty low on the list of things to try, for me. I have experience with Capacitor and Vue, which kind of accomplishes the same cross platform thing, although I wouldn’t really recommend it. Another one I tried was Hugo, but I also didn’t bond with it. I found Go makes it so tough to have your templates be properly reusable if you stick to only the standard library template engine.
andersrs 3y ago
SvelteKit is amazing. I disagree about Skeleton though. Skeleton makes you feel productive and safe at first but it has a lot of foot-guns. It leads you down a happy path until you don't like something and then it's difficult to customize. You're much better off using DaisyUI or something headless like MeltUI when it's ready. Take a look at Skeleton's own site https://www.skeleton.dev/docs/get-started https://www.skeleton.dev/docs/get-started Press page down - no scrolling happens. Hover your mouse over the navbar - no scrolling. Print the page - the content is cropped to only what's shown on the screen. I've raised this with them and it hasn't been a huge priority yet tones of sites are using this pattern from the <AppShell> component. Skeleton thinks you can just take your dark theme, invert the colours and end up with a decent looking light theme which just isn't the case. With DaisyUI you get a more mature/performant/popular framework that takes accessibility seriously. It's amazing what they can achieve with just CSS animations and no JS. It solves the hard part (HTML, CSS) and let's you write the easy part (Svelte). You're also less locked into Svelte - you can much easily pull your DaisyUI html into a different framework.
- Sammi 3y ago
  My wife does UX. I showed her Skeleton and she launched into listing all their UX mistakes on their website...
- roblh 3y ago
  This is good to know! I’ll try out DaisyUI next! My favourite part about skeleton has been having mostly functional, pre-existing component classes. The svelte material ui (smui?) library left a lot to be desired there, and I like how easy it is the modify the skeleton ones, since they aren’t a horrible jumbled mess of tags like all of the Vuetify components are below the surface. My least favourite part of tailwind is needing a stock button and having to add 80 characters worth of class stuff just to get a generic looking button, which is what skeleton solves for me.
  - DLA 3y ago
    Very happy DaisyUI user here. While I like tailwind, I have to agree that for simple things like buttons as mentioning above, it sure is verbose. One of the best aspects of DaisyUI is the wealth of ready-made elements that have very reasonable defaults which often need very little to no tweaking. Of course, you can adjust them as needed very easily. Since we’re on the topic let’s complete the stack: Using DaisyUI and a small GoFiber.io server running Go stdlib HTML templates, I’m able to crank out high performance web apps with minimal fuss. By using the embedding feature in the Go compiler you can ball everything up into a single deployable binary. For in-page interactivity, I like htmx and/or AlpineJS, depending on the use case. No NodeJS dependencies in sight!
8organicbits 3y ago
I'm not finding a "here's what you type and here's the final page" style example. Is there one? Id prefer not to install something and run through the steps just to see it.
- swyx 3y ago
  try the tutorial? https://learn.svelte.dev/tutorial/introducing-sveltekit https://learn.svelte.dev/tutorial/introducing-sveltekit
  - 8organicbits 3y ago
    There's a fairly high barrier for people to commit to installing a tool and building with it, especially if you haven't shown them what they'll get out. Docs look good otherwise.
    - sanitycheck 3y ago
      That tutorial has an embedded dev server running on (I think) StackBlitz, so the barrier to taking a look is actually pretty low. (Of course it doesn't work for me with my normal firefox security settings, but running it in Chrome/Chromium is easy enough.)
      - 8organicbits 3y ago
        Thanks, I'll see if I can get this to load. I was sort of hoping to see static website output. "Doesn't load" is a fairly high barrier.
wg0 3y ago
I'm a minimalist fanatic myself. I've tried astro and Sveltkit. IMHO - Sveltkit is really very minimal on top of an already very minimal component library, Svelte. With +page.ts and appropriate setting, you can even generate static website or can go MPA or SPA .

by roblh 3y ago

zztop44 3y ago

I agree. Yes, it’s a “framework” but it easily outputs static sites that work fine without JS enabled, you don’t need to know any Svelte to use it (but it’s there if you want it), Tailwind works out of the box, and deploying it to eg Netlify is dead simple (much easier than FTP). If you ask me, it’s the best static site builder right now, and a lot simpler than what’s described in this article.

tornato7 3y ago

This is a great recommendation. I'm interested in hearing more of your experiences trying different web frameworks. Did you try Flutter as well?

roblh 3y ago
I haven’t tried flutter! It looks interesting, but I don’t have much interest in learning Dart so it’s pretty low on the list of things to try, for me. I have experience with Capacitor and Vue, which kind of accomplishes the same cross platform thing, although I wouldn’t really recommend it. Another one I tried was Hugo, but I also didn’t bond with it. I found Go makes it so tough to have your templates be properly reusable if you stick to only the standard library template engine.

andersrs 3y ago

SvelteKit is amazing. I disagree about Skeleton though. Skeleton makes you feel productive and safe at first but it has a lot of foot-guns. It leads you down a happy path until you don't like something and then it's difficult to customize. You're much better off using DaisyUI or something headless like MeltUI when it's ready. Take a look at Skeleton's own site https://www.skeleton.dev/docs/get-started https://www.skeleton.dev/docs/get-started Press page down - no scrolling happens. Hover your mouse over the navbar - no scrolling. Print the page - the content is cropped to only what's shown on the screen. I've raised this with them and it hasn't been a huge priority yet tones of sites are using this pattern from the <AppShell> component. Skeleton thinks you can just take your dark theme, invert the colours and end up with a decent looking light theme which just isn't the case. With DaisyUI you get a more mature/performant/popular framework that takes accessibility seriously. It's amazing what they can achieve with just CSS animations and no JS. It solves the hard part (HTML, CSS) and let's you write the easy part (Svelte). You're also less locked into Svelte - you can much easily pull your DaisyUI html into a different framework.

Sammi 3y ago
My wife does UX. I showed her Skeleton and she launched into listing all their UX mistakes on their website...
roblh 3y ago
This is good to know! I’ll try out DaisyUI next! My favourite part about skeleton has been having mostly functional, pre-existing component classes. The svelte material ui (smui?) library left a lot to be desired there, and I like how easy it is the modify the skeleton ones, since they aren’t a horrible jumbled mess of tags like all of the Vuetify components are below the surface. My least favourite part of tailwind is needing a stock button and having to add 80 characters worth of class stuff just to get a generic looking button, which is what skeleton solves for me.
- DLA 3y ago
  Very happy DaisyUI user here. While I like tailwind, I have to agree that for simple things like buttons as mentioning above, it sure is verbose. One of the best aspects of DaisyUI is the wealth of ready-made elements that have very reasonable defaults which often need very little to no tweaking. Of course, you can adjust them as needed very easily. Since we’re on the topic let’s complete the stack: Using DaisyUI and a small GoFiber.io server running Go stdlib HTML templates, I’m able to crank out high performance web apps with minimal fuss. By using the embedding feature in the Go compiler you can ball everything up into a single deployable binary. For in-page interactivity, I like htmx and/or AlpineJS, depending on the use case. No NodeJS dependencies in sight!

8organicbits 3y ago

I'm not finding a "here's what you type and here's the final page" style example. Is there one? Id prefer not to install something and run through the steps just to see it.

swyx 3y ago
try the tutorial? https://learn.svelte.dev/tutorial/introducing-sveltekit https://learn.svelte.dev/tutorial/introducing-sveltekit
- 8organicbits 3y ago
  There's a fairly high barrier for people to commit to installing a tool and building with it, especially if you haven't shown them what they'll get out. Docs look good otherwise.
  - sanitycheck 3y ago
    That tutorial has an embedded dev server running on (I think) StackBlitz, so the barrier to taking a look is actually pretty low. (Of course it doesn't work for me with my normal firefox security settings, but running it in Chrome/Chromium is easy enough.)
    - 8organicbits 3y ago
      Thanks, I'll see if I can get this to load. I was sort of hoping to see static website output. "Doesn't load" is a fairly high barrier.

wg0 3y ago

I'm a minimalist fanatic myself. I've tried astro and Sveltkit. IMHO - Sveltkit is really very minimal on top of an already very minimal component library, Svelte. With +page.ts and appropriate setting, you can even generate static website or can go MPA or SPA .