May the Forms be with You (feat. Marina Mosti)

Ben Hong: This podcast is brought to you by our friends at Linode. Whether you're working on a personal project, or managing your enterprise's infrastructure, Linode has the pricing, support and scale you need to take your project to the next level. Get started on Linode today, by going to Linode.com/Vue.

Elizabeth Fine: Hey everybody and welcome to Enjoy the Vue. I am Elizabeth Fine and today on our panel we have Ari Clark.

Ari Clark: Hello.

Elizabeth Fine: Ben Hong.

Ben Hong: Hello.

Elizabeth Fine: And our special guest for this episode is Marina Mosti. Marina, would you like to introduce yourself?

Marina Mosti: Hey, how are you doing? Absolutely. My name is Marina. I am a front-end/full-stack developer. I've had the pleasure of working with code for the last 14 years. I think I considered myself at this point... I tried to call myself an educator because it has become a really important part of my life to write about Vue and the articles, book and everything we're going to be talking about. And yeah, I'm a bass player. I enjoy music a lot. I do things. I do some things.

Elizabeth Fine: Oh that's cool.

Ari Clark: I didn't know that. My husband plays the bass.

Ben Hong: Yeah, me neither.

Elizabeth Fine: So Marina, I know that you are, like you said, you're an educator, and you write a lot about Vue. So would you be able to tell us a little bit about how you started using Vue.

Marina Mosti: Absolutely. How I started using Vue. So when I first got into coding I started out actually with PHP, which was a long, long time ago. Yes, very long time ago. And eventually I progressed through a bunch of different PHP frameworks which eventually led me to Laravel. Laravel actually bundled our way to use Vue inside of the framework. It didn't have a CLI. It wasn't like all the fancy tools we're using nowadays to make this whole SPA situation with front-end, but it did give you a very nice way to bundle up, to use Vue, and to inject your server-side rendered pages into your wrapper, and then start to view magic grid through that.

Marina Mosti: So, because of what's already a part of this framework, it's like, hey this Vue thing sounds interesting. I was at this point where I would think most of the old school, I don't even know if it's old school, if it's 10 years ago, but I feel like some developers like myself just found themselves at this point where it was just clinging onto jQuery because that's what you know and you don't want to let go. And it came to a point where I was like, okay I need to learn a framework.

Marina Mosti: I've got to admit that the first framework that I was trying to get into was Angular. But it was very confusing for me to get a hold of this Angular One, Angular Two situation going on there so I just figured, you know what, maybe I'll come back to this. So it just boiled down to React and Vue. I did like React, but again, as a jQuery developer, I very much not knew any JavaScript, so React seemed a little daunting at that time for me, and I started out working Vue because I already have the tools needed to at least start to understand what this framework is about.

Marina Mosti: And then later on I came back to Angular and React to figure out what my favorite flavor in the ice cream world was. But I definitely stuck with Vue and I have not regretted that decision.

Elizabeth Fine: So yeah, that's great, I like that you describe JavaScript frameworks as ice cream. I never thought about it that way, but I guess Vue would be pistachio ice cream, because [crosstalk 00:03:58] it's green.

Marina Mosti: I would say avocado [crosstalk 00:04:02]

Ben Hong: And React is blueberry?

Ari Clark: I really like green tea ice cream, so I'm going to go with green tea ice cream.

Ben Hong: Ooh, matcha.

Elizabeth Fine: Yeah, it's matcha ice cream for sure. Yeah so I'm interested in how you sort of transitioned into education within Vue because I know you wrote a series, I think it was called Hands On with Vue, and you've also written your book, Building Forms with Vue.js. So I'm curious about what made you start to want to become an educator and put out those resources into the ecosystem?

Marina Mosti: And its actually been awhile. I started out a little bit more than a year ago, I would say around September or October of 2018 it was. My first approach into education was actually that I wanted to mentor other women into Vue and in JavaScript. I've had the fortune of never having worked in a company or environment in which women in tech had this misogyny problem or a very bro-y culture. I've had my couple of fights with people in companies that I've worked with before but nothing major and you hear some very sad stories from other women in tech, right? And I figured, I got a lot of help from different women in the community growing up, and finding better opportunities, and I wanted to do something to repay this to other women, right?

Marina Mosti: So I started my look for other women to mentor in the Vue Vixens community at the time, and one of the things that I started building on for this goal, were some very small five minute to 10 minute workshops and exercises for very focused topics in Vue. I really don't remember, I think there was something with understanding the principles of Vuex, and just very oriented goals, right? Because they were small workshops, and at some point someone, I really don't remember who it was, I wish I did because that just kind of started everything, approached me and said, "Hey, these things that you're writing, they're very nice to read, they're very easy to follow. You should try writing an article."

Marina Mosti: And at this point I felt like, it was a point in my life where I had a lot of time on my hands, and I figured hey, it might be a good idea to try to write something. Because I always wanted to adapt to other article sharing sites and I was reading all these amazing articles by other people in the community, just like JavaScript, React, everything, and I had this admiration for these people that could share the knowledge and putting it out there.

