DEV Community: Monica Granbois

Using React to visualize the knapsack algorithm

Monica Granbois — Tue, 14 Jun 2022 16:35:27 +0000

React and Tailwind CSS are popular front-end technologies. I had not used either and wanted to try them. After completing some React tutorials, I wanted to create my own app. I decided to create an app that would step through the knapsack algorithm. This would help me solidify my understanding of the algorithm while learning React and Tailwind CSS. This post lists the design and technology choices I made to build the app. For details about the algorithm itself, please visit https://monicagranbois.com/knapsack-algorithm-visualization/.

Approach

My approach was to build a skeleton of the app first, without any CSS. This allowed me to focus on React and the logic of the app.

Once I had the basic logic working I added Tailwind CSS to the project. This allowed me to then focus on learning Tailwind CSS.

I then iterated on the project using React and Tailwind CSS at the same time.

I think this was a good approach since I was learning two technologies. It allowed me to focus on one technology at a time. Now that I am familiar with both I would approach a new project differently. In the future, I would iterate on a project with React and Tailwind CSS at the same time.

Technologies Used

Create React App
- I chose Create React App (CRA) because I was creating a new, standalone React App.
- This was my first time using CRA, as the tutorials only used React in an index.html file.
Tailwind CSS
- To get started I followed the tutorials on the Tailwinds YouTube channel. The documentation and online playground were also helpful.
- I used the Hero Icons project to find and add icons to my project.
- Overall, I liked Tailwind CSS, but it felt verbose to apply styles in the HTML rather than in a separate CSS file.
  - The developer addressed the issue of separation of concerns in his blog post CSS Utility Classes and "Separation of Concerns".
  - I did define custom classes for styles used in multiple places.
React Hook Form
- I initially wrote my own form validation. That was the wrong approach.
- I found React Hook Form, which made form validation much easier.
- It also allowed me to use dynamically-generated fields. This allowed me to add, edit and delete items on the initial setup screen.
- I would recommend investigating this tool if your app uses forms.
react-syntax-highlighter
- I used this to highlight code segments when the app steps through the code.
react-embed-gist
- I used this to display the complete algorithm at the end. I used this rather than react-syntax-highlighter because gist has better copy support. If someone wants to copy the algorithm, it is easier for them to do so with the gist.
- The downside is it performs a network call to get the gist.
- I am not sure if this was the right approach.
GitHub Pages
- I use this to host the app. My blog is already hosted on GitHub Pages, so it seemed a natural place to host it.
- I use a GitHub workflow to deploy the site.

Please try the app at https://monicagranbois.com/knapsack-algorithm-visualization/. I would appreciate any feedback on it or my tech choices. Happy coding!

Install PostgreSQL onto Ubuntu multipass vm

Monica Granbois — Tue, 15 Feb 2022 22:18:10 +0000

I recently installed PostgreSQL on a virtual machine on my dev computer. This post describes what I did to:

install a vm
install PostgreSQL
access PostgreSQL from the host machine via pgAdmin
install a sample database into PostgreSQL

I decided to use Ubuntu multipass to create the vm. I had not used it before, and this was a chance to experiment with it. Multipass lets you spin up vm instances from the command line. I found the installation docs easy to follow and had an Ubuntu vm running in a few minutes.

Install Multipass

I have a Mac, so I had a couple of options to install Multipass: brew or a direct install. I chose to install via brew:

$ brew install --cask multipass

Some notes on my install:

I used the default hyperkit driver for the hypervisor.
- Multipass defaults to hyperkit; but, you can set VirtualBox as the hypervisor.
I set the terminal application to iTerm following these instructions

After the installation process, I checked that multipass was installed:

$ multipass version
multipass   1.8.1+mac
multipassd  1.8.1+mac

Create a VM

The launch command is used to create a new vm. You can provide it a name or multipass can generate one for you. I chose to provide a name, db-server, using the --name parameter.

$ multipass launch --name db-server

There are two ways two access the vm:

by opening a shell in the instance
by using the exec command to execute commands directly.

I chose to open a shell:

$ multipass shell db-server

The shell will display some stats, including the ipaddress of the vm. Make note of the ipaddress, as it will be needed when connecting to the database at a later step.

Install PostgreSQL

I installed the latest version using the instructions on the PostgreSQL Ubuntu page. The following commands are copied from that page. Please note, the following are all performed within the db-server shell.

# Create the file repository configuration:
sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'

# Import the repository signing key:
wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -

# Update the package lists:
sudo apt-get update

# Install the latest version of PostgreSQL.
# If you want a specific version, use 'postgresql-12' or similar instead of 'postgresql':
sudo apt-get -y install postgresql

Installing PostgreSQL creates a postgres account on the Ubuntu vm. I logged into it to access psql:

ubuntu@db-server:$ sudo su - postgres

postgres@db-server:~$ psql

The following was displayed:

psql (14.2 (Ubuntu 14.2-1.pgdg20.04+1))
Type "help" for help.

postgres=#

The postgres user does not have a password. It can be set using the \password command:

psql (14.2 (Ubuntu 14.2-1.pgdg20.04+1))
Type "help" for help.

postgres=# \password
Enter new password for user "postgres":

To exit postgres use the \q command

Setup DB Access

