OliverJAsh

Avoiding CSS overrides in responsive components

I would like to demonstrate some of the benefits of scoped styles over mobile-first CSS with overrides for wider breakpoints. I'll start by explaining the two approaches, before listing the benefits.

Mobile-first with overrides for wider breakpoints

h2 {
  color: black;
 font-size: 2em;

OliverJAsh

{
  "scripts": [],
  "styles": []
}

OliverJAsh

import * as React from 'react';

const useIsFirstRender = (): boolean => {
  const isFirst = React.useRef(true);

  if (isFirst.current) {
    isFirst.current = false;

    return true;
  } else {

OliverJAsh

‎‎​

OliverJAsh

{
  "scripts": [],
  "styles": []
}

OliverJAsh

// On resize and img load events, logs:
// - `currentSrc` width (selected from `srcset`)
// - element width
// - parsed size value (selected from `sizes`)
// - a boolean indicating if the parsed size matches the element width

{

// There seem to be issues with `HTMLImageElement.natural{Width,Height}`, so we have to rely on this
// instead.

OliverJAsh

import * as React from 'react';

const useIsFirstRender = (): boolean => {
  const isFirst = React.useRef(true);

  if (isFirst.current) {
    isFirst.current = false;

    return true;
  } else {

OliverJAsh

Option vs non-Option

	Option<T>	non-Option (T | undefined)
accessing property	userOption.map(user => user.age)	userNullish?.age
calling a method	userOption.map(user => user.fn())	userNullish?.fn()
providing fallback	ageOption.getOrElse(0)	ageNullish ?? 0
filter	ageOption.filter(checkIsOddNumber)	`ageNull

OliverJAsh

import * as React from 'react';
import { Component, ComponentClass, createRef, forwardRef, Ref } from 'react';

const myHoc = <ComposedComponentProps extends {}>(
    ComposedComponent: ComponentClass<ComposedComponentProps>,
) => {
    type ComposedComponentInstance = InstanceType<typeof ComposedComponent>;

    type WrapperComponentProps = ComposedComponentProps & {
        wrapperComponentProp: number;

OliverJAsh

/*

In JavaScript, objects can be used to serve various purposes.

To maximise our usage of the type system, we should assign different types to our objects depending
on the desired purpose.

In this blog post I will clarify two common purposes for objects known as records and dictionaries
(aka maps), and how they can both be used with regards to the type system.