Full Stack Fish

The robots moved my cheese

Mon, 29 Jun 2026 00:00:00 GMT

For most of my career, figuring out what needed to be built, then deciding what was practical to build, and then manually coding it, was how I spent my time. Programming involved typing, reading, researching, and writing tests. The figuring out part is still what I do, but the coding part has changed dramatically, with the majority of the code now being generated by AI models. Side projects have always been important, but they are even more so now. We have to learn to play well with the robots, and there is no substitute for building things. Periodic Mole is a side project that has gone a long way in teaching me what my new job is.

Periodic Mole is a study site for high-school chemistry students, built on the idea that a kid who knows the elements as cold as their times tables walks into class ahead, and starts to enjoy chemistry instead of dreading it. So it teaches through small games that bake the chemistry in by spaced repetition, with an interactive periodic table at the center. The table draws all 118 elements, tints each one by chemical family, and folds from an eighteen-column grid on a laptop down to a readable list on a phone. Tap chlorine and a panel shows how it bonds, where it turns up in the games, and which concepts explain it.

A few years ago I would have hand-built every piece of that. The grid math, the family colors, the breakpoint where the layout gives up on columns, the panel that loads when you tap an element. Each was its own small pile of code to write, run, and fix. Multiply that across a whole app and a project this size would once have stalled at seventy percent, the interesting idea buried under weeks of plumbing. Now I describe the pieces instead. I tell the model what the table holds, the states it can be in, and what should happen when someone taps an element on a phone versus a wide screen. It produces the components, and I evaluate if they do what they should and if they are built as they should be.

Describing software well turns out to be harder than producing it by hand, not easier. Vague instructions get vague code. The questions that used to settle themselves while my fingers moved now have to be answered out loud, before anything exists: how a screen reader should announce a selection, whether the family colors carry meaning or are just decoration, what the phone layout does when the grid runs out of room. The skill moved up a level, from "how do I write this in TypeScript" to "what, exactly, should this do, in every case I can think of and a few I can't." Being able to articulate what I want, and why, has become a superpower.

And the model is confidently wrong often enough to require rigorous review processes and tooling to enforce standards. Ask one to color a periodic table and it will light up every family in a different bright hue, the whole grid glowing like a toy. That is the opposite of what this site needs, where the color has to mean something rather than just decorate, so the palette stays muted and deliberate. The code compiles either way. What it gets wrong is the judgment, and judgment is the part that did not get automated.

If you want to see what "specified, then corrected" actually ships as, the interactive periodic table is the place to start, and the rest of Periodic Mole is built the same way.

So the work redistributed rather than vanished. Less production, far more deciding and reviewing, and far more catching the screen that looks right and isn't. The typing was never the hard part. It only ever hid how much of the job was judgment.

Our world has changed. Wishing the cheese didn't move is pointless, we have to embrace what frequently feels like a brand new job. This revolution hasn't resulted in less work. For most of us, it has resulted in staying up until midnight almost every night, trying new things, seeing the beautiful things we can build. The cheese moved. I'm trying to figure out where it went.

Install or Update sqlpackage on a Mac via Zip (No .NET SDK Needed)

Fri, 02 May 2025 00:00:00 GMT

This guide explains how to install or update sqlpackage on macOS using the direct download (.zip) method. This approach avoids installing the full .NET SDK, which can be overkill if you only need the sqlpackage command-line tool. It includes the necessary steps for installation/update and handling macOS Gatekeeper security prompts for the newly extracted files.

This guide assumes you want to install sqlpackage into a directory named sqlpackage within your home directory (~/sqlpackage). If you choose a different location (e.g., /usr/local/sqlpackage), please adjust the paths in the commands accordingly.

Prerequisites

You are comfortable using the Terminal application on macOS.
You know how to download files from the internet.

How do I install or update sqlpackage on a Mac?

Whether installing for the first time or updating an existing zip-based installation, the steps are largely the same.