PostgreSQL is installed on the vm, but it is not yet accessible from the Host machine (my macOS). The PostgreSQL config files will need to be modified. The files are located in /etc/postgresql/{version}/main/ directory. In my case the files are in /etc/postgresql/14/main/.

Warning: The following is not a secure way to setup PostgreSQL. See the PostgreSQL documentation for information on setting up PostgreSQL securely.

Note: I was logged in as the postgres user while making modifications.

postgresql.conf

This file contains settings such as default storage location and memory allocation. It also configures the IPAddresses that PostgreSQL will listen on.

Find this line:

#listen_addresses = 'localhost'         # what IP address(es) to listen on;
                                        # comma-separated list of addresses;
                                        # defaults to 'localhost'; use '*' for all

Remove the # to uncomment the line and change localhost to "*"

listen_addresses = '*'              # what IP address(es) to listen on;
                                        # comma-separated list of addresses;
                                        # defaults to 'localhost'; use '*' for all

pg_hba.conf

This file manages security. It controls user authentication, database access and which ipaddresses are allowed to connect. Entries are in the form:

CONNECTION_TYPE     DATABASE    USER    ADDRESS     METHOD

Add the following line to the file:

host    all             all             samenet                 md5

The above line will allow TCP/IP connections for all databases and users where the host is on the same subnet as the server. The connection method is "md5".

host - This is the connection type. "host" means a TCP/IP socket (either encrypted or not).
all - The first all is the database that is allowed to be connected to. In this case all databases can be connected to.
all - The second all is the user that can connect. In this case all users can connect.
samenet - This is the host address that is allowed to connect. Using samenet means that any address in the subnet the server is on is allowed to connect.
md5 - use md5 authentication.

PostgreSQL will need to be restarted in order for the changes to take effect. Exit the postgres user back to the ubuntu user and restart PostgreSQL:

sudo systemctl restart postgresql.service
# check that PostgreSQL is ready after the restart
sudo pg_isready

pgAdmin

pgAdmin is installed on my host machine (MacOS). I want to use it to connect to the PostgreSQL installed on the Ubuntu vm. I used the 'Add Server' wizard to connect to the database with the following information

General -> Name: db-server (although this could be anything you want)
Connection -> Host name/Address: 192.168.64.3 (The IPAddress of my Ubuntu vm)
Connection -> Port: 5432 (the default PostgreSQL port)
Connection -> Maintenance database: postgres
Connection -> Username: postgres

Install a sample database

Next, I installed a sample database because I wanted some tables and data to play with. Googling turned up many options. I chose the northwind sample database for psql.

Create Role

First, I created a role to use with the northwind db. I created a new role by right clicking on the "db-server" menu option and selecting "Create -> Login/Group Roles...". The pgAdmin documentation has details on all the various fields. In short, I did the following:

General -> Name: north
Definition -> Password: super secret password
Privileges -> Can login: Yes
Privileges -> Superuser: No
Privileges -> Create roles: No
Privileges -> Create databases: Yes
Privileges -> Inherit rights from the parent roles: Yes
Privileges -> Can initiate streaming replication and backups: No

The sql displayed in the SQL tab was the following:

CREATE ROLE north WITH
    LOGIN
    NOSUPERUSER
    CREATEDB
    NOCREATEROLE
    INHERIT
    NOREPLICATION
    CONNECTION LIMIT -1
    PASSWORD 'xxxxxx';
COMMENT ON ROLE north IS 'The user for the northwind database';

After clicking the save button the 'north' role was created.

Create the database

I created a database by right clicking on the "db-server" menu option and selecting "Create -> Database...". The pgAdmin documentation details how to create a database. I did the following:

General -> Database: northwind
General -> Owner: north
Definition -> Encoding: UTF8 (This is the encoding used by the sample database)
Definition -> Template: template1
Definition -> Tablespace: pg_default
Definition -> Collation: C.UTF-8
Definition -> Character Type: C.UTF-8
Definition -> Connection limit: -1

The sql displayed in the SQL tab was:

CREATE DATABASE northwind
    WITH 
    OWNER = north
    TEMPLATE = template1
    ENCODING = 'UTF8'
    LC_COLLATE = 'C.UTF-8'
    LC_CTYPE = 'C.UTF-8'
    TABLESPACE = pg_default
    CONNECTION LIMIT = -1;

COMMENT ON DATABASE northwind
    IS 'Sample database';

Load the database

I opened the Query Tool by drilling down to db-server -> Databases -> northwind, right clicking and choosing Query Tool. I am logged in as the postgres user, so any SQL I run will be under that account. I want to use the north account instead. The user can be changed by clicking on the connection drop down in the Query Tool editor.

After connecting as the north user the connection information should be: northwind/north@db-server.

Next, I download the northwind sample database from GitHub to my host machine (MacOS):

$ curl https://raw.githubusercontent.com/pthom/northwind_psql/master/northwind.sql -o northwind.sql

I then loaded the tables using the Query Tool in pgAdmin. The steps I used were:

Open File
- Choose northwind.sql file that was just downloaded
- This will display the contents of the file into the editor
Click 'Execute/Run'
Right click on db-server and choose refresh.

Now, drilling down through the menus: Databases -> northwind -> Schemas -> public -> Tables displays 14 tables.