Marina Mosti: So I took this as a personal challenge and I figured, "Hey, let's start small. Let's write a whole introduction series to Vue, and I kind of regretted it, but not later on because it was definitely a big bite to take for our first series of articles. But I'm sort of lying, I did have an article before that that covered date-fns, the library.

Ben Hong: Ooh, I just used that today.

Marina Mosti: I love date-fns. It's such [inaudible 00:07:26].

Marina Mosti: So that one's my first article, and because I had gotten the hang of, hey, okay for me this process of writing is just like if I was speaking to someone and I just basically dump it on a page. It's like, okay, I'm going to go into Vue, and I'm going to try to make this series of articles, which was complicated? Not the part of writing it, but just into, how do I explain this when the audience that I'm trying to get to is people that have never, ever used Vue before, or that are starting to get into programming.

Marina Mosti: And that is where I started realizing that there were a lot of missing resources that explained tech in a non-tech world. So all these amazing people that I had the privilege of working on, that have just gotten out of coding camps, or are just getting into tech and someone came and said to them, "Hey, there's this really beginner friendly framework that you can start using, which is Vue." But we have all these amazing resources like with Documentation, but they're not intended for beginners. They use technical language. They use and approach that assumes that you've had at least some hands on experience with coding, right?

Marina Mosti: So I did this series of articles and that just sort of blew up because afterwards I started getting these messages on Twitter from random people saying, "Hey, I really appreciated your articles, it was great reading them, it was super clear, thank you for this. Which made me feel amazing and just wanting to write more. But also, I had the fortune of some people in companies that started engaging with me and saying, "Hey we really liked this work that you are doing, and we would like for you to write for us for our blog."

Marina Mosti: One of those companies that I had the pleasure of starting to work with was actually Progress, and that was actually the moment in which this actually was not only my hobby, in which I was enjoying, but I was writing and sharing all these Vue things, this framework that I'm passionate about, but there's also this company that's paying me to do it, which I thought was amazing, because there's bills to be paid, fun to be had, and you need money for that, sadly.

Marina Mosti: So I started writing for Progress. And soon enough, the truth is that at some point I worked for a company called VoiceThread. We do... I don't want to get into a whole lot of detail, but we create an education oriented tool that allows teachers and users to engage in a multimedia context in a timeline. It's very hard to explain with words. If you go to the website and click around the videos, I think it's just a lot clearer. But, I was trying to figure out what I wanted to do with my life at this point, due to some personal reasons, and I've lived in Mexico City, I'm Mexican, I've lived there for 33 years. I thought that there was a good time to make a change of pace for myself.

Marina Mosti: So I was kind of looking to see if I was going to move to the U.S., or maybe come over to Europe, and there was an opportunity for me to get an O1 Visa in the United States, and someone mentioned to me, "Hey, if you have published a book, that gets you a lot of really cool people points for your Visa." And I was like, "Sure, why not, I mean that's like a really long article, right?" Yes, this was the beginning of all the mistakes. But writing a book is not like writing a very long article as I later found out. But you know, that's just the way I lied to myself to get this done, and I just started... I've heard, hey, what should I write about, and I was starting to do a bunch of research into forms, just basically because of personal annoyance with having to use websites and not being able to submit a form and having to hack it. And I was like, "Okay, I think there's a niche here. People that are upset because there is not good forms out there, right?"

Marina Mosti: And I figured, okay, this is a very interesting topic, because I did some research... I did not find any form oriented books for Vue, and I was like, "Okay, well, I like this, let's do it." That is how the book was born. And moving on from that, I kept writing articles, and recently I became part of the Vue Mastery team and I'm writing blog articles for them as well which I'm really excited about. I just wrote my first article working on some really cool things that should be published soon, I hope, but I don't have the liberty to discuss them just yet.

Elizabeth Fine: Well I'm very excited to see what they are. So I will say, I loved your book on forms. You are absolutely a very clear writer and a very engaging writer, and I liked all the little funny parts that you threw in. I think there was one point where you said, it was something like, "When you don't know how to do something, you should just look at it and break it down into little pieces. But please don't try this in real life." And also I definitely learned a lot from your book. I don't want to summarize it, so if you would like to summarize it, we could start there, and then kind of discuss the topic.

Marina Mosti: Sure, right. So what is this book about? It's about forms. Yay.

Marina Mosti: I was trying to make the book sort of like a journey, right? And I could not not start from the very beginning of how to set up a Vue CLI project in your computer. Because this is the thing that I was talking about earlier, I cannot make the assumption that the reader will have this background knowledge, right? Because if you have it, you can skip it, or you can read through it really quick and have a refresher. But if you don't, and you open this book and you don't know how to set up your project, or one of the simple "things" that is like how do I create a reusable form components? Then you're going to be missing out in the rest of the book because I have to build up on these concepts, right?

