Friday Frontend: Not COVID Edition
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!
KBall from ZenDev
CSS & SCSS
How to Make a Line Chart With CSS
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.
What Happens When a Module Is Imported Twice?
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
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.
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.