DEV Community: Michael Charles Aubrey

Resolving Issues from Unexpected Changes to `container-type: inline-size` in Chrome 129

Michael Charles Aubrey — Thu, 03 Oct 2024 07:10:55 +0000

Chrome 129 introduced a change in the behavior of container queries affecting elements with container-type: inline-size. This change, while small, has the potential to break your web app's layout. I'm going to go over what changed, how it behaved before, and how it behaves starting with Chrome 129.

What Changed?

Prior to Chrome 129, container-type: inline-size implicitly:

Created a containing block for absolutely positioned elements
Established a new stacking context

To illustrate this, consider the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {
        container-type: inline-size;
        width: 300px;
        height: 300px;
        border: 2px solid black;
        padding: 1rem;
        margin: 2rem;
        contain: layout;
      }

      .child,
      .sibling {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
      }

      .child {
        width: 200px;
        height: 200px;
      }

      .child-1 {
        background-color: rgba(255, 0, 0, 0.7);
        top: 100px;
        left: 100px;
        z-index: 2;
      }

      .child-2 {
        background-color: rgba(0, 255, 0, 0.7);
        top: 30px;
        left: 0;
        z-index: 1;
      }

      .sibling {
        width: 150px;
        height: 150px;
        background-color: rgba(0, 0, 255, 0.7);
        top: 165px;
        left: 50px;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="child child-1">Child 1 (z-index: 2)</div>
      <div class="child child-2">Child 2 (z-index: 1)</div>
    </div>
    <div class="sibling">Sibling (z-index: 1)</div>
  </body>
</html>

Before Chrome 129, the above code rendered as follows:

The children of the black-outlined .container div are absolutely positioned. child-2 (the green div) is positioned left: 0, however it aligns with the left-side boundaries of the parent .container div. This is because in Chrome 128 and older, container-type: inline-size implicitly created a containing block for absolutely positioned children.

Additionally, the container-type: inline-size element is implicitly creating a new stacking context, resulting in green being on the bottom, red in the middle, and blue on top.

However, as of Chrome 129, the same HTML and CSS renders like so,

No containing block is created for the .container element's children, and therefore the absolutely positioned elements are positioned relative to the web page rather than relative to their container. This results in the green square entirely escaping the container and touching the left side of the web page.

Additionally, since no new stacking context was created, the order in which the children and siblings stack has changed. The green square is still on the bottom, but now the blue square is in the middle, and the red square is on top.

Why the Change?

According to the Chromium team on the official Chromium bug tracker this was an intentional change to fix what is considered by the team to be a design mistake in original specification.

The specification itself has yet to be updated, but the team made the change in the browser behavior prior to any change having been made in the specification due to agreement within the working-group.

As of the time of writing this article (October 3rd, 2024), all other major browsers (Firefox, Safari) still follow the pre-Chrome 129 behavior.

Mitigating the Changes

If you just want to restore things to how they were pre-Chrome 129 (and in the meantime maintain consistency across browsers until Firefox and Safari update to follow Chrome's implementation), you can simply add contain: layout; to the element which has container-type: inline-size;.

If you want to add the containing block behavior but not create a new stacking context, you could alternatively add position: relative to the container-type: inline-size; element, which will create a containing block for child elements but not create a new stacking context. However, this will result in different behavior in different browsers until the point that other browsers update to follow Chrome's lead.

Try It Yourself

Below is a CodePen that you can play with that demonstrates what I am talking about above. If you remove contain: layout from the .container style, and if you're using Chrome 129 or later, the layout will show as it does in the second image I provided above. However, if you view the CodePen in Firefox 131 (latest as of writing), it should display the same regardless of whether contain: layout is set or not.

I wasn't able to find mention of this change in the release notes for Chrome 129, and as was already mentioned this change was made ahead of any specification change, so it really caught us off guard and significantly broke the layout on one of our web apps. I hope that this information can help anyone else having the same problems.

Fixing the HTTPS Developer Certificate Error in .NET on macOS Sequoia

Michael Charles Aubrey — Tue, 24 Sep 2024 09:00:24 +0000

MacOS 15 Sequoia has introduced changes to its security APIs which has broken the dotnet CLI's ability to generate and trust HTTPS developer certificates.

The command dotnet dev-certs https fails with the message:

There was an error creating the HTTPS developer certificate.

When run with the verbose flag (-v), you'll see a more detailed error:

An error has occurred generating the certificate: Interop+AppleCrypto+AppleCommonCryptoCryptographicException: The specified item is no longer valid. It may have been deleted from the keychain.

Impact

This issue is blocking .NET developers on macOS Sequoia from generating or trusting HTTPS development certificates. Without these certificates, you can't develop and debug .NET applications that require HTTPS.

Workaround

While a fix is planned for release in October, here's a workaround (thanks to users pvasek and kalebzettl on GitHub) that you can use right now:

Just in case, delete any certs that currently exist. Open a terminal and run: dotnet dev-certs https --clean
Download the tar.gz file of the "main" release from the .NET SDK package table. You can also access the links directly below.
- Apple Silicon.
- Intel
Unpack the downloaded file.
Remove the quarantine attribute from the unpacked folder. From your terminal run: xattr -d com.apple.quarantine -r <folderName> Replace <folderName> with the name of your unpacked folder. For example: xattr -d com.apple.quarantine -r dotnet-sdk-9.0.100-rc.2.24473.22-osx-arm64
Navigate to the unpacked folder: cd dotnet-sdk-9.0.100-rc.2.24473.22-osx-arm64
From within this folder, run the following to generate and trust the certificate. ./dotnet dev-certs https --trust

Note the ./ before dotnet – this ensures you're using the version you just downloaded, not the globally installed one.

This should successfully generate and trust the HTTPS developer certificate, allowing you to continue your .NET development on macOS Sequoia.

You Can't Delete Articles on Dev.to

Michael Charles Aubrey — Fri, 01 Mar 2024 07:36:42 +0000

And this article if evidence of that. You can archive articles, but they still show up on RSS feeds. I originally made this article as a test to see if Dev.to would automatically detect the language as "Japanese" (I had written the initial article in Japanese.) For what it is worth, it did detect that it was Japanese. However, since I cannot delete this article, I decided to instead rewrite it as I am writing it now.

The Most Useful Docker Commands for Mac You’ve Never Heard of, Because You Need To Make Them

Michael Charles Aubrey — Fri, 01 Mar 2024 00:22:45 +0000

The commands are:

docker open - Open Docker Desktop (and therefore start the docker daemon) from your terminal.
docker close - Close Docker Desktop (and therefore stop the docker daemon) from your terminal.
docker flush - Stop and remove all running and stopped containers.

How Do We Get There?

With a simple function written for Zsh which is provided below.

docker() {
    case "$1" in
        "open")
            echo "Opening the Docker app..."
            open --background -a Docker
            ;;
        "close")
            echo "Stopping currently running Docker containers..."
            command docker ps -q | xargs -r -L1 command docker stop
            if [ $? -eq 0 ]; then
                echo "Closing the Docker app..."
                test -z "$(command docker ps -q 2>/dev/null)" && osascript -e 'quit app "Docker"'
            else
                echo "Failed to stop containers."
            fi
            ;;
        "flush")
            echo "Stopping and removing all containers."
            command docker container stop $(command docker ps -a -q) && command docker container rm $(command docker ps -a -q)
            if [ $? -eq 0 ]; then
                echo "Done."
            else
                echo "Failed to flush containers."
            fi
            ;;
        *)
            command docker "$@"
            ;;
    esac
}

