13 ms·

How I made a website with Svelte

243 points by Wolfr_ 7y ago

Wolfr_ 7y ago
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.
- flanbiscuit 7y ago
  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/ https://ygdir.dev/
  - sibeliuss 7y ago
    Wolfr_- Just read over ygdir and wondering: We've had such phenomenal success with https://styled-system.com/ 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 utils are incorrectly spread all across your codebase and not constrained to primitives then indeed it could be a mess.
    - csande17 7y ago
      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.
      - Wolfr_ 7y ago
        Pretty much this, utility-first leads to unmaintainable codebases, I try to explain why I want to change this with a combination of conventions on this page: https://ygdir.dev/rationale https://ygdir.dev/rationale
      - sibeliuss 7y ago
        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.
      - vosper 7y ago
        > - 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.) IMO the problem here is tools trying to use CSS for something it’s not designed for. They advertise themselves as not requiring technical knowledge to use, but they’re selling a lie. Unless the marketing guy understands the structure of the site and the CSS there’s no way for him to be sure he’s tracking the thing he thinks he’s tracking - unless you’re instrumenting the CSS to help him out, and are committed to not doing anything that would break one of his selectors (or change its meaning, or reuse it for something else - and are you sure you know all the selectors he’s using, and that the automatic selectors the tool is creating are actually doing what he intends?). Data attributes are probably the solution here, then CSS can be reserved for its intended use: controlling styles. But then the tooling needs a way to target those attributes automatically, otherwise you’ve “broken” the “no technical knowledge required” sell of the software they already licensed (without asking you for input...)
      - kingdomcome50 7y ago
        I prefer non-semantic class names (“messy” is up for debate). I find it much easier to reason about the markup when I can see exactly how each element is styled right there _with_ the element. Not only does semantic naming add a layer of indirection, I have have never found it to be as “clean” as you are insinuating. I can’t count the number of times I’ve found myself having to invent names for elements, containers, etc. just so I can apply a style when it would have been much easier to just “style=whatever”. All the naming conventions in the world don’t solve this: is it list-item__header or list__item-header? Who cares? I don’t find your arguments about maintenance very compelling either. If you want an element with “p-3” to have more padding, just... change it to “p-4”. That’s the whole point! You don’t have to wrangle with the _semantics_ of the element. You style it exactly as you want. It’s akin to using the `style` attribute but terser. The only vector of change for the definition of a class name becomes the CSS spec itself. “p-3” === “padding: 3px” and cant _ever_ mean anything else (or it would have a different name). I see your point about SaaS tools, but why can’t you just add a class name for that purpose alone? Seems simple enough to me. I’ve tried just about everything when it comes to organizing CSS/styles and I have come to the conclusion that semantic naming is more trouble than its worth.
  - Wolfr_ 7y ago
    This is something very new (a few weeks) and still a work in progress, it's nowhere near complete. It's going to be a “way of doing things” instead of a full-on framework, but at the same time, we could use more examples on how to exactly do what it prescribes. A tutorial, a sample project following the conventions etc. It will be interesting to read the comments on this early version but it's not really “released” yet.
- nlh 7y ago
  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.
  - Wolfr_ 7y ago
    I promised myself to stop working on the project, but the games are: * Assetto Corsa Competizione * Dirt Rally 2 * Gran Turismo: Sport I should have added titles to them!
numbers 7y ago
Thanks for the write-up! I’m interested in svelte as well and this gives me some inspiration to try it this weekend!
amelius 7y ago
Title makes it seem as if the website received an award.
- Wolfr_ 7y ago
  Not intentional!
- bsaul 7y ago
  I got the same impression
- dang 7y ago
  Ok, we've taken "best of 2019" out of the title.
