Enjoy the Vue
Jul 06, 2020 59 min
Episode 24: Component Communication
Sponsored By: Show Notes [00:01:32] Tessa heard in the Vue world, the pattern that you want to follow is props down events up, but a lot of pieces are a bit vague when it comes to abstractions. Tessa wants to learn more about the specific mechanics behind the approach versus something else like passing callbacks? Chris gives his thoughts on this. [00:07:53] Chris explains what .native does. He also gives some great recommendations. ☺ [00:10:36] Tessa wants Chris to expand more on what problems he has seen people trying to solve with .native. [00:13:40] Chris recommends some ways for communicating how a component is intended to be used in a way that’s more in keeping with props down events up versus passing callbacks. [00:16:43] V-bind attrs is explained as well as $attrs object. And Ben talks about concerns when people are justifying desire to document the callbacks. [00:19:55] Tessa explains an issue with passing down data you need via props and trying to build some kind of structure around that communication. Also, having several series of several generations of components and how does she get around this issue. Chris clarifies and Ben names it “The Prop Train Pattern.” Ari tells us what she does. [00:24:55] Chris talks about using Guillaume’s excellent v-tool tip component. [00:26:03] Tessa goes back to Chris’s example of Font Awesome and wants to confirm if she has some grandparent that has the Font Awesome data, then it’s going through a couple of other component layers to get to the icon component layer, can she just put v-bind attrs on the icon component or does she have to put that on every component in between as well? Chris explains. [00:30:01] Ben asks Chris to speak a little bit about the caveats when it comes to the reactivity part of refactoring everything to reply and inject. [00:33:24] Ben talks about one of the drawbacks of provide/inject. Chris shares some good naming tips and patterns that help developers when they’re looking at components. [00:48:00] Tessa brings up the EventBus and if anyone has any thoughts or experiences with it. Sponsor: Linode Picks of the week: [00:54:09] Ben’s pick is Slay the Spire (Steam Game). [00:55:22] Tessa has three picks: An article called, “Respectability politics: How a flawed conversation sabotages black lives, ” a video on YouTube, “Tumblr’s Strangest Obsession: A History of the Onceler Fandom, and a movie review called, “Acrimony is the worst Tyler Perry movie OF ALL TIME.” [00:57:05] Chris’s pick is a show on Netflix called Avatar: The Last Airbender. [00:59:00] Ari’s pick is a song called, “Superliminal” by deadmau5. Resources mentioned: Vue enterprise boilerplate v-tooltip “Provide/Inject Have Nothing to Do With Dependency Injection” by Michael Thiessen Vue Style Guide: Order of words in component names Vue Patterns Slay the Spire (Steam) “Respectability politics: How a flawed conversation sabotages black lives” Tumblr’s Strangest Obsession: A History of the Onceler Fandom “Acrimony is the worst Tyler Perry movie OF ALL TIME.” Avatar: The Last Airbender deadmau5-“Superliminal” EventBus
Jun 29, 2020 50 min
Episode 23: Venturing into Vite with Evan You
Jun 22, 2020 40 min
Episode 22: Enjoy the VueNYC (Part 2 of 2)
Sponsored By: Show Notes [00:00:47] The live questions have started on Slack Chat, and the first question asked is what are your impressions of Vite and Vite Press? [00:01:49] Since Nuxt and the content module is stable, what kind of markdown editor do you suggest? [00:02:37] Speaking of projects, what projects do you think are best for Gridsome and what’s the most interactive type of site you might make with Gridsome? [00:03:46] It’s question three, so time for a promised Batman voice reveal☺. For a progressive web app, where PWA, that would be largely used on a phone, how would you make the decision between making a Vue app versus a Nuxt app? Batman answers! [00:04:45] What’s your take on Vite and will it be the future where build time will be much lower? [00:05:41] Have any of you guys used GraphQL with Vue projects and what did you think of it? [00:08:55] Ben talks about composing requests. [00:11:56] What’s it like being on the Vuejs core team, what are the team’s workflows like, and how often does the team meet? [00:14:33] When writing software what is the best way to identify the design pattern that works best for your application and how do you go about coming up with the best way to structure the project? [00:25:52] For what kinds of projects would you suggest using Typescript? Is it only for big projects or can you also use it for smaller projects? Sponsor: Linode Segment Picks of the week: [00:36:01] Ari’s pick is a song called “Storm” by Godspeed You! Black Emperor. [00:36:31] Chris has four picks: Community (TV show-I know I’m late to the party). Also, a book called, “Untamed” by Glennon Doyle, Miro, a flowcharting web app, and a podcast called, We Have Concerns. [00:38:15] Matt’s pick is a book called, “An Elegant Puzzle,” about the art of managing in software companies. [00:38:32] Ringo’s pick is Sky, an adventure game (Android, IOS) [00:38:52] Ben’s pick is Whimsical- Wireframe/Whiteboard Collaboration [00:39:34] Tessa’s has two picks: A book called, “The Manager’s Path,” by Camille Fournier and a show called, Lost in Space, on Netflix. Resources mentioned: Enjoy the Vue-Episode 16 (feat. Jack Koppa) Joi-The most powerful data validation library for JS GloomyLumi Twitter GloomyLumi Twitch “Storm” by Godspeed You! Black Emperor Community-TV show “Untamed” by Glennon Doyle Miro We Have Concerns-podcast “An Elegant Puzzle” Sky adventure game Whimsical “The Manager’s Path” by Camille Fournier Lost in Space-Netflix
Jun 15, 2020 41 min
Episode 21: Enjoy the VueNYC (Part 1 of 2)
Sponsored By: Show Notes [00:01:23] We start off by talking about everyone’s general podcast experiences and what kind of podcasts everyone was listening to before they were on their own podcast. Also, what inspired them to create their own podcasts and what were their goals? [00:15:59] The panelists talk about how the podcast has evolved over the years, episodes, months, or iterations. [00:24:14] Tessa asks the panelists if they listen to podcasts differently now that they’re on one pretty much every week? [00:29:59] Ringo and Matt talk about how their podcasts listening habits have changed since they listen to a lot of podcasts. [00:32:30] The panelists share what their challenges have been in making the podcast. [00:36:51] The panelists give their pro tips if somebody wants to start their own podcast. Sponsor: Linode Picks: Ari "Storm" Godspeed You! Black Emperor Chris Community (TV show - I know I'm late to the party) Untamed by Glennon Doyle (book) Miro (flowcharting webapp) We Have Concerns- Podcast Tessa Lost in Space (2019) (Netflix) The Manager's Path by Camille Fournier (Book) Ben Whimsical - Wireframe / Whiteboard Collaboration Matt An Elegant Puzzle - Book about the art of managing in software companies Ringo Sky - Adventure game Resources mentioned: Jack Koppa's Episode on Enjoy the Vue https://github.com/hapijs/joi Sponsored By: Segment: Segment is a customer data platform that makes good data accessible for all teams.
Jun 08, 2020 54 min
Episode 20: State Machines, XState & Vue with David Khourshid
Sponsored By: Show Notes [00:01:28] David explains about XState and the concept of State machines. [00:02:42] In a lot of his talks, David references a paper from 1987, so Tessa wonders how David got into State machines and Statecharts. [00:06:01] Sarah ask David how does it feel to be at the root of this pattern rediscovery in the front-end world and how do you feel about seeing those tried and true patterns slowly emerging front end? [00:08:44] Ari asks David to give an example of a common scenario that we probably have all dealt with where a state machine might be better than Boolean state management? [00:14:12] Tessa wonders how does David recommend somebody goes from, I don’t know what a state machine is to oh, here’s how I can start using them today? [00:14:28] Sarah mentions about David having a visualizer on the XState website. She wonders if he’s considered pushing it into something that could maybe be a tool and has he considered building something like that to help with collaborative work? [00:16:44] David talks about testing, especially end to end testing, and how tedious it is. [00:18:33] Tessa is curious if David ever tries to represent piano playing with state machine? Piano was his major in college! [00:21:50] Sarah wonders what were David’s big turning points, the big realizations that he made as a library author, since he’s at the fourth major version in three years of XState now. She also asks him when he decided to port XState to Vue, did he encounter major challenges or different challenges that were imported into react? [00:29:35] Ari talks about having to address this past week, an ongoing problem caused by use of a Boolean state. Sarah asks David what are some of the most creative applications that he’s seen of XState? [00:33:30] Tessa is curious to hear more about how the state machines work with scoping of events? [00:36:55] David talks about moving from Vuex to XState. [00:42:46} David explains why he would like to see more examples of people using state machines in creative ways. [00:45:27] Tessa wonders if David has any thoughts or has he seen any interesting examples on state machines, potentially opening up a lot more interesting avenues to create dynamic or intuitive or accessible user interfaces? Picks of the week: [00:49:10] Tessa’s pick is a game, “Phoenix Wright: Ace Attorney- Dual Destinies.” (3DS, IOS, Android) [00:50:16] Sarah has two picks: “Ten Second Songs” on YouTube and a book called, “So You Want to Talk About Race,” by Ijeoma Oluo. [00:51:39] Ari has three picks: she seconds Sarah’s “Ten Second Songs” pick. Also, a song called, Disintegration Anxiety,” by Explosions in the Sky, and a Netflix show called, “Dead to Me.” [00:52:42] David has two picks: A tutorial by Sarah Dayan called, “Using State Machines in Vue.js with XState.” Also, midi.city which is an online synthesizer. [00:53:33] Ben’s pick is a gaming laptop Acer Predator Triton 500. Sponsor: Linode Resources mentioned: David Khourshid Twitter David Khourshid GitHub David Khourshid-CodePen Enjoy the Vue-Episode 11, Test Driven Development (feat. Sarah Dayan) Erik Mogensen Statecharts State Chart XML (SCXML) W3 Spec Figma Plugin to XState XState-Usage with Vue DefinitelyTyped Repo The Keyframers “Phoenix Wright: Ace Attorney- Dual Destinies (3DS, IOS, Android) “Ten Second Songs”-YouTube “So You Want to Talk About Race” “Explosions In the Sky” by Disintegration Anxiety “Dead to Me”-Netflix “Using State Machines in Vue.js with XState” by Sarah Dayan midi.city Acer Predator Triton 500 Special Guests: David Khourshid and Sarah Dayan.
Jun 08, 2020 22 min
Episode 19: Panelist Episode: All about Tessa!
Sponsored By: Show Notes [00:00:52] Tessa tells us how she got into development. She has an incredible story that started with her seeing a Facebook ad that she thought was a scam, but was it? [00:5:47] Ben is curious to know Tessa’s experience during the coding bootcamp and how it was being in a women’s only coding bootcamp. Ari tells us about her experience at her co-ed coding bootcamp. [00:10:38] Tessa talks about how she got involved with Vue and her first experience using Vue. [00:16:01] Tessa tells us what is on her plate with projects. Picks of the week: [00:18:33 Ben has two picks: a song by Jax Jones called, “All Day and Night,” and a Taiwanese drama called, “The Perfect Match,” on Netflix. [00:19:22] Tessa has two picks: YouTube News talking about YouTube feuds between YouTube stars and a book called, “How Women Rise,” by Sally Helgesen and Marshall Goldsmith. [00:21:26] Ari is a rebel and has no picks. But Ben has one more, which is an episode on John Krasinski’s, “Some Good News” on YouTube, where he has a Zoom wedding and he got “The Office” cast to come back and do a reunion. It was really cute! ☺ Sponsor: Linode Resources mentioned: Tessa Twitter “All Day And Night” by Jax Jones “The Perfect Match”- Netflix YouTube News “How Women Rise,” by Sally Helgesen and Marshall Goldsmith The Office Cast Reunites for Zoom Wedding on “Some Good News” with John Krasinski
May 25, 2020 49 min
Episode 18: Reusable Components
Sponsored By: Show Notes [00:01:22] The panelists each tell us what a Reusable Component is. [00:6:20] Chris puts an open-ended question out there to the panelists as to when are props good and when are they bad? When have you regretted using props for what kinds of use cases and when are they appropriate? Ari and Tessa both share stories. [00:08:05] When are props useful and when would you want to use a prop over a slot? The panelists all discuss. [00:19:04] Chris talks about creating a map, map components, map markers component, map layer component, and provide and inject. There was a good talk on the topic of provide and inject using the map example at ConnectTech 2019. [00:21:31] Chris talks about an example using icon components. [00:26:05] Chris goes into “buttons” for forms, such as a submit button, search button, and inline buttons and Tessa shares some issues with generic components. [00:29:51] Chris asks the panelists if they’ve used “Mixins?” They have a discussion about it with “mixed” reviews. [00:38:50] As a member and representative of the Vue team, Ben tells us some things people should know about the Composition API since Vue 3 has not come out yet. Picks of the week: [00:43:32] Ari has two picks: A show called, “Mythic Quest,” on Apple TV Plus. Her second pick is having generous friends if you’re playing Animal Crossing. She did a shout-out to Tessa and Ben who both helped her out this week. [00:45:13] Ben has two picks: A song by Joel Corry called, “Lonely.” His second pick is a show on HBO called, “Westworld-Season 3.” [00:46:06] Tessa’s pick is an article in the New York Times called, “Why Zoom is Terrible,” based on a talk they had on last week’s episode, with special guest Debbie O’Brien. [00:46:39] Chris’s pick is: “Supernatural VR on the Quest,” which is similar to Beat Saber. Sponsor: Linode Panelists: Chris Fritz Ari Clark Tessa Ben Hong Links: Ari Clark (GloomyLumi) Twitter Ben Hong Twitter Tessa Twitter Chris Fritz Twitter Connect.Tech 2019 Components Basics Reusable Components with Props Buttons Slots Maps Icons Composition API “Mythic Quest” “Animal Crossing” “Lonely”-Joel Corry “Westworld”-Season 3 “Why Zoom Is Terrible”-NY Times “Supernatural VR on the Quest” Dependency Injection in Vue - Alex Riviere
May 18, 2020 53 min
Episode 17: Nuxt and Next Steps with Debbie O'Brien
Sponsored By: Show Notes [00:00:49] Debbie tells us what her first framework was and if it wasn’t in Vue, how she got into the Vue ecosystem. [00:1:20] Debbie fills us in about Nuxt. She also explains automatic wrap creation and what it does for someone who’s never done Nuxt and how is it different than normal Vue applications. [00:02:55] Ari asks Debbie if there are any situations where you would need to somehow hijack the route guards, or does it just handle all that for you? Tessa says the routing feature of Nuxt reminds her of Rails and asks Debbie if that is a popular combination to have Rails and Nuxt, and if so, does it make it a little bit more challenging to get the automatic routing working? [00:04:45] Ben wonders if Debbie’s had any experience with Headless CMS? [00:08:02] Debbie has an exciting announcement about Markdown in Nuxt which she has been working and it will be released very soon. The panel is EXCITED ☺! [00:10:20] Tessa asks Debbie if she could go into cases where she thinks Nuxt would not be a good fit for a project. She’s read about when you want to use Nuxt, but curious about when you really don’t need Nuxt. [00:14:49] Tessa wants Debbie to expand on the idea of not having to pay for hosting because it’s static. [00:17:17] Ben goes into WordPress and says he felt that some of the blog posts made it sound really easy to set up WordPress Headless CMS and he asks Debbie if she found it simple. Debbie has a funny reply that makes everyone laugh ☺ [00:22:05] Ben is curious to find out about all these talks Debbie is mentioning. Also, what is she doing since all these conferences have been canceled all over the world? [00:35:17] Tessa makes a good point and says one thing she feels that’s missing from these online experiences is atmospheric sounds, like if everyone has their mic on and it’s the same analogous situation and you can hear too much at once. It’s been a very odd adjustment for her, and she wonders if it’s been the same for everyone. [00:37:52] Debbie tells us what she’s currently working on and what can people look forward to in the next ecosystem. [00:42:33] Debbie mentions “Dev Around the Sun” which takes place May 12th, and it’s 24 hours of online talks from all different countries and different timelines, to raise money for people affected by COVID-19, and she is speaking at it. Picks of the week: [00:43:27] Ari’s pick is Fiona Apple’s new album called, “Fetch the Bolt Cutters.” [00:44:20] Tessa has four picks. Her first one is to no surprise, the “Supersize Psych Binge-a-thon” for the last week on USA Network. Her second one is the TV show, “Just Shoot Me” and the episode was about a murder mystery game. Her third pick is Final Cut Pro X. Her fourth pick is a show on Amazon Prime called, “Making the Cut.” [00:45:46] Debbie has three picks: Her first one is Tim Benniks, who has a YouTube channel, and he interviews Debbie on how she got her job. Her second pick is a book she read called, “Surrounded by Idiots.” Her third pick is a Netflix show called, “Money Heist.” [00:49:29] Ben has two picks: His first pick is homemade bagels which he made. His second pick is a movie called, “The Big Short.” Sponsor: Linode Panelists: Ari Clark Tessa Ben Hong Guest: Debbie O’Brien Links: Debbie O’Brien Twitter Debbie O’Brien Website Debbie O’Brien Dev.to NuxtJS Headless CMS DevAroundThe Sun “Fetch The Bolt Cutters”-Fiona Apple “Psych Binge-a-thon”-USA Network Just Shoot Me-“Hostess to Murder” episode Final Cut Pro X “Making the Cut”-Amazon Prime Tim Benniks-YouTube Interview with Debbie O’Brien “Surrounded by Idiots” book “Money Heist”-Netflix “The Big Short”-Amazon Prime Homemade Bagel Recipe
May 11, 2020 46 min
Episode 16: TypeScript with Vue and Vuex (feat. Jack Koppa)
May 04, 2020 50 min
Episode 15: End to End Testing with Amir Rustamzadeh
Sponsored By: Show Notes [00:01:27] Ben jumps in right away and asks Amir when it comes to front end frameworks what was his first one and how did he come to join the Vue community? [00:03:46] Amir talks about how he’s heading up developer experience. He announces Ben is on the team now! YAY BEN! ☺ [00:05:07] Tessa wonders when Amir is going around to solve problems, does he find that a lot of teams have very different ways of looking at Cypress usage or end to end testing, and if so, how does he resolve that or try to work on this kind of experience that works for everyone? [00:06:47] Chris and Amir explain what end to end testing is. [00:13:23] Ben explains what end to end testing means to him and Chris talks about the two things that you need to test in your application. [00:21:54] Amir talks about something he’s been advocating for recently that has to do with testing and developing apps, so listen here find out. He also explains “introspection.” [00:26:30] A great question is asked by Ari who wants to know what are some of the barriers to entry that people find that is making it so they’re not doing this and how can you address those issues? Amir responds. [00:29:04] Tessa asks Amir if he’s speaking to a team that has a setup already, where would he have them start or how would he convince them to adopt a different testing? [00:38:31] Amir talks about what Cypress released in the recent version of Cypress 4.3 and 4.4, which is better error reporting that is significantly better. There are also some new improvements on the way as well. Picks of the week: [00:39:56] Ari has two picks: a TV show on Hulu called, “Future Man.” Also, two songs by the band, Moderat, which are, “Seamonkey” and “Porc #1.” [00:41:27] Chris has four picks: Wait… he has to sneeze, Ok, he’s good! LOL. His first pick is for you to give Vue one day to play around it. Just try it and he will never bug you again. Also, try Cypress. Please give it a try. His next pick is music by Sara Bareilles. He’s been listening to the soundtrack from, “Waitress” which she did the music for. His third pick is a puzzle story game called, “The Turing Test.” His fourth pick is the ASUS PA329Q 32inch 4K monitor which he’s heard great things from Ben. [00:44:58 Amir has two picks: “The Houseparty” app to connect with family and friends. His second pick is an App called, “Whimsical.” [00:46:40] Tessa’s has three picks: watch the “Super-sized Psychtacular Binge-a-thon” on USA Network. Her second pick is watching YouTube videos on yoga and stretching that you can do at your desk or at home. It’s great to wake you up and keeps your shoulders from getting too stiff! Her third pick is getting into mentorship this year to help other people. [00:47:44] Ben’s has two picks: Coffee Shop Zoom Virtual Backgrounds and acoustic or coffeehouse music on Spotify, for those who miss going to coffeeshops. His second pick is the ASUS PA329Q 32i” 4K monitor he recently upgraded to that Chris trolled him on earlier ☺ Resources mentioned Amir Rustamzadeh Twitter Cypress Vue.js “Future Man”-Hulu “Seamonkey” and “Porc #1” by Moderat “Waitress” soundtrack by Sara Bareilles Houseparty app Whimsical “Super-sized Psychtacular Binge-a-thon”-USA Network YouTube Full Body Flow-Yoga With Adriene Mentorship Zoom Virtual Background ASUS PA329Q 32” 4K monitor Sponsor: Linode Special Guest: Amir Rustamzadeh.