ZenDev - Friday Frontend: Back to School Edition

View this email in your browser

Hey there,

If you’re a parent, I really feel your pain right now. I and every other parent I know is struggling navigating the complicated transition of kids back to school in an epidemic environment. Our kids are on fully virtual school, which means my mornings are filled with tech support, cajoling them to actually do the work, and dealing with meltdowns. I’m one of the lucky ones that has both a wonderful partner and some additional childcare help, and it's still driving me too the edge. Yikes. Go easy on yourself, this is a super hard time, and it’s okay if some other things slip as you navigate it.

Now on to the reading. There were several really really good articles this week - I loved the one on using state machines in React, the Mobx tutorial was super good, and the article on ‘seeing vs reading’. Enjoy!

Best,

KBall from ZenDev

 

CSS & SCSS

 

A CSS-only, animated, wrapping underline.

I keep discovering more and more powerful uses for multiple backgrounds - it truly is a superhero of creating visual effects in CSS - and here’s another one. A multi-line capable animated underline. Very very cool!

Visualizing CSS Resets

I’m really digging these CSS cartoons - this one makes instantly clear what CSS Resets do, and the difference between a reset and normalize.

Custom Select Styles with Pure CSS

Forms are the bane of many a CSS developer, so this type of step by step tutorial on how to style a form element like Select is super useful. I do wish browsers would let us style the options too, but this gives us as much as we can do today.

Leading-Trim: The Future of Digital Typesetting

A look into one of a set of upcoming CSS improvements intended to fix longstanding issues in dealing with text in CSS. This one focused on the gap between the “text box” that you end up styling and the actual text. Also great to hear that Microsoft is sponsoring the related spec to help shepherd it through the process and getting it through the process.

Grids Part 1: To grid or not to grid

Interesting look at the semantics of tables vs grids. Touches on the differences to assistive technology but really spends most of the time on the differences between the two and the decision process for which one to use to best enable keyboard and screen reader based users.

 

JavaScript

 

Build A Confirmation Modal in React with State Machines

I love the state-machine based approach to UI development. So much more logical and testable than effect-driven approaches. The first half of this article is relevant no matter what JavaScript framework you’re using (or even if you aren’t using one), while the 2nd half zooms in on React specific code.

Using Mobx As A State Manager In React Native Applications

This was probably the most accessible article about Mobx that I’ve read. I think Mobx enables probably the most ‘Vue-like’ programming within React that I’ve seen, with an emphasis on automatic reactivity to state and state changes. 

Front-end Architecture: Stable and Volatile Dependencies

This is a very useful lens for thinking about how to manage dependencies. The author introduces a way of categorizing dependencies into stable and volatile, and then recommends wrapping all volatile dependencies in abstractions to “stabilize” them so that your components can depend only on stable dependencies. I like it!

Amazing Animation Techniques with GSAP

Nothing adds flare to a site or component like some appropriate animation, and while I love leveraging CSS for as much of that as possible, at some point you need to bring in JavaScript. GSAP is the industry standard library for advanced animation, and this article shows you a series of examples, each in their own codepen so you can dig in and play with it.

Understanding React's useRef Hook

This is a useful breakdown of what useRef is and some of the reasons behind it. I had originally thought of it as purely something for accessing DOM nodes, but once you grok that it is purely a stable global variable that doesn’t provoke re-rendering, you will find many more use cases. Recently I had an example using it for keeping a global count in a hook for unique CSS ids, and there’s other possibilities too.


Other Awesomeness

 

Seeing vs. reading

Delightful exploration of some of the differences between two distinct modes of thinking - verbal vs visual. I think each of us have more natural modes (I’m very verbal by default), but learning to understand and move between the modes is a super valuable tool. If you’re having trouble communicating with team members in different roles (e.g. marketing or design) or moving between implementation and creative tasks, this will be a very useful article for you.

Where Does Logic Go on Jamstack Sites?

This is one of those questions that probably feels way too simple/obvious if you’ve been doing Jamstack for a while, but it’s a real barrier any time you look at a new architecture that is fundamentally different from what you’re used to:  Where do things go? This will get you started -- Read the comments too, because the author missed one thing, but commenters being what they are it was added there.

What is the difference between this & that?

Oooh, super cool site that takes pairs of similar concepts across CSS, the DOM, JavaScript and other front-end concepts and breaks down what the differences are in great detail. Want to know the exact difference between display:none vs [hidden], naturalWidth vs width, or much more? Check this out.

7 Deadly Sins of Data Visualization

Great look at some of the pitfalls of recent “trendy” types of data visualization -- if you’re not careful, your splashy infographic visualization can confuse or even actively mislead your audience.

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 update your preferences or unsubscribe from this list.

Email Marketing Powered by Mailchimp

Older messages

Friday Frontend: Apocalypse 2020 Edition

Friday, August 21, 2020

Hope your week was a little less apocalyptic than mine -- this newsletter is coming to you from California, where we've been embroiled in a massive... View this email in your browser Hey there,

Friday Frontend: Mozilla Death Rattle Edition

Friday, August 14, 2020

Welcome to August! Okay so it's already halfway done, but after taking a week off it's the first time I get to talk to you! View this email in your browser Hey there, Welcome to August! Okay so

Friday Frontend: Many Types of Design Edition

Friday, July 31, 2020

Congratulations, you made it to the end of July! I hope you're holding in there and doing okay. View this email in your browser Hey there, Congratulations, you made it to the end of July! I hope

Friday Frontend: July 24 Edition

Friday, July 24, 2020

One of the things that feels most challenging to me about this long disaster we're going through as a world... View this email in your browser Hey there, One of the things that feels most

Friday Frontend: July 10 Edition

Friday, July 17, 2020

Happy Friday y'all, hope you had a great week! View this email in your browser Hey there, Hope you had a great week! I'm enjoying a few weeks of relative care-free summer before we have to deal

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