Sebastien Lorber, Docusaurus maintainer at Meta and This Week in React newsletter creator, joins the React Round Up panel to discuss the latest and greatest in React 18, including lesser-known hooks and features that are making the framework more useful and performant than ever before. He also deep dives into why Docusaurus (maintained by Meta/Facebook) has become such a popular static site generator for companies and dev teams in all industries to document their products, APIs, software, and more.

Learn more about the most exciting new developments in the React ecosystem by listening now and stay up to date with new developments by signing up for Sebastien's free This Week in React newsletter. 

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

 

Hey everyone.

 

and TJ VanTole.

 

Hey everybody.

 

And today we have a special guest. We've got Sebastian Lorber. Hey Sebastian, how are you?

 

Hey, I'm fine and you. Thanks for having me.

 

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.

 

I don't know if I'm famous but

 

Everybody

 

maybe

 

says that. Ha ha!

 

you probably heard about maybe my newsletter this week in React or maybe

 

Mm-hmm.

 

the DocuSource project which is the

 

Mm-hmm.

 

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.

 

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?

 

I think the big wins, actually we don't yet see the big wins because

 

Hmm.

 

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!

 

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

 

Je pense que c'était dans la blog post de la réaction de la blog post de la réaction de

 

find out more about this?

 

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

 

Huh.

 

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,

 

Mm-hmm.

 

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.

 

That is freaking amazing.

 

Hey.

 

Ouais.

 

Wow.

 

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.

 

Mm-hmm.

 

Mais il y a...

 

Is it lucy?

 

So.

 

Oui, donc le plugin Gatsby, je ne pense pas que c'est très bien connu

 

Ha ha.

 

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.

 

I think it's really cool.

 

Yeah.

 

Yeah, I mean, we're tracking so much of what users are doing online anyway, with or without their explicit knowledge. It seems

 

Yeah.

 

like a natural

 

Except in Europe.

 

next step for a lot of websites.

 

Yeah, if you're tracking everything anyways, you might as well give the user some benefit

 

Yeah.

 

Give him a faster sight.

 

from doing it.

 

Exactly.

 

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?

 

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

 

Mm-hmm.

 

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.

 

Yeah, I love that hook.

 

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.

 

Good

 

Hopefully

 

timing.

 

Great

 

they

 

minds.

 

both did well because, yeah. Yeah.

 

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

 

Yeah.

 

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.

 

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

 

Yeah

 

how they're doing React server components and working with streaming

 

Mm.

 

has been really cool. So

 

Yeah.

 

what's your take on all that?

 

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.

 

Yeah.

 

Mm-hmm.

 

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

 

Uuuhhh...

 

into formats. So

 

Yuck.

 

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

 

Yeah.

 

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.

 

Mm-hmm.

 

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.

 

Yeah,

 

Maybe...

 

Hehehehe

 

just a bit.

 

Yeah, maybe I lost you a bit, but

 

Hahaha

 

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.

 

Mm-hmm.

 

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?

 

Mm-hmm.

 

Like,

 

Yeah.

 

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,

 

Yeah.

 

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

 

Mm-hmm.

 

by just giving an overview of what DocuSource is, what problem it's solving, why people might want to use it, that sort

 

Yeah,

 

of thing?

 

how it's

 

Yeah.

 

different from some of the other static site options out there.

 

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,

 

Oh,

 

Create,

 

definitely.

 

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

 

Mm-hmm.

 

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.

 

Mm-hmm.

 

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

 

Yeah,

 

without having

 

absolutely.

 

to backport the feature. So it's a bit like a create react app, but for documentation somehow.

 

Yeah. I hate when people do that kind of, you know, you create your boilerplate project and then you're sort of stuck. Cause

 

Thanks for

 

the

 

watching!

 

platform is, is basically

 

Yeah.

 

kind of across, you know, the, the versions or whatever, and they don't retain version compatibility.

 

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

 

Yeah.

 

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.

 

As long as it's a major release, it's fine.

 

Yeah.

 

People kinda expect a little bit of breakage.

 

Ja, genau.

 

Without breakage, you don't get any cool features. Yeah.

 

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

 

Ha!

 

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

 

Mm-hmm.

 

or like

 

Oh

 

support versioning. And all

 

Yeah.

 

of a sudden you're like, you're like, Oh, uh,

 

Oh. Oh.

 

Yeah.

 

you have to like fundamentally

 

Good luck

 

rethink

 

with that.

 

everything you

 

Yeah.

 

you've done, like crap. How are we going to support this? Like, like, there are different languages or

 

Mm-hmm.

 

those are the things that always just fundamentally just. could knock you back quite a

 

Yeah,

 

bit.

 

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.

 

Mm-hmm.

 

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?

 

Oui, si vous voulez, nous avons un partenaire avec Algoia, ils ont un programme appelé Dog Search.

 

Hmm.

 

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.

 

Mm-hmm.

 

Il n'y a pas d'office de plugin local pour le moment, mais il y a un plan pour construire un.

 

Hmm.

 

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.

 

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,

 

Yeah.

 

Mm-hmm.

 

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

 

Mm.

 

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

 

Yeah.

 

really about

 

Mm-mm.

 

teaching

 

He-he.

 

people how to use your thing

 

