Charles M Wood

Vzdělání

Byznys

Jak na to

Technika

JSJ 378: Stencil and Design Systems with Josh Thomas and Mike Hartington

JavaScript Jabber

Stay current on JavaScript, Node, and Front-End development. Learn from experts in programming, careers, and technology every week. Become a supporter of this podcast: <a href="https://www.spreaker.com/podcast/javascript-jabber--6102064/support?utm_source=rss&utm_medium=rss&utm_campaign=rss">https://www.spreaker.com/podcast/javascript-jabber--6102064/support</a>.

Sponsors<ul><li><a href="https://dtdg.co/javascriptjabber" target="_blank" rel="noreferrer noopener">Datadog</a></li><li><a href="https://sentry.io/" target="_blank" rel="noreferrer noopener">Sentry</a> use code “devchat” for 2 months free </li></ul>Panel<ul><li>Aimee Knight</li><li>Chris Ferdinandi</li><li>Joe Eames</li><li>AJ O’Neal</li><li>Charles Max Wood</li></ul>With Special Guests: Josh Thomas and Mike HartingtonEpisode SummaryToday’s guests Josh Thomas and Mike Hartington are developers for Ionic, with Josh working on the open source part of the framework on Ionic. They talk about their new compiler for web components called Stencil. Stencil was originally created out of work they did for Ionic 4 (now available for Vue, React, and Angular) and making Ionic 4 able to compliment all the different frameworks. They talk about their decision to build their own compiler and why they decided to open source it. Now, a lot of companies are looking into using Stencil to build design systemsThe panel discusses when design systems should be implemented. Since Ionic is a component library that people can pull from and use themselves, Jeff and Mike talk about how they are using Stencil since they’re not creating a design system. The panel discusses some of the drawbacks of web components. They discuss whether or not Cordova changes the game at all. One of the big advantages of using Stencil is the code that is delivered to a browser is generated in such a way that a lot of things are handled for you, unlike in other systems.The panelists talk about their thoughts on web components and the benefits of using a component versus creating a widget the old fashioned way. One such benefit of web components is that you can change the internals of how it works without affecting the API. Josh and Mike talk about some of the abilities of Stencil and compare it to other things like Tachyons. There is a short discussion of the line between frameworks and components and the dangers of pre optimization. If you would like to learn more about Stencil, go to <a href="https://stenciljs.com/" target="_blank" rel="noreferrer noopener">stenciljs.com</a> and follow Josh and Mike @Jtoms1 and @mhartington. <a href="https://noonies.hackernoon.com/award/cjxrat2ogn51d0b429e2zwy52" target="_blank" rel="noreferrer noopener">Click here to cast your vote NOW for JavaScript Jabber - Best Dev Podcast Award</a>Links<ul><li><a href="https://www.amazon.com/Building-Design-Systems-Experiences-Language/dp/148424513X" target="_blank" rel="noreferrer noopener">Building Design Systems</a> book </li><li><a href="https://stenciljs.com/" target="_blank" rel="noreferrer noopener">Stencil</a></li><li><a href="https://cordova.apache.org/" target="_blank" rel="noreferrer noopener">Cordova</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noreferrer noopener">Shadow DOM</a></li><li><a href="https://tachyons.io/" target="_blank" rel="noreferrer noopener">Tachyons </a></li><li><a href="https://ionicframework.com/blog/introducing-ionic-4-ionic-for-everyone/" target="_blank" rel="noreferrer noopener">Ionic 4</a></li></ul> Follow DevChat on <a href="https://www.facebook.com/DevChattv/?__tn__=%2Cd%2CP-R&eid=ARDBDrBnK71PDmx_8gE_IeIEo5SnM7cyzylVBjAwfaOo1ck_6q3GXuRBfaUQZaWVvFGyEVjrhDwnS_tV" target="_blank" rel="noreferrer noopener">Facebook</a> and <a href="https://twitter.com/devchattv?lang=en" target="_blank" rel="noreferrer noopener">Twitter</a> PicksAimee Knight:<ul><li><a href="https://jvns.ca/blog/2019/06/23/a-few-debugging-resources/" target="_blank" rel="noreferrer noopener">What Does Debugging a Program Look Like?</a></li></ul>AJ O’Neal:<ul><li><a href="https://www.nintendo.com/games/detail/the-legend-of-zelda-links-awakening-switch/" target="_blank" rel="noreferrer noopener">Legend of Zelda: Link’s Awakening</a></li><li><a href="https://amzn.to/2FyZBjH?ie=UTF8&language=en_US&linkCode=ll1&linkId=f06bfe7482dca8bb751ed6d7cc86e2ab&qid=1548462018&sr=8-1&tag=devchattv-20" target="_blank" rel="noreferrer noopener">Neon Genesis Evangelion soundtrack</a></li><li><a href="https://prettier.io/" target="_blank" rel="noreferrer noopener">Prettier</a></li></ul>Chris Ferdinandi:<ul><li><a href="https://www.amazon.com/Amazon-Kindle-Ereader-Family/b/?ie=UTF8&language=en_US&linkCode=ll1&linkId=f06bfe7482dca8bb751ed6d7cc86e2ab&qid=1548462018&sr=8-1&tag=devchattv-20" target="_blank" rel="noreferrer noopener">Kindle Paperwhite</a></li><li><a href="https://ofone.co/" target="_blank" rel="noreferrer noopener">Company of One</a></li></ul>Charles Max Wood:<ul><li>Ladders with feet</li><li><a href="https://developers.google.com/web/tools/lighthouse/" target="_blank" rel="noreferrer noopener">Lighthouse</a></li><li><a href="https://www.acorns.com/chrome-extension/" target="_blank" rel="noreferrer noopener">Acorns</a></li></ul>Joe Eames:<ul><li><a href="https://momentjs.com/" target="_blank" rel="noreferrer noopener">Moment.js</a></li><li><a href="https://css-tricks.com/how-to-increase-your-page-size-by-1500-with-webpack-and-vue/" target="_blank" rel="noreferrer noopener">How To Increase Your Page Size by 1500% article</a></li><li><a href="https://www.npmjs.com/package/dayjs" target="_blank" rel="noreferrer noopener">Day.js</a></li></ul>Josh Thomas:<ul><li><a href="https://www.imdb.com/title/tt1979376/" target="_blank" rel="noreferrer noopener">Toy Story 4</a></li></ul>Mike Hartington:<ul><li><a href="http://www.buildingdesignsystems.design" target="_blank" rel="noreferrer noopener">Building Design Systems</a></li><li><a href="https://youmightnotneed.com/momentjs/" target="_blank" rel="noreferrer noopener">Youmightnotneed.com</a></li></ul>Special Guests: Josh Thomas and Mike Hartington. Support this podcast at — <a href="https://redcircle.com/javascript-jabber/donations" target="_blank" rel="noreferrer noopener">https://redcircle.com/javascript-jabber/donations</a> Privacy & Opt-Out: <a href="https://redcircle.com/privacy" target="_blank" rel="noreferrer noopener">https://redcircle.com/privacy</a> Become a supporter of this podcast: <a href="https://www.spreaker.com/podcast/javascript-jabber--6102064/support?utm_source=rss&utm_medium=rss&utm_campaign=rss">https://www.spreaker.com/podcast/javascript-jabber--6102064/support</a>.