To make the commands detailed earlier accessible in your terminal, incorporate them into your Zsh configuration. This can be achieved by appending the script to your ~/.zshrc file. Alternatively, you can add it to another file that ~/.zshrc sources. Begin by opening the ~/.zshrc file located in your home directory with your preferred text editor. Then, simply copy and paste the script to the end of this file.

But Why Though?

I've saved this section for last because I assume that if you've found your way here, you likely have your own reasons for seeking out such functionality.

However, mine started back when I was working on a less powerful Macbook Air back in 2019 or so. I didn't want to run Docker Desktop in the background all of the time, but I wanted an easy way to start and stop the Docker daemon from the terminal.

Additionally, sometimes I wanted to bring down a project spun up by docker compose, but I didn't necessarily want to change directories to the project where the docker-compose.yml file was.

While these might seem like trivial issues, I've been pleasantly surprised by the significant utility these commands have provided over the years. I wanted to share them in the hope they might be useful to others.

Apple Notes Monostyle Text Keyboard Shortcut

Michael Charles Aubrey — Wed, 13 Dec 2023 05:25:02 +0000

To cut to the chase, the keyboard shortcut is Shift＋Command＋M.

For me, one of the main things keeping me from using Apple Notes was the lack of a way to easily document code. Luckily, the addition of "monostyle" seemed to be the remedy for that situation.

