JSJ 352: Caffeinated Style Sheets: Supporting High Level CSS with JavaScript with Tommy Hodgins

JavaScript Jabber

Episode | Podcast

Date: Tue, 19 Feb 2019 04:00:00 +0000

<div class="trix-content"> <div><strong>Sponsors</strong></div><ul> <li> <a href="http://sentry.io/">Sentry</a>- use the code “devchat” for $100 credit</li> <li><a href="https://www.netlify.com/">Netlify</a></li> <li><a href="https://clubhouse.io/jsjabber"><strong>Clubhouse</strong></a></li> <li><a href="https://www.cachefly.com/">CacheFly</a></li> </ul><div> </div><div><strong>Episode Summary   </strong></div><div>In this episode of JavaScript Jabber, the panelists talk with Tommy Hodgins who specializes in responsive web design. He starts with explaining to listeners what it means by a responsive web layout and goes on to discuss the techniques in using JavaScript in CSS in depth.</div><div>He elaborates on dynamic styling of components, event-driven stylesheet templating, performance and timing characteristics of these techniques and describes different kinds of observers – interception, resize and mutation, and their support for various browsers. He also talks about how to go about enabling certain features by extending CSS, comparison to tools such as the CSS preprocessor and Media Queries, pros and cons of having this approach while citing relevant examples, exciting new features coming up in CSS, ways of testing the methods, caffeinated stylesheets, along with Qaffeine and Deqaf tools.</div><div><strong>Links</strong></div><ul> <li> <a href="https://www.npmjs.com/package/jsincss">JS in CSS</a> – Event driven virtual stylesheet manager</li> <li><a href="https://github.com/tomhodgins/qaffeine">Qaffiene</a></li> <li><a href="https://github.com/tomhodgins/deqaf">Deqaf</a></li> <li><a href="https://twitter.com/innovati?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">Tommy’s Twitter</a></li> <li><a href="http://staticresource.com/fizzbuzz.html">Fizzbuzz</a></li> </ul><div> </div><div><strong>Picks</strong></div><div><strong>Joe</strong></div><ul><li><a href="https://boardgamegeek.com/boardgame/159503/captain-dead">The Captain Is Dead</a></li></ul><div><strong>Aimee</strong></div><ul> <li><a href="https://henrikwarne.com/2018/12/03/developer-on-call/">Developer on Call</a></li> <li>Tip – Try to follow a low-sugar diet</li> </ul><div><strong>Chris</strong></div><ul> <li><a href="https://twitter.com/innovati/status/1068998114491678720">Tommy’s snippets on Twitter – JS in CSS</a></li> <li><a href="https://bitsofco.de/">All things frontend blog</a></li> <li><a href="https://github.com/cferdinandi/gulp-boilerplate">Gulp project</a></li> </ul><div><strong>Charles</strong></div><ul><li><a href="https://github.com/cmaxw/devchat-eleventy">Coaching by Charles in exchange of writing Show Notes or Tags</a></li></ul><div><strong>Tommy</strong></div><ul><li><a href="https://www.npmjs.com/package/jsincss">JS in CSS</a></li></ul><div>Special Guest: Tommy Hodgins.</div> </div> Support this podcast at — https://redcircle.com/javascript-jabber/donations Advertising Inquiries: https://redcircle.com/brands Privacy & Opt-Out: https://redcircle.com/privacy