Subscribe
Share
Share
Embed
In this episode of Svelte Radio, join hosts Brittany and Kev as they dive into the world of web development with their guest Sam, a technical writer at Prismic. Brittany shares her latest experiences battling with Tailwind, Rails, and Svelte, emphasizing the learning journey that comes with navigating the complexities of modern web development. She also offers a valuable tip about CSS line height, advising against the use of rems and ems due to their unpredictable inheritance and suggesting more reliable alternatives.
Recorded on October 11th.
Description
- Who is Sam?
- Svelte Starter Template
Unpopular Opinions
- Brittney: Meetings are not work.
- Sam: By 2030 we will reach 2.0
- Kevin: -
Picks
- Kevin
- Sam
- Brittney:
Creators & Guests
Host
What is Svelte Radio?
Things about Svelte. Sometimes weekly, sometimes not.
[intro music]
Hey everybody!
Everybody? Everybody? What's that?
I don't know. Hello everybody!
Welcome to another Svelte Radio episode.
I'm not going to do a retake of that because that was funny.
I'm joined by Brittany. Hello Brittany!
Hi!
Hey! And we have another guest today. Sam, hello!
Hey Kev, how's it going?
Hey! Hey! It's going great. What about you? Are you excited?
Yeah, I'm doing good. I'm nervous, of course. This is the big weeks.
Oh, don't be. No!
Nervous? Come on!
You're among friends.
Folks chatting is how you should look at this.
I do feel like I'm among friends.
That's good. That's good.
Alright, Brittany, what's new since last week? What have you been up to?
Not much. Just still fighting with Tailwind and Rails and Svelte and all the things.
Yeah. Yeah.
All the fun stuff.
Yeah. Oh, that sounds like some exciting stuff.
It is. It is a learning experience.
What's your way of putting it?
I mean, everything is learning. Like, every day I learn something new.
So, it's interesting.
I did learn something.
I mean, at the end of this, you will be an expert on this.
What did I learn about line height the other day?
I learned that you shouldn't use rims and Ms for line height,
which I did not know because they can inherit funny.
Unexpectedly inherit in different ways than you expect them to.
So, you should either use pixels or percentages or the non-percentage values
because then they do what you expect them to
because rims go from the root value of the font size
and Ms go from the parent value.
So, it might do an unexpected thing if you use rims or Ms for line height.
Right.
So, I learn something new every day.
Today I learned as well then. I mean, I had no idea.
Yeah, exactly.
Yeah. So, what have I been doing this last week?
I've been rebuilding the Svelte Summit website.
It's starting to become a dynamic website now.
So, I'm going to start adding all of the old conferences back to the page.
Oh, sweet.
Which is exciting.
Yeah.
Almost done.
Are you using something as the back end for that?
Yeah, just pocket base for now.
It's not very complicated.
Kev, we talked about the Svelte Summit website last month or two months ago.
Yeah.
And you planted a seed for me.
And I just rewrote my SvelteKit tutorial
and used the Svelte Summit website as the inspiration for that.
Oh, really?
Yeah.
So, it's like making a clone of the Svelte Summit website.
Hmm.
Yeah, we saw that on Coding Kit.
Then it's going to be outdated then.
Yeah.
I mean, it's not exactly the same, but I was like, I really like the Svelte Summit website.
It's nice. It's playful.
It does what it needs to do.
And so, it was perfect for doing a tutorial.
It really is quite a basic website, right?
I think it would be amazing if you just live streamed this
so people could see how this stuff works.
Oh, like rebuilding the Summit?
Yeah.
The thing is with doing streams for that is that you kind of have to set it.
It all becomes a bit of a chore.
Like every time you want to work on it, you have to like,
"Oh, it's time to set up some recording equipment.
I'm going to get my microphone.
I'm going to do this and that and this."
Oh, you just have to have all that stuff set up ahead of time.
Yeah.
And just hit play.
Like I told you last week, I think it was last week, I've switched my setup,
so now it's all like my phone.
Kind of mobile and ready.
Yeah, exactly.
And it's been working great.
I'm still amazed by the quality of the iPhone camera as a webcam.
It's actually almost as good as the DSLR
and without the green flashing that I've always had issues with.
Anyway, that's a lot of talking about this felt Summit website
and my recording setup for some reason.
But let's get into the actual show.
Sam, why are you here?
No, I'm just kidding.
Who are you?
Who are you and why are you here?
Things you say to a burglar in the middle of the night.
Yeah, so I mean, for the purposes of this interview,
I am a technical writer at Prismic and I work on our Svelte integration.
So I do some kind of like--I have some sort of DevRel capacity.
More generally, I am like a Svelte enthusiast.
I have done a few small projects with Svelte myself.
And yeah, I think that covers it.
Yeah. What's your background?
Have you always used Svelte since you were born or did you--
Yeah, I was doing the 1.0 back in the early '90s.
My background is actually in journalism.
I did some like feature writing for the newspaper
and then I ran like a website for a magazine for many years
doing writing and content management using WordPress.
And I hear this from so many people who wind up working with Headless CMS
is that like they started in WordPress and they just found it so frustrating
that they were like--they decided to dedicate their whole lives
to never having to use WordPress again.
And that's kind of what happened to me.
In 2019, 2020, I decided to do a career change.
I was living in France at the time, so I moved to Paris to go to--
I went to a coding bootcamp, got to Paris March 1st, 2020.
My wife got COVID March 12th.
I got COVID March 13th and the country went into lockdown March 14th.
That was like right at the start of the COVID pandemic, right?
Yeah.
That was really bad.
Yeah, it was intense.
That was when we had no idea what was going on.
And my program, my coding bootcamp was supposed to start March 21st.
And like March 15th, I'm emailing them like, "What is your plan?
Are we still coming to campus?"
And I'm like annoyed that they don't know what's going on,
which just tells you.
But I did the bootcamp online.
Anyway, I mention all of this because it was actually in the context
of doing that bootcamp where I was learning the Mern stack
and getting familiar with React, which was okay,
but let's be honest, not that much better than WordPress.
And there was an article in Wired about Svelte where they interviewed Rich.
And I read that article and I was like, "This is what I want."
It's like ergonomic.
It's designed to be really, really fast.
It's just so common sense.
It's so practical.
So I used React in the bootcamp, but then my first goal
after finishing the bootcamp, this was like May 2020,
was to learn Svelte.
And then by happy coincidence, I wound up finding a position at Prismic,
which is headquartered in Paris, just a few blocks away from where I was
living at the time.
And in the interview, I told them I wanted to be working on Svelte,
and they said to me, "Look, we need to do a Svelte integration
so you can be our Svelte guy."
So I joined the team as kind of like an entry-level technical writer.
But my first month there, actually, everyone was on vacation
because, as you know, the French go on vacation for all of July and August.
So I was alone without a babysitter.
And my first month on the job--
Welcome to Europe.
I love it.
My first month on the job was literally just learning all of the frameworks
that were popular at the time.
So I did some more React, Vue, Next, Nuxt, Gatsby,
and a little bit of Svelte.
And then over the course of the next--I mean, that was a little more
than three years ago.
So since then, I've been working on our Svelte documentation,
and then the first iteration of our Svelte library,
second integration of our Svelte library,
and then now most recently we have this low-level Svelte integration
with our developer tool called Slice Machine.
So now we have this very full-featured integration with Svelte,
which I'm thrilled about because it means that I get to do all my demos
and podcasts like this in the Svelte world, which is awesome.
That's awesome.
Now you get to use what you love.
Exactly.
And I heard your unpopular opinion in there.
You got it in early.
Which one was that?
That React is just marginally better than WordPress.
To be fair, I never actually did any PHP,
so that is a totally unqualified opinion.
Sounds pretty qualified to me.
I did as much PHP as if you've ever had the experience of using the
WordPress UI to go into your PHP files, and you're like,
"How do I change that icon?" and you manually change it.
So when I was first starting to learn HTML, CSS, and JavaScript,
I felt like I was getting the hang of looking at those files
and editing just basic source code.
And then I looked at WordPress source code.
What the crap is this nonsense?
I had no understanding of that.
It's so different.
Yeah, PHP is a beast.
I was going to say the same thing, a beast.
It's completely different, and the syntax is just like spaghetti for me.
Ugly.
Yes, yes.
Honestly, I think this is going to be an unpopular opinion,
but I kind of get PHP vibes from Rust just because it's also very,
very, very--there's a lot of characters in there,
and you have to try to read it all.
It's verbose.
Verbose, that's the word, yeah.
It's very verbose.
Same with PHP, also pretty verbose.
I'm sure we'll get some Rust warriors in the comments.
I think they like it because it's strongly typed or something.
Rust is great in that way.
Yeah.
That's how you get viewers, listeners,
is with the stirring up with the controversial takes.
But actually my wife is doing an MFA right now in jewelry.
That's why Brittany knows I just moved to Italy so that she could do it.
My wife could do this program.
What's an MFA?
A Master's of Fine Arts.
Oh, gotcha.
Yeah, she's becoming a Master of Jewelry.
She's a--what is it, a multi-fighter?
What's that, MFA fighter?
There's an MFA-like fighter.
MMA?
MMA.
Oh, MMA.
I was thinking--I was thinking of she's that.
I'm going to tell her.
Everyone thinks that you're a mixed martial arts fighter now,
you're doing UFC.
I mixed it up.
But so as part of the program, they're doing a web development course.
And it's like the assignment is like you have to make a website
with like WordPress.com or Squarespace or something.
But in the introductory classes, they're teaching them HTML, CSS,
JavaScript, and PHP.
And when she told me she was learning PHP, I just couldn't stop laughing.
I was like, like you're going to start a small business,
and the first thing you're going to do is build yourself a website with PHP.
Honestly, that's kind of surprising you would learn web development
in arts theory.
I don't know why you would do that.
Well, you need--as a jeweler, you need a website.
But I told her, you don't need PHP to make a website.
No, you can do so much with just the HTML, CSS, and JavaScript.
Even just HTML and CSS.
Yeah, totally.
And yeah, just that.
But then if you need the interactivity, you can just use the JavaScript.
They don't need the PHP.
They're just making it more complicated.
I'm so angry right now.
[laughter]
This is what you find when you leave your perfect Svelte bubble
and go into the wider web development world,
and you're like, "What tools are you using?
JQuery? What?"
Willow, ghost dev in the Svelte community, is going to university right now,
and they're teaching HTML--is it 4?
What's the one--we're using HTML 5 right now,
and they're using the previous version of HTML in her university class.
That's lying.
You know, it takes time to update these course materials.
Can't expect them to be up to date.
Because you can't get it for free online.
No, I think that's impossible.
They have to do some--what's it called when the government takes in
different kinds of offers from different companies?
Oh, yeah, an RFP or whatever.
They're still using Blink or whatever.
What is it, Marquee? Is that the HTML?
Yeah, the Marquee tag.
That's a pretty cool HTML element, though.
It is, and it still works.
You can use it on Twitch and make things go across.
When I was learning to code, though, I paid less than $20 for any course.
I paid $10 a couple of times for a couple of Udemy courses,
and that was it.
That was all I paid for all of my learning to code.
It's kind of amazing.
Mostly free stuff online, like CS50, great Harvard course, free.
You have to pay for the certificate, but you don't need the certificate.
Yeah, exactly.
There's so much learning material out there now.
Yeah.
It would be tough if you had no idea where to start.
You wouldn't know where to start, I think,
if you're coming from another career.
Yeah.
All right, yeah.
Let's talk a bit about this Svelte integration that you've been doing
over at Prismic.
First of all, what is Prismic?
What does Prismic do?
The simplest way to describe Prismic is that it's a CMS.
To me, one of the hardest parts of building a website is managing the actual
content of the website.
It's a problem that no matter what you're doing,
you need to figure out how to answer that.
Prismic is actually one of the OG headless CMSs.
Before the term headless CMS existed, back in 2013,
Prismic and Contentful were actually founded at almost exactly the same time
with the same idea, which was to do serverless content.
Again, this is before even the word serverless was out there.
But to have a platform in the cloud where you can create and store content
and deliver it to your application via an API.
In the beginning, headless CMS were billed as this agnostic thing that you
could use for anything.
You could use it for digital billboards or your Apple Watch or whatever,
your game consoles.
That actually created a lot of problems.
I think probably every headless CMS realized that they were spread too thin.
Prismic decided to focus on specifically websites with modern
JavaScript frameworks.
I think what we realized is that if you have a tool that's agnostic and
really well designed, it's actually a really good foundation for building
an integration because you have a really clean API.
It's really well thought out data structures and everything.
I think we realized we could get a lot more bang for our buck by doing
really custom, like, tailor framework integrations.
We built integrations for Next and Nuxt.
Then just most recently, we built this integration for SvelteKit.
What makes Prismic different from other headless, we actually call
ourselves a headless website builder because you're not just managing
content, you can actually build an entire website in Prismic.
The way we do that is with this concept that we call slices, where a
slice is like a section of your website, like a block, like a block-level
element.
Is this kind of like the, I guess the new WordPress editor has, what is
it called, Gutenberg or something?
Yeah, Gutenberg has blocks.
They also have blocks and similar kind of thing.
In WordPress, it's a little bit weird because I think every single P tag
in WordPress is a block, I think.
It's very atomic.
In Prismic, it doesn't have to be that way.
You can have slices that are quite big or that have fairly complex data
structures and you can customize them however you want.
We have the editor in the cloud.
Then what we did with our framework integrations is we built this
developer tool, which runs locally on your machine.
The local development tool is called Slice Machine.
I think to get to the core of it, Slice Machine is basically like a
code gen tool.
It's like you want to create a new component, click create component
and it generates that in your file system for you or whatever.
It creates the TypeScript types for you too.
It takes care of--
It'll order a pizza.
That's still in the roadmap.
Basically, Slice Machine creates the wiring, the configuration and the
connection between the cloud and your local dev environment.
Then it will create the components for you and it will create them
following the format needed to consume the data from the API.
It just takes care of a lot of the repetitive work and it makes coding
really productive.
Also, because everything's typed and everything's structured very
deliberately, it makes it really, really safe.
You can have this website builder tool that you can give to your content
editors knowing that it's very, very resilient.
It's very robust.
That sounds great.
It's probably hard to visualize this on an audio only podcast, but we
did do a Siren Stream showcasing some of this.
It will automate creating some of those pieces in the component.
It will tie all of your API together.
It will create the link between the CMS and the local dev environment
and then automatically generate that component for you with the API
tied in, which is like--
It was magical.
I've never seen this stuff just happen.
And me not have to do anything.
It was kind of nice.
Brittany, I haven't stopped thinking about your reaction when I clicked
create slice and you were like, "Oh my God."
I was like, "Yes, this is why I do what I do."
Yeah.
The developer experience is so important.
When you have to go and create your schema and then you have to tie in
the API yourself, it's cognitive overload, boilerplate stuff you have
to remember and do.
It's just such a nice developer experience when all of that's done for you.
Yeah.
I can imagine.
What kind of experience did you folks have when you built this integration?
Yeah.
What was the difference between building one for React or Next or Nuxt?
Maybe you probably didn't spend that much time on those integrations
since you're the Svelte person, but maybe you can talk to some
differences there if you--
I can say we have a great DevEx engineer named Angelo Ashmore.
We found him because he, in his spare time, was working on our Gatsby
integration, and so we hired him.
He's done amazing work for all of our open source SDKs.
I've been working with him on the Svelte integration.
A lot of it has been me doing a very rough version, kind of a back of a
napkin kind of thing, and then he takes over and does a much more
polished version.
But I can say for me, first a component library.
We don't really talk about this so much anymore, but when SvelteKit was
first released, a big part of the marketing around it was this is kind
of like a batteries-included component library framework.
You can write a component library and then just share it with somebody,
and that was really cool.
That got me really jazzed, so I used that as kind of like motivation to
build the first version of our component library.
I have written plenty of React and Next and Vue, and personally, I mean,
it's kind of--if you've written Svelte and you like Svelte, it's why you
like Svelte, it's because it's just so literal, right?
That's what I found writing it, and I was looking over the components.
Some of the components are really, really simple.
If you have an image in Prismic, you mostly just need to inject the source
and then add maybe a width and height and stuff, so it's very simple.
But when rich text comes from Prismic, it's formatted or stored in
an abstract syntax tree.
So there's actually some complicated logic to serialize that all into a string.
So we have a Svelte component called Prismic rich text, which takes that
abstract syntax tree and iterates over all of the children and the grandchildren
and all of the italics and bold and everything and strings it all together.
- So you're one of the few people that have actually used Svelte colon self.
- I am, yes, exactly.
- I'm sure a lot of people have used it, but it's not something you have to
grab that often or use that often.
- But when you do have to grab it, it's like, "Wow, this is so literal.
I can see exactly what it's doing." As far as recursive programming goes,
it's a very nice interface for it.
- I once did a talk, I think it was at the end of 2019, so I compared React.
So I did a Hacker News clone where I compared React and Svelte.
So I did a super, super simple implementation.
And the recursive stuff in React was very confusing to me because I don't even
remember how you would do it, but the Svelte one was much easier to grok.
- Yeah, and I was doing a comparison looking at our React rich text component,
and it did kind of make me dizzy right away.
I mean, I'm not a huge programmer. I'm better at UIs.
But yeah, I like that part.
- For sure. And another thing with if it's React, it's usually like you have
five different components in the same file, and then you throw in some
recursiveness in there, and then you're like, "What is even happening?"
It's very confusing.
- So yeah, writing the component library was really nice.
And then, I mean, also, of course, we wrote documentation.
That's always been pretty enjoyable because the Svelte, particularly the Svelte
kit, like data fetching and everything is pretty well thought out and pretty
prescriptive. So I've always enjoyed it for that reason because it's pretty
straightforward. Most recently, though, with Slice Machine, we actually
architected Slice Machine, which again is the developer tool, to have a
plugin system. So the core of Slice Machine is agnostic. And then if you want
to use Slice Machine in Next.js, you add a Next.js adapter, and you just plug it
into Slice Machine. And then the adapter tells it, like, for example, if you click
the Create Slice button, the adapter tells it where that slice should go and
what the boilerplate for the slice should be. So as far as that goes, I was
talking to Angelo, who worked on this, and it actually wasn't... I was like,
"So it doesn't sound like you actually needed to, like, integrate with Svelte
that intimately because it, like, it's actually... Svelte is well thought out
and Slice Machine is well thought out. So there actually isn't that much
interaction. What that package does is it will, like, create some files. It
uses, like, just strings to inject some boilerplate into those files. It
handles... It has some Svelte-specific code in it. Like, it suggests code
snippets for certain things, or it has, like, templates that you can use for
certain things. And then obviously it needed documentation and some, like...
We have some, like, example starter projects that you can use to start with.
But all in all, I mean, I think it's probably a testament to the fact that
Svelte is well designed and also a testament to the fact that Slice Machine
was well thought out that the integration, I think, was pretty
straightforward. Angelo said that when they actually got the okay for
management to build the Svelte plugin or adapter for Slice Machine, it took
two or three days.
Oh, wow. That's fascinating. That's very fast. That should tell other
companies that are thinking about making Svelte integrations to maybe have a
look at building Svelte integrations. Because if it's that fast, then there's
no reason to not spend a couple of days doing it.
Yeah.
But then, of course, it's also about...
Absolutely. Yeah. I was just going to say.
Definitely. And that is where, like, there are some things where we've been
trying to figure out, like, what's the best way to do it in Svelte.
Like, there's still a fair bit of boilerplate.
So, like, it would be nice if there was a way to simplify that.
I've been kind of thinking, wondering about, like, what a Svelte plugin
system or a SvelteKit plugin system might look like.
There's Rollout plugins, there's Vite plugins, and a lot of the other
frameworks out there also have plugins. Gatsby has a plugin system.
Nuxt has a plugin system, which is... You asked about the difference between
integrating with SvelteKit and integrating with Nuxt. And that is a huge
difference, is that in Nuxt, you just put in a few settings in the Nuxt
config, and it takes care of, like, tons of boilerplate, and it does a lot of
stuff magically for you. So I'm kind of fantasizing about, like, what that
might look like and how that might simplify the integration.
Yeah, it feels like a lot of people want some kind of... At least middleware
is what I've heard a lot. Maybe that... It's not quite a plugin thing, but
middleware for the back-end endpoints, where you can just attach things like
an authentication function. I mean, you can already do that, but something
that's a bit more official is what I've taken on.
So you're wanting to go middleware into SvelteKit stuff, because, like, we are
a plugin to Vite, so, like, there is that side of things where you could just do
a Vite plugin, but you want the SvelteKit stuff specifically.
I mean, I'm not quite sure yet. I mean, part of the benefit of a plugin system
is that it tells you what to do. And I've done a lot of experimenting and
kicking around. Like, at one point I tried writing a roll-up plugin to, like,
automatically inject components, and it was just so convoluted. I was like,
"This is a bad idea. If I'm fighting this much, I shouldn't be doing it."
Like, some examples, we're currently trying to figure out how to implement
previews, which is where, like, if you have something that's unpublished in the
CMS, in the cloud, we actually have, in just, like, vanilla JavaScript, we have,
like, a pretty simple mechanism for how to access that based on a cookie.
And it works almost automatically without having to do much configuration.
In Svelte, like, we're trying to, like, it almost works, except if your web pages
are pre-rendered, then that creates a trap.
So I'm trying to figure out, like, how to do that with a hook.
So I spent yesterday working on writing a handle hook to do this, and I actually
came up with a pretty good implementation, where it, like, sends you to a
different section of, like, a preview version of the website using the hook.
And then it switches to SSR. But we're still asking users to write a ton of
boilerplate.
Yeah, to add that, yeah. Either add the handle hook from some package, and then,
yeah.
Yeah, exactly. And so, like, that would be one example where, like, to be able to
just do that hook automatically would be really nice.
Yeah. Well, that makes sense. So those are some missing things, then.
Are there other bad stuff that you ran into that's...
The bad stuff.
I mean, I'm sure Svelte has bad stuff. I just haven't ran into it at all, but,
of course.
What is some bad stuff? That's actually a really good question. And I can't think
of much. There are a couple things in the document... I thought I should open a PR
in the documentation for, like, for instance, the page store. I had this
happen, like, twice, where I ran into a bug with the page store, because I don't
think it... Maybe I missed it, but I don't think it explicitly said in the docs
that "page" has to be prefixed with a dollar sign.
Right. I guess it's... I guess since... So I think the documentation says that
it's a store. And I think people are... I think they assume that you'll think
that it's a Svelte store. But that's not...
Docs should not have assumptions.
Right. Yeah.
So that...
Speaking from a technical writer, right?
And even stuff like... Like, there should be... I haven't looked in the
documentation for a while, but there should even be probably an example where
you use it as well.
Yeah. Totally.
Where you see the prefix and stuff.
I mean, I did figure it out pretty quickly, so it couldn't have been that big
a problem. But that's not a problem with Svelte. Like I said, I'll probably open
a PR in the docs or something for that.
Honestly, I think it kind of would make sense to, at least in development mode,
have a compiler warning to say that, like, "Is this actually what you wanted
to do? Log out the set update and subscribe methods? Or did you actually want
to use the value?" Or something like that.
Yeah. Totally.
We usually have really good compiler warnings. I've seen a couple of bad ones
lately. We have another one. When you use the incorrect name or default version
of a component from a component library, it just spits out this inexplicable
SSR error. And every time I freak out and I have to look it up, and then I find
this old issue, and I'm like, "Oh, yeah." And eventually I'm going to get the
pattern and realize that, "Oh, I used the wrong one." But it's like, why is that
error so awful?
Why does it not just say, "Did you use the wrong name import?"
Is that the one where if you import a named export as a default, then it'll say,
"Such and such is not a valid component."
And it says, "Error SSR is not a valid SSR component."
Yeah. I've banged my head against that one a lot.
Yeah.
And so all you have to do is take the curly braces off, and it works magically.
And it's like, why does that say anything about SSR? Why does it not just say,
"Maybe you used the wrong import."
Yeah.
One thing that I've spent a lot of time fiddling with, and there's probably a
philosophical explanation for this, or maybe a long GitHub discussion about it
or something, but handling Svelte components in JavaScript is one place where
React and JSX definitely has a leg up.
If you want to programmatically do stuff with Svelte components, it wouldn't be so
hard if you were just doing it on the client or the server. But because they're
different, by my understanding, they're different APIs, it gets very messy or
maybe even impossible very quickly. So I've banged into that in the Prismic
integration and also in personal projects.
I think there... So in React, you wouldn't have to do this, but in Svelte, we need
the Svelte colon component, right, to solve stuff like this.
Yeah.
And it does get a bit tricky, I think, as well.
Yeah.
The... Yeah, definitely something I've run into as well.
Yeah.
Just kind of what Thomas was talking about with Melt and how you can't pass
things into children the same way either as you can in React. And it's sort of
along the same lines because he was saying runes might help this where you can use
the same things on the client and the server because we can't use the same
APIs right now between JavaScript and the Svelte files, but the runes might
actually allow us to do that and allow some of those things.
I'm not sure it's the same thing. I think this is more about being able to...
Like in JSX, for example, you can do... Let's see if I can explain this
correctly. So say you have a component called Button. In JSX, you could do...
You could actually just do a string and pass in Button, right? And that would
work. That's not something you can do in Svelte. You would need to pass the
Button into the Svelte colon component thing to get that working, I think.
Does that make sense?
I'm also trying to think. I've run into this on my blog where I'm trying to get
a list of blog posts and it gets... I'm querying them in JavaScript and
they're using empty specs. They're markdown files that are getting compiled
to Svelte. And then I'm querying them in JavaScript and then trying to work
with them in JavaScript. I can't remember what exactly, but I hit walls there
very quickly.
I think that is similar to that as-child thing because that is a component and
you can use the Svelte component, but you can't pass a string in. So it's
different than you have to do it in React.
Let's see what they'll cook up for Svelte 5. Maybe we'll see some cool stuff
there.
Maybe. But in general, I feel bad now that I've been complaining because in
general, it's been really pleasant. I also work on our forum and on our support
channel and we get very few problems with Svelte. And when we do, they're
usually pretty straightforward to debug. So it's kind of one of those
situations where no news is good news. It seems like it kind of just works.
Yeah. I mean, that's hopefully what people are experiencing as well.
What are you excited -- what do you think is missing in Svelte? What would
you like to see in Svelte 5? Is there some feature that you would love to see?
For me, this is a really tough one.
I'll say something that I don't think is going to happen.
All right.
Data fetching in React server components is really, really nice. And when I
saw what that looks like, I thought, "Oh, they just made data fetching
actually easier in React than it is in Svelte."
Interesting. I haven't used React server components.
Yeah, I haven't looked at them.
How does that work?
Well, I think it's only possible because it's only happening on the server.
So it's kind of a cheat, maybe. But it's like, you can literally just do an
async. You can do an async expression in your component.
But how does it get passed to the client if it's only happening on the server?
Okay, so this is where my ignorance kicks in. It's like, I don't think it can
render on the client. It has to be server rendered and then passed to the
client as a static thing, I believe.
Right.
And if you want a component with client-side reactivity, it can't be a
server component, I believe.
Ah, interesting.
For my use cases, I rarely need client-side reactivity.
Yep.
I'm kind of like going back five or ten years in web development to like,
"How do I do static stuff? How do I do stuff that's not reactive? I just want
server rendering."
Yeah.
That's also, I think, a downside of using Svelte. Like, you send all of the
data and it rehydrates all of it. Like, if we could improve that a bit in the
next Svelte iteration.
I think that is some of the stuff that they're hopefully working on is how the
hydration and the compilation works between the components and how it scales
the components is what I'm looking at. Because I know right now we have a
problem with scaling how many components in an app. Like, that scale, sometimes
that can get very large.
I think, honestly, I think that's just something that people read and never run
into.
It is, but I think it is actually an underlying issue that they've talked
about.
Oh, yeah, of course.
It is a problem, that is. But it's maybe not as inflated as people lead it to
sound like in the blog post.
For me, it's more of a marketing issue than an actual performance issue, if
that makes sense.
Yeah, it's not a huge performance issue. It is something that needs to be
addressed and it sounds like they are addressing it. So I'm looking forward to
that.
Yeah. And some, like, it's what other frameworks can point at and say, "Oh,
look how bad it is."
Here's what you should use, X instead.
But I mean, as far as the success of Svelte is going, Svelte is still growing
like crazy. Like, it's not, and the speed is still very competitive.
Yeah.
More realistically, I would say if we could see a plugin system in, well, I
guess that wouldn't be in Svelte, that would be in SvelteKit.
SvelteKit, yeah.
But if I could see a plugin system.
Yeah.
That would be my Christmas morning.
[Laughter]
All right. Any other things that we should chat about with regards to the
integration or thoughts? No?
No, I don't know. I feel like that was really, really interesting.
Yeah. Awesome. Then if there's no other, do you have any questions, Brittany,
before we move on to --
No, I think we're good.
-- the next section that's called unpopular opinions.
Yeah.
And Antony is not here. He always has an unpopular opinion.
I've seen him on Twitter lately just replying to all these folks about cars
in London or something.
Firing off on people, yeah.
Yeah.
He's always on something, yeah.
And it's always like to the -- what's the prime minister call it?
It's Rishi Sunak, I think.
On Rishi Sunak's, it's like, "We are improving this by doing this."
And then there's Antony in the comments always like, "Yeah, look at what you did here."
[Laughter]
It's pretty funny to see.
Oh, my gosh.
I just followed him on Twitter today, so I'm excited to see.
Oh, nice. Nice.
You'll see a lot about biking in London and roasting of the prime minister of the UK,
pretty much.
[Laughter]
I lived in the UK for two years.
All right. Yeah.
[Laughter]
I actually have an unpopular opinion today.
Go for it. Tell us. Tell us all about it.
My unpopular opinion is that meetings are not work.
I think that they can be work and productive, but most of the time, they are not.
And they're a waste of time, especially when they take up an entire day.
Yeah. That didn't sound as bad.
If they're not work, why are they so hard?
Why are meetings so hard?
They're like exhausting.
Oh.
Right.
I think that's just like being on camera.
It's exhausting.
If you're on camera for your meetings, if you're remote,
and talking and cognitive stuff is just exhausting.
So I think that part of it is exhausting.
I don't know.
I think they're just mostly time fillers and time wasters.
And I think they can be productive if you make good use of them.
I just think that they should be short and sweet and get to the point
and only what you need done.
Yeah.
More meetings should follow the stand-up philosophy kind of.
Yeah.
Just be super short.
And then also probably most meetings would do good by having a hard limit on the time.
There is something that happened this week where we had a Slack thread
to try to avoid a meeting, and I would have rather just had the meeting
because the Slack thread did nothing to help things.
So a 15-minute meeting would have avoided like a week of us just waiting on people to respond.
So in that case, a 15-minute meeting would have been fine.
And now I have a 30-minute meeting tomorrow instead of the 15-minute meeting.
It probably would have saved us on Monday.
So there are times where it can be.
There are also times where it's just a waste of my time and day,
where I get no actual work done.
Yeah, but it's still work.
[laughter]
I told you I was going to fight you on this one.
I know. I disagree sometimes, like half the time, maybe, half the time.
Yeah.
You know what this signals to me?
What I'm hearing is that, Brittany, you like your work.
Oh, I love my work.
And you feel like when you're in a meeting, it's taking you away from the work that you enjoy.
Yeah, and I have a problem stopping my work.
I will do my work.
If I'm by myself and I have no other choice, I will do my work.
I will go sit in a restaurant and work because I love what I do, and I love building.
I love the design system stuff.
I enjoy that, and I'm very passionate about it.
So I'm kind of a workaholic in that sense, and I like that stuff.
That's nice.
That's cool.
I don't know if my family thinks that.
[laughter]
Yeah, it's a hard balance.
My girlfriend works too much as well.
From my point of view, it's not nice, but she thinks it's fun at times at least.
So it is what it is.
Sam, do you have an unpopular opinion?
Yeah, okay.
The web is 30 years old, right, this year?
1993?
Wow.
It's 2023.
That's about right.
Yep.
So freaking old.
My unpopular opinion is that by 2030, we will have reached Web 2.0.
What does that mean?
15, 20 years ago, everyone was like, "Web 2.0, the web is interactive now."
Right.
But from my perspective, it kind of failed.
Interactive web is not that real.
What I mean by this is if you were going to tell your parents or something how to build a website, where would you start them?
Probably you'd start them on some platform like WordPress or something, which is kind of a website, but it's not like you're writing code that you own.
It's more like a social network.
It's almost like you're making a Facebook profile or something because it's so contained.
But if you wanted to make your own website, it would be really hard.
Even if you wanted to use SvelteKit, you have to figure out Node and Git and at least some basic HTML and CSS.
And for Kit in particular, you need to figure out what adapter you should use.
Yeah.
That's another extra step.
There's a lot of things to learn.
I kind of wish there was a built-in kind of just publish button that would publish your static site to, I don't know, some Svelte server somewhere.
I mean, it works.
Like with auto, you can publish to Netlify or Vercel automatically with that.
But I would want it to be built in into the CLI or you would just run npm publish without doing anything and it would just put up your site.
And you can if you have the Netlify CLI, you can do that.
But you have to know that stuff.
It's still like pre-knowledge you need.
Yeah, yeah, yeah, exactly.
I think that's what I'm saying.
All of that is just to publish a website.
And then think about like if you wanted to create a website with comments from scratch, like I'm not even going to try to do that because like I hate figuring out databases, you know?
So like I envision a world where like I could help a family member set up their own website from scratch with commenting easily.
And that to me would be Web 2.0.
I feel like we're getting there.
Yeah, especially with chat GPT and similar tools.
I've been using that a lot for database stuff.
Writing queries.
I think that things like Squarespace and Builder.io, those tools are like kind of coming a long way and like creating a website.
And I think you're right, like in a few years, like those tools will have come far farther to like help with creating.
But Kev, I also have something to say to you.
So at the end of like most of my SirenStreams, I haven't done it lately, but I used to like use the GitHub CLI.
I pushed to my repo and then I use the Netlify CLI and I publish my website.
In like less than five minutes, I've got a new repo and published website.
So I mean, it's like CLIs are amazing, but you have to have that knowledge.
Brittany, wasn't that on our stream?
The GitHub CLI is what I use, but I didn't publish the website with the Netlify CLI.
No, you did because it totally, you published it on Netlify because we needed it published in order to do the live previews.
And I was like...
But didn't we do Vercel? Because you were, didn't you say, can you publish it on Vercel in like two minutes?
And I was like, I don't know.
And I'm like, I haven't used Vercel in a long time.
And I opened Vercel and I just did it all through their GUI instead of the CLI.
Because I didn't have their CLI installed.
I don't really use Vercel that much.
I have a distinct memory of you typing in a command in the CLI and deploying a website.
Yeah, that was the GitHub CLI.
It like made me like, no, that's my workflow.
I mean, not like for everything, but I started doing it myself.
So that was the gh-repo-create will create a repo for you.
And then you have to like add and do all the other stuff.
And then you had to push your repo.
And then once your repo is up on GitHub, then you can go to Vercel.
Or if you have the Netlify CLI, then you can just use the Netlify CLI.
I don't, Vercel must have a CLI too, but I don't know if they use it.
I'm sure they do.
Yeah, they do.
Yeah, that's very nice.
Netlify has netlntl and you can ntlpublish, ntldeploy, ntldeploy.
I haven't used it in a long time.
Maybe I'll start again.
Our documentation site's on Netlify.
I haven't used any of these tools, even though --
I love CLIs.
That's my pick. CLIs are my pick.
That's your pick. All right.
Yeah, I just -- so I think I've talked about this a bit on one of the earlier episodes,
but I've been moving away from renting a dedicated server
to actually self-hosting it myself at home for Svelte Society.
Oh, my gosh.
Maybe I haven't actually talked about this.
Wow.
But, yeah.
Why do you like pain?
That's going to be my pick.
I like to tinker.
Oh, that sounds so painful.
Like, these services are -- they're free.
You know, I'm going to talk about another project that helps you with this.
Okay.
Yeah.
Go for it.
I don't have an unpopular opinion, so maybe I can go for the first pick.
All of your opinions are popular.
100%.
Okay, so I have two picks.
One is called Coolify.
I haven't heard of that.
And it's an open source platform as a service kind of thing,
which is something you install on the server.
So this is what I installed on my server at home,
and it lets you deploy applications.
It's kind of like a self-hosted Vercel or Netlify in a sense.
Obviously not as polished or doesn't have all of the features, but you can basically --
Coolify.
No, Coolify.
I know.
I'm saying it's Coolifier than Netlify or so.
Oh.
I was trying to be corny.
All right, all right, sorry.
I'm sorry.
But, yeah, it works great.
You can enter -- you can just put in a Docker Compose file,
add some environment variables, hit deploy, and it just gives you a website.
I just pushed up analytics for Svelte Society, for example, using plausible.
Is it free?
It is free.
They have a service like you can pay for it as well, so that makes it a lot easier.
You still have to bring your own server, so that's just for the --
basically what they do is they give you the GUI on their server,
and then you can add servers onto the Coolify instance, if that makes sense.
I'm just going to use it for one server, so I don't need to do that.
So if you're running your own server, how does the speed compare?
Yeah, so the server I bought is basically faster than the one I rented on Hetzner,
so I think that one cost me €40 a month-ish, and then this one was, I think, €600 total.
Wow.
And it's faster.
It has more memory and more disk space, and it's on my --
the downside, obviously, is that it's on my home connection, right?
But you were paying before to, like, rent one, and now you just paid outright, straight.
Yeah, exactly.
The downside is, obviously, that I'm running it at home on my own connection.
Constantly.
Yeah, it's been going down a lot recently.
So the other thing is that these services are content delivery networks,
so they are around-the-world servers, and you can put them in one location, right?
But they also, like, put them out at the edge, if you want.
And so your users may be closer to that server.
So your server is in your house.
Yep.
I've thought about this, though.
So this is really, like, a pretty solvable issue.
Like, you put a CDN in front of it.
The data fetching has to happen close to the server anyway.
So it has to go somewhere to fetch the data.
How do you put a content CDN in front of it?
So the simplest thing is just put Cloudflare in front of it.
It's basically just a button that you hit.
I mean--
It's very fun to do.
I had a question from an unpopular opinion earlier.
The first one that came to mind was, like, you might not need SEO.
And I feel like when you're talking about, like, CDNs and hosting and stuff,
like, you really are talking about page speed.
And, like, page speed is mostly for SEO.
Like, that's kind of why we've become so obsessed with it in the last 10 years.
But, like, if SEO is not a top priority for you--
like, for instance, the Svelte Summit website,
the only keyword it really needs to rank for is Svelte Summit,
and it's going to no matter what.
So, like, it doesn't--like, page speed is not necessarily
the most important factor for that website,
which means that, like, hosting it on a box in your closet might be fine.
What's your reasoning for not needing SEO?
Well, there's a few things.
One, most of the time when we're talking about SEO,
we're talking about, like, really competitive SEO.
Like, if I want to rank for, like, New York cars,
then I'm going to need to be really, really competitive
on, like, page speed, links, optimizations, and stuff.
But if I want to rank for Prismic, like, that's actually going to be pretty easy
because I am Prismic.
Well, let's put it this way.
What about a CMS, Prismic, Contentful, Sanity?
How do you rank against those?
And in that case, it's very important to have, like, a really competitive--
like, that's a very competitive SEO.
But that's only one marketing strategy, right?
Like, not every business needs SEO as, like, an inbound sales channel.
And you might, like--we kind of--I think we have a bit of FOMO.
Like, oh, we need to be selling on Twitter and Facebook
and Google and radio and stuff.
But, like, if you can do one channel or two channels really well,
then you might be able to forget about the other ones.
So, like, maybe your channel is word of mouth,
or maybe your channel is, like, literally local radio stations or something
or flyers.
And then, like, you might not need to worry about SEO.
And you can have, like, a slow, old, ugly website, and that would be fine.
Yep.
I do think focus is important for some business.
So, like, focusing on, like, what your customer base is,
like, finding that and focusing on it.
I will say, on the contrary, while SEO might not be important,
accessibility, always top priority.
SEO is not important for our website.
Our website is private.
It's not rankable on Google.
It's a private--because you have to log in to it.
So it's not important.
Yeah.
All right.
My really quick second pick is commit AI.
If you're lazy like me and don't like writing commit messages,
this is the thing for you.
This sounds like a bitch.
It's a VS--
It really does, right?
It's like an AI tool that analyzes your commits, like, the files in the commit,
and then writes a tidy commit message for you.
Interesting.
Yeah.
So I've been trying this out, and it's quite nice.
It's called commit AI.
Commit, like you're committing, and then AI.
Yeah, I think.
Cool.
Double check.
That's me.
Who wants to go next?
Cool.
I have a pick.
I was looking at the state of CSS survey, which came out, like, last month.
And actually, I had to check my search history.
Like, I had to do a double take because, like, the day before, literally,
the survey came out, I was searching for CSS frameworks.
And I was like, "Ah, still no CSS frameworks that I like."
And then the next day, the state of CSS came out,
and it mentioned Open Props as, like, a new up-and-comer.
And I checked it out.
I really like it.
I like it because I like writing CSS.
I don't like Tailwind and--
Right.
What do you call it?
Is that Atomic CSS?
I can't remember.
Utility classes.
I mean, Atomic is one way to call it.
Yeah.
I don't like utility classes.
Open Props is more of a--it's also utility-based.
CSS variables.
But the utilities are in variables instead of classes.
Yeah.
And so you can use the variables, like,
very similar to the way you'd use normal CSS properties,
but they're, like, really logical.
They kind of encourage you.
They kind of, like, encourage you in a certain direction.
And so I've been using it for about a month now,
and I've kind of gotten used to it.
And, yeah, just really--it's just a really nice kind of pleasant experience.
It was created by Adam Argyle.
They actually have a Discord server.
I used it on the Salt Cyanon site before we converted it to Skeleton.
I really liked it, too.
I think I like--ergonomically and for DX and speed,
like, I like Tailwind a little better.
I think that it just makes me faster.
And when you're creating a component library where everything is just scoped
to that one component, like, having the Tailwind classes in line is not ugly.
It's not as ugly as, like, seeing them all over your code base
because the components, you don't see those in the components,
and then they're extracted in the API because then you're just using them
as props.
So it's not, like, as bad.
Okay.
It's definitely--what's it called?
A dividing--
It's a love-hate thing, yeah.
I like being able to write my states and my media queries in my class.
Like, that increases my speed tenfold.
Just being able to do hover colon or focus colon and then, like, large,
medium, small, whatever, or mobile colon, and then write my media query.
I think you're right.
That's probably the actual selling point of Tailwind, probably.
Like, being able to do that.
Never thought about that.
All right, Brittany, what's your pick?
My pick was the CLIs.
I guess if I have to pick one CLI, GitHub CLI is really cool.
I love it.
I use it every day, all the time.
Well, not every day because I don't push a new repo to GitHub every day,
but I do really like it a lot.
And, like, every Siren stream I use it because I create a new repo.
But Netlify CLI is also really good.
I like using it.
But any CLI, like--
[laughter]
When you're using the GH CLI, do you use that for your commits
or do you use Git for your commits?
I use Git.
I guess I didn't think about using the GH CLI,
but maybe I should, like, look up what that is because--
I don't even know if you can.
You probably can, and maybe I should.
What would be the difference?
Like, how much shorter can it get?
Well, you have to write, like, git add.a and git commit -m.
And so, I mean, it could be, like, G-H-A or G-H-C,
and then you could just type.
That would be amazing.
I don't know.
I don't know what the actual letters are,
but I'm just guessing what it could be.
And, like, our spelt create command, our spelt add for tellin,
like, that kind of stuff.
It's such nice developer experience, stuff like that, that makes me happy.
Yeah, developer experience is everything.
It really is very nice.
It is.
Okay, I think that is all for today.
Sam, where can people find you?
I'm on Twitter, @samelfair,
and if you want to see what I do, check out Prismic, prismic.io.
If you want to try it out, we have a demo of the editor
that you can access from the home page of the website.
I think it's prismic.io/try,
and otherwise, if you want to try out Prismic with Svelte,
the best way to get started would be to create an account,
create a new repository, and choose SvelteKit,
and then there's a demo project that you can try out,
and it'll kind of walk you around and show you the ropes and stuff,
and you can see what it's all about.
All right. Exciting.
Thanks for joining us today.
It was super fun.
Thank you so much.
It's always great seeing you.
Let's do this again sometime.
Yeah, I had a great time.
For everyone who's listening, thank you for listening again.
You managed to get through this one hour of banter with us.
It was a lot of fun.
And we will, as always, see you next week.
Goodbye.
Later.
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.