Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How I made a website with Svelte

johanronsse.be

Post reply on HN
Print view View original

51–60 of 130 posts

Re: How I made a website with Svelte

#51

Post by spectramax »

cytzol wrote: post #20

> What I like about these foundries is that they have permissive licenses that are just a one-time purchase. When I make a website I don’t want to worry about the font licensing for years. I love the work of professional typographers, but tend to stay away from commercial Web fonts, because they like to include very restrictive terms in the font licences. For example, you're only allowed to back up Klim fonts once, w…

I really appreciate the amount of work that goes into making a font. On one hand, these typographers and their foundries are starving for revenue and on the other hand they make the customer's professional life incredibly difficult with the retrictions that you mention.

Most small foundries have been bought out by Monotype and their licensing is now 100% subscription only. I was lucky to have purchased Univers and a couple of other fonts under their "Creative" license which bundled everything under a reasonable price.

Font foundries - listen up, if you want people to pay for your fonts, make the licensing model straight up simple - download fonts and off you go. Turns out that most people that are willing to pay for your font arent the ones trying to pirate them. Stop fucking them over.

Re: How I made a website with Svelte

#53

Post by [deleted] »

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…

[deleted]

Re: How I made a website with Svelte

#54

Post by crtlaltdel »

BiteCode_dev wrote: post #47
crtlaltdel wrote: post #43

Svelte looks interesting, however I must say that when I saw stuff like `{#if value} stuff {/if}` it really was a turn off for me. One thing I really like about React is the lack of template logic like that. This was something I never cared for in Angular 1 either. I am sure that there are many advantages to it...its just never really resonated with me. Can anyone point to material that could help me understand the v…

It normalizes the way templates are coded and forces people to put minimal logic in their rendering. In react, there are as many ways to do the same things as there are coders. And of course, some don't follow best practices and will put logic code in it. Personnally I also find it easier to picture the resulting DOM structure because the stylee is forced to be declarative. Too often in react I have to look around a…

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 verbose syntax in the Svelete example does make it super obvious. The in-line React example is obvious to me...but maybe that's because I've been writing js for so long.

Where I feel the cognitive overhead pain in looping. Svelete's docs say:

``` {#each collection as { vars }, i} {vars}

{#/each}

```

For some reason, when I see this it rubs me the wrong way. I understand it...but my instinct is to just map over the collection like I would in a plain-old Node.js project.

``` { collection.map((vars, i) => {vars}

} ```

I guess that saving a handful of keystrokes in exchange for super clearly expressing the intent may be a good tradeoff, even if my inclination is towards more terse code.

Re: How I made a website with Svelte

#55

Post by sansnomme »

erokar wrote: post #28
paulddraper wrote: post #10

https://svelte.dev/ > Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. > Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes. That sounds like a…

Simplicity. You can achieve the same in Svelte using fewer concepts and a smaller API. Angular is over-engineered, Svelte is not.

Specifically Svelte is a lot shorter and concise without the Spring-style infamous enterprise software boilerplate that plagues angular.

https://dev.to/maurogarcia_19/angular-vs-svelte-card-compone...

In addition, its reactive variables is a lot easier to use.

Re: How I made a website with Svelte

#56

Post by pakpoi »

sergiotapia wrote: post #50

Tried Svelte and it seemed really concise and fun to work on, however I really miss being able to format on save with Prettier in React. Is there an auto formatter that makes my code shift around and have one-true-style? This is a most for any long lived project as it avoid all bikeshedding discussions about style. We use Prettier for JS, and mix format for Elixir, at work.

There is a plugin for prettier[1] and for eslint[2]. Both work reasonably well. I hear there is good support for VSCode, but I haven't tried.

[1] https://github.com/UnwrittenFun/prettier-plugin-svelte [2] https://github.com/sveltejs/eslint-plugin-svelte3

Re: How I made a website with Svelte

#57

Post by ricardobeat »

IggleSniggle wrote: post #37
Wolfr_ wrote: post #12

Earlier quoted context omitted.

The difference is that Svelte is pre-compiled while Angular will put templates through the renderer while building up the page.

Angular has been pre-compiled for years. The AOT compiler has been available since Angular 2, released in 2015. It has also been able to produce stand-alone native web-components since 2018, btw. It's only recently that it started producing multiple packages simultaneously, however (to serve up a package optimized for the client's web platform).

Most modern frameworks can be AOT compiled in that sense - React, Vue, Riot - they load JS code only at runtime, but still use templates (VDOM, strings or another representation) as blueprints to update/manipulate the DOM. AFAIK Angular still uses dirty checking; Angular Ivy, yet to be released, will move to something a little closer (incremental-dom), but still not the same.

What Svelte does is precompile the UI update code[1], changing text nodes, attributes, children, targeting DOM nodes directly. Think Prepack[2] vs DOM diffing.

[1] https://svelte.dev/repl/hello-world?version=3.16.7

[2] https://prepack.io/

Re: How I made a website with Svelte

#58

Post by dominotw »

reaperducer wrote: post #25

I'm afraid I honestly don't understand. What was the reason for using a bunch of frameworks and JavaScript for what appears to be a super simple web site? I don't see anything that couldn't have been done in plain static HTML and CSS. Is there some functionality on the pages that I'm missing?

same reason "hello world" examples for languages exist.

Re: How I made a website with Svelte

#59

Post by nlh »

Wolfr_ wrote: post #2

Every year I make an end of year project where I try some new technology. This year I made my project with Svelte. It's a list of the best albums, films, series etc. according to me.

This is great - thank you!

One request: I read your gaming section eagerly and all the games you mentioned look super cool, but would you mind adding some links / details about each of them? I’m still not sure exactly which racing sim you’re talking about and the other screen shots look super cool but I had to google each game to figure out what the deal was. Not a huge deal but a small suggestion.

Otherwise - thanks! Excellent work.

Re: How I made a website with Svelte

#60

Post by csande17 »

sibeliuss wrote: post #38
flanbiscuit wrote: post #24

Earlier quoted context omitted.

Nice write-up. I followed the link to the css framework you used/developed, Ygdir, and I am not sure I understand it. Is the website a work in progress? Feel like it needs to explain with more details and examples what you mean by "convention-first". I agree what you said about utility first css but I'm not sure what makes Ygdir better https://ygdir.dev/

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 non-technical teams to use out-of-the-box SaaS solutions for things like interaction tracking and A/B testing. (These apps often use element class names under the hood, so if you use Tailwind and change a CTA from rounded to very-rounded, the marketing guy will discover two weeks later that all his click-through metrics are wrong.)

- References to the utility classes wind up scattered in thousands of unrelated places in the codebase, making refactoring and changes to the CSS impossible. Like, if you ever wanted to remove the p-3 class (or change how much padding it represented), it would be almost impossible: you'd have to individually find and test/change all 9000 use sites, a task which is made even more difficult when developers write things like class={`p-${first ? 4 : 3}`}. At least one website I know is stuck on Tailwind 0.x pretty much indefinitely for this reason.

- Whenever you add a new color or padding amount or anything, you pay the full cost of generating all the variations (p-7, pt-7, bigscreen:pt-7, etc) up front in a CSS file that needs to be loaded before anything on the page can be rendered. (Sure, Tailwind might not generate 50K of variants when you add a padding value out-of-the-box, but once you've set those options it's impossible to un-set them because of the above point.)

This eventually leads to a codebase where no one wants to add, remove, or change CSS classes for fear of breaking something unrelated or destroying performance. In other words, it makes your CSS impossible to maintain.

Post reply on HN