00:00:00 Kent: Hey everybody, I am excited to be joined by Monica Powell say hi Monica All right, so if you haven't met Monica yet, she's just a delight I have we've crossed paths a number of times I think every time has been at conferences at least in person That conferences bring

00:00:20 people together, I guess. But yeah, Monica, I think, I'm pretty sure that I met you on Twitter first, but this is like quite a while ago now, maybe 2018 or something like that. Certainly before COVID, that's the new BC. And so, yeah, it's just been a pleasure

00:00:40 to know you all this time. Monica, could you give our viewers a little intro to yourself?

00:00:48 Monica: Sure, hi everyone, I'm Monica Powell. I am a senior software engineer at Newzeala. I work in educational technology, so building software for K through 12 teachers and students. And I'm also a very excited member of the Rack community. So met Kent at a bunch of Rack conferences. I

00:01:08 founded a React meetup for women at non-binary Rack developers in New York City. This was pre-pandemic. And I'm also just like super excited about like the JavaScript ecosystem and how folks are eager to like open source things and do like knowledge sharing within the community.

00:01:29 And In general, I'm excited about open source. I am a GitHub star, so I help encourage other folks to contribute to open source and also contribute when I'm able to.

00:01:40 Kent: Awesome, wow, that's quite the list of things that you're involved with. I wanna dive in briefly to the React Robins, I think is what you were talking about. Can you tell us a little bit about that? And is it still running post-COVID or did COVID kind of slow that down?

00:01:59 Monica: Yeah. So I would definitely say that COVID slowed down the meetup a little bit. So before the pandemic, I was based in New York City. I relocated during the pandemic. And so currently like the, the meetup is still exists like in, I guess, New York. We had hosted an event earlier this year with some other React groups in New York City. And so that

00:02:19 was well attended. But yeah, we're not having like regular meetups right now, just in terms of logistics, because like I and some of the other organizers have moved out of the area, some folks out of the country. So yeah, I'm trying to figure out what it looks like. 2020.

00:02:40 But, I originally started it in 2018. So I was starting to learn more about React and I was like, I'm interested in connecting with other folks who are using React. And I had gone to a lot of women-focused meetup groups and I found them to be very supportive spaces. So like Women

00:03:01 Who Code, I've also gone to like Rights-Free Code and some other ones that either like focus specifically on women or women and non-binary folks. And I felt like it was like a supportive way to learn new technologies and also have the opportunity to like speak and things like that, which is also

00:03:21 available at other meetups as well that are open to a wider audience or focus on a wider audience. But I really wanted to create something where I felt like I could have an impact on improving the experience for other women and non-binary folks. And I also had the opportunity to collaborate with some of the other meetups in New

00:03:41 York City from the beginning. So I definitely felt like there was a lot of support both within the local React community and then also from the React core team as well to figure out how they could best support the initiatives that I was learning.

00:03:56 Kent: I just think that is so awesome. It's just an example of somebody seeing a need in the community and filling it. And so thank you for doing that. I think it's great. And I hope that somebody picks up the torch in New York and also like in other places as well.

00:04:17 Definitely. I want people to follow your example. Okay, great. So let's also talk about the thing you talked about at RemixConf earlier this year, which was MDX. So, you know what, actually, before we get into that, I'm kind of curious about your job as well.

00:04:37 So you said you work at a company that helps with the elementary education or that sort of thing. Can you kind of explain a little bit more about what your company does?

00:04:48 Monica: Yeah, so I work at New Zella. We provide a lot of different types of content and resources that teachers can use to teach concepts to their students, whether that's in like English, language arts, science, other areas as well. And 1 of the great things about the content that we have available to

00:05:08 students is that teachers can adjust the level of the content based off of where the specific student is at. So everyone in the classroom is able to get access to the same like core concepts in terms of like learning key terms or learning about historical events. But they're able to read it at their reading level. So if

00:05:28 they're at a higher reading level, then their vocabulary would be more complex and the article may be longer. If they're at a different reading level, then there may be like different words that are better suited to where they're at so that they're able to really get the most out of the material that they're

00:05:48 consuming. And we have a lot of different activities, like quizzes and ways to check whether or not a student is actually gaining the knowledge inside that we're hoping from specific pieces of content. And at Nozella, I focus specifically on our assignments feature. So the

