The Meaning of Vetur, and Other Words, with Pine Wu (Part 1)

EPISODE 45

[INTRO]

[00:00:10] BH: Hey, everybody. Welcome to Enjoy The Vue. I’m Ben. Today on our panel, we have Ari.

[00:00:15] AC: Hello.

[00:00:17] BH: And Tessa.

[00:00:18] T: Hello.

[00:00:19] BH: Our special guest for this episode is the amazing Pine Wu. Pine, would you like to introduce yourself?

[00:00:27] PW: Hi, everyone. I’m Pine. Yeah. I’m not currently in Shanghai, but previously, I was working at Microsoft and we just do their code. I think for people in a Vue community, most of you know me probably on [inaudible 00:00:38], the Vue coding for VS code. Yeah, so for me I use Vue work on batch in Microsoft and the one was in college, but now I’ve moved down and I’m living a nomadic life, where I’m a little bit trapped by the COVID-19, so I cannot travel anywhere. Ideally, I would like to travel to different places and try to do open source. Yeah, continue to contributing later.

[00:01:01] BH: That’s amazing.

[00:01:01] T: Can you talk a little bit more about what a nomadic life in place is like?

[00:01:05] PW: Yeah. I think, considering my background for me is dev security, I bet you have a linking of price longer, than if you are touring so. Then, I wouldn’t really want to do tourist thesis by just going to a place and stay there for just a week. I would like to stay, hopefully, for three months. If I ever to go to a place, I probably hope you learn the language. In the past summer, I was then to go to Russia to learn Russian, but that couldn’t happen because of the COVID-19 situation. Yeah. Hopefully, it will end soon and then I can travel again.

[00:01:38] T: Yeah. I feel like Microsoft too, just traveling the world is a big change. We talked a little bit about a blog post you wrote about in a previous episode. I’m wondering if you can elaborate on that a bit more and what’s new since then?

[00:01:52] PW: Oh, yeah. Sure. What’s new is that I get a lot more free time to focus on my own learning, because I felt if you’re at a company, a lot of the times if you’re to learn, you would be required to learn new technologies, or web stuff. It’s not like you get time to learn other stuff, like I spend time to learn Letterpress. I spend time to learn a little bit water color. I spend a lot of time reading books.

I feel like if you’re in a company steady, usually, you’re not given enough time to do that, because usually, everyday when you go back home, it’s almost already very light. Yeah. For me, I say that yeah, every day I want to spend more time to read books, to read papers and to do some fun projects, as compared to like spending every day doing company projects. I thought I had saved off enough money to support myself for a while, so I said, “Yeah. Why don’t I just try it? Because now I’m still young and I can still try.” If I grow older, I would have a lot of probably family responsibility and other stuff. I wouldn’t really be as free to do this nomadic life. Now I can still do that.

[00:03:05] T: We’re just silent, because we’re so amazed that you can fit so much into one life.

[00:03:10] PW: Oh, yeah. I don’t know. If I had know too much. For example, yeah, I felt like, I don’t know, after college, it has been straight to Microsoft and then I went to quit Microsoft and then started to travel. I could have done a lot more. For example, I was planning to apply to graduate school and then if possible, I would like to do MFA, like master on fine arts or something. I want to try different things, rather than just stereotype cold programmer’s track, because there are other things interest me, much more than programming does.

[00:03:43] BH: I have to ask, Pine, what would you get a MFA in?

[00:03:47] PW: I think, probably graphic design, because that’s something that I’m really interested in. I think if you look through the history of graphic design, technology paves the way for a lot of the new ways of designing and new concepts that are coming up. For example, I don’t know if you know a person called, I don’t know. I think his short name is MRMRS and he’s doing something in component AI, where something – I think those things are just – there are just so many new technology advances that can make design better, or cooler, or more consistent, or more user-friendly. I think that’s something I would like to do, so use technology as a tool behind the graphic design.

[00:04:29] BH: Wow.

[00:04:30] T: Yeah. Sounds cool.

[00:04:32] BH: Wow.

[00:04:34] AC: I thought I’m aiming low in life.

