Tech tips / 2

Company and industry news, featured projects, open source code, tech tips, and more.

Animate CSS auto height without JavaScript

Michael Argentini Avatar
Michael ArgentiniSunday, August 4, 2024

Web developers rejoice! There's an easy way to animate the height of an HTML element even if the height is dynamic, determined by its content, with only CSS. This is typically used for navigation menus and the like, and now it's much easier to code and maintain.

The strategy is to actually animate the grid-template-rows not the height. For example, take the following HTML markup:

<div class="menu">
    <div class="inner-wrapper">
        <p>Here is some content.</p>
        <p>Here is some content.</p>
        <p>Here is some content.</p>
    </div>
</div>

The CSS for this markup would be:

.menu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 100ms;
}

.menu.active {
    grid-template-rows: 1fr;
}

.menu .inner-wrapper {
    overflow: hidden;
}

Initially the outer div will be hidden since it has no overflow and the grid template rows are zero. When you add active to the outer div element's class list, the browser will animate the transition from zero row height to 1fr, which essentially means the height it needs for its content to render.

Want to know more?

There's usually more to the story so if you have questions or comments about this post let us know!

Do you need a new software development partner for an upcoming project? We would love to work with you! From websites and mobile apps to cloud services and custom software, we can help!

Run the Ollama API on macOS with custom host bindings

Michael Argentini Avatar
Michael ArgentiniSunday, July 28, 2024

By default the ollama API runs on the localhost IP address of 127.0.0.1. If you want to host it on all of your Mac's IP addresses it requires that you set a system-wide environment variable. The problem with doing this is that Login Items (in System Settings) can launch before Launch Agents. This means that Ollama (in the menu bar) may not see the host settings. To solve this you need to launch Ollama at startup after a delay.

Here's how to add the host binding for all IP addresses on the Mac and then have Ollama launch 10 seconds after you sign in. This works in macOS 14.5 Sonoma and should work in later versions.

Step 1: Create a launch daemon plist file below. Save it as com.fynydd.ollama.plist.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>com.fynydd.ollama</string>
    <key>ProgramArguments</key>
    <array>
        <string>/bin/launchctl</string>
        <string>setenv</string>
        <string>OLLAMA_HOST</string>
        <string>0.0.0.0</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
    <key>LaunchOnlyOnce</key>
    <true/>
</dict>
</plist>

Step 2: Copy the file to two locations:

/Library/LaunchDaemons/
~/Library/LaunchAgents/

This will set the host bindings at the system level, and also at the user level. So you should be covered no matter how you launch Ollama in the future.

Step 3: Set file permissions on the system-level file.

sudo chown root:wheel /Library/LaunchDaemons/com.fynydd.ollama.plist
sudo chmod 644 /Library/LaunchDaemons/com.fynydd.ollama.plist

Step 4: Install the launch agents:

sudo launchctl bootstrap system /Library/LaunchDaemons/com.fynydd.ollama.plist
launchctl load ~/Library/LaunchAgents/com.fynydd.ollama.plist

Now your system will start up and bind the Ollama host address to all IP addresses on the Mac.

Step 5: To launch Ollama after a 10 second delay, Open Script Editor and create the simple AppleScript file below.

delay 10
tell application "Ollama" to run

In the File menu choose Export, and then export it as type “Application” and name it “LaunchOllamaDelay”. Save it to your user Applications folder.

In System Settings go to Login Items and add the LaunchOllamaDelay application to the startup items. Also remove any existing Ollama startup item.

Now when you restart and sign in, Ollama will launch after 10 seconds which should be enough time for the Launch Agent to have executed. And if Ollama updates itself in the future it should also just work when it restarts.

Want to know more?

There's usually more to the story so if you have questions or comments about this post let us know!

Do you need a new software development partner for an upcoming project? We would love to work with you! From websites and mobile apps to cloud services and custom software, we can help!

Automate the installation of all your Mac apps using Homebrew and Mas

Michael Argentini Avatar
Michael ArgentiniWednesday, July 10, 2024

