Writing• Locking body scroll for modals on iOS
Revisiting old solutions for preventing background scrolling from within modal dialogs & overlays.
Writing• 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.
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.