Friday Frontend: Rediscovering Excitement Edition

Hey there,

I hope you had a decent week. I’ve had a number of conversations recently about how one of the most challenging things in today’s world, with the pandemic having shut down so many activities, is finding things to be excited about. Just to take myself as an example, the things that used to get me excited were traveling, going out dancing, and doing improv theater. Every single one has been completely destroyed by the pandemic. But it’s not healthy for us to live in a world where nothing is exciting! So as best as we can, we need to find things to get excited about.

Personally, the main thing I’ve been finding is diving myself into work, finding parts of what I’m doing there that are super exciting. This may not be the healthiest approach in the long term, but thankfully I have enough family responsibilities to keep me from too much overwork, and it has been nice to have at least something to be excited about.

What gets you excited these days? Write me back, maybe we can get a collection of ideas for folks to help rekindle some energy in life.

Best,

KBall from ZenDev

CSS & SCSS

How to Recreate the Ripple Effect of Material Design Buttons

Super cool effect, and this article walks you through how to implement it. Primarily CSS, but does take a little JS to make it happen. Make sure you also drop down into the comments, where commenters link to ports of the approach to frameworks like Svelte and even to CSS Houdini.

The -​-var: ; hack to toggle multiple values with one custom property

This is an AMAZING hack, on par with the checkbox hack for enabling interactivity within a page without any javascript. Use a quirk of how CSS custom variables behaves to implement a limited form of an if statement in CSS, allowing you to create drastically different variants on a component configured by a single CSS variable. Super cool!

Balancing on a Pivot with Flexbox

Super fun walkthrough that will get you thinking about ways to use Flexbox properties in new ways. 

Full-Bleed Layout Using CSS Grid

An elegant solution to a very commonly desirable layout. Similar to a piece in last week’s newsletter, but while it uses modern CSS instead of very simple traditional CSS, it is also more powerful and flexible.

JavaScript

React Form Validation With Formik And Yup

Super nice, straightforward schema-driven form validation implementation in React. This approach to form validation is super helpful for making it easy to understand what is going on and avoid mistakes. Love it!

Webpack 5 release (2020-10-10)

Webpack has become the de-facto build system for most of the web, so a major version release like this is big news. This has a lot of upgrades in it, with both some major improvements and some decision changes that will produce some headaches, particularly if you’re bundling packages that use node APIs, where webpack has been automatically polyfilling them, and will no longer do so. I honestly think this is a step forward - it’s generally better to be explicit about polyfills - but this will definitely result in some migration headaches and challenges for package maintainers.

What’s In The Future For JavaScript?

Interesting speculative look at what may come down the road for the JavaScript language. The medium term predictions look spot on to me… the far future ones are of course very speculative, but fun to think about.

Redux is definitely NOT dead [audio with transcript]

Great podcast episode with the maintainer of the dominant state-management solution Redux. Has both some awesome best practices and a useful discussion of when Redux is a good solution vs when it is not.

Other Awesomeness

Announcing Netlify Edge Handlers: Now in Early Access

I don’t usually include vendor-specific articles or announcements, but this one illustrates something that I think is one of the key trends in frontend right now: Pushing more and more computation out to the edge, close to the client. This provides a nice way to complement a mostly pre-compiled approach -- it’s a JAMstack where at least some of the API functionality happens on a CDN node rather than in a centralized location. Very cool!

Design Shopping: Get A Faster Client Buy-In Through A Guided Design Showcase

I really like this mental model for approaching designer/client interactions. One of the biggest places I’ve seen a disconnect between designers and their clients and stakeholders is in terms of expectations for the process. Non-designers often have a vision of design as an “isolated” behavior where a designer will go away and come back with something magically beautiful, but the best designers I’ve worked with view it as a continuous process of exploration, communication, and iteration. This mental model helps get clients into a mode that helps with that process, without some of the hangups that sometimes occur.

Cumulative Layout Shift in Practice

This article, and its companion piece on Cumulative Layout Shift in the Real World, are a great introduction to a key, underutilized metric that dramatically impacts the usability of your site. I haven’t heard this talked about much before, but Google is pushing on it as one of their ‘core web vitals’ metrics and says it will soon be incorporated into search ranking, so it would behoove all of us (especially those working on publicly visible / content heavy sites and applications) to read up on it.

Using real data in Figma

Increasingly, everyone I talk to is using Figma for design, and this is a super valuable tool to add to your Figma toolkit to get rid of lorem ipsums and incorporate real data. Designing with realistic content is key to removing one of the most common challenges in translating from a design to a real world implementation.