Adam Wathan

Technika

86: Jonathan Reinink - Rebuilding a SaaS with Vue.js and Tailwind CSS

Full Stack Radio

A podcast for developers interested in building great software products. Every episode, Adam Wathan is joined by a guest to talk about everything from product design and user experience to unit testing and system administration.

Topics include:<ul>
<li>Wrapping non-Vue libraries as Vue components to maintain a consistent paradigm</li>
<li>Using Popper.js with Vue to build dropdowns and tooltips</li>
<li>Using portals to build better modal components</li>
<li>Patterns for making it easier to reuse components throughout an application</li>
<li>Which Tailwind CSS component classes Jonathan chose to extract (and which ones he didn't)</li>
<li>How Jonathan chose to customize his Tailwind configuration for his project</li>
<li>Using Tailwind's advanced screen options to better accommodate a sidebar layout</li>
<li>How Jonathan is using Purgecss to reduce his CSS from 110,000 lines of code 1.7mb in development to 8.8kb in production</li>
</ul>Sponsors:<ul>
<li>
<a href="https://codeship.com">Codeship</a>, check out how they performed in <a href="https://codeship.com/forrester-wave-continuous-integration-report">Forrester's latest Continuous Integration Tools report</a>
</li>
<li>
<a href="https://rollbar.com/fullstackradio">Rollbar</a>, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 days</li>
</ul>Links:<ul>
<li>
<a href="https://adamwathan.me/advanced-vue-component-design/">Advanced Vue Component Design</a>, Adam's upcoming course</li>
<li>
<a href="https://www.youtube.com/watch?v=jR3R_m5FPRc">"Building a Sortable Component with Vue.js"</a>, replay from Adam's recent live stream</li>
<li><a href="https://vuejs.org/">Vue.js</a></li>
<li><a href="https://tailwindcss.com/">Tailwind CSS</a></li>
<li><a href="https://github.com/turbolinks/turbolinks">Turbolinks</a></li>
<li>
<a href="https://popper.js.org/">Popper.js</a> positioning library</li>
<li>
<a href="https://github.com/dbushell/Pikaday">Pikaday</a> date picker library</li>
<li><a href="https://vuejs.org/v2/api/#Vue-nextTick">Vue.nextTick()</a></li>
<li>
<a href="https://github.com/LinusBorg/portal-vue">PortalVue</a>, library for rendering elements outside of their parent component</li>
<li><a href="https://reactjs.org/docs/portals.html">Portals in React</a></li>
<li><a href="https://github.com/FullHuman/purgecss">Purgecss</a></li>
</ul>

Topics include:<ul><li>Wrapping non-Vue libraries as Vue components to maintain a consistent paradigm</li><li>Using Popper.js with Vue to build dropdowns and tooltips</li><li>Using portals to build better modal components</li><li>Patterns for making it easier to reuse components throughout an application</li><li>Which Tailwind CSS component classes Jonathan chose to extract (and which ones he didn't)</li><li>How Jonathan chose to customize his Tailwind configuration for his project</li><li>Using Tailwind's advanced screen options to better accommodate a sidebar layout</li><li>How Jonathan is using Purgecss to reduce his CSS from 110,000 lines of code 1.7mb in development to 8.8kb in production</li></ul>Sponsors:<ul><li><a href="https://codeship.com">Codeship</a>, check out how they performed in <a href="https://codeship.com/forrester-wave-continuous-integration-report">Forrester's latest Continuous Integration Tools report</a></li><li><a href="https://rollbar.com/fullstackradio">Rollbar</a>, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 days</li></ul>Links:<ul><li><a href="https://adamwathan.me/advanced-vue-component-design/">Advanced Vue Component Design</a>, Adam's upcoming course</li><li><a href="https://www.youtube.com/watch?v=jR3R_m5FPRc">"Building a Sortable Component with Vue.js"</a>, replay from Adam's recent live stream</li><li><a href="https://vuejs.org/">Vue.js</a></li><li><a href="https://tailwindcss.com/">Tailwind CSS</a></li><li><a href="https://github.com/turbolinks/turbolinks">Turbolinks</a></li><li><a href="https://popper.js.org/">Popper.js</a> positioning library</li><li><a href="https://github.com/dbushell/Pikaday">Pikaday</a> date picker library</li><li><a href="https://vuejs.org/v2/api/#Vue-nextTick">Vue.nextTick()</a></li><li><a href="https://github.com/LinusBorg/portal-vue">PortalVue</a>, library for rendering elements outside of their parent component</li><li><a href="https://reactjs.org/docs/portals.html">Portals in React</a></li><li><a href="https://github.com/FullHuman/purgecss">Purgecss</a></li></ul>

Aplikace Youradio Talk

86: Jonathan Reinink - Rebuilding a SaaS with Vue.js and Tailwind CSS

Poslechněte si podcast