Unfortunately, when I went to try it out, I couldn't figure out the keyboard shortcut for it. Google searches for "Apple Notes Monostyle Text Keyboard Shortcut," at least at the time, came up with nothing.

There is documentation, but unfortunately it didn't come up with the keywords I used when searching for it.

I'm writing this short article in hopes that if there is anyone else out there looking for this information, they might stumble across it here.

Anyway, I'm looking forward to giving Apple Notes another go with this newfound knowledge of the keyboard shortcuts.

Using the Node ‘redis’ Library To Connect to Vercel KV

Michael Charles Aubrey — Mon, 13 Nov 2023 05:19:29 +0000

Vercel KV (Key-Value) is an innovative offering from Vercel providing a straightforward serverless key-value store solution. It is on top of Redis using Upstash's Redis capabilities, and Vercel provides their own Node library, @vercel/kv for interacting with it. The @vercel/kv library is perfect for implementing key-value storage as a part of your NextJS Serverless edge functions.

Why Not Just Use `@vercel/kv`?

Or rather it is perfect, so long as the library provides access to the Redis functions you need. Behind Vercel KV is a full Redis instance, with compatibility for Redis client protocol up to v6.2. However, the provided library doesn't necessarily implement every feature available in the underlying Redis instance.

If you can make do with what the library provides, you're probably better off sticking to it. If not, however, you're in luck! Since Vercel KV is just powered by a standard Redis instance, you can use redis (or any other Redis library of your choosing) to connect to it.

The process is pretty straightforward, but as I couldn't find any other articles online talking about this, I figured I'd write something out.

Pricing

Before we continue, you should review and be aware of the pricing for Vercel KV. It is an affordable pay-as-you-go model, and depending on your usage you might only pay as little as $1 USD a month. However, as these prices are subject to change, I recommend reviewing the pricing yourself before we continue.

Setting Up Vercel KV

First set up Vercel KV itself. You need to create a new Vercel KV storage solution. After logging into Vercel, click on "Storage" in the top menu. This should show you a few storage options that you can create.

This will present you with a dialog to fill out your desired database name and region. Fill those out and you'll be presented with your newly created Vercel KV Redis instance!

Click on "Show Secret" and it will reveal the following string which can be used for connecting to the Redis instance via the redis-cli command line tool.



redis-cli --tls -u redis://default:597961c4b7344b5f9ce9691ae5fb8bd4@dear-chigger-38419.upstash.io:38419

We're interested in the part after the -u, that is your Redis connection string which we will use later for connecting to the instance via the redis node library, so copy that down to a secure location.

Adding Redis to Your Existing NextJS Project

I'm going off the assumption that you're adding this to an existing project. If that is not the case, then feel free to follow any getting started guide for NextJS. There isn't any special sauce needed in the setup.

After you've got your NextJS project, let's install the redis library.



npm i redis

Environment Variables

You'll want to give redis access to the connection string you previously copied to a safe location. For that, add a new environment variable to .env.local like so,



REDIS_URL=redis://default:597961c4b7344b5f9ce9691ae5fb8bd4@dear-chigger-38419.upstash.io:38419

Remember that you need to replace the connection string above with the one that you copied down from your Vercel dashboard.

Redis Configuration

I'm putting this in its own section for readability and in case someone is just scanning this article, but here's what you need.



const REDIS_CONFIG = {
  url: process.env.REDIS_URL,
  socket: {
    tls: true,
  },
};

If you already know what you're doing, you just need to pass that configuration into the createClient function, and you're golden. It is important that tls be set to true, otherwise even if you specify the connection string appropriately it won't work. That's all there is to it, really.

If you're still lost, move on to the next section.

Redis Boilerplate

You don't strictly need to use my boilerplate, but I'm using it in a current project and I think it offers an efficient way to provide the Redis client via a Singleton. Here's the code with the configuration already in place. In my project I'm placing this in ./redis/index.ts.



import { createClient, RedisClientType } from "redis";

