Jay Freestone

You might not need… the always-valid entity

One of the classic OOP principles is the ‘always-valid domain entity’. The idea is that entities and value objects don’t need to be validated, as invalid construction is actively guarded against.

You might not need… a service worker

Once the 'next big thing', now largely forgotten. What happened to the service worker?

Ship the policy, not the code

A rule has to hold on both sides of an API boundary. Do you duplicate the code, share it, or let the backend drive the invariant?

Concurrency in transactions

Avoiding prettified logs

You might not need… the repository pattern

Most codebases implement a cargo-cult 'repository pattern' that Evans and Vernon would shudder at. What actually gets shipped is usually a grab-bag collection of methods that provide no real abstraction, and no clear value.

Distributed Zod discriminated unions

Intentionally blocking rendering with JavaScript

You nearly always want to put tags in the and mark them as non-blocking using either async or defer. However, there's an interesting use-case for actually wanting to block paint.

Coldstarts are dead

Link: https://edjgeek.com/blog/lambda-cold-starts-dead/

When React parent components need to know their children

In React, it’s always preferable to maintain a linear data flow. If a parent needs something, lift the state instead of smuggling it back up. All rules are made to be broken, though.

Module System Dependency Injection in React & Friends

What does 'use the module system for global dependency injection' actually mean, and is it a good substitute for real DI?

Vitest async fixture destructuring

GitHub's Ace with Maggie Appleton

Link: https://maggieappleton.com/zero-alignment/

Progressive enhancement options for traditional server-rendered sites

What's the best way to progressively enhance a traditional server-rendered application with client-side JavaScript in 2023? Despite their glacial adoption, web components remain the closest we have to a platform-native solution.

Stubbing GraphQL using Playwright

A more ergonomic solution to stubbing out multiple GraphQL responses using Playwright.

Locking body scroll for modals on iOS

Revisiting old solutions for preventing background scrolling from within modal dialogs & overlays.

Leveraging extends to infer return types

In many statically typed languages, once we accept a generalised interface as a parameter we lose the ability to retrieve concrete values from our return type. Not so in TypeScript.

Defining 'integration' tests

What is an integration test? Everyone uses the term, but few seem to agree on the definition. Does the awkward filling of the testing pyramid still have value today, or is it too murky to be of real value?

An Opinionated Guide to Unit Testing

A language-agnostic guide on how to write maintainable, loosely-coupled unit tests which provide confidence and reduce fragility.

Frontend Predictions for 2022

Thoughts on what we might see in the coming year, including the return of micro-frontends, functional JavaScript & the demise of the Jamstack as we know it.

Wrapping text inside an SVG using CSS

Using two SVGs and shape-outside to wrap text inside a shape.

Stubbing GraphQL using Cypress

A more ergonomic solution to stubbing out multiple GraphQL responses using Cypress.

Avoiding FOUT with Async CSS

Fighting blocking resources and the fabled flash-of-unstyled-text with Adobe Fonts.

The jest.mock() escape hatch

Mocking concrete dependencies is a code-smell.

Follow the Grain

Spend less time trying to fix things, and more time trying to understand them.

Cutouts with CSS Masks

Creating a button with a notch cut out using composited CSS masks.

Bulletproof flag components

A resilient take on a flag-like media object.

Contained aspect-ratio boxes

A modern attempt at creating a CSS-only aspect-ratio box that fills its wrapper.

React Portals with Hooks

Since Hooks have just been introduced into the latest stable build of React, it's a great time to play around with them and think about how previous component structures and paradigms (including classes and HOC's) can fit within them.

Text Wrapping & Inline Pseudo Elements

A really common pattern on the web is adding an icon or indicator using a pseudo element so it appears before or after an element, such as an external link indicator.

ES6 Proxies

I recently discovered ES6 proxies, essentially a means to intercept properties accessors and methods and either override or extend them.

Entanglement

Starting the design process nowadays is overwhelming. There are dozens of methodologies and hundreds of 'best-practices'.

Perils of Atomic Design

Modular design methodologies, such as Brad Frost's Atomic Design, offer consistency and maintainability. But do they also foster fragmentation?

Extremes

Print often encourages us to design around everyman data, while the web forces us to do the opposite.

Masking Bitmaps with SVG

Peter’s trick involves leveraging SVG’s support for masking to provide JPEGs with a means to transparency, and therefore the best of both worlds.

Design Differently

MengTo's article on how designers approach code made me wonder about how my coding affects the way I design.

Tree Felling

At Responsive Day Out Oliver Reichenstein introduced the Container Model, a new means of information architecture that recalls the origins of the web.

Access

Good design, UX and otherwise, has always been about improving the content's accessibility. The difference is that in designing a box to fit any object we have failed to design anything at all.