Using #sveltekit and #vscode ? Latest version of Code (v1.88, April 2024) allows Custom Labels for files, meaning all your +page and +server files could now display their enclosing directory name.
VS Code > Settings > search "customLabels" > add Item with
I broke a little with #SvelteKit idioms here insofar as I have Pages merely pass a context object into a #Svelte component.
This in turn allows me to utilise #Storybook to describe the interface in different configurations (I have tests in place as well).
It's still early days but we tackle one page at a time to build up this #Federated#Forge (F2 for short).
In case you are interested in translating, hit me up. Be warned that things might move around or get dropped. I prefer early feedback to easily correct course if needed.
Working on Svelte is so rewarding as a long time vanilla JS developer. All the accumulated web knowledge over the years just instantly available to you, while enjoying the augmented DX.
I have to say that's the best thing happened to the web. Imagine you don't need to throw away everything in order to progress, instead just enjoy the compounding benefits of your existing web knowledge.
SvelteKit “Form actions” is the single most underrated feature. I use it to power 95% of the mutation happens to my projects, I no longer needs that much JSON API endpoints. It's dead simple as it leverages the native web form to send data, you can easily extend it using use:enhance or your own customized handler to provide a better UX.
#SvelteKit has so many quality of life features now. It can handle env variables for you and restrict some to be server only, while inlining the client only variables.
Part of the reason for updating was taking advantage of the new read helper in SvelteKit 2.4. I wrote a quick blog post yesterday on how that simplifies things: https://geoffrich.net/posts/sveltekit-read/
New blog post: #SvelteKit 2.4 added a new read method that simplifies reading assets on the server. I did a quick writeup on how it simplifies retrieving raw font data in one of my old #Svelte social image demos.
TIL that @sveltejs/enhanced-img is subject to a preprocessing step to convert its src prop into an import.
As a consequence, you can't use <enhanced:img /> inside another component and pass in a src at runtime. This restriction seems to be inherited from vite-imagetools.
<enhanced:img /> is in its infancy, therefore lots of room for improvement.
I asked a frontend friend what framework he would recommend if he was starting a new project today. He said #svelte, so I spent the afternoon walking through their online tutorial and playing around with #sveltekit.
I've got to say, as someone with fairly rudimentary JS skills, it was a great experience. It feels a lot closer to HTML/CSS and a lot simpler than a lot of the other JS frameworks.