#179

This week, Chris takes a look at the new Sandwich site that has a nifty effect as you scroll—the text underlines animate these big blocks of color from side to side like this:

With the help of an SVG background image, CSS variables, and a tiny bit of JavaScript, this effect is a pretty easy one to make!


Color contrast and accessibility is a big reason why web design is a lot trickier than it looks at first glance and so in this post Chris takes a gander at all the things we might need to consider when it comes to color contrast:

Links, highlighted text, and focus states are just a few things we need to gracefully design for. Otherwise, our sites can end up looking a little borked if we don’t.


I jotted down a few lessons I’ve learned when it comes to building React components, namely (1) avoid child components as much as possible and (2) make sure your props don’t conflict with one another.

That second one can be real tough in large codebases and is something that our team is struggling with a lot lately. So many props will bleed into the role and responsibility of another’s in old React components — and this can lead to bad design and super confusing documentation for other engineers. The answer, as Mandy Michael writes, is to make sure you name your prop types properly but also to think carefully each time you add a new prop.


Jason Lengstorf wrote about how to modify nodes in an abstract syntax tree:

One of the more powerful concepts I’ve stumbled across recently is the idea of abstract syntax trees, or ASTs. If you’ve ever studied alchemy, you may recall that the whole motivation for alchemists was to discover some way to transform not-gold into gold through scientific or arcane methods.

ASTs are kind of like that. Using ASTs, we can transform Markdown into HTML, JSX into JavaScript, and so much more.

In this example, Jason shows us how to parse a Markdown document and transform it into HTML with a really neat step-by-step guide.


Chris asks: “Is web design easier or harder than it was 10 years ago?” His answers are pretty interesting. Here’s what he has to say about the changes that have been made in CSS over the last decade:

CSS has gotten easier. We use way fewer “hacks” all the time. I can literally feel it. The CSS we write today feels so intentional and direct. 10 years ago I feel like every other element had some kind of weird hack on it, and today, almost none. If CSS feels any harder, I’d wager it’s because the sites we’re building are bigger and more complex so the styling systems for them need to be all the more robust and the dangers of getting it wrong more stark.

Chris also mentions Stackbit in this thread which is something I hadn’t heard of before. It’s a pretty gosh darn magical service that lets you create JAMStack websites with just a couple of clicks. Need a Gastby front-end with a Netlify CMS? Click, clack, boom!

It’s super impressive stuff.


Did you know that the order of CSS classes in HTML doesn’t matter? Here’s an example in CSS:

.a {
  color: red;
}

.b {
  color: blue;
}

And the markup:

<div class="a b">Here’s some text</div>

It doesn’t matter which way you place a and b in the HTML because the cascade will always win here.


A short while ago, someone emailed Chris with the following question:

What approach to building a site should I take?

1. Build a single responsive website

2. Build a site on a single domain, but detect mobile, and render a separate mobile site

3. Build a separate mobile site on a subdomain

As Chris mentions, it’s super interesting that this was a question that dominated the industry not long ago and all of us were asking ourselves how to figure it out. In that time, we’ve sort of all come to the conclusion that #1 is best — making a single, responsive website. That way we don’t have to support multiple codebases and we can all focus on building a progressively enhanced website for everyone.


SPONSOR

TinaCMS

Most clients are familiar with editing tools like Squarespace and Medium, and they expect developer-built sites to be as intuitive as those products.  TinaCMS is an open-source CMS that gives your Gatsby and Next.js sites real-time editing capabilities… a next-gen CMS for next-gen sites :)