Download the Latest Version:
- Navigate to the official Microsoft sqlpackage download page in your web browser (a web search for "Download sqlpackage Microsoft" should find it).
- Download the latest .zip archive suitable for macOS (often labeled for Linux/macOS). It will likely be saved to your ~/Downloads folder. Note the filename.
Remove Old Version (If Updating):
- If you are updating an existing installation in ~/sqlpackage, open the Terminal application and remove the old directory first.
- Warning: This command permanently deletes files. Double-check the path is correct before running. Skip this step if installing for the first time.
```
# Adjust path if your installation isn't in ~/sqlpackage
rm -rf ~/sqlpackage
```
Extract the New Version:
- Open Terminal.
- Navigate to the directory where you downloaded the new .zip file:
```
cd ~/Downloads
```
- Create the installation directory (this is safe even if updating, as we removed the old one):
```
mkdir ~/sqlpackage
```
- Extract the contents of the new .zip archive into this directory. Remember to replace sqlpackage-*.zip with the actual filename you downloaded:
```
# Example: unzip sqlpackage-osx-x64-170.0.94.3.zip -d ~/sqlpackage
unzip sqlpackage-*.zip -d ~/sqlpackage
```
Set Execute Permissions:
- Grant execute permission to the main sqlpackage executable file within the new directory:
```
chmod +x ~/sqlpackage/sqlpackage
```
Handle macOS Gatekeeper:
- macOS security (Gatekeeper) will likely prevent the newly extracted files from running initially because they came from a downloaded archive.
- To avoid multiple security prompts for sqlpackage and its components, run the following command once to remove the quarantine attribute from all files in the installation directory:
```
xattr -r -d com.apple.quarantine ~/sqlpackage
```
- This command recursively (-r) deletes (-d) the com.apple.quarantine attribute, effectively telling macOS you trust the contents of this specific folder.
Add to PATH (Recommended for Convenience):
- To run sqlpackage from any terminal location without typing the full path, add its directory to your shell's PATH.
- Edit your shell's configuration file (usually ~/.zshrc for modern macOS):
```
nano ~/.zshrc
```
- Add this line at the very end of the file:
```
export PATH="$PATH:$HOME/sqlpackage"
```
- Save the file (Ctrl+O, Enter) and exit (Ctrl+X).
- Apply the changes to your current terminal session (or open a new terminal window):
```
source ~/.zshrc
```
- (Note: If you were updating and ~/sqlpackage was already in your PATH, you can skip this step, but verifying doesn't hurt).
Verify the Installation / Update:
- Confirm that sqlpackage runs correctly and check the version:
```
sqlpackage /version
```
- The output should display the version number corresponding to the .zip file you just installed.

Important Notes

Installation Path: If you chose an installation directory other than ~/sqlpackage, ensure you replaced ~/sqlpackage in all commands above with your chosen path.
Admin Rights (sudo): If your chosen installation directory is in a system location like /usr/local/sqlpackage, you might need to prefix the rm, mkdir, unzip, chmod, and xattr commands with sudo and enter your administrator password.

You have now successfully installed or updated sqlpackage using the zip file method, without needing the full .NET SDK!

Turn Your Prettier Config Into a VS Code Snippet

Mon, 07 Feb 2022 00:00:00 GMT

The settings in your Prettier config keep your code style consistent across every project. Most of us set them the slow way, though — copying a .prettierrc out of an old repo, or looking the options up yet again every time we start something new. Turning that config into a VS Code snippet you can drop in with a few keystrokes is a micro superpower. It's a small way to help yourself fall into the pit of success.

Here's the short version: save your Prettier settings as a global VS Code snippet once, and from then on you can drop the whole config into any new project by typing a short trigger like prettierconfig. The rest of this post walks through building that snippet step by step.

My preferred config looks like this.

{
  "tabWidth": 2,
  "printWidth": 80,
  "endOfLine": "auto",
  "arrowParens": "always",
  "trailingComma": "all",
  "semi": false,
  "singleQuote": true,
  "bracketSpacing": true
}

Rather than copying these from an existing project, or trying to remember what they are, you can use a snippet to add them to new projects.

How do I create a VS Code snippet from a Prettier config?

In VS Code, launch the command palette CMD+Shift+p or CTRL+Shift+p
Enter user snippets
Select New Global Snippets File and name it.
You'll be presented with a new file with an example snippet that is commented out.

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

At this point, you could edit the file manually and try to get the syntax right but there is a much better way. Use The Snippet Generator by Pawel Grzybek. Thanks, Pawel!

The trigger is what you type to trigger the snippet. Enter prettierconfig.

Enter a short description.

Paste your prettier config settings into the "Your snippet..." box.

The snippet generator merges your inputs into a valid snippet.

Copy the snippet from the right-pane and paste it into VS Code in place of the commented out example and save the file.

Now that our snippet is saved, let's put it to good use.

Add a .prettierrc file to the project you're in, or delete the contents of the .prettierrc file if you've already got one.

Start typing the first few letters of your snippet's trigger, and VS Code will offer to insert the snippet.

Press tab to accept the suggestion, and your snippet is inserted.

Visual Studio Code Snippets are powerful and useful. Learn more in the official Visual Studio Code docs.

Remix, SQLite, and Prisma, Oh my!

Fri, 31 Dec 2021 00:00:00 GMT

Loaders are the part of Remix that finally made server data feel simple to me: you write a function that runs on the server, return its result, and read it in your component with one hook. Pair that with Prisma and SQLite and you get a real database with no API routes to maintain — no server to provision, no connection string to babysit, just a single file sitting on your disk. Let's build one.

Create the Remix app

Open up a terminal and create a new Remix app.

npx create-remix@latest

You'll go through a short interview of how you want to set up your app. Pick these options to follow along or modify if you're in the mood for a little adventure.

Call the app whatever you like. I'm calling mine "run-rsp".

Pick the option to deploy to the Remix App Server for now. This is easy to change later.

Pick JavaScript.

Decline the offer to run npm install as we will be using Yarn today.

Once the setup process is complete, cd into the project folder.

cd run-rsp

Open the project in VS Code, or whatever editor you want to use.

code .

Install the dependencies.

yarn

Verify that everything is set up correctly.

yarn dev

You should now see the template Remix app running in your browser.

Edit the root route and add styles

Now let's replace the default code with our own. We're going to be working primarily in the app folder.

Let's open up the root.jsx file and examine its contents.

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration
} from "remix";

