#Svelte
Create a simple installable and offline-first web application using SvelteKit and workbox-precaching!
https://youtu.be/Enl4OPQ2OAM
Another update.
It's taking more time than expected, working on so (too!) many stuff in parallel...
I made a few stress tests and asked friends with fast internet if things load quick (everything is a hassle to load for my poor broadband internet BUT my website loads quite fast anyway on it compared to most websites); and I can confirm I'll keep this tech stack: #Tailwind + #Svelte / #SvelteKit + API on #Directus. The SvelteKit part ran like a charm on a #RaspberryPi.
@davatron5000 @collinsworth This is an interesting read, though I wonder if this has less to do with compile steps and more to do with authoring format?
You talk about vendor lock-in for the compiler, but I feel the lock-in has more to do with the way you are authoring code. That anything inside a .vue or .svelte file is inherently coupled to those frameworks and is "more locked-in" than something like #Lit. That seems independent of whether or not a compiler is being run.
For example, how would you feel if #Vue or #Svelte shipped your raw templates and interpreted them at runtime? Would that be less locked-in, even though you're writing the same code? What about if Lit *required* a compiler, but otherwise was authored the same way?
I personally always disliked frameworks that fork the #JavaScript language to achieve their ends (ex. framework-specific file extensions or #JSX). I think you're describing a very similar emotional reaction I feel to those FWs, I wonder if it's the same?
🔗 “My double standards about JS framework compilers” by @davatron5000
⚓️ https://nicolas-hoizey.com/links/2023/05/26/my-double-standards-about-js-framework-compilers/
@tanepiper @brianleroux Very good design principle.
#Svelte also does this too.
PSA : a Svelte Kit project on #windows won't build correctly if the path in your terminal has a lowercase drive letter.
Sortie de seelf ! Une plateforme de déploiement ultra légère self-hostée https://julien.leicher.me/writes/seelf-public-release #docker #selfhosting #golang #svelte
When you develop a library for the JS ecosystem - be it #React, #Svelte, #Vue whatever, do the #JavaScript community a favor and implement it in #TypeScript.
And no, I don't want to have a loosly dangling d.ts file somewhere. Go TypeScript natively!
I can't use your beautiful Vue js component in my Vue TS app, because it doesn't provide typings for it's slots! 😠
I made a thing! 🚀
https://workflow-learn.vercel.app/
Have a bunch of notes you need to review last minute? workflow-learn (name is definitely a WIP) creates a ChatGPT-style animation that reveals the text chunk by chunk at random speeds. It's the digital equivalent of using your finger to help you read.
Please do try it out 🙏
The website is open source: https://github.com/jtpotato/workflow-learn
🆕 Post: How to add a basic SEO component to #SvelteKit.
Learn how to make a basic SEO component for a SvelteKit app and how to feed it with SEO data.
https://maier.tech/posts/how-to-add-a-basic-seo-component-to-sveltekit
Hi folks -
Here's an article I wrote breaking down how to locally run a composed Storybook instance that shows components from React, Vue, Preact and Svelte at the same time.
Cheers!
https://dev.to/scottnath/running-a-local-multi-framework-composition-storybook-506l
There is probably no need to swap out `eslint-plugin-svelte3` for `eslint-plugin-svelte` immediately. But if you want to update, be prepared for some linting surprises.
It's not super complicated to fix, but it's also not a Friday afternoon project.
https://github.com/sveltejs/kit/releases/tag/create-svelte%404.0.0
Designing stuff in #figma and I ran into an issue. In this screenshot I made a custom dropdown, but I am realizing now that in html I cant have custom colors (maybe ill be able to do fonts?)
Doing this in #svelte
If anyone has any idea on how to achive this I really want to know since it looks really nice
#Development #Approaches
Building a modern design system in layers · Proper layering facilitates the long-term evolution of a design system https://ilo.im/12yb4f
_____
#Layers #DesignSystem #WebDesign #WebDevelopment #WebDev #Frontend #Framework #Library #React #Svelte #Solid #Vue
I'm building an email service called Port87.com, and I'm using #SvelteKit for the web app. Holy cow, SvelteKit is so fast! Navigations happen almost instantly. #Svelte #NodeJS
a super interesting map of reddit built with #svelte and #SvelteKit - "We Mapped Reddit: Introducing RedditMap.social"
https://github.com/iDPI-Umass/reddit-map
https://publicinfrastructure.org/2023/05/11/we-mapped-reddit-introducing-redditmap-social/
The svelteKit Video course is excellent and also includes #svelte basics. It’s very hands on, straight to what you need for a real project.
https://vercel.com/docs/beginner-sveltekit
#webdev
It's an interesting route, and I didn't see much projects that would move away from #TypeScript to #JSDoc type hints. I tried writing generics in it some months ago and didn't find this experience pleasing at all. But I hope this doesn't serve as a limitation for making #Svelte type-safe.
@fdrc_ck #Svelte is the new hotness very few are talking about. It doesn't use a virtual DOM like React and Vue do and is as much of a gamechanger as the virtual DOM was. SolidJS may win ultimately but Svelte has made me fall in love with making html pages again
In a few years everyone will be using Svelte to build web pages. Like the Rust vs C++ discussion, Svelte eliminates a whole class of problems that exist for React and Vue. SvelteKit is like NextJS. full Typescript support and doesn't need the massive ecosystem React and Vue have to be just as powerful. Will only want to use Svelte from now on.
Déplacement du Webtoolkit dans le github de CodeCadim et petites modifications pour mieux gérer Vite
Why is Svelte the most-loved JS framework? Creator Rich Harris is on Learn With Jason today to show us what we can do with Svelte and SvelteKit.
Live now! https://twitch.tv/jlengstorf
My #Svelte Summit lightning talk on Svelte and the View Transitions API was released as a standalone video! 10 minutes on implementing browser-native FLIP animation in Svelte via a Windows-Solitaire-inspired demo, and also bonus piano and cat cameos.
Full transcript: https://geoffrich.net/posts/svelte-summit-2023/
@jbutz For a library like #Svelte, the benefit is to eliminate the transpile step for #TypeScript. For end users, Svelte will still be fully typed, but debugging is easier because the code you write is the code you ship.
It's happening: the big #TypeScript to #JSDoc conversion for #Svelte:
https://github.com/sveltejs/svelte/pull/8569
This does not mean that they are getting rid of TypeScript, they are just swapping out one flavor of TypeScript for another.
I created a 72 line draggable and dropzone Svelte Actions that enables a <120 line Drag and Drop Kanban Task Board
@ebrehault nice talk #sveltesummit spring 2023 👌 #svelte
My talk on view transitions w/ #Svelte is next! If you don’t mind spoilers, you can find the transcript and links to further reading and demos on my blog.
Easter egg: Svelte brownie points to anyone who came name the three classic Nintendo tunes I reference in this talk! Hint: 1992, 1998, 2007
Svelte Summit, the virtual #Svelte conference, is happening right now! I'll have a talk coming up near the end of the stream about using the View Transitions API with Svelte.
Wenn ihr z.B. von den #layoff bei #shopify betroffen seit und mal was ganz anderes braucht schaut doch mal die #Stellenanzeige von uns an.
Wir bieten #remotejobs mit #teilzeit option unter sehr flexiblen und entspannten Bedingungen. Stack ist #angular und #svelte.
Wir sind zwar nur ein sehr kleines Team aber z.B. jungen Eltern oder Menschen in einer psychischen Krise können wir eine echte Alternative bieten!
#LogicielLibre #opensource #Svelte #SvelteKit #Django
Je développe un framework libre & open source pour créer des sites web avec intranet pour maison de santé (#MSP), centre de santé, cabinet de groupe & #CPTS.
Une sorte de CMS pour créer des sites web et des apps web. A terme les utilisateurs pourront entrer et modifier leurs données mais la conception, l'installation et le paramétrage sont réservés aux pros.
Git: https://github.com/medica-im/healthcenter
Prototype en production: https://msp-vedene.fr
In my search for a #Pinboard alternative I found #Linkding, and it looks *almost* exactly what I was looking for.
It's only semi-social (closed/friends-only), could need an option for public access, and various tweaks here and there – but it’s very hackable (#Django, #Python, #svelte, #SQLite)
#SvelteKit will soon have an <Image /> component:
https://www.youtube.com/watch?v=aDTc_uFufS8&list=WL&index=1&t=373s
@dummdidumm has been working on `@sveltejs/image`, which exports an image component that supports both image optimization at build time and image optimization at runtime.
Explore our article: Frontend Madness: SPAs, MPAs, PWAs, Decoupled, Hybrid, Monolithic, Libraries, Frameworks! WTF for your PHP backend? https://symfonystation.com/Frontend-Madness-JS-PHP-Backend #javascript #PHP #symfony #Laravel #Drupal #WordPress #React #Vue #Svelte #AlpineJS #Angular #Viewi #PWAs
I finally pushed myself and published my personal website:
It's where I experiment with all things web, like #html #css #javascript esp. #svelte and #svg most often in the context of #dataviz or similar forms of visual storytelling.
I have also put my first blog post up, where I share some notes on #dataWrangling in javascript:
https://sebastianlammers.com/posts/data-in-js-00
It's a multipart post aimed to be very beginner friendly.
Enjoy!
AngularJS 1 gets a lot of flack, but I think it had the right vision.
To me, Svelte feels like that vision executed successfully.
So this was pretty interesting: https://wout.space/notes/live-svelte-as-liveview-dsl
It's #LiveView but where LV is only streaming data into #Svelte components. I haven't tried Svelte myself but it looks like an interesting approach of combining server side and client side reactivity.
The downside is that you can't write your components in Elixir. The upside is you still don't have to write an explicit API between your frontend and backend code.
Speaking of animations, #Svelte made it ridiculously easy to add these crossfade transitions. I never tried implementing this in #React because it seemed so difficult.
https://svelte.dev/docs#run-time-svelte-transition-crossfade
I’m so excited to publish my new #PersonalWebsite:
https://sidney.me/?ref=Mastodon
I’ve spent the last few months crafting my own home on the Web, and I wanted to make sure it presented me as a *human*, not defined solely by my work as a #DesignEngineer / #WebDev.
This has also been a great opportunity to finally use #Svelte & #SvelteKit in a project. I love how easy it was to learn and how intuitive it is, as someone who started with vanilla HTML and CSS
Big announcement: I'm releasing my first ever #webdev project today!
It's aimed at my beloved #dataviz community, esp. those eager to learn about the *awesome* combination of #svelte and #d3
Check out this collection of *awesome* real world projects sourced from the community:
https://awesome-svelte-and-d3.netlify.app/
In addition to the projects, I started collecting #tutorials that focus on the combination of #svelte and #d3
I'm sure the list is not complete, so send your links my way and I'll include them!
Just discovered the #Skeleton UI toolkit for #Svelte and it's what I've been missing ever since I stopped using Vue and BoostrapVue.
Good intro by Huntabyte:
https://www.youtube.com/watch?v=P_A0qQ7AuK8
Project: https://www.skeleton.dev/
Quite enjoyed this talk by Rich Harris (Creator of Svelte) on his thoughts about front-end development trends. Also, he looks kinda hot in this vid 👀
So I “finished” my #Svelte hackathon project, and put it up publicly! Check it out:
https://neso.social
Fair warning, a lot of it is very buggy.
@dungeonHack React has a lot of gravity, for sure. And it won't disappear in large organizations, probably ever.
But I think developers will keep their developer happiness in mind when they evaluate employment options.
#Svelte will probably not replace React, but whatever tech will replace it will have a much better DX.
Working on another #Svelte + View Transitions demo. Going for that Windows 98 vibe
(video alt: two rows of Windows Solitaire-style playing cards are displayed. Clicking the "Shuffle" button swaps the cards around)
(For comparison here is a version in #svelte I want to get to parity with https://svelte.dev/repl/e653c224bdd14195a90e7523c7ef08ab?version=3.58.0)
A couple of years back I released #Svelte Formula for creating #ReactiveForms
I've just been refactoring it to be a #webComponent instead - would love to get feedback on it.
It's shipped as a library with web component export - wrap it around any static HTML5 form and you now have a dynamic store-driven one
https://stackblitz.com/edit/vitejs-vite-skkuff?file=index.html
@aral@mastodon.ar.al Here is my #web0 app (very beta atm) https://der-on.gitlab.io/skatetricks-progression-app
#skateboard #svelte
Currently it's hosted on gitlab pages but I will move it to codeberg pages soon. It just requires me to create another repo just for the pages and a build step to commit to that repo.
The code itself is on codeberg https://codeberg.org/der_On/skatetricks-progression-app