On macOS it's pretty easy to automate the installation of all your apps, including Mac App Store apps, for those times when you get a new Mac or wipe your current one. As a software developer I find this capability indispensable, as would any professional or power user.

All you need to do is install Homebrew and then use it to install mas (which is an acronym for Mac App Store). Once they are installed, you can install all your software using a convenient Bash script. Homebrew will be used to install non-store apps, and mas will handle installing the Mac App Store apps.

Note: only Mac App Store apps you have already installed previously can be installed with mas. You cannot install new apps you have never installed from the store.

Why do this?

The most obvious reason to script out your software installations is that it greatly reduces the time to set up a new Mac, as well as ensure that you don't forget to install one or more apps. It also provides a way to update all the apps at once via the brew upgrade command. And it also provides a way to update apps that don't have their own update feature.

Apps installed with mas will be updated normally by the Mac App Store.

How does this work?

In order to use this process you need to know the names of the Homebrew formulae/casks for each application, and you also need to know the IDs of the Mac App Store apps for mas. Fortunately this is super easy.

First, Homebrew has a tool for finding software available in their service at https://formulae.brew.sh/. Simply use this to find your apps and make sure you're installing the right ones. Those listed as “casks” are GUI Mac apps (normal apps you don't run from the Terminal). Ones listed as “formulae” are typically command line tools run from the Terminal or services without an interface.

Second, for Mac App Store apps you simply use mas to list what's currently on your computer from the Mac App Store.

mas list

This will give you a list of currently installed apps from the Mac App Store, with their IDs:

1569813296  1Password for Safari      (2.10.0)
975937182   Fantastical               (3.7.12)
409183694   Keynote                   (13.0)
etc.

You can also search for Mac App Store apps by name using the mas search command:

mas search Xcode

This will show a similar result for matches. You can even install all search results with a single “lucky” command. See the mas help for these and other options.

Script example

Here's an example of a Bash script to get you started. I keep a similar script updated as I use new apps or stop using others. Then I'm ready to go when I have to set up a new or wiped Mac.

# Install Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# App Store Automation

brew install mas

# Install App Store Apps

mas install 409183694   # Keynote
mas install 409201541   # Pages
mas install 409203825   # Numbers

# Install Non-Store Apps

brew install --cask firefox
brew install --cask knockknock
# etc.

You can name the Bash script something like install-software.sh and execute it in a Terminal like this:

zsh install-software.sh

The first time you use the script will absolutely justify the time spent writing it. The second time you run it you will thank your past self for being so smart 😉.

Want to know more?

There's usually more to the story so if you have questions or comments about this post let us know!

Do you need a new software development partner for an upcoming project? We would love to work with you! From websites and mobile apps to cloud services and custom software, we can help!

Upgrade Windows 10 without a TPM chip

Michael Argentini Avatar
Michael ArgentiniSunday, November 12, 2023

Microsoft (in)famously requires that your PC have a special security chip (TPM) in order to install Windows 11. But the requirement is wholly unnecessary to maintain a secure installation. And it requires many people to buy new PCs, arguing that this is likely the primary reason Microsoft implemented the requirement.

Patching the Windows install to allow it to run on existing hardware without a TPM chip has been a game of cat and mouse. And until now it had again been thwarted by Microsoft.

Recently Microsoft has patched the Windows 11 ‘product server’ trick for TPM check bypass, but the bypass still works with setupprep.exe. This bypass will upgrade Windows 10 clients to Windows 11 without requiring a TPM.

setupprep.exe /product server

How to copy a Git repo to another location using rsync on macOS

Michael Argentini Avatar
Michael ArgentiniWednesday, June 14, 2023

Here's a Mac pro tip: When copying a git repository directory to your network file server using rsync, try this:

rsync -brtlvP --chmod=Fu+w --delete-before Code/MyProject/ /Volumes/MyServer/Code/MyProject/

This will copy the files with timestamps but no other attributes, and will also give the file owner (you) full access rights. This ensures that you (or even Windows users with access rights) can overwrite the directory contents later because local read-only files (e.g. in the .git directory) won't be read-only on the server. You can also change the chmod option to customize the rights, like ensuring everyone has full control.