Marina Mosti: So the book just sort of takes you through setting up your project, taking the form into what is it simplest, simplest form like, how does a form work? What are the inputs? How do you bind into a form's input event? Most people, and I was part of this misconception, but most people will catch the click event or the submit button to do all the things you need to do, right? To do your form processing, your validation and everything, but the truth is that if you do that, you're going to have a problem with some screen readers which have the ability to submit the form directly, because they are going to try to submit your form through the form tag, not through your submit button, and then your form is going to misbehave and is just going to do it's natural thing and post all the data on the get array to your own webpage.

Marina Mosti: And that is in the best case scenario that you have a form tag, because let's be honest, I've done it too, I've made forms that are not forms, they're a bunch of inputs, haphazardly thrown into a div with a button that is not even a submit button, and a bunch of JavaScript magic that makes it work.

Ari Clark: I've never done that.

Ben Hong: Who does that?

Marina Mosti: For a minute I did not catch the sarcasm, and I was like, "Wow, I'm impressed."

Ari Clark: No, definitely done that. Definitely done that.

Marina Mosti: Which is great unless you need accessibility devices, and then you're kind of left behind. So, let's not do that. Let's just form tags.

Marina Mosti: So it takes you into this basic, or "basic" notions that you have to know and that sometimes you can't glaze over because no one takes the time to actually put down the words. Then you go into how do I make a component? What is the simpler approach to making my inputs, my selects into components? How does v-model work? Some people that I met just say, "Yeah, this v-model is this magical thing," right? It just works. But when you ask them to separate it into input and binding, then it sort of breaks apart because it's like... But how? Why do I need to know this? So I took the time to go into how does v-model work into a custom component?

Marina Mosti: Let me touch up on v-masking. V-mask library. So, masking of inputs, which I think is one of the easiest things to put into your form that is going to increment your user experience ten-fold. It is so easy to do and the payback is... What is the phrase? The juice is worth the squeeze?

Ben Hong: I don't think I've ever heard that.

Ari Clark: But I love it!

Ben Hong: I like it. Yeah, I like it.

Marina Mosti: So, definitely worth your time. Super easy to implement. V-mask is an amazing library. So, yeah.

Ben Hong: No, it's good. I do have a question though. So for those who are as familiar with masking in forms, what does it mean to mask your input?

Marina Mosti: Amazing. So you know where you're using services, like beautiful, beautiful services like Stripe, and you're typing in your credit card number and it sort of separates it into four, dash four, dash four, dash four slots for a numerical input, or you're typing in your month and expiration date and it just puts it really neatly for you, and it's super obvious that you're typing and you're not making mistakes because you don't have 16 digits just thrown in there? That is great user experience, and that is input masking. So what it means is that you're going to have this input, your user as they type, they're going to see their input formatted into a certain way that makes it easier for them, not only to understand what type of form they're filling, but what you're expecting out of them. Because if I'm writing, for example, a phone number, and this is a U.S. phone number, and I'm typing in the first few characters and I see that they're being put into a parenthesis, then I see that they're expecting an area code out of me.

Marina Mosti: So it's a very nice way to communicate with the user, and it also serves as a "validation" method because it pre-validates your input with the mask. This does not mean, of course, that you should not afterwards validate the information. You always should validate. And that takes me to Chapter 5, which is How Do I Validate My Form? And I chose to go with Vuelidate, believe it or not I was not influenced with my being part of the Vuelidate team at this point

Ben Hong: You don't say!

Marina Mosti: Listen, confession time, I taught a workshop on Vue Toronto for forms actually, and I did make a parenthesis scribe saying, you know what I'm washing my hands and part of the Vuelidate team [inaudible 00:19:16] that was there with me, she's also part of the Vuelidate team, and we're using Vuelidate because it's good. And then I explained what are the reasons behind it, using Vuelidate and not Vee-lidate, which I just have to clear up right now in this podcast, I think Vee-lidate is an amazing library when you're trying to do validation that is template based. It just excels at it. It's so good at template based validation. But when you are trying to control validation through bindings, through v-model, or that your validation methods need to be put into something like Vuex for example, draw an external state, or dynamic forms, hint, hint, hint, this is why I picked it for this book, then Vuelidate better tool for the job. So I-

Ari Clark: One second, if anyone is curious about a really great breakdown comparing Vuelidate with VeeValidate, Maria Lamardo's talk at Connect Tech this past year was great. We will include a link to that in the show notes, and spoiler alert, she thinks Vuelidate's better too. Sorry.

Marina Mosti: I did clarify. I don't think it's better.

Ari Clark: Well she definitely did.

Marina Mosti: I just think they're both really great at what they do. I'm just going to leave it at that. I'm going to go with the politically correct answer.

Ari Clark: It's very diplomatic. I appreciate that.

Marina Mosti: Just use whatever's good for your project, right? Then, I talk about Vuex. How do you move your form's state to Vuex? And even more complicated is how do you validate the Vuex state? And this is where it starts getting into, I would say the quote on quote advanced part of the book because, Vuelidate in itself can get complex because of how the library has a third state, a touch method, it is not Concept that are like immediately obvious sometimes? And when you're working with a Vuex and a global state, then it just starts getting really crazy because, and I go back to the first part of my explanation of v-model, if you do not understand how v-model deconstructs, then you get into this point in the book and you're like whoa what is happening, right? So this is why I have to build up from the very basics.