dragosmocrii 7y ago
It was a pleasure reading your article, I hope I can use it as reference for my future svelte project. And I must say that Svelte also caught my eye this year. I gave it a shot in their playground, and I was surprised how intuitive things are. Svelte as a compiler seems very natural an approach to building frontend apps and independent components. My next project will be Svelte on the frontend (SPA), and Elixir+Phoenix+Absinthe on the backend. I personally think this will be a killer stack for 2020
- ketzo 7y ago
  Any particular resources you'd recommend for Elixir/Phoenix? Doing their basic intro guides right now and liking them, but would love anything you did after those that you liked.
  - dragosmocrii 7y ago
    I recommend the official book written by Chris Mccord for Phoenix. For Elixir, I really enjoyed doing the assignments on Exercism. I also enjoy reading the elixir forum, and the slack community has helped me with a couple roadblocks in the past. But really, I think the best way is to just pick a project idea, and start working on it. It works best for me learn while doing. I hope you enjoy Elixir too!
factsaresacred 7y ago
Nice writeup. > "In 2018 I went content-first, but this year I went design-first. I more or less created all of the designs first, then implemented them as opposed to last year." For somebody who believes that it's as fast to simply design in css, was this step worth it?
- Wolfr_ 7y ago
  For me it's about testing new technology, and I consider Figma's autolayout new technology. I think by doing things in a design app you experiment with other things you wouldn't necessarily do in the browser. For example colors, fonts... compared to the '18 and '17 version I believe this one looks better. I do have to say I am quite fast with Figma as my day to day work is being a UI designer.
  - factsaresacred 7y ago
    Cool, having looked at your design file I can see the benefit of having everything laid out - allows you to easily explore different ideas. Figma seems like a tool worth learning, will have to dig in some more.
- diggan 7y ago
  Unless you're using something else than a regular text editor/IDE for editing CSS, using UI controls to experiment with how things look would normally be faster for many. I'm a programmer myself, but having UI widgets I can drag or interact with is way faster than writing numbers and attributes, when it comes to coming up with a design. Although, this assumes you're in the initial design phase of something, not the typical designer->developer handoff where you basically just want to implement a specification someone handed you.
Bob312371 7y ago
Loads quickly. Looks good. Nice and simple UI. Well done! If you're looking for the next challenge, consider making it render server-side.
- Wolfr_ 7y ago
  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)
paulddraper 7y ago
https://svelte.dev/ 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 perfect pitch for Angular. What's the difference between Svelte and Angular?
- Wolfr_ 7y ago
  The difference is that Svelte is pre-compiled while Angular will put templates through the renderer while building up the page.
  - The_rationalist 7y ago
    Why does it matter?
    - badfrog 7y ago
      Much faster initial load.
      - The_rationalist 7y ago
        Benchs?
  - paulddraper 7y ago
    Angular v1 interpreted templates at runtime. Starting in 2015, Angular v2+ uses an optimizing AOT compiler. [1] [1] https://angular.io/guide/aot-compiler https://angular.io/guide/aot-compiler
  - IggleSniggle 7y ago
    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).
mechhacker 7y ago
I've been using Vue for a while because it's possible to get things up and running, even .Vue templates, without having to use npm tool chains. Just linking the Vue and other source files. But, I really like the speed and user experience here. I may actually give it a try.
- ricardobeat 7y ago
  Svelte has very few dependencies, and zero of them at runtime. Hot reload is instant. A real breath of fresh air when coming from other frameworks.
  - mechhacker 7y ago
    I've been trying it throughout the day and so far I find the way of doing things better than Vue. I'll see if I can sort a binding issue that was causing me a bit of complexity in Vue. So far, it looks like it would make solving that trivial.
oskarp 7y ago
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.
- Wolfr_ 7y ago
  Thanks, I am going to investigate this.
