If you’re like me, you’re probably finding your life absolutely ABSORBED with COVID-19 conversations. We’re doing all sorts of social distancing and other precautions to try to handle this thing, (and if you’re not sure why this is helpful, it’s worth checking out this article by someone in our tech community, coming from a very data-oriented mindset) but gosh the ever-presence of it mentally is also NOT HELPFUL for anxiety. 

Anyway, let’s have a short break from all of that and read some interesting articles on front end development as a distraction! There’s some really cool things going on in the tech world.

Of this list of articles, I was *blown away* by the CSS landscape, am super pumped about Redwood.js and Gatsby, and super curious about the new webpack 5 module federation. What about you? If one of these articles really speaks to you or is especially valuable, shoot me back a reply and let me know.

Hope you’re staying safe and healthy!

Best,
KBall from ZenDev

CSS & SCSS

How to Make a Line Chart With CSS

If you’re looking to make line charts in a way that can be totally server-side rendered, no JavaScript involved, this is a super helpful article. This is especially relevant if you’re staying mostly away from the SPA world. And even if you *are* in the SPA world, there can be benefits to doing something similar… check out the approach Rich Harris introduced with Svelte.


sass !default and themeable design systems

This is a super useful technique, one we used a lot back when I was working on ZURB Foundation. The use of the default! flag can dramatically help when building reusable systems where you want both the default “out of the box” experience to be decent, but to still allow a lot of customization.


Currying in CSS?

Wow, this is fascinating, and not something I would have thought to try! Turns out, CSS variables are even more flexible than I’d realized - the value doesn’t have to be valid CSS in itself, it can be a reusable “chunk” that can be incorporated in multiple places. (e.g. inside of different calc functions). Very cool!


Pure CSS Landscape - An Evening in Southwold

Mind blowing and inspirational, in the category of CSS art. Possibly the most amazing thing here is how the author has managed to set up so many things to depend on the color defined for the sun. Change that value inside of the codepen and watch as everything “automagically” adjusts.


How to create a sticky footer with Flexbox

This is a super useful technique. Using a vertical flexbox container and flex-shrink to pin a footer. If you aren’t already familiar with it, check it out.


JavaScript

What Happens When a Module Is Imported Twice?

If you’re writing and using only good, modern JavaScript following best practices, where importing a module has no side effects, you shouldn’t care about this question. But if you’re like many of us sometimes you have to deal with some old JavaScript that isn’t written so cleanly, that has some side effects on import, or similar. If so, the answer to this question matters very much, so you might want to read this post.


5 Tips to Improve the Performance of Your React Apps

The tips included range from relatively micro optimizations (that will probably only matter if your component is being rendered hundreds or thousands of times) to large-scale optimizations like code splitting. It’s worth a read through, and they do a nice job of explaining the “why” behind things so you may learn something about how React works along the way.


Redwood.JS: Bringing full-stack to the JAMstack

This is a super interesting new JavaScript framework just released by Tom Preston-Werner (aka TPW, github cofounder) and a small core team. Inspired by the simplicity that Ruby on Rails brought to the serverside web application world, Redwood tried to create the same level of simplicity when writing a JAMstack application. Built on React, GraphQL, and Prisma, this looks super exciting and while it’s still very early (just announced and released v0.1.0) I’m stoked to see where this goes. (Pre teaser - watch for next week’s JSParty podcast episode interviewing TPW about Redwood.js)


Understanding Generators in JavaScript

I’ve been using Generators a lot recently in python; they’re an incredibly powerful way to deal with very large amounts of data without using overwhelming amounts of memory. This is a solid introduction to how they work in JavaScript.


Catching up with Gatsby (audio w/transcript) 

(Bias alert - I was on this podcast). This was one of the most fun JSParty episodes I’ve been on recently, catching up with all of the cool things going on with Gatsby.js, and digging into the future of the framework.


Other Awesomeness

Webpack 5 Module Federation: A game-changer in JavaScript architecture

Wow, this is really interesting! The core idea is to let you import modules from completely different “Apps” within a frontend, and have it seamlessly work with bundling and code splitting. I’m still wrapping my head around how it works and what the pros and cons w be, but my sense is this is a gateway to far more efficient “Micro Frontend” style architectures, making it far easier to share code between “independent” codebases.


Communication Between Micro Frontends

Speaking of Micro Frontends, this post dives into one of the really interesting questions for them - what happens when you have to communicate between them? This is the rough equivalent of “what should your API structure look like” within the microservices world, but adapted to the browser universe.


GraphQL resolver testing

Relatively short and simple, but what I appreciate about this is it not only explicitly shows you how to test a GraphQL resolver, it highlights that for all of the seeming “magic” of some parts of GraphQL, a resolver is just a function and can be tested by thinking about it as a function and testing accordingly.