Speaker 1: Hey, Welcome to React Round Up, the podcast where we
Speaker 1: keep you updated on all things React related. This show
Speaker 1: is produced by Top and Doves and Void. Top and
Speaker 1: Dows is very great Top and Devs, get top and
Speaker 1: pay and recognition.
Speaker 2: We're working on interesting.
Speaker 1: Problems and making meaningful community contributions. An Void, which provides
Speaker 1: the most client friendly model for software outsourcing. Clients can
Speaker 1: hire voids designers and engineers and they only pay after
Speaker 1: the tasks are delivered and approved. In today's episode, we
Speaker 1: will talk about an AI powered What you see is
Speaker 1: which you get editor. Basically, like if you're familiar with Notion,
Speaker 1: if you have used Notion at all any time in
Speaker 1: your life, then you know that you have this very
Speaker 1: visual way of editing your content and interacting with it.
Speaker 1: And there is a library that basically allows you to
Speaker 1: have the functionalities that Notion has in their editor. And
Speaker 1: this is what we're going to be talking about in
Speaker 1: this episode. My name is Lucas Paganini, your host in
Speaker 1: a podcast, and joining me in today's episode are the
Speaker 1: also hosts Chris.
Speaker 2: Ruan, Hello everybody, Peter.
Speaker 1: Osa, Hi everyone, and our very special guest Kobe Fayok,
Speaker 1: which is the director of developer experience engineering and claudinary
Speaker 1: and also a content creator.
Speaker 3: Hey everybody, how's it going. I'm excited to be here.
Speaker 1: Thank you for taking the time. Kobe, I'm very excited
Speaker 1: as well. I think this is an interesting topic. And I,
Speaker 1: for one, it's weird right when we are this, when
Speaker 1: we are developers, instead of us thinking like, we have
Speaker 1: this problem, so for this problem, going to use this library.
Speaker 1: Sometimes we get so excited about a library that we think,
Speaker 1: how can I figure out a problem so that I
Speaker 1: can use that library. That's almost like what I'm feeling
Speaker 1: right now. I thought this was a really interesting library,
Speaker 1: so eager to learn more about it?
Speaker 3: Yeah, ready to dig in?
Speaker 2: All right?
Speaker 1: So I tried to give a very quick pitch about
Speaker 1: the library, but you have actually used it, so how
Speaker 1: would you describe it?
Speaker 2: Yeah?
Speaker 3: So it's ultimately a React library, a component library that's
Speaker 3: intended to be able to give you, Like you said,
Speaker 3: the drop in Busywig editor. That's kind of like Notion style,
Speaker 3: where you have your commands, you have where you can
Speaker 3: kind of click onto a word and edit it inline.
Speaker 3: Basically a similar experience that you'd get inside a Notion,
Speaker 3: only you can drop it inside your own application, which
Speaker 3: is pretty compelling because editors can be vastly complicated depending
Speaker 3: on what you're trying to do, and being able to
Speaker 3: give as good of a UX as you can is critical.
Speaker 1: Cool, all right, let's talk a bit about also environments
Speaker 1: in which we can run it. Is this a React
Speaker 1: specific library or is it framework agnostic?
Speaker 2: And we can use it on other frameworks as well?
Speaker 3: Yeah, so unless they've made updates, it is React specific.
Speaker 3: But the particular example that I was playing around with
Speaker 3: was in Astro, which can use React, but it should
Speaker 3: be able to be used in any kind of React environment.
Speaker 3: Astro specifically is just an awesome tool that I've been
Speaker 3: trying to spend more and more time with. And you know,
Speaker 3: one of the things that's nice about it is you
Speaker 3: can use most of the popular framework or UI libraries
Speaker 3: with it, So whether it's React, you spell it, or whatever,
Speaker 3: you can use it. So that gives you an opportunity
Speaker 3: to use a tool like Novel, which is only available
Speaker 3: to React still within the Astro environment.
Speaker 1: Understood, understood, Okay, let's understand a little bit more about
Speaker 1: what can you do and what can't it do? We
Speaker 1: can I think we can assume that most people listening
Speaker 1: to us are at least somewhat familiar with Notion, have
Speaker 1: used it at least once in their lives. So I
Speaker 1: think we can safely assume that from that perspective, comparing
Speaker 1: to the functionalities that the Notion editor exposes, what can
Speaker 1: we expect from this library.
Speaker 3: Sure, and I won't say that I know one to
Speaker 3: one of what the feature lists are. I've used Notion,
Speaker 3: but I'm not a heavy Notion user. But generally speaking,
Speaker 3: you know from the basics, it's being able to use
Speaker 3: the command format in order to create an H one tag.
Speaker 3: So what that would be is by first specifying the
Speaker 3: forward slash key, and then you can continue typing out
Speaker 3: whatever kind of autocomplete feature that you want. So maybe
Speaker 3: I want to add an H one. Maybe in H two,
Speaker 3: I can select that particular format and then I'll continue
Speaker 3: writing it out as such, where alternatively I can write
Speaker 3: that as marked down. So maybe I'll do the one
Speaker 3: hashtag symbol in space and it'll turn it into an
Speaker 3: H one for me. Similarly, there's a lot of other
Speaker 3: features in it. You can add lists, you can add images,
Speaker 3: and all those YouTube embeds. It gives you a bunch
Speaker 3: of those similar commands so that you have a similar
Speaker 3: experience with the a very interactive, UI rich way to
Speaker 3: write your content. But one of the things that is
Speaker 3: really interesting with it, and I think Notion has this
Speaker 3: as well, is it does have the built in AI feature,
Speaker 3: which is kind of what makes a novel itself compelling,
Speaker 3: where it has the ability to reach out to an
Speaker 3: AI service which we can get into to perform things
Speaker 3: like autocomplete or maybe just simply asking questions with AI.
Speaker 1: Okay, talking specifically about the AI functionalities, how does that
Speaker 1: integration work? Because we don't have yet a very easy
Speaker 1: and straightforward, like web standard way of running AI locally.
Speaker 1: I think we're going to get there eventually, but stoodn't.
Speaker 1: So I imagine that you would have to connect your
Speaker 1: keys to open AI or maybe like send a request
Speaker 1: to a back end.
Speaker 2: How how does that work?
Speaker 3: Yeah, so it's it. It works with really any kind
Speaker 3: of AI service that you want. So you would make
Speaker 3: a request to the AI service through like a hook
Speaker 3: kind of capability. So once you try to write in
Speaker 3: whatever the prompt is through the through the slash command
Speaker 3: or through the ask AI, you essentially the route that
Speaker 3: I kind of took in my tutorials, I created an
Speaker 3: endpoint in order to take that API request, where then
Speaker 3: I crafted the prompt to whatever I wanted that to be.
Speaker 3: At that point, you can kind of customize it to
Speaker 3: your liking. I think they have some examples in there
Speaker 3: for just kind of like a standard way too that
Speaker 3: they implemented their autocomplete. But that gives you the opportunity
Speaker 3: to really kind of do whatever you want with the
Speaker 3: AI command and then use whatever service you want. Where
Speaker 3: Opening ai is probably one of the most mainstream services
Speaker 3: to use in that regard, but given it is so
Speaker 3: open and you can create your own endpoint, you can
Speaker 3: probably use whatever service you want with it, or you know,
Speaker 3: your own models if you want.
Speaker 2: Gotcha.
Speaker 1: Okay, assuming that I just want to use one of
Speaker 1: those ready made providers, wouldn't it be a safety concern
Speaker 1: because it'd be exposing the keys in the front end, right,
Speaker 1: So I guess even in that sense, even if I
Speaker 1: were to use open ai, it would probably be safer
Speaker 1: if I were to add a back end endpoint so
Speaker 1: that I don't expose the API key.
Speaker 3: Sure, yeah, definitely, you definitely want to wrap it in
Speaker 3: some kind of API end point, whether that's a servers function,
Speaker 3: or maybe just have a server running that takes in
Speaker 3: those requests. But you absolutely wouldn't want to expose you know,
Speaker 3: API keys are something that you never want to expose.
Speaker 3: But I think, you know, increasingly, with AI becoming what
Speaker 3: it is, it's probably more important than ever because you know,
Speaker 3: they can really rack up those bills high and I'm
Speaker 3: sure finding leaked AI API keys is really in demand
Speaker 3: right now.
Speaker 2: Yeah, good point.
Speaker 1: In the when I briefly introduced the topic of AI,
Speaker 1: I mentioned that we don't yet have a way of
Speaker 1: just running AI models locally, but I'm actually not even
Speaker 1: sure what's the current status of it. Is that really
Speaker 1: still the case or because if I know that Meta
Speaker 1: has released some very small small end quotes right because
Speaker 1: the walls Yama model, I think it's five gigs, so
Speaker 1: you still don't want to download it for every user.
Speaker 1: But I think technically you could put it on a
Speaker 1: web assembly module and unload it lazily and then if
Speaker 1: it's if it's not loaded yet, then you use a
Speaker 1: remote server.
Speaker 2: If it's loaded, then then you use it.
Speaker 1: There There could be ways, but I don't know, like
Speaker 1: are there or do you know or have you used
Speaker 1: any AI models that you can actually run them locally
Speaker 1: and then they performed well.
Speaker 3: So I haven't played around with the rat that you took,
Speaker 3: which sounds really interesting that would be fun to explore.
Speaker 3: But the one I haven't played around with any of
Speaker 3: them locally inside of the browser. But what I have
Speaker 3: seen that I do want to play around with is
Speaker 3: Google is implementing an AI model into the browser, and
Speaker 3: I think it's I'm not mistaken. I think it's behind
Speaker 3: I think it might be behind a feature flag in
Speaker 3: the beta version. I might be wrong with that, don't
Speaker 3: quote me, but something along those lines. But being able
Speaker 3: to actually interact with that model through the Chrome, through
Speaker 3: your Chrome browser is you know, pretty compelling. And being
Speaker 3: able to have those capabilities that you can integrate into
Speaker 3: web apps is pretty awesome. So it's exciting times to
Speaker 3: see what kind of things that will be integrated like
Speaker 3: that without having to make all those server requests.
Speaker 2: Pretty goo.
Speaker 1: Yeah, Chris Peter, any questions, Yeah, I do have one.
Speaker 4: I think mine is for the editor, so I wanted
Speaker 4: to talk see if the editor supports like fontmata data
Speaker 4: or maybe for example, there may be some main points
Speaker 4: that require you to send the DITA to maybe font
Speaker 4: Mata or probably would Jason if you will. So, I
Speaker 4: don't know if it's if it supports that the editor.
Speaker 2: Yeah, so I don't.
Speaker 3: I don't know about front matters specifically, but I know
Speaker 3: that you can get the content, you can save the
Speaker 3: content in different formats. I can't remember if Markdown is
Speaker 3: one specifically. There might be like a plugin or something
Speaker 3: for that, but I know Jason is one of the
Speaker 3: standard formats that they provide. When when I was doing it,
Speaker 3: I was doing it in HTML to save the HTML
Speaker 3: into a database, since in my mind that was a
Speaker 3: very flexible format to save that kind of content. And
Speaker 3: but you know, depending on your setup, like if you're
Speaker 3: set up to use markdown or whatever, you know, anything
Speaker 3: should probably work in that regard. But it is pretty
Speaker 3: flexible for the different types of way. And I think
Speaker 3: there's plug ins or extensions that you can find to
Speaker 3: kind of manipulate the data as you want, so that
Speaker 3: you kind of have the f ability to work with
Speaker 3: the data as you need.
Speaker 4: Yeah, that's cool.
Speaker 2: Yeah, I think that's the question I have.
Speaker 4: Yeah, I think, okay, maybe I should be maybe going
Speaker 4: in a way explaining how like I know that helped me.
Speaker 4: Want to know how the Yeah, obviously, I know you
Speaker 4: used AI for audio to complete, but then maybe a
Speaker 4: bit of more details to how you achieved that, don't.
Speaker 2: Yeah.
Speaker 3: Sure. So the way that the component library or the
Speaker 3: library exposed it is it allowed me to create an endpoint.
Speaker 3: And I can't remember if it was a set end
Speaker 3: point you were that I had to create or if
Speaker 3: I could configure that. I'm blanking on that right now,
Speaker 3: but regardless, I created a several assumption, which was in
Speaker 3: modern web frameworks is relatively straightforward. You're able to create
Speaker 3: the API route, take the take the incoming parameters, which
Speaker 3: is going to be the dynamic data passed in through
Speaker 3: the through the client, through the reacts client, and then
Speaker 3: essentially take that and then you can feed it to
Speaker 3: whatever service you want. So in my case, I used
Speaker 3: open Ai. I used the open Ai SDK. I was
Speaker 3: able to feed the prompt that I crafted along with
Speaker 3: the input from the editor and ultimately get that response
Speaker 3: and pass it back I believe, through a stream so
Speaker 3: that you get that you know, typing effect or whatever
Speaker 3: you want to call it, inside of the client.
Speaker 4: Yeah, yeah, that's what.
Speaker 2: I think.
Speaker 4: That's that's for my question.
Speaker 3: Yeah, it's cool, Chris.
Speaker 5: Contribution, Yeah, just just one and Kolbe, I think you
Speaker 5: mentioned it very brief briefly, the concept of plug ins
Speaker 5: is do you know if that is like, what's their philosophy.
Speaker 5: Do they prefer like poll requests for new features or
Speaker 5: is there like a clear interface for plugins or how
Speaker 5: does how does that work?
Speaker 3: So that's a good question, and I don't know if
Speaker 3: I have a great answer there. I know that you
Speaker 3: can add your own custom commands. That's not necessarily answering
Speaker 3: the question, but it does give the interface, and I
Speaker 3: believe it's through custom components where you create a custom
Speaker 3: commands component and then kind of set it up to
Speaker 3: your configuration for what you want to do. As far
Speaker 3: as plugins, I believe since it's on the tip Tap editor,
Speaker 3: tiptap has its own kind of ecosystem. I'm not sure
Speaker 3: if Novel itself has much of its own plug and ecosystem,
Speaker 3: but that would be something that'd be interesting to look into,
Speaker 3: you know, because there's a lot of potential there. But
Speaker 3: you know, it makes you wonder what it makes sense
Speaker 3: for them to provide their own plug in ecosystem or
Speaker 3: kind of just piggyback off of the tip Tap editor.
Speaker 3: So I'm not quite sure about that. But as far
Speaker 3: as I'm aware, I believe that they take contributions. You know,
Speaker 3: I would hope they take contributions. I haven't tried to
Speaker 3: contribute myself, I know. So the original author was Stephen Tay,
Speaker 3: but they he's passed the torch onto somebody else to
Speaker 3: maintain the library. So I'm not quite sure where that
Speaker 3: where it is in that state.
Speaker 2: Cool, Yeah, very interesting.
Speaker 5: I wonder I almost wonder, like when I saw the demo,
Speaker 5: I wonder if Notion is using do you know, are
Speaker 5: they using tip tap in the back? It looks so
Speaker 5: it feels like exactly the same, right.
Speaker 3: Right, right, Yeah, I have no idea. If I would
Speaker 3: have to guess, I would have to guess that they
Speaker 3: wrote their editor from more or less scratch. But you know,
Speaker 3: that's a good question because tiptap is pretty you know, comprehensive,
Speaker 3: and you know, it's a it's a lot of work.
Speaker 3: But I'm just thinking from the perspective like of like
Speaker 3: a big company, like more often than not, they have
Speaker 3: very specific needs. I'm curious of if they they had
Speaker 3: to go through that pain point of figuring out you know,
Speaker 3: hitting the wall or hitting the ceiling and then rewriting
Speaker 3: it them from scratch or something.
Speaker 1: Pretty cool, pretty cool, all right, Which appligations do you
Speaker 1: see for it?
Speaker 5: Then?
Speaker 2: Might not be.
Speaker 1: Super obvious, like, of course, if you want to create
Speaker 1: a notion or turnative.
Speaker 2: Yeah, But in.
Speaker 1: Which other case do you think people websites applications could
Speaker 1: be using something like that and they're not yet?
Speaker 4: Yeah?
Speaker 3: So, I mean I can't think of a lot of
Speaker 3: great ideas of something that would be unusual to use
Speaker 3: it for per se. But you know, maybe people are
Speaker 3: creating their own editor for a blog post or notes
Speaker 3: or you know, something like that. Maybe comments for a website,
Speaker 3: you know, blog posts, comments or something like that. But really,
Speaker 3: any kind of instance where somebody wants to add a
Speaker 3: rich text editor, maybe it's a social media app. Well,
Speaker 3: maybe a social media app is probably too maybe not
Speaker 3: the right face because social media posts are generally limited
Speaker 3: in the kind of richness that you can provide, right.
Speaker 3: But you know, really anywhere that you can use an editor,
Speaker 3: it's a great use case because of the customers is
Speaker 3: customization that you can provide on top of it. So
Speaker 3: being able to craft it and add the customs commands
Speaker 3: to whatever your use cases are. Yeah, there's a lot
Speaker 3: of potential opportunity there.
Speaker 1: So basically, like any markdown editor could be technically a
Speaker 1: really good place in which you would consider replacing for it.
Speaker 3: For sure, because especially because you can write and markdown.
Speaker 3: So if you prefer to write and markdown, you have
Speaker 3: it there. But then you still get those the additional
Speaker 3: extensions in order to kind of provide different experiences where
Speaker 3: if you have different users who want to write in
Speaker 3: different ways, you have the ability to provide that with
Speaker 3: the best of both worlds.
Speaker 1: Okay, I'd like to bring the conversation a bit towards
Speaker 1: the UAX of it and a little less about the
Speaker 1: the technical details of the library itself, because I think
Speaker 1: that we are as an industry starting to move gravitate
Speaker 1: more towards the editing experience and the view experience being
Speaker 1: the same. We even got used to edit in place functional,
Speaker 1: which is basically like the text is there, it's technically
Speaker 1: not editable, but then if you double click on it,
Speaker 1: then it becomes an input that you can add it,
Speaker 1: and you just add it in place. So there are
Speaker 1: a lot of uaxes that are getting more used, two
Speaker 1: more familiar to people worldwide, whereas a few years back
Speaker 1: you had a clear distinction between the time in which
Speaker 1: are visualizing and the time in which you're editing something,
Speaker 1: and there were clearly different pages for each aspect. So
Speaker 1: right now you're editing, right now you're visualizing.
Speaker 2: What do you think.
Speaker 1: About that UAX in general? When do you think that
Speaker 1: this makes sense? Do you think this is what we
Speaker 1: should aim for all cases or no, there are two
Speaker 1: cases where having a specific edit mode makes sense.
Speaker 3: Yeah, I think that's a really interesting question, and I
Speaker 3: think it is really contextual to the particular use case,
Speaker 3: you know, thinking of like a Google docs for instance,
Speaker 3: that is always editable. I think you know, perceptually, a
Speaker 3: Google document is a working document, right, so you go
Speaker 3: in there in order to write, so of course you
Speaker 3: can see it, but you can the whole point is
Speaker 3: to interact with it and work through it. So having
Speaker 3: that kind of click into interactivity is just kind of
Speaker 3: native feeling. I guess if you consider that as that distinction,
Speaker 3: I do think that some applications that I've seen have
Speaker 3: gone kind of too far on that, And I can't
Speaker 3: think of anything off the top of my head but
Speaker 3: you know, information that's intended to be presentational that it's
Speaker 3: sometimes hard to determine when it is in edit versus
Speaker 3: presentational mode. You know, that can create issues in itself
Speaker 3: where you might accidentally do something and not realizing that
Speaker 3: you just saved a huge you know, edit to something
Speaker 3: that's important. So I think having that barrier is definitely
Speaker 3: important in some context. But I think really having that
Speaker 3: initial perception of whether this is a working kind of
Speaker 3: like quote a quote working document, you know, as opposed
Speaker 3: to something that is presentational, make sure that you do
Speaker 3: have those the visual indicators that you are in edit
Speaker 3: mode versus presentation mode. As far as like the edit
Speaker 3: the edit in place, I think I usually prefer that
Speaker 3: more for forms as opposed to like a huge document.
Speaker 3: You know, I could see its benefits, but you know,
Speaker 3: I think intuitively, I think it works a little bit
Speaker 3: better for forms than it does for a big document.
Speaker 3: But that's just my two cents.
Speaker 2: Makes sense, Chris Bitter, Any thoughts on this, Yeah.
Speaker 5: I'm definitely in the same camp. There's actually a very old,
Speaker 5: i'll say legacy application we use for work where you
Speaker 5: don't want to edit, but just one false double click
Speaker 5: or extra click and it jumps you know. Yeah, so yeah,
Speaker 5: definitely there, it's it's yeah, it's like you said, basically,
Speaker 5: it all comes down to context, and I mean that's
Speaker 5: our job rights as front end engineers, to make it
Speaker 5: clear or easy to get that feeling when you're when
Speaker 5: you're in edit mode and whennot.
Speaker 3: For sure and too easy that you don't notice it's exactly.
Speaker 1: Yeah, no, that makes sense. That makes sense, all right, cool,
Speaker 1: So basically we already stipulated when you can consider this library,
Speaker 1: what this library is capable of doing, the environment in
Speaker 1: which it runs. What are you missing, Kobe, because I'm
Speaker 1: pretty sure there are other interesting things about this library
Speaker 1: that maybe we haven't asked.
Speaker 3: I think part of the beauty of it is within
Speaker 3: its simplicity, Like it's there's a lot of things that
Speaker 3: you can do with it out of the box, and
Speaker 3: of course there's a lot of customizations, but at its core,
Speaker 3: like I think what it comes with and its ability
Speaker 3: to relatively simply interact with an AI tool like an
Speaker 3: endpoint like we were talking about, I think the simplicity
Speaker 3: is kind of what makes it shine. So I think,
Speaker 3: you know, that's kind of the hero of the story
Speaker 3: in my opinion.
Speaker 2: Pretty cool, Pretty cool.
Speaker 1: How is the integration of this library with other form
Speaker 1: controllers and react, because at the end of the day,
Speaker 1: this is an input, right, It's just receiving and outputting
Speaker 1: a markdown string.
Speaker 2: So it looks supervency.
Speaker 1: It looks like there are a lot of things in it,
Speaker 1: but it's actually just strength. And I even wonder like
Speaker 1: if it exposes utilities for you to extract assets from it,
Speaker 1: because you can, for example, import videos or images in
Speaker 1: the middle of it. And maybe because if you just
Speaker 1: export the mark now it's only going to be a
Speaker 1: link to the image, right, but maybe you want to
Speaker 1: somehow parse the string so that it generates an array
Speaker 1: of the images, an array of the code blocks, whatever,
Speaker 1: Like maybe you want to extract the intelligence tokenized version
Speaker 1: of the content in order to present it somewhere else.
Speaker 1: How easy is it to do this it a library,
Speaker 1: and does the.
Speaker 2: Library exposes utilities for it or would.
Speaker 1: We just rely on other libraries that interact with markdown.
Speaker 3: Yeah, it's interesting. I haven't actually tried out images with
Speaker 3: it yet, and that's a good question of how it
Speaker 3: would handle that, because I could see kind of two
Speaker 3: routes with that one being that it provides a direct
Speaker 3: hook to upload in line, so maybe you add the
Speaker 3: image and then it uploads it in place, as opposed
Speaker 3: to maybe it shows like the you know, the data,
Speaker 3: just the raw image in memory until maybe you extract
Speaker 3: the markdown or Jason version of it and then upload
Speaker 3: it prior to submitting it to a form or something
Speaker 3: like that. So that's a good question. I'm not sure
Speaker 3: how it handles images directly, but it does provide the
Speaker 3: utilities to extract the content in whatever form you want,
Speaker 3: so I know, at least HTML and Jason, and then
Speaker 3: you can basically input that back. So the example that
Speaker 3: I was using when I was working on it is
Speaker 3: I would is storing the HTML inside of a database
Speaker 3: and then I would retrieve that content from the database
Speaker 3: and then inject it into the editor instance to provide
Speaker 3: you know, the existing content inside of there. But there
Speaker 3: is an interesting question that you were going on there
Speaker 3: about kind of how it sits along with other inputs,
Speaker 3: and I don't know if it actually is a typical
Speaker 3: HTML input. I don't think you can grab the content
Speaker 3: the same way that you would from a standard input
Speaker 3: because you kind of have to save it into state
Speaker 3: in order to grab that content, where then if you're
Speaker 3: going to submit a form, you grab that content from
Speaker 3: the state along with the other inputs. But then you
Speaker 3: also have to consider the UX of the inputs along
Speaker 3: with that one. So you know, natively the inputs aren't
Speaker 3: going to look like the novel editor, right, So do
Speaker 3: you want to make your inputs look like the novel
Speaker 3: editor or do you want your editor to look like
Speaker 3: your standard inputs? So really trying to piece those together
Speaker 3: to make sure that it looks cohesive is also important.
Speaker 2: Okay, that's cool in a way.
Speaker 1: I think maybe we can even start wrapping up because
Speaker 1: the library itself, as you said, is pretty straightforward.
Speaker 2: Which is good. I like it when it's that way.
Speaker 1: It's sometimes you think, oh cool, there's a lot of
Speaker 1: content to make about X, Y and Z, but maybe
Speaker 1: just because X, Y and Z is too complicated, and
Speaker 1: in this case, it's pretty straightforward, which is very good.
Speaker 3: Yeah, And I think like out of the box, it
Speaker 3: comes with so many features that probably for most people's
Speaker 3: use cases like that, they will be sufficient. But it
Speaker 3: does come with the ability to create custom commands and
Speaker 3: customizations in order to kind of get to the use
Speaker 3: case that you need but it is very rich out
Speaker 3: of the box, which is awesome.
Speaker 1: I think I only have one last question, which is
Speaker 1: how much can I customize the visuals because I can
Speaker 1: see from the dots that they appear to be very
Speaker 1: open for you to.
Speaker 2: Change how it's presented. But at the same time, it's.
Speaker 1: Such a visual library that I would imagine that there
Speaker 1: might be things that are not customizable.
Speaker 3: Yeah, and that's a good question. I remember trying to
Speaker 3: mess with the styles myself, and it can become complicated
Speaker 3: because if you think about all the different pieces that
Speaker 3: need to be in place in order to support something
Speaker 3: like that. So it's not only just you know, does
Speaker 3: the text input have a shadow or a border or something.
Speaker 3: You have to consider all the like the command options.
Speaker 3: You have to consider how it's indented into the into
Speaker 3: the side of it. It's not just simple padding or
Speaker 3: something like that. It's the UI that actually creates that interfaate,
Speaker 3: the UI that creates the interface. You know that kind
Speaker 3: of just saying the same thing. The code that creates
Speaker 3: that UI is complex, so you know, be able to
Speaker 3: make sure that you're targeting the right styles and you're
Speaker 3: doing it in a way that's not going to flicks
Speaker 3: with some kind of state that you might not have
Speaker 3: thought about. It can be challenging, but you know, it
Speaker 3: is important to be able to provide the ability to
Speaker 3: customize it to whatever your application looking field is because
Speaker 3: it kind of just dropping in a completely different style
Speaker 3: doesn't always work, especially if you're I guess you know,
Speaker 3: if you're doing a flat design and this one is
Speaker 3: very well, I guess it's not super it has like
Speaker 3: the drop shots and stuff, but the design is that
Speaker 3: it can be very different from some other use cases.
Speaker 1: Yeah, that's very good. I think that's that's a good
Speaker 1: enough mirdle ground.
Speaker 2: All right.
Speaker 1: It's like they are already giving so much for free.
Speaker 1: You can always just go straight to do the source
Speaker 1: code if you really want to customize it to a
Speaker 1: whole new level for sure. All right, cool, that's very
Speaker 1: cool man. I think that at least for me, I'm
Speaker 1: good with starting to wrap up. Chris Peter, do you
Speaker 1: guys have any other questions? And Nope, I don't. I
Speaker 1: think this is I think all was unsettle. All right, Okay,
Speaker 1: pretty cool, So let's just do a quick round of
Speaker 1: promos before we close things up. So to me, I'm
Speaker 1: just going to promote the two companies that produce the
Speaker 1: show that are allowing us to be here. So Top
Speaker 1: and Doves produces a lot of other podcasts. This podcast
Speaker 1: belongs to Top and Dows actually, so there are other
Speaker 1: shows as well. There's a show about angular development, which
Speaker 1: I'm actually the host as well, so you might be
Speaker 1: interested in that. There are shows about develops, freelancing.
Speaker 2: There's a lot of stuff.
Speaker 1: So if you're a developer that wants to learn other
Speaker 1: topics besides react, definitely check out Top and Dows and
Speaker 1: the other podcasts that they have. And again, if you
Speaker 1: are at the company in which they're looking to augment
Speaker 1: their staff, or you are at the company where they
Speaker 1: want to outsource some project, I would definitely recommend checking
Speaker 1: out Onvoid is n void dot com. The client the
Speaker 1: business model is very client friendly and very different than
Speaker 1: what other agencies typically offer for their clients. So recommend
Speaker 1: checking out those things. So those are going to be
Speaker 1: my promotions for today, Chris.
Speaker 2: How about you?
Speaker 5: Yeah, I have another related I've gone far deep in
Speaker 5: the rabbit hole of this idea of declarative video. So
Speaker 5: you write some code or at least repeatable steps, and
Speaker 5: you get a video out. So there's another one, Code
Speaker 5: Dot movie. I think this one is much more focused
Speaker 5: on If you've ever seen those neat presentations where you
Speaker 5: have some nice lines of code slide in and animate,
Speaker 5: that's this Code Dot movie is a bit more for that.
Speaker 5: But still working on it. And I was actually talking
Speaker 5: to one of the guests we had, Dimitri Kovalenko a
Speaker 5: few days ago. I'm working with him a little bit
Speaker 5: on his f F frames, which is a similar Rust
Speaker 5: based framework. But maybe I'll drop that to the link
Speaker 5: to his project. So still exploring the space.
Speaker 1: That is so cool, dude, like thecode Dot movie that
Speaker 1: oh Man. When I used to do YouTube videos, it
Speaker 1: would take me on eternity because I literally had a
Speaker 1: full time videographer editing the animations on after effects, and
Speaker 1: it's like every single line of code would be an
Speaker 1: individual token and it was such a pain in the ass. Honestly,
Speaker 1: it was the thing that he was all. He was
Speaker 1: always like, look as let's record more videos, let's do
Speaker 1: anything else, Like, dude, I can't take any made another
Speaker 1: line of code. It was the most tedious part of
Speaker 1: the work, and this just turns it into something automatic.
Speaker 1: I always wanted to have something like this. That's pretty cool, man.
Speaker 1: And how does it like, can I directly export this
Speaker 1: as an a v I, which would be like a
Speaker 1: video format that already has opacity, so I don't have
Speaker 1: to necessarily use the the card in the background, or
Speaker 1: does it only expose it as as code itself as
Speaker 1: front end code?
Speaker 5: I'm not sure. I think I almost cringe a bit
Speaker 5: to say, I think you get a gift. But then
Speaker 5: I mean, if they're making gifts, there must be some
Speaker 5: intermediate you can for sure do there's some sort of
Speaker 5: Jason import export as always. But but yeah, that's that's
Speaker 5: why I went down. I'm looking at this whole space
Speaker 5: because it's the same for me. Like whenever you record
Speaker 5: anything with talking and coding, there's always so much time
Speaker 5: to edit those videos. It's it's crazy. So anyway that
Speaker 5: you can do that in a repeatable fashion saves a
Speaker 5: lot of time.
Speaker 2: So yeah, how about you beater?
Speaker 4: Yeah so just pissed on micro or project on web components.
Speaker 4: Yeah so I just TV just those a little project
Speaker 4: with components.
Speaker 1: Yeah, okay, cool, I'll be sending all those lengths here
Speaker 1: on the comment section. And Kobe, the star of today's episode,
Speaker 1: how about you.
Speaker 3: Yeah, I actually have an upcoming course as well. It's
Speaker 3: a full stack next JS fifteen course, going through authentication
Speaker 3: with Clerk, database management with Zada and drizzlow r M,
Speaker 3: adding some payment options with Stripe, and you know, just
Speaker 3: learning all the new APIs with React nineteen. So if
Speaker 3: you check it out Space, jelly Dot, dev Slash, Next
Speaker 3: next JS, post the link in the chat as well,
Speaker 3: you can get updates and exclusive access when I'm ready
Speaker 3: to launch it.
Speaker 2: Pretty sweet.
Speaker 1: I sent it on the comment section, So if you're
Speaker 1: listening to us on YouTube LinkedIn it's the other platform
Speaker 1: that used to be for gamers that do live stream
Speaker 1: and I always forget the name Twitch exactly Twitch, then
Speaker 1: you're gonna have a comment section there and you can
Speaker 1: see the lengths of everything that we mentioned. All right, man,
Speaker 1: pretty cool. Kobe again, thank you so much for being
Speaker 1: on the show.
Speaker 2: Yeah, it was. It was really cool.
Speaker 1: Feel free to reach out to me and we can
Speaker 1: we can do another round anytime.
Speaker 2: Thank you. Sounds great, right and for you that's stick
Speaker 2: up until the end.
Speaker 1: Thank you for your time and I will see you
Speaker 1: in the next one.