00:06:10 main way that teachers are interfacing with their students.

00:06:14 Kent: Yeah, well, That's very interesting. I imagine you're probably not doing this, but my first thought was, oh, well, like you have the same content just like adjusted for the reading level. It sounds like a job that AI could help with a lot, actually, like just start with the, here's the full, like most complex content,

00:06:35 and then could you make this, but make it progressively lower reading levels? Are you using AI for that, or is that all by humans right now?

00:06:46 Monica: So my understanding is that we're not currently using AI for that. We have had this functionality since before I joined in 2020. So it has been around that functionality since pre-AI, but I do know that we are exploring ways that we can incorporate AI to like increase our impact in scale in different areas.

00:07:06 So yeah, it's definitely something that is a conversation.

00:07:11 Kent: Yeah, yeah, it's very interesting. How cool. Okay, great. That just was very interesting to me. And I always really appreciate people who are working in the education, especially for youth. I think that is just really critical. So thank you for working there. I think that's a really awesome thing you're doing. Okay,

00:07:31 so let's talk about MDX then. So, maybe, I always like to try and start with the problems and then introduce the solution that way. Can you kind of talk about some of the problems that MDX is intended to solve and then how it solves it.

00:07:48 Monica: Okay, so if you're writing a blog and you decide that you want to use Markdown for like the language or syntax that you're using to write your content, it's simple if someone's familiar with Markdown to quickly just like get information out of their head and into Markdown.

00:08:09 But when you want to create a more complex experience, so if you want to have those interactive elements within your content that are ad hoc, depending on the content, are very specific to that specific piece of content. Markdown isn't super flexible about creating these custom elements and custom experiences.

00:08:30 And then there's also a lot of like something in Markdown, then Markdown is going to like output the same HTML given like similar like input. But there's going to be sometimes where you may be writing a link in markdown and depending on if it's like an internal link or an external link, you may want the markup

00:08:50 for that content to look different. So with markdown, it's always going to give you like the same output, which is, it's probably okay, but it depends on like, you may have requirements that you need the starting links to have different

00:09:10 markup for accessibility purposes. Or if you're using a framework and you want to like preload internal links, but not external links, things like that, then you would, it would be helpful if you had a way where you could start in markdown that's written, output different markup, as opposed to always like treating the same types of HTML

00:09:30 elements the same.

00:09:32 Kent: Yeah, yeah, that makes lots of sense. So in my mind, it kind of is, well, it's MDX. So like, it's very intentional in, you know, the JSX relationship there. And in my mind, it's kind of like doing for Markdown what JSX did for HTML, which is like bring it into something that can

00:09:52 be dynamic into like a language that we can write rules around and stuff like that. And so for my own blog, when I started wanting to use MDX, it was because I wanted interactive pieces in my blog posts. So like you can click buttons and different things like that. So yeah, I think

00:10:12 it's a really cool idea. I remember when MDX first came out, there were a lot of different experiments of trying to make Markdown a little bit more dynamic and MDX just really rocks. So what do you use MDX for?

00:10:32 Monica: Yeah, so I use MDX on my website. So when I create blog articles, there's certain elements that I may want to stand out or have more interactive types of code elements. If I'm writing an article about a React component, I can actually import the React

00:10:52 component into the article. So you can also you can see the code, but then you can see like, how does this component actually behave in inside of the article and you don't have to have like an external embed. Like you can do, you can have everything local to your site if

00:11:12 you're using MDX or local to like, maybe local is not the right word, but basically you don't have to rely on like an external site like CodeSandbox or CodePen in order to host these code samples, you can do everything like locally using React components and MDS. There's a lot that I want to do with

00:11:32 MDX that I feel like I haven't fully, fully explored yet, but I'm super excited about the potential and opportunities for if there's something that I do want to deliver within a content experience, I know that I can do that with MDX. Some examples of how MDX uses

00:11:53 a learning tool is if you've seen the new React documentation, it's a lot more interactive now. So that if you want to get more information about certain parts of the documentation or do quiz questions or interact with code samples

00:12:13 and things like that, that's all powered by NDX on the new React site. And Then I've seen on the Prisma documentation, they have their examples are all, you can either switch it from TypeScript or JavaScript to the examples that they show. That's a React component that they created. So they can write the

