Search

An excellent look into the new trend of no-or-low-JavaScript web components, which almost operate more like HTML fragments, with graceful fallbacks to native elements. Jeremy proposes terming these …

Is the term "web component" useful? Or does it simultaneously obfuscate the power of the related APIs (custom elements, Shadow DOM, etc.) and confuse their intent/meaning in a way that leaves …

Building a tooltip? A carousel? A password input? I can strongly recommend checking if the Component Gallery has a page on whatever UI pattern you're working …

Styled Components have tripped me up a few times today, but I ended up learning some useful tricks as a result.

A quick overview of React Server Components and some of the mental models that are useful when thinking about how they might be applied, in …

I'm always interested to see how other people utilise styled-components and the tips Josh shares offer exactly that kind of insight. I fundamentally disagree with his take on descendent selectors …

The Component Kitchen is a sort of app store for web components; a digital directory of useful packages, recipes, and one-shots that can be imported into your …

Max has put together one of the best examples of how container queries will fundamentally change the way front-end development works. Better still, they provide extremely clear explanations of …

A superb breakdown of the changes being made in React 18+ around the new React Server Components paradigm. Josh has a knack for explaining complex problems in simpler ways, and this is no exception; …

An excellent overview of the current state of web components, including suggestions on how they could be …

A lovely overview of much of the new CSS that has landed (or is landing) in browsers recently, and how that relates to component-led …

A brilliant site for comparing common component patterns across most of the major front end frameworks. Want to learn Svelte and already know React? Select both, pick the pattern you're wanting to …

An interesting – albeit flawed – attempt at a zero-dependencies, web standards focused, PWA based UI framework, and a potentially useful quick-start template for using web components and native …

A great rundown of how to build a site using Preact and Eleventy that gives you the best of SPA-lite hydration and the speed/resilience of SSGs, all with the power of progressive …

Using pseudo-selectors like :where and :not to invert style rules, allowing for better code encapsulation and context sharing across a codebase.

Having hooked up Algolia with my Gatsby build pipeline and populated a search index from my Craft CMS API, the next step was the build a frontend UI to enable users to actually query my posts. It turned out to be a pretty simple process.

I think there's some real merit to Andy's ideas behind Cube CSS. It's a middle-ground between everything-in-JS or BEM that throw out the cascade entirely and the free-for-all that can happen if you …

I'm not going to lie, some of Amelia's breakdown of why hooks > class components went over my head, but the reasoning is solid (plus, preaching to the converted 😉). Even better, though, is …

Just after the 10-year anniversary of his Responsive Design article on A List Apart, Ethan has published some interesting thoughts on the nature of seams within …

Josh breaks down why and how you can use CSS variables more easily in React, specifically using styled-components. Honestly it feels a little terrifying how much is needed just to get basic …

What do you do when a website has loaded but the content is still being fetched from an API? One answer is to fill the page with animated placeholders, creating a skeleton of what the user can expect, with a dash of CSS animation to let them know that something's still going on behind the scenes.

A humorous but useful tool that strips out all the mess that things like Styled Components and React make out of HTML and lets you properly view the source of a page. (and yeah, I use those same …

A fascinating look at how modern front-end architecture and practices can help solve some of the communities issues; even the ones they initially created! Really neat to see how Brad has been using …

Heydon's video is an excellent overview of their much-loved owl selector and "stack" layout pattern. I actually didn't realise that Heydon was the original "inventor" of the owl, though it makes a …

Welcome to the third version of theAdhocracy! It's been a long time coming, but the site has finally been rebuilt, rehosted, and re-just-about-everything else, so I figured I'd actually formalise the launch with a new post explaining what's happened and why.

Jonas has put together a useful overview of why the "new" Context API in React is probably a better option than Redux for many simple use cases, as well as step-by-step instructions on how to set up …

A great explanation of why two-pass rendering is a useful mental model to consider when working with server-side rendering/SSGs like Gatsby and JavaScript frameworks. The main point? …

A great overview of why a custom select component can be …

Static sites don't make search functionality easy, but luckily there are some excellent services that do. I've been messing around with Algolia and finally have it working with Craft and Gatsby the way I want it... on the backend, at least.

Notes from the fully remote React Summit 2020 (or at least the talks I tuned in for). Lots covered, from static-site generators and the Jamstack through to React state management and accessibility. What a fun day!