[00:04:38] PW: Not really, Ari. I think everybody here probably does a great job. I know Ben, you work at GitLab. You are working at more web development. Ari, I don’t know much about you, but I heard you are doing UI/UX. It’s a craft.

[00:04:51] AC: That is correct. About to start a new job though. It’s very exciting.

[00:04:55] BH: Yeah. By the time this comes out, so technically, I’m not at GitLab and not at Cypress.

[00:05:03] T: [Inaudible 00:05:03]?

[00:05:07] AC: By the time this comes out.

[00:05:08] BH: By the time this comes out. Yeah, with Netlify. I’ll be with Netlify this time.

[00:05:13] PW: Oh, you’re at Netlify now. Okay. Cool.

[00:05:16] BH: You mentioned earlier, just very casually that you happen to create Vetur, which I think has something like, how many? 5.5 million on, at least according to visualstudio.com.

[00:05:26] PW: yeah. I think that’s a lot of people. [00:05:28] BH: Yeah. Just a few million.

[00:05:32] AC: That’s amazing.

[00:05:35] PW: I never expected it when I started.

[00:05:39] BH: What would you describe, like what is Vetur for those who might have – because believe it or not, there are people who’ve never used it before, even though there are so many people. What is Vetur? How would you describe it to people?

[00:05:52] PW: Okay. First, I would say, Vetur is an Icelandic word that stand for winter.

[00:05:57] BH: I did not know that.

[00:05:58] AC: That is so fascinating.

[00:06:01] PW: Okay. Cool. Okay. Maybe you are more interested in the alternative history of Vetur than the actual Vetur. Basically, there was a sound that I relax is by Kanno Yoko, so called Von. Von stands for hope in Icelandic. Basically, there was the anime and the there was this song called, yeah, Von and then it talks about Vetur and I like this word very much and it also starts with V. I really want to find a word that starts with V and that’s really unique. I just picked this name and then for it.

[00:06:34] T: Okay. Which anime was it in?

[00:06:37] PW: Tokyo Zankyo. I think the English is Terror in Resonance. I can send you the link. It’s called Terror in Resonance. This one. I know that Japenese, Zankyo no Teroru. Okay. I should get back to the topic. Basically, for [inaudible 00:06:56]. Sorry for the aside.

[00:07:01] BH: No. We love tangents.

[00:07:03] T: I mean, anime is very on interview is what I heard.

[00:07:06] PW: Okay. Yeah. Sure. Because I heard each version consists of anime title. [00:07:11] BH: Yeah. One piece represent.

[00:07:13] PW: Basically, for Vetur, I think there are two parts. Yeah, so in general, it’s tooling support for Vue, single file components. It has two parts, basically. I think it’s highlighting grammar for Vue files and then basically, the language server side will Vue files. For people who don’t know, if you are editing, that’s great for a JavaScript style. You just need no code and you get to be, oh, after you press that, you see a lot of auto-completion. Probably, those are powered by what’s called a language server.

The language server basically analyze the whole code base pre-QR code into abstract and text trees, analyze them and then give you some auto-completion, give you diagnostic errors when you are writing something wrong. Vetur basically does that for Vue files. Because for typescript files, typescript people already have this server than can support them and then they don’t support Vue files.

What I did was extending the type to the language server to support Vue files. For Vue files, I think yeah, a lot of the functionalities – I think the most popular functionalities are just auto-completion and diagnostic errors. I think now, I have expanded Vetur into other areas. Now I have CRI that you check errors from the CRI that you can make and integrate that into your continues integration system, so that you can check for errors. I think it’s yeah, in short, it’s just a hodge-podge of tooling for me –

[00:08:44] BH: Hodge-podge.

[00:08:46] PW: Yeah. Hopefully, content is everything you ever need and you don’t need to input any other extension.

[00:08:53] AC: I mean, I switched to VS code just for Vetur. You obviously did something right.

[00:08:58] BH: I think that’s a lot of people.

[00:09:01] PW: Okay. Yeah. Sure. Because I found it basically contains everything. If you just talk about formatter, I have six different formatters that allows you to configurate totally like being anywhere you want. I remember when people want pre tier to support VON, then pre tier was like, “Oh, hey. We don’t really want to do that.” There are only one option we’re going to offer you.

