geoffrich, #Svelte 5 is now in the "Release Candidate" phase: https://svelte.dev/blog/svelte-5-release-candidate
"This means that the design of the framework is largely settled, with no anticipated breaking changes between now and the stable release, and that the most egregious bugs have been stomped.
"It doesn't mean that it's ready for production, or that nothing will change between now and 5.0. But if you've held off on dabbling with Svelte 5 during the public beta phase, now is a great time to try it out."
kristin_baumann, Some D3 canvas and Svelte fun with the Mandelbrot fractal :)
First time trying out @viz_hub: https://vizhub.com/kristinbaumann/mandelbrot_fractal
mauve, Brushing up on #Svelte to do code reviews for a project and I gotta say it's pretty magical. :P
https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive
wiredprairie, I'm following the ARIA authoring practices from the W3 for web components I'm writing for a #Svelte app.
I've been experimenting with lots of companies' web sites and component libraries.
It's disappointing how much variation there is in support (even from big companies). Many have wrongly applied anti-patterns and have failed to cover even 25% of the documented patterns.
A lot of component libraries do the minimum and still claim #a11y. 🤬 Trust these after verification.
wiredprairie, @aardrian Is there a better resource you'd suggest for patterns/practices? I want to do whatever is the current best practices to follow.
I only want to create things when the native component isn't a good fit for a web app (or doesn't exist at all).
aardrian, @wiredprairie BBC GEL has some good stuff, and it is typically backed up with testing / feedback:
https://www.bbc.co.uk/gelEven the support notes on the APG patterns that have them are meh:
https://adrianroselli.com/2023/04/no-apgs-support-charts-are-not-can-i-use-for-aria.htmlThe third paragraph links to problems I have with APG overall.
kristin_baumann, 𝗗𝘂 𝗕𝗼𝗶𝘀 𝗗𝗮𝘁𝗮 𝗩𝗶𝘀𝘂𝗮𝗹𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗦𝗼𝗰𝗶𝗲𝘁𝘆 𝗖𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲 - 𝗪𝗲𝗲𝗸 𝟵/𝟭𝟬. My re-creation of Du Bois' poster no. 51 implemented with D3 & Svelte. Once more close to the original and responsive.
Live Version: https://du-bois-challenge-2024.kristin-baumann.com/#challenge9
Github: https://github.com/kristinbaumann/du-bois-challenge-2024#DuBoisChallenge2024 #d3 #svelte #dataviz #datavisualization
kristin_baumann, Du Bois Data Visualization Society Challenge - Week 7/10: My recreation of Du Bois' poster no.47, done with D3 & Svelte. Again I tried to recreate it as close to the original as possible, make it responsive and added a pattern fill to match the hand-painted look.
Live Version: https://du-bois-challenge-2024.kristin-baumann.com/#challenge7
Github: https://github.com/kristinbaumann/du-bois-challenge-2024
seblammers, The pattern fill is great touch!
kristin_baumann, Du Bois Data Visualization Society Challenge - Week 6/10: My recreation of Du Bois' poster no. 54, done with D3, Svelte. Again I tried to recreate it as close to the original as possible and make it responsive.
Live Version: https://du-bois-challenge-2024.kristin-baumann.com/#challenge6
Github: https://github.com/kristinbaumann/du-bois-challenge-2024
kristin_baumann, Du Bois Data Visualization Society Challenge - Week 5/10: My recreation of Du Bois' poster no. 13, done with D3, Svelte. Added a pattern fill to match the hand-painted look & transitions on load.
Live Version: https://du-bois-challenge-2024.kristin-baumann.com/#challenge5
Github: https://github.com/kristinbaumann/du-bois-challenge-2024
mandrasch, Discussed my current painpoints with #Twig a bit in Craft Discord. Coming from a #Svelte Components perspective, the Developer Experience is just not as good currently. Things take much more effort to set up, you need to understand Includes vs. Embeds vs. Macros. This is a general PHP CMS challenge of course. 🤷 On the other hand: You get SSR easily without wild cloud setups in PHP 😉 🤓 #craftcms
Posted about components here if: https://github.com/twigphp/Twig/issues/3951#issuecomment-1970764587
andre, Thanks to the amazing effort by @laxla we can now inspect #Anvil in proper Hebrew:
https://anvil.codeberg.page/anvil/?path=/story/organisms-loginform--plain&globals=locale:he
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.
29decibel, 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.
Thank you Svelte team!
oleksify, I’m starting to fall in love with #svelte @sveltejs I finally have a change to work with Svelte within real production codebase and it's nothing but a pleasure. For a newbie with long React background this feels like - «OMG, it actually could be just that simple!»
It's still early days, and I'm only scratching the surface but so far it feels really good.
silas, Welcome! Yeah, I definitely remember the feeling. Feel free to post any questions as you go :)
kristin_baumann, Du Bois Data Visualization Society Challenge - Week 3 of 10:
My recreation of Du Bois' poster no. 19, again implemented with D3 and Svelte, with transitions on load and hover interactions.
Live Version: https://du-bois-challenge-2024.kristin-baumann.com/#challenge3
Github: https://github.com/kristinbaumann/du-bois-challenge-2024
seblammers, It's looking great on mobile now! Really love the style and your modern adaptation of it.
And you already added another challenge! Great stuff. Thanks for sharing all this!
kristin_baumann, @seblammers There are some quite interesting looking ones coming, that are more than bars :)
marcoow, If you're in Munich, join @paoloricciuti and myself this Friday for @mainmatter's free #svelte workshop.
We'll be building a fully functional, progressively-enhanced #sveltekit app throughout the day.
The workshop will be hosted by our friends at Experteer in their office in the center of Munich.
Sign up here: https://ti.to/mainmatter/intro-to-svelte-sveltekit
kristin_baumann, The 2024 Du Bois Data Visualization Society Challenge has started!
Here is my re-creation of Du Bois Poster Nr. 6 for week 1, implemented with D3 and Svelte.
Live: https://du-bois-challenge-2024.kristin-baumann.com/#challenge1
Github: https://github.com/kristinbaumann/du-bois-challenge-2024
seblammers, Ah, yes that works. I was just wondering if the distance between the 4 lines (or ticks) is slightly uneven? But maybe that's just my brain being misled by the different widths of the black chart element...
kristin_baumann, @seblammers looks even to me, let's see in the final re-creation
andre, Slightly (ahem) frustrated that my #Svelte component behaves differently than the example component in #Storybook.
Couldn't figure out why the docstring and type wasn't extracted. The args aren't even shown as properties!
I'm sure it's something stupidly simple.
But I don't see it 🙈Help appreciated. Boost okay.
Code: https://codeberg.org/Ryuno-Ki/Anvil/src/branch/storybook/stories/atoms/Avatar.stories.ts
Storybook: https://anvil.codeberg.page/anvil/?path=/docs/atoms-avatar--docs
seblammers, For my #svelte ❤️ #d3 people out there:
Matthias Stahl started a beginner friendly video series, where he goes through nice little mini-projects and explains how to make responsive #dataviz with the perfect combo of svelte and d3 :)
Start here:
https://www.youtube.com/watch?v=2-Zw_QGTrlUSo far there are 6 videos with more on the way 🚀
jamaps, screenshots from our recent work on proximity to outdoor skating rinks in Toronto
more here: https://schoolofcities.github.io/access-to-outdoor-rinks-toronto/
#svelte #d3 #toronto #urbanism #maps #dataviz
screenshot of an article on access to outdoor skating rinks in Toronto -- showing 4 maps comparing census demographic data to the location of rinks
screenshot of an article on access to outdoor skating rinks in Toronto -- showing a network-based voronoi map of catchment areas for rinks coloured by the population in each area
geoffrich, Just updated my Svelte-generated social image demo for 2024! It now uses #Svelte 4 and #SvelteKit 2.
The social image below was generated from a Svelte component at runtime 👇
Built on Vercel's Satori library and @nmoo's satori-html
geoffrich, 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/
geoffrich, 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.
geoffrich, Rich Harris also did a video demo of the new functionality:
thilo, This post by @geoffrich makes the purpose of #SvelteKit's new
read
function much clearer:
thilo, @geoffrich Saw it in your RSS feed :)
geoffrich, @thilo rss ftw
serpentroots, 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.
preslavrachev, @serpentroots @adrianco I guess, I should have remained silent and not mention https://htmx.org/
dahukanna, Sharing a perspective:
For personal projects suggest trying a few on equivalent implementations, pick the one that suits your mental models & the challenge at hand-https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks.
Personally prefer VueJs as it supports native HTML, CSS & JavaScript as well as providing structure & APIs.In an Organisation there are other considerations e.g. imposed corporate or institutional standards & selected defaults, etc.
Unfortunately, there isn’t a Panacea.JS-😉
shirley, hello happy (belated) new year! I've been wanting to learn #svelte for a while and figured today is as good a day as any and I'm already so delighting in their tutorial it's so good 😊
can't wait to figure out all the hype I've heard from @wattenberger + @puddingviz 💖
jeffpalmer, @shirley @wattenberger @puddingviz Awesome! It’s easily my favorite front end tech these days. Have fun!
gka, 🎉 New blog post! For a few months now I've been toying with an idea for a new #Svelte framework for #datavisualization -- heavily inspired by the great Observable Plot. Very curious to hear what you think about this.
seblammers, Svelte + Grammar of Graphics + smart defaults? 😍
I'd love to contribute to this. Let's talk about it :)
voxpelli, Got reason to look into
svelte-check
, the #linting tool for #Svelte projects, and I must say – their approach is intriguing.It’s essentially invoking Language Service (#lsp) diagnostics for all the files and using the diagnostics output from the TypeScript, HTML and CSS language services to determine if there's an error or not.
In other words: Mimicking how eg. VSCode does to report errors and warnings in its UI.
This is a very interesting approach compared to eg. @eslint parsers
voxpelli, I did find one tool that builds upon generic Language Servers to provide its features: #Crabviz
It provides a call-graph for ones project utilising whatever Language Servers one has made available to it.
Its VSCode extension utilises the very Language Servers that is available in ones VSCode workspace – a very nice setup!
https://marketplace.visualstudio.com/items?itemName=chanhx.crabviz
voxpelli, For those interested to read up on the #SvelteCheck architecture: This overview is a great read: https://github.com/sveltejs/language-tools/blob/master/docs/internal/overview.md