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:
- My deployment journey (so far) https://dev.to/mandrasch/series/18729
- My notes: https://my-ddev-lab.mandrasch.eu/tutorials/cms-and-frameworks/statamic.html#quickstart
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. 🧡
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.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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:
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.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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. 🚀
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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.
To be continued …
