glennsweeney.github.io

Environment

1. Install nvm

2. Install node:

   nvm install node

Project Setup

1. Start a SvelteKit project (docs)

Developing

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev -- --open

Building

Preview Version

npm run preview

Production Version

npm run build

Notes:

rem/em/px accessibility:

Plan on testing both at different scales AND at different default font sizes.

• Font sizes: relative units (rem/em) so that browser default font sizes function.
• Horizontal padding/margin: often pixels, because we don't want to amplify margin with font scale.
• Vertical padding/margin: Used for readability; scaling might be good and vertical scroll is easier.
• Heading/paragraph margin: em is sometimes nice instead of rem because they'll scale with the font size automagically.
• Borders: Unless there's a strong reason to scale, pixels are ideal.
• Media queries: rem are great, because we'll hop over to a layout more optimized for available space earlier.
• Buttons and such: Could be either, but use relative unless you have a good layout reason and are willing to have text wrap, etc.