Anthony: At first, I just like trying to experiment if it is this idea would work. And then it comes out, like it could be really great and I can use it to mimic the styles and the utilities from tailwind or WindiCSS so so that kind of make it, I say engine.
Andrew: Hello, welcome to the dev tools, FM podcast. This is a podcast about developer tools and the people who make them I'm Andrew. And this is my co-host Justin.
[00:00:36] Who is Anthony Fu?
Justin: Hey everyone, Our guest today is the highly prolific Anthony Fu Anthony. It's so great to have you on with us. You've worked on a lot of projects, like, WindiCSS CSS, Vite, Nuxt and you have a lot of tools out there!
Vitest, UnoCSS, and sli.dev are your most recent ones, all really. Really great projects. So would you like to take a little bit of time and tell our audience a little bit more about yourself and maybe how you got into writing tools?
Anthony: My name is Anthony Fu And I'm the core member of Vue and Vite. As they already said, as I created several projects on open source and yeah, I'm kind of currently working on Nuxt lab to work on Nuxt to the Vite integrations and ecosystem.
I would call myself like a bit like phrenetic open sourceror. So like I'm kinda really like into creating, I dunno, like crazy new project and then like trying new ideas and then to make the ideas come true. I kind of trying to, like, I I have some time to like dream about ideas and that some of them might be realized into the real projects And then some of them like are just implement a proof of concept. And then it doesn't like work as, as what I expect or like, it's not like interesting as, as I used to that. It, so like, those projects just get abandoned but like I'm pretty fine with it. yeah, I guess that's kind, kind of about me too. Like, and how I created things. Okay.
Andrew: It's kind of staggering looking at your project page on your website. It's just like it goes on and on and on. I was like listing them in our doc for the episode.
And like, I, I don't think I can list anymore. Like, there's, there's at least a hundred projects on here. Are all these projects maintained or is this just like every project that you put out.
Anthony: Yeah. I think the, most of the projects that I list on my site are maintained, like as long as there are issues or like pull requests, I will handle them. And like when, when, when you got to merge and I, will release it.. So, and some of them are just like if they don't get too much involved with found communities that's and I, I don't, I don't use it that as well. They may be like, stay as is, but you can say that they are still maintianed.
Justin: Nice. Nice. What, what got you into? open-source? Like, what was your first sort of introduction open source?
Anthony: Yeah. Like, I think it is from my high school. There's a website in China called which is a bit like, like Quora. And so like there, there, you can, you can ask questions and answer questions. So there are some like when, when I was in high school, there's like really successful guys, like talking about that. Oh, okay. You can, you can put you can make open source project GitHub and then let the GitHub can be the profile of your resume. They can come about your, your ability of doing something or like at a certain extent. So I just have this ideas in mind. So I was trying to like, create, like, I don't know, like trying to make projects that being popular and trying to figure out like what, what's, what's, the pro what's the project that's people needed and then what would I can do, but, but, but in that ways that that doesn't work.
So like, I kind of spent like four years in my college to like, figure out what's the project that, that will be successful. Then I failed it but added at the, the the, the summer vacation after my graduate. So I can't start the project called int island, which it wishes an VSCode extensions for, iOT for internet internationalizations and that's the parking that's. I need to build an, I need it. That's the project that, from what I need accurate. So that, that project like, I think at the beginning that got 300 stars and I'm really happy with it. So I kind of start to evolve with more tying it and then like to share it on, on discord and on Reddit and the people kind of react to it. And then I, it, it, it was initially like beautiful Vue. I attained like, specifically for Vues things like I'm, I'm, I'm building an app or using Vue. So then like people asking that if there is a react version of it, or like where I, the support react. So at that time, I kind of starting to like, getting more involved with like the open-source community and. I kind of refract refactor is too to be like framework agnostic.
So like for now, like it kind of support 20 over twenties frameworks that you can install it and use it on a box. So I think that's the first project that I guess success on open-source I think like the outer, the other, like before that, I kind of. A few project that I create, but The problem that we I had is that I didn't think about how my projects should be face to the community that I, I didn't document it well and and to say that, how you can contribute to this project and how this project would have benefit to the communities. That's the thing that I didn't think about. That's a that's an about for now. Like I think that's kind of being a very important part to for an open source project grow.
Andrew: Yeah, fostering that community is super important. Would you say that those earlier projects before this internationalization exempts extension took off, you were trying to kind of like write a hype wave and like try to like feel out what, what might be the thing that pops off. But the first thing that actually popped off for you was something that solved an immediate need.
Anthony: Yeah.
Justin: So you'd mentioned that you are working at Nuxt labs now. What are you working on there specifically?
Anthony: I think the initial. the the job is kind of already flexible. So like the initial thing is desk to help with the Vite integrations, with Nuxt, things that I can do not story is it's using Vite by default where like you can swap to web pack if you want. and then like, I think the scope becomes a bit bigger. So like, since like Nuxt through itself is open source and the ecosystem is open source. So like I kind of still working on open source. And also some of my projects will benefit to the Nuxt ecosystem, for example, like Vue use, which is a Vue utilities that's like, basically like, if you are going to do a Vue app Vue to of your story, like if you use competition API, that's you likely to use it.
So maintaining Vue use and also like other, ecosystem libraries becomes like also part of my job, which which I, which I think is pretty, pretty good. And kind of being very lucky to do it. And yeah. And it also, like I kind of serve other than my projects. I kind of sort of the bridge between the, the, Vite and also the Vue team. So for example, like if there are some features or like there are some blockers in Nuxt so I can forward this message to the Vite team. So like we can discuss about it and then maybe it's shipped the fix for it. And then like, so it will fix for Nuxt, something like that.
Justin: Nice. Nice.
Andrew: So you, it seems like you do a lot of Vue JS centered work. Your first successful open source library was Vue centered. What about the Vue ecosystem draws you to it so much? What, what, what made it your, your go-to framework?
Anthony: I think it's definitely the composition API, but like before that, when I learned Vue is about that Vue to a Vue 1.02 Vue to my own section. So like, I think it, the, main thing that I can choose Vue is that originally, like it's the easiest to learn. And then it goes with the composition APIs and I kind of really like it and the things like I'm also getting more experienced with the JavaScript code and yeah, It's still like, like fit my taste.
Andrew: Vue definitely seems like in browser sense, closer to the metal, like you are definitely like writing more JavaScript upfront. That's just like plain old JavaScript. Like lately I've been writing lots of react code with lots of hooks and lots of dependencies in it's such a mental model to get over and something that's simpler. I could see how that would be a lot more attractive.
Justin: I had the same sort of journey. So I started with angular back when that was basically the thing that people used. And wasn't a huge fan of Angular and then I got into Vue during the w V1 V2 transition.
And the biggest thing that I liked was like, when single-file components come out is like, it felt like, you know, I was just writing HTML, CSS and Java script just in like a singular file. And I still liked that model. I really love that model today. And, you know, react and other frameworks have like their own ways of sort of like making that sort of work. But I learned a lot from Evan's work. Like I dug through Vue loader back in the day and like learned, I mean, that's basically how I learned, like how Webpack plugins really work.
And, I don't know. It is a, it's a pretty cool ecosystem. And plus one thing that I'll give credit to Evan and I, and all the community members is like the docs in the Vue ecosystem at large are just so good. They're so good. For like everything. So, yeah.
[00:10:45] Prolific Maintainer
Andrew: So we talked about it a little bit already but I, you have a. Sindre Sorhus level of packages. Like you have countless packages and with a bunch of packages comes a whole lot of. I'm I manage a tool I've been pretty bad at looking at issues and pull requests, but it's, it's a lot of work and it can feel pretty daunting. have you found that managing these PRS and issues has become a burden since like you have so many different libraries and has like a community popped up around you to uh to help you out with all of this? Or is it just a one man show?
Anthony: There, the several communities around my my projects or like around that certain projects. And then people are like really helping out. And for example, like Vitest, like we just created and now, like we have like 16 members and over 70 contributors to the project. And like, people are kind of really involved and helping out, helping out at each other's. So like, for me, like, Yeah. I, I kind of still aware that's when I kind of create a new project, that's my issues. Or like it's kind of growing. So like for now I'm kind of free to like, create a new new projects, but like when it's necessary, you have to do it. That's like, I think in my method to like manage this is the, like, to try to like get involved every day. I will try to handle the new issues, like all the new notifications coming from my GitHub, and then I will try and put them up everyday. So like, I don't, I don't accommodate too much for the rest.
So like I don't, I don't get around. And also, like, I kind of think one of the benefit of like having many projects. You can get, you can jump around with it. So like, if you've got a bored with one single product that you can jump to another and to like, change to refresh your mind and then like, you can, you can go back. I can kind of continuous working on them to, sort of like the efficient, I guess.
Andrew: How long have you been doing open source? Has it been like lots of years or just a few years at this point?
Anthony: I think like from the, the, VSCode extension, we just mentioned about this it's about like three years as like it's getting like really serious, I think is, is it's, like almost two years. I was, I was still graduate students one year ago. And then I, after I graduated, I think that's okay.
Like, I, I have, I have a few projects and I have a few sponsors and then i, I, kinda really like what I'm doing. So I kind of think of that like maybe, maybe I can just go for it. So like I took like a few months off full-time time open source to do, to do 4,000 stars so I can
see, okay. I maybe, maybe I get a bit less, that's like this I can still make a living. So that's like, I can do what I kind of already enjoying it. So I didn't looking for a job, but. I kind to take my full time to, to, working open source and then like the Nuxt come pop to me and what they are doing and what they can kind of it in match with what I, what I enjoy so like, I joined them to like people working on open-source.
Andrew: So if they hadn't come along, you would still be doing the full-time open-source.
Anthony: Yeah, because I think that that is really depends. Things like the GitHub sponsorship is very good. but like, it's still really hard to like, make a good amount, like compared to like a full-time job from from a company.. So, like, I still need to take maybe Contra to. to make, to make them like a bit more income. At least I've kind of re really being lucky to, to get this job, to to work on fully open-source.
Andrew: Having a job that supports you and open-source is a lot more relaxing because when you're trying to do it on your own, you both have to advertise your own code and you have to advertise you. You have to be like, Hey, I'm here, please, please give me some money or else I'm not going to be here anymore. So joining a company that will support that is very nice.
Justin: Yeah. Going so low. It's a lot more than just the code at that point. You gotta, you gotta deal lot of stuff. Also, it's just kind of stressful, you know, it's like, you just got to bring in enough money to survive and, you know, you know, whatever your standards of living are trying to, to meet that. And when it's, you know, up and down, I have a ton of respect for people that either do open-source full time, or like even people who are. Contractors or whatever, or do freelance there's, stuff like that. It just seems like it'd be incredibly stressful. You know, not necessarily knowing where your next paycheck is coming from or like when the next matching money is coming in. I'm just like, woof. You know, that's, that's a, it's a scary spot to be.
Anthony: Yeah, I think that that's one of the greatest on me is that I think the more and more companies are trying to like hiring developers to walking out for open source for example, Vercel is doing. Yeah. And also I know a few other companies are trying to, to, make these things happen.
So like, I think the, the pay for open-source developer is like like more it's it's going, it's getting better and better.
Justin: Yeah. I definitely think the industry is learning that if you pay people to do what they actually really like doing, it turns out it works well for everybody. So generally, how do you feel about the state of open source funding?
Anthony: I think that, that really depends. I think that one developer wants to like making may make a living from the open source it's already, it depends on. I say, I think you can now like solely rely on the code itself.
You have to marketing it yourself. And also trying to find some way to, like, I dunno, like, asking people to donate your money or like trying to find a business model to to some income from your open source project. So Yeah, yeah, that that job really depends, but like, I'm just like happy to see that companies trying to getting into it and then hiring that ex that's supporting open-source developers do their own job.
Andrew: yeah. It's exciting to see all these new companies pop up where like, they're mainly just open source companies, but then they, they sell a little bit secret sauce to, to make the engine keep going. Like with remix. They initially were going to sell licenses for their code, but they realized, oh, the source community could really, really help us with this.
And we could sell targeted things that actually bring value to people.
[00:17:36] WindiCSS to UnoCSSd
Andrew: So let's, let's talk about some projects specifically now one project that popped up on, or I guess a set of projects that popped up on my Twitter timeline a lot was UNO, CSS, and Windi CSS. As I understand it, UnoCSS generates atomic tailwind style CSS. But it seems a lot lower level than a tailwind.
Can you explain to our audience what Windi CSS is and why you built it?
Anthony: Okay.
So yeah, the, the, the history is like a big long that's like, yeah, like I think it's a should Come back to the tailwind I think 2.0, where that's I like it a lot about the way that you can, you can style your components and your app. when it comes to Vite like, since like vite is like really fast things, like everything is on demand. So like, if you if you use only one, one component only to only this component or only this page would be compiled. So at that time I tried to use tailwind on Vite but like tailwind's like, at the, the 2.0 stage, it generates all the possible combinations of the style, which it was just like a few megabytes of the CSS into your, into a browsers.
And that makes Vite really slow. At compared to the outer parts is very fast. At that time I'm trying to, yeah. I was thinking that's okay. That, That, and that, maybe that's the trade-off that's you want to use atomic CSS So then I kind of find out the project called WindiCSS and I think, I think, at that time it is only have a few several stars And then I think, okay. It's kind of alright to write the tailwind engines to do on demand. And I think, okay, It really matches with Vite So like I, create a Vite plugin for it and then I use it so I can send a a, tweet about it. So like, it can, it can be like, becomes like a 10 to 100 Time's faster than tailwind 2.0 And then tailwind also like this idea and then made a JIT engine using the same technologies. So I think basically like you can, you can, think the, the Windi is as a custom compiler for tailwind That's used on-demand and then like, make this, make this happens and then push the tailwind to, to ship their JIT engine.
And then like, I think, I think that's pretty much it. So at that time, it's like, you, you can, you can really feel that you can either use a windy, says or like tailwind's JIT on Vite which both are really fast compound to the other one. And then like, and then it's, it's been a while. And then like, that's a fun time to time. I kind of find my issue is is that I'm not very clear. That's how I can customize those utilities. For example, like there there is that there are some, several utilities from tailwind that you can apply, maybe a text color it to, to your elements, and then you can use things or like use color to override those colors as you want, but it's not very clear. That's how you can maybe add a more complex that style to it. When you're creating an app, you must have a need to extend the, the, the design system of tailwind so I find that really difficult to me. To, to read the documentations from tailwind to write a plugin for it and then it's not really clear that how you can do it really straightforward or like, when, when one thing doesn't work, you didn't know how to figure out how to solve that, to fit what you need.
So then I come up with like, maybe, maybe I can just like put what I want really simple registry for, for example, like. To be like pending with the 100 100 units. And then I, I can just, I can just set the rules and the style with it. So when I use it, it should generate it. So that's the initial idea that I created UnoCSS to it. And I kind of find out where's this approach. It, could it be like really simple things like you're just matching, matching the string and generating the CSS and things like, we don't do the parsing. We don't, we don't need an AST. So like we can just do the string contraction, which is w which could be really fast.
At first, I just like trying to experiment if it is this idea would work. And then it comes out, like it could be really great and I can use it to mimic the styles and the utilities from tailwind or WindiCSS so so that kind of make it, I say engine.
So like uh, as an engine, it doesn't come with any utilities. But the like using preset that like, I, we have the preset called preset-wind which is like a common set of the tailwind and WindiCSS. The engine itself is the unopinionated. You can build own design system and growing up, or like you can stand the phone, the, the, the, the presets that we had all like the committee had which which I think that's a really good way to full for others, to like, create their own systems as they want.
Justin: Yeah, it's pretty cool. I've been, I've been following UnoCSS since you put out that really, really informative blog post about what it is and how it works. So what's your, what's your plans for the future? I mean, it sounded like early on that you thought about maybe seeing if you could integrate it with WindiCSS but is that still gonna be a thing or is it going to be standalone and, and sort of, what are you, where are you thinking about taking it?
Anthony: Yeah. Yeah, it is. It has been a few months. And then we kind of develop her a lot of tools around that. So like, you can use it as a runtimes with a CDN, like you can just pull and it will generate a styles instead of like, like providing all the CSS combinations for on CDN. And then I, we kind of built a VSCode extensions, Webpack plugins and install and is going really good.
And actually, like, it's still marking at as experimental as, but like I see quite a few, people's already use it in productions. The, the, the men block for me to like shipping with the 1.0. I just, I just don't don't want to like, make it hard to like make a breaking change. So like, I kinda think it's, it's still a state so that I want to make I want to improve a designs. I can, I can introduce the breaking changes more easier with all the, the 1.0, by the, like, after the state of the stability. So I think it's already a state it's already stable enough.
So about WindiCSS is that we indeed like still planning to like, use, UnoCSS the, as a new engine when you said that V4 and we working on it, but like, it's still like a lot of work to do since like the API is is it a bit different and the the Windi is, is compatible with the tailwinds configurations API, which should, which like in UnoCSS that's I kind of trying to like getting, getting away of, of those tech burden. So like to say, that's what I can go. So. I think that that does the, the same full migrating WindiCSS use UnoCSS his life still in progress is still the same, but like, it might take more time to it.
Andrew: So it looks like this is a pretty, like pretty flexible system for creating atomic CSS systems. Like I think that's super useful. At my last company for the design system I was working on, I made a much shittier version.
That would generate a atomic CSS classes for our design tokens. I think I honestly, right now I'm in the same process of creating a design system for my current company. And I definitely see myself going towards this sort of model because having just a design system it, that doesn't cover all your bases, like your components, like one of the two things I code components by.
A component should not define its margin and it should not define its width because that should be up to the person using the component to, to define those things, just to make it easier to use and the way you define those things. I think the best way is with an atomic CSS class, because adding CSS and all the other ways, there's lots of pitfalls to that.
But adding an atomic CSS class is like, so, so much less friction to getting that experience out the door. So, have you seen other companies and other design systems start using UNO CSS as a base for their own atomic CSS mixins?
Anthony: Yeah.
Andrew: Yeah
Anthony: Like a few, like people trying to reach out to, for me to saying that their company are using it, but to like, for me, That's what I'm I'm most aware of is that, in Nuxt labs we have a, we have a product called doccus so like in doccus that they are trying to use it to match with their design tokens, to, to generate tokens for their design. Which like we can things like I'm, I'm, I'm, part of them. So like we can working more across the day to like, fit what it is, what they need. And also, like, I can also learn about like, learn more about what, what, is design system like, or what design token like.
Andrew: That's all just guessing until you actually get in the weeds and go, oh, does this actually work? Like, like you were saying with your, your other projects.
Anthony: Yeah.
Justin: It looks cool though. I'm excited about it. I'm excited to see where it goes.
[00:27:47] Vitestd
Justin: So maybe we can talk about the, the, the really hot project. And I'm really excited about this cause we just integrated it at my job. So we're using so we're using a Vitest at oxide now and we, so we just dropped jest as awesome. Talk a little bit about this. Like a Vitest is pretty new, but it's like blown up.
Like there's so many people contributing to it and like, it it's insane how much you and everyone that's working with, you have been able to do. And like, what is a relatively short amount of time? What inspired you to make that? And then like how. Like, how did it take off it? Was that like something that you tried to make happen or did it just like, people just really liked it or what.
Anthony: This is one of the problem of, of Vite from the day one since like, Vite is like, Kind of being like really, really like creative to, to, to, to not bundle your app, but the, like using the, the browsers as native ESM support to like, make your app running in browsers. So also like make it this performance boot pass, like this also like introduce the problems things.
Like, since like you, you, you don't bundle your app and it being like a bit different from that. What jest has Things like jest jest will bundle your apps. And also like, you, you know, like, if you made some customizations in Vite or like, or like maybe, maybe in Webpack, if you install a plugin for it, then like you, you also need to install a loader for for jest Which like if you introduce a JavaScript to, to a project, you, you might need to use Ts loaders for your Webpack app, and also and then like, you will need to use you. You need to install ts-jest to have the jest supporting TypeScript So actually like this comes, the problem is that you can duplicate your effort to, to make your app, and then to test the running things like they are actually like running in different environment and the using different transformers Things like even though they behave the same. So, and they, this since like Vite has their custom transformations, logic, and their internals plugins for it. So, if you want to, if you want to like jest supportive supporting Vite it, it, it, it means like you need to rewrite all your internals plugin internal transformations with a jest version
Why would I just, this API, it doesn't allow you to like, applying like async transformations and also multiple transformations for one file, which like, could it be like a little bit like programatic. And also like the lack of native ESM support from jest w w w would also like becoming more and more part of it and things like Vite is, is using ESM by default or like ESM first. And then I so, so that's the, the, the thing that people, some of the people like trying to migrate to Vite okay. And they, and then say like, okay, Vite is great. But like the, the, the test the incompatible with jest does it really like block them to do the migrations.
So this, this is one that's we kind of find it really hard to like documented we cannot recommend any existing tools in our documentation to say, okay, , if you go with Vite you can use this test runner. The only test runner that works is that Cypress and lab tests are wrong.
Or the things that I could do firing up the real browser that are. Like that they actually being like bundler agnostic, but the problem of them is that the overhead is too large things like you need to fire up a server and that really slowed down their workforce. So, so that, that's the thing.
That's the initial thing that's driven me to, to do this. But then I kind of think, okay, test runner could it be like a little bit too much for me to maintain or like to create? So I just have this idea. That's like, I didn't, I didn't do the actions, things like, I kind of afraid to it, but then like, we have did this problem become like more in the more people asking for it.
And then at one of the team meeting, So we are kind of discussing this top this topic and then like, well, the other members come up with, okay, maybe we can create a thing and then he and he figured out a name called a Vitest, and I was thinking, okay, this name is very great. And then maybe we can and, and, and th and there's available on NPM
so, so we kind saying, okay, maybe we. Maybe it's time to, to make a full bit.
Andrew: Our connection with Anthony was spotty. So from this point in the recording forward, we had to switch to zoom. The quality of the recording will be lower. Thanks for listening.
So we've covered a lot of the projects that we think are interesting from you, but what do you think is one of your most interesting projects, which is the one that like, what's your favorite one to work on? The one that you keep coming back to? And you're like, oh, I really hit the nail on the head.
Anthony: The answer of this question is kind of vary at different times. So I guess mine, my answer is that the project I'm working on, I guess, so
Andrew: Whatever the text editor is open to.
Anthony: That's like, I think for me, like I have to like getting to this, flow that's I kind of already intuitive this project and try and get really passion about like improving it and working on it in the context. So I didn't, I kinda think if you're, if we're going to pick out kind of like, I kind of like all my projects, things that I can, they, they, they, they I took time and effort to make them.
With my best efforts. So I guess yeah, the question the answer is. Maybe the project I'm working
Andrew: on. Yeah. I think I'd have the same answer to whatever strikes my fancy at the moment. Everything has just seems like a burden when you're not, not in it.
Justin: Yeah.
So we've we've asked this question to a lot of folks who have come on and, and just given your sort of experience with open source tooling. It's just interesting to see what you think. So what do you think is the future of the web and what are you most excited about when it comes to the web
Anthony: Oh, okay. That's a really bold questions. Yeah, I, I don't, I, I actually, like, I didn't really think about it. I can, I kind of liked what it is now. And yes, I think the, the company futures of the web and the standards kind of, I kind of more like small details to it.
But yeah, it seems like actually, like I'm more into about like how we build things, like how the developer experience of the tools and how the tools evolve to like to, to like help us to, to better build those apps. And I CA I kind of think that that's the developer experience is it's also kind of the user experience things like. Since like only, only you get better developer experience you can make more complex apps that's shipping with the better like you, you can have more time to focus on like improving the usage the experience maybe experiment more like how the app or the, how the web could it be.
I think that's kind of the thing that I'm really into. And, and I'm really, I'm really looking forward to like to see that's how those tools grows and helping, helping our lives better.
Justin: Yeah. I love that answer. I mean, it's very, it aligns very much with, with how we feel and the whole reason we made this podcast.
Cause It's a little bit easy to take it for granted now, but like building a website while sometimes we can feel like, oh my gosh, there's so many tools. It's so complicated. We have so much more capability now than we did, you know, 10, 15 years ago. Right? Like it used to be real rough, real, real rough.
And now it's a little complicated, but it's kind of exciting.
Andrew: Shorter feedback loops are, are happening more and more now. Like, when I upgraded to Webpack five from Webpack four it are, are cold and hot startup time went from like three to four minutes for our electron app to like 30 seconds on average.
And just the amount of value that you can deliver when your app is just starting up quicker is immense. And tools like Vite are really pushing the boundaries on that since I think the most of the time to starts up instantly.
And with that, we are going to move on to tool tips
[00:36:57] Tooltips
Andrew: my first tool tip of the week is I'm going to talk about some things that I like from a Radix Radix is a, a headless component library from.
The modules team. We had Pedro formerly of the modules team on a few episodes ago, and I've been using this library to implement our design system here at de script. And there's some things that aren't just components that I've found to be really, really useful and like nice patterns just in general.
So the first one I want to talk about is. The as child prop if you've ever used a component library with react, there's typically a as prop where you can say, oh, I'm rendering a button, but render it as a, an anchor under the hood so that it behaves like a link that is really hard to get right at the code level.
So like making that generic, making all the types like right. Making it performance for TypeScript, all of those things are very hard. And on top of that, there's this like weird mental cognitive burden of like, oh, this as prop is now completely changing how this thing is rendering and how everything is happening.
So how Radix fixes that is with the as child prop, you can't actually say as div, instead you put as child and then put a div as the child. This is so much simpler. And like once you wrap your head around, it is just way easier to get going. And it has a bunch of like a few different things that are better than the, as prop.
So like when you're using the as prop, how do you define some like default props on that component? Or how do you just use the component? Well, you don't, or you create another component that encapsulates or component that puts the right props in the right place. And it just adds to the complexity more and more as you try to use it.
But with this as child. If you have say a button as a child, you just use the button, you put props on it and everything just works. So this is a really nice pattern for react design systems. And personally I've been adopting it in some of our components too, even though they're internal only packages, I've definitely been choosing their internal only packages to, to make some some components.
So, if you're using a, Radix definitely learn to reason about the as child prop. Cause it's, it's very powerful.
then. While we're here on Radix, I'll just also mention one other bit of goodness that I found while, while using them and reading through the code. A lot of the times they'll do something by default on an event. So, for instance, on a when a modal opens up, they'll auto focus on the first focus element in that, which most of the time is great, but sometimes you don't, you don't want that to happen and you want to do something else on your own.
And for that, they have this Like helper function called compose event handlers. And all that does is it'll first call the event handler that the user passes in. And then it will call the default one where the cool part of this comes from is if your passed in event handler calls event dot prevent default.
It doesn't run the default one from Radix. So say if you're in that dialogue situation and it focused on the first focus will element, but you're in a weird situation where that's not the thing you want to do. All you have to do is pass an event handler that says, Hey, prevent that default behavior.
I'm going to take over. I'm going to do the right thing. So like little things like this is why I'm coming to like, Radix more and more because like they get these details, right. I've I haven't even seen thought of in other react libraries and design systems developer. I've never thought of them before either.
So seeing stuff like this built into the code is very reassuring as I'm more and more of my stack to Radix.
Justin: On the, on the subject of design systems I'm kind of doing that, that same work for like all of our work is just designed systems. Now what's up with that. Anyway so I've got, I've got two tool tips that sort of go hand in hand. The first one is Figma tokens. Figma tokens is a plugin for Figma that essentially lets you use a JSON config that defines a bunch of design tokens, like colors and font sizes and you know, whatever other values you want. And you can plug those directly into your Figma designs. So that's pretty cool from like a designer's perspective, but the really awesome thing is also it syncs down.
It can like sync to GitHub. A designer can go through Figma and like update one of these tokens and it'll like create a pull request or like, you know, commit to a branch or something. So it's like a really awesome way to keep your tokens in sync.
The second tip that I have, or kind of bundle with the first the, the tokens that are output from This like Figma tokens package. They've got a little script that you can go through called like tokenize or something. I'll put that in the, in the, in the show notes, but like sort of, you can run it all through style dictionary, which is a library from Amazon that sort of takes a configuration file, like a JSON configuration file design tokens, and like helps you, it gives you a framework to like, output, like. CSS style sheet or like CSS variables or like a file for Android or file for iOS or like whatever your target is. And it's like pretty flexible. So, just like this whole tool chain has been really, really crazy because like, you know, it's like our designer can like make an update and Figma and then it like flows all the way down.
And it's, it's pretty, it's pretty sweet.
Andrew: And if you want to learn more about style dictionary, check out episode three, where we have the maintainer and creator of style dictionary on and talk all about it. Get in the nitty-gritty what's funny is you mentioned a few, few episodes back, the Figma CLI I've actually been using that extensively at work. So, you definitely have an eye on this, this space right now, Justin.
Justin: I like, I feel like it's been involving, I've done it the hard way for so long now. I'm like really excited to see it, like get easier. ,
Anthony: I think that the, the the, the, or JavaScript community is like trying to migrate from CJS to ESM and. There, that's kind of some problems with the pure esm dependencies. And for me that I kind of, I kind of think the best way to like publish a library to consumecd by other projects is to like shipping both ESM and the CJS version. And then I could using the export export fields in packages dot json to that's node to, to know that how should a to pick the, the correct version of the, of that package. So like you can, you can specific that the, the, the entry for CJS the entry for ESM. The org from the Nuxt team that's built for the general purpose of the tooling.
So be unbuild, is. Very good tool to like help you to build your libraries, to like post ESM to CJS with like minimum configurations and one of the very interesting part of it is that it has a passive watcher, like, for example, like, when we do the developers we'll do a.
W we might use that TSC or like Webpack to bundle your libraries, but then like, if you want to like make it more clear, like to automatically rebuild your, your, your bundles like you may need to start a watcher. And once your source file changes, it will rebuild again.
But like it provided very interesting idea called a passive orchards inside of. Is that all of the rebundling it again, and again, it wrapping with the, the wrong times to like consuming your source code directly. So like, you don't need, you don't need a watch her anymore. It causes the the comment called stem.
So like it has stemmed your dist right? It generates that your dist slash index, by the way, was the contents that rocking importing from yourself. So like, once you, once you, once you're wrong, the founder test it actually like , which is really good way to like, boosting your developers, things like you don't need.
Starting over starting a new terminal just for the watcher again.
Justin: That's pretty interesting, right? The check that out.
Andrew: Yeah, I do not like when libraries bundled themselves, it is just a headache. That's that's the one call-out I have against Radix is they, they use parcel to bundle everything and debugging that is just, oh my God. It's such a pain.
Okay. Mine's not really a development tool, just a cool tool in general. So, recently my fiance has been getting more into illustrator and just practicing on it. I've been practicing a little bit too. If you look at my Twitter, you can find a cute little Charmander. I did the last night. But one of the coolest things about SVG to me, Once you have an SVG, it's basically just some, some HTML markup, and it's very easy to understand and also very easy to animate.
And this is a tool I found on Twitter to animate your SVGs. And it's just super cool. Like, me and my fiance were able to get up and running animating our SVGs, like in a few minutes. So, if you have the need for animating SVG I highly recommend this tool. It's like free. If you have your animation less than like 30 seconds or three minutes.
So a pretty cool what's it called? S V it's actually kind of hard to say SVGator. Like that's how, that's how they say it. I think it's like an animator with SVG. So SVG leader. Yeah. So if you, if you find the need for this, something like this it outputs either CSS or JS, or probably even like native SVG animations.
So very, very usable, very exportable free and easy to use for the most part. You make pretty things.
Justin: My last tool set for the day is also just a fun tool. I stumbled across this project like last weekend or something, and it's just like blew my mind. It's a project called dusk 3d it's onGitHub. So. This is a 3d modeling tool. But it it's, it's not like any 3d modeling tool you've ever seen in your life.
Andrew, like, can you like play a video? Like I don't, we can't record a video playing a video, but essentially I don't know how it works, honestly. It just like it. Kind of figures out what you meant to do in a very interesting way you actually had to play with it. So instead of, instead of Like actually rendering a polygon and, and moving around vertices and stuff.
You have these for lack of a better term, these like controls these nodes that you can see from two different perspective. And you can like hover over a point and like user scroll wheel to make. So bigger or smaller, like, I dunno, it's really fascinating. If, if anybody out there has ever played the spore game the game from the Sims creator where they had like this creature creator or whatever, it kinda reminds me of spore a little bit when you're building things, it's like very fascinating, but you can do.
Like I have no artistic talent, but I was able to like go in and, and like actually model like a dog. And it was like, it was decent. And I was like, okay, this is really cool. So if you, if you're looking to like model like a ma make it 30 model, especially if it's organic and you want to do it pretty quick, this is just an amazing open source project that like is really, really interesting to use.
So definitely check it out.
Andrew: So in this video or watching, are they like using the picture to generate the 3d model? Kind of.
Justin: Yeah. Yeah. So it's like, you always do the model from like two perspectives. It like gives you like a front and a side view and you just like, basically move these little nodes around and you like connect like little lines.
And I don't know, it just like, it forms the model. And instead of like, Instead of like picking from a base perimeter of like, you know, the circle or square or whatever you can like pick from like a bunch of different things. It looks like you might have like this polygon that like, kind of looks like a leg and you can like drop it in there.
And like, almost like edit like a spline, like thing to like edit the shape of it and then like adjust the nodes to like change the. The the size at different spots. I don't know. It's it's really cool. And it's open source, so I'd definitely check it out. It's it's pretty awesome. That's
Andrew: cool.
Anthony: My last two is PMPM, which is like a alternative to NPM or yarn], which is like to be like very fast things that I use things out of, like creating like multi. Versus, or like, downloading inside of like creating multiple version of a packages inside all of your modules, PMPM use hotlink and soft link to two that directly link the assemblers and mopeds.
So like, it could be like a Dixie efficient and also like being really fast. And then. Like basically like all of my projects using PNPM now and also like the Vite and the Vue ecosystem also like switch it to a PMPM. And like, if you haven't heard about it, maybe you should definitely check it out.
Andrew: Yeah. I've heard a lot of good things how haven't tried it out myself yet. Most of my projects are still on yarn one. We're good. We're good. We're good at regrettably, but.
Anthony: Yeah, I think, I think one of the very good feature of it is that the, the monorepo support, it's not like you can, for example, like if you want to run all the squares, all your package, your sub package, you can just like can PNPM and dash R for recursive and then like a run maybe run build and then it will run all.
All the build of scripts inside of all your packages. So like you, don't, it kind of also like can replaced with a lerna and also like it handles the ways, the installations and the packages for Monterey posts, which I find is really good.
Andrew: I can't remember. Does it do a, like publishing? Well, like lerna style publishing where it's like a fixed version or like published just the dependencies of like my updated package or anything like that.
Anthony: Okay. It doesn't handle the version, but like you can use that pnpm dash r will publish and then it'll publish all your packages. So it does have a few tools recommended to bump your versions documentations.
Andrew: Cool. I think that about wraps it up for tool tips.
Thanks for coming on Anthony. I know we had some technical troubles but it it's, it's nice to talk to someone who's so, so productive in the ecosystem. Like I can't stress that enough to our audience. Like you, you are a man on a mission right now. So, thanks for what you've given to the community.
And thanks for coming on to the episode
Anthony: thank you and thank you for having me!
Justin: Yeah. Thanks for coming on.
Andrew: Well, that's it for this week's episode of dev tools, FM, be sure to follow us on YouTube and wherever you consume your podcasts. Thanks for listening.