Getting back to the basics in 2022 to lower the barrier to entry into web development.
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.
Notable changes in my life, on my website, and in other projects.
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!
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!
I also have another big plan in the works. I expect to be making this announcement in next month’s issue. Stay tuned! 📡
New blog posts and videos I published last month.
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.
Articles and news I read last month that I found interesting, with some commentary.
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.
Nullish Coalescing Operator (
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.
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.
New tools that I've recently discovered. They aren't necessarily new.
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.
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.
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.
clipboard.js: Simple little tool for copying text to the clipboard. I use it for this website and really like it.
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.
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.
A list of six crucial factors to a strong, modern website to improve the content, performance, visibility, and aesthetics of your website.
A "good website" is one that achieves its goals. Read these six traits of a website that stays focused on those goals.