Then in Vetur, you can already use six formatters for each section that you want. We basically have all the formatters that’s available on the market. We even have a pod formatter in today, because yeah, there is a pod formatter, so we bundled that.

[00:09:35] BH: Amazing. Basically, the developer experience that we know and love in VX code, you can think Pine for basically, helping to spearhead this amazing initiative, which we are all, I am sure, immensely grateful for.

[00:09:52] PW: I am glad to know that it helps people. Because basically, I think I love creating tooling to help people and I feel, I don’t know, like I felt – I always felt obliged if I were to create a tool that helps people from all over the world and makes them more productive, more make them happy. Sometimes I do receive thank you e-mails and stuff and that makes me really happy.

[00:10:14] BH: I will say, that in open source, a lot of people, they tend to file issues and stuff when they have problems and it leads to just a lot of complaining. Yes, if you have a word of compliment, it goes a long way for open source maintainers. You hit it on the head there, Pine.

[00:10:31] T: What inspired you? Did you just wake up one day and feel like, “I wish there was this thing for Vue”? How did you find this and then how did you come to make Vetur?

[00:10:40] PW: Yeah. That’s a good question. I think I was in my last year of college and then I was not really sure what to do and that I really liked Vue. I had this, I started with React. I was a very early rep, like probably, I started using it when it was in 0.2. I didn’t really like it. Then I was like, I switched to Vue, because the documentation is so much rather and it’s so much more accessible and approachable. Yeah, I just started Vue and then at that time, I was using Sublime Text.

I found like, yeah, it’s working well and then there is also a tool from Microsoft called Visual Studio Code that was coming out. I think that was also very early. I tried that and I liked it, but it doesn’t really have Vue support. I was looking at sublime support and I found that syntax highlighting has something missing that equals for a lot of the properties and stuff. It doesn’t really highlight them properly.

I send the little bit of ERQ there and then I think, I might accepted those ERs, but then later I said, “Oh, I want call it Vue in Visual Studio Code, because I found I lack the editor lock. I just quoted the type grammar over, so people who don’t know match up all that text-made grammars. Basically, sublime text we use its textmate grammars to do some highlighting and the VS code also uses that.

It’s basically really easy. I just copied over the grammar and it made it work on Vetur. Basically, just copy paste and then 001 just went off and then people not get – yeah, that’s how that started. It has that really humble beginning. I think it just only sync has highlighting, but not off the entirely gen features. Yeah, but then later, I realized, “Oh, there is something cool about done with server,” and so then people really want the outcome patient to work at least, because that helps you so much when you’re coding. What I did was I just basically again, copied over what the VS code had for HMS support and to mod it out a bit, if you supported Vue.

Yeah, more or less, it worked and yeah, that’s how it started. Initially, it was a really popular, but I think advantage something like Twitter dot on Twitter and then we tweeted that in the Chinese Vue community that start the repo. I think overnight, I had like 200 stars and I probably – there really is late for the next back to this, because I was so happy with Vue. Great teams have huge popularity.

By now, it has so many stars. I don’t really mind now. At that time, you followed back – yeah, being followed and being retweeted, but then and then, get something like 200 followers and 500 stars. It was amazing. Yeah, that’s how I started.

[00:13:22] T: I will say though, it doesn’t sound to me like the Vetur were humble at all. Just the creator is being very humble about what is a huge feat.

[00:13:32] AC: Though it feels slightly better knowing that there was a lot of copy-paste involved.

[00:13:38] T: He just looked up syntax highlighting on stack overflow. [00:13:43] PW: Yeah, totally. Because I found initially, I found just so many copy and pasting, I don’t really felt I owned much credit, because I own credit to events, and he wrote that syntax highlighted grammar, as in somewhere from VS code team wrote HMS support. I just modded a little bit.

