• Writing

    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?

  • Writing

    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.

  • Writing

    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.

  • Writing

    Wrapping text inside an SVG using CSS

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

  • Writing

    Stubbing GraphQL using Cypress

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

  • Writing

    Avoiding FOUT with Async CSS

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

  • Writing

    The jest.mock() escape hatch

    Mocking concrete dependencies is a code-smell.

  • Writing

    Follow the Grain

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

  • Writing

    Cutouts with CSS Masks

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

  • Writing

    Bulletproof flag components

    A resilient take on a flag-like media object.

  • Writing

    Contained aspect-ratio boxes

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

  • Writing

    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.

  • Writing

    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.

  • Writing

    ES6 Proxies

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

  • Writing

    Entanglement

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