export function meta() {
  return { title: "New Remix App" };
}

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        {process.env.NODE_ENV === "development" && <LiveReload />}
      </body>
    </html>
  );
}

The content we are seeing on the home page is coming from the <Outlet /> component. We'll edit that in a second.

Let's make a small change so we can see LiveReload in action.

Change the title of the app in the meta() function to whatever you want. Save the file and notice that the title of your app in the browser changes almost instantly. (Check the browser tab of the app or right-click and view page source)

The home page content is routes\index.jsx. Open the file up and delete everything. Save the file. You'll now see an error in the browser.

Add the following function to fix the error.

export default function Index() {
  return (
    <div>
      <h1>I'll soon be connected to SQLite</h1>
    </div>
  );
}

You may need to refresh your browser to get LiveReload working again. Once you've done that, you'll see your heading rendered with the browser's default styling. Let's add a CSS reset and some global styles to our app so that it looks a little better.

In our root.jsx file, add a links() function. We are already importing the Links component and using it in the head of our document, so whatever we export from our links() function will be used in the Links component.

// root.jsx
export function links() {
  return [
    {
      rel: "stylesheet",
      href: "https://unpkg.com/modern-css-reset@1.4.0/dist/reset.min.css"
    }
  ]; 
}

Now add a styles folder in app and add a file called global.css with a rule or two.

Save the file. Whatever styles you've added won't be applied yet — we haven't linked the stylesheet to the app.

Go back to root.jsx. Import your styles and then add another link to the array in links().

import globalStyles from '~/styles/global.css'
...
// root.jsx
export function links() {
  return [
    {
      rel: "stylesheet",
      href: "https://unpkg.com/modern-css-reset@1.4.0/dist/reset.min.css"
    },
    {
      rel: "stylesheet",
      href: globalStyles
    }
  ]; 
}

Save your changes and you should now see your styles applied in the browser.

Prisma and SQLite setup

Stop the app and let's add some dependencies.

yarn add @prisma/client
yarn add -D prisma

After they finish installing, initialize prisma with the sqlite provider.

npx prisma init --datasource-provider sqlite

This will add a prisma folder with a schema.prisma file. It also adds a .env file if you don't already have one.

By including the datasource provider, we don't need to edit the schema.prisma file to change the default provider to sqlite, and the .env file is populated for us with a connection string to a sqlite file. Nice touch, Prisma.

Add a model to your schema.prisma file for Soccer Teams. Install the Prisma extension if you haven't already to format your Prisma files. Prettier may try to override Prisma's formatting, so if that's the case, right-click the file, select format document, and indicate that Prisma should format the file. Now you don't need to worry about getting your models formatted. We are going to keep things simple here just to show how everything is wired up together. Our database will be a list of soccer teams, or whatever kind of teams you like.

Add the Team model to your schema.prisma file.

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Team {
  id        String   @id @default(uuid())
  team      String
  country   String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Deploy the model to your database

npx prisma db push

We should now have a dev.db file in the prisma folder next to our schema.prisma file.

Launch prisma studio to see the results.

npx prisma studio

We can add a few teams directly in Prisma Studio. Click the Add record button to do so.

Add a file (app/lib/db.server.js) to configure our connections to the database. Note that the "server" in the file tells Remix to run this on the server.

import { PrismaClient } from "@prisma/client";

let prisma;

if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }
  prisma = global.prisma;
}

