theetrain

Have an accessibility-first mindset

Users of the web live with a spectrum of abilities. We need to be abundantly cautious to not create barriers to information access such as in these cases:

• Truncating essential information that either requires more interactions to view, or leaves the user stranded.
• Using colour alone to convey information that is not interpretable by colour blind individuals.
• Providing feedback after an interaction is made, but not focusing on that feedback; which is invisible to users with a screen reader or screen magnifier.
• Providing keyboard shortcuts for elements that have built-in standard shortcuts without informing the user, potentially breaking their workflow or breaking their assistive technology.

More information, data, guides, and resources: Accessibility.

theetrain

Accessibility

Why

When providing services to people in various regions, we are beholden to certain laws and regulations:

• Accessibility for Ontarians with Disabilities Act (AODA)
• Accessible Canada Act (ACA)
• Americans with Disabilities Act (ADA)

theetrain

{
  "name": "@internal/ui-svelte",
  "version": "0.0.0-semantically-released",
  "description": "Component library for the common Svelte components",
  "license": "SEE LICENSE IN LICENSE",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/redacted/ui-svelte.git"
  },
  "files": [

theetrain

<!--
  "Reacting to checkboxes" by Enrico
  https://github.com/theetrain

  Synchronizes checkbox state between two different views
  of checkboxes.
-->

<script>
	import Container from './Container.svelte'

theetrain

Cool Vite thing I learned today; @import in .css files will be inlined at build time.

/* main.css */
@import url('variables.css');
@import url('normalize.css');

This becomes a single CSS file in the production build; and if you happen to add it to a shared library (npm package), you can have it auto-import global styles along with Svelte components.

theetrain

import { maybeStream } from '$lib/utils'

/** @type {import('./$types').PageServerLoad} */
export async function load({ isDataRequest }) {
  const combinationResponse = maybeStream(pretendAPI(), { isDataRequest })
  const otherCombinationResponse = maybeStream(pretendAPI(), { isDataRequest })

  let [combination, other] = await Promise.all([
    combinationResponse,
    otherCombinationResponse

theetrain

import { connect } from '$lib/server/pbclient'
import { redirect, type Actions } from '@sveltejs/kit'

export const actions = {
	create: async ({ request, cookies }) => {
		const data = await request.formData()
		const post = [...data.entries()]

		const pb = await connect()

theetrain

{
  "root": true,
  "extends": ["prettier", "standard"],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "arrow-parens": ["error", "as-needed"],
    "operator-linebreak": ["error", "before"],
    "no-trailing-spaces": [
      "error",

theetrain

theetrain

Audio captioning

Here are some ways to enable live captioning on your devices.

Operating systems

• macOS: https://support.apple.com/en-ca/guide/mac-help/mchlc1cb8d54/mac
• Windows 11: https://support.microsoft.com/en-us/windows/use-live-captions-to-better-understand-audio-b52da59c-14b8-4031-aeeb-f6a47e6055df
• Android 10+: https://support.google.com/accessibility/android/answer/9350862?hl=en
• iOS: https://support.apple.com/en-ca/guide/iphone/iphe0990f7bb/ios