Yeah.

 

really, you

 

Yeah.

 

know.

 

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,

 

Yeah.

 

you know, they built a nice project but there is just a GitHub repository with

 

I'm

 

maybe five

 

sorry.

 

lines saying, yeah, this is the

 

This is a thing,

 

rest.

 

you're supposed to

 

This

 

use

 

is

 

it.

 

it.

 

What more do you want me to say about

 

Hehehe

 

it? Like,

 

Yeah,

 

what? What does it do?

 

read the code source to understand what's the

 

Yeah,

 

point of

 

right.

 

the project.

 

Oh

 

Yeah.

 

gosh,

 

And listen,

 

that's

 

hey,

 

the worst.

 

I'm cool with reading code. I like reading code, but you know,

 

Yeah.

 

give me an entry point that's

 

Mm.

 

easier than that for sure.

 

Mm.

 

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?

 

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.

 

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.

 

Mm-hmm. Ha

 

And

 

Yeah,

 

why rebuild it? Just, just

 

ha

 

use it.

 

ha.

 

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,

 

Yeah.

 

Mm-hmm.

 

I don't do Rust

 

Ha! Ha ha.

 

and this is the trend

 

Hehehehe

 

these

 

Hehehe

 

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.

 

Actually, I was surprised until today. I didn't know DocuSource was a Facebook slash meta

 

Yeah, me

 

project.

 

neither.

 

I actually

 

Are you?

 

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

 

Yeah.

 

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.

 

Mm-hmm.

 

stuff like this for free and maintaining it. Cause there there's definitely some effort and involvement to make that.

 

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

 

Mm-hmm.

 

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

 

Yep.

 

from it

 

Yup.

 

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.

 

I'm

 

But

 

going to go to bed.

 

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.

 

Nice.

 

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.

 

Oui.

 

care.

 

Yeah.

 

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.

 

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?

 

There are a lot of topics I can

 

Oh yeah.

 

talk about with React,

 

Hehehe

 

but

 

Hahaha

 

this is going to be too long. I think I'm quite passionate about everything cross-platform, React Native.

 

Oh yeah.

 

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

 

You

 

I

 

heard

 

don't have

 

it here

 

the skills.

 

first, Dune 2 will be

 

It

 

rendered

 

is really

 

in

 

awesome.

 

Remotion. It's gonna be great.

 

Yeah.

 

I do want to hear, I want to hear about your newsletter and

 

Yes.

 

you should give it a plug as well.

 

Big

 

Do you

 

time.

 

want

 

Mm-hmm.

 

to just at least briefly tell people about what it is and why they might want to sign up for it?

 

Yeah.

 

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

 

Mm-hmm.

 

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.

 

Yeah, it's great. It's awesome. Well done.

 

Thank you.

 

and it's thisweekinreact.com. And

 

Yeah.

 

we'll put the same in the show notes as well.

 

Mm-hmm.

 

Awesome.

 

Thank you.

 

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?

 

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

 

Hehehe

 

or movies.

 

and overeat.

 

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

 

Oh yeah.

 

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.

 

so all the way. TJ, you want to give us a pick?

 

Sure. Well, your Thanksgiving message made me pivot mine because I came up with another idea

 

You

 

because

 

were gonna do Top Gear 2?

 

no, not Top Gear, but I mean, long-time listeners know that we like picking kitchen gadgets

 

Oh!

 

and cooking gadgets on the show. And so I'm going to pick an electric wine bottle opener

 

Oh!

 

Hmm.

 

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

 

No.

 

things.

 

Oh, you do.

 

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

 

Well, which

 

expensive.

 

one though?

 

Um, I've got, I found one on Amazon, Oster OSTR. Uh,

 

Oh yeah, that was

 

that's,

 

just a great

 

that's

 

comment.

 

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

 

Yeah.

 

your friends and look cool.

 

It's funny

 

And who doesn't want to do that?

 

that they have to have a requirement when they're building that thing. How inebriated can you be and still

 

Okay.

 

Still

 

Ha

 

use it.

 

hit the button?

 

ha ha. Mm. Ha ha.

 

All right, Sebastian, what's your pick for the week?

 

Actually, I already mentioned my pick. It was a Remotion and React 3.0 fiber.

 

No.

 

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.

 

Awesome.

 

Can

 

Yeah.

 

you spell that last one for me? Not in re-motion, but do you say skia?

 

Yes, this is the rendering engine of Flutter. And

 

Oh.

 

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.

 

And their documentation uses DocuSaurus.

 

Dun dun dun. It's all coming back around.

 

Yeah.

 

Full

 

Nice.

 

circle.

 

Ha ha ha ha.

 

Mm.

 

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.

 

Yeah.

 

So big, big fan of Console Ninja.

 

Nice.

 

All right guys, well

 

Vous pouvez me trouver sur Twitter à Sebastian Lorbert, il va réagir cette semaine.

 

this has been really, really fun. And Sebastian, how do we keep up with you besides this weekend React?

 

Je pense qu'il y a beaucoup de liens sur les nouvelles, donc vous me trouverez.

 

Ha ha ha ha! Awesome! So, well, it's been a lot of pleasure and we will see you guys next week.

 

Yeah, thanks everybody.

 

See you then

 

Thank you. See you

All right