export default prisma;

Load and display the data

Now let's get the teams from the database and display them in our app. We'll use a loader function (this code runs on the server), which will feed our component with the useLoaderData() hook.

// routes/index.js
import { useLoaderData, Link } from 'remix'
import  prisma from '~/lib/db.server'

export const loader = async () => {
  const data = {
    teams: await prisma.team.findMany(),
  }
  return data
}

export default function Index() {
  const { teams } = useLoaderData()

  return (
    <>
      <div>
        <h1>Soccer Teams around the world</h1>
      </div>
      <ul>
        {teams.map((team) => (
          <li key={team.id}>
            <h1>{team.team}</h1>
            <p>{team.country}</p>
          </li>
        ))}
      </ul>
    </>
  )
}

We are using the Prisma findMany() function to get all the teams in our database.

That's it for now. The app we've built isn't particularly useful as is, but you now have the building blocks to build anything you want and style it however you like.

It's been said many times but remains true: there has never been a better time to be a developer. There are so many wonderful tools to choose from. The biggest challenge can be deciding what to include in your toolbelt. Remix and Prisma should be on your short list. The developer experience with both is top notch.

Enjoy, and Happy New Year!

nvm is for barbarians. Manage Node versions with Volta instead.

Tue, 05 Oct 2021 00:00:00 GMT

There's a special kind of bug that only shows up when you switch projects: code that ran fine an hour ago suddenly explodes, and the cause is the wrong version of Node quietly sitting in your terminal. I lived like that for years with nvm — typing nvm use like a password every time I opened a folder, and forgetting to half the time. Volta put a stop to it.

Under the covers, all the Node version managers are doing the same thing: setting up symlinks to different versions of Node installed on your computer. The difference between them is how they manage those symlinks. If you know the correct version of Node for the project you are currently working on, you can use nvm to set it to the active version, and all is well, as long as you remember to do so. The problem here is that you need to know the correct version of Node. And if you're switching from a project that has different Node version requirements, you have to remember to switch each time you open one of those projects. As Wes Bos would say, that's no way to live your life. That's what barbarians do.

Volta takes a set-it-and-forget-it approach. You "pin" the version of Node you need for your project and Volta auto-magically switches to that version anytime you are working on that project, without any action on your part. You can have multiple projects open at the same time, each with their own, different versions of Node, running simultaneously.

"Because Volta’s toolchain always keeps track of where you are, it makes sure the tools you use always respect the settings of the project you’re working on. This means you don’t have to worry about changing the state of your installed software when switching between projects."

— Understanding Volta

How do I install Volta?

Go to the getting started page on the Volta site and follow the instructions for your operating system.

How do I pin a Node version with Volta?

Pin the version of Node you want to your project by running the pin command in the root folder of your project. For example:

volta pin node@14

Volta adds an entry to your package.json.

{
...
  "volta": {
    "node": "14.18.0"
  }
}

Now anyone on your team that has Volta installed will get the benefit of having the correct version of Node pinned. If you don't have the specified version of Node, Volta will download and install it for you, then switch to that version. For any barbarians that may also be working on your project, the entry won't affect them, but will allow them to see the version of Node they'll need to use.

Volta is written in Rust and is completely cross-platform, working in Windows and in all Unix shells.

As web developers, we have more than enough things to worry about. Using Volta means that managing Node versions is no longer one of them.

SQL Server to React in 60 Seconds With Prisma

Sat, 04 Sep 2021 00:00:00 GMT

Connecting SQL Server to React with Prisma is a straightforward and satisfying experience. This post will guide you through the process of getting your Azure SQL Server data onto a screen in a React app in less than a minute. Really. (As long as you pause your timer while npm is downloading files.)

Prerequisites

Of course, there are a few prerequisites before you can get it connected that quickly. Prisma supports working with existing databases (which we are doing in this post) as well as defining the database in your app and then creating the database objects through migrations (which will be covered in other posts).

