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

Re: Hackers may have stolen everyone's SSN!

Saturday, November 23, 2024

I wanted to make sure you saw Incogni's Black Friday deal, which is exclusively available for iPhone Life readers. Use coupon code IPHONELIFE to save 58%. Here's why we recommend Incogni for

North Korean Hackers Steal $10M with AI-Driven Scams and Malware on LinkedIn

Saturday, November 23, 2024

THN Daily Updates Newsletter cover Generative AI For Dummies ($18.00 Value) FREE for a Limited Time Generate a personal assistant with generative AI Download Now Sponsored LATEST NEWS Nov 23, 2024

📧 Building Async APIs in ASP.NET Core - The Right Way

Saturday, November 23, 2024

​ Building Async APIs in ASP .NET Core - The Right Way Read on: m​y website / Read time: 5 minutes The .NET Weekly is brought to you by: Even the smartest AI in the world won't save you from a

WebAIM November 2024 Newsletter

Friday, November 22, 2024

WebAIM November 2024 Newsletter Read this newsletter online at https://webaim.org/newsletter/2024/november Features Using Severity Ratings to Prioritize Web Accessibility Remediation When it comes to

➡️ Why Your Phone Doesn't Want You to Sideload Apps — Setting the Default Gateway in Linux

Friday, November 22, 2024

Also: Hey Apple, It's Time to Upgrade the Macs Storage, and More! How-To Geek Logo November 22, 2024 Did You Know Fantasy author JRR Tolkien is credited with inventing the main concept of orcs and

JSK Daily for Nov 22, 2024

Friday, November 22, 2024

JSK Daily for Nov 22, 2024 View this email in your browser A community curated daily e-mail of JavaScript news React E-Commerce App for Digital Products: Part 4 (Creating the Home Page) This component

Spyglass Dispatch: The Fate of Chrome • Amazon Tops Up Anthropic • Pros Quit Xitter • Brave Powers AI Search • Apple's Lazy AI River • RIP Enrique Allen

Friday, November 22, 2024

The Fate of Chrome • Amazon Tops Up Anthropic • Pros Quit Xitter • Brave Powers AI Search • Apple's Lazy AI River • RIP Enrique Allen The Spyglass Dispatch is a free newsletter sent out daily on

Charted | How the Global Distribution of Wealth Has Changed (2000-2023) 💰

Friday, November 22, 2024

This graphic illustrates the shifts in global wealth distribution between 2000 and 2023. View Online | Subscribe | Download Our App Presented by: MSCI >> Get the Free Investor Guide Now FEATURED

Daily Coding Problem: Problem #1616 [Easy]

Friday, November 22, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Alibaba. Given an even number (greater than 2), return two prime numbers whose sum will

The problem to solve

Friday, November 22, 2024

​ Use problem framing to define the problem to solve This week, Tom Parson and Krishna Raha share tools and frameworks to identify and address challenges effectively, while Voltage Control highlights