Subscribe
Share
Share
Embed
Sponsor
Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.
Recorded: June 15th
Description
Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.
Recorded: June 15th
Description
In this episode we talk with Antonio and Paolo, winners of the Svelte Hackathon! They built a REPL that not only works for Svelte, but also for SvelteKit.
Music
Intro music by Braden Wiggins a.k.a. Fractal (braden@fractal-hq.com)
Discussion topics
Unpopular Opinions
- Brittney: Native HTML tables are awful (brittney)
- Antonio: There are too many micro blogging sites
- Antony: Notion
- Paolo:
- We should not force “sv” into all the names
- PWA:s are actually ok!
Picks
Creators & Guests
Host
Host
What is Svelte Radio?
Things about Svelte. Sometimes weekly, sometimes not.
Here's a quick word from our sponsor.
Vercel is the platform for front-end developers, providing the speed and reliability innovators
need to create at the moment of inspiration. Founded by the creators of Next.js,
Vercel has zero configuration support for 35+ front-end frameworks, including SvelteKit.
We enable the world's largest brands like Under Armour, eBay, and Nintendo to iterate faster and
and create quality software.
Try out Vercel today to experience
the easiest way to use Svelte.
(upbeat music)
- Welcome to Svelte Radio.
- Hello everyone.
Welcome to another episode of Svelte Radio.
The premier Svelte podcast online,
the best one, probably the only one,
but I like it, it's ours.
I am joined by my beautiful co-hosts,
Brittany and Anthony.
Hello.
- Hello. - Hello.
- Hey. - Been a minute.
- Yeah, it's been a while.
What have you guys been up to?
- I went on vacation, which was really nice.
- Oh.
beautiful Southern Caribbean.
- That sounds awful.
Ugh, yuck.
- It was just amazing.
I'm missing it right now because it is freezing here
for some reason.
It is supposed to be the most beautiful time of year.
The only time to live in Michigan is this time of year
and it is all of a sudden freezing again.
So I don't know.
My mom visits and this is what happens.
So she's here right now and she's in bad weather with her.
you should just ban her. Yeah. From coming. Then it'll always be nice. It's the opposite over here.
We have like a heat wave or something. It's 27 degrees Celsius. So that's 80 Fahrenheit, I think.
Which is very warm for us. Right. Is that very warm for you? Yeah, I would say so. Yeah. Can't
you see I'm all red and stuff from the sun? See, it was 92 weeks ago and that's a little warm for
So 90 Fahrenheit is like a little too warm.
Yeah, we have the same, it's about 30 something, I think.
And it's too hot. It's far too hot. Our house is not built for it.
Like, we can't sleep at night.
We're 60 right now here. It's so cold.
Yeah, that sounds awful.
Alright, so today we have two guests with us, and we're going to talk about SvelteLab.
I'd like to welcome Antonio and Paolo.
Hello.
Paolo: Hello.
Hello, everyone.
Hey, how's it going?
Yeah, pretty good, I guess.
It's a bit of a rough period for me,
because I am super busy, but it's good.
All right, cool, cool.
So, you two have worked on this project of yours
called Svelte Lab.
But before we get into that,
so the short of it is that it's a REPL,
but before we get into what it actually is
and what we actually do with it,
maybe we can talk a bit about
who you are, where you're based,
where you're coming from,
what's your background with regards to Svelte
and I guess web development in general?
- Okay, yeah, I guess I'll start.
So yeah, I'm into web development since 2017, I think,
when I learned about it in university.
And yeah, I learned how easy it is to build UI
with HTML and CSS and got really excited
about all the possibilities.
And then 2020, late 2020, I wrote an article
on web components and learned that Svelte
has a really nice option for,
or is a really nice option for creating web components
because the syntax is so simple
and it's been a love story ever since.
And yeah, super huge fan and just love working with it.
- Yeah, so in Svelte 4,
we're actually getting even better
web component support as well.
So that's great for people that are interested in that.
- Actually using less web component APIs is better.
- Yeah.
- Yeah, I am into web development.
actually from 17 years ago,
because it all started because I like to play RPC games.
And I used to play by chat.
So there were these wonderful websites
built with the PHP where you can chat
and build your word.
And it was very cool.
and I learned a bit of HTML there back then.
And then a friend of mine said,
"Okay, want to build one
"or one of those play by chart website?"
And I told that HTML was enough.
And I said, yes.
And then I discovered that it was not what was needed.
But instead of just say, okay, we can do it.
I decided to start to learn.
And so I got into university
and I actually left the web development for a bit,
maybe for the better,
because basically I skipped all the jQuery,
the EmberJS phase,
and I come back when React was popular
and I started to look into React view.
And then I saw the talk where Rich presented Svelte 3.
And the moment he said it was a framework
that uses the compiler.
It was like mind blowing for me
because it's such a powerful idea
and it blow me away that no one else ever think of that.
And so I fell in love with Svelte
because it's also very similar here to HTML
and it's very powerful in my opinion.
And now basically I use Svelte for every side project
And soon for work too.
- Oh, nice.
So nice.
All right, you built this very cool project
called Svelte Lab.
How did that come about?
Like what inspired it?
What started the idea?
- It was all Antonio fault.
No, it's because when Svelte Society announced the hackathon,
Antonio said, "Who wants to team up?"
And I said, "Me," because we actually kind of know each other
just by interacting with Svelte Twitter,
because, again, we are both Svelte lovers.
So, for example, we both made Advent of Vue in Svelte
using the Svelte REPL.
So we both are very lovers of the Svelte repls.
And so we started to brainstorming
what we could do for the hackathon.
And I had this idea because I always love to just,
whenever I have to do something,
I want to first do it in isolation.
And it was perfect for Svelte component
because we had the repl.
But then as soon as you start to add something
like navigation, it was not that powerful.
And so we started to brainstorming this idea of our Apple
that can run SvelteKit and tailor it towards SvelteKit.
And also the timing was perfect
because there was the recent release
about the Web Container API and Notebox by Code Soundbox.
And so we tested the beta and decided to go
to the web container API,
and then we started to build the actual project.
- Yeah, so this might be a dumb question,
but where do you actually start
when you're building something like this?
'Cause it's a fairly complex kind of thing, right?
Like you have to combine a ton of different features.
- Yeah, so basically it's a lot of wiring up
parts that do the heavy lifting. We just glue everything together in my mind. So
we use the Web Container API to run Node in the browser. So that's also what
StackBlitz is using and also what the learn.svelte.dev website is using. So we
run Vite and SvelteKit inside your browser and then we basically just glue
it to a file tree and editor. We use CodeMirror 6 so we can also use it on
mobile. And then we also just plug in an iframe where the web container site is
running. And then you basically have it. Paolo did the proof of concept in like one
afternoon or something. It was really crazy. It was, yeah, done.
I mean, it was a proof of concept, a real proof of concept, because it was basically
just a text area, a bunch of divs for the console and an iframe. But actually, the
Web Container API is pretty powerful
because obviously under the hood,
they are doing a lot of crazy things that I don't even know,
but the API surface, it's very small.
It's very minimal because you can mount some files,
you can run some, spawn some process.
And so you just run pmpm create svelte
and it will just create the project inside Web Container.
You can run pmpm-create-dev, pmpm-dev to launch it,
and then you get the iframe URL from them.
So obviously, again, this was a very basic POC.
And then we started to look at a lot of things
that an editor kind of required,
because for example,
the ability to write inside your terminal,
the ability to even just some minuscule things,
like for example, the fact that if you run a command
and then you press arrow up,
you want that command to be shown again.
And in the beginning, we actually created a sort of
terminal, homemade terminal,
but it was impossible to maintain.
So we actually use Xterm.js,
which is another super cool project
because it's a full blown terminal inside
made with JavaScript.
And that actually interprets ANSI code
and it does a lot of heavy lifting for you.
Again, as Antonio said,
we are actually just gluing together things,
but that's kind of what web development is.
- I mean, is this the sort of thing
that like VS Code uses for that terminal
and Gitpod and things like that?
Exactly.
Yeah, exactly.
Paul: Interesting.
So all these giant projects,
they're built on this one small project
that's open source, maintained by this one person.
What's the meme?
XKDC package,
I'm sure everyone has seen it.
The whole pile of different boxes
and then the one small box
that's about to tip over.
just like this one open source project.
I mean, that's happened a million times. OpenSSL is an example of that, I think.
But I guess it's interesting because I always wondered about that sort of thing,
using VS Code and seeing the 7-Lin there and thinking it's kind of my terminal,
but it kind of behaves a little bit differently. And I didn't know why that was the case.
So when it comes to building something like this,
you mentioned it's just like tying together things,
gluing things together so that they're working.
What kind of stuff is, what parts of this,
actually before we head into that,
let's talk a bit about the features
so people understand more what you can actually do here.
So you have a command palette, for example.
I'm sure this is not something
that you could just take off the shelf
like some ready-made project?
Like you probably have to build a lot of this stuff yourself.
Yes, actually, there was a very good project
about a command palette made in Svelte,
but there was some itches that we don't properly like it,
so we ended up building ourself the command palette.
But I think this is also the beauty of open source
because obviously, we borrowed the good part of that command palette
and added something else.
For example, we also wanted the ability to swap files from the command palette.
So actually, just like VS Code, you can run the command palette
and if there is the angle bracket at the start,
you are running in command mode.
Otherwise, you're running in swap files mode.
So there was these little things that we needed
because we wanted to create these.
And so we created our custom command palette,
just for example, like the file tree.
And that's actually maybe the things
that I like to work least in Svelte Lab
because dealing with the file tree and file system,
it's always a mess.
It's always a mess.
But even then we had to do something custom
because there was some very specific issue.
For example, the fact that we wanted specific icons
for specific files.
So we built a lot of things custom
And we had a kind of a roadmark during the hackathon
because we had a minimum hackathonable project.
So it was not an MVP, but minimum hackathonable project
because we knew we wanted some feature
and without that feature,
it wasn't even worth to present for the hackathon.
But then we actually reached the MHP mid-Hackathon,
if I can remember correctly.
And so we spent the last part of the Hackathon
to refine something and to make it as much as possible
tailored towards SvelteKit, because that was our real goal.
Like we wanted an editor that could really integrate
with the SvelteKit development.
- That's impressive.
So I'm looking here at the,
so you mentioned the file tree here,
and I noticed that you hide a lot of the files
that you can usually see in a Svelte project.
And I think that's probably a good thing.
So things like,
I can't even remember what kind of files
that I could usually see in here.
But it's like ignore files and all of this stuff.
Yeah, pretty much all of that stuff.
mostly working inside the source folder. If you're doing quick experiments, you
probably won't even touch anything at the root. So you can just show the file
tree from the source folder so all the clutter just gets away. You can focus on
the actual stuff that you're trying to do and the file tree is a bit more
cleaner. But you can just use a command or inside the file tree in the menu you
can toggle it back and forth. So if you need to edit a file you can also search
search for the file in the command.
- It's like a focus mode.
- Yeah.
- Yeah.
- I wish it was easier to set up in VS Code.
I know that you can, but it's not quite as intuitive
as I would like it to be.
- Yeah, VS Code has some issues that could be a bit better
in some sense.
All right, so you have a command palette
In that, you can do a bunch of stuff.
You can install things like Tailwind and other things
through Svelte Ad, which is a great project
by Jay on the Discord, Jacob.
And yeah, I assume this was mostly just
building a modal that popped up
and then you actually just run the command in StackBlitz.
Maybe I'm simplifying here, but along those lines.
- Yeah, that's basically it.
We just have the buttons for each
of the packages Svelte provides,
and then we just run the terminal command,
and then it does the rest.
So again, just plugging stuff in,
just gluing stuff together to make it a nice experience,
but the heavy lifting is done by the Svelte app on that part.
- Exactly, but it's such a nice user experience
on the front end.
You plugging all of that in for you
makes a nice developer user experience on the other end.
- One of the best command in my opinion
that I use a lot is searching the SvelteKit doc
right inside SvelteLab because it helps you maintain
the focus. - The context, yeah.
- The context, exactly.
And very often I don't even need to open the,
because if you then click on the record,
it will brings you to the actual SvelteKit documentation.
But given that you also get a bit of context
inside the search, sometimes I don't even need that.
Maybe I don't remember the signature of a function
or, and so I just type there and search.
Obviously the create route, for example, is another one
because we have it in VS code
and it's very, very good and very, very useful.
And obviously, StackBlitz
will never implement something like this
because they have to be as broad as possible.
So for example, if you open a React project
inside StackBlitz, there's no way to create a route.
So that's the kind of things that in my opinion,
made Svelte Lab really tailored toward the SvelteKit development.
So, I guess, following up on that,
these very specific Svelte and SvelteKit features,
do you have any other ideas that you want to implement that you haven't gotten around to yet?
I'm not sure what that would be, but...
We are actually, for the moment, we are trying to enhance the experience in Editor,
because one key part that in my opinion is missing is the integration with the Svelte language server
and the TypeScript language server, because, I mean, having auto-completion
and having diagnostics, it's very, very important in my opinion.
That's probably why 90% of the people use TypeScript.
And so it's very, very important to have these.
We have made some progress because right now
we are integrating the diagnostics with SvelteCheck.
So we use SvelteCheck under the hood
to check your whole project.
And so you get errors and diagnostics
inside the Svelte file and the TypeScript file
Svelte file and the TypeScript file from Svelte check.
But we are also trying to actually use
the Svelte language server inside the web container API
and communicate with that.
We are missing a bit of things because there's actually,
I think it's actually a bug because we are also
communicating with the StackBlitz team
because they actually like Svelte Lab very much.
So we are communicating with them
and there is actually, I think it's a bit of a bug.
So if I run the Svelte language server through MPX,
it doesn't work and it should work.
So they are actually trying to fix this.
- So hopefully at some point,
it'll just start working for you guys then.
- Yeah, exactly.
- Magically.
I have to say the StackBlitz team is one of the most collaborative
and working with the browsers and other people trying to get this out and working.
I mean, it's also good for them as a company, obviously.
It's their product and they want it to work well,
but they're trying to do something good for the ecosystem too.
They actually made a PR for Chromium, if I can remember correct,
to fix a bug that was affecting the Web Container API.
Yeah.
Yeah, they're very nice people.
I got to meet their developer relations person, Sylvia,
at a conference a while back.
Super nice.
Yeah, okay.
Where is this hosted?
Is this all hosted on fly?
Because I can see some flytoml stuff in there.
It's all on fly.
Actually, it's just the pocket base instance
that is hosted on fly.
And the VALFLAB is actually all hosted
on the edge on Vercel.
- On the edge, nice.
On the edge as well, wow.
That's cool.
- Did it go down yesterday?
- I think no, because...
- Yeah, edge is on Cloudflare, right?
- Well, it is, but it uses AWS routing from that region,
so it may have been inaccessible.
It depends on various factors.
But I think even Edge went down, which is a shame.
- Yeah.
- All right, so let's talk a bit
about your choice of PocketBase.
Why did you end up picking PocketBase?
So, PocketBase, for anyone who's not aware,
is like an open-source Firebase project, kind of,
competitor or alternative is maybe a better word.
- I think it just speaks to me because it's similar to Svelte
it's super simple, just like one thing very well,
very focused, very easy to set up
and it just works out of the box
and plays pretty nice with Svelte as well.
- Also the front end for pocket bass is built with Svelte.
- Yeah.
Yeah, it is a very nice project.
How do you use it? Do you use it for authentication of users?
Do you store files? How does it work under the hood?
What do you do?
We use it for authentication.
A basic OAuth flow was simple enough,
It's provided, so we decided to use it.
That makes sense.
So we use it to authenticate,
and then we also use it to store all the repls.
And another thing that because we choose--
the reason because we choose fly.io
was because we wanted something very simple,
and PocketBase under the hood uses SQLite.
So we don't want something heavy.
I mean, not that Postgres is heavy, but it's heavier than SQLite.
I mean, it requires another server or instance of some kind.
And so it was very easy to set up because actually it was, I think, a Docker file on
fly.io. It's not very heavy. It's not very...
And it's very easy also to work with.
And there's also the ability to store actual files.
But since we actually needed the whole file structure,
it's just a blob, a big JSON inside a pocket base.
Okay, so the whole file structure,
including the code for each file,
Is that just one big JSON?
Oh, interesting.
I imagine that could get hairy
if someone has a huge project in there.
That's why, for example, we limit the file,
because we recently added the file upload ability,
so you can upload assets, but we had to limit
the amount of data.
But at the same time, if you are building a super huge project
inside Svelte Lab...
You should probably build it locally.
Exactly.
- Not that it makes sense. - Svelte Lab is for quick experiments.
So we actually thought about maybe we should actually upload files.
But then, for example, the whole Svelte Lab repo,
excluding Node modules that does not get sent to PocketBase
is like 200K.
So if you extrapolate just the files, just the code,
obviously, it's not that heavy.
So we are pretty confident that we can continue like this.
And if someone will upload a Windows file system inside...
That's
We are screwed but we will shut the flight or I/O instance down
Yeah, I don't think I have a question about sorry again
No, no
Well, my question really isn't really spell related. It's kind of pocket measure related
but obviously, PocketBase is SQLite,
and SQLite has this JSON data store.
But where is that JSON data store stored?
Because I thought Fly was like basically Docker containers,
and Docker containers are ephemeral.
So how does it get persisted forever and ever and ever?
Yeah, you can attach a volume in Fly.io.
Okay, cool.
There's also-- I mean, they have a pretty generous free tier
also for volumes. In the future, we might, because one thing that we wanted to add was
a bit of some replica around the world on the edge to facilitate that. But also, we're actually
using a regional edge on Vercel. So, it's actually just on, I think it's in Washington.
is closer to our instance of Flight.io.
So when it comes to using PocketBase for something like this,
I have no idea what kind of numbers you're seeing,
but you always hear this thing about, "Oh, you shouldn't use SQLite
for things that are write-heavy," etc. Have you seen any issues
with people complaining about not being able to save
or stuff like that?
- No, and I think also because from what I've read,
I think PocketBase, you can easily handle
like 10,000 connection concurrently.
So, and we don't have 10,000 connection concurrently.
We wish we have.
but obviously we are on a much smaller scale.
So we never run into problem.
I hope someday we will run into problem and we can--
- It's a good problem to have.
- Exactly, it's a very good problem to have.
- Yeah, okay, cool.
Any other things that we haven't touched on
that we should maybe talk about?
- One thing I would like to say is because SvelteKit
like the basic or the core for everything you want to do in Svelte.
It's really nice because we don't have to make any assumptions. We can make
assumptions on what kind of build setup we are using and we can like tailor it
for any kind of Svelte application. So from small component tests to like a
whole routing test you can do everything with SvelteKit and we can just plug
into that with one unified tool.
So that's really nice that these things
are so coherent and working together.
Paul: Yeah.
Yeah, so I just got an idea here.
Have you thought about having,
so at the moment when you go to the Svelte Lab website,
you just get thrown into a Holo World kind of project.
What about having different kinds of basic project structures
that are already set up? Is that something you've thought about?
That's something that we need really to address.
And so I want to publicly say that we have documentation.
So if you go to docs.svelteclub.dev,
because just as what just happened to Kevin,
we actually have templates.
So you have different kinds of templates.
You can set up your default template from the command palette,
or even just open a new template.
So we have, for example, TypeScript template
where TypeScript is already set up.
We have Tailwind template.
We have Tailwind plus TypeScript.
We have MDs VEX.
And we are also, one of the idea was to being able
to tag one of your REPL as a template.
So you can even just fork it,
but other than fork a REPL,
you can also share your REPL as a template
so that the other people just go and can choose your REPL
as a template, as a basic template.
Oh, nice. I completely missed this feature.
Definitely something I'm going to take a look at.
Yeah, that's like kind of an issue we ran into
because we have so many features,
but they are all hidden in the command palette.
So we just recently added a new menu bar,
So you can have like a drop down of different sections where the features
are maybe a bit more discoverable. But yeah, it's, it's also where we have the
docs now. So people maybe have more ways of finding stuff.
Could you maybe have like, like a modal that pops up? So I don't know if you're
using a service worker of some kind. Like, every time there's a new version,
you can pop up a modal that shows like a change log. Oh, here's the new
Yeah, I'm always against having something that interrupts because if I want to experiment,
I just want to go on the page and start editing.
And so that's why I don't want anything blocking.
But then again, like, if you only do it for major new features, then I'm sure...
Like in VS Code, when they have a new change, it like pops open a new tab.
And I almost always just X it out.
Like I never really...
It's just interrupting to your flow.
Yeah, no, you're right.
Could also have it down in the right corner,
if you don't hide that thing.
Or I like the spell.
- Yeah, where it's the intro, yeah.
- Yeah, something like that.
- Pop over, or pop up.
- Here's a quick word from our sponsor.
- Vercel is the platform for front-end developers,
providing the speed and reliability innovators need
to create at the moment of inspiration.
Founded by the creators of Next.js,
Vercel has zero configuration support
for 35 plus front-end frameworks, including SvelteKit.
We enable the world's largest brands
like Under Armour, eBay, and Nintendo
to iterate faster and create quality software.
Try out Vercel today
to experience the easiest way to use Svelte.
- And also another thing that I would like
to go towards with SvelteLab,
because one thing that I really love,
for example, about CodePen
is the ability to see what other people are doing.
And I think this is also very true for the Svelte repl
because if you search something Svelte related on Google,
you will get a lot of Svelte repls
that are doing maybe just that thing
that you're looking forward to doing.
So I would like to experiment a bit with these,
like having a showcase page where you can
look at what other people are experimenting on Svelte Lab.
Right now, for example, you can share your profile page
to let other people look at all your repls,
but I don't think anyone has ever did that.
I mean, I know about this feature and I never did it,
so I think a lot of people...
Yeah, basically because every single repl is there,
So all the header work stuff where we just tried out is also there.
So that's also why we think about adding some type of collection or playlist
where you can like group different reports together.
So if you have like a bug report and have the solution
and you want to keep them together, you can do that that way.
But yeah, that's not implemented yet.
And we're just thinking about how that could look.
It would add a bit of a social feature, but you would also get more traffic
and SEO to your site.
So I think that would be beneficial.
Also, one thing that I want to say is the fact that you can download
a Svelte Lab project.
So, in the command palette, you can actually download that zip.
And I want to say it because, luckily, there are quite a few people
that are using Svelte Lab to provide reproduction for bugs in SvelteKit.
And I saw a lot of times maintainers that say,
Okay, can you please do it in StackBlitz
because we can download this.
So you can download it.
[LAUGHTER]
So just a question about other features.
What about collaboration? How difficult is that?
Obviously, I guess it somewhat depends on the CodeMirror stuff.
Yeah, I think collaboration is actually, I think,
a core package of CodeMirror.
But for the moment, we don't have collaboration.
And one of the issues might be that, obviously,
we will need another external service for the WebSocket.
Because--
I mean, PocketBase has support for real-time.
If you can use it with the CodeMirror stuff.
Maybe. I don't know.
Yeah, maybe.
Maybe that's worth a try.
- It's a good idea. - That would be cool.
But then you have to build all of this stuff around like,
who gets to edit, who is allowed to delete ad files,
all that stuff, and that's probably like, a lot of stuff to add.
- The next hackathon. - Yes, next year.
So I think that's it for my questions at least.
Brittany, Anthony, do you have any?
- No, I think the only things that we didn't mention,
we talked about it beforehand,
but we were talking about web container support
being in Safari.
I tried it last weekend on an iPad
and you have to actually use the Safari browser
on an Apple product.
So I use Firefox and Chrome and Edge
and you can't use those browsers
even though they use Safari under the hood,
you have to use actually Safari, which sucks.
But...
- I'm actually using Safari now to check out the Svelte.
- Yeah, 'cause you're using it.
- Of course you are.
- You like Safari.
- That is true.
(laughing)
All right, so, yeah.
- Yeah, my only question really, I guess,
I guess is sort of aside from adding features to this,
where next?
What's the next big thing?
I think the thing we are focusing right now
is providing the correct IntelliSense for Svelte project.
So this is a thing we are kind of focusing right now
and then collections, absolutely.
And then we are kind of experiment.
Again, this is a bit of a busy moment for us.
So we are actually working on Svelte Lab,
but not as much as I would like to.
I would like to work a bit more on Svelte Lab,
but obviously times come and times go,
but we will continue to work on Svelte Lab
because again, it's our baby and we love it
and we want to bring it to the next level.
- Cool.
- And also people are using it and people are sharing links.
It's so amazing to see people from the community
sharing examples using it, it just warms my heart that people actually use it.
Yeah, because it...
I know y'all are both really busy too, but it would be really nice to have some of
those features in integrated into like VS Code too. If anybody wants to make an
extension that like does that, that would be great to have like just spelt
add thing where you could do the command palette and do spelt add or have the
hiding the stuff on the sidebar would be great.
I've always thought like Svelte Ad should be like a part of the Svelte project in general.
The actual Svelte extension?
Yeah.
Yeah.
Yeah, or even just like, because now it's a separate external project.
Like, I understand that they don't want to bring on more packages and take on more responsibility, but.
Or bless anything.
Yeah.
But it's kind of like one of those essential things that I think more people would use it if they knew about it.
And I think blessing it would help with that.
Would do that, yeah.
I mean, I actually, sometimes I also ask the cav about this
because I'm kind of vocal about Svelte Lab,
but that's not because I built it.
I mean, that's also because I built it.
I'm proud of Svelte Lab, but it's very...
Exactly because I think it's something that the Svelte ecosystem needs.
So if tomorrow Puru comes in and say,
"Okay, I rewrote the whole Svelte REPL,
and now it's just like Svelte Lab,"
I will be vocal exactly at the same way.
Yes, something tells me, though, that we're going to have the regular REPL.
And I think that it makes sense to have them both, right?
Because just building a,
you can definitely feel the difference
in snappiness, if you will.
The amount of time it takes to instantiate a project
and so on.
So for quick Svelte-only stuff,
it definitely makes sense to have the REPL.
And that's also what you kind of want to,
I think that's what you want to show people first as well.
Like, "Oh, here's how to use Svelte,"
And then you move on to SvelteKit and SvelteLab.
- Yeah, that makes sense.
- Yeah, that makes sense.
- Things, for sure.
- Okay, so we have reached one of our standing topics
for every episode.
We are at the unpopular opinions section.
And today it seems like Brittany has one.
Let's hear it.
I have one because we were talking before the episode about a design that I received today
that has this list view of a product card that has, it's basically like a table view and
there's too much data in it.
And so it looks like a table.
And we got in this conversation and Kev, I think, said, you should just use a native HTML
table. And I said, they're awful because they're not responsive. So you use like
the native table element. And then when you get to a mobile viewer, if you start
it like mobile responsiveness, you have to use divs and then change it. And
that's awful to do like in code, like you have to use some kind of logic to make
that swap. And I don't like doing that in in the code, I would rather just use the
same markup and the same CSS and allow the CSS to do what it's good at rather than using
JavaScript to do something that the CSS should be doing.
We do this for CSS by the way.
I'll show you the code but there's a little known attribute called content and what happens
is when you resell one of our tables just using pure CSS it drops into cards with no
logic, no JavaScript, nothing.
display content? Yeah, what happens is you add on each header element, you add an attribute
called something like content, and then you can address that content thing in CSS and
grab the text. And so in pure CSS, you can turn it into cards, which will basically give
you like, you know, a card representation of the table row, right? So you've got a bunch
of cards. Like it would change it to a grid view basically. Oh, interesting. Yeah, it
changes it to a card view straight down. I've never seen anything that would do that. Yeah,
I would love to see this as well.
I think everybody wants to see this, so please make a cheat sheet about these things and
make it go viral because I will be as vocal about this as I am vocal about Sveta.
Just left the My Unc logo on there for some free marketing.
I'll do it.
All right, next up.
I think you all have unpopular opinions,
so I want to hear these.
Maybe, Antonio, maybe you could--
Yeah, I think we are using too many micro-blogging sites.
Now we have Twitter, of course, we have Mastodon,
we have Blue Sky, and I have not set up
any kind of cross-posting, so I'm doing it by hand,
and it's awful.
I don't want to do it.
- Is it just me or did BlueSky kind of die?
- I don't think it's dead.
- I haven't even looked at it in like a month.
- I'm currently using it, but I rarely check on BlueSky.
And I think the problem of BlueSky
is that they are missing a For You algorithm.
Now they are released the custom feed things
and someone actually just discovered
a home plus feed that should be kind of for me.
But I think the real power of Twitter,
I mean, at least for me,
is the fact that you can just browse for me
and get to see what other people
that are not inside your circle,
what other people thinks.
That I think is very key, is very important
because if I have 20 subscribers,
I mean, if I have 20 follow, it's kind of boring,
because I just see what those 20 people have to say.
And that's kind of Facebook,
and that's why Facebook has died, in my opinion.
- Yeah, you kind of need that extra big feed
before you get to,
like before you have followed enough people,
you need something to fill out the quietness
or silence or whatever you want to call it.
- Well, I think even when you do follow a bunch of people,
those people have a set of opinions
and I think that it's nice to see other opinions
interpolated. - Oh yeah, for sure.
Absolutely.
Yeah, no, you're right.
- You get inside a box if you don't,
like you can get inside these like circles
and not hear outside of the circles
and that's kind of the problem with the world
a little bit right now.
- Yeah.
- Twitter's encouraging that now, unfortunately.
- Anthony?
Yeah, my my rant my whatever is I mean it's it's kind of recycled for an old one
But I feel so passionately about it that I have to say again notion is not good. You should not use it
notion is just ever there is like agreed this there's a guy who
He made a no consultancy back in the day
I think he was at one point part of the core no jazz team, but he's created an alternative to notion called desi pad
and i could be a job and that's and that's the kind of actually
he's talking to his hosting companies
what's it called i remember that
is called new no jose pad
new also yet that that that that was called a c_-tent
so he was a guy's a crazy school
called a c_-tent and
it's kind of like notion but you have
a focus on numbers
so some of the three nation at a bill
and it's great it's great if you try to build and
I mean, it's all closed beta right now,
but it's interesting to like look at what they've done
and they've got some demo workbooks,
but basically pulling a bunch of stats
in a kind of database format
and then writing articles that use those stats
and visualize them and do charts and things.
So if you're presenting stuff as a business,
like it's really cool for that.
And I think, you know, this is kind of
like the ranting section.
This isn't my pick, this is my rant really.
But I think that Notion tries to do too much,
as I said before, and Desipad fills a niche
whereby you do one thing really well,
Airtable does one thing really well.
Coda actually focuses on doing one thing really well
and it lacks some features and Notion does.
There's space for all these tools
and interrupt between them,
but I think one that tries to cover all bases
is never gonna be good.
Unfortunately, that is Notion right now.
- Yeah, I really like--
- The main problem I have with Notion is just it's so slow.
I mean, they need to rewrite it in Svelte
and then maybe it's a good tool.
(laughing)
- I think rewrite it in Svelte
and maybe swap the database.
You know, there's a few things that can go on there.
- Account management, like you can't copy and paste,
Especially on mobile like it's just there's lots of things that are problematic with it, but I do like some on desktop
It's just you can't copy paste full stop no matter what you try and do you have to find this?
Yeah, visible pixel the middle of white space to grab the box. Right like
You can't delete you can't delete properly doesn't delete it just
Else random. What's the other open source tool that like Cassidy Williams is always on about starts with an oh
Obsidian.
Obsidian, yeah.
It's not open source though, sadly.
Oh, it's not?
But it's really good.
No, someone's made an open source one as well,
and I can't remember what it's called now.
Lock?
Yeah, I mean...
Something with lock, I'm not sure.
I'm not sure.
Anyway, that's my rant.
Next notion, again.
All right.
I actually have two unpopular opinions,
but one is very quick,
because I just thought about the fact that
that you can rewrite a notion in Svelte.
And I'm sure if someone do it,
I will call it like Svotion,
something like that.
And I kinda hate this kind of names,
because I mean, it's cool.
Some names are cool.
Like for example, MDsvex is cool in my opinion.
- You know, that's not how it started.
I'm pretty sure it started out being a very, very contentious name.
It grows on you.
I actually wanted to call the Svelte Lab "Svensh", like a workbench.
But Paolo was against it.
But Svensh is the tool.
Yeah, we talk about...
No, not Svensh, it's Svenvel, so like an anvil.
Yeah, I was really forcing it.
I opposed it because I kind of don't like
that the forcing the "sve" inside names
to if it's made with Veldt.
So this is a quick one.
And the other unpopular opinion,
which I hope it's not unpopular,
but I think PWA are fine.
I mean, I think PWAs are way ahead instead of,
I mean, especially if you need to work with React Native
And maybe I'm saying this
because I'm currently working with React Native,
but the amount of weight you take on your back
if you're working with React Native
and all for maybe a bit of a smoother animations
because I really don't see the reason to have an app,
especially because on Android,
you can install PWAs as with the web APK.
So you actually get a real app experience
and the amount of things you can do with native,
I mean, PWAs can do a lot of things.
You can vibrate, you can access geolocation.
And the only thing that you miss is push notification,
but even then in React Native,
you still have to set up Firebase
to have push notifications.
So actually, you can't push notification
even in React Native.
So what's the point?
Paul: I think Safari, just recently,
on their latest keynote,
Apple introduced support for push notifications.
So it should be possible to do now
in all of the browsers, which is great.
They actually pushed out a lot of good features for PWAs.
I sound like a spokesperson for Apple, sorry.
I really do.
But honestly, I think now that we have these features
that Safari has really lacked, and because Safari
has been the only browser on iPhone,
we can now finally actually make PWAs that work
across all phones.
I'm actually going to go out on a limb here
and say that I'm going to make a prediction.
And I think that we're going to see more PWAs and less native apps.
Maybe we'll see apps built using things like Capacitor, which are basically just
like web views wrapped in like some native shell or something as far as I
understand it.
So yeah, maybe that's not such a spicy prediction.
I think the, one of the biggest challenges is the differences between all of the
mobile phones and the way CSS plays between mobile views, between those devices.
There's different responsive units now.
We have, I don't even know what all of them are.
There are like a hundred of them.
Yeah, there's like lots of them now.
There's different things that you have to do because some browsers put their nav bar
on the bottom, some put them on the top.
It's weird how it shifts on mobile phones.
So like, there's still a lot of work in that space.
But if we could do some CSS things,
I think there's some things.
- Yeah.
- The new dynamic viewport, hey,
the dynamic viewport are not just to address this.
- No, no, I mean, they're, I don't know.
I don't remember exactly what all of them are for,
but they're like so many new--
- They are trying to address that.
I don't know if they do completely address it,
and I don't know what the support is.
I haven't fully looked into them yet,
is what I'm getting at.
I don't know if we're really there yet.
- I'm sure we'll have to wait like three years
before Safari implements it.
No.
Or I guess Firefox nowadays.
Yeah, so I think the tradeoff there is still
kind of in the favor of PWAs, right?
Because you have, like if you build something native,
you still have to configure it for Android
and then configure it for iPhone.
It's just like--
- Well, we're having this discussion at work too.
We have a PWA and a lot of people at work
use their mobile phone to do our,
they add things to their cart
and then they go to their desktop
to actually place the order.
So we need a good mobile view,
But we don't have teams that could build a native app.
We build in Svelte.
So there's not really a good native version
of that right now.
We would need to hire people
that could build in a native platform.
So it's a trade-off right now.
- Don't do it.
- Yeah.
- Free yourself.
- Exactly.
(laughing)
We have a PWA.
So it's, yeah.
- Yeah.
- Yeah, it's not just that it's easier to build.
It's also that I don't really see
the need for a native app.
Once you can do all you can do with PWAs
and you can do a lot, like again, accessing, vibrating,
it's a lot of things that you can do with PWAs.
I really don't see the benefit of learning a new platform
because you have to learn React Native.
Also, you also have to have knowledge about Android
Android and iOS development, because you will have to touch inside specific files and it's a mess.
Yeah. All right. So I think that's our unpopular opinions. I don't have one.
Maybe my pick actually is an unpopular opinion. We'll see.
So, do you guys have any picks? Or maybe I should go first.
So my pick is global warming is great.
And it's tongue in cheek because it's making Sweden very nice and hot and awesome for me.
But everything else is probably going to the poop pile.
So yeah, it's just a joke.
But that's my pick.
And the polar ice cap around you is melting.
Yes.
I have a pick, but it's for newly come parents, because it's actually a cartoon that my son
likes to watch, which is called Bluey.
And I really recommend this cartoon because it's wonderful.
I very often find myself to just watch Bluey while my son is doing other things, because
it's good.
It's basically a cartoon that talks about a family of dogs that lives in Australia.
And they are super into imagination games.
So there are those two small dogs that do all sorts of imagination games.
And the father and the mother just go all in on the imagination games and continue to
play with them.
It's the best cartoon for a parent watching with a child.
It hands down the best cartoon.
My kids love it and they're older kids too.
They're 10, 9 and almost 9 and just turned 7.
So I still love it.
My pick is Diablo 4.
I just started playing two days ago and loving it so far.
It's been really fun.
Beautiful game to play.
Entertaining.
Yeah, I saw someone got it running on Mac even.
So maybe I should try it.
Is that impressive?
I guess.
Well, actually, actually, yes.
Yes.
So, Apple...
This is so sad to me how long Apple has went with like not having a decent gaming system,
but they can like do that because they've...
I like the fact that the whole salesperson,
Apple salesperson, Kev, continue to emerge.
(laughing)
- I have played every,
well, I guess I didn't play Diablo 1.
I played Diablo 2 back in the day.
It was one of my first MMOs.
I played Diablo 3 and then Diablo 4 now,
but this is the first one I've played on a console.
So I'm playing this on PS5.
I played the other two on PC.
So it's very different. - Oh, it's on console?
Yeah, so you can play it on like anything basically and I'm playing it on PS5 which is very different
but it's kind of freeing not like sitting at a computer like you can play with the controller
and you have to get used to the controls doing that but it's a much easier experience I think.
How does it work? Do you have like a cursor or are you controlling the character?
No, you run. It's just like a normal platform game. Like you run with the joypad and then
the normal buttons because you would play with the mouse like with the
left and right click that is x and square and then it just assigns buttons for the skills.
Maybe that's what I remember you like click and then the character goes there
But now we just use the stick.
- Yeah, you just run with the joystick.
And so that's nice. - That's much better.
- Yeah, it is.
It's so nice.
- All right.
Antonio, do you?
- Yeah, so My Pick is also a video game.
I'm still obsessed with The Legend of Zelda,
Tears of the Kingdom.
I've put like 50 hours into it,
but I feel like I've only scratched the surface.
It's amazing how full of stuff to do this game.
It's crazy and kind of makes me anxious
because I will never be able to do everything,
but I'm having a very good time.
- Yeah, so I was talking to a friend
just before we started recording the podcast
and he was completely sold on the game.
Like, apparently you can make machines?
- Yeah, you can like build crazy contraptions
and stuff that moves on itself.
And yeah, it's crazy.
It's the most open open world game right now, I would say.
well
it's a good idea
uh...
alright anthony
yet uh... say my pick is is weird because uh... i was explained why my
pick is not normal sounding every time that i
but anyway and my pick is basically i don't like the excuses uh... and it's not
around to tell a key speeches because i find them
irritating and again the way they're trying to cycle stuff like that but
spot one
Plus I bought one.
And the reason I bought one, and it's quite different to a regular one, but I think walking
to and from nursery every day a lot or something that I did whilst I was trying to pick up
the child from the cot or something caused my tendon to have an injury of some sort.
And it made walking very hard and quite hard to heal and take a lot of recovery.
So I tried to cut down on the walking.
That was one of the piece of advice I got from my doctor.
And I was thinking if I could cycle there, it would be great because I could cycle there
one way and push the pram back, but I have to lock my bike up at the nursery, which I
don't want to do, and vice versa on the way back.
It's going to be really irritating.
I was trying to think of solutions whereby I could have some form of transport that's
not like getting a bus or whatever.
And so I realized if I get a really, really lightweight e-scooter, and I searched Amazon
and stuff for ages to try and find one, I could actually put it on the pram when I got
nursery and then push the pram back with the scooter and the child in it. And I found one
on Amazon called a Mega Wheels S1 and it's eight kilograms in weight, right? And that's
that's ridiculously light. If you imagine most e-scooters are quite big heavy things, this one is
it looks like a regular scooter, the battery's so slim on the bottom and it's dead cheap as well,
like they don't cost any money. You know, relative to the 500 quid that scooters cost,
this costs about 150 pounds. So it's really, really lightweight, really, really small,
compact. I stick it on the bottom of the push chair and just walk back with it and the child
in one. So it's really convenient because it means I've cut my walking down by half,
which is not normally a goal I'd have, but there you go.
Yeah, that sounds like an anti-goal.
I have to cut my walking down if I want to continue walking, if that makes sense.
No, I get it.
Yeah, all right.
I think that's all of the picks,
all of the unpopular opinions.
And yeah, that's it for us.
Thank you, Antonio and Paolo for coming on
and talking about Svelte Lab.
Paolo: Thank you so much for having us.
It took a bit longer to get this podcast sorted out,
but we finally did it.
And to everyone else who's listening,
We'll see you next week.
Bye.
- Bye.
- Bye.
- Hey, it's Kavir.
If you like the show,
please drop a review on your favorite podcast player.
It would help out a lot.