Jack_Herrington:
Welcome back to the React Roundup podcast. I'm Jack Harrington, I'll be your host for today. And with me is my esteemed panel, Paige Neateringhouse
Paige_Niedringhaus:
Hey everyone.
Jack_Herrington:
and TJ VanTole.
Tj_Vantoll:
Hey everybody.
Jack_Herrington:
And today we have a special guest. We've got Sebastian Lorber. Hey Sebastian, how are you?
Sebastian_Lorber
Hey, I'm fine and you. Thanks for having me.
Jack_Herrington:
Yeah, thanks for coming on. So why don't you give us a little talk about why you are famous? Maybe you'd like to ask that question.
Sebastian_Lorber
I don't know if I'm famous but
Jack_Herrington:
Everybody
Sebastian_Lorber
maybe
Jack_Herrington:
says that. Ha ha!
Sebastian_Lorber
you probably heard about maybe my newsletter this week in React or maybe
Jack_Herrington:
Mm-hmm.
Sebastian_Lorber
the DocuSource project which is the
Paige_Niedringhaus:
Mm-hmm.
Sebastian_Lorber
static site generator that Facebook is is developing and using on many documentation websites that you browse on a regular basis I think so I think that's all.
Jack_Herrington:
All right. You mentioned we might want to talk about React 18 this morning, and I'm curious about it myself. So what do you see as the big wins on React 18?
Sebastian_Lorber
I think the big wins, actually we don't yet see the big wins because
Jack_Herrington:
Hmm.
Sebastian_Lorber
somehow it plays the foundations for some future improvements that we are only scratching the surface of what is possible with the concurrent features. I think something that I'm very excited about is all the things like, you know, there is an offscreen API that they are working on. So that... You can, for example, move your browser history forward and then go back. And then it's quite instantaneous, because somehow there are two virtual DOMs being available in parallel. So React doesn't have to rerender the previous screen. And this also enables the door to predictive rendering. Like maybe you can start rendering the next screen. while you are hovering the link on the previous page, for example, but when you click on the link, it can be instantaneous. So these are quite far-fetched advanced use case, but I think it's quite interesting. And the thing is, you know, React is criticized for having a virtual DOM these days. There are a lot of alternatives that are reactive, like Solid and Project Senior and things like that. But I think there is a cost. to being based on a virtual DOM and React has decided to pay it. And we don't see yet the benefits of paying bad costs, so the other frameworks look more appealing, but it's only getting started for React, something, somehow, I think. Thanks for watching!
Jack_Herrington:
Any questions? Oh, sorry. Yeah, I'd actually not heard of the predictive modeling stuff. Can you tell us a little bit about that? What's the feature? What can we look up to
Sebastian_Lorber
Je pense que c'était dans la blog post de la réaction de la blog post de la réaction de
Jack_Herrington:
find out more about this?
Sebastian_Lorber
la blog post, où il y avait mention de certains des outils que j'ai parlé de, comme l'API offscreen et des choses comme ça. Mais je pense que ce genre de rendu prédictif était déjà dans Gatsby, par exemple, il y
Jack_Herrington:
Huh.
Sebastian_Lorber
J'ai utilisé quelque chose comme... Je pense qu'il y a un paquet appelé Guest.js ou quelque chose comme ça qui lit la histoire de Google, la histoire de l'analytique de Google de votre site et qui est capable de prédire,
Paige_Niedringhaus:
Mm-hmm.
Sebastian_Lorber
basé sur où vous êtes, les liens que vous êtes en train de cliquer et qui peut prévenir les ressources mais seulement les liens que vous êtes le plus en train de naviguer.
Jack_Herrington:
That is freaking amazing.
Paige_Niedringhaus:
Hey.
Sebastian_Lorber
Ouais.
Jack_Herrington:
Wow.
Sebastian_Lorber
This is a bit crazy, but I mean, it's a bit quite far fetched to do this on your website maybe, but I think it's interesting because you know, if you can make the click instantaneous, it's still quite interesting.
Paige_Niedringhaus:
Mm-hmm.
Sebastian_Lorber
Mais il y a...
Jack_Herrington:
Is it lucy?
Paige_Niedringhaus:
So.
Sebastian_Lorber
Oui, donc le plugin Gatsby, je ne pense pas que c'est très bien connu
Paige_Niedringhaus:
Ha ha.
Sebastian_Lorber
et je ne sais même pas si c'est encore très utilisé, mais je pense que c'est mieux de prédire, par exemple, si vous avez un lien, que vous allez éventuellement cliquer sur, parce que c'est probablement à se passer. Peut-être que l'utilisation d'une analytics Google est un peu trop loin pour faire ça.
Jack_Herrington:
I think it's really cool.
Sebastian_Lorber
Yeah.
Paige_Niedringhaus:
Yeah, I mean, we're tracking so much of what users are doing online anyway, with or without their explicit knowledge. It seems
Sebastian_Lorber
Yeah.
Paige_Niedringhaus:
like a natural
Jack_Herrington:
Except in Europe.
Paige_Niedringhaus:
next step for a lot of websites.
Tj_Vantoll:
Yeah, if you're tracking everything anyways, you might as well give the user some benefit
Sebastian_Lorber
Yeah.
Jack_Herrington:
Give him a faster sight.
Tj_Vantoll:
from doing it.
Jack_Herrington:
Exactly.
Paige_Niedringhaus:
So Sebastian, one of the questions that I have, and maybe you could give us some more insight, are there were a bunch of new hooks that were released with React 18. Could you give us some ideas of what those hooks, what benefits they provide from, you know, we've got, we know that there's the use state, use effect, use ref, things like that, that have been out for a while, but what are the new hooks trying to fill in the gaps for?
Sebastian_Lorber
Yeah, so I think some of the new hooks permits to enable the concurrent features of React. For example, there is a user transition and use deferred and things like that, that permits to start a transition, maybe create some low priority updates and high priority updates in different callbacks so that you can see things being updated on the screen at the right time. without blocking too much the main thread. So this is quite interesting, for example, for updates that can take a long time to update on the screen. For example, if you have a search engine on your front end with, I don't know, an autocomplete with a very long list of possible matches. And then if you type some characters in an input, then it takes a lot of time to find all the possible suggestions. So maybe you will... On va planifier un update urgent, comme quand on presse sur un caser, il s'applique immédiatement. Vous voulez que ça se passe immédiatement, parce que c'est un feedback d'utilisateur important pour l'UX. Mais en même temps, vous ne voulez pas déranger le déroulage des suggestions pour le complet, donc vous allez planifier une transition pour que ce update soit déroulé en priorité. So you don't block the main thread and you don't prevent the UX to remain snappy when the user is interacting with the UI. And also, you think it's an external store that we discussed about, obviously, which permits to somehow subscribe to an external store, which is quite an abstract concept. And I think it's a bit misunderstood in the community because people think it's just about state managers. So, for example, you know that there is Redux and Zustand and all the state managers in REC, but... somehow implement this, are using this hook now so that it's permit to synchronize with
Paige_Niedringhaus:
Mm-hmm.
Sebastian_Lorber
somehow a singleton containing your store, your data and injecting your data into the view in a performant way and in a way that is safe with concurrent react features. But at the same time, there is something that is not very widely known is that there are external sources that you can subscribe to. And I think for example there are a lot of browser APIs. For example you want to know if the browser, if your new is in an active state, if your window is in an active state you can subscribe to that. Basically every API where there is a DOM event being sent can be a source for an external source. It can be considered somehow. an external store, for example, your URL state of your browser can be considered as an external store and you can subscribe to some some slices of this store. And it's also available, for example, with React Native. For example, there are a lot of APIs on which you can ask if your app is in an active state or if this screen is displayed or if this screen has the focus. This can be wired to the use sync in external store. So it's not just state management. It's also, I think, also many other sources that you don't necessarily think of intuitively, because it's not yet widely used in the React ecosystem. But I think it's a valuable hook that we should use more often.
Jack_Herrington:
Yeah, I love that hook.
Sebastian_Lorber
Yeah. That's funny because I published an article just at the same time that you released a video about it. So. Yeah, that was.
Paige_Niedringhaus:
Good
Jack_Herrington:
Hopefully
Paige_Niedringhaus:
timing.
Tj_Vantoll:
Great
Jack_Herrington:
they
Tj_Vantoll:
minds.
Jack_Herrington:
both did well because, yeah. Yeah.
Sebastian_Lorber
Yeah, I don't know if, yeah, maybe there is the user ID you call, but I think it's a bit less interesting. It's mostly to have the same ID on the server and in the client because it was
Jack_Herrington:
Yeah.
Sebastian_Lorber
a bit complex to implement in New Zealand. But apart accessibility features and things like that, maybe there's less exciting new things that we can do with this one.
Jack_Herrington:
Well, it's cool to see the frameworks paying off React 18. You know, Next.js 13 and then Remix actually, I've been talking a lot to Jacob Eby and Remix has a new deferred system that's coming out. That's gonna be fascinating. But to see
Sebastian_Lorber
Yeah
Jack_Herrington:
how they're doing React server components and working with streaming
Sebastian_Lorber
Mm.
Jack_Herrington:
has been really cool. So
Sebastian_Lorber
Yeah.
Jack_Herrington:
what's your take on all that?
Sebastian_Lorber
Yeah, the server components is also some very exciting feature for React 18. And surprisingly, Remix decided to not implement this for now, but maybe they will implement this later. But there are multiple models and we don't know yet what is the best model. And I think it's only the beginning of server components with the introduction in Next.js. But I think both models are available and it's nice that there is some kind of competition between returning some HTML and returning and adding several components that allow you to call back-end code very easily from your rag components. As you know, I'm the maintainer of DocuSource for Facebook. It's a static site generator. And I'm particularly excited by server components. And maybe it's not widely known, but it's actually possible to use server components on a static site generator. So we don't do this yet, but this is something I really want to implement as soon as possible because it has un grand valeur, je pense, pour un générateur statique. L'idée, par exemple, est que, imaginez que vous avez un file MDX, vous savez, le format Markdown avec les composites de React.
Jack_Herrington:
Yeah.
Paige_Niedringhaus:
Mm-hmm.
Sebastian_Lorber
Donc, ce file, c'est un peu bizarre, mais ce n'est pas compilé à... C'est compilé à un composite de React. Donc, en fin de compte, quand vous le passez à un webpackloader qui gère le format MDX, vous avez un component de REC dans votre base de code, donc ce component devient un component de REC en votre bundle JS. C'est assez angoissant, parce que si vous avez un site content-centric, comme documentation, comme DocuSaurus, ce code se trouve dans votre bundle, mais c'est aussi envoyé dans votre HTML, parce que nous sommes un générateur de site statique, donc nous rendons le component de REC, in the HTML and in the JavaScript. So somehow, when you load a page with MDX, you end up with twice the same content being loaded
Jack_Herrington:
Uuuhhh...
Sebastian_Lorber
into formats. So
Jack_Herrington:
Yuck.
Sebastian_Lorber
I think, yeah, this is one of the main benefits, I think, is because we don't want this to happen. We'd like to maybe just have the content in the static HTML and avoid it to being in the JS bundle so that it prevents to add rate. the React application face store, because it doesn't, we are also losing a lot of time hydrating the MDX component once
Jack_Herrington:
Yeah.
Sebastian_Lorber
the React application loads. So now imagine if you take this MDX component and make it a server component, you will end up with an application that will have less. much less JavaScript to load. And also the hydration time will be greatly reduced because we don't have to hydrate all the static parts that are inside the MDX file. And how does it work with the static site generator? Basically at build time, your webpack is able, for example, to generate the MDX content as server components. So server components have... are serialized to a format that is normally sent from the server to the client through a runtime, an edge function or something, an edge.js lambda or whatever.
Paige_Niedringhaus:
Mm-hmm.
Sebastian_Lorber
As we are in the static set generator, we don't have a runtime, so we have to emit the static files with this format ahead of time. So as part of your static build, I think we will emit some.rsc files. but apparently that's the extension that the React team decided on. I don't know if it's up today, but I think, I don't think it will change, but there is an extension that is planned to emit such React server components static files. And then, for example, when you click on the link on your website, you will search. the RSC file for the next page, and it will give you the serialized content of the Rack component to load, and then there is a runtime that permits to somehow render the server components on the front end so that you can display the next blog post that you just clicked on. So it's a bit complicated, I'm not sure.
Jack_Herrington:
Yeah,
Sebastian_Lorber
Maybe...
Paige_Niedringhaus:
Hehehehe
Jack_Herrington:
just a bit.
Sebastian_Lorber
Yeah, maybe I lost you a bit, but
Jack_Herrington:
Hahaha
Sebastian_Lorber
I'm very excited by this because somehow, you know, I work on Docusaurus and I think a fair complaint is that maybe it's a bit overkill to use React and I rate React on the front end for content-centric website. Maybe you can think Elevent is better, Astro is better because it has Icelands and things like that. Um, but I think, uh, several components will serve this because somehow we will be able to have a somehow racked Iceland on, uh, on the front end thanks to several components because we can skip all the static bits and the static bits will, uh, will stay on the server and we won't have to, to load them on the front end. So We will somehow catch up thanks to this feature and make the DocuSaurus architecture more sustainable and more performant.
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
Yeah, it's interesting stuff because I actually, I had no idea that your MDX components were actually coming through in your JavaScript bundles. When that it kind of is a big deal because those MDX components and documentation sites can also be huge, right?
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
Like,
Sebastian_Lorber
Yeah.
Tj_Vantoll:
like it's sort of the nature of documentation sites. There's potentially a whole ton of content in there, so that can add up pretty quickly. Um,
Sebastian_Lorber
Yeah.
Tj_Vantoll:
but I think. Maybe we should, since you started talking about DocuSource, maybe we could just transition to that and maybe for our listeners that are just hearing that name for the first time, could you start
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
by just giving an overview of what DocuSource is, what problem it's solving, why people might want to use it, that sort
Paige_Niedringhaus:
Yeah,
Tj_Vantoll:
of thing?
Paige_Niedringhaus:
how it's
Sebastian_Lorber
Yeah.
Paige_Niedringhaus:
different from some of the other static site options out there.
Sebastian_Lorber
Oui, donc la principale idée du DocuSaurus est que vous devriez pouvoir déployer votre site de documentation en se concentrant juste sur votre contenu. Donc, en fait, vous pouvez initer un nouveau projet de DocuSaurus et juste écrire des files marqués et faire un peu de configs JSON. Et ensuite, vous pouvez déployer peut-être, dans cinq minutes, un site de GitHub. Vous devez juste faire... DocuSource deploy command and then it's online. So we make it very easy to get started. In maybe five minutes you have everything online and it's easy also to adopt if you already have Macdon files on a GitHub repo or something. We build a quite generic, I mean, maybe you have seen a lot of DocuSource websites, for example,
Jack_Herrington:
Oh,
Sebastian_Lorber
Create,
Jack_Herrington:
definitely.
Sebastian_Lorber
React, App, yeah. All of those React websites are mostly DocuSaurus, apart maybe some using Next.js and things like that, but there are a lot of DocuSaurus websites in the React ecosystem. So every time you see a React website that looks quite the same as another, it's likely to be DocuSaurus somehow. So this is because those are somehow the default template that we provide at DocuSaurus. So this is really easy to achieve that and get this kind of documentation website in a few minutes. But we also took care of giving you the right primitives to give you the ability to customize deeply your DocuSource site. And you will encounter now many other more complex DocuSource sites that are... Maybe you won't recognize that it's DocuSource and sometimes... I go to a website and I ask myself, is it really DocuSaurus? And I'm not sure I have to open the DevTools to be sure. So we also have some great companies like Figma, Shopify, Microsoft, Snapchat, Yonic, Asura, and many more that are using DocuSaurus and
Paige_Niedringhaus:
Mm-hmm.
Sebastian_Lorber
they have customized it deeply so that the... Le site de documentation respecte leur branding, ils ont ajouté une navigation custom, un photographe custom, leurs couleurs et des tokens de système design et des choses comme ça. Le but de Cthulhu est de pouvoir commencer rapidement, et ensuite vous pouvez le customiser et le faire avec vos besoins. Et cela sera beaucoup moins cher que de construire une solution custom en utilisant un outil plus généreux comme Next.js ou GetB.
Paige_Niedringhaus:
Mm-hmm.
Sebastian_Lorber
Donc, c'est l'idée. Mais nous avons aussi des compétiteurs. Par exemple, si vous êtes un développeur Python, vous pouvez avoir entendu de MKDocs, qui est un autre outil assez intéressant, que les développeurs de Python tendent à préférer. Parce que, bien sûr, vous préférez utiliser un outil de langue que vous êtes familiarisés avec, parce que ça vous permet d'extender. Et même si je pense que c'est un grand compétiteur, ils ont un design vraiment cool. There are also other competitors in the React ecosystem. For example, there is Nextra, which is an Nect.js plugin. I think it's quite advanced and polished now. I think there is the version two that was released quite recently, or maybe will be released, I don't know. I think the kuzores offer more features now, but maybe they will catch up, I don't know. I didn't do a deep comparison recently. And there are also similar tools in the Vue ecosystem. For example, there is VuePress and VeedPress that permits to do about similar things. And Astro also has a docs template, but it's more like a boilerplate. So if they add new features to their tool, and then you initialized your project maybe the year before. you won't benefit from the new features. While the goal of the Cursor is that when we add new features, you should be able to upgrade your NPM package and being able to benefit from these features
Jack_Herrington:
Yeah,
Sebastian_Lorber
without having
Jack_Herrington:
absolutely.
Sebastian_Lorber
to backport the feature. So it's a bit like a create react app, but for documentation somehow.
Jack_Herrington:
Yeah. I hate when people do that kind of, you know, you create your boilerplate project and then you're sort of stuck. Cause
Paige_Niedringhaus:
Thanks for
Jack_Herrington:
the
Paige_Niedringhaus:
watching!
Jack_Herrington:
platform is, is basically
Sebastian_Lorber
Yeah.
Jack_Herrington:
kind of across, you know, the, the versions or whatever, and they don't retain version compatibility.
Sebastian_Lorber
Oui, mais en même temps, ça vous donne la flexibilité à impliquer des choses que, d'autres fois, vous savez, par exemple, la créateur React App, quand vous utilisez ce outil, bientôt vous atteignez la limite et vous devez utiliser un outil comme Craco ou quelque chose comme ça, qui permet d'enlever la configuration des défauts. Mais je pense que c'est encore mieux parce que, au moins vous avez les bases qui sont fournies par votre dépendance, mais ensuite vous avez des outils qui vous permettent de... to enhance it from the outside. And
Jack_Herrington:
Yeah.
Sebastian_Lorber
somehow, if I were to compare the kusorus with Create React App, it's a bit like we provide both Create React App and Krakow in the same package. Somehow we give you the primitives of how to override the frameworks. For example, any 10 components, you can override anything. You just have to put the... the component override that we call this swizzle, where you somehow copy paste a component of our theme and you put it in the folder in your documentation website and you can override everything you want about this component. So this gives you great flexibility but at the same time it's also a bit dangerous because if we want to rename someday the component on the theme, you will have to take this into consideration and maybe when you upgrade some things will break a bit, so it can be annoying too. So that's life.
Jack_Herrington:
As long as it's a major release, it's fine.
Sebastian_Lorber
Yeah.
Jack_Herrington:
People kinda expect a little bit of breakage.
Sebastian_Lorber
Ja, genau.
Jack_Herrington:
Without breakage, you don't get any cool features. Yeah.
Tj_Vantoll:
This is really cool. I've just been perusing the website because I've built a lot of, or I've been involved in some capacity with lots of documentation sites in the past and usually they all end up being some degree of custom thing that like, I mean, it's, it's weird because building a documentation site seems like it would not be that hard. And it really
Jack_Herrington:
Ha!
Tj_Vantoll:
isn't that. Right. And like, in a sense, it really isn't that hard. But then once you get into it, it's like, as soon as a requirement comes up, like, Oh, we need versions of this
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
or like
Jack_Herrington:
Oh
Tj_Vantoll:
support versioning. And all
Sebastian_Lorber
Yeah.
Tj_Vantoll:
of a sudden you're like, you're like, Oh, uh,
Paige_Niedringhaus:
Oh. Oh.
Sebastian_Lorber
Yeah.
Tj_Vantoll:
you have to like fundamentally
Jack_Herrington:
Good luck
Tj_Vantoll:
rethink
Jack_Herrington:
with that.
Tj_Vantoll:
everything you
Sebastian_Lorber
Yeah.
Tj_Vantoll:
you've done, like crap. How are we going to support this? Like, like, there are different languages or
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
those are the things that always just fundamentally just. could knock you back quite a
Sebastian_Lorber
Yeah,
Tj_Vantoll:
bit.
Sebastian_Lorber
but that's also what I thought before working on the course. I started maybe two and a half years ago. And before that, I never built any documentation websites. So I discovered the field about at the same time I started working on the project. And yeah, this is quite crazy because, you know, for example, as a For DocuSaurus, we care about things like SEO, accessibility, and things like that. You know, we try, for example, there's no week that I don't spend time trying to improve the accessibility of the site so that someone that is using a voiceover or something like that will be able to browse the website. I spend all the time to, for example, just two hours ago, I merged a pull request that permits to improve the error process feed of your blog. Vous savez, ce sont les petits détails que vous ne pensez pas à quand vous n'avez jamais construit une web de documentation, mais éventuellement vous devrez penser à tous ces petits détails que vous allez voir avant de travailler sur ça.
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
Search as well. I see like search is a big feature of this. Do you want to talk a little bit about how search works in DocuSaurus?
Sebastian_Lorber
Oui, si vous voulez, nous avons un partenaire avec Algoia, ils ont un programme appelé Dog Search.
Jack_Herrington:
Hmm.
Sebastian_Lorber
Et si vous construisez une chaîne open source, un projet qui est éligible pour un compte gratuit sur Dog Search, comme un projet open source, ils vont faire un crawler sur votre chaîne pour vous. maybe once every day or something like that, I think you can configure the period. DocuSource puts some metadata in the static HTML files that we build, and the crawler run on all the pages. And then the search engine is available as an API, and we have an integration that permits to automatically add a search input on your DocuSource site. So we just query the Algolia API, et c'est assez facile. Certaines personnes n'aiment pas utiliser un service de 3e partie comme Algolia et parfois elles ne veulent pas payer parce qu'elles doivent payer si elles ne sont pas éligibles. Nous avons donc des plugins de communauté pour permettre d'utiliser les plugins locales.
Paige_Niedringhaus:
Mm-hmm.
Sebastian_Lorber
Il n'y a pas d'office de plugin local pour le moment, mais il y a un plan pour construire un.
Jack_Herrington:
Hmm.
Sebastian_Lorber
Je pense que les plugins dans la communauté sont assez bons pour le moment, mais... I know that people want the official plugin. They don't like to use something that is not official, so we will have to provide one some day.
Jack_Herrington:
Yeah, I'm going to get up on my soapbox for a second because I've got a bunch of folks coming to me with like open source projects that they've made. And, you know, they're like, Hey, can you talk about this? And I think the idea is that they just want to get out there and they figure that if they get a tech influencer or if they get on this week and react, you know, it's just going to blow up and everything's going to be great. But you really need to work on documentation and examples,
Sebastian_Lorber
Yeah.
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
you know, and having something like DocuSaurus, like doing that. So that it's done in a standardized way allows your community members to come in and very easily add
Sebastian_Lorber
Mm.
Jack_Herrington:
to your documentation and help you make a better documentation site if that's not your thing. But I gotta say, like when you think about like open sourcing stuff, think about the effort level of coding and then multiply that by 10, that should be the amount of documentation that you do, because it's
Sebastian_Lorber
Yeah.
Jack_Herrington:
really about
Sebastian_Lorber
Mm-mm.
Jack_Herrington:
teaching
Sebastian_Lorber
He-he.
Jack_Herrington:
people how to use your thing
Sebastian_Lorber
Yeah.
Jack_Herrington:
really, you
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
know.
Sebastian_Lorber
Yeah, I really agree with that and I think actually it's a problem for many developers. They don't invest at all in documentation but also marketing. Somehow,
Jack_Herrington:
Yeah.
Sebastian_Lorber
you know, they built a nice project but there is just a GitHub repository with
Paige_Niedringhaus:
I'm
Sebastian_Lorber
maybe five
Paige_Niedringhaus:
sorry.
Sebastian_Lorber
lines saying, yeah, this is the
Jack_Herrington:
This is a thing,
Sebastian_Lorber
rest.
Jack_Herrington:
you're supposed to
Paige_Niedringhaus:
This
Jack_Herrington:
use
Paige_Niedringhaus:
is
Jack_Herrington:
it.
Paige_Niedringhaus:
it.
Jack_Herrington:
What more do you want me to say about
Tj_Vantoll:
Hehehe
Jack_Herrington:
it? Like,
Sebastian_Lorber
Yeah,
Jack_Herrington:
what? What does it do?
Sebastian_Lorber
read the code source to understand what's the
Jack_Herrington:
Yeah,
Sebastian_Lorber
point of
Jack_Herrington:
right.
Sebastian_Lorber
the project.
Paige_Niedringhaus:
Oh
Tj_Vantoll:
Yeah.
Paige_Niedringhaus:
gosh,
Jack_Herrington:
And listen,
Paige_Niedringhaus:
that's
Jack_Herrington:
hey,
Paige_Niedringhaus:
the worst.
Jack_Herrington:
I'm cool with reading code. I like reading code, but you know,
Sebastian_Lorber
Yeah.
Jack_Herrington:
give me an entry point that's
Tj_Vantoll:
Mm.
Jack_Herrington:
easier than that for sure.
Sebastian_Lorber
Mm.
Paige_Niedringhaus:
Yeah. So one question that I have about using DocuSource is you said that companies or whoever is really able to customize it to match their colors and their branding and things like that. What are the different ways that you can do that? Like, can you use SAS? Can you use Tailwind? Is it possible to use all different sorts of CSS and JS?
Sebastian_Lorber
Donc, l'idée est que la simple façon de commencer à customiser l'Ocusaurus est probablement de changer la couleur pour que ça soit à votre marque. Vous pouvez simplement créer des nouveaux files CSS que vous enregistrez dans le config et ensuite nous avons des variables CSS qui représentent les tokens de design, par exemple les couleurs, le font de la taille et des choses comme ça. Vous pouvez donc les fournir dans un file CSS. Et puis, par défaut, nous utilisons les modules CSS, mais il y a le plugin CSS module de SAS, je pense, qui permet de utiliser SAS si c'est votre truc. Et pour un cas d'utilisation plus avancé, parfois, CSS n'est pas assez bon. Donc, nous nous donnons des noms de classe stables que vous pouvez targeter si vous voulez, Mais il y a aussi beaucoup de choses que vous voulez targetter pour ne pas avoir de sélecteurs stables parce qu'il faut garder la flexibilité pour pouvoir refactor les choses parfois. Donc nous pouvons garantir que aucun sélecteur ne se rompre jamais. Bien sûr, c'est un peu compliqué de faire ça. Mais si vous voulez faire une customisation plus profonde, parfois vous devez aussi pouvoir changer le marqueur. Donc c'est ce que... the swizzle feature that makes you to override any time component. So in this case, you are able to somehow get a copy of the React component that we use internally and tweak it like you want, including its CSS module file. So you can change the CSS module of this component or the React implementation and add your own behavior if you want. And there's also a un composé de termes existants avec des components extra-terrestres autour de ça. Je pense que c'est utile parce que ça permet, par exemple, si vous avez un blog, par exemple, et que vous avez un article et que vous voulez plonger votre propre système de commande, ou peut-être que vous voulez permettre aux utilisateurs de voter pour la documentation, vous devez vous donner des retours, disons, un pouce bleu ou un pouce bas si la documentation est bonne. You can do this thanks to a wrapper. For example, you wrap the blog post You create a component that renders the original blog post and in addition put at the bottom The comment widget so you don't have to create a copy of the full blog post code and it permits to reduce the maintenance on your side and the likelihood of Having things to break if you upgrade the users and we did some internal change to the same component que vous essayez de customiser. Il permet de mettre un component au-dessus ou sous un component existant que nous avons déjà rendu dans le réacteur. Et je pense que c'est un pattern à utiliser en priorité parce que si vous copiez notre code interne et que nous le modifiez, il y a un risque que votre copie sera en train de se faire dur. Et ça se passe assez souvent que les utilisateurs oublient de... pour les upgrade de cette carte et ils se demandent pourquoi ce nouveau fonctionnement de DocuSource n'est pas disponible juste pour eux parce que, bien sûr, ils sont sur une version que ils ont copiée un an plus tôt donc la chose est maintenant réglée et ils ne bénéficient pas des nouveaux fonctionnements Donc je pense que c'est tout, et juste l'habileté de faire tout ce que les composants de RAD devrait vous donner un bon moyen de faire ce que vous voulez because we have some opinions that if you want a totally different layout and totally different features than the DocuSource default template, maybe it's better that you start from scratch, but I think we provide some good structure to get started and build little customizations around there. There are a lot of nice websites that are using DocuSource and have nice customizations. They say it's working great for them, so hopefully, you should be able to do the same.
Jack_Herrington:
Yeah, I love DocuSource sites, honestly. I mean, and I've seen so many of them, which is the proof that it is a solid product.
Paige_Niedringhaus:
Mm-hmm. Ha
Jack_Herrington:
And
Sebastian_Lorber
Yeah,
Jack_Herrington:
why rebuild it? Just, just
Paige_Niedringhaus:
ha
Jack_Herrington:
use it.
Paige_Niedringhaus:
ha.
Sebastian_Lorber
I think that we have some drawbacks still. We are a small team and it's quite hard to compete, for example, with Next.js and Versailles on the infrastructure. You know,
Jack_Herrington:
Yeah.
Paige_Niedringhaus:
Mm-hmm.
Sebastian_Lorber
I don't do Rust
Jack_Herrington:
Ha! Ha ha.
Sebastian_Lorber
and this is the trend
Paige_Niedringhaus:
Hehehehe
Sebastian_Lorber
these
Tj_Vantoll:
Hehehe
Sebastian_Lorber
days. And so... If you compare build times and things like that with Rust tools, of course, we are still using Webpack and Babel and things like that by default, so we are not the fastest static site generator.
Tj_Vantoll:
Actually, I was surprised until today. I didn't know DocuSource was a Facebook slash meta
Jack_Herrington:
Yeah, me
Tj_Vantoll:
project.
Jack_Herrington:
neither.
Tj_Vantoll:
I actually
Sebastian_Lorber
Are you?
Tj_Vantoll:
had no idea. So is, is the motivation behind that just, cause I noticed like a lot of Facebook tools use it. Like you said, like a lot
Sebastian_Lorber
Yeah.
Tj_Vantoll:
of the react stuff, um, just was that sort of the motivation to build this and to support it? Cause I mean, it is like, I, I'm still always fascinated by big companies giving away.
Jack_Herrington:
Mm-hmm.
Tj_Vantoll:
stuff like this for free and maintaining it. Cause there there's definitely some effort and involvement to make that.
Sebastian_Lorber
Je peux vous dire un peu de la histoire derrière le projet, mais je n'étais pas là au début, peut-être, je pense que c'était six ans plus tôt. Donc, le Meta Facebook a beaucoup de projets internes et externes, vous ne pouvez que voir le bout du iceberg. Je ne suis pas un employeur de Meta, je suis un contracteur qui travaille pour eux, donc je peux vous dire exactement comment ça fonctionne internement, mais je sais qu'ils They also have projects that are external, but there is a part of internal documentation that you don't see, for example, if you take the relay project, the GraphQL client, there is some
Paige_Niedringhaus:
Mm-hmm.
Sebastian_Lorber
documentation that is public, but they also build a docuseries site with some extra documentation pages that are just targeting the Facebook employees, so they... They need to be able to do such things and publish two variants of the same site so that different persons can browse the website. So they have a lot of internal and external projects and they started to copy paste a Jekyll template over and over again to create documentation websites for each of them. But the thing is, it wasn't very scalable because... For the same reason that a boilerplate is not ideal, once you add new features to the boilerplate, then all the products that used it before will not benefit
Tj_Vantoll:
Yep.
Sebastian_Lorber
from it
Jack_Herrington:
Yup.
Sebastian_Lorber
and it's... Yeah. So it becomes a pain to maintain and then they add the idea to create a reg-based static site generator. Maybe six years ago, I think, the Cosworth was released that... at that time. And so the first version of the kuzorus was quite different. It was only using React on the client side and it was not hydrating React on the front end. And somehow it was just a quite monolithic architecture where you run a click command and you provide it a folder full of markdown files and it will build a... basic static website with just with no react. So you never load react on your browser. And somehow it was quite successful and there are many projects that adopted it. For example, today there are still Babel, Pretier and Latex, I think, that are still using the Kuzuros and a few other projects too. And So they wanted a new version of the tool. And so we started working on the resource for the resource too, maybe four years ago. And this time we are really leveraging React on the front end. So we hydrate React and we make a lot of interactive content and we are using MDX to make your doc interactive by embedding React components inside the markup so that you can have some. some nice playful documentation somehow. I think it's quite cool. And you can build many interesting things thanks to this kind of feature. Like maybe you can add a GraphQL client that permits to query your API directly inside the doc. Or there are a lot of things. I think users can get quite fancy and sometimes I'm quite surprised by what people build with this.
Paige_Niedringhaus:
I'm
Sebastian_Lorber
But
Paige_Niedringhaus:
going to go to bed.
Sebastian_Lorber
yeah, you don't have any limit because you are using React. Whatever you can do with React, you should be able to embed in your documentation.
Paige_Niedringhaus:
Nice.
Jack_Herrington:
Yeah, I really love it when they have those examples of the API. You could just run right there and get the output. That's awesome.
Sebastian_Lorber
Oui.
Paige_Niedringhaus:
care.
Jack_Herrington:
Yeah.
Sebastian_Lorber
Et ce que j'aime, c'est que ce n'est pas un I-Frame. Donc, vous savez, il n'y a pas un spinner qui montre quelque chose qui est en charge et produit des shift layout en écrouillant. C'est bien que vous ayez la chose qui se déplace directement sur votre browser dans la page actuelle et pas embeddée dans un I-Frame qui prend du temps à charger et produire... not the ideal experience I think.
Jack_Herrington:
Yeah. Well, this has been an awesome conversation and I wish we could go on forever with this. Are there any topics that we haven't kind of touched on that you might want to touch on before we finished up?
Sebastian_Lorber
There are a lot of topics I can
Jack_Herrington:
Oh yeah.
Sebastian_Lorber
talk about with React,
Tj_Vantoll:
Hehehe
Sebastian_Lorber
but
Jack_Herrington:
Hahaha
Sebastian_Lorber
this is going to be too long. I think I'm quite passionate about everything cross-platform, React Native.
Jack_Herrington:
Oh yeah.
Sebastian_Lorber
I'm into a remotion to produce videos with React, and I'm into React Free Fiber to render things in 3D. And actually, I'm into both of them at the same time. So I think my... If money was not a problem, I could spend all my time on one project that would be to render 3D videos with remotion and React 3.0 fiber at the same time and do really fancy things like create a Twitter bot that permits to congratulate open source authors to reach a milestone or something like that with a beautiful video. This is a quite fun project I'd like to build. But
Jack_Herrington:
You
Sebastian_Lorber
I
Jack_Herrington:
heard
Sebastian_Lorber
don't have
Jack_Herrington:
it here
Sebastian_Lorber
the skills.
Jack_Herrington:
first, Dune 2 will be
Tj_Vantoll:
It
Jack_Herrington:
rendered
Tj_Vantoll:
is really
Jack_Herrington:
in
Tj_Vantoll:
awesome.
Jack_Herrington:
Remotion. It's gonna be great.
Sebastian_Lorber
Yeah.
Tj_Vantoll:
I do want to hear, I want to hear about your newsletter and
Jack_Herrington:
Yes.
Tj_Vantoll:
you should give it a plug as well.
Jack_Herrington:
Big
Tj_Vantoll:
Do you
Jack_Herrington:
time.
Tj_Vantoll:
want
Paige_Niedringhaus:
Mm-hmm.
Tj_Vantoll:
to just at least briefly tell people about what it is and why they might want to sign up for it?
Paige_Niedringhaus:
Yeah.
Sebastian_Lorber
Yeah, so I ran this week in React. It's a weekly newsletter that I started in French maybe two or three years ago. And I launched it in English last year. And it's growing fast. And I send you somehow the best links of the React ecosystem every week so that you can stay up to date. And I think it's a bit different from other newsletters that I really... take care of selecting the links that will be interesting for experienced developers and not only for junior developers. Like I tried to avoid putting things like getting started in React and things that you find on many blogs like dev and things like that where there are too much junior related content. The problem I'm trying to solve somehow is as an experienced React developer... It's hard to find articles that are interesting to me. And
Paige_Niedringhaus:
Mm-hmm.
Sebastian_Lorber
it takes a lot of time. You have to spend a lot of time scrolling on Twitter to find the really interesting content that teach you something new. So I try to solve this problem for Rack developers. And apparently, I do a good job because people give me great feedback on the newsletter. So.
Jack_Herrington:
Yeah, it's great. It's awesome. Well done.
Sebastian_Lorber
Thank you.
Tj_Vantoll:
and it's thisweekinreact.com. And
Sebastian_Lorber
Yeah.
Tj_Vantoll:
we'll put the same in the show notes as well.
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
Awesome.
Sebastian_Lorber
Thank you.
Jack_Herrington:
Well, that brings us around to picks for the week. So, Paige, why don't you start us off with your pick for the week?
Paige_Niedringhaus:
Sure. So if you're in the US or you celebrate the US holidays, last week was Thanksgiving. So it's typically a time when you go visit family, you hang out, you watch TV a lot
Sebastian_Lorber
Hehehe
Paige_Niedringhaus:
or movies.
Jack_Herrington:
and overeat.
Paige_Niedringhaus:
And one one very fun series that we were watching that, you know, you can just pick up an episode and watch it is Top Gear. So
Jack_Herrington:
Oh yeah.
Paige_Niedringhaus:
it's a British car show, but it's fun because there's super cars, there's challenges where they have to buy a car within a certain amount of, you know, some little amount of money. They do crazy things like rallying and driving around the country and pranking each other all at the same time. So that was what we were watching a good bit of last week. So I'm going to pick that as a really fun, family friendly. Everybody will enjoy it of all ages, even if you're not a car person, because there's a lot more to it than just cars. So if you have some time and you want something that's easy and light, I would definitely say that's a good one to choose.
Jack_Herrington:
so all the way. TJ, you want to give us a pick?
Tj_Vantoll:
Sure. Well, your Thanksgiving message made me pivot mine because I came up with another idea
Jack_Herrington:
You
Tj_Vantoll:
because
Jack_Herrington:
were gonna do Top Gear 2?
Tj_Vantoll:
no, not Top Gear, but I mean, long-time listeners know that we like picking kitchen gadgets
Jack_Herrington:
Oh!
Tj_Vantoll:
and cooking gadgets on the show. And so I'm going to pick an electric wine bottle opener
Jack_Herrington:
Oh!
Paige_Niedringhaus:
Hmm.
Tj_Vantoll:
that we've had for a while. And you might think... why do I need an electric wine bottle opener? Because really at the end of the day, you don't need one of these
Jack_Herrington:
No.
Tj_Vantoll:
things.
Jack_Herrington:
Oh, you do.
Tj_Vantoll:
The only reason to do it is it's an amazing party trick to just like have a wine bottle and to bust open this thing. Cause basically it's got a corkscrew in it, but there's just a button that pushes down for the corkscrew goes in. You press the other button, it comes right out. It makes opening a wine bottle really easy. You can impress friends and family. They're like $25 too, so it's not like it's ludicrously
Jack_Herrington:
Well, which
Tj_Vantoll:
expensive.
Jack_Herrington:
one though?
Tj_Vantoll:
Um, I've got, I found one on Amazon, Oster OSTR. Uh,
Jack_Herrington:
Oh yeah, that was
Tj_Vantoll:
that's,
Jack_Herrington:
just a great
Tj_Vantoll:
that's
Jack_Herrington:
comment.
Tj_Vantoll:
one, it's one we have. Um, it's, it's just a lot of fun. I don't know. Silly little thing, but you can impress
Paige_Niedringhaus:
Yeah.
Tj_Vantoll:
your friends and look cool.
Jack_Herrington:
It's funny
Tj_Vantoll:
And who doesn't want to do that?
Jack_Herrington:
that they have to have a requirement when they're building that thing. How inebriated can you be and still
Tj_Vantoll:
Okay.
Paige_Niedringhaus:
Still
Sebastian_Lorber
Ha
Paige_Niedringhaus:
use it.
Jack_Herrington:
hit the button?
Sebastian_Lorber
ha ha. Mm. Ha ha.
Jack_Herrington:
All right, Sebastian, what's your pick for the week?
Sebastian_Lorber
Actually, I already mentioned my pick. It was a Remotion and React 3.0 fiber.
Jack_Herrington:
No.
Sebastian_Lorber
So I think it's really a great combination that I'd like to explore more in the future. And maybe there is also React Native Skia that I want to mention, which permits to do 2D graphics on the browser and combined with Remotion, it also permits to do some crazy videos. And this is what maybe you know the William Candiano YouTuber that creates a video about a RECNATIVE animations. And he's using Remotion and Skia to produce his videos. And I think it gives a really great result.
Jack_Herrington:
Awesome.
Tj_Vantoll:
Can
Jack_Herrington:
Yeah.
Tj_Vantoll:
you spell that last one for me? Not in re-motion, but do you say skia?
Sebastian_Lorber
Yes, this is the rendering engine of Flutter. And
Jack_Herrington:
Oh.
Sebastian_Lorber
it's used on the very new package from Shopify that's called React Native SkiR. But actually, this is also working on the web, because most things working in React Native can usually work on the web. So you can use React Native SkiR, but somehow, maybe it's not. should be better renamed as ReactSky because you can use it on both React Native or React Web. So this is also a cool package to try. But it's a bit new, so maybe it's not stable enough for production usage on the web, but it's worth taking a look.
Tj_Vantoll:
And their documentation uses DocuSaurus.
Jack_Herrington:
Dun dun dun. It's all coming back around.
Sebastian_Lorber
Yeah.
Paige_Niedringhaus:
Full
Jack_Herrington:
Nice.
Paige_Niedringhaus:
circle.
Jack_Herrington:
Ha ha ha ha.
Sebastian_Lorber
Mm.
Jack_Herrington:
All right. Well, let's see, I'll wrap up with my pick for the week. My pick for the week is Console Ninja. I don't know if I've talked about it before, but it is from the same folks that do Wallaby and Quokka. Wallaby is a unit test helper. Quokka is a worksheet extension for VS Code where you can create a workbook and then just kind of in TypeScript or JavaScript to start going at it and see what does this regular expression cook up, that kind of thing is very handy. Both of those are, I know, I know, while we pretty much have to pay for, Quokka, I think, is a free version and a pay-for version, but this new one, Console Ninja, is completely free and it actually gives you the console log right there in the code, even if it's rendering on the browser. Well, I could be rendering in node as well on the server. And it's just like, oh man. And it's just so easy. And another thing it does is even if it wasn't a console log, if you have an error thrown somewhere in your execution path, you actually see the error. And that's, I think even more convenient is it's like right there, you know, in a big, big red, like, hey, you, you're referencing an undefined dummy. Go fix that. And it's been super handy.
Sebastian_Lorber
Yeah.
Jack_Herrington:
So big, big fan of Console Ninja.
Paige_Niedringhaus:
Nice.
Jack_Herrington:
All right guys, well
Sebastian_Lorber
Vous pouvez me trouver sur Twitter à Sebastian Lorbert, il va réagir cette semaine.
Jack_Herrington:
this has been really, really fun. And Sebastian, how do we keep up with you besides this weekend React?
Sebastian_Lorber
Je pense qu'il y a beaucoup de liens sur les nouvelles, donc vous me trouverez.
Jack_Herrington:
Ha ha ha ha! Awesome! So, well, it's been a lot of pleasure and we will see you guys next week.
Tj_Vantoll:
Yeah, thanks everybody.
Paige_Niedringhaus:
See you then
Sebastian_Lorber
Thank you. See you
Jack_Herrington:
All right