Friday Frontend: Next Next (js) plus Nuxt Edition
Hope your week has been great! Lots of interesting stuff this week, but in particular want to highlight the articles about Next.js and Nuxt.js, 2 higher level frameworks on top of React and Vue respectively.
Happy Friday! Enjoy!
KBall from ZenDev
CSS & SCSS
This is pretty neat - a themable CSS library for highlighting the semantic structure of an HTML document. Also a bookmarklet that you can use to disable current CSS and throw this in place. I can see this as being extremely useful for debugging/highlighting accessibility issues, as well as just a useful learning tool.
Using SVG with Media Queries
Using media queries with SVG lets you do something kind of amazing - create responsive images. Images that not only resize perfectly (SVGs are vector images) as you scale up and down, but actually change which features are visible based on their size. I love it!
Refresh CSS Bookmarklet v2
Super simple bookmarklet for refreshing just the stylesheets on a current page. Ie for development when not working in an auto-refreshing environment. I do most of my dev work with webpack-based autorefreshing systems where this isn’t a thing, but when I’m working on my site (which uses Jekyll) I don’t, and this is a much nicer flow than doing the entire page refresh.
How to Use 2D Transformation Functions in CSS
Great overview of all the different transformation functions available in CSS. Translation, rotation, skewing, you name it and it’s in there. Even goes in a little bit to the fun of matrix transforms.
Flexbox: How Big Is That Flexible Box?
Rachel Andrew and Smashing Magazine are really doing amazing work on explaining the underlying “how” of various CSS features. This article dives into the sizing algorithms behind flexbox, explaining how browsers figure out what size to make flexbox elements.
7 Frontend Architecture Lessons From Nuxt.js
(Bias alert - I wrote this). One of the big things I heard from y’all in the survey I sent a few weeks back was an interest in more resources on front-end architecture. This post is one of the first in many that I’ll be doing attempting to fill that need - a look into the architectural choices taken by the Nuxt.js framework, and what the benefits of those choices are.
While Nuxt.js (above) is for Vue, the original inspiration of Next.js (SSR framework for React) has just hit another milestone. I like the way frameworks are continuing to standardize on super simple code-spitting via dynamic imports. That and a bunch of other good if incremental updates in this release.
In an ecosystem as complex and fast-moving as the frontend world is, one of the hardest things is deciding what libraries and tools to learn about and use. This article does a great job of laying out 12 different criteria to use when making a decision.
Interviews from JSConf
Color Cycling with Workers
This is a really interesting step by step story of attempting to create some animations in a canvas tag (via pixel shifting), running into performance challenges, and offloading the computation to a background thread via a service worker. I do wonder how much of the effect could have been achieved with SVG filters at lower performance cost though.
Aspect Ratio Media Elements and intrinsicsize
Overview of a proposal for a native way to deal with aspect ratios in media elements like images. Definitely something we need, and looks like it’s now under development in Chrome. Cool!
What makes a good front-end developer?
Chris Coyier of CSS Tricks poses the question and gathers answers from a number of luminaries in our field. I love that the word empathy comes up multiple times - this is something that I think is key to any development role, but especially front-end, and I’m glad to see it being highlighted.
HTML elements, unite! The Voltron-like powers of combining elements.
As someone who started off way deep in the backend and has gradually worked my way front, I keep coming across interesting holes in my knowledge that someone who started out focused on the front-end might not have. Like some of these super cool semantic HTML elements. There’s an element specifically to represent text for a keyboard input? Neat!
Explore the immersive web with Firefox Reality. Now available for Viveport, Oculus, and Daydream
This is pretty interesting - a web browser designed specifically for virtual and augmented reality headsets. This feels like still very much an untapped domain, with some interesting experiments and games out there but really a lot of people still trying to figure out how VR is going to work and what the killer applications will be. Having this as an in-experience discovery path may help speed that exploration process out.