00:12:33 documentation and markdown, have a React component inside the documentation, and then based off of the state of that component, then it can switch back and forth between TypeScript and JavaScript so that folks are able to quickly get the information they need in the language that they need. So, I definitely feel like there's a lot of

00:12:54 opportunities to like enhance the learning experience like how you're doing on your website.

00:13:00 Kent: Yeah, yeah. I am also using MDX on my current website And in fact the folks who are going through epic web right now are all of the instructions and everything even like the diff tab That will show you the difference between your work and the finished version. That's all powered by MDX.

00:13:20 And so it's a very powerful piece of technology. And yeah, I'm a super fan, for sure. There's a lot that you can do with it. Now, for a lot of people, this is all about content is the primary idea behind MDX.

00:13:41 For a lot of folks, I think the content management systems don't typically deal in MDX. Like most CMSs, whether they're headless or otherwise, are more like WYSIWYG or something like that. So where do you feel like MDX fits in with, like, If you were building

00:14:02 a blog for a client, would you use MDX or where would that make sense?

00:14:09 Monica: Yeah, that's a good question. I'm imagining that there's like some abstractions that could be built on top of MDX. So I would think probably like if it was like a editor that someone could use, whether they do or

00:14:29 don't know Markdown and then maybe have that under the hood. There'll be like some MDX. So like if they like inserted a certain like almost like a WordPress shortcode that I would be like actually under the hood like a React component or something. But I haven't, I haven't, I guess I've mostly used MDX as

00:14:49 like, either I'm writing or maintaining the MDX, or like I've seen a lot of like technical documentation is written in MDX where the folks that are contributing to the documentation are somewhat technical since they're interested and are actually contributing to the technical documentation, but I do think that if it's going to

00:15:09 be used like outside of that context that it's helpful to probably like have some additional abstraction because it is a bit more complicated than simple, straight like vanilla Markdown. So there definitely is some complexity and like it'd

00:15:29 be helpful if the person is familiar with React. So I do think that there are some trade-offs depending on how familiar someone is with different parts of the technologies that are make up MDX, so Markdown and JSX. If they're familiar with those syntax or somewhat familiar with Markdown, then I think that

00:15:49 they can be quickly put up to speed. But I would have concerns about using that in like a CMS where someone's primary job is like I need to deliver information and they don't necessarily want to learn like a whole new syntax to deliver that information.

00:16:04 Kent: Yeah, yeah, that makes a lot of sense. I think Markdown in general is probably better suited for more technical content writers, Which is a shame, honestly, because I really enjoy it and I wish everybody just knew how to write Markdown and it would simplify a lot of things, I think. But yeah, there are existing

00:16:25 CMSs. Epicweb.dev uses Sanity and it's super great. So yeah, good for our own content that we're writing Documentation blogs and stuff like that. That's cool So what are the tools that you use along with MDX and or actually maybe let's take it a step lower

00:16:45 How does MDX work like it if I were to say I want to build a blog in MDX today and I want it to be in Remix because I'm learning Epic Web Dev, we're learning Remix and stuff, I want to practice my skills. What would be the first couple of things that I'd want to do to be able to start writing content

00:17:06 in MDX?

00:17:07 Monica: Okay, so depending on like what framework you're using, there may be built in support for MDX. So Revex has built in support for MDX. So if you create a file and have the MDX extension, then you're able to immediately start using the MDX syntax, so you can look at the documentation

00:17:28 and start writing a Markdown file, and then if you had a React component, importing that into the file and being able to render that. But depending on your needs for markdown or for MDX, I would definitely recommend folks consider using a tool like MDX Bundler, which you

00:17:48 created. So that is a framework agnostic tool that can be used to transform MDX files into the format that they need to be in to actually be rendered in the browser. So I guess I would recommend maybe people start with, if

00:18:08 they're using a framework, start with what is the built-in MDX support, but then consider a tool like MDX Bundler if their needs become more complex or there are certain things that they want to do that are not supported out of the box with their framework. So most frameworks that have the, if not all of them, that have the built-in MDX support, they're going to

00:18:30 try, they're going to create like or compile those MDX files at build time. So if you have a lot of content, create more MDX content, it's going to make it slower for you to build your site. Whereas with MDX Bundler, it would actually do those, compile the MDX into the format that needs to be on

