My dev lab ๐Ÿ‘จโ€๐Ÿ”ฌ

An (uncomplete) list of my current dev experiments. Created with Sustainable Web Design-principles in mind, see my GitHub or dev.to for more.

Searching for a stack ๐Ÿ”Ž

I’m currently looking for a simple reliable stack …

  • … for multi user web apps:
    • Svelte + Inertia + Laravel + Tailwind[/Bootstrap] (SILT) would be my dream choice (in combination with Vite), but VILT(Vue) is currently better supported in regards to SSR ๐Ÿค”
  • … for simple, accessible and sustainable (client) websites:
    • Kirby + Bootstrap5 / Tailwind ?!
    • WordPress + Bootstrap5 / Tailwind + ACF/ … ?!

Statamic (+ DDEV)

I recently dived deeper into Statamic, a Laravel-based Content Management System ($). Currently I’m trying to figure out a good workflow:

Svelte and SvelteKit

I love the simplicity of Svelte and SvelteKit, looking forward to future times where Svelte is available in a lot of tools and frameworks. Built little helper projects so far: https://tzettel.mandrasch.eu/ and https://ddev-pull-wp.mandrasch.eu/. I currently explore Inertias integration of Svelte (see below).

11ty / Eleventy

11ty plain bootstrap5

When I started to work as fulltime web dev again a year ago, I was so happy to find a simple static site generator written in NodeJS called eleventy with a great and helpful community. ๐Ÿงก

Repo: mandrasch/11ty-plain-bootstrap5

DDEV + WordPress

DDEV enables standardized and isolated PHP dev environments across different operation systems and for multiple frameworks (WordPress, typo3, Drupal, Laravel, etc.). These environments can be fine tuned and shared via git – which is especially great for team collaboration. No need to fiddle around with local PHP configs anymore.
See drud/awesome-ddev for other awesome community projects and join DDEV discord. Please consider sponsoring Randy Fay.

Pull (provider) scripts for WordPress

Pull existing WP sites via ‘ddev pull ssh’ or import backup .zip-files into DDEV projects. Made possible via the DDEV providers intergration feature.

Repo: github.com/mandrasch/ddev-pull-wp-scripts

Click here to display content from YouTube.
Learn more in YouTubeโ€™s privacy policy.

Pull a WordPress site into a local DDEV project (2022 edition) – Raidboxes example

Launch a WP backup in your browser (via Gitpod)

Services like Gitpod (or Github Codespaces) are exciting because they enable “ephemeral developer environments”. There is no need anymore to setup everything in local folders just to fix a small bug. See this in action for cloning a WordPress site:

Read the tutorial

Headless WordPress

I explored the concept of headless WordPress for some weeks and made a small demo repo. In the end I had like a hundred questions for practical usage, but it was fun to explore. Make sure to follow Kellen Mace and Jason Bahl if you’re interested in this approach!

WPGraphQL + SvelteKit

Just a quick demo repo connecting WordPress via WPGraphQL with SvelteKit.

Repo: mandrasch/sveltekit-wp-bs5

Click here to display content from YouTube.
Learn more in YouTubeโ€™s privacy policy.

Laravel / Inertia

While I feel kind of home in WordPress dashboard, I’m looking for a small and robust solution to build web apps (or PWAs). InertiaJS seems very promising so far. I blogged about the concept of Inertia here: To API or not to API… Svelte and InertiaJS

(While I’d love to use it only with Svelte, Vue(/React) are currently better supported for server side rendering in Inertia.)

Vue + InertiaJS + Laravel Breeze + DDEV + Gitpod

Created a little demo repo which can be launched with one click in Gitpod. ๐Ÿš€

Repo: mandrasch/ddev-breeze-inertia-vue-starter

Click here to display content from YouTube.
Learn more in YouTubeโ€™s privacy policy.

Video: Run Laravel Breeze with Inertia Vue in your browser (DDEV / Gitpod)

Web Accessibility (#a11y)

Screenreader Remote Control

In my personal opinion web devs don’t really like to test with screenreaders because they aren’t regular screenreader users and therefore don’t remember the shortcuts needed. This is my idea on how to improve the situation.

Repo: mandrasch/screenreader-remote-control

Click here to display content from YouTube.
Learn more in YouTubeโ€™s privacy policy.

Accessible Menu Examples for NickDJM/accessible-menu (Bootstrap4/5)

Good and accessible menus are a challenge for web developers starting with a11y. Bootstrap for example only has core support for two level menus and they can only be opened by click while customers often have the desire for hover menus.

Repo: mandrasch/accessible-menu-bootstrap-examples

To be continued …