ZenDev - Friday Frontend: July 10 Edition

Hey there,

Hope you had a great week! I’m enjoying a few weeks of relative care-free summer before we have to deal with school for the kids again. Funny how COVID-19 has taken that from sounding like a relief to something we’re stressed about and dreading. Sigh.

Anyway, on to the content! I think my favorite article this week is the one on the Cicada Principle, but also super excited about Nuxt.js incremental static generation. Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

Three CSS Alternatives to JavaScript Navigation

Fun little investigation into JavaScript-free alternatives to the hamburger menu for mobile navigation. I feel mixed about them, but it is a great reminder of how JavaScript creeps into everything. And especially for low end mobile phones where saving every byte & cpu-second can help, tricks like these seem look good alternatives to have in mind.

The Cicada Principle, revisited with CSS variables

This is a really neat technique! Using prime numbers in nth-of-type selectors to create background patterns with illusions of organic randomness. 

The Power of Responsive Suffixes in Class Names

This is a technique I used a lot when working with ZURB Foundation and complex responsive grids, and found it to be super useful. These days I’m stuck more in CSS-in-JS land so I don’t use it as much, but if you’re working in a less JavaScript-heavy environment I definitely recommend it.

CSS Painting Order

Woah -- this is a trippy and fascinating exploration into edge cases around z-index and stacking contexts. I thought initially it was going to just explain how these concepts worked, but no it goes deeper into some very trippy examples of bizarre decisions made long ago and now maintained because of the fundamental principle of “don’t break the web” that forces the CSS, JS, and HTML standards bodies to almost never change behavior and only add to it.

JavaScript

CSS Transitions In Vuejs And Nuxtjs

The ease of handling and integrating transitions and other related animations into Vue.js is one of the small yet delightful aspects of the framework that makes it a pure joy to work in. This article takes you from basic CSS transitions outside of frameworks all the way through applying groups of interconnected transitions within Vue.

The Ultimate Guide to the ES2020 Nullish Coalescing Operator

I’ve been using the new optional chaining operator a lot and finding it dramatically improves the simplicity and legibility of my code -- after reading this, I want to add the nullish coalescing operator as well. Neat stuff!

Next.js: Server-side Rendering vs. Static Generation

I absolutely love the new Next.js tooling around incremental static generation. One aspect I hadn’t been aware of was how well they support rendering static “frames” of pages when you have just sub-pieces that need to be filled in with dynamic generation. It really feels like they’ve broken through to the next level in pre-computed pages and edge-side rendering, I love it!

Other Awesomeness

Beyond screen sizes: responsive design in 2020

Super fun look at more ways to make a website “responsive” than just to screen size. Looks at things like device capabilities, environment, network conditions, and user preferences.

We need more inclusive web performance metrics

Great article that highlights how many of our existing web performance metrics like time to first contentful paint are implicitly focused on the case where users are not using assistive technology. Proceeds to talk about what types of metrics would be useful to highlight for users in other situations, like time to a stable accessibility tree.

Always bet on HTML – being misunderstood

A bit meandering, but fascinating look through some of the reasons why HTML is often discounted in folks’ minds, especially as compared to JavaScript. There’s a great quote that has me thinking a lot… “So what I am saying is that as HTML can not fail, people don’t take it as serious. A stack that throws errors in your face making it obvious that you’ve done something wrong gets more attention”. Do we have a squeaky wheel problem? And is that one of the reasons why accessibility is so often ignored? If you aren’t using the devices, it won’t throw errors in your face.

UX Roadmaps: Definition and Components

A look through the key components of a successful roadmap as applied to UX. Honestly though the specific context here is very design-focused, this is a good read for anyone development roadmaps. I appreciate the emphasis on strategic use and user-focus.

"GraphQL is the bacon that'll make everything better" (audio)

(Bias alert - I was on this show). In last week’s JSParty episode we had a fun discussion about GraphQL, wandering through various pros, cons, and challenges we’ve faced with it. All with a heavy helping of food metaphor.