A mobile menu that pops in and out works, but it feels unfinished. In this article we turn it into a drawer that slides in from the right with a fading backdrop, using only Tailwind classes and no animation library. We also keep it usable for keyboar...

A header that works on a phone and on a desktop is one of the first things every site needs. In this part of the TanStack Start Basics series, we'll build one with inline links on wide screens, a hamburger menu on small ones, and a few accessibility ...

Layouts let us customize sections of our app based on their purpose, their content, or the look and feel we want. They give us the flexibility to mix things up, get more creative, and offer a really great UI/UX experience to our users. Navigation be...

Our frontend has been static so far — just hardcoded headings on a few pages. Today we connect it to the Directus backend built earlier in this series, using the official Directus SDK to pull real product data into our TanStack Start app. Youtube Vi...

We've finished our backend series — a Directus instance running on a VPS managed by Coolify, backed by PostgreSQL and Redis, with a products collection already built and secured with roles and permissions. Now it's time to build a frontend to actual...

This is part three of our Directus Basics series. In part onehttps://www.youtube.com/watch?v=tJGuxqhv2SY&t=12s we set up our instance, and in part twohttps://www.youtube.com/watch?v=7SNrBzaxreg&t=108s we covered relationships between collections. Tod...

This is part two of our Directus Basics series. In part onehttps://www.youtube.com/watch?v=tJGuxqhv2SY&t=6s, we set up a Directus instance and created our first collection. Today we're covering one of the most powerful features Directus offers: relat...

> This is Part 1 of a three-part series on Directus fundamentals: Collections this post, Relationships, and Permissions. New to Directus? Start here. Youtube Video - Directus Collectionshttps://www.youtube.com/watch?v=tJGuxqhv2SY&t=2s Introduction ...

> This is Part 2 of the Directus + Coolify series. If you're new here, start with "Secure Your VPS Before Hackers Do" and the first Directus + Coolify post — the bundled, single-Compose-file setup — before following along with this one. Introduction...

Introduction Directus is a backend for developers. It can connect to any SQL database and asset storage, and it provides developer tooling — which the Directus team calls the "Data Engine" — alongside a web application that lets both developers and...

!Watch the videohttps://img.youtube.com/vi/VIDEOIDHERE/0.jpghttps://www.youtube.com/watch?v=jlUzYm6W-bI Coolify's one-line install script is great — until it isn't. Right now it officially supports Ubuntu 20.04, 22.04, and 24.04 LTS. If you're runni...

Ansible Playbooks — Automate VPS Hardening, User Creation & Removal Link to youtube Video on these playbookshttps://www.youtube.com/watch?v=vl8IW8F1mxA Introduction In this post I'm sharing 3 Ansible playbooks I use to manage my VPS servers. I wo...

Introduction What is Ansible? Ansible is an automation language that can describe any IT environment, whether home-lab or large-scale infrastructure. It is easy to learn, beautiful code that reads like clear documentation. There are many repetitiv...

Introduction Having purchased our VPS, we're well on our way to setup Coolify. I'm getting excited and I hope you're excited about that, but before we actually get to that installation there is another step we must take. We must secure our VPS. My Li...

Introduction Continuing on our developer's journey, we will manage our Directus backend, supported by a PostgreSQL database and a Redis cache. To pull this off, we will need a VPS. As I would have stated in my previous post, we have to manage our V...

Introduction In the last post, we talked about the VPS and why it is a compelling option for hosting your web applications. I mentioned a tool called Coolify that makes managing a VPS significantly easier. In this post, we are going to dive deeper i...

Introduction Every great web application with millions of users has an even greater back end — and it has to be. Accessing your app over a prolonged period of time will test the integrity, availability, and speed of your back end. Backend technolog...