You must have an existing Azure SQL Server with a database that you have credentials for. You must also have your ip whitelisted in Azure.
The database must have at least one table with data that we can query.
You must have up-to-date versions of Node.js (12.6 or higher) and Visual Studio Code installed.
You must have create-next-app installed globally. (npm global install create-next-app if you don't)
You must have an empty folder on your hard-drive for this project.

And that's it. Let's do this.

Create the Next.js app

Note that I'm using JavaScript instead of TypeScript in this post. I'll have a TypeScript version up soon. I take no sides in that holy war. I love them both. Or maybe I hate them both. It really depends on the day.

Open your empty project folder in VS Code
Open a terminal and run the following command to initialize a new next app:

npx create-next-app .

The dot (.) will create the next app in the current path.

Once the app is initialized, you should see a confirmation. Run the app to verify it compiles and runs correctly.

npm run dev

Open http://localhost:3000 in a browser to verify.

Now stop the app and let's get some data.

Add and configure Prisma

You'll need to add the following dependencies, prisma as a dev dependency and @prisma/client as a regular dependency.

npm i -D prisma

npm i @prisma/client

Check your package.json file to verify that you have version 3.0.1 or greater of prisma in the dev dependencies — that's the release where Prisma's SQL Server support reached production-ready General Availability.

Initialize prisma in your app. This will add a prisma folder in root with a schema.prisma file. It will also add a .env file if you don't already have one, which you shouldn't at this point. For future reference, if you do have a .env file, this step will add a new entry into the file without harming anything else you may have in there.

npx prisma init

The default connection that is configured in the schema.prisma file is for Postgres. Let's fix that.

Edit the file to look like this:

// schema.prisma
generator client {
  provider        = "prisma-client-js"
}

datasource db {
  provider = "sqlserver"
  url      = env("DATABASE_URL")
}

Note the constant DATABASE_URL that is referenced. We'll update the value of that constant in the .env file now.

Set the connection string in the .env file to point to your Azure SQL Server database. I'm using a username and password for this example. Explaining all the variations on connection strings is beyond the scope of this post, but I'm assuming you can figure that out.

My connection string, with the sensitive bits masked to protect the innocent:

DATABASE_URL="sqlserver://[SERVERNAME].database.windows.net:1433;database=[DATABASENAME];user=[USERNAME];password=[PASSWORD];encrypt=true"

Connection strings can be long, so you'll have to scroll to the right to see the whole thing.

Pull in your database schema

Now we're ready to introspect the database. This step will populate the Prisma schema based on your database schema. Make sure you have your schema.prisma file open before you run the following. It's fun to watch the magic happen.

npx prisma db pull

Boom! Our app and database are now friends.

Assuming your connection string is correct and you have access to your database, you should now see a list of all the tables in the dbo schema generated as models in your schema.prisma file. This functionality is currently limited to tables in the dbo schema. You won't have views or functions, or stored procs in the schema file, which is true for all databases Prisma works with, so don't get your SQL Server feelings hurt. You can still interact with those objects in your app. Stay tuned for a future post explaining how to do that.

Now that we have a valid schema, let's run the command to generate the Prisma client.

npx prisma generate

Next is a fabulous tool that keeps your backend and frontend code safely separate but extremely easy to work with in the same project, among many other benefits.

Add a lib folder in root with a prisma.js file, and copy/paste or type the following into that file:

// lib/prisma.js
import { PrismaClient } from "@prisma/client";

let prisma;

if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }
  prisma = global.prisma;
}

export default prisma;

This is the best practice defined by Prisma and Next for the integration. You'll be able to import a single instance of the prisma client throughout your app (something we'll do shortly), which will handle connection pools for you and protect you from memory leaks. See Best practice for instantiating PrismaClient with Next.js for more details.

Build the API route and the page

Let's define an API route that our front-end will consume.

Add a file in pages/api called products.js. Replace "products" with whatever table you want to work with from your database. I'm using Adventure Works for this example.

Add this to the products.js:

// pages/api/products.js
import prisma from "../../lib/prisma";

export default async function handle(req, res) {
  const products = await prisma.product.findMany();
  res.json(products);
}

Now delete the contents of the pages/index.js file and replace it with the following as a guide. You'll need to use your React skills to create a component that incorporates your data.

You'll need to replace products with whatever table you want from your database, and use fields from that table instead of the ones I'm using below.

// pages/index.js
export const getServerSideProps = async () => {
  const res = await fetch("http://localhost:3000/api/products");
  const products = await res.json();
  return {
    props: { products },
  };
};

export default function Product({ products }) {
  return (
    <div>
      {products.map((p) => {
        return (
          <div key={p.ProductID}>
            <p>
              {p.Name} — ${p.ListPrice}
            </p>
          </div>
        );
      })}
    </div>
  );
}

Run it

That's it. Let's see if it worked.

npm run dev

Open http://localhost:3000 in a browser and behold your data!

Hit me up on twitter @jonrcrowell to let me know what you think or if you ran into any issues.

Prisma released the SQL Server connector for production on September 7, 2021, in version 3.0.1.