VoV 047: Games & Other Novel Uses for Vue with Kevin Drum




Views on Vue show

Summary: <h2><strong>Sponsors:</strong></h2> <ul> <li><a href="https://www.telerik.com/kendo-ui?utm_medium=social-paid&amp;utm_source=devchattv&amp;utm_campaign=kendo-ui-awareness-jsjabber">KendoUI</a></li> <li> <a href="http://sentry.io">Sentry</a> use the code "devchat" for $100 credit</li> <li><a href="https://triplebyte.com/vue">TripleByte</a></li> </ul> <p><strong>Panel: </strong></p> <ul> <li>Chris Fritz</li> <li>Divya Sasidharan</li> <li>Erik Hatchett</li> <li>Charles Max Wood</li> </ul> <p><strong>Special Guest:</strong> Kevin Drum</p> <p><strong>Notes:</strong></p> <p>This episode features special guest Kevin Drum from Virginia. Kevin is a remote developer for Asteris, a company supplying tech to veterinarians based out of Colorado. Kevin works daily on a Vue app called Keystone Omni which provides imaging solutions for veterinarians, but was invited on the show because he made a <a href="https://github.com/kevinlee...">blackjack</a> game with Vue.</p> <p>The panel discusses his inspiration for making a game with Vue, since Vue is most often used to manage data. Kevin details the technologies he used to create his game, including GreenSock and the influence of Vue X on the design of his app. He discusses some of the bugs he encountered while creating his game. Kevin talks about designing the interface with Figma and the caution that should be taken when adding sound effects to a game. He discusses his decision to use Canvas and WebGL, as well as other technologies like Vue Babylon JS.</p> <p>The panelists talk about shaders, an algorithm that will manipulate shapes, and the difficulties with using them. They talk about how to get started making your own game. Kevin advises listeners to first focus on the logic of the game and then on the aesthetics, encouraging a “make it work first, then make it pretty later” approach. They also encourage listeners to play around with Vue by making a demo app first to practice changing all the different properties of the elements. The panelists talk about other uses for Vue in games and if there are benefits to writing a game loop outside of Vue. Chris highlights the <a href="https://twitter.com/search?q=%23vuenicorn&amp;src=typd">#vuenicorn</a> contest that was hosted on twitter.</p> <p><strong>Terms:</strong></p> <ul> <li><a href="https://github.com/CanvasPod/Canvas">Canvas</a></li> <li><a href="https://www.w3schools.com/js/js_htmldom_elements.asp">Dom elements</a></li> <li><a href="https://www.w3schools.com/graphics/svg_intro.asp">SVG</a></li> <li><a href="https://www.w3schools.com/css/">CSS</a></li> <li><a href="https://greensock.com/">GreenSock</a></li> <li><a href="https://github.com/gpjt/webgl-lessons">webGL</a></li> <li><a href="https://nodejs.org/">Node</a></li> <li><a href="https://github.com/vuejs/vuex">VueX</a></li> <li><a href="https://www.figma.com/">Figma </a></li> <li><a href="https://tonejs.github.io/">Tone JS </a></li> <li><a href="https://github.com/Beg-in/vue-babylonjs">Vue Babylon JS</a></li> <li><a href="https://unity.com/">Unity</a></li> <li><a href="https://github.com/NativeScript/NativeScript">Native</a></li> <li><a href="https://electronjs.org/">Electron</a></li> <li><a href="https://github.com/apache/cordova-js">Cordova</a></li> <li><a href="https://github.com/ionic-team/capacitor">Capacitor</a></li> <li><a href="http://shadersmods.com/category/popular-shaders/">Shaders</a></li> <li><a href="https://github.com/photonstorm/phaser">Phaser</a></li> <li><a href="https://github.com/WebAudio/web-audio-api">Web audio API</a></li> </ul> <p><strong>Picks:</strong></p> <p>Chris:</p> <ul> <li><a href="http://www.cross-code.com/">CrossCode</a></li> <li><a href="https://us.vuejs.org/workshops/">Vue Conf US Workshops</a></li> </ul> <p>Erik:</p> <ul> <li> <a href="https://dev.to/heftyhead/lets-talk-about-an-unnecessary-but-popular-vue-plugin-1ied">Let's talk about an unnecessary but popular Vue plugin</a> article</li> </ul> <p>Charles:</p> <ul> <li><a href="https://mckirdytrained.com/">McKirdy Trained Running Coaches</a></li> <li><a href="https://explore.garmin.com/en-US/forerunner/">Garmin Foreunner Watch</a></li> </ul> <p>Kevin:</p> <ul> <li><a href="https://refactoringui.com/book/">Refactoring UI</a></li> <li><a href="https://www.amazon.com/Game-Programming-Patterns-Robert-Nystrom/dp/0990582906/ref=sr_1_1?ie=UTF8&amp;qid=1548462018&amp;sr=8-1&amp;linkCode=ll1&amp;tag=devchattv-20&amp;linkId=f06bfe7482dca8bb751ed6d7cc86e2ab&amp;language=en_US">Game Programming Patterns</a></li> </ul>