How I made a website with Svelte • Hacker News Board

Re: How I made a website with Svelte

#71

Post by Wolfr_ » Sat, Dec 28, 2019, 6:54 PM UTC

deltron3030 wrote: post #41

I dig the simplicity, but why didn't you use Sapper? https://sapper.svelte.dev/ (Next.js/Nuxt pendant based on Svelte, can also be used as static site generator).

I used Sapper before, I quite like it.

But now I wanted to explore how one would build something like Sapper, this is why I went for base Svelte and then added a router. I now have pretty much what I used Sapper for and the setup is simpler.

Also, Sapper doesn't seem to be in active development.

Re: How I made a website with Svelte

#72

Post by Wolfr_ » Sat, Dec 28, 2019, 6:56 PM UTC

83hajfjeijg wrote: post #21

https://bestof2019.johanronsse.be just shows an empty page. (oh how far we've come - a simple best of list requires javascript)

You can find versions that support Javascript at http://bestof2018.johanronsse.be/ and http://bestof2017.johanronsse.be/ . I used a static site generator for this.

This is clearly a technology exploration.

How can I explore new technologies if I impose limits that others don't set for themselves? The job market asks for JS skills. Look at my conclusion at the bottom of my post: I state that this might be a technology downgrade instead of upgrade.

Re: How I made a website with Svelte

#73

Post by sibeliuss » Sat, Dec 28, 2019, 6:57 PM UTC

csande17 wrote: post #60

sibeliuss wrote: post #38

Earlier quoted context omitted.

Wolfr_- Just read over ygdir and wondering: We've had such phenomenal success with https://styled-system.com/ across our team that I'm wondering if your adversity to utility-first CSS might be due to misuse in some way? Utility first is largely to build primitive abstractions that expose narrow constrains for developers building UI. It's the opposite of complexity due to the fact that it reduces options. _But_ if the…

I'm not Wolfr_, and I haven't used that React-based library you link, but I have seen tailwindcss.com -- which, as far as I've heard, is one of the flagship "utility-first" CSS libraries -- used in medium-to-large scale projects. The problems I've seen with Tailwind in these projects are: - Elements end up with messy, non-semantic class name strings like "m-4 mt-0 p-3 rounded bg-blue". This makes it much harder for n…

Thank you for explaining. I think the difference between tailwind and styled-system is that the CSS-in-JS approach (while still being able to write normal CSS via styled-components) eliminates most of these issues up front in favor of a component-based approach that contains said complexity very efficiently.

Re: How I made a website with Svelte

#74

Post by Wolfr_ » Sat, Dec 28, 2019, 6:58 PM UTC

Bob312371 wrote: post #8

Loads quickly. Looks good. Nice and simple UI. Well done! If you're looking for the next challenge, consider making it render server-side.

I am still 100% confused as to how it would work it I would "enable SSR" (which Sapper would allow you to do). Would the end result be a static site then? Something to explore next year (also see the comment below about it not working at all without JS)

Re: How I made a website with Svelte

#75

Post by Wolfr_ » Sat, Dec 28, 2019, 6:59 PM UTC

diminish wrote: post #49

Does svelte have any traction recently? Any big names using it?

It did well in the State of JS, but there are no big names using it. I think it will have grow in popularity in 2020. The community is still relatively small.

Re: How I made a website with Svelte

#76

Post by hombre_fatal » Sat, Dec 28, 2019, 6:59 PM UTC

csande17 wrote: post #62

crtlaltdel wrote: post #54

Earlier quoted context omitted.

I'm not sure how it forces less logic in the render. Looking at the Svelte docs you can do this: ``` {#if invokeFunction()} This function returned a truthy value! {/if} ``` And with React do this: ``` { invokeFunction() && This function returned a truthy value } ``` and the result would be the same, a conditionally rendered string. I totally agree in the normalizing/formalizing how templates are build and the more ve…

In your first example, if invokeFunction() returns 0, the text "0" will be inserted into the page. 0 is falsey, so `0 && Hi ` evaluates to 0, but 0 is a number so React pastes it into the page contents. React has footguns like this because JavaScript expressions were not designed to be used as a templating language.

Thinking your function returns a boolean when it returns an int seems like another issue entirely, like habitually depending on implicit conversion like "==". If that's a common issue for a team, maybe it's time to look into Typescript. Seems like a very minor reason to use a whole new DSL with a whole new set of warts for all of your templating.

Re: How I made a website with Svelte

#77

Post by Wolfr_ » Sat, Dec 28, 2019, 6:59 PM UTC

oskarp wrote: post #19

Not sure if this is a problem with the website or routify but clicking on the routify link in iOS Safari makes the browser back button unusable. Nothing happens when clicking on it.

Thanks, I am going to investigate this.

Re: How I made a website with Svelte

#78

Post by Wolfr_ » Sat, Dec 28, 2019, 7:00 PM UTC

amelius wrote: post #42

How well would your setup handle larger amounts of data (say 10x, 100x, 1000x)? Would Svelte be able to handle it? What would you have to change in your design? At what point would you have to replace the entire architecture?

Here's a fun demo to look at: https://twitter.com/rich_harris/status/1200807516529147904

Re: How I made a website with Svelte

#79

Post by Wolfr_ » Sat, Dec 28, 2019, 7:00 PM UTC

indigodaddy wrote: post #48

Some nice musical choices in the top music. Big Thief produced two amazing albums in 2019. Glad to see Balthazar mentioned. They don't get nearly enough love, especially in the US. Also, to note, the ratio of quality musical bands to population in Belgium is second to none in my opinion. One of my favorite bands is Intergalactic Lovers. One of the best female lead singers around..

Thank you :)

Re: How I made a website with Svelte

#80

Post by tashoecraft » Sat, Dec 28, 2019, 7:01 PM UTC

83hajfjeijg wrote: post #32

Bob312371 wrote: post #27

Earlier quoted context omitted.

How else do you explore frameworks? Do you wait until you have some massive project with financial and time constraints and then test it out on that? This sort of site is a perfect testbed for such a framework.

No, you make a small web app. It doesn't have to be a big project, but it should be something that benefits from what the framework can deliver. This doesn't. If you're "exploring game engines" making a resume with one is probably not what you should reach for and if you're "exploring DAWs" your testbed shouldn't be generating a pure sine wave. This sort of site is the opposite of a perfect testbed for a framework. T…

Please stop, people can build whatever they want how ever they wish, especially when it’s not planned to be super public. They wish to build it in svelte, that’s all the reasoning you need.

I’ve also literally seen someone use a game engine to build a resume on here, it was super cool and attracted a lot of interest