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
The CSS Grid Layout vs CSS Frameworks Debate
“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.
A Deeper Look at Generic Font Names in CSS
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
A polyfill for the CSS Paint API, with special browser optimizations.
How to create a simple CSS loading spinner & make it accessible
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.
Add `v-model` Support to Custom Vue.js Component
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.
First Look: Angular Ivy
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.
How React Reconciliation Works
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.
The Slow Death of Internet Explorer and the Future of Progressive Enhancement
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...
Managing SVG Interaction With The Pointer Events Property
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.
ReasonML vs TypeScript – First impressions
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