Marina Mosti: And finally, Chapter seven, how do I create a schema-driven form? That is a form that is created completely dynamically by reading through commonly a JSON file, because again, I cannot assume that everyone knows what a schema is, right? So I cannot go, what is a schema? Why would you use it? What are the circumstances into how you might encounter a necessity to build a schema-driven form in your job, or in this application that you're building. And not only how do you create this form based on a static JSON file, but what's going to happen, what are the differences that you're going to encounter if you're pulling it out of an API? What happens when you're working with a back end team that suddenly changed API and then the schema comes to you in a different way? Are you going to modify your entire front end every time the back end changes? Or are you going to have some sort of filter in the middle, some library, some script that parses this. So then we get into details of how you can have a render component in that sort of translates your back end into your front end.

Marina Mosti: I think it's a very interesting topic because forms in itself, I've had a few people say, "But forms are so simple." And they should be.

Ben Hong: We wish.

Marina Mosti: They should be. I hope forms should be simple.

Elizabeth Fine: I never think of forms as being simple.

Ari Clark: Yeah, whoever said that, good for them.

Ben Hong: Yeah, good for you.

Marina Mosti: You would be surprised. But just before my workshop in Toronto, I actually made a poll in Twitter just asking about, hands up, who here is an app developer and has had to hack a form in order to submit it? In a major website.

Ben Hong: Oh I remember that!

Elizabeth Fine: Oh yeah.

Marina Mosti: The results were appalling. Appalling!

Marina Mosti: Because you never hear from all the other poor users that can barely turn on their computer, let alone hack a form. And go through your console logs. And you're debugging statements that you forgot to remove from reproductions code, and fearing what went wrong. So, this is sort of what the book encompasses.

Ari Clark: So I will say I actually bought your book because I needed it. I was not disappointed. So I have this use case, it was basically what you were just describing, where I can't guarantee that the API will be consistent. In fact it's almost guaranteed that additional fields will be added going forward. So I needed a way to dynamically generate this. And then on top of that I also needed a way to dynamically validate it. Yeah, you don't actually cover that specific case in your book, however I was able to piece together the patterns and actually accomplish that with the code that you present in Chapter seven. I just extended it with dynamic validations. So I found your book incredibly valuable. But no, you're absolutely right, there's nothing more annoying than having to completely redo your form every time the API changes, especially if you work at a start up where that might happen a lot.

Marina Mosti: Oh yeah. So listen, now that you bring it up, shameless plug, I actually have an article that I hope will be published soon that will cover some ground rules about how to hookup dynamic validation into a schema-built form, but also a little heads up, so Damian has... Damian Dulisz in the Vuelidate team has actually been working a little bit on the next version of Vuelidate which brings in Vue 3's composition API, so it's like a complete re-write from the ground up. He's been speaking about it in a couple conferences. So I know that at least there's the video now for Vue Toronto which you can watch him talk about it a little bit.

Marina Mosti: But also, I have this open source library called, well not me, sorry, the Vuelidate team has this library called FormVueLatte. Some people say FormVueLate. It's actually Latte because of the coffee. It was an inside joke that went horribly wrong. But officially, FormVueLatte. And this form actually can be open source version of this book so you just feed this sort of opinionated schema and it renders a form for you. And what we've been working on is a plug in type system in which you will inject Vuelidate into Formulate to create this crazy, crazy schema, automatic schema-driven, validated form. Just automatically out of the box for you.

Ari Clark: Magical.

Ben Hong: Wow!

Marina Mosti: Super magical. It's going to be super magical. But it's still in the works, hopefully we will get it shipped soon after Vue 3 releases, or maybe a little bit before, I don't know yet, I cannot comment on that. But it is definitely in the works. I'm very excited about it. Damian has been doing and fantastic job with it.

Ben Hong: So I had a question for you, Marina. Just to circle back a bit. You mentioned that writing in a blog was not at all like writing a really long article. Can you elaborate on that a little bit more?

Marina Mosti: I think one of the most daunting but also enlightening parts of writing a book was working with a publisher. I say enlightening just not to say really hard, complicated, and then sometimes frustrating as hell, but I have had, thankfully, the complete creative flexibility when I'm writing my articles with Progress, it's just I love what I do, thankfully. So I don't get a lot of criticism back. I know they polish it a little bit. I probably have a lot of grammar mistakes and spelling mistakes and just non-native English mistakes that they polish through, but I never had a person sit and look at my work and say, "Okay, this is very nice but we need to format it."

Marina Mosti: And the whole formatting experience was for me, and I'm speaking obviously of my own personal opinion on this, very frustrating. Why? Because I have made it on purpose almost like a signature of mine that my articles are written in a very, I don't know how to say this in English so I'm just going to try to explain it, but like if I was speaking to you.

