Welcome back! After two weeks off I’m excited to be kicking off the new year and decade with this week’s Friday Frontend. Do you have a learning goal for this year? If so, hit reply and let me know, so I can try to find articles matching.

Three recommendations I have for great goals for the year in the front-end space are CSS Grid (particularly with subgrid coming along), JAMStack/precompiled frameworks (Gatsby, Svelte, etc), and performance. Coincidentally (hah!) several of these topics show up in articles down below. 

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

Understanding CSS Grid: Creating A Grid Container

If you haven’t already mastered CSS Grid, let 2020 be the year you do. It is *so* much more powerful than previous layout tools, and reaching very wide browser support. If you’re in this boat, this is a great article to start you out on, diving into everything that happens and what your options are when you create a grid container.


Use CSS Subgrid to layout full-width content stripes in an article template

One of the most exciting stories at the end of last year was the launch of CSS subgrids in Firefox. Even though it’s not yet in Chrome, now may be the time to start learning and experimenting, and this article gives a great example of how powerful it is as a tool. It also includes info on how to create a fallback in this case for non-supporting browsers, so there’s no reason to hold back.


How Auto Margins Work in Flexbox

Short and sweet, this is a great quick piece on using auto margins to position flex children within a flex parent. 


Understanding positioning in CSS

Great deep dive with wonderful graphics to understand the position property in CSS, how it influences an element and that element’s relationships to other things on the page. Also includes links off to plenty of docs for deeper dives (including all relevant specs). Excellent! 


3 underused CSS features to learn for 2020

All of these are good, but really feature number 2 would have made it worth it for me. Attribute selectors in CSS are incredibly cool when building systems and frameworks; it’s not clear to me how valuable they are for apps, but I love that the author is highlighting them and I highly recommend digging in deeper.


JavaScript

A Year of React - 2019 in Review

Nice review of all of the things that went on over in React land this last year. Not only in the core framework, but big ecosystem projects and events as well. If you’re in this space, you should definitely check out this roundup to make sure there isn’t anything you’ve missed.


Octane is Here

Big update to Ember.js, which I think is worth reading even if you (like most of us) don’t use Ember. The reason is they introduce some new concepts or twists on concepts that I wouldn’t be surprised to see show up in other parts of the front-end ecosystem. The big one that stands out to me is the concept of “modifiers”, which look a lot like Higher Order Components but can apparently be applied to any DOM element, not just components. Very cool!


An Overview of Vue Keep-Alive

I haven’t used this feature, but it looks super useful particularly for multipart forms. Essentially, when using dynamic components (components that swap between rendering different components based on some condition), there are situations where you want to keep the old one around rather than destroying it and re-instantiating it. Keep-alive lets you do this.


11+ JavaScript Features You’ve Probably Never Used

Some pretty interesting stuff in here, though the “you’ve probably never used” could probably be translated to “you’ve probably never needed”. Certainly ignore #3 (with operator) which has been deprecated, but otherwise these are pretty interesting if you enjoy poking around language edge cases.


NaN in JavaScript

Following along in the theme of edge cases, this is a deep dive into JavaScript’s NaN value, one of two special values of type Number. (Does anyone else find it amusing that the value that means “Not A Number” evaluates typeof NaN to be true?)


Other Awesomeness

Front-End Performance Checklist 2020 [PDF, Apple Pages, MS Word]

Wow, this is massive, and filled with information about performance optimization techniques at every layer of the front-end: assets, build, delivery, application code… SO much in here. I can’t wait to dig through in more detail.


Loading web pages fast on a $20 feature phone

Taking the performance techniques mentioned above (and possible some additional ones) and working through applying them with the real-life lens of a feature-phone; devices used by hundreds of millions around the world. Very very cool article!


Move Fast & Don’t Break Things

Wonderful long-form piece taking a conference talk and translating it to written form, dives deep into progressive enhancement, responsible web development, and performance.


Microbrowsers are Everywhere

Interesting look at the tools used to generate previews of webpages in applications like Facebook, Slack, and WhatsApp. If you want your website shared, you probably should start thinking about how these work.


New Year's Party! 🎉(Audio) 

(Bias alert - I’m one of the panelists in this show) The JSParty team rings in the new year with their 2020 predictions, wish lists, & resolutions. Will Chrome’s browser market share decrease? Will Svelte (or a Svelte-alike) continue to trend? Will Jerod finally write some TypeScript?! All this and more.