Friday Frontend: 2020 Kickoff Edition
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.
KBall from ZenDev
CSS & SCSS
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.
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.
Short and sweet, this is a great quick piece on using auto margins to position flex children within a flex parent.
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!
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.
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.
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!
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.
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.
typeof NaN to be
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.
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!
Wonderful long-form piece taking a conference talk and translating it to written form, dives deep into progressive enhancement, responsible web development, and performance.
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.
(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.