theetrain

Adopting Svelte at your workplace

Notes from an informal Discussion on the Svelte Discord: https://svelte.dev/chat.
Event took place on 2026 July 29.

When a team or product could be ready to choose Svelte or SvelteKit

"Perfect storm greenfield project": a combination of:

• Product debt
• UX debt

theetrain

Why

British Columbia will make daylight savings time permanent, and we need to ensure our systems respect those changes so that dates and times appear correctly in those user's locale.

Article: https://vancouversun.com/news/bc-daylight-time-permanent

Preliminary research

I was curious to know how various operating systems and platforms handle updates to timezone data:

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",