Ben Hong: Conversational?

Marina Mosti: Conversational. Thank you. So, this to my publisher looked a lot like what they thought should be printed out as a bunch of, like a recipe, like a cooking recipe. Step number one, put this code in your component. Step number two, run this in your browser and check. Step number three... And, I did not agree with that. Because it sort of broke the flow of the conversation. And I did not want this book to completely break the rhythm of what I like to write because one of the most fulfilling parts for me as a writer and as a writer of technology and as someone that I have tried to make my articles mostly oriented to beginners because like I mentioned, I think that's where the most lacking niche is, I don't want this to break that pattern. Because, I'm sorry I sort of went on a tangent there, because the important thing to me is that when people have approached me with comments about my articles they have all this then around the topic of, I like how you approach things, because it's very easy to understand, it's easy to follow. It's not very tech.

Marina Mosti: Sometimes you have to go into the explanations. Sometimes you have to go deep into the code, but that does not mean that you can not try to make it enjoyable. So that is why I sometimes try to sprinkle things like World of Warcraft into my articles because that is what... Programmers are people. People that like things, they listen to music, they play video games, and when you're just talking to them in their language in things that they enjoy, then suddenly this thing that you also enjoy that is programming, becomes a whole experience.

Marina Mosti: So, coming back to your question, when I had to get into the part of actually reviewing the book, of making it a book and not an article, I struggled personally because of my intent to go against my own publisher, which I probably should not have. We found a middle ground. Eventually we found a middle ground. But there was a lot of friction. But eventually I think I'm happy with what came out of it. They did a great job in putting some order into my chaos, but they were flexible enough to let a little bit of the crazy remain.

Ben Hong: Well that's great, thank you for answering that. I know that Ari, Elizabeth, and I are very grateful that your personality could shine through because it'd be a very different read if it had been that recipe format that you were mentioning.

Ari Clark: Yeah, let's face it, forms aren't the most exciting thing in the world.

Ben Hong: What? You don't wake up excited every day? Like, "Oh I'm going to build some forms!"

Ari Clark: In fact, anytime I have to do work with forms I'm like, "Noooo! Noooo!" But I have to say I did enjoy working through your book, and I actually did, I did every single thing that was in the book, which-

Marina Mosti: Oh my God. Thank you for that. Thank you, thank you.

Ari Clark: Yeah, which is why I did catch a couple of typos in there. But I told you about them so it's okay.

Marina Mosti: Girl, there's typos, there's code mistakes... You review, you review, you review, you have other people review, and still-

Ari Clark: Yeah, you're still going to miss stuff. I'm so impressed that there were as few as there were.

Marina Mosti: Yeah, if you don't shape a book with bugs, you're not a programmer, right?

Ari Clark: Yeah, the day that I shape something bug free is the day that I quit forever.

Marina Mosti: Yes, exactly. I agree.

Ari Clark: So you've really focused on catering towards beginners. I think that is such an underserved niche, partly because I at least find it really hard to put myself in those shoes again. Because at some point you have the curse of knowledge. And you don't remember what you didn't know at particular stages. So, are there any techniques that you use to try to make sure that you're breaking things down to a level that's digestible to someone new to programming in general? Or are you just really good at that naturally and you're amazing?

Marina Mosti: That's a good question.

Ari Clark: I mean honestly, that is true.

Marina Mosti: Thank you. I think that, and again I really want to thank Progress for all of the creative freedom that I've had because I think the way that I've chosen my topics has been a natural flow of how I learned Vue. So because I started with this, "Hey, let's get into Vue," series. This basic series. And then I figured, okay, what is the next logical step once you know these things?

Marina Mosti: Oh, hey let's touch a bit into detail about, I don't know, computer properties. And, oh now that I did the computer properties, maybe I should do this other thing. And now that I did this other thing, maybe I can touch Vuex, and now that I did Vuex, hey let's talk about managing your global states through this other thing. So I've just had this flow where I wouldn't say that they necessarily build on each other, I mean you can sort of read through my articles and they might hint at things that I've written about in the past, some of them even linked to my own resources or resources that I found very helpful when writing the articles, but definitely this flexibility that I had about writing about what I want to write, has made it simpler to create for myself this idea of, "I'm going to write about this because I've already written about these other things," and I always, when I start writing an article, I try to make the first paragraph like, "Okay, what is the real world problem that I'm trying to solve?"

Marina Mosti: So, for example, this article that just got published for Vue Mastery, the first paragraph says, "Hey, have you ever had this problem where you're filling out a form and then for some reason you hit the backspace key and you were not in an input, and then you lose everything?" This is a real world problem.