The tables can also be viewed on the guest machine (Ubuntu). As the postgres user, log into the northwind database and use the \dt command to list the tables.

postgres@db-server:~$ psql northwind
psql (14.2 (Ubuntu 14.2-1.pgdg20.04+1))
Type "help" for help.

northwind=# \dt

Stop/Start the VM

To shutdown the Ubuntu vm use the command:

$ multipass stop db-server

To restart the server use the command:

$ multipass start db-server

Conclusion

I now have a vm running PostgreSQL!

How to mock nanoid

Monica Granbois — Wed, 17 Nov 2021 00:43:10 +0000

This short blog post describes how to use Jest to mock nanoid. The nanoid function generates a unique string id. I used it to generate an id for an object. However, I wanted a stable id when unit testing the code. To accomplish this, I mocked the nanoid module and function by doing the following:

jest.mock("nanoid", () => {
  return { nanoid: () => "1234" };
});

The above code does the following:

jest.mock("nanoid"...) - This part mocks the nanoid module.
return { nanoid: () => "1234" }; - This part mocks the nanoid function. "1234" is returned when the nanoid function is called.

Below, is a simple example of a React app using the nanoid function and a unit test mocking it.

`App.js`

import { nanoid } from "nanoid";

class Item {
  constructor(name, price) {
    this.id = nanoid();  //use nanoid to generate a unique id
    this.name = name;
    this.price = price;
  }
}

function Display({ item }) {
  return (
    <div>
      <h2>Item</h2>
      <p>id: {item.id}</p>
      <p>name: {item.name}</p>
      <p>price: {item.price}</p>
    </div>
  );
}

function App() {
  const item = new Item("apple", 2);
  return (
    <div className="App">
      <h1>Nanoid Unit Test Example</h1>
      <Display item={item} />
    </div>
  );
}

export default App;
export { Display, Item };

`App.test.js`

import { render, screen } from "@testing-library/react";
import { Display, Item } from "./App";

jest.mock("nanoid", () => {
  return { nanoid: () => "1234" };
});

describe("test the Display", () => {
  it("should display the item info", () => {
    let item = new Item("Orange", 5);
    render(<Display item={item} />);
    expect(screen.getByText(/id: 1234/i)).toBeInTheDocument();
    expect(screen.getByText(/name: Orange/i)).toBeInTheDocument();
    expect(screen.getByText(/price: 5/i)).toBeInTheDocument();
  });
});

Note: As of this writing CodeSandbox does not support Jest mocks.

References:

Jest Mock Functions

How to free up disk space for XCode Beta install

Monica Granbois — Thu, 09 Sep 2021 18:02:14 +0000

TL;DR - delete Time Machine local snapshots to free up space.

Does anyone else find installing XCode frustrating? I always need more free disk space, especially when installing a beta. This was the case when I downloaded XCode 13 Beta 5 from the Apple Developer Downloads page. When I tried to extract the xip file I got an error stating:

"The archive XCode_13_beta_5.xip can't be expanded because the current volume doesn't have enough free space."

I deleted XCode simulators and cache files to free up space with the following steps:

Go to Apple icon -> About This Mac
Click on 'Storage' tab
Click 'Manage' Button
In the Developer menu delete:
- the XCode Cache file
- old iOS and watchOS Device support files

I also delete unused applications, log files, and music to clear up space. After much pruning, I had over 100GB free. Still, the Archive Utility app complained there was not enough free space!

// Detect dark theme var iframe = document.getElementById('tweet-1435299567583600645-611'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1435299567583600645&theme=dark" }

This seemed odd. I tried the solution proposed in this blog post: Installing Xcode with “not enough disk space available”. It didn't work for me. But I suggest trying it out.

However, the blog post did lead me to check my disk space using the Disk Utility app (Applications -> Utilities -> Disk Utility). It reported I only had ~25GB free when the "About This Mac" storage screen reported I had ~100GB.

After some googling I found this question on StackExchange: macOS not showing the actual free space. The answers said to delete Time Machine local snapshots. I did so, and boom, the Disk Utility app reported I had 100GB free. I tried the Archive Utility app again. This time it expanded the xip file and installed XCode Beta! Yay!

The commands I used to list and delete the time machine files were (from this answer):

$ tmutil listlocalsnapshots /
com.apple.TimeMachine.2021-08-20-195949.local
com.apple.TimeMachine.2021-09-08-114353.local

 $ tmutil deletelocalsnapshots 2021-08-20-195949
 $ tmutil listlocalsnapshots /
 com.apple.TimeMachine.2021-09-08-114353.local

Why is there a discrepancy between the free space reported by the About This Mac and the Disk Utility apps? Because macOS will automatically delete snapshots when space is needed. So, About This Mac considers the space used by local snapshots as available. Therefore, it reported ~100GB free space. However, the Disk Utility does not consider snapshots as free space. The snapshots are using space so Disk Utility reports that space as used. So, it reported there was only ~25GB of free space.

The Archive Utility also does not consider the storage used by snapshot as free space. It checks for disk space before extracting the file and, in my case, detected that only ~25GB was free. By deleting the local snapshot, it was able to expand the xip file and install XCode Beta.

References:

Generating A New Apple Distribution Certificate

