DEV Community: Dave Mackey

Supabase CLI and Docker Mounts Denied

Dave Mackey — Fri, 22 Aug 2025 18:25:19 +0000

It was supposed to be simple. I've worked with Supabase before. I've used the Supabase CLI before. This shouldn't take long.

npx supabase start

The Docker images are downloaded successfully and the containers are being built when:

failed to start docker container: Error response from daemon: mounts denied: The path /socket_mnt/home/username/.docker/desktop/docker.sock is > not shared from the host and is not known to Docker. You can configure shared paths from Docker -> Preferences... -> Resources -> File Sharing.

Ummm, what?

The Supabase CLI doesn't place the Docker files into one's repo - it's meant to be transparent. That's great until one runs into problems.

I found a Supabase CLI issue on GitHub that discusses the problem. The problem seems to only occur when using Analytics. The easiest workaround is to update the config.toml for one's project from:

[analytics]
enabled = false
...

to:

[analytics]
enabled = true

No, I don't like this solution...but it is the easiest (assuming you don't need analytics).

Thoughts on StackOverflow 2025 Developer Survey

Dave Mackey — Mon, 04 Aug 2025 17:04:15 +0000

This isn't a systematic analysis of StackOverflow's 2025 Developer Survey, it's the random tidbits I found most interesting.

