Web Development Reference

Contents

• CSS Libraries
  • TailwindCSS
• CSS-in-JS
  • CSS Modules
  • emotion
  • linaria
  • Panda
  • styled-components
  • StyleX
  • vanilla-extract
• Component Libraries
  • Base UI (mui/base-ui)
  • Radix
    • Repository Overview
    • Primitives
      • Slot
    • Notes
    • Resources
  • shadcn/ui
    • Notes
    • Repository Overview
    • Resources
• Other Libraries
  • Class Variance Authority (cva)
  • PostCSS
• Web APIs
  • IndexedDB
  • WindowOrWorkerGlobalScope
• Events
  • Keys
  • Management
  • onFocus()
• Create a favicon.ico from .png
• Resources
• Web Development Terminology

CSS Libraries

TailwindCSS

Tailwind CSS Reference

CSS-in-JS

CSS Modules

The gist:

• create style.css
• import it into your component
• use it as a JavaScript object

Of note:

• different implementations may have different requirements (e.g. naming files with suffix module.css).
• not a dedicated library
  • documented at css-modules/css-modules
  • left to frameworks / build tools to implement

emotion

• emotion-js/emotion GitHub repository
• emotion documentation

linaria

• callstack/linaria GitHub repository
• linaria homepage
• linaria documentation

Panda

• chakra-ui/panda GitHub repository
• Panda documentation

styled-components

• styled-components/styled-components GitHub repository
• styled-components documentation

StyleX

Type-safe style compiler for authoring strict styles in TypeScript / JavaScript.

• not a utility CSS framework

• ?? works with server components as all styles are generated at compile time ??

• provides types

• may be difficult to integrate with build tooling

• nmn/tw-to-stylex - A simpler code translator to convert code using Tailwind to code using StyleX

• facebook/stylex GitHub Repository

• StyleX documentation

  • Thinking in StyleX is very helpful

vanilla-extract

• vanilla-extract documentation
• vanilla-extract-css/vanilla-extract GitHub repository

Component Libraries

Base UI (mui/base-ui)

• Base UI documentation
• mui/base-ui GitHub repository

Radix

From README.md:

Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.

I think of Radix as the supplier of unstyled React components to build upon. They have solved common functionality and behavior problems (e.g. “how exactly should a context menu work?”) and can be built upon.

Repository Overview

Primitives

A primitive component Foo has exports such that:

I believe this is for the DX of always having .Root access the topmost radix-ui component of the module.

Slot

• allows an optionally passed child element to “slot in” a preferred DOM element instead of the default radix-ui element
• controlled on other primitives via prop asChild
• packages/react/slot/src/slot.tsx

Notes

• preventDefault is overloaded: it no longer means just prevent the default user agent behavior, but also prevent the default radix-ui component behavior—this is intentional as an escape hatch. I do not know yet why the DOM API is being co-opted rather than defining an explicit contract; my guess is that in practice just having an API that returns an event reduces the mental overhead. Look at the implementation of composeEventHandlers in packages/core/primitive/src/primitive.tsx for further information
• dispatchDiscreteCustomEvent calls ReactDOM.flushSync; see packages/react/primitive/src/primitive.tsx and radix-ui/primitives/pull/1378 for further explanation
• a lot of the comments regarding accessibility reference other libraries (ally.js, bootstrap, etc) and I don’t know how much is still valid vs. just carried forward; I see references to having automated tests using screen readers so I assume that practical results are satisfactory
• uses data- attributes for easy styling with CSS selectors; the alternative is to build a controlled component that selectively applies the appropriate styles

Resources

• Radix Primitives documentation
• radix-ui/primitives GitHub repository containing components and hooks
• radix-ui/website GitHub repository containing website and user-facing documentation

shadcn/ui

From the Introduction:

shadcn/ui is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.

This is not a component library. It is how you build your component library.

This latter description is because its goal is to provide components whose source is copied directly into your repository and modified according to your needs.

Notes

The default style has been deprecated. Use the new-york style instead.

• also makes use of data- attributes for convenient styling with CSS rather than rewriting as controlled components in every framework flavor

Repository Overview

Resources

• shadcn-ui documentation
• shadcn-ui/ui GitHub repository

Other Libraries

Class Variance Authority (cva)

Structured way of defining JavaScript objects such that className strings can be composed based on defined “variants”. Inspired many CSS-in-JS libraries’ functionality.

• cva documentation
• joe-bell/cva GitHub repository

PostCSS

• PostCSS website
• postcss/postcss GitHub repository

Web APIs

IndexedDB

Client-side database implemented in JavaScript.

WindowOrWorkerGlobalScope

• fetch()
• setTimeout()

Events

Keys

Management

• stopPropagation()
• preventDefault()

onFocus()

Important: there does not appear to be a robust way of determining whether a focus event was initiated by user mouse, user keyboard, or programatic action.

Create a favicon.ico from .png

• create a .png file 512x512
• convert via:

$ convert public/image.png     \
  \( -clone 0 -resize 16x16 \) \
  \( -clone 0 -resize 24x24 \) \
  \( -clone 0 -resize 32x32 \) \
  \( -clone 0 -resize 48x48 \) \
  \( -clone 0 -resize 64x64 \) \
  -delete 0                    \
  -alpha off                   \
  -colors 256                  \
  ./public/favicon.ico

Resources

• WHATWG DOM Spec (One-Page Version)
• MDN DOM Reference
• MDN Events Reference
• MDN Console Reference
• Content Security Policty (CSP) Checker / CSP Evaluator

Others:

• About HTML semantics and front-end architecture
• Building Your Color Palette
• Refactoring UI: Table of Contents

Web Development Terminology

AD

active directory

DMZ

demilitarized zone; referring to subnetwork between an organization’s internal network and untrusted external networks

DOM

Document Object Model; a platform-neutral model for events, aborting activities, and node trees

IdP

identify provider

atomic CSS / atomic styles

one utility class name : one CSS rule. e.g. TailwindCSS’ flex -> display: flex;

client-side

the DOM and JavaScript that runs in the user’s browser

front end web server / UI server

server that serves static assets (JavaScript, CSS, HTML) and may route dynamic requests (other web pages, API calls)

headless component architecture

?? shadcn/ui uses; something something internals are able to be updated without affecting usage but I don’t see how ??

leaf component

the outermost / final descendant of a component tree

polyfill

a piece of code—typically JavaScript—used to provide modern functionality to browsers that do not natively support it

vendor prefix

the browser (vendor) prefix added to CSS rules and JavaScript APIs that enable browser-specific behavior. Note: According to MDN this is being phased out.