Monica Granbois — Mon, 29 Mar 2021 19:05:33 +0000

This post is a note to my future self about generating Apple Distribution Certificates. I received an email stating:

Your Distribution Certificate will no longer be valid in 30 days. To generate a new certificate, sign in and visit Certificates, Identifiers & Profiles.

After signing in, the Certificates, Identifiers & Profiles page will list two certificates:

Apple Distribution certificate
- Used to distribute apps to TestFlight and the App Store.
- An expired certificate does not affect my apps on the App Store. However, I cannot update my apps or upload new apps with the expired certificate.
Apple Development certificate
- Used to run apps on devices and use app services.
- It will have my computer's name appended to the certificate name.

To generate a new certificate I followed the steps from this StackOverflow answer:

Open Xcode

Open Xcode Preferences (Xcode->Preferences or Cmd-,)

Click on Accounts

At the left, click on your developer ID

At the bottom right, click on Manage Certificates...

In the lower left corner, click the arrow to the right of the + (plus)

Select Apple Distribution from the menu

I also revoked the old certificate on the Certificates, Identifiers & Profiles page. I did this by clicking on the distribution certificate and then clicking the revoke button.

XCode manages my provisioning profile, so I did not need to manually update it.

References:

How To Use GitHub Actions To Deploy an 11ty Website To S3

Monica Granbois — Thu, 11 Feb 2021 19:01:37 +0000

I use 11ty to generate a static website and S3 to host it. This post describes how I set up a workflow in GitHub Actions to build and deploy the website. The workflow uses the AWS - CLI S3 - sync command to transfer the files.

This post describes how to:

create an AWS policy with only those permission needed by the sync command
create an AWS individual IAM user with the above policy
create a GitHub Action workflow using the sync command to upload the files

I will provide the policy and workflow files first for those wanting only the code. A detailed walk-through is provided below these files. This post assumes you already have set up an S3 bucket. If not, please see the Hosting a static website using Amazon S3 guide.

`s3_sync_policy.json`

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:DeleteObject",
                "s3:GetBucketLocation"
            ],
            "Resource": [
                "arn:aws:s3:::your-bucket-name",
                "arn:aws:s3:::your-bucket-name/*"
            ]
        }
    ]
}

`github_build_and_deploy_workflow.yml`

name: Build and Deploy to S3
on: [push]
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2.3.4

      # Uncomment if you want to specify a certain 
      # Node version. Otherwise the Node version installed
      # on the GitHub VM will be used. For more details
      # see: https://github.com/actions/virtual-environments 
      # - name: Setup Node.js environment
      #   uses: actions/setup-node@v2.1.4
      #   with:
      #     node-version: '15.7.0'

      # Uncomment if your project uses dependencies
      # - name: Install dependencies
      #   run: npm ci

      - name: Build the website
        run: npx @11ty/eleventy

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-west-2 # replace this with your aws-region

      - name: Upload files to S3 with AWS CLI
        run: |
          aws s3 sync _site/ s3://${{ secrets.S3_BUCKET }} --delete

Walk-through

There are many menus to navigate to set this up. I've created a video walk through to help explain where everything is. If you want just the text write up then please skip to the AWS Setup section below.

AWS Setup

Using an individual IAM account with limited permissions is a best practice. Creating a new user, rather than using an existing one, means the credentials are not shared across services. If the credentials change then GitHub alone will be affected. Plus, we can restrict the user to only those permissions needed by the workflow. In this case, the account will only have permissions for the actions needed by the sync command. For more details on credential best practices, see the configure-aws-credentials documentation.

Create a policy

The first step is to create a policy that will only contain the permissions needed by the sync command. This policy will be used during the account creation step.

To create the policy:

Sign in to the IAM Console.
Goto Access Management -> Policies -> Create Policy.
Click the JSON tab and paste in the JSON policy from above.
Click the 'Review' Policy button.
Next, name the policy. I used S3-Sync-Policy.
Click the 'Create Policy' button.

This policy does the following:

