The Meaning of Vetur, and Other Words, with Pine Wu (Part 2)
Programming is not just about creating enterprise-level apps but can be put to work to help people express themselves creatively in many different ways. This is just one of a few profound takeaways from today’s show, where we got a chance to sit down with Pine Wu, former Visual Studio Code developer at Microsoft who built Vetur, a language server that enhances the Vue editing experience. We talk to Pine about Vetur’s background and functionality, his current nomadic pursuits, and his approach to programming as an art or a means to art more than anything else. On the subject of Vetur, Pine explains the context behind the name, and what led him to build the project in the first place. He speaks about how he built out early versions of Vetur by leveraging open source code from other platforms, how the project blew up overnight, its current abilities, and what the future holds. From there, we move on to discuss Pine’s thoughts about what coding means to him. We touch on ideas about the value of exploring content outside of one's discipline, the line between learning and building, and how the tools we create and use structure the way we think about what we work on as well as what we build. Pine also shares a bunch of cool resources today – creative projects using Vue and other frameworks, as well as key texts and talks that have influenced his ideas about art, perception, tools, and computer science. For a wide-reaching conversation about creativity, learning, and writing software that is useful to the world outside of corporations, be sure to tune in!
Key Points From This Episode:
- The human languages and programming languages Pine is fluent in. Matthew Butterick’s work with Racket and why Pine wants to learn this language next.
- The line between learning and building; recent projects Pine did and what they taught him.
- Pine’s approach to learning programming as a means of achieving his creative ends.
- The added perceptive abilities you get from learning things outside of your field.
- Why ‘computer science’ is a misnomer, describing an art more than a science; how Pine got into programming.
- New features in Vue 3 and the changes Pine has to make to Vetur to support them.
- The online channels that Pine is most active on; where to find him if you’d like to get in touch.
- All the great picks from our hosts and guest from today’s episode.
- “I learn while I’m doing so I try to start new projects that help me learn.” — @octref [0:4:04]
- “I would rather sign up for a course in sociology or philosophy or design rather than sign up for a course in programming. That’s how I learn and try to improve my ways of thinking.” — @octref [0:05:58]
- “Other than learning to innovate on new ideas, I also want to learn to be able to see certain things that people of other disciplines can’t. That’s one of the reasons I am learning to draw with color.” — @octref [0:08:32]
** Pine's picks **
- Media for Thinking the Unthinkable: Designing a new medium for science and engineering, Bret Victor
- How to Hack a Painting, Tyler Hobbs
- Future of Coding
- The New Media Reader, edited by Nick Montfort and Noah Wardrip-Fruin
Links Mentioned in Today’s Episode:
- Pine Wu on GitHub
- Pine Wu on Twitter
- Pine Wu Blog
- Von, 菅野 よう子 (Kanno Yōko), ft. Arnór Dan Arnarson
- 残響のテロル (Zankyō no Teroru) / Terror in Resonance
- Tyler Hobbs’s Guide to Simulating Watercolor Paint
- Inventing on Principle
- Structure and Interpretation of Computer Programs
- Beautiful Racket
- Hackers and Painters
- Bret Victor
- The New Media Reader
- Enjoy the Vue on Twitter
Our picks this week
[00:24:49] BH: Welcome back to part 2 of our discussion with Pine Wu, creator of the beloved extension Vetur, where are joined by panelist Ari Clark, Tessa and myself. Let’s kick it off.
[00:25:00] T: I was wondering how many language do you know, both programming languages and talking languages.
[00:25:08] AC: I was also very curious about that.
[00:25:11] PW: Okay. I speak Chinese. Of course, I’m born in China. I speak English, because I’m half English. Yeah, infrastructure glitch. I speak a little bit German. I only learn it for a year when I was in college, but I spend a year to learning Japanese. I think I’m pretty fluent in Japanese when I go to Japan and have daily conversations with people. Even make some jokes.
[00:25:35] BH: That’s when you know you’re actually good at a language, I just realized. When you can joke in a language, that’s the thing.
[00:25:41] T: I mean, to be fair, people laugh at me when I speak Japanese, but I don’t think it’s for the same reason that they laugh at Pine.
[00:25:52] PW: Okay. Yeah. Sure. I think, learning languages by itself already gives me a lot of ideas, because basically, the same things. Some things are really hard to translate across languages. I think knowing how other people think and knowing how other people respond to yourself, to where your – it gives me a lot of ideas, because basically, what I want to do is that I want to create tools that have accommodate people from different culture, people from different origin, people with different beliefs and the way they’re thinking.
There was a very famous cold structure and the interpretation computer programs and I really much enjoy that. I felt in modern days, one of the most descent of list is Racket. I’m just trying to learn it. The other reason I’m learning Racket is that there is a tool called Pollen, written by Matthew Butterick He was a guy who wrote Build for Racket and also, a guy for Typography for Lawyers or things like that. I like his writing and I like the way that he builds a lot of the web stuff.
I think, because of Pollen, I really want to learn. I should have explained pollen. A pollen is a static site generator, but it’s downplayed. It has drastically pretty different from all the other static site generators. Well, I found that’s a cream of each static site generator. Anyway, I like pollen, so I try to learn Racket to be able to hack on pollen.
[00:27:36] BH: I have to ask, Pine, one of the challenges I think developers always have is there is the part of you that want to build things and then there’s part of you that wants to learn and grow. Clearly, learning is a big priority to you. Clearly, you also built tooling that’s super useful to a lot of people. Do you have a ratio that you try to strike with your time, where you’re like, “I want to devote at least half my time to R&D every week”? Or how do you strike that balance between learning, but also, still doing things and applying those skills?
[00:28:07] PW: It’s very hard to answer. I think there are two kind of aspect to it. The sure thing that I don’t really think that I learn by just learning. I learn by doing. I try to do projects. While I’m doing projects, I’m trying to learn. For them both, I was building side projects helps me manage some of my things. I’m trying to build a server set component in Golang, because I have always thought about learning Golang and I found the best way to do that is start a project set.
I don’t really particularly try to strike a balance between one or two. I just try to do both together. I learn while I’m doing, so I would try to start new projects that helps me learn. Recently, one of the recent examples is I did a sponsor map, basically using GraphQL to pull all my sponsor’s data and their locations and then try to pull them together on mapbox map. I think there are lot of things I learned along the way, like how to do github actions, so that you can pull some data and transform them into a typescript file that type checks with everybody else. Then how do you do mapbox mapping a little bit.
Yeah, those are just things I have never tried before. Each time I start a new project, I would try to use that as an example trinity to learn new things. I think that’s the best way for me to learn, because in our chance creating the doc, they were never done.
[00:29:32] BH: Excellent points.
[00:29:33] PW: Another aspect you would use that is that a simple learning, what I meant by learning is that I usually try to learn outside the realm of computer science and programming. For example, some of the books I am reading. Now they’re more art or design, or about philosophy. I think from those books I’d get most of my ideas. I do think I like to branch out from programming, because about programming self is naturally – that interest then to me.
For example, for programming, certain people enjoy and say, “Okay. I will create the most minimal operating system that’s based on C that has not really tactile interface.” Some people are going to say, “Okay. I enjoy creating the fastest database that can read millions of records per second.” I thought, those are one parts of programming. There are people who are interested in building large apps in programming.
For me, what I’m most interested in is about how programming relates to all other disciplines in our life and how programming relates to the society. Those are the parts that I’m trying to explore. I would rather sign up for a course in sociology or philosophy or design, rather than sign up a course in programming. That’s how I learn and try to improve my ways of thinking.
While I learn, I don’t really try to learn too much programming. I just use it as a tool to execute my ideas. I don’t try to proactively learn that much. I just try to craft certain tools, so to advance my projects. That’s it.
[00:31:07] BH: Yeah. I love that mental model so much. There’s that cliché from Steve Jobs that talks about connecting dots in your life. I think when it comes to innovation, a lot of times, we forget it’s easy to like, to your point of trying to study something deeply to innovate, but a lot of times, innovation is really just borrowing ideas from other fields and just bringing them into a field that’s never thought of it that way before.
[00:31:27] PW: Sure. I’m jumping on that, because that’s also a speech I really like. There is a point that I really want to point out, because I think – our work is I can relate to this best, because I think both would be a lot of data. As in part of learning is learning to innovate and to get new ideas. Part of it is trying to understand the different perspective. I think, what is pleasuring for people for enough field of design that have eyes that can see things, that other people cannot really do.
I think, you can train this after too. I think that’s really important to programmers, because I think a lot of people, they’re like accustomed to things and start on ways that they are not really able to see things other ways. I think for example, I like that speech, because I think that was some of my initial front to learn typography, because I felt that was something that’s most invisible to a lot of people. That’s actually what a lot of growth here. It’s almost like, the moment you’re going to a coffee shop, you know if you aren’t to stay here for a whole afternoon. It’s all those details that matters to you, but those are invisible and those are really hard to talk about.
Making those things right, just makes everything better. If found like, you know like to me as in Apple, I track a lot of the greatest designers to use this hardware and software, because it has paid the most of the attention to the details in its design. I felt that has resonated with a lot of people. Although they might note explicitly, saying that oh, just because of that rounded corner that I’m attracted to those Mac. I do think, we perceive those things and we react to those things.
I think for me, other than learning to innovate on new ideas, I also want to learn to be able to see certain things that people of other disciplines can also see. Well, that’s one of the reason I’m learning to try to go with color. That is really hard for me.
[00:33:28] T: In tech, we talk a lot about Dunning-Kruger, this idea that the less experience you have, the less you can see your shortcomings. The art world, I’ve heard it called the eye by YouTuber [inaudible 00:33:41]. I think the idea there is just, the reason you feel – you get worse the better you get is because your eye can recognize and take in more information and you have more experience to evaluate and analyze what you see. I think that probably learning to expand your vision and fields beyond programming is powerful for that reason as well.
I don’t think it’s an odd opinion to hold, but I do think it’s one that we don’t hear that often in tech. I’m curious, coming at it from the other angle, if you could talk about what got you into programming.
[00:34:20] PW: Yeah. To be honest, I really hated programming when I was in college.
[00:34:24] AC: Me too.
[00:34:26] PW: Okay. I remember that side, because technically when I was in my sophomore year, I was saying, “Okay. What are the courses I’m going to take next? Okay, operating systems; sounds interesting, but seems boring. Algorithms. Okay, definitely boring. Then computer region. Oh, no. I don’t know.” I don’t really want to spend so much time studying that’s medical algorithms.
I was like, okay, this interests me. In my sophomore year, I was like, thinking computer science has so many requirements, so I’ll just switch major. I switched info science major, which has 10 courses less than computer science major, so that I can take other courses. Some of the courses I’ve taken are, I think, philosophy and photography and architecture and the region of art for visual arts. I have taken courses in traditional Japanese Buddhism. I think, those really opened my eyes to different disciplines and areas.
I think that enriched me so much, even after I graduated. I never regretted taking a step to get out of my comfort zone and trying to learn a little bit in other areas. Yeah, that’s how I started computer science, because I really hated that, so I tried to branch out to other fields and then I tried to sometimes build websites for other people, because those people don’t really know much about programming. Some people might say, “Oh, that’s unorthodox start,” but that’s how I just started. I started by not really liking computers. Computer science is too much. I started by liking other fields.
[00:36:02] T: Wait, wait, wait. I feel like we missed a step here. Did you just wake up one day, or the movie of life started and you’re like, “I’m a computer science student”? How did you get there?
[00:36:14] PW: I don’t know. For example, I think I read a lot because at that time, I was thinking about yeah, not continuing my college because computer science is too boring. I don’t really like learning in the class. Then one day, I think I was reading this as by program. He was writing hackers and painters. I think that has a huge influence on me, basically. Okay, structure interpretation, computer programmers. It talks a little bit about why computer science is a misnomer, because it’s very little about science. It’s more about art.
Then he was specifically talking about yeah, there are certain passes where you can grow up to be more like a mathematician, or physicist, or yeah, other parties where you can field other people. Then it’s also with essay that hackers and painters, there are people who does like to hack and to realize their ideas with programming. That fits me much better than yeah, a traditional programmer. I just say, “Okay. I have the choice in my life. I can choose whatever I’m interested to learn.” Would I choose programming, or would I choose to do something else that I really like?
I think the jobs also said something like, if you wake up in the morning and then look at the mirror and then you started as you were thinking you’re doing the wrong things, then you should probably think now outside of that set. Okay. I’ll let that speak up. Give it a try. It has worked out. Initially, I was really afraid, because I was worried I would not get a job, because I don’t really have a proper computer science degree or stuff. Yeah. I got the job.
[00:37:51] T: I mean, did you like programming before that? Or why did you decide to enter into a degree initially? Because it must have been a tough choice to decide to –
[00:38:00] PW: Oh, no. I think basically, I first went to that, because it is the highest paid.
[00:38:05] AC: You’re being smart.
[00:38:07] BH: This would be valid. Valid reason.
[00:38:11] PW: It’s the most well-paid major you can take in your college. It’s something that I don’t hate. I think, my relationship with programming is similar to my relationship with math. I used to be really good at math in my junior too. I was in some of the local Olympics. I felt like I don’t like math, but I like to use math as a way to realize my ideas. I felt programming is the same thing.
Yeah, I did not really enjoy in programming, but after graduation, I wanted to be independent. I want to give myself a life and everything has started after that, so I said, “Okay. I would just learn this and it’s a nice skill to have.” Yeah, so I just went with that.
Now looking back, I felt really grateful, because I felt a lot of the trend using as aside, their prompt ID by code and by coding and by information. I felt yeah, I learned the right route, because I felt people from all other disciplines, they want to learn programming. Now I have that advantage of having done programming and branching out to other field. I have the knowledge and I have the skill to build. I am glad I made a choice, but it was a hard choice for me.
[00:39:25] BH: We are all very glad you made that choice too.
[00:39:28] T: I don’t know if anybody on this show has heard, but I think a new version of Vue is coming out soon, or came out kind of. Pine, can you talk a bit how that affects your plans, maybe a bit more about the work you’ve been doing in typescript?
[00:39:46] PW: Basically, for Vue3, I would see more been in early discussions about our class-based component API. Although, that didn’t really go through. Then I really spent a lot of time arguing that it shouldn’t be included. That was how I stared getting involved in Vue3. Before that, I didn’t really look at Vue 3 properly. I think that was a year and a half ago.
Yeah, after that, mostly, I think to be honest, I only did the really little support of Vue3, because for Vue3, you already explored as the definition from the original Vue file. I can just use the same logic of handling Vue2 as – I can’t support Vue3 in the same way that I supported Vue2 with very little changes. The aligned changes are literally that highlights that I can’t support Vue3. Some of the things that I’m trying to support are – for example, there is a new RFD called script setup. If you are drafting here, reduce the amount of code that you need to write to setup our component.
I think that’s super useful and I really want to support that. For those people who don’t know, so basically, let’s say, yeah, Vue in go file components, you can say explore default and then you can export a object through. It just out playing object. It’s not wrapped by Vue. Then in the Vue loader, Vue loader would wrap that in a Vue code. Basically, what Vetur does is that Vetur wraps that object literal by Vue ASD transformation. Basically, just making task to look at this code and basically, cheat on task great to say, “Okay. This is not object throughout. This is as a Vue.extendcar.” The make transcript will believe that and they’re not really keeping up on parting at the fail and try to offer all the language feature that it does, such as auto-completion and diagnostic errors.
That’s how Vetur works under the hood. For Vue, it’s really basically, we just change the different wrapper, because Vue2 is vue.extend. Vue3 is different component. Yeah, but that’s basically all the changes I need to do for in Vue3.
[00:41:47] BH: Yeah, that’s incredible, to think that even though Vue3 has been rewritten basically from the ground up with typescript, that with five lines of code you can basically effectively support both. This goes to show how incredible, like you said, the tooling when written well can really go a long way to enable the idea. We are looking forward to enhance feature support for sure, for Vue3.
[00:42:09] PW: I think basically, because it’s really, it’s adopted to support HMR risk languages. I think scout is in my infrastructure to support scout in typescript. I think there was a language by eBay and then they were a framework by eBay and there are also is in my tooling. I think for Angular, they were pouring some of my ideas to do on type-checking.
I don’t know. It has helped other people to support their languages. Yeah, I found that’s okay. I am glad to push the web forward for better editor support for all the components, or for all the frameworks, basically.
[00:42:44] BH: Yeah. Anything to push web forward for sure. Well with that, I think we can start wrapping up for this episode. Pine, so if people want to find you on the Internet of things, where could they find you?
[00:42:55] PW: I think I’m mostly on Twitter. I’m almost sometimes active on Twitter, although I try to stay from Twitter a little bit, because I’m thinking. Yeah, I try to follow people who are doing art or photography, but not really many people doing programming and politics. Yeah, sorry about that, but there are just so many things that I can’t handle. I don’t really use Twitter that much. Sometimes I do use that to announce Twitter features.
I also have a blog. It’s blog.matsu.io. Matsu stand for pine in Japanese, by the way. That’s why I got the matsu.io domain. Yeah, so that’s where you can find me. You can also send me e-mails. I enjoy reading people’s e-mails. A while ago, I received the e-mail from a guy, Lagos in Nigeria. He was talking to me how to join Vue in Vetur and I’m like, wow. I never expected that I can build something and support people from Africa. I just felt super happy to hear that. Do send me e-mails and yeah, happy to talk to you over the Internet.
[00:44:04] BH: Sounds great. Well with that, I think it’s time for us to move on to picks. Tessa, would you like to get us started? [00:44:11] T: Wow. Okay. I wasn’t expecting to be first. Yeah, so my first pick is from this company called Motz. They run a lot of kickstarters and they made this thing called the five in one sit-stand desk and it’s basically this vinyl-covered piece of board that you can configure into different shapes to raise your laptop up off the desk and is like, maybe a good elbow height for me. If you needed a daily driver for a standing desk, it probably wouldn’t do the job. I think for having something portable that folds flat, it’s pretty nice.
Also, I was helping somebody do some UX research. They mentioned that their workbook club really enjoyed this book called The Dance of Anger by Harriet Lerner. I’ve been listening to the audio book by Barbara Caruso. In an earlier episode, Ben talked about non-violent communication. I think while that book certainly has value, if you’re a person who is maybe socialized to put other people’s feelings ahead of you, then it’s a bit – the book feels a bit of an imbalance read, and so this is the other side of that coin.
Even though it’s about facing and accepting anger, it’s very calming to listen to. Which is good, because I feel like the pandemic has been getting to me this month. I’ve been feeling depressed. When I go out for my physical therapy appointments, sometimes when I feel really suffocated, I like to just sit in the car with the door open and I’m half in the car and half out of the car. I don’t feel like exposed, because I’m inside the car. The door is also open, so I’m also outdoor. That’s been a nice experience.
I was sneaking a peak ahead to Pine’s links and one of them reminded me of this article I read last year in parametric press, called Unraveling the JPEG. It’s about how they’re encoded and how they delete information that supposedly we can’t see, to shrink or down-sample the file size. They have this example of a cat and they show you how you can edit parts of the encoding one line at a time to change the picture, like using text instead of the images. Then my final pick, if Pine doesn’t mind me sharing, it is just his photography. I’ve seen a couple photos and they’re really nice.
[00:46:22] PW: Yeah. I would tell her, read the [inaudible 00:46:24]. It looks really interesting.
[00:46:26] T: Yeah. You went over my head, but it’s really cool.
[00:46:30] BH: Awesome. Ari, what do you have for us this week? [00:46:33] AC: I have a ridiculous pick. Maybe it’s more of a useful pick, as opposed to my usual, just go watch stuff that will rot your brain. I am actually going to pick Renpure’s rosemary mint cleansing conditioner. Some of you may be shampooing your hair every day with shampoo. You should stop that. It is not good for your hair. Your hair does not like it. Trust me. This is a good alternative. If you are one of those people that feel’s need to cleanse your hair every day, this is non-foaming and will actually condition your hair as it cleans it. Your hair is much happier and shinier and this an over-share, but if you’re like me and you happen to have an oily scalp, this actually makes it less oily, because you’re not stripping all of its natural oils away, so it feels the need to overload them back in. That is my pick.
[00:47:24] BH: Good pick. Pine, what do you have for us this week?
[00:47:27] PW: Okay. First, I would just say I would try to probably fill the photo grid portfolios and maybe Tessa can link to that.
[00:47:34] T: Sorry.
[00:47:36] PW: No worries. No worries. I planned to do that anyways. Yeah, but for me, I think I just try to pick the random set of – not really a random set of things, but a set of things that I think, I don’t know, because I think if you’re to lead this podcast as a message, I think I will leave as a message. I try to explore other fields, rather programming and see different ways of thinking and doing things in programming.
I think, my picks are yeah, I felt a lot of them. The first one is basically a really inspiring talk by Bret Victor, the same guy I talked before, who did a video called Inventing on Principle. His idea was you can create certain medias to bring out expressions in people that’s otherwise unthinkable or imaginable. I think that’s my [inaudible 00:48:23] good credit tools that helps people, if you make certain things. Otherwise, undoable. Yeah. I think that just a really inspiring thing.
The second thing is a cool thing on the Internet I have seen for a long time. It is filled with Vue. I was totally not surprised, but they’re all the cool project I did with Vue. If you open pull set, I think, I don’t know, yeah, everybody is stuck inside in COVID, because of COVID-19 and poolside is the best for people who are indoors. Tessa, give it a try as you will love it hopefully. It’s just so amazing.
I found that place a lot of kind of music and some graphics that makes you feel you’re on a beach. I’m amazed how they do that, but they were able to do that. It’s amazing to me. The third one is about a guy who is doing generative art and how he was trying to use programming to draw what the color. I think that’s a very unorthodox way of doing programming. Then I think what he was able to do is pretty cool. Yeah, I don’t know. I felt programming can also be used in these ways. Yeah, maybe give it a look and if you like it. First, I failed to answer. The first one is a community and that they also host a lot of podcasts and I think those are podcasts that I really enjoy listening today.
[00:49:45] T: Besides ours, right?
[00:49:48] PW: Yeah. It’s a very kind of like, academic podcast. Basically, it talks about how a lot of people are thinking, oh, what could that future program could be? Yeah, something they try to do. Of course, listening to this podcast as well. Otherwise, you couldn’t find the other ones.
The media radar is something that I really recently, I really enjoyed that book. It’s basically talking about all these new media that happened because of coding and the Internet and programming and how they shape our lives. If you’re interested to points that talk about how technology shape people’s lives, how you can create those to give people different ways of thinking, I think it would be a great read. I really enjoyed that. That’s my five picks. It’s a lot.
[00:50:35] BH: By the way, I had a check on poolside.fm. It is amazing. Oh, my gosh.
[00:50:43] PW: It is legit. Yeah. I know everybody would love it. That’s why I’m putting it here. To build a VCO, go to the inspector tool and look at it. You’ll see Vue over there. That’s one of the things I like, because a lot of people use Vue for creativity projects. Sometimes I just love to see creativity projects backed by Vue. I felt certain people in Vue community, they have a place on this that’s not really found in other communities. Yeah, I do enjoy seeing that field by Vue.
[00:51:13] BH: That’s great.
[00:51:14] T: Yeah. I wish we were playful too. I don’t know if you knew this, we have a no fun picks allowed rule.
[00:51:20] PW: Oh, okay.
[00:51:22] T: She’s telling that.
[00:51:25] AC: It’s basically all we do.
[00:51:28] BH: Cool. With that, for my pick, I have just the one pick.
[00:51:32] T: Is it a fun one?
[00:51:33] BH: To me, it’s fun.
[00:51:34] AC: It’s not fun.
[00:51:36] T: That’s what I heard.
[00:51:38] BH: My one pick for this episode is Pine’s GitHub sponsor. As we have heard, Pine does a lot of incredible for the Vue community. If you or company can find a new way to sponsor him, a 100% I totally would visit that as my pick. Check out GitHub sponsor and yeah, that is my pick, because Pine is awesome and these are all the sponsors possible.
[00:52:02] PW: Yeah. Thank you so much. I hope one day I can back on a community and they try to – are able to create on that sorts, yeah indefinitely. Yeah, I think I try to strike out a good balance of probably spend half of my time doing open source and trying to – or are living by that. I don’t really living, [inaudible 00:52:19]. I try to live very affordably. I don’t know. I think, I’m really having these sponsors, because it’s almost fair in that your work and supported by people over the whole world. You have a real connection with them and I really like that feeling. Yeah, if you’re sponsoring me, thank you so much. Yeah, I see Ben is sponsoring me. Thank you.
[00:52:45] BH: Well, with that, thank you so much, Pine, for joining us in this episode. It’s been a absolute delight. Hopefully, everyone, yeah, that’s it for this week’s episode. Thanks everyone for listening. Until next time, enjoy the Vue.
[00:53:00] T: We’re just trying to shoot ever, Ben.
[00:53:03] AC: Guys, no. Guys, no.