Friday Frontend: Frontend Inspiration Edition
I’m trying something new today - recording a quick video to go with the newsletter. It’s just a quick 2 minutes about what got me excited this week in the Frontend world. Check it out, and let me know what you think, either by hitting REPLY or even better leaving a comment on the video.
KBall from ZenDev
CSS & SCSS
“Does it still make sense to learn/use CSS Frameworks now that we have CSS Grid and Flexbox?” This article dives into this common question and does a good job of breaking down some of the reasons why it absolutely still makes sense to learn and use a CSS Framework. Personal opinion - I think the next iteration on CSS Frameworks is going to take advantage of the power of CSS Grid to make grids less structural and more component-like, giving you super-rapid access to a range of best practice patterns.
What’s actually going on when you specify
font-family: Arial, Helvetica, sans-serif; in your CSS? What are the range of available generic fonts like that
sans-serif? How do browsers decide what to show for a generic? If you’ve ever asked questions like these this article will help you out. Plus, check out the new up-and-coming font families like
I’m in the old guard that’s always used gif-based spinners, and I somehow hadn’t connected the dots that CSS animations are supported broadly enough now to enable pure CSS-based spinners. This is really nice! A step by step guide to creating a reusable scss mixin that is also accessible.
Adding v-model support is a key part of creating components that “feel” like native Vue components and are easy for other folks to pick up and use out of the box. Even if you’re not building components to share, understanding how v-model works under the covers will help you write better Vue code.
I don’t personally follow Angular as closely as I do React and Vue, but there’s some interesting stuff going on here with this new renderer called Ivy. The ability to compile ahead of time and only ship exactly the parts of the framework that are needed for any particular app is pretty darned cool. This article is a great introduction to the new renderer, for those more familiar with Angular there are also a great pair of posts on the Angular in Depth blog.
An excellent dive into the guts of how React’s virtual DOM implementation actually works. This article will help you write more performance React code, and debug when things aren’t working quite how you like. Bonus: Vue’s virtual DOM implementation is pretty similar, so the concepts you learn here should help you if you’re using Vue as well.
We are slowly growing towards a future of entirely evergreen browsers, and more and more companies are completely cutting support for Internet Explorer. That said, I kinda love the idea of serving up websites without CSS and JS completely for users in old versions of IE. Would your site still work like that? Would users still be able to read your content? Worth considering...
SVG! As longtime readers know, I loooooove SVG. This article goes through in great detail how to use the ‘pointer-events’ attribute to manage which parts of an SVG document or element can receive events from a pointing device such as a mouse, trackpad, or finger.
I’ve had ReasonML come up in conversations a couple of times recently, and hadn’t really looked into it yet, but this article has changed that. It looks like a really sweet language, particularly for those who like functional programming! The native function currying, immutability, and pipe operator are enough to sell me… it looks like it’s simple to interoperate with JS packages too… now I just need a project to try it on. :D