I stumbled upon a great site which acts as an explainer for vanilla web development techniques called, well, Plain Vanilla.

When I was starting out as a developer I had a hard time learning the basics of the web platform because so many resources and examples used a framework. It was mostly jQuery at the time, and today I’d assume React and Tailwind are the most common starting points for new developers.

But the web has come a long way! A framework might not be necessary for lots of projects, and going as far as you can with the grain of the web comes with lots of benefits. I’m happy to see a high quality resource like this that can help folks avoid complexity and start simple.

I really appreciated this write up from Jeremy Keith about his personal approach and best practices for HTML web components.

Judging by the discourse, web components seem to be gaining in popularity lately, and I’m very here for it.

Trying to build on the web using a component model was what led me (and others I’m sure) into the arms of React many years ago. While I’m grateful for that journey, and still believe React is the right choice for many projects, it gives me a lot of comfort to know there’s a native tool I can reach for.

The tricky thing with web components, like the web platform in general, is the flexibility. What makes it so powerful can also make it hard to learn, and even harder to know if what you’re learning is the right or recommended path. It takes time for best practices to form and percolate.

Wherever I can I prefer to work in the browser vs. tools like Figma. As the web platform grows (we seem to be in a sort of golden age at the moment) it becomes easier and easier to do my job with only the raw materials of the web.

Recently I’ve been working on a project at the day job that requires the use of something akin to layout grids in Figma. I was curious how difficult it would be to recreate this on the web.

It took longer than I’d like to admit to figure out the math, but with a single repeating-linear-gradient we can overlay a representation of our grid onto the page. I whipped up a class for this with support for specifying your own number of columns and gutter width.

In the spirit of blogging the things I want to remember:

.grid-overlay {
  --n: var(--columns, 12);
  --g: var(--gap, 16px);
  --c: var(--overlay-color, rgb(255 0 0 / 0.08));
  --column-width: calc(((100% + var(--g)) / var(--n)) - var(--g));

  position: relative;

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
      to right,
      var(--c),
      var(--c) var(--column-width),
      transparent var(--column-width),
      transparent calc(var(--column-width) + var(--g))
    );
  }
}

Slap that class onto your grid container and presto, you’ve got some rails in place to keep everything lined up nice and neat.

Once again I’m left marveling at the humble power of CSS, and feeling grateful that we live during times when such an expressive yet simple visual language is spoken so ubiquitously.

Check out the demo on Codepen.

On the Formidable blog, Luke Jackson shares how you can develop a React app today with no build step by taking advantage of the platform’s latest features.

This doesn’t excite me because it will change the way that we build apps (it likely won’t for a while), but because of how it will change a developer’s ability to get started creating new websites that use tools like React. In the not-too-distant future, “vanilla” web development will look a lot like how we develop the web at scale. The barrier of entry will be lower than ever before.