const REDIS_CONFIG = {
  url: process.env.REDIS_URL,
  socket: {
    tls: true,
  },
};

class RedisService {
  private static instance: RedisService;
  private client: RedisClientType;

  private constructor() {
    this.client = createClient(REDIS_CONFIG);
    this.client.on("error", (err) => console.log("Redis Client Error", err));
    this.client.connect();
  }

  public static getInstance(): RedisService {
    if (!RedisService.instance) {
      RedisService.instance = new RedisService();
    }
    return RedisService.instance;
  }

  getClient() {
    return this.client;
  }
}

export const getRedisClient = () => RedisService.getInstance().getClient();

The above exports a function getRedisClient, which will return a Redis client hooked up to your Vercel KV Redis instance.

Using Your Redis Client

I assume if you're here, you're here because there's some Redis functionality that you want to implement, and therefore probably don't need this section. However, if you're just here out of curiosity and want something to try, here is a simple example of an increment/decrement function implemented via Redis, using our exported getRedisClient function.



import { getRedisClient } from "..";

const COUNTER_NAMESPACE = "counter";

export const incrementCount = async (

  increment: number = 1

): Promise<number> => {

  const client = getRedisClient();

  try {

    const newCount = await client.incrBy(</span><span class="p">${</span><span class="nx">COUNTER_NAMESPACE</span><span class="p">}</span><span class="s2">, increment);

    return newCount;

  } catch (error) {

    console.error(error);

    return 0;

  }

};

export const decrementCount = async (

  decrement: number = 1

): Promise<number> => {

  const client = getRedisClient();

  try {

    const newCount = await client.decrBy(</span><span class="p">${</span><span class="nx">COUNTER_NAMESPACE</span><span class="p">}</span><span class="s2">, decrement);

    if (newCount < 0) {

      await client.set(</span><span class="p">${</span><span class="nx">COUNTER_NAMESPACE</span><span class="p">}</span><span class="s2">, "0");

      return 0;

    }

    return newCount;

  } catch (error) {

    console.error(error);

    return 0;

  }

};

export const getCount = async (): Promise<number> => {

  const client = getRedisClient();

  try {

    const count = await client.get(</span><span class="p">${</span><span class="nx">COUNTER_NAMESPACE</span><span class="p">}</span><span class="s2">);

    if (count) {

      return parseInt(count);

    }

    return 0;

  } catch (error) {

    console.error(error);

    return 0;

  }

};

Working Example

I've uploaded a working example to GitHub. You can access it here, pull the repo, and try it out for yourself. Remember that in order to use the repo, you will need to create a Vercel KV instance, get the connection string, and supply it to an .env.local file in the cloned repository.

Fixing the "SetThreadContext failed" Assertion Failure in Delphi 2007 on Modern Windows Machines, Including Windows 11

Michael Charles Aubrey — Thu, 13 Apr 2023 02:31:22 +0000

So the content of this article is readily available on other forums and places like Stack Overflow, but they all talk about this error in the context of much earlier versions of Windows. The information in those articles is still relevant, but you might like me hesitate to even try those solutions because they look so old. I'm writing this basically to put something online that says, "Yup, this fix works for Windows 11 too," for anyone else working on legacy Delphi applications here in the roarin' 2020s.

If you're working with Delphi 2007 on a modern Windows machine, you might have come across this error while attempting to close a VCL Forms application. You're greeted with an assertion failure saying, "SetThreadContext failed" in ..\win32src\thread32.cpp at line 412.

Luckily there's a straightforward fix to this issue. The problem is caused by an outdated version of bordbk105N.dll that comes bundled with Delphi 2007. To resolve this, you need to replace it with an updated version of the file.

Here's what you need to do:

First, download the updated version of bordbk105N.dll from Embarcadero's website: https://cc.embarcadero.com/item/27521. This file was initially released as a fix for Windows 7, but it works for Windows 11 as well.
Next, locate the folder where your Delphi 2007 installation is. The default installation path is typically C:\Program Files (x86)\CodeGear\RAD Studio\5.0.
Navigate to the bin folder within the Delphi 2007 installation folder.
Find the existing bordbk105N.dll file and create a backup copy of it (e.g., bordbk105N.dll.bak). This step is essential in case you need to revert any changes.
Replace the existing bordbk105N.dll file with the updated version you downloaded earlier.
Restart the Delphi 2007 IDE and run your VCL Forms application again.

