Date: Wed, 11 Apr 2018 14:07:00 +0000
<p>Topics include:</p><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><p>Sponsors:</p><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><p>Links:</p><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>