00:18:50 demand, so as you make a request, so that if you have a ton of content, that's not going to, like the MDX processing isn't going to affect how long your website takes to build. So those are, I guess, the 2 places I would recommend people look into as they start to consider using MDX.

00:19:11 And then MDX, in general, is part of a much larger ecosystem called Unify, which is a, they call it a collective. So it's an open source collective of various, like hundreds and hundreds of open source projects that are focusing on using content as

00:19:31 structured data. So with software, you could think of structured data as abstract syntax trees, which are like a more verbose representation of the human readable JavaScript that you may be writing that is closer to what your computer is actually interpreting

00:19:52 as it's rendering the JavaScript logic and things of that nature. But the cool thing about abstract syntax trees is that it makes it a lot easier to programmatically manipulate and change the content or the data or the code that is written

00:20:13 in a safe and predictable way. So if you've used ES1 or Pretty or Under the Hood, they're working with objects and textures to actually do those transformations. And MDX is similar in some ways in terms of the ways that it's actually like figuring out given

00:20:33 certain MDX, what is the like desired output that we need to have and like the final bundle so that it has like the content that you wrote, but it also has the React components that you've imported or created within this file, and everything is working as expected. Or

00:20:54 you can also, oh, OK, I'll let you.

00:20:56 Kent: No, no, no. You can also what?

00:21:01 Monica: So I guess, in terms of the abstract and text trees and MDX part of it is like actually like getting MDX into something that the browser can render. But then there's also like, if you, written something in MDX, which I kind of pointed to earlier, of like, say you have a link

00:21:22 that you've written within an MDX file, you can use something called component shadowing in MDX, where you override the functionality of HTML elements. So you're basically like given, I know that like this MDX typically would render like this HTML element, but instead

00:21:42 whenever I have this HTML element that would be rendered, I want to like have some custom component that is rendered. So you could have your own custom link component that has additional markup beyond what you would get out of the box with MDX. And so all of those transformations are happening with the different tools within

00:22:03 MDX ecosystem.

00:22:05 Kent: Yeah, yeah, I actually use that quite a bit because you get not only component shadowing with like, well, so as an example, the headings in the Epic Web Dev Workshop instructions. Those are all linkable, and I'm using a component for component shadowing. So instead of a regular H1, it's

00:22:26 rendering my component instead, which will render an H1, but also renders the link and all that. And then on top of that, you can also use that same feature for adding components that your MDX can render without actually having to import that. And so I have like the people

00:22:46 who've gone through the workshops now probably have found a couple of places where it has like a file and then you click on that and it'll open up in your editor and stuff. That's a component that I'm using called like launching editor or something like that or inline file. Yeah, using that a lot. It's very, very, very cool that you can

00:23:06 do that. So you mentioned a bunch of things I wanted to also talk about, or just reiterate what you said, that you recommend people use the built-in support for MDX in the frameworks that they're using. I agree with that because a lot of times people will jump straight into the more complex solution

00:23:26 with MDX Bundler and find out that like, wow, this is actually, it is non-trivial to implement that because compiling MDX can take some time. Like it's multiple milliseconds, and you know, hundreds of milliseconds in some cases. And so you don't want your users to be waiting for that. So now you have to add caching.

00:23:47 It's a whole thing. And so, yeah, I agree. If you're just planning on a dozen blog posts or something, probably just use the built-in stuff. So, yeah, that was a good call out too. And yeah, we got into abstract syntax trees. Like we've got on my personal

00:24:07 blog and also on Epic Web, we've got automatic transforms that are happening on the MDX. That's actually how the diff works is I have a transform on the, well, actually, no, I'm generating the MDX there, but like I've got a number of transforms that will automatically add things to different URLs and stuff.

00:24:28 So that unified ecosystem that you mentioned is super, super powerful. You can do a lot of stuff with that. So yeah, I think like we covered a lot of ground. Is there anything that you wanted to talk about with MDX that we didn't really get to?

00:24:45 Monica: Yes, So I guess just like 1 more specific thing about like the unified ecosystem. So if you're using MDX, like 2 probably most relevant would be like, I guess areas that you should look into are re-height plugins and re-mark plugins. So those are, can be used to transform HTML

00:25:06 and they can also be used to transform a markdown depending on what part of the process you would like to manipulate the code in. And so there are some like pre-existing Remark and Rehype plugins that exist, but you can also create your own like custom Rehype