Although in the past few years, I have modded so far away that I no longer track upstream changes. I just make my own changes to that HML part. Initially, I found like, I don’t know, just how simple doing that. Anybody can do. I do felt like it’s not really too much that part. Now it has become so popular. It is beyond my imagination. I couldn’t really imagine there are millions of people who are – at least when I was at VS code, there was an internal doc report showing how many active users I had. I think now, it’s almost 1 million. Although, the downloads is 5 million, because some people had downloaded this multiple times. I could have never imagined how popular it has gone.

[00:14:40] BH: Yeah.

[00:14:41] T: Switching text for a moment, because everybody’s laughter reminds me like, Pine, I feel like your talks are some of the funniest and most engaging talks that I’ve seen. I want to hear all your secrets. Why are you so funny? How do you make a talk?

[00:15:00] PW: I don’t know. I felt that I just really want to visit here when talking. Sometimes, I know people have certain social norms, or certain things that they really don’t want to talk about in a straightforward way. I try to just talk about in a sincere and straightforward way, because I thought some people are like, yeah, a lot of times they feel constrained by the yeah, this is something I should then say a word. They were supposed to say. If something is right, I just got out of bed, so I just try to make everything through a statement. Although sometimes, they might not make certain people happy by how I really felt.

I felt that makes it much easier to resonate with my audience, because most of the times, these are their true feelings. They would rather hear it not really covered, or some sugar-coat word stuff. Yeah, let’s just hide and talk. I think a lot of you are like that, so I just continue to speak in that way.

[00:15:55] T: It’s both a really powerful message and it also reminds me of in a previous episode, we were talking about how the talk topic seemed like it was gearing into if there was a documentation enemy, then it would be the heart of the doc sin, that I feel like we’ve just gotten to the heart of the talks.

[00:16:12] AC: Oh, Tessa.

[00:16:13] T: You’re scared. Well, shove them through and move the speakers, because you’re like, “Ah. Kandoshta.” Speaking of your talks, I think the last time I saw you speak, you presented a really cool-looking rapid prototyping tool and I’m curious what happened there and if that’s something you still plan on, really sing in the future some day.

[00:16:35] T: Yeah. I do plan, because basically, it’s like my whole passion and it’s what I really want to build Vetur NQ. Long story short, I think Vetur, I want it to be a really solid tool for professional bill developers, so that they can rely on it. Some of the latest features are just prop-type validation, as in already how evolved you feel the large scale of Vue applications. For me as a programmer, a lot of times, I don’t really enjoy –

My passion is not writing interpersonal, or large-scale Vue apps. My interest is more in the expressive side of coding. For example, one of the link setting was Tyler Hops exploration and how would you do generating what are color? I think that’s one of the most amazing thing I have seen on well, the Internet. I just felt like, yeah, I want to do stuff that have depo express themselves, or try new ideas, instead of saying, “Okay. This type validation or this works so that this interface is there, so I can use this component very safely. I think there is a benefit to safety and being able to build large scale stuff.

Then alternatively, what I really want to build is something that’s of a very low friction, so that people can easily try or build their ideas out. I still want to do that. Basically, I think, I first gave the presentation to pro, which is an asset. Initially, when I was starting in 2017, I think a lot of the technologies was not there. I made it working okay, but not really to the level that I really hoped it could be. I think recently, there are a lot of stuff that has come together. For example, ES build, which is really cool compiler for typescript and JavaScript and it’s really, really fast.

Then there is agnostic module that’s already in the browser. Then there is the VS code notebook APR, which allows you to open a document in a notebook format. I think, I want to combine this concept together and then try to build something off these latest technologies and APIs, as compared to just revising a old idea that had in 2017.

I could have just released the old version and then just made some people liked it. I felt, if I were to do something incomplete, I would rather try to do something complete and then something that I personally think I have hold it up to my standard. Yeah. I’m sorry for people that I have talked to, because I know it gets some people interested and intrigued and then they really wan to try it.

I think the real work situation that if I were to revisit, I am afraid it wouldn’t live up to certain people’s expectation. I hold off to that. If I was able to release that, I might get too many feature requests and each will send that I have to spend the amount of time to fix that. Now looking back, I probably should have just released it and then made continuous improvement since then, rather than just holding it back. Now, I think yeah, recently after doing Vetur and regarding the approach that I’m trying to continue to do it further.