That's it! You should no longer encounter the "SetThreadContext failed" assertion failure when closing your VCL Forms application.

Web Development with Dart is Super Easy

Michael Charles Aubrey — Thu, 15 Apr 2021 07:53:00 +0000

Flutter Web has hit stable support, and is likely that which many people today think of when they hear "using Dart to write web apps." However, not only is it possible to write web apps in Dart without Flutter, it is really easy to get started.

Preliminaries

If somehow you're reading this and you don't yet have the Dart SDK, you can get it here. Follow the instructions for the operating system you have, and come back here when you're done.

Next, you'll need the webdev and stagehand tools available globally from your terminal. To do this, run the two following commands.

pub global activate webdev
pub global activate stagehand

The stagehand package makes it really easy to get started on a Dart project, and webdev lets you easily do things like serve your web app during development and build for production deployment.

Generate your Project

Stagehand has a variety of generators available for making console apps, packages, web servers and web apps. We just want a simple web app starting point, so make a new folder for your project, and from that new folder run stagehand web-simple.

mkdir my_new_project
cd my_new_project
stagehand web-simple

After that finishes, make sure to run pub get to pull in the dependencies that you need. You'll be greeted with a project that looks like this.

Serve and Build your Project

Serving your project locally for development is made very easy by the aforementioned webdev tool.

Simply run webdev serve and you'll be able to view your page at http://127.0.0.1:8080.

When you are ready to build your app for production, run webdev build. The resulting static site code will be built and saved into the build folder. That folder then can be uploaded anywhere that you can serve static websites (such as Github Pages or S3).

Getting Stylish with Sass

One of my favorite things about this approach to building small, simple websites is that using scss is nearly effortless.

First, add the sass_builder package to your project. Go to the linked page, take note of the most recent version, and then add it to your pubspec.yaml file as one of your dev_dependencies like so,

dev_dependencies:
  build_runner: ^1.10.0
  build_web_compilers: ^2.11.0
  pedantic: ^1.9.0
  sass_builder: ^2.1.3

After this, any scss or sass file will be built into a css file with the corresponding name. So if you have a file called style.scss in your web folder, after it is built it will become a style.css file in your build folder.

Within your html files, be sure to refer to the style files by their css name. So for example if you have a file named web/style.scss, in web/index.html you would include it like this.

<link rel="stylesheet" href="style.css">

This is because you're referencing the resulting built file, not the source scss file.

So let's prepare a little HTML that we can style (and then later use for demonstrating making HTTP requests).

<div id="app">
  <main>
    <img id="good-boy" />
    <button id="get-good-boy">Get Good Boy!</button>
  </main>
</div>

And some SCSS in our styles.scss file.

#app {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  main {
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    img, button {
      width: 100%;
    }
  }
}

Handle Fetch Requests with Dio

Another great thing about making simple web apps with Dart in this way, is that you have access to the vast assortment of Dart libraries.

If, for example, you're familiar with using Dio due to working with Flutter, there's no reason why you can't use Dio to handle your fetch requests here.

First add Dio as a dependency in your pubspec.yaml file.

dependencies:
 dio: ^3.0.10

At the top of your main.dart file, include these dependenices.

import 'dart:html';
import 'dart:convert';
import 'package:dio/dio.dart';

dart:html will provide the querySelector method as well as typing for various elements, dart:covert will be used for turning JSON responses into maps, and dio of course provides Dio.

So within our main function, let's grab the necessary elements and add an event listener to the button.

void main() async {
  ImageElement dogImage = querySelector('#good-boy');
  ButtonElement dogButton = querySelector('#get-good-boy');

  dogButton.addEventListener('click', (Event event) async {
    dogImage.src = await getGoodBoy();
  });
}

All of the above is pretty straightforward. From there we need to actually create the getGoodBoy button for grabbing pictures of the goodest of good boys (from a free API of dog pictures).

Future<String> getGoodBoy() async {
  final uri = 'https://dog.ceo/api/breed/akita/images/random';
  final response = await Dio().get(uri);

  Map<String, dynamic> body = jsonDecode(response.toString());

  return body['message'];
}

And there you have it! If everything works you should be greeted with something like this upon pressing the "Get Good Boy" button!