ZenDev - Friday Frontend: Back to School Edition

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.