Allows the following actions:
- s3:PutObject
- "Grants permission to add an object to a bucket"
- s3:GetObject
- "Grants permission to retrieve objects from Amazon S3"
- s3:ListBucket
- "Grants permission to list some or all of the objects in an Amazon S3 bucket"
- s3:DeleteObject
- "Grants permission to remove the null version of an object and insert a delete marker, which becomes the current version of the object"
- s3:GetBucketLocation
- Grants permission to return the Region that an Amazon S3 bucket resides in"
Specifies the resources the actions can be applied to. Ensure you change the your-bucket-name value.
- arn:aws:s3:::your-bucket-name
- Applied to the bucket: your-bucket-name
- arn:aws:s3:::your-bucket-name/*
- Applied to all objects in your-bucket-name

You can also create the policy using the Visual Editor rather than pasting in the JSON code. Note: You do not need to do both. The Visual Editor is a second way to create the policy. The video demonstrates using the Visual Editor.

Create a user

The next step is to create a user and apply the policy to it.

To create a user:

Goto Access Management -> Users -> Add user
On the first screen:
- Enter a name in the "User Name" field. I chose github-actions.
- Select "Programmatic access" in the "Access Type" section. This user does not need "AWS Management Console access".
- Click the "Next: Permissions" button.
On the second screen:
- Click on the "Attach existing policies directly" box in the "Set permissions" section.
- Use the search feature to find the policy created in the previous section. Select it.
- Click the "Next: Tags" button.
On the third screen:
- Optionally add a tag (or more) for the user.
- Click the "Next: Review" button.
On the fourth screen:
- Review the user settings.
- Click the "Create User" button.
On the fifth screen:
- This screen displays the user's AWS credentials. These will be used with the GitHub repo. WARNING: This is the only time the credentials will be available to download. Either keep this screen open while setting up GitHub, OR click the Download button.

GitHub Setup

Setup AWS Credentials

The GitHub action will need the AWS credentials in order to work. Add the credentials to your repo by doing the following:

Go to your repo
Click Settings -> Secrets -> New Repository Secret
Using the credentials created in the previous section, add keys for:
- AWS_ACCESS_KEY_ID
- AWS_SECRET_ACCESS_KEY
Also, add an S3_BUCKET key with the name of your S3 bucket.

Create a GitHub Workflow

Now to create a workflow that will build the website and upload it to S3. The workflow will do the following:

Use the configure-aws-credentials to access the AWS access and secret keys
Build the website using 11ty
Use the AWS-CLI to upload the generated site to the S3 bucket

To create the workflow:

In your repo click the Actions link.
Click on the "Skip this and set up a workflow yourself" link.
Remove the template code and replace it with the yml file from above.
Change the aws-region location to your bucket's region.
Optionally, rename the file.
Click the "Start Commit" button.

Below is a description of what each line does:

name: Build and Deploy to S3

The name of this workflow. It will show under the Actions tab in your repository. Name the workflow whatever you like.

on: [push]

This is the event that will trigger this workflow. In this example, it will run on any push to the repository. See Events that trigger workflows for other options.

jobs:

Groups together the jobs that run in this workflow (Build and Deploy to S3).

build_and_deploy:

The name of the job. This name can be whatever you would like it to be.

runs-on: ubuntu-latest

In this example, the workflow will run in an ubuntu virtual environment using the latest version supported by GitHub. See Specifications for GitHub-hosted runners for other options.

steps:

Groups together all the steps that run during the build_and_deploy job.

- name:  Checkout repository`
  uses: actions/checkout@v2.3.4

This block of code is one step. The name is optional. If provided it will be displayed in the output when the workflow runs. The uses keyword retrieves the action to run in this step. An action is a reusable piece of code. In this case, the step uses the public action actions/checkout@v2.3.4 to checkout your repository. See the Checkout documentation for more details.

 - name: Build the website
   run: npx @11ty/eleventy

This step uses the run keyword to execute a command-line program using the OS's default shell. In this case, npx is used to generate the 11ty website.

- name: Configure AWS Credentials
  uses: aws-actions/configure-aws-credentials@v1
  with:
    aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
    aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
    aws-region: us-west-2 # replace this with your aws-region

This step uses the public configure-aws-credentials action to set up the credentials for the workflow. The with keyword is a map of input parameters to the action. Here, the repo's AWS secret keys are passed to the action. See "Configure AWS Credentials" Action For GitHub Actions for more details on this Action.

 - name: Upload files to S3 with AWS CLI
   run: |
     aws s3 sync _site/ s3://${{ secrets.S3_BUCKET }} --delete

This step uses the AWS CLI to transfer the files generated by the "Build the website" step to the S3 bucket. The AWS CLI is installed by default on the virtual machine. See the GitHub Actions Virtual Environments for more details on pre-installed tools.
The S3 sync command recursively copies files from the _site directory to the S3 bucket. The --delete option deletes any files in the S3 bucket that are not in the _site directory.

Run the workflow

The workflow will run when a commit is pushed to the repo. You can see the output of a run by going to the 'Actions' menu for the repo. Here is an example of the output of the workflow.

Thank you for reading! I hope you found this useful!

References

Autoscaling PDF Images On Apple watchOS

Monica Granbois — Thu, 26 Nov 2020 17:14:53 +0000

In this post, I will discuss autoscaling PDF images and how to add one to a watchOS project.

The PDF format allows an image to scale without looking fuzzy at different sizes. This format is best used with vector artwork; think icons. Programs like Inkscape, Adobe Illustrator and, Vectornator can export PDF images.

For more details on designing a PDF image see the Image Optimization page in the Human Interface Guidelines for watchOS. It includes the scales used for the different screen sizes.

Setting certain flags in XCode will tell WatchKit to scale the image based on screen size. And so, you have an autoscaling PDF image. This means the project only needs one image for all screen sizes. Otherwise, the project would need multiple scaled image files.

Once you have a PDF image, add it to the Asset Catalog in an XCode project.

In an XCode project:

Go to Assets.xcassets
Right-click anywhere in the Asset Catalog Editor (the white area). This will bring up a pop-up menu.
Choose Image Set. This will create an empty Image Set.

The next step is to change some settings in the Attribute Inspector. If the Inspectors editor is not displayed, open it using the button in the top right corner of XCode.

Next, mark the image for use on an Apple Watch. In the 'Devices' section of the Attribute Inspector:

uncheck the 'Universal' option
check the 'Apple Watch' option
This will result in one 2x square for the Apple Watch.

Now add the pdf image to XCode. I'm using this happy face image.

Drag and drop the image onto the 2x Apple Watch Square.
Give the Image Set a name in the Attribute Inspector. I chose 'Happy'.

Next set the scaling options in the Attribute Inspector:

Set the 'Scales' option to 'Single Scale'

Further down the menu, in the 'Apple Watch' section, change 'Auto Scaling' to 'Automatic'

Now, the image will scale based on the Apple Watch's screen size!

An aside about the ‘Preserve Vector Data’ box in the Attribute Inspector. This appears to be for iOS apps and not watchOS apps. Checking the box means the vector data is included with an iOS app. This will allow the image to scale automatically. The option is discussed in the What's New in Cocoa Touch video around the 33:50 mark.

I experimented with both checking and unchecking the box. It did not seem to make a difference for a watchOS project. I created a StackOverflow Question about it, but as of this writing, it has not received a response. I have left the ‘Preserve Vector Data' box unchecked.

Below is code demonstrating the use of the autoscaling PDF image. The result shown is from the preview canvas for 44mm and 38mm screens.

import SwiftUI

struct ContentView: View {
    var body: some View {
      VStack {
          Image("Happy")
          Text("Hello, World!")
            .padding()
        }
    }
  }

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
      return Group {
        ContentView()
        .previewDevice("Apple Watch Series 6 - 44mm")
        ContentView()
          .previewDevice("Apple Watch Series 3 - 38mm")
      }
    }
}

How I replaced a nested for loop with flatMap

Monica Granbois — Wed, 04 Nov 2020 19:05:09 +0000

This is a short post about how I refactored a nested for loop using flatMap. I had a struct that defined name and quantity properties as shown below:

struct Item {
  let name: String
  let quantity: Int
}

The actual code used a custom type rather than a String, but I've used String here to simplify the example.

I also had an array of Items. However, I wanted to create a new array that contained each Item's name for a count of its quantity. So, given the following:

let myList = [
  Item(name: "Apple", quantity: 2),
  Item(name: "Banana", quantity: 1),
  Item(name: "Carrot", quantity: 3),
  Item(name: "Doughnut", quantity: 1)
]

I wanted a new String array containing the following:

["Apple", "Apple", "Banana", "Carrot", "Carrot", "Carrot", "Doughnut"]

My first attempt was using for loops:

var nameList: [String] = []
for item in myList {
  for _ in 0..<item.quantity {
    nameList.append(item.name)
  }
}

print(nameList)

However, I did not like the nested for loops. It seemed verbose; I wanted to condense the code. Fortunately, Swift provides two things that make this refactoring possible:

An Array initializer that takes repeating and count parameters: Array(repeating:count:)
The flatMap function

I thought of using map, but map would result in an array of arrays. For example:

let nameListMap = myList.map { Array(repeating: $0.name, count: $0.quantity) }
print(nameListMap)

[["Apple", "Apple"], ["Banana"], ["Carrot", "Carrot", "Carrot"], ["Doughnut"]]

Not what I wanted. Fortunately, there is flatMap. FlatMap works like the map function, but it flattens an array of arrays. Just what I needed! So, the for loop could be replaced with the following:

let nameList2 = myList.flatMap{Array(repeating: $0.name, count: $0.quantity)}
print(nameList2)

["Apple", "Apple", "Banana", "Carrot", "Carrot", "Carrot", "Doughnut"]

The above code is doing the following:

For each Item in myList a new Array is created. It is populated with the Item's name for a count specified by the Item's quantity.
It then joins the arrays, resulting in a single, flat, array

Hurray!

Looking for UI feedback

Monica Granbois — Tue, 03 Nov 2020 19:23:12 +0000

I would like some feedback on a screen I redesigned, please. I have a standalone Apple Watch app, Barbell Helper. I updated the 'reverse calculator' screen. The purpose of the screen is to sum the weight of a barbell and the plates added to it. I changed the screen to provide a graphic of a barbell on which plates can be added or removed.

I would appreciate it if you tried the app out and let me know your thoughts. The app is available on test flight.

Here is a video of what the screen used to look like:

Here is a video of what the screen now looks like:

I'm specifically looking for feedback on:

the ease of tapping the buttons to add a plate to the barbell
the ease of tapping a plate on the barbell to remove it
the ease of understanding what plates are in use and the total weight

Other feedback is also appreciated.

Thank you!

SwiftUI: Previewing localized text in the canvas

Monica Granbois — Mon, 29 Jun 2020 23:32:16 +0000

Last week I watched the Swift packages: Resources and localization video from WWDC20. One thing I learned was that the Canvas can preview localized values. This is done by adding a locale to a View via the environment.

Example:

import SwiftUI

struct ContentView: View {
    var body: some View {
       Text("greeting")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView().environment(\.locale, Locale.init(identifier: "fr"))
    }
}

The above code assumes that a French Localizable.strings file exist with a greeting key. For example:

"greeting" = "Bonjour le monde!";

The EnvironmentValues documentation lists all the values that can be set.

How I debugged a crashing watchOS app with crash reports and log files

Monica Granbois — Fri, 08 May 2020 18:03:01 +0000

In a previous blog post, I wrote about my app crashing when it was installed via TestFlight. In this blog post, I will go into more detail about how I debugged the problem using logs and crash reports.

First, a quick recap of the problem. I wrote a stand-alone watchOS app. The app worked when installed via Xcode to my Apple Watch. However, it crashed when installed via TestFlight. This happened on both my and my husband’s watches.

My first step was to get the logs. In my case, there were two log files I wanted to look at. One was the log messages my app created using the unified logging system. The other was the crash report.

I installed sysdiagnose on my watch to see the unified logging messages. I followed these instructions (you will need to be logged into your apple developer account to view these instructions) to create a co-sysdiagnose file and copy it to my computer. The co-sysdiagnose tar file contains two tar.gz files, one for the iPhone and one for the watch. The watch file will have a name like:

 sysdiagnose_YEAR.MONTH.DAY_HH-MM-SS-xxxx_Watch-OS_Watch_watchOSBuildNumber.tar

For example:

  sysdiagnose_2020.04.30_09-06-08-0700_Watch-OS_Watch_17T530.tar.gz

The extracted archive contains many files and directories. The file that contains the log messages is system_logs.logarchive located at:

sysdiagnose_YEAR.MONTH.DAY_HH-MM-SS-xxxx_Watch-OS_Watch_watchOSBuildNumber/system_logs.logarchive

This file can be opened in the Console app (located on your computer in Applications -> Utilities).

All info and debug messages will be shown automatically. Usually, when using the Console app you would need to select these options under the Action menu. There were a lot of log messages displayed. These are from various systems on the Apple Watch. To filter the log messages so I could see just mine, I entered the subsystem my log messages used.

The crash report is also located in the extracted archive at:

 sysdiagnose_YEAR.MONTH.DAY_HH-MM-SS-xxxx_Watch-OS_Watch_watchOSBuildNumber/crashes_and_spins/app_name.ips.beta

Crash reports are also available when an app is distributed through TestFlight. This is not the case when an app is released on the App Store. In that case, the user needs to opt in to sending crash reports and statistics to the developer. To download a crash report go to Xcode -> Windows -> Organizer and click on the crashes tab. However, it can take up to a day for the reports to be available.

Crash reports can also be copied from the device to your computer. On the iPhone go to the Settings app -> Privacy -> Analytics & Improvements -> Analytics Data to see the files.

It can take a while for the files to sync from the watch to the phone. If the crash report is not on the phone, then it is likely still on the watch. Go to the Watch app on the iPhone and then General -> Diagnostic Logs to see the crash report.

In both locations, the crash report can be shared via the standard share icon. I use AirDrop to transfer files to my computer.

Regardless of how the crash report was obtained, the debug symbols need to be downloaded. In Xcode go to Window -> Organizer and click on the “Download Debug Symbols” button. It is on the right-hand side of the screen for each archive. Note: This is dependant upon the symbols having been submitted when uploading the app's archive to TestFlight. This is done by checking the "Upload your app's symbols to receive symbolication reports from Apple" option when submitting the Archive.

The debug symbols translate the hexadecimal
addresses of the thread backtraces into function names and line numbers. This makes the crash report readable by humans.

Opening the crash report takes a few steps:

Rename the file to have a .crash extension. `app_name.ips.beta -> app_name.ips.beta.crash’
Go to Window -> Devices and Simulators
Select the connected device and then click on the View Device Logs button. (The iPhone will need to be attached to the computer either by USB cable or have wireless enabled)
Drag the `app_name.ips.beta.crash’ into the list of log files
See Adding Identifiable Symbol Names to a Crash Report for more details.

I looked at the crash report and saw the app crashed when it decoded the contents of a plist file. The log messages from my app showed the same thing. The app logged it was about to decode the file and then no further messages.

Here is an excerpt of the relevant part of the crash report:

Exception Type:  EXC_BAD_ACCESS (SIGSEGV)
Exception Subtype: KERN_INVALID_ADDRESS at 0x00000000
VM Region Info: 0 is not in any region.  Bytes before following region: 3686400
      REGION TYPE              START - END     [ VSIZE] PRT/MAX SHRMOD  REGION DETAIL
      UNUSED SPACE AT START
-------->  
      __TEXT                 00384000-0039c000 [   96K] r-x/r-x SM=COW  ...Kit Extension

Termination Signal: Segmentation fault: 11
Termination Reason: Namespace SIGNAL, Code 0xb
Terminating Process: exc handler [384]
Triggered by Thread:  0


Thread 0 name:  Dispatch queue: com.apple.main-thread
Thread 0 Crashed:
0   libswiftCore.dylib              0x659e0e06 swift_checkMetadataState + 14
1   libswiftCore.dylib              0x659b66a8 type metadata completion function for ClosedRange<>.Index + 14
2   libswiftCore.dylib              0x659dc504 swift_getGenericMetadata + 1112
3   libswiftCore.dylib              0x659b5644 __swift_instantiateGenericMetadata + 28
4   libswiftFoundation.dylib        0x65b80fb0 PropertyListDecoder.decode<A>+ 651184 (_:from:format:) + 310
5   libswiftFoundation.dylib        0x65b80e72 PropertyListDecoder.decode<A>+ 650866 (_:from:) + 40
6   libswiftFoundation.dylib        0x65bf9b2c dispatch thunk of PropertyListDecoder.decode<A>+ 1145644 (_:from:) + 28
7   ...llHelper WatchKit Extension  0x0038ddb6 specialized load<A>(_:) + 40374 (Data.swift:117)

The last line, Data.swift: 117 refers to the Data.swift file in my app. It was crashing at line 117.

The code in question was the following:

let decoder = PropertyListDecoder()
return try decoder.decode(T.self, from: data) // <-- this is the line it crashed at

The struct the app was trying to decode the plist file into lives in a Swift Package. It is in a Swift Package because unit testing is not available in watchOS projects. However, unit testing is available in Swift Packages. So, my models and business logic are there.

I wasn’t sure what was causing the error. Maybe it was something with my code; was I using the Codable protocol properly? Maybe the plist file permissions were different between Xcode and TestFlight? Maybe it had something to do with the Swift Package?

I decided to move my struct from the Swift Package into the app project. I figured this way I could rule out if the Swift Package was an issue. If the app still crashed then there was something wrong with my code or file access. If the app did not crash then there was something wrong with how I was using the Swift Package.

Before I changed or moved any code I created a git branch to work on. I copied the struct to the app codebase. I then removed the swift package from the app. This, of course, caused many build errors. To get around this I deleted files en masse. This left me with just the code that was causing the error.

The code still worked in the simulator and on my device, so I uploaded it to TestFlight. This time the app worked when I installed it from TestFlight.

This meant there was something wrong with how I was using the Swift Package. I checked my code to ensure I used the proper access levels with my struct. Code in a Swift Package requires a public access level, otherwise, the calling code cannot access it. But, my code was fine.

I was at a loss at this point. I did google searches but had no luck. I created a Stack Overflow question. The process of writing down my problem helped clarify my thoughts. With these new ideas, I did more research and found this Stack Overflow answer which solved my problem. I had to set DEAD_CODE_STRIPPING = NO in the build settings of my app.

I delete the struct from the app code and imported the Swift Package again. This time when I installed the app from TestFlight it worked. At this point, I switched back to my main git branch and changed the build settings. I uploaded it to TestFlight and everything worked.

I am grateful that people post solutions online. I would never have found the DEAD_CODE_STRIPPING = NO workaround on my own.

Thank you for reading! I hope you found it helpful! If you have some time I would appreciate feedback on my app, Barbell Helper, available on TestFlight. Thank you!

Rejection, Acceptance, And Crashes. My TestFlight Journey

Monica Granbois — Sun, 03 May 2020 15:33:16 +0000

I hit a small milestone recently, I submitted my first app to TestFlight. I thought this process would be quick. Maybe a day or two. A week later I finally had a working app on TestFlight. During that time I learned much about crash logs and debugging. Here is my story.

I’ve been working on a stand-alone Apple Watch app. It is a weight plate calculator for the gym. The idea is you enter the amount you want to lift along with the barbell you are using. The app will then tell you which weight plates to use.

I started this project before the pandemic quarantines. When the quarantines started I thought about abandoning the project. Gyms are closed. Who is going to use this app? But I decided to carry on. I liked working on it. Plus, one day the gyms will reopen.

So, on the evening of April 22nd, I submitted my app to App Store Connect. Only to be immediately rejected in the upload process because my app icons had an alpha channel in them. It was bedtime, so I left it for the morning.

The next morning I fixed my icon errors. I did this by opening the icons in the “Preview” app and then exporting them with the “Alpha” option unchecked. A quick and easy fix. This time the app upload worked.

Looking through the TestFlight requirements I saw a privacy policy was needed. I looked at some online policy generators. But these tools were for apps that used user data. My app doesn’t use third-party APIs and it stores everything locally to the device. So, I wrote a very simple privacy policy and uploaded it to my blog website. It will have a more permanent home later, I just wanted to get the app up on TestFlight. I submitted my app.

The next morning, April 24th, I received an email from App Store Connect. My app was “not approved for beta testing”. The reviewers wanted to see a video of my app in action. It had to be a video of the app running on an actual Apple Watch, I could not use the simulator.

On the weekend I found some quiet time to video my app. The kids were quietly watching a cartoon, so I could record without being disturbed. It was a bit awkward videoing my wrist, but I got it done. I uploaded the video to YouTube as an unlisted video and sent the link.

I heard back from App Store Connect two days later, on Tuesday, April 28th. My app was approved for TestFlight! Hurray!

My husband and I installed it on our watches. The app immediately crashed for both of us. Cry!

I spent the next two days figuring out why my app crashed when installed from TestFlight. It worked fine when I installed it via XCode. It was a lot of learning about crash reports, looking at crash reports, and googling. I will write about what I learned in another blog post.

I posted a question to StackOverflow about my issue. This helped me gather my thoughts and clarify my issue. I had some more ideas, which lead me to this question: ios - TestFlight installed app crash with Swift Package Manager dependencies - Stack Overflow. It solved my problem! I had to set the ‘DEAD_CODE_STRIPPING = NO’ property in the building settings.

It was such a good feeling to finally see my app working! I did not expect it to take a week to get my beta test working. But I am happy I solved my issues and got it launched.

I would appreciate feedback on my app! I’ve created a public test link: Join the Barbell Helper beta - TestFlight - Apple.

Thank you for reading! Now onto the next milestone: launching my app on the App Store!