Friday Frontend: New CSS Techniques Edition

Hey there,

I hope you had a great week, and you’re staying safe as we endure what looks like a strong rise in COVID-19 cases across the US and Latin America.

I’ve got some pretty interesting articles for you below across all segments, but the theme that emerged for me is how new capabilities in CSS around things like grid, properties, and clipping are now driving new techniques. Love to see the progress!

Best,

KBall from ZenDev

 

CSS & SCSS

 

Using Custom Property “Stacks” to Tame the Cascade

I love this. Fascinating deep dive into how to use “stacks” of CSS custom properties applied at different levels of the cascade and using backups and fallbacks to create an incredibly flexible yet understandable CSS system.

Building a hexagonal grid using CSS grid

This is a little bit older than most of the articles I send out, so some of you may have seen it already, but I just found it and it is a super cool example of using the overlap capabilities of Grid to do something unexpected: Create a hexagonal grid such as you might see in games like Civilization or Settlers of Catan. Very neat!

Advice for Complex CSS Illustrations

Incredibly fun and detailed article of techniques for CSS illustration. Most of these techniques won’t be useful outside of the illustration context, but some of them will help with problems you might encounter in regular web design/development work. I particularly like some of the advice around creating your own units (CSS vars will let you do that in a scoped way!) and dealing with awkward shapes.

CSS Custom Properties Fail Without Fallback

Short and easy to parse. Highlights an unintuitive (though it makes sense after reading this) way in which CSS Custom Properties can fail by behaving differently than you’d expect from having learned CSS generally.

 

JavaScript

 

How to Make localStorage Reactive in Vue

Super interesting exploration of how Vue’s reactivity system works via the example of implementing it for localStorage. I would love to see another version of this using the reactive tools exposed by Vue 3; I bet it would be simpler and more elegant.

An Introduction To SWR: React Hooks For Remote Data Fetching

This looks really nice! It reminds me a lot of some of the utilities I’ve been finding super useful about using Apollo with GraphQL recently - seamless support for caching of repeated queries, handling loaded states, and more all wrapped up in a nice clean hook-based API.

React Hook Form VS Formik

As long as I have been in web development, dealing with forms has been painful and verbose. And for that whole time, folks keep coming up with new ways to try to make them less painful. This post looks at two tools for that purpose in React.

What is Next.js Incremental Static (Re)Generation?

This is a really interesting development in the progression towards more and more edge computing. Rather than a full pre-compute SSG like Gatsby or a full on-the-fly server side rendered approach, Next.js now makes it easy to have static pre-computation that updates periodically without requiring a new deploy. This has interesting implications both for things like speeding up deploys of mostly static sites or adding a bit more dynamism without sacrificing performance.

Go async in Vue 3 with Suspense

I love the way different parts of the front-end ecosystem learn from each other. In this case, it looks like Vue 3 is pretty much directly implementing the same approach as React for dealing with asynchronous loading states, though what gets me even more excited is when the frameworks tweak and refine the approaches based on their own contexts (how the Vue functions API takes hooks and refines them further for Vue’s approach).

 

Other Awesomeness

 

Patternico

Interesting tool for creating patterns as images you can then use as background images.

Rough Notation

Super cool little JavaScript library for doing sketch-like rough drawing on a website. Opens some really neat interaction possibilities.

The Return of the 90s Web

Everything old is new again! All the big trends of today are things we saw in the 90s! … I’m joking some, the author doesn’t go quite that far, but he does highlight how many trends do have analogues in the past, and perhaps by looking at what happened then we can figure out some ways to approach things better now. As Mark Twain is often attributed to have said, “History doesn’t repeat itself, but it does rhyme”.

A Cheatsheet for User Interview and Follow Ups Questions

If there’s one thing you could do to have the biggest influence on the usability of your application, it is to consistently do user trials and interviews. Put the software in front of someone who is in your target audience but who has never used it, ask them to do things, and watch them struggle. You will learn so much. If that sounds too intimidating or vague, this cheatsheet will help… it gives you useful questions that you can use to structure and guide that conversation.

Copyright © 2020 ZenDev, LLC, All rights reserved.
You are receiving this email because you opted in at our website, zendev.com.

Our mailing address is:
ZenDev, LLC
922 San Leandro Ave., Unit C
Mountain View, California 94043

Add us to your address book


Want to change how you receive these emails?
You can or .

Email Marketing Powered by Mailchimp

Older messages

Friday Frontend: Juneteenth Edition

Friday, June 19, 2020

Happy day of celebrating the end of slavery in the US. Crazy how recent it was, and how much this history continues to haunt us today. View this email in your browser Hey there, Happy day of

Friday Frontend: Reactivity in 2020 Edition

Friday, June 12, 2020

Hope you had a good week and are looking at a great weekend. I'm surely looking forward to a rest after working a lot of late nights on a deadline. View this email in your browser Hey there, Hope

Friday Frontend: Black Lives Matter Edition

Friday, June 5, 2020

This week has been surreal. We've seen protests in cities across every one of the 50 states in the US, and supporting protests across the country. View this email in your browser Hey there, This

[LINK CORRECTION] Friday Frontend: “Modern” JS & Web Dueling Takes Edition

Friday, May 29, 2020

Happy Friday! There's some super cool articles this week that I'd love to draw your attention to. View this email in your browser [The first version of this newsletter contained an incorrect

Friday Frontend: “Modern” JS & Web Dueling Takes Edition

Friday, May 29, 2020

Happy Friday! There's some super cool articles this week that I'd love to draw your attention to. View this email in your browser Hey there, Happy Friday! There's some super cool articles

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your