Marina Mosti: So now that I've established, hey what are we trying to solve with this article, then I ask myself, hey okay, what knowledge do I have to assume? What topics can I not go into depth because they're going to go out of scope when I'm writing this? Then I try to declare that in the beginning of the article. "Hey, I'm going to assume at this point that you understand, I don't know, that you have the basic concepts of Vuex." And then if later on in the article I have to go into local storage then I might say, hey I'm going to assume that you have worked with cookies before, for example. And if you don't, here's some links or here's some resources that you can read to catch yourself on, because if you proceed past this point, I will assume that you know what I'm talking about because I can not... It's a never ending story the scope of what you're trying to teach.

Marina Mosti: So I think always question yourself. Am I assuming knowledge here? And if so, what knowledge am I assuming? And this is by no means perfect. I am sure that if I go back to my articles and I analyze them, that I assumed some things, or that I used a technical word somewhere. But I think for me this thing started because one day I was having, and this is not that far behind in time, I was having a conversation with Natalia at the [inaudible 00:36:47] and she said, "You should use the higher order function," and I was like, "What?"

Ben Hong: A hawk. Don't you know what a hawk is?

Ari Clark: Oh that's even worse when someone calls it [crosstalk 00:36:55]...

Marina Mosti: Yeah, and it's like what the hell is a higher order function? And she just explained it to me and I was like, "Oh, a function that raises a function, yeah," but I had never heard this term before in my life. And I don't think I can consider myself a novice programmer anymore, I've been doing this for 14 years. But I did not have a background in computer science. I actually studied how to administrate a restaurant, believe it or not.

Marina Mosti: And so I have a bunch of gaps and holes into terminology sometimes in computer science, like what is a higher order function? So, I try not to use a lot of this terminology but also I am probably a culprit in my own thing that I'm trying to fix, right? You try your best, you do your best. And then eventually just getting the flow of it, and it just becomes very natural.

Ari Clark: I think you really hit on how what I consider to be one of the biggest problems in a lot of tech articles is the use of Foo, Bar, and Baz. If I'm learning a concept, it helps me so much more if I can relate it to a real world problem.

Elizabeth Fine: Not even that, but real world words. Rather than just completely made up words. If you said cat, dog, and mouse it would be easier for me.

Ari Clark: Yeah because there's a relationship. There's a relationship between words that sort of helps you identify relationship between concepts. So yeah, good on you for recognizing that that's the way to go.

Marina Mosti: Earlier I was just writing an article that is going to touch up a little bit on the Vue 2 activity system. Believe it or not I actually found a way to explain the concept of object.defineproperty with avocado sandwiches and toast.

Ari Clark: That sounds amazing.

Ben Hong: I want to see that article.

Ari Clark: Yes.

Marina Mosti: It is crazy. I hope that it is clear, I'm going to try to test it soon, I will give you a preview.

Ben Hong: So now we need Sarah to do an avocado animation where it like pops out the seed and then is a reactive chain.

Marina Mosti: Yeah, it's going to be cool. But yeah it's so engaging and so fun for me to try to figure out these crazy examples. I don't want to do another counter, another to do list, oh my God, this whole Vue 3 example with the mouse coordinates, if I see it one more time, I swear.

Ben Hong: That is true, that is a pretty prolific example.

Marina Mosti: It is. But I'm sorry, Elizabeth you were going to say something.

Elizabeth Fine: Oh I was just going to say, one of my main sticking points with forms, especially dynamic forms, is the styling. So I just feel like, especially if you have a design that's got full length input fields and then some half input fields that are next to each other, and so those half input fields need to be inside a flex box or something. And then you've got select boxes thrown in, or textareas thrown in, and I feel like my style sheets for things like that just become absolute nightmares and then you have to deal with it all responsive where the half width fields go full width, and I'm just, I don't know-

Ari Clark: Want to know what's really fun? When you also have to have a unit selection as part of another input. That gets real, yeah. I have lived this. I don't think I did it well, but it works.

Elizabeth Fine: I'm just wondering, is there any way to do that well? Marina, with FormVueLatte, for example, so you're saying you can use a schema to sort of generate a dynamic form using that library. Does that cover or help with CSS at all or do you have suggestions for dealing with CSS and dynamic forms? Maybe the answer is just don't do stuff like half width inputs and things like that.

Marina Mosti: I have made it an ongoing joke and a point in my articles that my examples are ugly because I have zero visualize intelligence and because there is no right way to do CSS, okay?

Ari Clark: Yes, thank you!

Marina Mosti: I'm guessing if you go to someone really smart like Sarah Drassner she could probably explain CSS to you. Girl, I struggle. I do dynamic forms.

Ari Clark: That makes me feel so good.

Marina Mosti: It might work as well as... I'm guilty, they're ugly. The CSS... We use Tailwind actually, I really like Tailwind as an option for dynamic forms just because the way that you can construct the CSS with classes makes it simple in some scenarios to control through a scheme. Not that I'm saying that you should inject classes into your schema and then put them in your inputs, which could be a thing, right? But once you start getting into the rabbit hole of let's have the back-end control the graphicness of the form, then it starts to get really ugly and I don't have a catch all response for you. My response is, do what everyone does, close your eyes, and click around until it works.

