Vanilla JS & wireframing


Welcome to the first newsletter in 2020! Last month, I was still ramping up after the holiday season, so I skipped January. One month further, and I’m deep into my first weekly post series and designing wireframes for an application in the open.

JavaScript Framework Diet

We released Mailcoach a few weeks ago. Mailcoach is a self-hosted newsletter solution. It’s a Laravel app, and instead of reaching for React or Vue like we’re used to, we decided to build the UI with plain Blade and vanilla JavaScript.

I wrote an article about the why: Mailcoach’s (lack of) JavaScript stack. To share the how I decided to embark on a new journey: a series of weekly posts explaining how to build common components like dropdowns and modals without a framework.

It’s called JavaScript Framework Diet. The introduction and first three posts are already out:

This week will be all about structuring the files containing your scripts.

Building wireframes in the open

Hot on the (w)heels of Mailcoach, we started a new side project to manage database and file backups. The core is almost feature-complete, next up is the UI. We communicate very openly about code at Spatie, but we rarely share anything about our analysis and design processes.

I started to wireframe the project and decided to share my progress on Twitter. Since the backups app is a side project, I mostly work on it in short 30 to 45-minute streaks during my commute to wind down from client work. I decide on a scope to achieve in that short timespan, execute, and tweet out my thought process while it’s still fresh.

I’m using wires, a little internal prototyping tool, which is a Next.js app with some added utilities for prototyping. The tool is open-source on GitHub but undocumented for now.

Follow along on the ever-growing Twitter thread!

On the horizon

I have some time off next week, so I’ll probably be taking a break from the JavaScript Framework Diet until March. Next month, I’m going to continue my weekly streak of posts, and resume my work on the backup app wireframes.

Until the next issue,