cytzol 7y ago
> 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, which we all know is no backup at all (https://klim.co.nz/licences/web-fonts/ https://klim.co.nz/licences/web-fonts/): > You may make one (1) copy of the Web Fonts for back-up purposes only. And I hope you don't take a week-long holiday away from your computer: > At Klim’s request, You agree to provide an audit to confirm the Web Fonts You are consuming match Your Sales Receipt. Klim will give You at least 5 business days’ notice to complete the audit. The Commercial licence is a bit better, but doesn't let you subset the fonts, which means your fonts might be 5 to 10 times as big as they should be, giving your users a worse experience (https://commercialtype.com/licenses/web https://commercialtype.com/licenses/web): > 10. You may not modify, adapt, translate, reverse engineer, decompile, disassemble, or alter, the Webfonts, the Font Software or the designs embodied therein. I recommend using fonts under the SIL Open Font License, where you don't have to worry about this crap. Anyway, nice work! I've been meaning to learn Svelte, and your site looks really good.
- omnimus 7y ago
  I think it really depends on foundries. For klim and commercial type are example of famous, older, established foundries. There are many foundries with more permissive licenses. For example fonts.floriankarsten.com has weblicense that is not tied to domain but only total monthly views with generous 50k month its perfect for many small and hobby projects especially of some other project pays for license. I have feeling the type market is going to be really disrupted by new small foundries. There just too many newcomers and it became quite a bit easier technically to make fonts.
- deltron3030 7y ago
  There is a font tool/service that unites many commercial fonts from small type shops under the same license. https://www.fontown.com https://www.fontown.com Another one with a greater selection but variable licenses: https://fontstand.com/ https://fontstand.com/
83hajfjeijg 7y ago
https://bestof2019.johanronsse.be https://bestof2019.johanronsse.be just shows an empty page. (oh how far we've come - a simple best of list requires javascript)
- karmakaze 7y ago
  Thanks for the quick link. Complaining about a web page not working with js disabled is just noise, especially on a 'made with {framework}' post.
  - 83hajfjeijg 7y ago
    Stop being part of the problem. The modern web is fucking cancer.
    - dang 7y ago
      Could you please stop posting unsubstantive comments to HN? Could you please also stop creating accounts for every few comments you post? We ban accounts that do that. This is in the site guidelines: https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html. HN is a community. Users needn't use their real name, but do need some identity for others to relate to. Otherwise we may as well have no usernames and no community, and that would be a different kind of forum. https://hn.algolia.com/?sort=byDate&dateRange=all&type=comment&storyText=false&prefix&page=0&query=by:dang%20community%20identity https://hn.algolia.com/?sort=byDate&dateRange=all&type=comme...
  - _-___________-_ 7y ago
    I tend to agree; however, it's really easy to make a site like this work without JS. Edited to add: to be clear, I mean while still using the framework.
    - sosodev 7y ago
      Is it? You either you need some kind of server side JavaScript rendering (pita to get right imo) or you need to create a complete copy of the website that’s statically rendered (and replaced if the user has JS enabled?)
miganga 7y ago
Why is this post important?
- girvo 7y ago
  With all respect: why is any post important? Why is your comment? It's a blog post by someone giving their individual experience working with Svelte, a somewhat new framework with some interesting and somewhat unique ideas and approaches. It has a lot of buzz, so seeing someone else postmortem of how a small project was implemented using it is useful.
reaperducer 7y ago
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?
- skrebbel 7y ago
  It's for fun.
  - 83hajfjeijg 7y ago
    This is the best answer (but still incredibly, incredibly sad)
- Bob312371 7y ago
  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.
  - 83hajfjeijg 7y ago
    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. This sort of site doesn't need JS, it doesn't need a framework, it barely needs CSS.
    - deleted 7y ago
      [deleted]
    - tashoecraft 7y ago
      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
zk68420 7y ago
https://www.makemoneynow07.site/2019/12/make-money.html https://www.makemoneynow07.site/2019/12/make-money.html Check Details Legit Way
amelius 7y ago
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?
- Wolfr_ 7y ago
  Here's a fun demo to look at: https://twitter.com/rich_harris/status/1200807516529147904 https://twitter.com/rich_harris/status/1200807516529147904
- daliusd 7y ago
  Yes. The same as React while it might lack libraries. E.g. I have written site that filters 10,000s entries in real time and displays them.
deltron3030 7y ago
I dig the simplicity, but why didn't you use Sapper? https://sapper.svelte.dev/ https://sapper.svelte.dev/ (Next.js/Nuxt pendant based on Svelte, can also be used as static site generator).
- Wolfr_ 7y ago
  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.
  - deltron3030 7y ago
    Fair enough. I'm dabbling with Svelte/Sapper myself but I'm not at a point where I could roll my own with SSR and all that. Still trying out different ways to build components, gravitating towards having a fat global.css file and keeping the components themselves as thin as possible. >Also, Sapper doesn't seem to be in active development. For three months or so, but I wouldn't worry about that, because just a thin layer on top of Svelte, and the maintainer is very active in the Svelte repo it seems. It may only get bumps if something breaks.
- bwblabs 7y ago
  Sapper is very useful and has quite some nice properties: - automatic SSR (Server Side Rendering) - possibility to export to server-less plain HTML/CSS/JS - option to resource preload/fetching on mouseover/touchstart (a headstart of 300+ms) - serviceworker cache: PWA, offline support, etc. - session stores Sure there is room for improvement (e.g. i18n), but it very useful and powerful already today.
crtlaltdel 7y ago
Svelte looks interesting, however I must say that when I saw stuff like `{#if value} <tag> stuff </tag> {/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 value?
- ng12 7y ago
 Same, I really don't like the mental overhead of having to learn the template syntax. I already know JavaScript, just let me use that.
- sibeliuss 7y ago
 I agree. Some argue that this kind of template syntax makes it easer for html folks to write logic, but really what it's doing in the long run is introducing yet another abstraction for them to learn while also poorly assuming that they "can't learn JS". Teach a person how to fish... I think the real reason, however, is that it allows for easier compiler-level optimizations.
- BiteCode_dev 7y ago
 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 tag to know whats hapening, or I have to follow some nested map/filter/ternary chaining. Very good react coders will not do that. They will use a lot of tooling and abstract formatting a lot. But they are few.
 - crtlaltdel 7y ago
 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.
indigodaddy 7y ago
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..
- Wolfr_ 7y ago
  Thank you :)
diminish 7y ago
Does svelte have any traction recently? Any big names using it?
- mellosouls 7y ago
  It seems to have PR traction (no snark intended), it keeps popping up on here, so some people must like it.
- Wolfr_ 7y ago
  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.
  - arxpoetica 7y ago
    The list of "who is" is most certainly growing, and there are definitely some bigger names out there: https://github.com/sveltejs/svelte/blob/master/site/src/routes/_components/WhosUsingSvelte.svelte https://github.com/sveltejs/svelte/blob/master/site/src/rout... Jobs listings are cropping up in sundry places too. See for example: https://sveltejobs.dev/jobs/apple-senior-front-end-developer https://sveltejobs.dev/jobs/apple-senior-front-end-developer
sergiotapia 7y ago
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.
- pakpoi 7y ago
  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 https://github.com/UnwrittenFun/prettier-plugin-svelte [2] https://github.com/sveltejs/eslint-plugin-svelte3 https://github.com/sveltejs/eslint-plugin-svelte3
- daliusd 7y ago
  Prettier works with Svelte as well. Here are some hints how to use that with Vim https://blog.ffff.lt/posts/vim-and-svelte/ https://blog.ffff.lt/posts/vim-and-svelte/
deleted 7y ago
[deleted]
rado 7y ago
Excellent site, thanks for sharing.
marcus_holmes 7y ago
coughElm/cough
Rapzid 7y ago
I need to read more into svelte but I often find myself bogged down the contrived surgical DOM update examples. Well.. With redux or Mobx you are largely updating existing DOM attributes in both Vue and React. The overhead in changing existing attributes on components is fairly minimal, and it's certainly not where the bulk of the performance issues in these systems are. It's also not where the value is. The real value in Vue and React is reconciling data _graphs_ with the DOM _graph_. Unfortunately the need to reconcile the full graph, or even parts of the graph, is where a lot of the performance hit comes from. Particularly with lists; hence virtual scrollers. With the advent of proxies though, I would suspect both Vue and React could be retooled a bit to be more clever about how the DOM graph gets updated in response to changes in lists and other data graphs. More "surgical" so to speak. Am I missing something or could the bulk of the performance gap be made up without needing to ditch React and Vue(throwing the baby out with the bath water so to speak)?

243 points by Wolfr_ 7y ago

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.

flanbiscuit 7y ago
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/ https://ygdir.dev/
- sibeliuss 7y ago
  Wolfr_- Just read over ygdir and wondering: We've had such phenomenal success with https://styled-system.com/ 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 utils are incorrectly spread all across your codebase and not constrained to primitives then indeed it could be a mess.
  - csande17 7y ago
    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.
    - Wolfr_ 7y ago
      Pretty much this, utility-first leads to unmaintainable codebases, I try to explain why I want to change this with a combination of conventions on this page: https://ygdir.dev/rationale https://ygdir.dev/rationale
    - sibeliuss 7y ago
      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.
    - vosper 7y ago
      > - 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.) IMO the problem here is tools trying to use CSS for something it’s not designed for. They advertise themselves as not requiring technical knowledge to use, but they’re selling a lie. Unless the marketing guy understands the structure of the site and the CSS there’s no way for him to be sure he’s tracking the thing he thinks he’s tracking - unless you’re instrumenting the CSS to help him out, and are committed to not doing anything that would break one of his selectors (or change its meaning, or reuse it for something else - and are you sure you know all the selectors he’s using, and that the automatic selectors the tool is creating are actually doing what he intends?). Data attributes are probably the solution here, then CSS can be reserved for its intended use: controlling styles. But then the tooling needs a way to target those attributes automatically, otherwise you’ve “broken” the “no technical knowledge required” sell of the software they already licensed (without asking you for input...)
    - kingdomcome50 7y ago
      I prefer non-semantic class names (“messy” is up for debate). I find it much easier to reason about the markup when I can see exactly how each element is styled right there _with_ the element. Not only does semantic naming add a layer of indirection, I have have never found it to be as “clean” as you are insinuating. I can’t count the number of times I’ve found myself having to invent names for elements, containers, etc. just so I can apply a style when it would have been much easier to just “style=whatever”. All the naming conventions in the world don’t solve this: is it list-item__header or list__item-header? Who cares? I don’t find your arguments about maintenance very compelling either. If you want an element with “p-3” to have more padding, just... change it to “p-4”. That’s the whole point! You don’t have to wrangle with the _semantics_ of the element. You style it exactly as you want. It’s akin to using the `style` attribute but terser. The only vector of change for the definition of a class name becomes the CSS spec itself. “p-3” === “padding: 3px” and cant _ever_ mean anything else (or it would have a different name). I see your point about SaaS tools, but why can’t you just add a class name for that purpose alone? Seems simple enough to me. I’ve tried just about everything when it comes to organizing CSS/styles and I have come to the conclusion that semantic naming is more trouble than its worth.
- Wolfr_ 7y ago
  This is something very new (a few weeks) and still a work in progress, it's nowhere near complete. It's going to be a “way of doing things” instead of a full-on framework, but at the same time, we could use more examples on how to exactly do what it prescribes. A tutorial, a sample project following the conventions etc. It will be interesting to read the comments on this early version but it's not really “released” yet.
nlh 7y ago
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.
- Wolfr_ 7y ago
  I promised myself to stop working on the project, but the games are: * Assetto Corsa Competizione * Dirt Rally 2 * Gran Turismo: Sport I should have added titles to them!

numbers 7y ago

Thanks for the write-up! I’m interested in svelte as well and this gives me some inspiration to try it this weekend!

amelius 7y ago

Title makes it seem as if the website received an award.

Wolfr_ 7y ago
Not intentional!
bsaul 7y ago
I got the same impression
dang 7y ago
Ok, we've taken "best of 2019" out of the title.

dragosmocrii 7y ago

It was a pleasure reading your article, I hope I can use it as reference for my future svelte project. And I must say that Svelte also caught my eye this year. I gave it a shot in their playground, and I was surprised how intuitive things are. Svelte as a compiler seems very natural an approach to building frontend apps and independent components. My next project will be Svelte on the frontend (SPA), and Elixir+Phoenix+Absinthe on the backend. I personally think this will be a killer stack for 2020

ketzo 7y ago
Any particular resources you'd recommend for Elixir/Phoenix? Doing their basic intro guides right now and liking them, but would love anything you did after those that you liked.
- dragosmocrii 7y ago
  I recommend the official book written by Chris Mccord for Phoenix. For Elixir, I really enjoyed doing the assignments on Exercism. I also enjoy reading the elixir forum, and the slack community has helped me with a couple roadblocks in the past. But really, I think the best way is to just pick a project idea, and start working on it. It works best for me learn while doing. I hope you enjoy Elixir too!

factsaresacred 7y ago

Nice writeup. > "In 2018 I went content-first, but this year I went design-first. I more or less created all of the designs first, then implemented them as opposed to last year." For somebody who believes that it's as fast to simply design in css, was this step worth it?

Wolfr_ 7y ago
For me it's about testing new technology, and I consider Figma's autolayout new technology. I think by doing things in a design app you experiment with other things you wouldn't necessarily do in the browser. For example colors, fonts... compared to the '18 and '17 version I believe this one looks better. I do have to say I am quite fast with Figma as my day to day work is being a UI designer.
- factsaresacred 7y ago
  Cool, having looked at your design file I can see the benefit of having everything laid out - allows you to easily explore different ideas. Figma seems like a tool worth learning, will have to dig in some more.
diggan 7y ago
Unless you're using something else than a regular text editor/IDE for editing CSS, using UI controls to experiment with how things look would normally be faster for many. I'm a programmer myself, but having UI widgets I can drag or interact with is way faster than writing numbers and attributes, when it comes to coming up with a design. Although, this assumes you're in the initial design phase of something, not the typical designer->developer handoff where you basically just want to implement a specification someone handed you.

Bob312371 7y ago

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

Wolfr_ 7y ago
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)

paulddraper 7y ago

https://svelte.dev/ 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 perfect pitch for Angular. What's the difference between Svelte and Angular?

Wolfr_ 7y ago
The difference is that Svelte is pre-compiled while Angular will put templates through the renderer while building up the page.
- The_rationalist 7y ago
  Why does it matter?
  - badfrog 7y ago
    Much faster initial load.
    - The_rationalist 7y ago
      Benchs?
- paulddraper 7y ago
  Angular v1 interpreted templates at runtime. Starting in 2015, Angular v2+ uses an optimizing AOT compiler. [1] [1] https://angular.io/guide/aot-compiler https://angular.io/guide/aot-compiler
- IggleSniggle 7y ago
  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).

mechhacker 7y ago

I've been using Vue for a while because it's possible to get things up and running, even .Vue templates, without having to use npm tool chains. Just linking the Vue and other source files. But, I really like the speed and user experience here. I may actually give it a try.

ricardobeat 7y ago
Svelte has very few dependencies, and zero of them at runtime. Hot reload is instant. A real breath of fresh air when coming from other frameworks.
- mechhacker 7y ago
  I've been trying it throughout the day and so far I find the way of doing things better than Vue. I'll see if I can sort a binding issue that was causing me a bit of complexity in Vue. So far, it looks like it would make solving that trivial.

oskarp 7y ago

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.

Wolfr_ 7y ago
Thanks, I am going to investigate this.

cytzol 7y ago

> 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, which we all know is no backup at all (https://klim.co.nz/licences/web-fonts/ https://klim.co.nz/licences/web-fonts/): > You may make one (1) copy of the Web Fonts for back-up purposes only. And I hope you don't take a week-long holiday away from your computer: > At Klim’s request, You agree to provide an audit to confirm the Web Fonts You are consuming match Your Sales Receipt. Klim will give You at least 5 business days’ notice to complete the audit. The Commercial licence is a bit better, but doesn't let you subset the fonts, which means your fonts might be 5 to 10 times as big as they should be, giving your users a worse experience (https://commercialtype.com/licenses/web https://commercialtype.com/licenses/web): > 10. You may not modify, adapt, translate, reverse engineer, decompile, disassemble, or alter, the Webfonts, the Font Software or the designs embodied therein. I recommend using fonts under the SIL Open Font License, where you don't have to worry about this crap. Anyway, nice work! I've been meaning to learn Svelte, and your site looks really good.

omnimus 7y ago
I think it really depends on foundries. For klim and commercial type are example of famous, older, established foundries. There are many foundries with more permissive licenses. For example fonts.floriankarsten.com has weblicense that is not tied to domain but only total monthly views with generous 50k month its perfect for many small and hobby projects especially of some other project pays for license. I have feeling the type market is going to be really disrupted by new small foundries. There just too many newcomers and it became quite a bit easier technically to make fonts.
deltron3030 7y ago
There is a font tool/service that unites many commercial fonts from small type shops under the same license. https://www.fontown.com https://www.fontown.com Another one with a greater selection but variable licenses: https://fontstand.com/ https://fontstand.com/

83hajfjeijg 7y ago

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

karmakaze 7y ago
Thanks for the quick link. Complaining about a web page not working with js disabled is just noise, especially on a 'made with {framework}' post.
- 83hajfjeijg 7y ago
  Stop being part of the problem. The modern web is fucking cancer.
  - dang 7y ago
    Could you please stop posting unsubstantive comments to HN? Could you please also stop creating accounts for every few comments you post? We ban accounts that do that. This is in the site guidelines: https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html. HN is a community. Users needn't use their real name, but do need some identity for others to relate to. Otherwise we may as well have no usernames and no community, and that would be a different kind of forum. https://hn.algolia.com/?sort=byDate&dateRange=all&type=comment&storyText=false&prefix&page=0&query=by:dang%20community%20identity https://hn.algolia.com/?sort=byDate&dateRange=all&type=comme...
- _-___________-_ 7y ago
  I tend to agree; however, it's really easy to make a site like this work without JS. Edited to add: to be clear, I mean while still using the framework.
  - sosodev 7y ago
    Is it? You either you need some kind of server side JavaScript rendering (pita to get right imo) or you need to create a complete copy of the website that’s statically rendered (and replaced if the user has JS enabled?)

miganga 7y ago

Why is this post important?

girvo 7y ago
With all respect: why is any post important? Why is your comment? It's a blog post by someone giving their individual experience working with Svelte, a somewhat new framework with some interesting and somewhat unique ideas and approaches. It has a lot of buzz, so seeing someone else postmortem of how a small project was implemented using it is useful.

reaperducer 7y ago

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?

skrebbel 7y ago
It's for fun.
- 83hajfjeijg 7y ago
  This is the best answer (but still incredibly, incredibly sad)
Bob312371 7y ago
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.
- 83hajfjeijg 7y ago
  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. This sort of site doesn't need JS, it doesn't need a framework, it barely needs CSS.
  - deleted 7y ago
    [deleted]
  - tashoecraft 7y ago
    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

zk68420 7y ago

https://www.makemoneynow07.site/2019/12/make-money.html https://www.makemoneynow07.site/2019/12/make-money.html Check Details Legit Way

amelius 7y ago

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?

Wolfr_ 7y ago
Here's a fun demo to look at: https://twitter.com/rich_harris/status/1200807516529147904 https://twitter.com/rich_harris/status/1200807516529147904
daliusd 7y ago
Yes. The same as React while it might lack libraries. E.g. I have written site that filters 10,000s entries in real time and displays them.

deltron3030 7y ago

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

Wolfr_ 7y ago
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.
- deltron3030 7y ago
  Fair enough. I'm dabbling with Svelte/Sapper myself but I'm not at a point where I could roll my own with SSR and all that. Still trying out different ways to build components, gravitating towards having a fat global.css file and keeping the components themselves as thin as possible. >Also, Sapper doesn't seem to be in active development. For three months or so, but I wouldn't worry about that, because just a thin layer on top of Svelte, and the maintainer is very active in the Svelte repo it seems. It may only get bumps if something breaks.
bwblabs 7y ago
Sapper is very useful and has quite some nice properties: - automatic SSR (Server Side Rendering) - possibility to export to server-less plain HTML/CSS/JS - option to resource preload/fetching on mouseover/touchstart (a headstart of 300+ms) - serviceworker cache: PWA, offline support, etc. - session stores Sure there is room for improvement (e.g. i18n), but it very useful and powerful already today.

crtlaltdel 7y ago

Svelte looks interesting, however I must say that when I saw stuff like `{#if value} <tag> stuff </tag> {/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 value?

ng12 7y ago
Same, I really don't like the mental overhead of having to learn the template syntax. I already know JavaScript, just let me use that.
sibeliuss 7y ago
I agree. Some argue that this kind of template syntax makes it easer for html folks to write logic, but really what it's doing in the long run is introducing yet another abstraction for them to learn while also poorly assuming that they "can't learn JS". Teach a person how to fish... I think the real reason, however, is that it allows for easier compiler-level optimizations.
BiteCode_dev 7y ago
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 tag to know whats hapening, or I have to follow some nested map/filter/ternary chaining. Very good react coders will not do that. They will use a lot of tooling and abstract formatting a lot. But they are few.
- crtlaltdel 7y ago
 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.

indigodaddy 7y ago

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..

Wolfr_ 7y ago
Thank you :)

diminish 7y ago

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

mellosouls 7y ago
It seems to have PR traction (no snark intended), it keeps popping up on here, so some people must like it.
Wolfr_ 7y ago
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.
- arxpoetica 7y ago
  The list of "who is" is most certainly growing, and there are definitely some bigger names out there: https://github.com/sveltejs/svelte/blob/master/site/src/routes/_components/WhosUsingSvelte.svelte https://github.com/sveltejs/svelte/blob/master/site/src/rout... Jobs listings are cropping up in sundry places too. See for example: https://sveltejobs.dev/jobs/apple-senior-front-end-developer https://sveltejobs.dev/jobs/apple-senior-front-end-developer

sergiotapia 7y ago

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.

pakpoi 7y ago
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 https://github.com/UnwrittenFun/prettier-plugin-svelte [2] https://github.com/sveltejs/eslint-plugin-svelte3 https://github.com/sveltejs/eslint-plugin-svelte3
daliusd 7y ago
Prettier works with Svelte as well. Here are some hints how to use that with Vim https://blog.ffff.lt/posts/vim-and-svelte/ https://blog.ffff.lt/posts/vim-and-svelte/

deleted 7y ago

[deleted]

rado 7y ago

Excellent site, thanks for sharing.

marcus_holmes 7y ago

coughElm/cough

Rapzid 7y ago

I need to read more into svelte but I often find myself bogged down the contrived surgical DOM update examples. Well.. With redux or Mobx you are largely updating existing DOM attributes in both Vue and React. The overhead in changing existing attributes on components is fairly minimal, and it's certainly not where the bulk of the performance issues in these systems are. It's also not where the value is. The real value in Vue and React is reconciling data _graphs_ with the DOM _graph_. Unfortunately the need to reconcile the full graph, or even parts of the graph, is where a lot of the performance hit comes from. Particularly with lists; hence virtual scrollers. With the advent of proxies though, I would suspect both Vue and React could be retooled a bit to be more clever about how the DOM graph gets updated in response to changes in lists and other data graphs. More "surgical" so to speak. Am I missing something or could the bulk of the performance gap be made up without needing to ditch React and Vue(throwing the baby out with the bath water so to speak)?