The Spinneret: Issue #16

I hope your 2022 is off to a great start!

As 2021 was coming to a close, I’d been talking a lot about what 2022 will have in store for the Jamstack. I mentioned that the identity crisis continues, and something has to give.

But as we move further into the year, I’m realizing that there’s much more to it. It’s not about one community or a name or a definition. The reality is that there’s no stopping this explosion of progress in building for the modern web.

And yet, with each move we make to “advance” how we build for the web, we increase the barrier to entry. I don’t see that changing. Instead, I do suspect we’ll see more creative ways on bringing new developers into the mix without overwhelming them. And I aim to aid in that effort.

My Updates

Notable changes in my life, on my website, and in other projects.

New Home Page

The website has a new home page!

This is a major shift for the site, as it transitions from being a personal site that also has content to putting the content front and center. This is the beginning of a space built to serve you and not to promote me. I’m pumped about this change!

New Content Types [Coming Soon]

The next step is to begin introducing new types of content to help me really turn this thing into a content engine. This will take several months, but the work has already begun!

More Announcements [Coming Soon]

I also have another big plan in the works. I expect to be making this announcement in next month’s issue. Stay tuned! 📡

My Words

New blog posts and videos I published last month.

Complete Guide to Getting Started with CSS is the last in a series of five guests posts from Prathum. I recently launched a guest writing program that is open to anyone. Details here.

Avoid these 6 Common Mistakes when Building a Website is the first post on the site by Sophia Young, where she lists six crucial factors for a strong, modern website to improve the content, performance, visibility, and aesthetics.

How to Upload Jest Image Snapshot Diffs to S3 was a random one-off post that I aim to work into a guide that outlines setting up visual regression testing for a static website. In the meantime, you can dig through the site’s code to see how Jest is working today. Or jump on a quick call with me to talk through it.

Six Traits of a Website Ready to Achieve its Goals plays with the concept of a good website, working to uncover what it takes to make a website good.

My Reads

Articles and news I read last month that I found interesting, with some commentary.

News

Netlify is sponsoring full-time development of 11ty! This move follows a recent trend in startups funding front-end frameworks. Yet, I feel like this move is going to be good for the community, and not (necessarily) only to support new features that help Netlify. (Maybe I’m too much of an optimist.)

Imgix announced their Video API. I’m a big fan of Imgix and this is exciting news. I suspect I’ll start using this as I look to begin developing full courses later this year. Tom Dale made the case for this service at TheJam.Dev.

MDX v2 was released, and it brings a number of new features. I’ve been an opponent of this tool for some time, but I’ve found myself considering it more lately. This new set of features is helping to persuade me.

JavaScript Bits

A pipe operator for JavaScript: introduction and use cases is an early look at the pipe operator proposal. I’ve mentioned this before, but I do think we’ll use this a lot. The biggest case for me personally is nested functions and logical chains. We won’t have to use intermediate and temporary variables (as much) just to make code easier to read. The pipe operator will make reading logical operations easier.

Nullish Coalescing Operator (??) This is a new and useful idiom for JavaScript developers. If you’re not using it, check it out — it’s quite handy. And it’s often a safe (and necessary) replacement for the logical OR operator (||).

Exploiting JavaScript quirks for fun and profit is a fun walk-thru of one solution to an Advent of Code challenge from 2017.

Components

Making the web better. With blocks! This is an introduction and pitch for Block Protocol. This is really interesting, and I’m curious to see what comes of it. I’ve been talking for a bit about standardizing the way web pages are built, without removing flexibility for anyone involved in building those pages. It, like Block Protocol, is a big idea, and it’s going to take a major shift for it to catch on.

React Server Components in Next.js 12 is an in-depth look at how React server components work. This line sums it up nicely: “React Server Components are an amazing feature because they effectively handle rendering and let us build apps that span the server and client.”

If that’s not enough, here’s an even deeper dive into React server components.

Good advice on JSX conditionals has a series of common pitfalls when working with conditional rendering in JSX. Super useful for both newer and seasoned React devs.

Content

Building Better Next.js Static Sites With MDX and Contentlayer: I’m working on a project for Stackbit called Contentlayer. This article came from an early community member exploring the tool. We are aiming to release the alpha version within a month or two. I hope to see it change the way developers load content into Next.js projects.

Odds and Ends

A Complete Beginner’s Guide to npm

What Were the Hottest Front-End Tools in 2021?

400+ Thought-Provoking Software Engineering Quotes

My Finds

New tools that I've recently discovered. They aren't necessarily new.

Back End / Authentication

Xata: Serverless database for Jamstack sites. It’s not released yet, but calls itself “a combination of a relational database, an analytics engine, and a free-text search engine.”

Uniform: It’s a mesh API product — one that lets you call multiple APIs using a single endpoint. Similar to TakeShape, Uniform also lets you decorate the data (add to it) on their platform. But it doesn’t write back to the source, which means those adjusting the data are still working in multiple places.

NextAuth: Open-source tool for adding authentication to a Next.js application.

Crystallize: Calls itself headless commerce for product storytellers. It appears to be a CMS of sorts, but focused on the storytelling aspect of commerce. Seems like an interesting angle to explore. There is a (limited) free version.

Components

Chakra UI: A component library for React apps. I’ve been hearing more and more about this lately.

Stitches: This is a CSS-in-JS library that has “near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.” It looks to be a competitor to Styled Components.

NextUI: More components! These designed for use with Next.js applications. Currently in beta.

Styling / Interaction

Two.js: A two-dimensional drawing API, geared towards modern web browsers. It is renderer-agnostic, which means that using its drawing API can render in multiple contexts, including SVG, canvas, and WebGL.

chroma.js: Small zero-dependency JavaScript library for all kinds of color conversions and color scales.

clipboard.js: Simple little tool for copying text to the clipboard. I use it for this website and really like it.

Performance / Build Tooling

DebugBear: A place to monitor the performance, web vitals, and other important details of your website.

Nx: A build system with a focus on monorepos. I’ve tried working with tools like this and my projects are just a little too small to make it useful to me today.

Odds and Ends

tree.nathanfriend.io: Builds pretty file trees in code from an indented format. I’d been doing this sort of thing manually until a coworker shared this tool. Love it!

Cloak: VS Code extension that hides environment variables and other secrets while screen sharing or live streaming.

utterances: A little comments widget that uses GitHub issues to store and render comments for one particular page/post on your site.

That's all for this issue. See you soon! In the meantime, say hello on Twitter.