Elizabeth Fine: You're going to have an ugly form or a really ugly CSS file. Preferably a really ugly CSS file, in my opinion. But at least you can clean up, using that sort of solution, you can cleanup the JavaScript and the validation and everything like that, and then you're just left with the CSS file that's... you know?

Marina Mosti: Yeah, absolutely.

Ari Clark: I'll tell you how I deal with it. Like I said, Marina I struggle with CSS so I'm not going to promise you that this is the best way ever but this is a functional way that I have found. Usually based on schema you can infer at least some things. Like for example, if you know that it's a capacity input that is going to need units selected alongside it, you can conditionally apply certain classes to it based on if certain criteria is met, so I honestly used dynamic class finding to address a lot of that. But like I said, there's probably better ways. But sometimes you do it ugly ways because it works.

Elizabeth Fine: Yeah, that sounds like a good solution, if you can build that into the model of your schema, any kind of particular CSS cases and then just dynamically bind those classes and then go into your CSS file and have a bunch of conditional classes.

Marina Mosti: I think you're touching up on a very interesting subject which is, don't be afraid to create a wrapper component that is more specialized. I think it's a little bit of what you're saying, Ari. Like, okay you have your base input, and your base input for some reason needs to have the specific look and feel, then make a component that will match this specific needs and declare it in your back-end or your schema. And to address the Flexbox needs, remember that you can also make containers. And these containers can have your own render component inside them. So your container receives a schema of the nested children that are going to be in this container, and maybe this container knows that it has to apply a Flexbox. Or it knows that if it has a property of 50, that it needs to meet 50% and create some sort of CSS magic inside of it. So I think that's a great suggestion Ari, don't ever be afraid of creating a more speciality component or a more specific component to what you need.

Ari Clark: Yeah, another thing, so I think this is mostly just because I don't know Flexbox but I know CSS Grid. I will use Grid for things I probably shouldn't use it for, but it works, so I do it. But also, CSS Grid allows you to position and layout things in a very declarative way, so one thing I know I have done, is I have passed in a string of numbers or 1FR, 2FR, 1FR, and then just dynamically bound that to a style in the form because I could do it declaratively based on the schema. Again, maybe not the prettiest way to do it, but functional. I'm all about just making things work, okay?

Ben Hong: You know, Ari, not all of us only have to support Chrome, okay?

Ari Clark: Yeah, sorry.

Ben Hong: That's why you can use Grid. The rest of us over here being like, "That doesn't work in IE."

Ari Clark: Well, that's your fault for having a product that people with IE use. I'm just saying. Totally kidding. Judgement.

Ben Hong: That would be amazing to just do Grid out of the box.

Ari Clark: It is amazing, I'm not going to lie.

Elizabeth Fine: So Marina, where can people find you on the internet?

Marina Mosti: I think the best way to approach me is through Twitter. My handle is @MarinaMosti. I have some articles in Dev.to. I usually end up cross posting there. Obviously like I mentioned I have a lot of articles also on the Telerik blog. And now on the Vue Mastery blog. You can find my articles all over the place, girl.

Ben Hong: Love it.

Elizabeth Fine: And where can people find your book? Building Forms with Vue.js.

Marina Mosti: To my knowledge, there's two ways of buying it. One of them is through Amazon, and you can also buy it directly from Pact, in their portal, you can buy the PDF version if that's what you're looking for. Or the printed version through Amazon should be the easiest way.

Ari Clark: You can actually buy the PDF and the hard copy through Pact, just saying. In a bundle. It was really great.

Marina Mosti: Thank you for clarifying that.

Ari Clark: Yeah we'll drop that in the show notes.

Marina Mosti: I hope Pacts not listening.

Elizabeth Fine: So does anyone have any final questions for Marina before we wrap up and move on to Picks?

Ari Clark: I think we're good, she's been amazing.

Elizabeth Fine: Yeah this has been so informative, thank you Marina.

Marina Mosti: No thank you for inviting me.

Elizabeth Fine: Okay and so with that it is time for us to move on to Picks. Ari, would you like to go first?

Ari Clark: So continuing with my music to code to series of Picks, this one is a very long song, at almost 18 minutes, Planisphere by Justice... Yeah, it's incredible. So, fun fact, I didn't know this until today when I was googling links to throw into the show notes to find in Spotify, Apple Music, whatever, apparently it was originally released in three parts, which if you listen to it that very much makes sense. Because I always knew that it very much had this feel of movements in it, like same theme but building on it in a different way.

Ari Clark: So originally it was three separate songs but it works as one continuous song as well. So it's sort of... It has classical influences, some of these funk influences, at times the synth becomes very sinister so it feels very heavy metal. It's like a little bit of everything in there, I can't even do it justice, but at almost 18 minutes it's a really good song for when you're in a flow, so I highly recommend Planisphere by Justice and that is all I have this week.

Elizabeth Fine: Wonderful. Okay, Ben, what are your picks for this week?