Install SQL Server 2022 with full-text search on Apple Silicon Macs

Michael Argentini Avatar
Michael ArgentiniThursday, April 27, 2023

It looks like a recent change to Docker has allowed Macs with Apple Silicon to run a full installation of Microsoft SQL Server 2022 with full-text search in a Docker container.

How is this possible? Docker has a new feature that can use Rosetta 2 for x64 emulation. That means it supports creating an x64-based Linux image/container and installing the free but full version of SQL Server with FTS.

Step 0: Enable Rosetta in Docker

Enable this feature in the Docker settings as seen in the image below. Look in Settings => Features in development.

Step 1: Create the dockerfile

Take the content below and save it as a text file named Dockerfile. This configuration creates an Ubuntu 20.04 image, then installs the Microsoft package repositories, SQL Server 2022, FTS, and MS Tools.

# Docker image with msssql 2022 with full text search enabled;
# Based on work in: https://github.com/Microsoft/mssql-docker

# Base OS layer: Latest Ubuntu LTS
FROM --platform=linux/amd64 ubuntu:focal

# Install prerequistes since it is needed to get repo config for SQL server
RUN export DEBIAN_FRONTEND=noninteractive && \
    apt-get update && \
    apt-get install -yq curl apt-transport-https gnupg && \
    # Get official Microsoft repository configuration
    curl https://packages.microsoft.com/keys/microsoft.asc | apt-key add - && \
    curl https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb --output packages-microsoft-prod.deb && dpkg -i packages-microsoft-prod.deb && \
    curl https://packages.microsoft.com/config/ubuntu/20.04/mssql-server-2022.list | tee /etc/apt/sources.list.d/mssql-server.list && \
    apt-get update  && \
    # Install SQL Server from apt
    apt-get install -y mssql-server && \
    # Install optional packages
    apt-get install -y mssql-server-fts && \
    ACCEPT_EULA=Y apt-get install -y mssql-tools && \
    # Cleanup the Dockerfile
    apt-get clean && \
    rm -rf /var/lib/apt/lists

# Run SQL Server process
CMD /opt/mssql/bin/sqlservr

Step 2: Build the dockerfile

This will build the Dockerfile and create a Docker image named sqlserver.

docker build -t "sqlserver:latest" .

Step 3: Run the container

This will create a container from the new image and run it. The sa user will have a password of P@ssw0rdz!, the EULA will be accepted, and port 1433 will be opened.

docker run -d --platform linux/amd64 --name sqlserver -e 'ACCEPT_EULA=Y' -e 'SA_PASSWORD=P@ssw0rdz!' -p 1433:1433 sqlserver:latest

At this point you should have SQL Server running! You can also have it start up with Docker by executing the command below:

docker update --restart=always sqlserver

Use CSS to style elements adjacent to an input based on it being empty or filled

Michael Argentini Avatar
Michael ArgentiniWednesday, December 21, 2022

Here's an interesting method for styling an adjacent element based on whether an <input> is empty or not.

The traditional method for accomplishing this is to use JavaScript, which involves more complex code that is difficult to write and manage. It would require using a selector to find both elements, determining if the input is empty or not, and altering the styles or class names of the adjacent element.

The method below only requires CSS.

input[type="search"]:placeholder-shown + i {
    /* input is empty */
    display: none;
}

input[type="search"]:not(:placeholder-shown) + i {
    /* input is not empty */
    display: inline-block;
}

In this case I'm hiding and showing a clickable icon that clears the search text if there is any. No JavaScript needed other than the click event 😃.

Want to know more?

There's usually more to the story so if you have questions or comments about this post let us know!

Do you need a new software development partner for an upcoming project? We would love to work with you! From websites and mobile apps to cloud services and custom software, we can help!

© 2026, Fynydd LLC / King of Prussia, Pennsylvania; United States / +1 855-439-6933

By using this website you accept our privacy policy. Choose the browser data you consent to allow:

Only Required
Accept and Close