00:25:26 and Remark plugins. And the naming would be based off of like which if you're editing the transforming the markdown or transforming the HTML. And so I know in, I think that's on the unified site. They have some examples or unified and the MDFGS site. They have examples of how you would, write your own plugins.

00:25:47 So. 1 that I had written, was to like create a table of content dynamically given a content or it's more so not creating the table of contents but creating the data that we would need to construct the table of contents. So for every single header, getting the

00:26:07 ID, which would be like, if it's like a multi-word header, like making sure it's slugified and, then also having like the human readable name that we would want to display in the table of contents. So that can be done by creating a rehype plugin, which at

00:26:27 a high level, we use like this Unis util visit package, which would allow you to recursively walk through the content and identify all of the H2 headings. So like I said, nested, you could you could just find them all and then grab the anchor text

00:26:47 and return an object that has, like I said earlier, the ID that you set, actually navigate to that heading as well as the text associated with that heading. And then that data can then be automatically for every single piece of MDX content. As it's processed, you have access to

00:27:10 the table of contents data. So that's something, I guess like the specifics of how that's implemented is a little bit more complex, but the high level is like to create this Rehive plugin to get all of the H2 headings and then actually returning that. So whenever you have your MDX, you'll have access to, if you wanted to grab that

00:27:30 data alongside Azure rendering the MDX, you can also have access to the Table of Contents data, and then conditionally create a Table of Contents component, where you're passing in the data that was parked from the Rehite plugin as opposed to having to manually write the Table

00:27:50 of Contents every single time you create an article or having to, what's it called? Or having to, if you're editing something and something changes, like making sure that it's always in sync. So that's definitely something I think I would encourage folks to look into, like how they could create their own plugins

00:28:10 if there's some functionality that they want. And Because, yes, there's a lot of plugins in the ecosystem, but there's also the potential to really customize the experience based on what you need for your site. Opening the file in the code editor, I'm sure that wasn't necessarily an existing

00:28:31 plugin, but it was super relevant to your use case and you were able to create that. So I think everyone who's interested in like using IndieOx should feel empowered to explore like how they could can really like transform and tailor their content experience to what they need. And yeah, I think that

00:28:51 those cover some of the high.

00:28:53 Kent: Yeah, yeah.

00:28:54 Monica: High level parts of India.

00:28:55 Kent: I think that, so the custom plugins are awesome. And I've got some custom plugins that are like 7 lines long, and I've got others that are hundreds of lines long. And so like you can just do a lot of things. And I have 1 that's similar to your table of contents plugin that's kind of interesting. So like you don't have to

00:29:16 modify the output. You can just use it to read the structured data from that input. And it's not just Markdown, but also as you mentioned, the Rehype package allows you to parse HTML and turn that into structured content. And it's really, really cool. If anybody's heard

00:29:36 of the Chats with Kent podcast, that I actually have, and you've been on that podcast actually. I think you were on season 3, so anybody want to go hear more from Monica, you can go listen to that. But in that I have all of the content is hosted on Simplecast, that's the podcast provider.

00:29:56 And it's all written in Markdown over there. And then I, or maybe it's, I think they actually turned it into HTML, but I parse it with Rehype, and then I'm able to read, we have a convention on how we do that so that I can read all of that and then convert it into something that looks more presentable on my own website. So it's pretty powerful what you can do with

00:30:17 these plugins. And yeah, that's super awesome. Thank you for kind of explaining how all of that pieces together. Yeah, this has been a fun chat. Monica, what's the best way for people to keep up with what you're working on and follow you?

00:30:35 Monica: I don't know. I used to have a favorite website. I'm on Twitter at IndigitalColor. And my website is aboutmonica.com. So you can find me there for sure. I don't know about other places,

00:30:56 but I am on the web and I think Blue Sky and Macedon, I have like the same handle. So folks can find me in digital color.

00:31:07 Kent: All right, awesome. Well, Monica, it's been just such a pleasure to chat with you as always. Thank you so much for giving us some of your time today to chat and hopefully people take a look at MDX and build up their own blog or whatever it is that they wanna put together with some dynamic content.

00:31:24 Monica: Yeah.

00:31:25 Kent: All right, see y'all later.