VoV 032: “Recursion with Vue” with Kyle Holmberg and Alex Regan




Views on Vue show

Summary: <p><strong>Panel: </strong></p> <ul> <li><a href="https://twitter.com/cmaxw?ref_src=twsrc%255Egoogle%257Ctwcamp%255Eserp%257Ctwgr%255Eauthor">Charles Max Wood</a></li> <li><a href="https://twitter.com/chrisvfritz?lang=en">Chris Fritz</a></li> </ul> <p><strong>Special Guest:</strong> Kyle Holmberg &amp; Alex Regan</p> <p>In this episode, the panel talks with two guests <a href="https://twitter.com/kylemh_">Kyle</a> and <a href="https://twitter.com/AlexSashaRegan">Alex</a> who work together in opensource. Kyle is a software engineer at<a href="https://www.autogravity.com"> AutoGravity</a> interested in full-stack web development, graphic design, integrated systems, data visualizations, and soccer. Alex writes code and works with <a href="http://parametricstudios.com">Parametric Studios</a>, and he also loves puppies. Check out today’s episode where the panel and the two guests talk about the different frameworks and contributing to opensource.</p> <p><strong>Show Topics:</strong></p> <p>3:03 – We got together because Alex mentioned his project. He was looking for something to get up running nice and easy. Boot Strap 4. That is a nice choice and I was contributing as a core team member at the time. He started with how do I get started with Boot Strap Vue. At the time I asked how do you do this...? And that’s how we got started.</p> <p>4:03 – Guest continues more with this conversation.</p> <p>4:30 – Chris: How did you start contributing within your company?</p> <p>4:44 – Guest: There is a lot of autonomy with the last company I was working with (3 people there). I needed more fine tooth hooks and modals. Someone says X and you try to figure it out. So I was looking at the transitions, and there was a bug there. They hadn’t implemented any hooks, and I thought I could figure this out. From there, if you want a change I can help out. I don’t know if that change got implemented first. I started contributing some things to the library. I really got involved where someone (the creator of the library said you could be a core member. He took a trust in me. I started a lot in test coverage. That might not be the normal path to take.</p> <p>6:39 – How long have you been developing?</p> <p>6:42 – Guest: A year and a half.</p> <p>7:00 – Chris: Any tips to opensource for beginners.</p> <p>7:10 – Guest: Yes, having a thick skin. Everyone is anonymous on the Internet. People say things that they normally wouldn’t say in person. I figure if you put something out there someone will correct you. How can I get feedback? If you put yourself out there it’s like: failure to success. That process is what makes you better.</p> <p>8:21 – Chris: Issues and chat like that. There is a lot of context that gets lost. When you just see the text it may seem angry</p> <p>8:43 – Guest: I have a tendency towards sarcasm, and I have to save that to last. People come from different languages, and I’m not talking about software languages. English isn’t everyone’s first language. Good thing to keep in-mind.</p> <p>9:14 – Internet is an international community.</p> <p>9:22 – Guest continues this talk.</p> <p>Opensource is good to work on to get started with contributions. Especially with <a href="https://operationcode.org">Operation Code</a> it’s geared towards beginners; less complex.</p> <p>10:30 – That is a good difference to show.</p> <p>11:01 – Question.</p> <p>11:05 – Guest. If you are a person with a lot of skin in their projects – I take pride in my work – I think if you have that mentality that you will want to submit to every request. Find some way to test every request against a...is this my concern or their concern? Figure out the boundaries. You will make mistakes and that’s fine.</p> <p>11:54 – Panelist.</p> <p>12:02 – Guest: Coming up with good interface boundaries for your libraries.</p> <p>12:11 – Chuck: Once we figured out what really mattered than it makes it easier to say: <em>yes</em> or <em>no.</em></p> <p>12:26 - Guest: Conventional Commits.</p> <p>13:06 – So Kyle what did you getting into opensource look like?</p> <p>13:19 – Alex: Boot Strap. Operation Code.</p> <p>15:07 – Chuck chimes-in about Aimee Knight and other people. Serving people and their country. You are helping people who have sacrificed.</p> <p>15:58 – It is totally volunteer-based.</p> <p>16:05 – Chris: What kind of questions did you ask Alex? How did you decide what to put in an issue?</p> <p>16:25 – Alex: I tend to go to Stack Overflow. If it is in regards to a library I go to GitHub.</p> <p>Real time texts.</p> <p>Next.js – I just contributed to this this week.</p> <p>19:21 – Chris: This question is for either one of you.</p> <p>For Questions and Answers – do you have any suggestions on what NOT to do when seeking help?</p> <p>19:46 – Stay away from only asking a question in one sentence. There is so much information/context that you are leaving out, and that can often lead to more questions. Reasonable amount of contexts can go a long way. Code samples. Please Google the details for the markdown if it is a huge code. Context, context, context!</p> <p>20:44 – I have an error, please fix it. Maybe that needs more context?</p> <p>20:53 – Guest: What were you doing? There is a bigger overarching element. The problem they can see in front of them and what is the thing that you are TRYING to solve?</p> <p>21:44 – More contexts that can help with a helpful answer.</p> <p>21:53 – Guest: If someone used some learning tool...</p> <p>22:13 – Chuck chimes-in.</p> <p>Chuck: It is something different that it could do something that you didn’t expect.</p> <p>22:47 – Alex: Those are great moments. I love it when Kyle sees...</p> <p>That snowflake of your problem can help with documentation caveats.</p> <p>23:44 – People are probably copying pasting.</p> <p>24:05 – It can be the difference between understanding the page and not especially</p> <p>What not to do and what to do – any other tips?</p> <p>Can you have too much information?</p> <p>24:32 – Guest: I am guilty of this sometimes. You can have too much information. The ability to converse in a real-time conversation is better. That’s my route to go. Maybe your problem is documented but documented poorly. Go to a real-time conversation to hash things out.</p> <p>26:15 – Guest: If you do your homework with the different conversations: questions vs. concerns. Real-time conversation.</p> <p>He talks about GitHub issues and Stack Overflow.</p> <p>27:48 – Chuck: My password is 123...</p> <p>If they can duplicate...</p> <p>Alex: Yeah too much information isn’t good.</p> <p>Some places mandate recreation like a JS Fiddle. Like Sandbox are cool tools.</p> <p>29:32 – Is there a way to do the code wrong?</p> <p>29:38 – Advertisement.</p> <p>30:25 – Guest chimes-in with his answer.</p> <p>31:31 – Question. If it’s opensource should they share?</p> <p>31:33 – Absolutely. The difference that makes it for me is great. I can spot things that the machine can help me find.</p> <p>One small tip is when you provide code samples and GitHub issues use...</p> <p>The further you go out to recreate the problem there is a high payoff because they can get something working. The big difference is that it’s a huge pain to the person trying to convey the issue. If I do the simple version...I think you have to weigh your options. What tools are out there? Generate your data structure – there are costs to recreate the issue.</p> <p>33:35 – Chris: 500 files, apps within the app – intercommunicating. All you do is download this, install this, it takes you ½ a day and how does this all work?</p> <p>34:03 – Guest: You have to rein it in.</p> <p>Provide the easiest environment for it to occur. If you are having someone download a table and import it, and use a whole stack – you can try it – but I would advise to work really hard to find...</p> <p>34:50 – In creating a demo keep it simple?</p> <p>35:52 – Guests reply.</p> <p>36:02 – Chuck.</p> <p>36:07 – Chris: I learned about your experiences coming to opensource.</p> <p>Anything else that you would like to share with new contributors?</p> <p>36:25 – Guest: Start with something that you have a genuine interest in. Something like a curiosity light bulb is on. It makes it more interesting. It’s a nice way to give back. Something that interests you. I have not found a case yet that I’m not compelled to help someone. Putting yourself out there you might be given a plate you don’t know what to do with. My learning experience is how welcoming opensource is. Maybe things are changing? </p> <p>38:31 – Chuck: I have seen those communities but generally if they are there people frown down upon it. The newer opensource communities are very friendly. These projects are trying to gain adoptions, which is for the newer users.</p> <p>39:17 – Guest: Final statements on opensource. Even if you think it is a small contribution it still helps.</p> <p>40:55 – Guest chimes-in.</p> <p>It is important to have a platter for newcomers.</p> <p>41:15 – Chris: I am curious to talk to you about how you’ve written React applications among others. Any advice? What resources should they</p> <p>41:46 – Guest: Yeah. If you are making your new React application (from Vue land) there are many things that are similar and things that are different. As for preparing yourself, I am a huge fan of this one course. I had been coding (plus school) so 5 years, it’s okay to dive-into community courses. Dive-into a tutorial. Understand the huge core differences.</p> <p>He goes into those differences between React, Angular, and Vue.</p> <p>43:30 – Guest talks about this, too.</p> <p>45:50 – React doesn’t have an official router. Vue provides (he likes <a href="https://vuejs.org">Vue’s</a> mentality) other things. There is a library called <a href="https://github.com/digitalie/one-loader">One Loader.</a></p> <p>46:50 – Guest: I was at a <a href="https://www.meetup.com">Meetup</a>. One guy was doing C-sharp and game development. His wife had a different background, and I think they were sampling Angular, Vue, and React - all these different frameworks. That was interesting to talk with them. I relayed to them that Vue has free tutorials. Jeffry had an awesome Vue Cast. I think that’s what got me started in Vue. I learned from this tool and so can you!</p> <p>48:11 – Chris: You aren’t starting from scratch if you know another framework? Do they translate well?</p> <p>48:33 – Guest: I think so.</p> <p>There are a lot of ways to translate those patterns.</p> <p>49:34 – Guest: React Rally – I just went to one.</p> <p>49:50 – Chris chimes-in.</p> <p><a href="https://vuejs.org/v2/guide/components-slots.html">Slots</a> is mentioned</p> <p>50:27 – Guest mentions the different frameworks.</p> <p>Guest: I went into functional components in Vue. I learned about the way...</p> <p>It helps you translate ideas. I don’t recommend it to everyone, but if you want to dig deep then it can help bridge the gap between one frameworks to another.</p> <p>51:24 – Chris adds to this conversation.</p> <p>51:36 – Guest: They are translatable. They are totally map-able.</p> <p>5:46 – Chuck: Say someone was going to be on a Summit where they could meet with the React Core Team. What things would you suggest with them – and say these things are working here and these are working there.</p> <p>52:12 – Guest: I would love to see...</p> <p>53:03 – React doesn’t have a reactivity system you’d have to tell it more to...</p> <p>53:15 – Guest chimes-in.</p> <p>Panel and guests go back-and-forth with this topic.</p> <p>54:16 – Tooling.</p> <p>55:38 – Guest: With React coming out with time slicing features how does that map to <a href="https://vuejs.org">Vue</a> and what can you say from one team to another. What is there to review? There is a lot of great things you can do with...</p> <p>56:44 – Conversation continues.</p> <p>57:59 – React has some partial answers to that, too.</p> <p>Progress.</p> <p>58:10 – When Vue came onto the scene everyone felt like why do we need another framework? We have <a href="https://www.emberjs.com">Ember</a>, and...</p> <p>But with Vue it felt cohesive. It had an opportunity to learn from all the other frameworks. In terms of progress everyone is on the frontlines and learning from each other. Everyone has a different view on it. How can se learn from this and...?</p> <p>59:12 – Chris: I am grateful for the different frameworks. Anyone comes out with a new tool then it’s the best. Creating something that is even better than before.</p> <p>59:38 – Guest.</p> <p>59:49 – Chuck: There are good frameworks out there why do I need another one. That’s the point. Someone will come along and say: I like what’s out there but I want to make...</p> <p>That’s what Vue was right?</p> <p>In some ways Vue was a leap forward and some ways it wasn’t – that’s how I feel.</p> <p>We need something to make things a bit easier to save 10 hours a week.</p> <p>1:01:11 – Even <a href="https://vuejs.org">Vue’s...</a></p> <p>1:02:20 – Guest: In terms of why do we need another framework conversation – I don’t think we need another reason. Go ahead, what if it is groundbreaking it makes everyone do things differently and keep up. I love the idea that<a href="https://www.javascript.com"> JavaScript</a> is saying: what is the new framework today? The tradeoff there is that there are so many different ways to do things. It is hard for beginners.</p> <p>1:03:88 – Chuck: How to find you online?</p> <p>1:03:49 – Kyle states his social media profiles, so does Alex, too.</p> <p>1:04:06 – Chuck: Let’s do some picks!</p> <p>1:04:10 – <a href="https://www.kickstarter.com/projects/521063736/codebadgeorg/faqs">Code Badges’ Advertisement</a></p> <p><strong>Links:</strong></p> <ul> <li><a href="https://www.json-generator.com">JSON Generator</a></li> <li><a href="https://www.emberjs.com">Ember.js</a></li> <li><a href="https://vuejs.org">Vue</a></li> <li><a href="https://reactjs.org">React</a></li> <li><a href="https://angular.io">Angular</a></li> <li><a href="https://www.javascript.com">JavaScript</a></li> <li><a href="https://www.udemy.com/vuejs-2-the-complete-guide/">Udemy</a></li> <li><a href="https://github.com/digitalie/one-loader">One-Loader</a></li> <li><a href="https://youtu.be/v6iR3Zk4oDY">YouTube Talk: Beyond React 16 by Dan Abramov</a></li> <li><a href="https://badgr.com">Badgr</a></li> <li><a href="https://www.kickstarter.com/projects/521063736/codebadgeorg?ref=7xl4fi&amp;token=ab55a57f">Kickstarter: CodeBadge.org</a></li> <li><a href="https://twitter.com/AlexSashaRegan">Alex Sasha Regan’s Twitter</a></li> <li><a href="https://twitter.com/kylemh_">Kyle Holmberg’s Twitter</a></li> <li><a href="https://kylemh.com">Kyle’s website</a></li> <li><a href="https://dev.to/alexsasharegan">Dev.to – Alex’s information</a></li> <li><a href="https://devchat.tv">DevChat TV</a></li> <li><a href="https://github.com">GitHub</a></li> <li><a href="https://www.meetup.com">Meetup</a></li> <li><a href="https://operationcode.org">Operation Code</a></li> </ul> <p><strong>Sponsors:</strong></p> <ul> <li><a href="https://www.telerik.com/kendo-angular-ui/?utm_medium=cpm&amp;utm_source=adventuresinng&amp;utm_campaign=dt-kendo-ang2-nov16&amp;utm_content=audio">Kendo UI</a></li> <li><a href="https://www.digitalocean.com/">Digital Ocean</a></li> <li><a href="http://codebadge.org/">Code Badge</a></li> <li><a href="https://www.cachefly.com">Cache Fly</a></li> </ul> <p><strong>Picks:</strong></p> <p>Chris</p> <ul> <li>Home decorating shows</li> </ul> <p>Charles</p> <ul> <li><a href="https://itunes.apple.com/us/app/terragenesis-space-colony/id1039841501?mt=8">TerraGenesis </a></li> <li>GetaCoderJob.com</li> <li>Swag.devchat.tv</li> <li>Codebadge.org</li> </ul> <p>Kyle</p> <ul> <li><a href="https://operationcode.org/">OperationCode</a></li> <li><a href="https://medium.com/@kylemh/yet-another-react-vs-vue-article-a47b5946f1eb">Yet Another React vs.Vue Article</a></li> <li><a href="https://hacktoberfest.digitalocean.com/">Hacktoberfest </a></li> </ul> <p>Alex</p> <ul> <li><a href="https://www.upliftdesk.com/uplift-height-adjustable-standing-desk/">Uplift Standing Desk </a></li> <li><a href="https://system76.com">System 76</a></li> <li><a href="https://www.rust-lang.org/en-US/">Rust</a></li> </ul>