Enjoy the Vue
Aug 03, 2020 57 min
Episode 28: Clean Components with Michael Thiessen
Show Notes [00:00:45] Michael talks about his blog and how he got started with Vue, what his motivation was, and what his first blog post was about. [00:03:21] Reusable components is discussed as well as the biggest pain points that people run into when creating reusable components and what people responded most to. [00:08:16] Tessa asks Michael how would we know when you would reach for something like this inheritable slot in slot solution, since it his recent newsletters he talks about the idea of 6 levels of reusability and is this a tool that developers can use? He also tells us what the process was like to identify the architecture patterns and how he came up with that. [00:10:02] Michael tells what it means it means to have a component that is clean versus a reusable component. [00:14:50] Tessa wants to know how Michael comes up with his ideas and she refers to talk he did at VueConf Toronto 2019. [00:16:38] Chris asks Michael what patterns he’s used in the past that he most regrets. He also tells us why middleware was such a headache after he implemented it. [00:19:53] Michael tells us the component he’s been responsible for that he’s regretted the most. He mentions a blog post he wrote about this. He also mentions the gold plating syndrome. [00:27:19] Tessa asks Michael if she was a developer coming into a project and thinking I want to build a library, how do I decide what works for me or how do I find a balance there? [00:33:19] Chris gives us a really useful tip when he refactors components. [00:42:53] Tessa wants to know when Michael’s blog post will come out about when to use provide and inject and how it’s different from dependency injection. [00:47:30] We wrap up here by finding out where you can find Michael on the internet. Picks of the week: [00:48:56] Ari’s pick is a show called Floor is Lava on Netflix. [00:49:36] Ben has two picks: Clean Components Course by Michael Thiessen and a blog post called, “Zettelkasten-How One German Scholar Was So Freakishly Productive.” [00:51:59] Chris’s pick is Amazon Prime Wardrobe. [00:53:49] Michael’s pick is Kobo e-reader. [00:56:00] Tessa has three picks: Foam, Eurovision Song Contest: The Story of Fire Saga, and TwoSet Violin. Resources mentioned: Michael Thiessen-Twitter Michael Thiessen Michael’s Medium Blog Post-“Checklist for Writing Highly Reusable Components in React and Vue.” “The Paradox of Abstraction: When Good Code is Bad Code” by Michael Thiessen Dunning-Kruger effect Gold plating (project management) Provide/Inject Have Nothing to Do With Dependency Injection by Michael Thiessen Floor is Lava-Netflix Clean Components Course by Michael Thiessen Zettelkasten-How One German Scholar Was So Freakishly Productive Amazon prime wardrobe Kobo e-Reader Foam Eurovision Song Contest:The Story of Fire Saga TwoSet Violin Special Guest: Michael Thiessen.
Jul 27, 2020 28 min
Episode 27: Are You Not VuePressed
Sponsored By: Show Notes [00:00:50] Ben tells us what VuePress is. [00:01:43] Chris wants to know when he would use VuePress and if there’s some kind of enterprise boilerplate where someone could see an example of an integration with VuePress into a project. [00:04:20] Chris wants to know how Vue Press started and what are its origins? [00:06:17] Chris and Ben tell us what Hexo is. [00:07:36] Ben tells us what the future of VuePress holds and where is it going. [00:10:07] Tessa wonders how does flat structure work with scaffolding and the VuePress structure and she wonders how does VitePress come into play with regards to the future of VuePress? [00:14:59] Tessa wonders if she wants to integrate VuePress into a React project or an Angular project, does she need to worry about having a certain file structure or will she be able to take advantage of that smart feature of Vue Press? [00:16:13] Going back to the idea of being able to include snippets from the code base in VuePress, Tessa feels like there’s some potential for overlap with them, something like Storybooks. She is wondering how you divide the responsibilities between two tools like that. [00:20:17] Chris wants to know if there’s anything else in the future of VuePress that Ben is thinking of or someone else is thinking of something that may or may not even make it into VuePress but it’s a twinkle in someone’s eye? ☺ [00:21:48] Chris has two final questions for Ben. Does VuePress use VuePress for its docs and if people want to learn more about VuePress where do they start? Sponsor: Linode Picks of the week: [00:23:04] Tessa’s pick is Jarvis Johnson on YouTube. [00:23:40] Chris has two picks: Stardew Valley Wiki Coop and Fireplace “movies” on Netflix. [00:57:05] Ben has two picks: A podcast with Chef Dave Chang- “How Asian Americans Can Better Support Black Lives Matter,” and The Greatest Showman soundtrack. Resources mentioned: VuePress Vue Enterprise Boilerplate Documentation Reference-Chris Fritz Vue Enterprise Boilerplate Config-Chris Fritz This Dot Labs Hexo Jarvis Johnson-YouTube Stardew Valley Wiki Coop Fireplace “movies” on Netflix The Dave Chang Show-“How Asian Americans Can Better Support Black Lives Matter.” The Greatest Showman
Jul 20, 2020 45 min
Episode 26: Learning How We Learn
Sponsored By: Show Notes [00:00:50] Ben starts things out by telling us he’s always trying to hack on new technology methods and trying to keep up with new libraries getting released, so he asks Ari and Tessa what would be their first instinct to learn about Vue 3 Teleport? Tessa’s answer is the BEST! [00:04:31] The topics of comments, context, and conference talks are discussed here. [00:11:00] Ben asks Ari when she starts getting into the deeper level things, the written piece, what are some things she finds that have been helpful or things that have not worked when she reads blog posts or those kinds of things? Tessa has some things to share as well. [00:18:40] Ben asks Ari and Tessa when it comes to learning new things, are there things that they have come across, whether it’s writing styles or talks and are there things that get in the way of your learning? [00:24:00] Tessa brings up something in animation called “Onion skinning” and she explains what it does. Ben talks about writing and how it’s a difficult skill which most people don’t have a lot of training in. [00:27:57] The panelists all discuss language in writing code and how the intent is to make something less intimidating, but it frustrates people sometimes. [00:33:01] Tessa tells us a great story here about some advice she got from a product manager she met. Ben also has a great story and advice to share. [00:38:35] Tessa mentions Linux and included language and how it is hard to figure out how to sign up for it, but there is a website that will help you which is linked below. [00:39:15] Tessa talks about learning journeys and how everybody’s situation is slightly different. Ari mentions how it’s a very important skill being able to teach a concept as well as to be able to give constructive feedback. Sponsor: Linode Picks of the week: • [00:42:07] Ben’s pick is a book called, Originals, by Adam Grant. • [00:43:10] Tessa has three picks: Bad guy but I’m the good guy so I play it in the Major Key by TheDreRock (YouTube), What Voice Acting in Anime Is Like by Joe Zieja (YouTube), and “Learning How to Learn: Powerful mental tools to help you master tough subjects” by Dr. Barbara Oakley (Coursera). • [00:44:52] Ari has no picks this week since she was on vacation for two weeks and her sleep schedule is really messed up so she can’t remember anything she did this week. Resources mentioned: Inclusive Speaker Orientation (LFC101) "Originals" by Adam Grant Adam Grant bad guy but i'm the good guy so i play it in the Major key by TheDreRock (YouTube) What Voice Acting in Anime Is Like by Joe Zieja (YouTube) Learning How to Learn: Powerful mental tools to help you master tough subjects by Dr. Barbara Oakley (Coursera)
Jul 13, 2020 36 min
Episode 25: Understanding nextTick
Sponsored By: Show Notes [00:01:11] Ari tells us what nextTick is and Tessa tells us about the differences between local and global versions. [00:03:43] Ari and Tessa tell us scenarios they’ve run into as far as needing nextTick. [00:08:26] Ben is curious about “chaining” in nextTick. Tessa explains this and she also mentions her talk she did at VueConf US 2019, where she broke down a bunch of different ways to nest nextTick. [00:13:06] As far as nextTick goes, Ben wants to know if this is something that Ari and Tessa would recommend people only reach out to when things start to be inconsistent or when should someone use this? [00:18:55] Ben wants to know if nextTick is used improperly can it cause performance issues or not quite? [00:23:54] Tessa wonders if Vue3 comes out, if she follows the style where her JS is at the top of her single file component and open it, she will see at the top what props it accepts and also what events that she has decided this component will emit? [00:26:20] Ari and Tessa give some final tips about nextTick stuff. Sponsor: Linode Picks of the week: [00:28:53] Tessa has two picks: Douglas by Hannah Gadsby on Netflix and Managing Up by Mary Abbajay. [00:30:55] Ari has two picks: Queer Eye-Season 5 on Netflix and Queer Eye-We’re in Japan! on Netflix. [00:33:26] Ben’s has three picks: An OXO Good Grips Silicone Pastry Mat, Tessa, who has provided some really great picks and finds for him this week which is Hey.com and Working in Public: The Making and Maintenance of Open Source Software by Nadia Eghbal. Resources mentioned: VueConf US 2019-Back to the Vueture: Stuck in the Event Loop by Tessa nextTick Douglas-Hannah Gadsby Managing Up: How to Move Up, Win at Work, and Succeed with Any Type of Boss by Mary Abbajay Queer Eye-Netflix Queer Eye: We’re in Japan!-Netflix OXO Good Grips Silicone Pastry Mat Hey.com Working in Public: The Making and Maintenance of Open Source Software by Nadia Eghbal
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