[00:19:51] BH: That’s super exciting. I think the first time I heard about your prototyping tool was the very first VueConf in New Orleans. I think, you gave out a little presentation on it, right?

[00:20:01] PW: Yeah. Basically, I didn’t really get it to a really good state before the conference, even a week before that, I was still hacking on that tool. I saw it was pretty cool and it’s a message that I want to comment with people, as I brought it up to the stage. Because I felt like Vetur, I don’t know, it helps me go build a large scale Vue apps, where it’s really reliable too. What I really want Vue to is something – I don’t know if any of you are familiar with grid vectors on work. Basically, that’s a video called loading on principle.

I think that’s where a lot of my inspirations come from. He was just talking about hey, in games and the other media, you create tools that allows certain ways or developing. Basically, that brings out certain features for maybe what effects that’s naturally in other ways, is not possible, because you now have the necessary tools to build them. I’m like, I want to build something as cool as that, but then I didn’t really get to that point.

I showed a brief demo and I think I promised a lot of you I would give access to them. Actually, the source code and I was missed out on that. I’m so sorry about that. I think I am trying to get up again. Because when you’re in a corporate environment, I don’t think you have too much time to give out in side projects. Maintaining Vetur outside work is already a lot for me. Recently, I had more time and creative energy, so I think I am going to put that into that project, scale that project and hope I can finally release it some time this year.

[00:21:34] T: Nice. Yeah, that reminds me of when we had Henry on the show a month ago maybe. He was talking about Ivan Illich’s tools for [inaudible 00:21:43] and seem to overlap with that topic of how the tools can shape the way that society hates.

[00:21:51] PW: Sure thing. I had to talk with the same before I ask about. We were just in Seattle, so we yeah, had a short coffee chat. I don’t know. I think your respond a little bit to your comment, because about basically tools, that shed the way that you think about a certain style. I think, I was watching a presentation by Alan [inaudible 00:22:08]. I think he was talking about hey, this out microscope, you’re unable to work with bacteria. Without a telescope, you’re unable to work with galaxies. It’s only with these tools can you perceive certain things and understand certain things and be able to put forward certain concepts. I do think tools do shape the way that people think.

I think that’s something you can only look in retrospect and I think now it has been there for many years. I think now, I really want to study how it has affected the way that people learn and develop Vue and then maybe find ways to push the boundary and then make it simpler for people to use Vue, or learn Vue if they can do a certain feature. That’s the direction we’re pushing for.

[00:22:55] T: Yeah. Understanding colleagues, they talk about how tools are like an extension of your arm, which I guess is an extension of your mind. There is definitely an adjustment period before that, where you had to get used to the tool. At that point, it feels very foreign. I feel like now, it’s at the point where Vetur has become a part of your body. That’s just weird. Now, you can think of new possibilities maybe.

[00:23:20] PW: Yeah, I think so. I’m definitely looking for new ways to make Vetur better. I think, I first have to get some of the basic stuff right. For now, I sell the performance and can get it to a much better stage. I felt for some of the features, so for them for being able to rename are probably with certain stuff. That’s something I really want to get done, but I never had time to finish.

Just to give you context, now let’s say you have a pattern component that has a type property and this I’ll type something like a screen and you want to make it something else. Then basically, after I change that, I think that there would be a lot of errors in your co-application, because there are probably a 100 places that used that pattern. Then they’re not updated. You had to go through them manually and then there’s no way to do that.

For example, I wanted to rename where you can just say, I want to rename this type to something else. Then after you pressed that, it opted everything on your code base. Yeah, those are the kinds of things that I am also looking for. I think, what I want to do is that although I want to push Vetur towards a foundry to a lot of the lot casing, so helping people to share about their results. I also want to make that really solid for the people who uses as a driver, because I know a lot of people are like, rely on Vetur in their work. I don’t really want those people down.

[00:24:41] BH: That’s a wrap for this episode. Tune in next week when we chat about Pine’s process for coming up with new ideas on how to learn new things.

[END OF PART 1]