Ben Hong: Yeah, I have two picks for you all this week. My first one which is, for those who are into Anime, My Hero Academia Season four, I've known some people who complain about the pacing, it's a little bit different from the first three seasons, but they really turn a corner towards the end, it was really good character build up and stuff, and so really enjoying what they're doing with that, so really happy with it and highly recommend it. And the other pick I had, which I'm a little sad Chris is not here for-

Ari Clark: I almost picked this just to mess with you guys.

Ben Hong: So we all watched Ms. Americana actually, which is the Netflix Taylor Swift documentary.

Ari Clark: But I was like, oh God wouldn't it be funny if I picked it? But it was very good.

Ben Hong: Yeah.

Ari Clark: I'm not a Taylor Swift fan but I actually enjoyed it. You must be so proud.

Elizabeth Fine: Both of you were not in our Taylor Swift club.

Ben Hong: Hold on, hold on. I was more so than Ari.

Ari Clark: Wow.

Elizabeth Fine: Ben was closer.

Elizabeth Fine: I would say Ben is now in the Taylor Swift Club. Ari are you in the Taylor Swift club yet?

Ari Clark: I have always appreciated that she is incredibly talented and I have tremendous respect for her, it's just not something I would listen to on a daily basis. But I have even more respect for her now, okay? [crosstalk 00:50:35]

Ben Hong: So for those wondering, Ms. Americana is more about just about like... It's really about learning about Taylor Swift sort of as a person, and really her journey as far as... And that was what I thought was most interesting about it was learning about everything she's been through as a musician from a child and how she got to where she is, so even from that, it was just super educational in that regard and just insane to learn about what life would be like when you become famous and the fact that you're kind of frozen at that age because you're basically on tour.

Ben Hong: And just all these things that just really helped to humanize her and I'm not going to lie, a lot of things hit really close to home. I identify with a lot of her problems so it makes me have to wonder.

Ari Clark: I'm not going to lie, I thought about you, which is talking about something else. That's so Ben!

Ben Hong: I was like, "Oh gosh." I think I have that problem too. Anyways, Ms. Americana, totally worth checking out. [inaudible 00:51:30] [crosstalk 00:51:30] Anyhow Elizabeth, onto you.

Elizabeth Fine: I love it. Okay, so my pick this week, I have one, is cheatsheets.dev. So it's a website and it basically has code snippets from various different languages, also git code snippets as well, so its pretty helpful and we'll drop that in the show notes. And you can just bookmark it especially if you're new to git or something like that or if you are a JQuery developer for example trying to figure out, how can I do things in JavaScript that I could do in JQuery? This is kind of helpful.

Elizabeth Fine: On a second note, I know of a website called, shoot I don't remember the exact name, but we'll drop it in the show notes its called You Can Do That and You Don't Need JQuery for that or something. Ben's typing it. You know what I'm talking about?

Ben Hong: Yeah I know exactly what you talking about.

Elizabeth Fine: So basically its awesome, you type in the JQuery sort of method that you're trying to recreate and it just reactively pulls up the JavaScript version of it, so it's pretty helpful. You Don't Need JQuery, something like that.

Ari Clark: It's pretty cool. I started with JQuery, I did.

Ben Hong: You Might Not Need JQuery.

Elizabeth Fine: YouMightNotNeedJQuery.com.

Ari Clark: And Marina, does Marina have any picks?

Elizabeth Fine: And Marina, do you have any picks?

Marina Mosti: I actually have two books that I wanted to recommend. One of them is The Power by Naomi Elderman. Oh my God. Such a great book. It has a feminist vibe to it, so that's really amazing. And [crosstalk 00:52:56] I don't want to spoil it or something, but it is a very nice sci-fi type... Not sci-fi, but it is a criticism on the contemporary world, of course, and what would happen if all of a sudden the physical prowess went to women. Amazing read, amazing read. It's not feminist propaganda. It's just so good. Read it. You will enjoy it.

Marina Mosti: The other book that I was going to recommend is The Jedi Path because I am such a nerd. Oh my God this book is so good. It's actually called, the full name is The Jedi Path: A Manual for Students of the Force. And it is not a book, book like a novel, it is like if you were reading [crosstalk 00:53:46] the actual book that they gave to Jedis when they were training them. Oh my God, I am nerding so hard over this. I think there's one for the Sith and for the Imperial, for joining the Imperial Forces, which I'm of course going to read, but I'm reading this one right now and I'm enjoying it a lot so definitely super recommended.

Marina Mosti: And finally, a shameless plug, if you have not heard or used Formulate, please check it out, and obviously if you want to contribute, we're always looking for people to make PRs and test it out, and give us comments and feedback because we want to make the library better. So yeah, we have open source.

Elizabeth Fine: Thank you so much, Marina, and that is all for this week's episode. Thanks for listening and until next time, enjoy the Vue.

Ben Hong: This podcast is brought to you by our friends at Linode with 11 data centers worldwide including the newest data center in Sydney, Australia. Enterprise grade hardware has three compatible storage option, and their next generation network, Linode delivers the performance you expect at a price that you don't. Get started on Linode today, by going to Linode.com/Vue.