Svelte Radio

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
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
  • Brittney: Diablo 4
  • Kevin: Global Warming is great (wtf?!)
  • Paolo: Bluey
  • Antonio: Zelda
  • Antony: Light Weight E-scooter
    • Megawheels S1

Creators & Guests

Host
antony 
Dad / @SvelteJS maintainer / @SvelteSociety co-founder / Svelte Radio host. Born at 341.57 ppm CO2.
Host
Brittney
DS Eng @Provihq 🧜https://t.co/U8JoqVO4Sm 😺https://t.co/5FKTbGIW8d 👩‍🏫 https://t.co/wGvIldEAIe
Host
Kevin A. K.
Co-founder of Svelte Society 🌎 Organizer of Svelte Summit 🏔 Host of Svelte Radio 📻

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.