(Okay, this was taking way longer than I anticipated, I'm breaking it up into two parts but also, I'm being long-winded. :-P Usually I go back and trim things down but if I don't post this now, I never will).

Developers Profile

I'd like to see educational degrees split up by area of study. I've been doing this for years and have a B.S. but it's not even tangentially related to coding.

Technology

It would be great to see these results graphed over time.

Programming Languages

I appreciate that SO broke out JS and TS as two separate entries, but I'd also love to know what the percentage is when the two are combined. There would be a lot of overlap so it isn't as simple as adding the two percentages together.

Databases

PostgreSQL dominating isn't surprising.
I'm a little surprised that Valkey is relatively low (2.4%) compared to Redis (28%). I'll be interested to see if these percentages shift significantly in the next 12 months.
It's interesting that Supabase is broke out separately from PostgreSQL, as under the hood it is PostgreSQL.
I find it OpenSearch doesn't appear on the list. I'm wondering if many OpenSearch folks checked off Elasticsearch because that is what was listed?

Cloud development

This is an interesting list, a number of the tools on this list can be used in cloud development but I wouldn't consider them cloud development tools (e.g. npm, pip, homebrew...).
I'd maybe consolidate this list a bit to:
- Docker - 71.1%
- AWS - 43.3%
- Kubernetes - 28.5%
- Microsoft Azure - 26.3%
- Google Cloud - 24.6%
- Cloudflare - 20.1%
- Terraform - 17.8%
- Firebase - 13.1%
- Digital Ocean - 10.7%
- Vercel - 10.6%
- Netlify - 5.9%
- Supabase - 5.4%
- Heroku - 5.4%
- IBM Cloud - 1.2%
- Yandex Cloud - 0.7%
I'm not familiar with all the tooling on the list, which should be on there that I didn't include? There were a few that were uncertain for me...
I consider knowing Docker to be essential for developers working with the web. If you don't know it or a comparable containerization technology and are looking for a job - learn it, please. :)
Cloudflare has really been stepping up its offerings on a continuous basis and are impressively close to Google Cloud and Microsoft Azure, much older players in the space.
Supabase has acquired a respectable 5.4%, I anticipate that continuing to increase and would be surprised if some of that growth doesn't come at Firebase's expense.

Web Frameworks and Technologies

Wow, there is a lot of tech lumped in here. Let's break this down a bit:

JS/TS

Runtimes
- Node.js - 48.7%
- Deno - 4%
Frontend Frameworks
- React - 44.7%
- jQuery - 23.4%
- Angular - 18.2%
- Vue.js - 17.6%
- AngularJS - 7.2%
- Svelte - 7.2%
Server Side
- Next.js - 20.8%
- Express - 19.9%
- NestJS - 6.7%
- Astro - 4.5%
- Nuxt.js - 4%

.NET

ASP.NET Core - 19.7%
ASP.NET - 14.2%
Blazor - 7%

Python

FastAPI - 14.8%
Flask - 14.4%
Django - 12.6%

PHP

WordPress - 13.6%
Laravel - 8.9%
Symfony - 4%
Drupal - 2.2%

Java

Spring Boot - 14.7%

Ruby

Ruby on Rails - 5.9%

Dev IDEs

As with Web Frameworks lets break things down a bit here:

Language Agnostic

Visual Studio Code - 75.9%
Visual Studio - 29% (agnostic-ish)
Notepad++ - 27.4%
IntelliJ IDEA - 27.1% (agnostic-ish)
Vim - 24.3%
Cursor - 17.9% - AI
Neovim - 14%
Nano - 12.2%
- More a text editor than an IDE.
Sublime Text - 10.5%
Claude Code - 9.7% - AI
- This isn't really an IDE in any traditional sense.
Zed - 7.3%
- I haven't had a chance to use it, but I love that it is native code, not running on a browser.
Eclipse - 7.1%
VSCodium - 6.2%
Windsurf - 4.9% - AI

Java

IntelliJ IDEA - 27.1%
Eclipse - 7.1%

Python

PyCharm - 15%
Jupyter Nb/JupyterLab - 14.1%

Android

Android Studio - 15%
- I'd really like to see a competitor to this.

Apple

Xcode - 10%

JS / TS

WebStorm - 7.6%

.NET

Visual Studio - 29%
Rider - 7.1%
- I tend to use both VS and Rider when working on .NET projects, with a preference for Rider.

PHP

PhpStorm - 5.8%

Rust

RustRover - 3.2%

RAD AI Tools

I wouldn't consider these IDEs in any traditional sense.

Lovable.dev - 2.4%
Bolt - 2.3%

It's worth noting that a huge number of these IDEs are created by JetBrains (IntelliJ IDEA, Android Studio, PyCharm, WebStorm, Rider, PhpStorm, RustRover)!

If you know how to use one you will feel comfortable with others.

Also worth noting is that a number of the options are forks of Visual Studio Code (e.g., Cursor, VSCodium, Windsurf) and as such use a browser under the hood. Traditionally this has run pretty smoothly but with AI I'm finding that the browser rendering engines seem to struggle - this is true across IDEs and other apps (e.g. Chrome/Edge, Spotify).

Large Language Models

I've spent most of my time with OpenAI and Anthropic (Claude) models with minor experimentation with Gemini. I'm particularly interested in the Microsoft Phi-4 models as I think there is promise in smaller LLMs for many tasks.

Code Documentation and Collaboration Tools

This area could be split into a number of different areas and I wouldn't see a number of them as competitors.

Version Control

Both of the options here do a lot more than version control including CI/CD.

GitHub - 81.1%
GitLab - 35.6%

Project Management

Jira - 46.4%
- This is common across the industry but I'm not sure I've met anyone who loves it.
Azure Devops - 16.6%
- Is this where Devops fits? I've barely used it.
Trello - 13.7%
- Now owned by Atlassian, who created Jira.
Asana - 4.4%
Clickup - 3.9%
- I am using this for some stuff currently and have found it to be a bit buggy.
Linear - 3.7%
- I haven't used it recently, but when I did it was a pleasant experience.
Microsoft Planner - 2.9%
Monday.com - 2.6%
Redmine - 2.5%
Airtable - 2.5%
- I like this, it does more than project management...I'm not sure where to put it.
YouTrack - 2.4%

Collaboration / Documentation

Markdown - 34.8%
- I love markdown.
Confluence - 32.8%
- Also by Atlassian, I like it more than Jira.
Notion - 16.5%
Obsidian - 16.1%
- This is for editing/managing markdown.
Google Workspace - 15.2%
Miro - 14.3%
- Whiteboard
Wikis - 10.4%
- Best of both worlds is if you can use markdown in repos and have it fed into your wiki which covers more than individual repos.
Google Colab - 7%
- I see this as more like Jupyter.
Lucid (Lucidchart) - 5.3%
- Whiteboard and Diagrams
Doxygen - 4.3%
Stack Overflow for Teams - 2.4%
Coda - 1%
- Similar to Notion

Operating Systems

It took me a long time to get used to the fact that folks preferred Macs over Windows or Linux for coding. I think I've been around computers for too long and pre-*nix Mac I associated with artistic creative endeavors.
The stat about Android exceeding Ubuntu usage is a bit confusing. People are doing significant amounts of development on Android? I find that hard to believe (unless its due to economic constraints).
imho, following MacOS there should be a Linux category. Ubuntu, Linux (non-WSL), WSL, Debian, Arch, Fedora, Red Hat, etc. are all Linux distributions.

AI Agent Data Storage Tools

I'm a bit surprised to see supabase clocking in here at 20.9%!

AI Agent Orchestration Tools

Ollama - 51.1%
LangChain - 32.9%
LangGraph - 16.2%
Vertex AI - 15.1%
Amazon Bedrock Agents - 14.5%
OpenRouter - 13.4%
Llama Index - 13.3%
AutoGen (Microsoft) - 12%
Zapier - 11.8%

AI Agent Observability and Security

Grafana + Prometheus - 43%
Sentry - 31.8%
Snyk - 18.2%
New Relic - 13%
LangSmith - 12.5%

AI Agent Out-of-the-Box Tools

ChatGPT - 81.7%
GitHub Copilot - 67.9%
Google Gemini - 47.4%
Claude Code - 40.8%
Microsoft Copilot - 31.3%
Perplexity - 16.2%

Company Size

I'm surprised by how few developers are working solo (3.9%)!

The Dangers of Vibe Coding Part 1: Premature Optimization

Dave Mackey — Wed, 23 Jul 2025 14:20:40 +0000

Stronger Hook in the Intro:

I wrote this article, but I asked ChatGPT for recommendations on how to improve it. It suggested I needed a stronger hook for the intro and I enjoyed its suggestion:

"I set out to build a simple browser extension. Two hours later, I was knee-deep in cyclomatic complexity metrics. Welcome to vibe coding with AI." -- ChatGPT.

Your Regularly Scheduled Intro...

Funny, intelligent, and not at all the way I talk...anyways...

I've noticed an issue I've run into repeatedly with vibe coding is premature optimization. It happened again with a simple browser extension (ForgetfulMe) I'm vibing currently.

No, I'm not talking about the AI doing premature optimization on its own (though that happens frequently). Instead, I'm talking about the AI tempting me to focus on premature optimization.

"TL;DR: AI coding assistants are great at pointing out problems—but they also make it dangerously easy to procrastinate via premature optimization. In early-stage projects, chasing perfection can stall real progress." -- ChatGPT.

The Temptations of AI Feedback

One of my practices is to regularly ask the AI to create a markdown document with significant ways in which the code can be improved, bugs that need fixing, and best practices that aren't being followed. This works well, a little too well.

For example, when I recently asked it to analyze the codebase for dead code it did so and included some additional tidbits such as:

A. Overly Complex Functions

Several functions exceed the complexity limit of 10:

High Complexity Functions

handleMessage in background.js (complexity: 19)

handleSignup in auth-ui.js (complexity: 11)

getBookmarks in supabase-service.js (complexity: 16)

categorizeError in error-handler.js (complexity: 38)

getUserMessage in error-handler.js (complexity: 21)

createButton in ui-components.js (complexity: 12)

createFormField in ui-components.js (complexity: 11)

createListItem in ui-components.js (complexity: 12)

toSupabaseFormat in bookmark-transformer.js (complexity: 15)

Impact: High - Reduces maintainability and testability
Recommendation: Break down into smaller, focused functions

Well, none of that is good. It also reported on the files I have exceeding 300 lines, functions with too many parameters, and the list goes on.

At other times it's recommended implementing dependency inversion, updating integration tests - you get the idea.

It has an abundance of ways that I can and should improve the code base (now if only AI wrote a clean codebase to start with!).

Why It's a Trap

The danger is that I get distracted from what I was actually trying to accomplish (building X feature or fixing Y bug) and spend precious time on refactoring.

Yes, these things need to be done - but especially for early prototyping building something is more important than building something perfect.

Even as I say that it sits poorly in my mouth. I like architecting things the right way, I don't like sloppy code. I'd rather take a little longer to implement things well than save some time writing messy code.

But...

Conclusion

If AI is to be used productively we have to balance developing features against perfecting code. For side projects, for early prototyping too much optimization is a bad thing. Sure, the AI can do it for us, but (at least currently) this isn't a fast process and the hours we spend on refactoring are hours not spent on building out basic functionality.

What do you think?

"Have you caught yourself vibe coding into a refactoring rabbit hole? How do you balance AI feedback with actual progress?" -- ChatGPT.

What Else Did ChatGPT Do?

I followed its suggestion to break up a long paragraph.
I also implemented section headings as it suggested, but generally used my own wording.

Difficulties of Being Neurodivergent (and/or Chronically Ill) at a Conference

Dave Mackey — Sat, 26 Apr 2025 20:26:57 +0000

[Thanks to Sarah Matta for the photo which is of me as I begin a Lightning Talk at Haystack. See Sarah's LinkedIn post for original context.]

Introduction

I really enjoy going to conferences.
They are awesome!
I love the learning and the conversations!
Simultaneously, I find them stressful and exhausting.

Over time I have developed a growing awareness of how conferences affect me as well as various accommodations that improve my enjoyment, increase my participation, and minimize mental and physical health effects.

Yesterday I returned from the Haystack US conference. It was AWESOME and yet it was also stretching and exhausting.

Maybe for some neurodivergents conferences are easy-peasy, but I know I'm not alone in finding conferences difficult, so I want to share what I've learned. I'd also love to hear your thoughts on attending conferences and ways in which you've learned to help yourself experience and participate at maximal levels.

Buffer The Conference

I do much better when I arrive the day before a conference and leave the day after. I highly value both, but before the conference is essential. It allows me to get some rest and enter the conference with higher levels of energy and resilience.

If I have my druthers I also like to tag an extra day on after the conference. This allows me to spend some time in the conference location being a tourist. This means I don't feel the need to try and cram this in during the conference.

Bring Supplies

I like to bring:

My laptop bag
A laptop (duh) and the AC adapter
Earbuds
Tissues (allergies, cold, etc.)
Note pad (for hand-written notes...okay, mainly for doodling)
Pens (multiple!)
Business cards (though I rarely hand these out these days, mainly connect via LinkedIn)
Snacks (a decent variety including some that provide protein)
Refillable water bottle (I use a Cirkul, the flavor helps me drink more)
Deodorant
Hand Sanitizer
Medications (e.g. lactaid pills, acid reducers, etc.)

Giving Permission

I find people are usually abundantly gracious towards others - and yet many of us struggle to show this grace to ourselves. There are rarely folks looking down on us for leaving early, taking a break instead of attending a session, or not proactively seeking out social conversations - but we often berate ourselves for this behavior.

Here are a few ways I give myself permission during conferences:

Taking Breaks

I allow myself not to attend a session (or multiple!) and to take a break. For me this can be a walk, a trip to a bookstore, or (most often) a nap. Sometimes this is because I'm not interested in any of the sessions available at the moment but more often it's because I need a break - and that's okay!

Missing Out

What's harder is when there is something I really want to do and I have major FOMO but I need to skip it anyways. At Haystack I attended the BBQ on Monday night and it was awesome! On Tuesday, despite my strong desire, I skipped the meetup after the workshops. I knew I was depleted and that while I could be physically present I likely wouldn't be intellectually or emotionally present.

I left before the bitter end from the Wednesday dinner and excused myself early from the Thursday dinner.

Why? On Wednesday it was because I knew I needed the rest to be ready for Thursday. On Thursday it was because I realized that I was already cooked.

Goofing Off

I have an incredibly hard time sitting still during lectures (yes, I do have ADHD, thank you very much). I tend to battle this by taking fairly copious notes (yes, I know the slides are available, I'm typing so I stay focused!). But sometimes that isn't enough. You might catch me browsing the web, writing some code, or doodling on a piece of paper.

I want to hear what the speakers have to say and at the same time sometimes I need a break. Rather than making myself miserable, I allow it.

Securing Focus

I cannot focus if there is noise around me - particularly if it is human voices. If I'm in a workshop or a presentation that involves extended concentration and interaction (e.g. setting up an infrastructure or writing code) and incidental conversation is occurring around me I'm likely to pull out my earbuds.

I don't mind that others are talking - I want you to do you! At the same time, I can't be productive if I can hear that talking. I'll put on some music - usually instrumental (I have an instrumental hard rock playlist. I also fond of a softer focus playlist).

I'm not trying to be antisocial, I'm happy to be interrupted, but I'm okay with seeming a bit antisocial - it keeps my frustration levels down and allows me to complete the assignment.

Being Socially Inept

I think I'm a fairly good conversationalist and I like meeting new people. Oftentimes I can be energized by a good conversation - but after a while even good conversations will take their toll.

My first step to accommodate myself is to no longer be proactive in socializing. By this I mean, if I'm feeling high energy I will walk up to people (including those I don't know) and start a conversation. As my energy decreases my ability to do this decreases.

My second step is to allow myself to be cooked. This means that I've reached the point where not only proactive social interactions go out the window but I also am not making any effort to appear eager to participate in such interactions. Usually I would still love to talk to someone if they proactively initiate, but I'm also allowing myself to be content with just sitting there, staring vacantly into space.

The third step is physical withdrawal. When I'm cooked and further other-initiated conversation seem unlikely (or driven by guilt) I take physical leave.

The Aftereffects

Some of these activities can be done without any trade-offs (other than a little extra preparation) but some do come with a cost.

I do miss out on conversations I'd love to have.
I don't attend social gatherings that could be enjoyable.
I may be seen as undisciplined or lazy because I'm not paying full attention to the presentation.
I do miss out on opportunities.
I don't get everything those who are able to marathon through do.

But at the end of the day, I accept that I am a unique individual (as are we all) and that I have specific strengths and weaknesses and I need to operate within those.

But I SHOULD!

I have, many times, attempted to fit my square peg self into a round hole. When I do I suffer and in the long-term it is counter productive.

I might be able to sit through the lecture without doodling.
I might be able to force myself to stay longer at a social gathering.

But I've realized that I eventually pay for this and that:
The price is oftentimes significantly more than one would expect. For example, pushing myself too hard on one day may require 2-3 days or recuperation. Sure, I did it but, but was it worth an additional 1-2 days? It isn't a simple 1 - 1 = 0 equation. It's more like 1 - 3 = -2.
The cost is paid frequently when I need the time/energy more and, as importantly, when others need me more.

I give up some of the social niceties and behavior that allows one to appear more friendly, productive, and energetic because I know I can't do them without sacrifices that I've determined bear a cost beyond their value.

Concluding Thought

I want to encourage you to consider how the activities you are involved in (conferences or otherwise) affects you. To consider the ways in which you can mitigate the negative effects and when there seems to be a negative side to the necessary mitigations to do an informal cost-benefit analysis.

One significant benefit to doing so is that we give others the encouragement and permission they need to give themselves grace. When I see you treating yourself well, allowing yourself to be uniquely you, it encourages me that it's okay for me to be different too!

Appendixes

But You've Done a Lot of Public Speaking...

Yes, it's true. I've spent years doing public speaking / teaching and this does come with a cost but for me (yes, I accept the designation "weirdo") speaking to a group is much less expensive than speaking with a person / people in most circumstances.

I can walk off a speaking gig with minimal energy loss, but I'll likely experience significant loss as I engage others after the speech.

Should I Leave You Alone?

I appreciate that people don't want to be a burden to me but it's also important to note that I (and I think most of us) yearn for good conversations with others. Usually we see the cost as acceptable (even if it is steep). We want to talk to you too.

If I didn't get to talk to you recently or if at some future event I scoot out before you can talk - it isn't because I don't want to talk with you, I've simply hit the limits of what my mind or body can take at that given moment...but I would love to talk another time!

supabase_vector_project container is not ready: unhealthy

Dave Mackey — Sat, 15 Mar 2025 01:15:34 +0000

This will be brief...

I ran into an issue using supabase start. It would get pretty far and then stop the containers due to a networking error.

I ended up finding an issue "supabase_vector_project container is not ready: unhealthy" in which noga-dev notes that enabling "Expose daemon on tcp://localhost:2375 without TLS" in Docker Desktop resolves the issue.

That is my experience as well.

I'm sure there is at least 1 other person in the world who will run into this issue...

Initial Thoughts on bolt.new

Dave Mackey — Tue, 04 Mar 2025 21:26:04 +0000

I've been playing around with Stackblitz's bolt.new, it's pretty impressive.

Here are some things I like:

It's very simple to get started with plain English instructions for an app idea.
You can connect to Supabase to use as your backend, bolt takes care of new setups and can modify databases, etc. with your explicit permission.
You can connect to Netlify to use as your frontend. bolt takes care of deploying to Netlify.
Bolt detects when there are errors being thrown by the app and offers to automatically fix them - and in my experience it succeeds, although it make take a few efforts.

Here are some things I don't like:

There is no native integration with Git! This to me is crazy! I totally want my code, including the code bolt writes for me, to be in Git.
Bolt describes what it is changing and the files it will work with but the actual code doesn't show a diff. I like how GitHub Copilot and Cursor both show diffs that one can then approve.
I was able to click on Deploy before configuring Netlify, which was a bit confusing. It should prompt you to configure Netlify if you are trying to deploy but haven't.
- Ideally bolt should support deploying to any valid node.js server, not just to Netlify.
- It'd be great if at least Vercel was also supported.
I've had instances where Bolt started failing to Deploy and didn't seem to know why. Closing out the project in bolt and then opening a new bolt instance seems to fix the issue.
The chat history seems to be pretty limited. This isn't great as I'd like to be able to follow all the conversation from the beginning of the project forward.

I did subscribe. I ran out of the initial free tokens pretty quickly - but the subscription for $20/mo. gives me 10m tokens a ~~day~~ month - which seems pretty generous.

I think this will become even more impressive when bolt gets better at not rewriting entire files and focuses only on those areas that need changes.

And those are my initial thoughts.

Have you tried using bolt.new? Thoughts on your experience? Any other tools you prefer?

Building Production-Grade Web Applications with Supabase – Part 2

Dave Mackey — Sun, 19 Jan 2025 14:31:33 +0000

I’m working through David Lorenz’s book Building Production-Grade Web Applications with Supabase (affiliate link) and just finished Chapter 3 – Creating the Ticket Management Pages…. I’ve run into a few issues and thought I’d share them along with how I’ve fixed them.

Section: Setting up Pico.css with Next.js

You can ignore pageProps.children and leave it as children.

Section: Building the login form

Should I really edit app/page.js as LoginPage?

Even though Lorenz explicitly states:

So, open up app/page.js and change the Page component so that it only will return the Login component for now…

I still had to go look for myself the next time I encountered instructions to edit LoginPage. I expected us to create a new page rather than using the existing page.js, but no, wipe everything out in page.js and paste in only the LoginPage code as given in the book.

Error: `searchParams` should be awaited

Once we update the app/Login.js with the toggling logic (for turning on/off the password field) we start seeing this error:

Error: Route "/" used `searchParams.magicLink`. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at LoginPage (src/app/page.js:3:38)
  1 | import { Login } from "./Login";
  2 | export default function LoginPage({ searchParams }) {
> 3 | const wantsMagicLink = searchParams.magicLink === "yes";
    | ^
  4 | return <Login isPasswordLogin={!wantsMagicLink} />;
  5 | }

To fix this we want to make the LoginPage function in app/page.js asynchronous like so:

import { Login } from "./Login";

export default async function LoginPage({ searchParams }) {
  const params = await searchParams;
  const wantsMagicLink = params.magicLink === "yes";
  return <Login isPasswordLogin={!wantsMagicLink} />;
}

Saving the Username and Password

In the book we are instructed to update our code in Login.js like so:

"use client";
import { useRef } from "react";
export const Login = () => {
const emailInputRef = useRef(null);
const passwordInputRef = useRef(null);
return (
...
)
}

Just in case this isn’t entirely clear, here is what your code should look like:

"use client";
import { useRef } from "react";
import Link from "next/link";

export const Login = ({ isPasswordLogin }) => {
  const emailInputRef = useRef(null);
  const passwordInputRef = useRef(null);

  return(
    ...
  )
}

Where the ... is we aren’t changing anything. Essentially, everything from return( on remains the exact same as before.

The “big thing” I’m pointing out above is that one shouldn’t remove import Link from "next/link"; instead add "use client"; and the useRef import before it.

Side note: Maybe we’ll learn later, but I find it a little odd to use useRef instead of useState here, but then again, I’m not a Next.js or React expert.

Where does that `onSubmit` event go?

In Login.js within the return( ... ), replace the current <form> with the form code that includes the onSubmit handler.

Section: Visualizing the Ticket Management UI

Subsection: Creating a shared UI layout with navigation elements

The CSS ex unit?

In the code for app/tickets/TenantName.js Lorenz uses the rarely used CSS ex unit:

<strong style={{ marginLeft: "1ex" }}>
{props.tenantName}
</strong>

I suspect that this is actually a typo and that Lorenz intended for this to be 1em. While ex is a valid CSS unit it is rarely utilized and is based on the height of the current font. For more on this topic see:

Subsection: Designing the Ticket List Page

Creating dummy tickets where?

For those who aren’t familiar with React the instruction to add dummyTickets to the page.js file may not be clear enough. You’ll want put these in the TicketListPage() function before the return.

Import how?

Lorenz instructs us to import the TicketList component into page.js. This is pretty straightforward but may be helpful to note that since this is a “named export” we want our import in page.js to look like:

import { TicketList } from "./TicketList";

And not like:

import TicketList from "./TicketList";

If you do the latter you’ll get one of those lovable error messages:

./src/app/tickets/page.js:1:1 Export default doesn't exist in target module

1 | import TicketList from "./TicketList"; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
2 | 
3 | export default function TicketListPage() { 4 | const dummyTickets = [

The export default was not found in module [project]/src/app/tickets/TicketList.js [app-rsc] (ecmascript). Did you mean to import TicketList? All exports of the module are statically known (It doesn't have dynamic exports). So it's known statically that the requested export doesn't exist.

Subsection: Constructing the Ticket Details page

Error: Route “/tickets/details/[id]” used…

When we follow the instructions for creating the TicketDetailsPage function we will see the following error:

Error: Route "/tickets/details/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at TicketDetailsPage (src/app/tickets/details/[id]/page.js:4:50)
  2 | return (
  3 | <div>
> 4 | Ticket Details page with <strong>ID={params.id}</strong>
    | ^
  5 | </div>
  6 | );
  7 | }

You may recall that we’ve seen a similar error earlier with the LoginPage function and that we resolved it by making our function async and awaiting the parameter. We’ll do the same here:

export default async function TicketDetailsPage({ params }) {
  const ticketParams = await params;
  const id = ticketParams.id;

  return (
    <div>
      Ticket Details page with <strong>ID={id}</strong>
    </div>
  );
}

Error: Route “/tickets/details/[id]” used… (again?)

After updating the /tickets/details/[id]/page.js file (TicketDetailsPage function) we get a very similar error as we did in the last section. What gives? Simple, we updated our code in the last section but the book doesn’t know that, so the book is still using params.id, simply replace params.id with id and everything should be right as rain.

Subsection: Adding the comments section to the ticket details

The path for the new comments file should be /tickets/details/[id]/TicketComments.js and not /tickets/details[id]/TicketComments.js.

Error: Encountered two children with the same key…

While Next.js doesn’t throw any errors in the terminal output after adding the code that displays the actual comments to TicketComments.js you will see one in the browser:

Encountered two children with the same key, `{comment.date}`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

There are two reasons this occurs. The first is that we aren’t actually using the date as the key, because we have quotes around {comment.date} we are passing in the string literal comment.date. To fix this we need to remove the quotes so that this:

<article key="{comment.date}">

Is replaced with:

<article key={comment.date}>

Once this is done we won’t get that error anymore but we should note that there is another issue, even if it isn’t apparent at the moment. What happens if two or more individuals comment on the same date? Our keys again aren’t unique and we’ll see this same error. We can fix this quickly by adding an id property to our comments. Our updated comments should now look like:

const comments = [
  {
    id: 1,
    author: "Dave",
    date: "2027-01-01",
    content: "This is a comment from Dave",
  },
  {
    id: 2,
    author: "Alice",
    date: "2027-01-02",
    content: "This is a comment from Alice",
  },
];

Then we just need to change:

<article key={comment.date}>

To:

<article key={comment.id}>

Subsection: Implementing a page to create a new ticket

Nothing to see here folks.

Subsection: Implementing a user overview

Getting the Icons Installed

We need to install the @tabler/icons-react package: npm i @tabler/icons-react

While Lorenz uses IconCheck I’d recommend using IconUserCheck as it’s a little clearer what one is displaying.

We need to import the IconUserCheck and IconUserOff components in our users/page.js:

import { IconUserCheck, IconUserOff } from "@tabler/icons-react";

And we need to replace:

        <td>
         {user.name}
         ({user.isAvailable ? "Available" : "Not available"})
        </td>

With:

<td style={{ color: !user.isAvailable ? "red" : undefined }}>
 {user.isAvailable ? <IconUserCheck /> : <IconUserOff />} {user.name}
</td>

Subsection: Enhancing the navigation component

What’s that link look like again?

Here is what a link should look like when the pathname code has been appended:

<Link role="button" href="/tickets" {...(pathname === "/tickets" ? activeProps : inactiveProps)}>Ticket List</Link>

Change the pathname === "/tickets" to whichever page the link is pointing at, e.g. if the link points to /tickets/new then you should set the pathname section to pathname === "/tickets/new".

The Conclusion

Congratulations, you are now person #3 that is interested in this post.

Building Production-Grade Web Applications with Supabase – Part 1

Dave Mackey — Mon, 13 Jan 2025 20:17:08 +0000

(This post was originally published on Baby Programmer)

I'm working through David Lorenz's book Building Production-Grade Web Applications with Supabase (affiliate link) and just finished Chapter 2 - Setting Up Supabase with Next.js. I've run into a few issues and figured I'd share them along with how I've fixed them.

Section: Initializing and testing the base Supabase JavaScript client within Next.js

Error: Parsing ecmascript source code failed

One is instructed to use the following code to check for Supabase buckets:

useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) =>
     console.log("Bucket List", result);
    });
}, []);

