Hope you had a great week this week, and if you’re in the US have a wonderful holiday weekend! There are a set of articles that go a little bit deeper on some advanced JavaScript features and patterns. Proxies, generators, and functional patterns. There’s also some wonderful CSS articles, a fascinating report on the health of the internet in 2019, and much much more. Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

Debugging CSS Grid: Part 2: What the Fr(action)?

We included Part 1 on implicit tracks last week; this is an excellent walkthrough of using the new fr unit in CSS Grid. I have to admit, the behavior for 0.5fr was not what I expected, but after reading this it makes perfect sense.


The “Inside” Problem

Chris Coyier dives deep on one of the most pervasive design situations in web development, a full bleed background with padded content. He looks at common solutions, drawbacks, and hints at some really creative out there solutions if you find yourself stuck.


Chinese Window Lattice And CSS

Impractical, uses a non-standard attribute, and has very little use for professional development. And yet I can’t stop looking at it. A stunning example of creating art using the web as a medium. The simple power of reflection and nesting to create unfolding patterns. Beautiful.


CSS rules that will make your life easier

A solid set of recommendations that will help you keep your CSS in order and in good shape, keeping you from doing things you’ll later regret. Some relate to accessibility, others to consistency, and some just to simple maintainability, but all are good to at least consider.


The State of Fluid Web Typography

An in-depth look at a few different approaches to responsive typography and so-called “fluid” (continuously varying sizes) typography. Good breakdown and assessment of pros and cons of different approaches.


CSS can do that?

Bonus CSS article this week - a great quick hits list of cool things you can do with CSS, each with a codepen example. A great quick scan, and if you see something new you can go dig deeper.


JavaScript

A practical guide to Javascript Proxy

Proxies are super powerful, but not often used. I think one of the underlying reasons is it can be difficult to wrap your head around what exactly to use them for. What I love about this article in particular is it uses a ‘teach by example’ mechanism that not only exposes how to use proxies, but a whole myriad of powerful usecases that will get your creative juices flowing.


Elegant Error Handling with the JavaScript Either Monad

If you’re not a functional programming guru (I’m not), this will be a total mindbender. But it also does a really really good job of building up both an explanation and a case for a functional/pure approach to error handling. And has some really cool train graphics that helped me understand. :)


Functional-ish JavaScript

This is much more the type of JavaScript I tend to write than the previous article. JavaScript that incorporates some functional concepts that makes it easier to manage, understand, and maintain over time, but not whole-hog into all functional all the time. This article makes a compelling case.


The Basics of JavaScript Generators

Generators are one of those language features that I really want to wrap my head around and use, because they seem really powerful and useful, but I just haven’t yet. But I’ve had a few times I’ve come close… the first was a talk at JSConf Hawaii (video sadly still not up) and the second was this blog post. Check it out.


Multi-Select Checkboxes with React

Okay so it’s using classes and lifecycle methods instead of hooks, but I this is a nice step by step example of building out a moderately complex React component. The thinking that goes into it, and how you can build out the methods one at a time.


Promoted Link

Udemy Memorial Day Sale

It’s that time of the month again, when Udemy discounts all of their courses down to $11.99 or so. But don’t let that take away from their value… there’s some great courses on there. Some of my top recommended courses: this Vue course, this React course, and this CSS course.


Other Awesomeness

It’s Complicated: Mozilla’s 2019 Internet Health Report

A fascinating set of research and stories exploring the health of the internet in 2019 when it comes to things like safety, openness, and centralization. I plan to spend a lot of time digging through this. Very very cool.


Introducing GitHub Package Registry

In case you missed it, last week GitHub introduced a new package registry tied into github. Besides being a warning shot at NPM, there is some really interesting potential here - the ability to trivially set up internal registries at companies without needing another service provider, and the possibility that GitHub would be able to do end-to-end analysis and validate that the code you’re looking at is the code in your package. Very very interesting, and something to watch closely.


A Deep Dive into Native Lazy-Loading for Images and Frames

Interesting look into the new (still in the process of getting implemented in browsers) native lazy-loading functionality. Some very interesting tidbits -- I had no idea browsers would try to sniff dimensions in lazy loaded images to keep from having to re-layout. Neat!


GraphQL Trends in 2019

GraphQL is going bonkers in 2019, and this blog post is a great wrap up of a lot of the things going on.