Svelte and SvelteKit (JavaScript)

• austrian-web-dev-companies.pages.dev Demo project with the new Svelte v5 ($state), SvelteKit v2 and Simple.css.
• mandrasch/mandrasch.dev - Personal site with multilanguage markdown loading
• mandrasch/sveltekit-inlang-paraglide-demo - Simple i18n demo with SvelteKit and @inlang/paraglide-js-adapter-sveltekit
• DDEV unofficial Web UI - frontend experiment
• tzettel.mandrasch.eu - Daily work sheet (Tageszettel) web app
• mandrasch/train2lake - Demo of SvelteKit and WordPress REST API (Gutenberg)
• mandrasch/sveltekit-headless-wp-rest-demo - Connect SvelteKit to WordPress REST API (Gutenberg)
• Guides:
  • Svelte 5: Share state between components (for Dummies)
  • Deploy SvelteKit with SSR on Coolify (Hetzner VPS)
  • Host SvelteKit apps with SSR-support via ploi.io (on Hetzner Cloud)
  • Rich Harris explains why SvelteKit pushes for Server Side Rendering (and against SPA / CSR)
  • Hosting SvelteKit as SSR on mittwald SpaceServer

Craft CMS (PHP / MySQL)

Craft CMS is an awesome fit for web agency work, especially with plugins like Sprig and Blitz Cache.

• CraftCMS Launchpad - Interactive CraftCMS demos in your browser, powered by DDEV.
• mandrasch/ddev-craftcms-vite - Demo repository for Vite usage with DDEV
• mandrasch/craftcms-sprig-green-coding-jobs-demo - Demo project of my first steps with Sprig, an htmx-powered plugin for Craft CMS
• Guides:
  • Deploy CraftCMS via ploi.io on Hetzner cloud (the fast way)
  • Install Craft CMS v5 with one command via DDEV
  • Develop with CraftCMS + Vite + DDEV in Codespaces (experimental)

DDEV-related

DDEV is a swiss army knife for Docker-based PHP development environments, I maintain some tutorials and demo project in my free time.

• Prototype work:
  • DDEV unofficial Web UI - frontend experiment
• Guides:
  • Working with Vite in DDEV - an introduction (ddev.com)
  • Personal notebook: my-ddev-lab.mandrasch.eu
  • Install Laravel with Vite support in DDEV (Docker)
• Demos:
  • CraftCMS Launchpad - Interactive CraftCMS demos in your browser, powered by DDEV.
  • mandrasch/ddev-sveltekit-postgres - Dockerized SvelteKit with PostgreSQL
  • mandrasch/ddev-laravel-vite - Laravel with DDEV, including support for Vite
  • mandrasch/ddev-laravel-breeze-vite - Demo for Laravel Breeze StarterKit
  • mandrasch/ddev-wp-acf-blocks-svelte - WP ACF Blocks meets Svelte
  • mandrasch/ddev-pull-wp-scripts - Pull scripts to sync WordPress to DDEV
  • mandrasch/ddev-typo3-vite-svelte - Svelte meets TYPO3 + Vite in DDEV

Web Animation

• mandrasch/rive-vite-demo - Demo for usage of Rive animations in Vite projects
• mandrasch/spline-selfhosted - Demo of selfhosting of Spline 3D scene (exports)
• mandrasch/astro-landing-page-spline-viewer-demo - Astro meets Spline Viewer

Web Accessibility

My dream would be a website called screenreadthis.org - which will give developers instantly the screenreader output of websites - without learning keyboard shortcuts for real screenreaders first (which is a major blocker for testing imho). Unfortunately I didn't find a quick way to remote control real screenreaders (yet). Only managed some to implement some experiments:

• mandrasch/screenreadthis - prototype with Puppeteers accessibility snapshot (experimental)
• mandrasch/not-a-real-screenreader - electron (experimental)
• mandrasch/screenreader-remote-control - electron, control laptop via second device (experimental)
• mandrasch/pa11y-pipeline-dashboard

See also assistivlabs.com for remote screenreader testing.

Open Education

• OERhörnchen - Search interface for Open Educational Resources (OER)
• aktuelle-erderhitzung.de
• klimakrise-schnelldurchlauf.mandrasch.eu

Eleventy

• mandrasch/11ty-plain-bootstrap5 - Plain template for static site generator Eleventy with Boostrap v5