Enjoy the Vue
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.
Apr 27, 2020 52 min
Episode 14: Vue as a Backend with Oscar Spencer
Sponsored By: Show Notes [00:01:00] Ari jumps in right away asking Oscar how he got into doing compilers. He mentions the programming language him and his buddy created called, “Grain.” [00:02:03] Oscar works at Tidelift so he explains what kind of interesting work they do with the Open Source Community. [00:04:21] At VueConf, Oscar gave an awesome talk about Vue Backend, which he talks about more in depth here. [00:6:48] Tessa and Ari ask Oscar how he came up the idea with doing a lot of wild things with the API EAR and about building a backend in it. [00:11:47] Tessa wants to know how Oscar came up with his example and what was his inspiration for integrating all of it with on trends, and millennial Twitter talk, into his presentation. [00:17:43] As an attendee of the VueConf, Oscar talks about what talks made an impact on him and if he got any ideas that he would incorporate into the Backend Vue project. [00:19:58] Ben is curious what brought Oscar into the Vue community framework and he explains here. [00:22:30] Tessa asks Oscar to expand a little bit more in how he sees the React Mental Model and the Vue Mental Model and what that transition was like from one to the other. [00:27:09] What new feature is Oscar most excited for in Vue 3? Listen here. [00:30:14] Tessa asks Oscar the weirdest thing he’s had to fix in a Vue Project. What did he say? [00:36:38] Talking about PR’s, Ben and Oscar have some great advice. Bottom line is we are all here to help one another and never feel like anyone does not want your contributions. It’s always a learning opportunity. Picks of the week: [00:41:55] Ari has two picks: a 2-part song called, “Phantom/Phantom PT II” by Justice. Also, a show on Netflix called, “Community.” [00:43:42] Ben has two picks: he also picked “Community” and “Steam,” the free gaming platform you can download and has tons of games. [00:45:22] Oscar has three picks: a band called, “Oh Wonder,” a video game called, “Factorio,” and the video game, “Animal Crossing: New Horizon.” [00:48:47] Tessa’s has two picks: a show on Netflix called, “Travelers” and a show called, “Psych” on USA Network. Resources mentioned Grain Tidelift Oscar Spencer GitHub Oscar Spencer Twitter “Phantom/Phantom PTII” by Justice Community Steam Oh Wonder Factorio Animal Crossing: New Horizons Psych Travelers Sponsor: Linode Special Guest: Oscar Spencer.
Apr 20, 2020 41 min
Episode 13: DevTools: The Good, Bad and Ugly
Sponsored By: Show Notes [00:01:00] Chris gets right into business and explains what Vue Devtools are. [00:05:51] Ben explains the “EventBus” in Devtools and what kinds of events it tracks. [00:06:47] Ari talks about the “Vuex tabs” since that’s the tab she spends the most time in. There are two panels that she explains about. [00:12:07] Chris blows everyone’s mind by telling them a feature that a lot of people don’t know about by clicking on the components tree and inspecting. Listen here to have your mind blown! It’s a game changer! [00:18:39] Ben explains a “console log” trick he’s learned recently if you ever have trouble unpacking an object. This trick he talks about allows you to do it in a dropdown manner. [00:21:34] Chris asks everyone what kinds of tricks or tools they use when they are troubleshooting by themselves. [00:28:07] Tessa mentions something pretty cool and useful about how you can activate Vue Devtools on the production version of a website. Picks of the week: [00:33:34] Chris has two picks: “Half-Life: Alyx,” a virtual reality game series and a cartoon series called, “Steven Universe Future.” [00:36:48] Ben has three picks: VS Codes Live Share, a tv show on Netflix called, “Ugly Delicious,” and a game called, “Don’t Starve Together.” [00:38:22] Chris decides he has one more pick☺, “Drawful 2,” which is a great game to play remotely with friends, found on STEAM and it’s FREE!!!! [00:39:13] Tessa has two picks: She suggests taking classes with a friend. She is currently doing an online tarot class with a friend which is a fun way to keep in touch and she suggests going to watch a professional photo shoot in “Animal Crossing” that Jessica Kobeissi, put together on YouTube. [00:40:11] Ari has two picks: a song called, “Since You Asked Kindly,” by the band, “BadBadNotGood,” and a series on Hulu called, “The Last Man on Earth.” Resources mentioned Vue.js Devtools “Half-Life:Alyx” “Steven Universe Future” VS Code Live Share “Ugly Delicious” “Don’t Starve Together” “Drawful 2” 4 Best Tarot Card Courses “Animal Crossing” Photoshoot with Jessica Kobeissi “Since You Asked Kindly,” by BadBadNotGood “The Last Man on Earth” Sponsor: Linode
Apr 13, 2020 1 hr 3 min
Episode 12: Vue Router with Eduardo San Martin Morote
Sponsored By: Show Notes About our guest: Eduardo San Martin Morote Twitter @posva Website Github [00:01:07] Chris asks Eduardo to talk about are some recent changes with Vue Router in the last six months or a year with that may be really interesting to people. [00:04:08] Chris wants to know for the premise-based navigation if you’re going to use a profile page for someone entering a user name and you take them to this new route that checks to see if that user name exists, could you add a catch there that handles that gracefully and what are some ways you would use that in an app? [00:09:31] Chris asks Eduardo what are some the main problems people have with Vue Router? Ari chimes in with an issue she’s had. [00:15:51] Eduardo answers the question if you’re building an app with that kind of interface how would you know which strategy would be better for you? Also, he tells us the “hackiest” things he’s ever seen with someone using Vue Router. [00:26:16] Chris talks about his lazy load Vue utility that he’s defined, to get around the advanced async component definition and it doesn’t work with Vue Router, and he has a messy hack that he doesn’t like and doesn’t work as well as he wants it to. He wants to know with the next version of Vue Router will we get that working? Eduardo answers this… [00:30:31] Tessa wants Eduardo to go into how URL encoding is like state machines. [00:35:21] Chris is curious if Eduardo was starting a new Vue application what would his Vue Router configuration look like? Also, Eduardo explains if he defines a scroll behavior function? [00:46:37] Tessa asks Eduardo if he woke up tomorrow in a world without Vue Router, like everything else is the same, but the router was never created, what would he do differently or what would he keep the same? [00:48:59] Tessa is curious and asks Eduardo if there are any old choices sticking around that are hampering new development that he wishes he could go back and change but maybe he can’t for some reason or another? [00:52:12] Eduardo talks a little more about what it’s like to be the core maintainer of Vue Router and what areas he needs the most help for people interested in contributing. Picks of the week: [00:55:17 Chris’s has two picks: A game called “Disco Elysium” and a show called, “Dollface” on Hulu. [00:56:20] Ari’s has two picks: A game called, “Animal Crossing: New Horizons” on Nintendo Switch. Her other pick is two songs by the group, Explosions In The Sky, called, “The Birth and Death of the Day” and “The Wilderness”. [00:57:24] Eduardo’s has three picks: A game called, “Resident Evil 2” and a Korean show called “Kingdom” and “The Platform” on Netflix . [01:01:26] Tessa’s has two picks: She is going with Ari’s recommendation of the game, “Animal Crossing: New Horizons”” and a retro pick for her which is a book called, “The Art of Gathering: How We Meet and Why It Matters”. Other resources mentioned Vue Router Nuxt-style routing in regular Vue apps Vue Enterprise Boilerplate routing docs Alternative routing strategies Eduardo's GitHub Sponsors Vue Land Discord vue.land/chat.vuejs.org Sponsor: Linode Special Guest: Eduardo San Martin Morote.
Apr 06, 2020 1 hr 8 min
Episode 11: Test Driven Development (feat. Sarah Dayan)
Sponsored By: Show Notes [00:02:37] Sarah was on the docket to speak at VueConfUS. Since it got cancelled, she shares those of us Stateside all about testing in Vue and why TDD is great. [00:05:25] Ari asks Sarah about what a contract in a component and what it means. Sarah breaks this down with a very simple example, a button. [00:09:50] Ben gets Sarah’s thoughts on end to end testing. She makes a case for Test Driven Development applying to more than just unit tests. [00:15:51] Tessa who saw one of Sarah’s presentations on TDD, asks her about her “tip” on when to test and when not to test. Sarah puts it simply, the question to ask is: “Do I care about it if it changes?”. [00:21:40] Sarah give us some good practices that you may want to implement when testing. Whether you are doing unit or end to end testing. [00:24:51] After Tessa asks Sarah about Snapshot Tests and whether a link text fits in a Unit Test. Sarah believes Snapshot Tests are better when you want to test logs or code. She feels they should not be used in place of Unit Tests, since they cannot test behaviour. [00:28:33] Ben talks about how some Dev’s have an obsession with getting 100’s on Code Coverage Reports. Sarah goes into how not to get caught up in the “vanity metrics”. The group joke around how it that obsession may originate from gaming and how we have to collect every coin and badge. [00:34:23] Tessa enquires about testing for accessibility. [00:39:34] Ari gives an example of working at a fast paced start-up, and whether or not TDD can reconcile when you don’t have clear cut requirements. Is it even possible? Sarah shows how it can save money since everything won’t need to be retested by hand. About our guest: Sarah Dyan Twitter @frontstuff_io Website Sarah's picks XState (state machines/statecharts library) Vuex ORM (object-relational mapping access to the Vuex store) The 100 on Netflix Master of None on Netflix Tessa's picks The Good Place - NBC/Netflix Anne with an E - Netflix Dispatches from Elsewhere - AMC We Should Get Together (Kat Vellos) - Book (DRM-free via her website and her preferred method to purchase iirc https://weshouldgettogether.com/products/epub-we-should-get-together-the-secret-to-cultivating-better-friendships) Animal Crossing - Switch Vue DC remote meetup Other resources mentioned Pro Plan Algolia - Help Coronavirus Testing Library by Kent C Dodds Dinero.js - Sarah Dayan Sponsor: Linode Special Guest: Sarah Dayan.
Mar 30, 2020 59 min
Episode 10: Web Accessibility with Maria Lamardo
Shownotes [00:03:38] Maria explains the resources that people should know about, tools, and techniques in the accessibility space. [00:08:55] Color issues are touched on with accessibility tools and how to deal with it. An app called, “Color Oracle,” is brought up to help for the color impaired. [00:12:44] Chris mentions a utility that is very useful called, CUID, which generates unique ideas. [00:16:12] A trick is explained that is very useful if you don’t want attributes to be passed and a Chrome extension called Vimium is mentioned. [00:23:00] Maria saw a really great talk at an Accessibility Conference by CB Averitt that you should check out. [00:28:21] Chrome has an extension called, Focus Indicator, that Maria says, “It’s really cute.” Hear what it does. [00:29:57] The topic of accessibility “faux pas” of touch devices is discussed. [00:36:35] If you’re having to retrofit an app with accessibility find out where you can start and where are places you can go to get easy wins. [00:41:13] Accessible design from the beginning was touched on earlier, but now the discussion is on the bigger picture with layouts. [00:44:37] Screen readers and compatibility is touched on as well as WCAG resources which have really good coding examples. [00:47:33] If you want to see a cool YouTube series go check out Rob Dodson’s “A11ycasts!” Picks of the week: [00:50:05] Ari has two picks: A song called “The Light,” by The Album Leaf. Also, a song called, “Da Funk,” by Daft Punk. [00:50:33] Chris has two picks: A game called, “Disco Elysium,” and to protect against the COVID-19 virus using scarves and bandanas instead of surgical masks. [00:54:40] Elizabeth’s pick is a keyboard shortcut on VS code, Ctrl+G, on Mac and Windows. [00:56:57] Maria’s pick is that she let her dog lead her on a walk recently and he led them to a secret new dog park inside their neighborhood and it has changed her life! [00:58:01] Ben has two picks: Check out Maria’s talk at VueConf on Vue Mastery and the tv show, “Survivor” Season 33: Millennials Vs. Gen-X. Resources: Maria Lamardo's Twitter Maria Lamardo's Linkedin Pendo Color Oracle Vimium Cuid Focus Indicator CB Averitt Vue Enterprise Boilerplate base-link component GitHub Ally Organization Rob Dodson-A11ycasts on YouTube Vue School-Web Accessibility with Maria “The Light” by The Album Leaf “Da Funk” by Daft Punk Disco Elysium VS Code shortcut Web Accessibility Talk at VueConf with Maria “Survivor”-Season 33 Sponsor: Linode Special Guest: Maria Lamardo.
Mar 23, 2020 1 hr 3 min
Episode 9: What to Expect when You're expect()-ing (feat. Jessica Sachs and Lachlan Miller)
Get started with Vue Test Utils Guest information Lachlan Miller Twitter @Lachlan19900 Github [Blog/Website](vuejs-course.com/) Book about Vue testing Picks: Talks from Vue Amsterdam, Vue 3 source code, the movie "Parasite". Name: Jessica Sachs Twitter @_JessicaSachs Github Website: https://jessicasachs.io [00:00:49] Jessica and Lachlan give a brief introduction how they started working on Vue Test Utils. [00:02:32] Jessica and Lachlan discuss working on a rewrite of Vue Test Utils in Type Script. [00:04:22] Find out what Lachlan says what’s a priority for them in the next version of Utils. Also, there is discussion of examples of things that Vue Test Utils wasn’t really built initially to help people test that they are now learning. [00:07:35] For those who don’t have much background with testing, you can hear how Vue Test Utils fits in the larger scope of application and where does Vue Test Utils fit with Jest and Cypress. [00:13:08] Mocking and Stubbing are explained as well as the difference between Mount and Shallow Mount. [00:26:36] An important topic Lachlan discusses is documentation and what the team needs to focus on. [00:31:54] Jessica touches on one of the things they are hoping to address in documentation, and she spills out a couple of cool “SPOILERS!” [00:35:41] What is this talk about, “Imposter Syndrome?” It’s just human, let’s say. [00:39:18] Jessica mentions things she built on Vue Test Utils before and things she’s trying to refine. [00:44:32] Find out why Jessica has a “beef” with the existence of set props. [00:48:21] A question was asked what everyone’s main use of set props is, so listen to hear what they said. Picks: [00:53:56] Elizabeth’s has two picks: A song called, “I Wish,” by Tom Misch and the movie, “1917.” [00:54:29] Ben has two picks: A Netflix show called, “Love Is Blind.” And for gamers out there, “Destiny 2,” and it’s FREE!! [00:56:06] Ari has three picks: Two songs by Scattle called, “Relay” and “Serrated.” Also, a show on HULU called, “High Fidelity.” [00:57:05] Chris’s has two picks: Both are shows are on HULU called, “Everything’s Gonna Be Okay” and “Please Like Me.” [00:58:56] Jessica has three picks: An App/desktop game called “Mini Metro,” GitHubs new notifications UI, and an old comedy movie called, “Bull Durham.” [01:01:20] Lachlan has three picks: Vue.js 3 source code is an interesting read, a movie called, “Parasite,” and a Vue.js Documentary. Links: Official Episode #9 Site Follow the podcast on Twitter and Instagram Podcast website Mocking, Stubbing, Mount, Shallow Mount Vue.js-course Vue.js testing handbook Vue.js documentary Sponsor: Linode Special Guests: Jessica Sachs and Lachlan Miller.