Sponsors<ul><li><a href="https://dtdg.co/javascriptjabber" target="_blank" rel="noreferrer noopener">Datadog</a></li><li><a href="https://sentry.io/" target="_blank" rel="noreferrer noopener">Sentry</a> use code “devchat” for 2 months free </li></ul>Panel<ul><li>Aimee Knight</li><li>Chris Ferdinandi</li><li>Joe Eames</li><li>AJ O’Neal</li><li>Charles Max Wood</li></ul>With Special Guests: Josh Thomas and Mike HartingtonEpisode SummaryToday’s guests Josh Thomas and Mike Hartington are developers for Ionic, with Josh working on the open source part of the framework on Ionic. They talk about their new compiler for web components called Stencil. Stencil was originally created out of work they did for Ionic 4 (now available for Vue, React, and Angular) and making Ionic 4 able to compliment all the different frameworks. They talk about their decision to build their own compiler and why they decided to open source it. Now, a lot of companies are looking into using Stencil to build design systemsThe panel discusses when design systems should be implemented. Since Ionic is a component library that people can pull from and use themselves, Jeff and Mike talk about how they are using Stencil since they’re not creating a design system. The panel discusses some of the drawbacks of web components. They discuss whether or not Cordova changes the game at all. One of the big advantages of using Stencil is the code that is delivered to a browser is generated in such a way that a lot of things are handled for you, unlike in other systems.The panelists talk about their thoughts on web components and the benefits of using a component versus creating a widget the old fashioned way. One such benefit of web components is that you can change the internals of how it works without affecting the API. Josh and Mike talk about some of the abilities of Stencil and compare it to other things like Tachyons. There is a short discussion of the line between frameworks and components and the dangers of pre optimization. If you would like to learn more about Stencil, go to <a href="https://stenciljs.com/" target="_blank" rel="noreferrer noopener">stenciljs.com</a> and follow Josh and Mike @Jtoms1 and @mhartington. <a href="https://noonies.hackernoon.com/award/cjxrat2ogn51d0b429e2zwy52" target="_blank" rel="noreferrer noopener">Click here to cast your vote NOW for JavaScript Jabber - Best Dev Podcast Award</a>Links<ul><li><a href="https://www.amazon.com/Building-Design-Systems-Experiences-Language/dp/148424513X" target="_blank" rel="noreferrer noopener">Building Design Systems</a> book </li><li><a href="https://stenciljs.com/" target="_blank" rel="noreferrer noopener">Stencil</a></li><li><a href="https://cordova.apache.org/" target="_blank" rel="noreferrer noopener">Cordova</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noreferrer noopener">Shadow DOM</a></li><li><a href="https://tachyons.io/" target="_blank" rel="noreferrer noopener">Tachyons </a></li><li><a href="https://ionicframework.com/blog/introducing-ionic-4-ionic-for-everyone/" target="_blank" rel="noreferrer noopener">Ionic 4</a></li></ul> Follow DevChat on <a href="https://www.facebook.com/DevChattv/?__tn__=%2Cd%2CP-R&eid=ARDBDrBnK71PDmx_8gE_IeIEo5SnM7cyzylVBjAwfaOo1ck_6q3GXuRBfaUQZaWVvFGyEVjrhDwnS_tV" target="_blank" rel="noreferrer noopener">Facebook</a> and <a href="https://twitter.com/devchattv?lang=en" target="_blank" rel="noreferrer noopener">Twitter</a> PicksAimee Knight:<ul><li><a href="https://jvns.ca/blog/2019/06/23/a-few-debugging-resources/" target="_blank" rel="noreferrer noopener">What Does Debugging a Program Look Like?</a></li></ul>AJ O’Neal:<ul><li><a href="https://www.nintendo.com/games/detail/the-legend-of-zelda-links-awakening-switch/" target="_blank" rel="noreferrer noopener">Legend of Zelda: Link’s Awakening</a></li><li><a href="https://amzn.to/2FyZBjH?ie=UTF8&language=en_US&linkCode=ll1&linkId=f06bfe7482dca8bb751ed6d7cc86e2ab&qid=1548462018&sr=8-1&tag=devchattv-20" target="_blank" rel="noreferrer noopener">Neon Genesis Evangelion soundtrack</a></li><li><a href="https://prettier.io/" target="_blank" rel="noreferrer noopener">Prettier</a></li></ul>Chris Ferdinandi:<ul><li><a href="https://www.amazon.com/Amazon-Kindle-Ereader-Family/b/?ie=UTF8&language=en_US&linkCode=ll1&linkId=f06bfe7482dca8bb751ed6d7cc86e2ab&qid=1548462018&sr=8-1&tag=devchattv-20" target="_blank" rel="noreferrer noopener">Kindle Paperwhite</a></li><li><a href="https://ofone.co/" target="_blank" rel="noreferrer noopener">Company of One</a></li></ul>Charles Max Wood:<ul><li>Ladders with feet</li><li><a href="https://developers.google.com/web/tools/lighthouse/" target="_blank" rel="noreferrer noopener">Lighthouse</a></li><li><a href="https://www.acorns.com/chrome-extension/" target="_blank" rel="noreferrer noopener">Acorns</a></li></ul>Joe Eames:<ul><li><a href="https://momentjs.com/" target="_blank" rel="noreferrer noopener">Moment.js</a></li><li><a href="https://css-tricks.com/how-to-increase-your-page-size-by-1500-with-webpack-and-vue/" target="_blank" rel="noreferrer noopener">How To Increase Your Page Size by 1500% article</a></li><li><a href="https://www.npmjs.com/package/dayjs" target="_blank" rel="noreferrer noopener">Day.js</a></li></ul>Josh Thomas:<ul><li><a href="https://www.imdb.com/title/tt1979376/" target="_blank" rel="noreferrer noopener">Toy Story 4</a></li></ul>Mike Hartington:<ul><li><a href="http://www.buildingdesignsystems.design" target="_blank" rel="noreferrer noopener">Building Design Systems</a></li><li><a href="https://youmightnotneed.com/momentjs/" target="_blank" rel="noreferrer noopener">Youmightnotneed.com</a></li></ul>Special Guests: Josh Thomas and Mike Hartington. Support this podcast at — <a href="https://redcircle.com/javascript-jabber/donations" target="_blank" rel="noreferrer noopener">https://redcircle.com/javascript-jabber/donations</a> Privacy & Opt-Out: <a href="https://redcircle.com/privacy" target="_blank" rel="noreferrer noopener">https://redcircle.com/privacy</a> Become a supporter of this podcast: <a href="https://www.spreaker.com/podcast/javascript-jabber--6102064/support?utm_source=rss&utm_medium=rss&utm_campaign=rss">https://www.spreaker.com/podcast/javascript-jabber--6102064/support</a>.

Aplikace Youradio Talk

JSJ 378: Stencil and Design Systems with Josh Thomas and Mike Hartington

Poslechněte si podcast