Unfortunately, this will result in the following error:

 ⨯ ./src/app/page.js:9:5
 Parsing ecmascript source code failed
   7 |     supabase.storage.listBuckets().then((result) =>
   8 |       console.log("Bucket List", result)
 > 9 |     });
     |     ^
  10 |   }, []);
  11 |
  12 |   return (

Expected ',', got '}'

Fortunately, the fix is quite simple, add an opening brace immediately following .then((result) => :

  useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) => {
      console.log("Bucket List", result)
    });
  }, []);

Error: ReferenceError: useEffect is not defined

Once the above error has been resolved we hit our next one:

⨯ ReferenceError: useEffect is not defined
    at Home (src/app/page.js:5:2)
  3 |
  4 | export default function Home() {
> 5 |   useEffect(() => {
    |  ^
  6 |     const supabase = createSupabaseClient();
  7 |     supabase.storage.listBuckets().then((result) => {
  8 |       console.log("Bucket List", result) {
  digest: '3325505329'
}

The issue is that we haven't imported useEffect from React for use on this page. Doing so is simple, add an import for useEffect immediately after the import for Image:

import Image from "next/image";
import { useEffect } from "react";
import { createSupabaseClient } from "@/supabase-utils/client";

Error: Ecmascript file had an error

You'll be immediately greeted with yet another error:

⨯ ./src/app/page.js:2:10
Ecmascript file had an error
  1 | import Image from "next/image";
> 2 | import { useEffect } from "react";
    |          ^^^^^^^^^
  3 | import { createSupabaseClient } from '@/supabase-utils/client';
  4 |
  5 | export default function Home() {

You're importing a component that needs `useEffect`. This React hook only works in a client component. To fix, mark the file (or its parent) with the `"use client"` directive.

 Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client

Luckily, the solution is once again quite simple. At the top of the file add "use client"; like so:

"use client";

import Image from "next/image";

Section: Using the Supabase client with Pages Router and App Router

Subsection: Utilizing createBrowserClient on the frontend

The first issue we run into isn't really an error, its more that some of the instructions may not be entirely clear to some readers. The reader is instructed to update the createSupabaseClient function to use createBrowserClient like so:

import { createBrowserClient } from "@supabase/ssr";
export const createSupabaseClient = () => createBrowserClient(...);

Where that ... is one shouldn't literally place ..., rather one should insert the contents that previously were within createClient(), e.g. the final code should look like:

import { createBrowserClient } from "@supabase/ssr";
export const createSupabaseClient = () =>
    createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
    );

We are then instructed to make two relatively small adjustments to the client.js file:

We rename the file from client.js to browserClient.js

We rename createSupabaseClient to getSupabaseBrowserClient

But this creates some additional work for us, unless your editor picks up and auto-corrects the changes:

First, we need to update our import in page.js:

import { getSupabaseBrowserClient } from "@/supabase-utils/browserClient";

Next, we need to update our instantiation of the client in page.js:

const supabase = getSupabaseBrowserClient();

We are told that:

"In VS Code, you can press F2 to rename createSupabaseClient. It will automatically be renamed across your project. If you change a filename, VS Code should also pick up the references and refactor the path in other files accordingly."

(I was using Cursor and the changes were not picked up...could certainly have been the connection between the chair and the keyboard in this case)

Subsection: Utilizing createServerClient on the backend

This section is quite long and a bit confusing, as Lorenz acknowledges.

There is one block of code that is particularly confusing:

        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) => {
            request.cookies.set(name, value);
          });
          response.value = NextResponse.next({
            request,
          });
          cookiesToSet.forEach(({ name, value, options }) => {
            response.value.cookies.set(name, value, options);
          });
        },

At first glance it can seem like we are performing the same step twice. It's easy to overlook that the first instance is modifying the request cookies while the second is modifying the response cookies.

The Rest

I skipped the section on using createServerClient with the Pages Router, I'm working on a greenfield project at the moment, if I need to work with a Next.js using Pages Router I can always revisit.

The section on Connecting directly to the database is fairly basic, if you are familiar with SQL db's it makes intuitive sense.

The section on using TypeScript is primarily about running a single command to generate (and then regenerate, as needed) type definitions.

The chapter closes out with basic examples of creating a client for Nuxt 3 (Vue) and Python.

The End

And that's the conclusion of chapter 2. Now wasn't that post just gripping?

Some Resources on Mainframes and COBOL

Dave Mackey — Sun, 12 Apr 2020 13:50:24 +0000

Learning COBOL has been on my bucket list for a number of years now (along with other elder languages). The current pandemic crisis and its stress upon important systems written in COBOL has caused me to take a few more steps in that direction.

In addition to having a soft spot for elder languages I also enjoy curating and compiling information on topics I'm interested in. I've put together two pages - one on mainframes and one on COBOL. I'll expand on both as I learn more.

Would love to hear if you have other resources you think are highly valuable on these topics. :)

Best introductory article I've read on the topic thus far is Bob Reselman's The Beauty of the COBOL Programming Language.

For entertainment value, Jeff Atwood's COBOL: Everywhere and Nowhere is enjoyable both for its original humor and in light of our current circumstances.

Stay safe everyone!

A (Fairly) Exhaustive List of Books on WordPress Development.

Dave Mackey — Sat, 26 Oct 2019 22:33:39 +0000

There are various lists around the internet of books on WordPress Development but I found them to be largely incomplete and was frustrated by how some of them seemed to suggest that such-and-such a book was relatively new when it was, in fact, quite old.

So I've created a list of books on WordPress Development that I think / hope is significantly more extensive than anything I found elsewhere on the web.

I've included only books published in 2011 and following. Even this is quite a ways back, but there isn't an overabundance of books on WP so looking this far back is necessary.

I'd love to hear your thoughts, you can find the complete list here:
http://wpdeveloping.com/wordpress-developer-books/

Have you read any of these books? Which do you think are best? Does one cover topics not covered in another book? Are their books I should add to the list that aren't on it currently?

Thanks in advance!

Looking for Advice: Best Method for Adding Fill-in-the-Blank Functionality to WordPress Plugin

Dave Mackey — Thu, 03 Oct 2019 14:58:12 +0000

Hi All,

I'm building a new WordPress plugin for interactive fill-in-the-blank notes. Goal: Anyone who is presenting information and likes to use fill-in-the-blank style handouts could do so using this plugin (without the need for printed copies while retaining interactivity).

My rough plan is to:

Create a Custom Post Type.
Provide an editor for text notes (and images / other media) to be added by the presenter.(a)
Presenters would select a word/phrase they wanted to blank out.(b)
Participants at the presentation could pull up the notes on their phone/laptop and fill out the blanks as the presentation occurs.(c)
At the end of the presentation participants could enter their email address and have the notes (including their filled out answers and perhaps the correct ones if they differ) emailed to them.

It is a pretty simple/straightforward plugin and this is essentially an MVP. I'd love to add additional features in the future (save to PDF, Evernote, Google Drive, etc.; easy analytics for the presenter to gauge actual participation, etc.).

There are three areas in particular that I'm looking to gain additional perspective on, I've noted them as (a), (b), and (c) above. Below I provide additional details on these along with questions I have.

(a) I could use the Gutenberg block editor to create a block that handles this OR I could use the traditional TinyMCE non-Gutenberg editor. Thoughts on advantages of one over the other? Am I missing any additional (better) options?

(b) Ideally there would be several ways to do this, e.g., select the word and use a key combination (say Ctrl+Shift+B) and an editor button. Once this is done CSS will be used to show that the selected word/phrase will be shown as blank from the front end.

This could be done using a shortcode, like:
The best programming website is [lqdnotes]dev.to[/lqdnotes]

Or it could be done using an html attribute like:
The best programming website is <span class="lqd_blank">dev.to</span>

I tend to prefer the latter as it doesn't clutter the editor interface notes with shortcodes. Any reason to go with the former or another method altogether?

(c) When the front end page is displayed the parser would display the text as-is except for when it found a blanked word, in which case it would replace the blanked word with a form text box with some styling to ensure it looked as if it was in the regular flow of the page (e.g., no borders, sizing with rest of text, no difference in color, etc.).

Are there any better ways to accomplish this? Ideas you'd suggest?

I'd love to hear your thoughts!

Find WordPress Function Declarations

Dave Mackey — Wed, 02 Oct 2019 14:19:31 +0000

Early stages Python script that reads in a WP core file and creates a list of functions declared within the file.

Eventual goal is that this would be able to parse all of WP core and that it would leave off function and just provide the declaration.

developer.wordpress.org/reference, unfortunately only shows 49 pages of results for functions, so if there are more results, you don't get to see them. No easy way to browse all functions.

DEV Community: Dave Mackey

Supabase CLI and Docker Mounts Denied

Thoughts on StackOverflow 2025 Developer Survey

Developers Profile

Technology

Programming Languages

Databases

Cloud development

Web Frameworks and Technologies

JS/TS

.NET

Python

PHP

Java

Ruby

Dev IDEs

Language Agnostic

Java

Python

Android

Apple

JS / TS

.NET

PHP

Rust

RAD AI Tools

Large Language Models

Code Documentation and Collaboration Tools

Version Control

Project Management

Collaboration / Documentation

Operating Systems

AI Agent Data Storage Tools

AI Agent Orchestration Tools

AI Agent Observability and Security

AI Agent Out-of-the-Box Tools

Company Size

The Dangers of Vibe Coding Part 1: Premature Optimization

Stronger Hook in the Intro:

Your Regularly Scheduled Intro...

The Temptations of AI Feedback

A. Overly Complex Functions

High Complexity Functions

Why It's a Trap

Conclusion

What Else Did ChatGPT Do?

Difficulties of Being Neurodivergent (and/or Chronically Ill) at a Conference

Introduction

Buffer The Conference

Bring Supplies

Giving Permission

Taking Breaks

Missing Out

Goofing Off

Securing Focus

Being Socially Inept

The Aftereffects

But I SHOULD!

Concluding Thought

Appendixes

But You've Done a Lot of Public Speaking...

Should I Leave You Alone?

supabase_vector_project container is not ready: unhealthy

Initial Thoughts on bolt.new

Building Production-Grade Web Applications with Supabase – Part 2

Section: Setting up Pico.css with Next.js

Section: Building the login form

Should I really edit app/page.js as LoginPage?

Error: searchParams should be awaited

Saving the Username and Password

Where does that onSubmit event go?

Section: Visualizing the Ticket Management UI

Subsection: Creating a shared UI layout with navigation elements

The CSS ex unit?

Subsection: Designing the Ticket List Page

Creating dummy tickets where?

Import how?

Subsection: Constructing the Ticket Details page

Error: Route “/tickets/details/[id]” used…

Error: Route “/tickets/details/[id]” used… (again?)

Error: `searchParams` should be awaited

Where does that `onSubmit` event go?