DEV Community: Kyra

Simply Customize It! My First App

Kyra — Thu, 13 Jun 2024 12:32:03 +0000

My first Apple app was just approved for the App Store! And I had to share here in case you have a reMarkable, an e-paper device, and want to use it. That said, I’m also sharing as I’m planning on creating a post sharing what I learned with the App Store in case it helps someone else. Let me know if you have any questions and maybe I can help or someone else in the discussion can.

Back when I first bought my reMarkable e-paper device I decided I needed to change out the custom templates and then I really wanted to switch out the sleep screen image. This led to me writing a couple how to posts, getting questions, and ultimately working on implementing an Apple app. It is now out on both macOS and iOS devices so you can also change out your templates and screens with a simple button press too!

If you want to check it out you can find it in the store here https://apps.apple.com/us/app/simply-customize-it/id6443862161 or learn more about it on my website here: https://www.simplykyra.com/simply-customize-it/

SwiftUI and Navigation

Kyra — Thu, 06 Jun 2024 16:36:39 +0000

I’m currently developing a multiplatform app and am having issues with both the tab control and sidebar on the iPhone and iPad devices. Ideally I want the user to be able to switch between the two if they prefer one over the other... and the switching currently works great but I've noticed minor issues with both formats.

Specifically my app can go up to four levels but in this sample I have three. The left sidebar or tabs has four choices, the middle has it's own choices, and the right has a text box showing what was clicked on. With the sidebar option I notice the right screen doesn't change when you click on the sidebar (though the center does). Also the sidebar clicks print out text (with the onChange modifier) but don't register in the view.

I was going to lock it down to just tab control for now so the app is easily useable but noticed if you click to the third level then switch tabs the back button on the phone changes (from saying back) to reflect the newly selected tab but the content shows the old view.

Using tab control on the iPad the middle sidebar (now on the left side)updates when the tab is changed but again, like with the phone, the right pane shows the old content.

Just curious if anyone knows of a good multiplatform SwiftUI tutorial that would help me get this working. In my actual app the right view sometimes has two levels with a back button.

Either way hope your day is going good!

Using Handlebars Code to Generate Ghost YAML

Kyra — Thu, 30 May 2024 14:58:00 +0000

A bit ago I realized I needed to generate redirect text for each of my current blog posts on my Casper themed Ghost website. This seemed to be an overwhelming task but after talking it through both my husband and I came up with two potential ideas. I shared both how to find the redirect section through the Ghost interface along with his earlier idea that used the data file, jq, and visual filtering in both the prior posts in this series. Now let's see how I realized we could code this using handlebars in case it also helps you. That said, if you are looking for my original full post you can check it out at Oh No, I Need to Create Redirect Text for All My Posts!.

Quick warning: As I used the previous method in this series to generate my redirect text I didn't need to fully implement this method yet I still wanted to see if it was valid so I quickly coded it up on localhost to confirm it generated what looked like the right output but I didn't work on it any further beyond that. That said if I was to redo this... this method would be what I used this time around.

The Plan

My localhost is about a year behind in content from my current website so if I wanted to use the output of this I would've needed to, temporarily, have this run on my main website. My original plan, after confirming this worked locally, was to create a hidden non-linked page, connect it to the handlebar code, push to website, confirm the resulting text looked good, copy the results to my redirect file, upload, confirm a couple redirects worked, and then undo my code and page changes.

Warning

As I haven't tested this in my redirect file and your website is probably set up differently please confirm it's right before using it yourself.

The Code

I first wrote this up after using the redirect text generated in the first method that used pattern matching. Thus my first bit of code looked like this:

{{#get "posts" limit="all"}}
    {{#foreach posts}}
         {"from":"^/({{slug}})/$","to":"/blog/$1","permanent":true},<br>
    {{/foreach}}
{{/get}}

After looking at my earlier redirect text from when I first moved my website from Wordpress to Ghost I updated the text within the get and the foreach loops to not use pattern matching and instead used the slug itself in both the from and to sections. This resulted in the following:

{{#get "posts" limit="all"}}
    {{#foreach posts}}
        {"from":"/{{slug}}/","to":"/blog/{{slug}}/","permanent":true},<br>
    {{/foreach}}
{{/get}}

With either code segment you get, hopefully, working redirect text that you can quickly copy, paste into the file, look over, and upload.

In all the journey was a bit longer to get this than shown as I started with a simple get and foreach loop showing the title only before adding the limit="all", <br>, and then fixed the output to use the slug along with the entire redirect text I wanted.

And with that hopefully it worked! Just don't forget to remove the code from your website when done. And I hope you're having a great day.

Redirect YAML From Ghost Data Using JQ

Kyra — Thu, 23 May 2024 14:57:00 +0000

A bit ago I realized I needed to generate redirect text for each of my current blog posts on my Casper themed Ghost website. This seemed to be an overwhelming task but after talking it through both my husband and I came up with two potential ideas. Here is his idea that uses the data file, jq, and visual filtering that I implemented, while tired, and shared in case it helps you.

Quick aside: To go over how to find the redirect section through the Ghost interface you can check out my earlier post in this series How to Find the Redirect Section on Your Ghost Account. After this one I'll share an alternative way to do this. If you are looking for my original full post you can check out Oh No, I Need to Create Redirect Text for All My Posts!.

Word of warning I was tired when doing this, it was all new to me, wasn't working, and I easily got frustrated. As such it's a bit of a journey but I figured I'd share my process in case something in it I may have otherwise omitted helps you out.

Get the Data

To use this method you will need to start with your website data that I got by exporting it from my website through the migration portion of my settings page. I found it by entering my domain and then typing in /ghost/#/settings/migration.

Parse the Data

Once I had my data I needed to extract each of my posts' slugs. We decided to use jq, a lightweight and flexible command-line JSON processor, to get that information but before we did that we first needed to figure out what the command itself, used to parse out that information, should be. To figure it out we opened the data and used ctrl+f to look for a slug and then worked my way back up resulting in the following structure. This is the json code from the Migration Export part of the Settings with only the information needed extracted:

{
  "db": [
    {
      "data": {
    "offers": [],
        "posts": [
          {
          "slug": “foo”,
    }
]}}]}

With the json structure found we next turned to ChatGPT and asked it to create the jq query I needed which gave me the command: jq '.db[].data.posts[].slug' data.json. I used that to test out the results and further iterated through versions while hoping I was getting closer to what I wanted.

Downhill

The resulting yaml from the command worked when uploaded to localhost but didn't work once uploaded to my main website as I had way too many redirects for the website page to load there. I next went back and forth with ChatGPT constantly trying to fix the yaml resulting in, at times, decreasing the number of redirects and a 404 error. In the process I got frustrated and switched over to json so I could use the pattern matching mentioned in Ghost's Implementing redirects and thus switched over to wanting the json output to look something more like:

{"from":"^\/(slug)\/$","to":"/blog/$1","permanent":true},

A Command

During this process I was getting frustrated but looking back, at some point, I was using this command where each section's results were piped | as input into the next section.

cat simply-kyra.ghost.date.json | jq '.db[0].data.posts[] | {"from":"^/(.+)/$","to":"/blog/(.slug)","permanent":true}' | pbcopy

Explained below is each section:

cat simply-kyra.ghost.date.json: Displays the contents of the downloaded file from Ghost.
jq '.db[0].data.posts[]: Takes the file's contents and parses out the slugs for each post.
{"from":"^/(.+)/$","to":"/blog/(.slug)","permanent":true}': Converts the list of slugs to the content string I want consisting of this text.
pbcopy: and then sends the output to my clipboard so I can paste it into my actual redirects file and upload back up to my website. Just a heads up this is only a Mac command you'll need to adjust it to something else if you're using a different computer.

Got It

I kept having trouble with mismatched brackets and the like so I decided to simplify the automated part of this process by switching out the complicated special string I wanted outputted and instead padded each slug with several dashes on the left and lots of zeros on the right. I had the idea that I could simply do a find all and replace on the results without worrying about the brackets themselves. With this change the new ChatGPT reply went something like this:

Which resulted in the following command:

cat simply-kyra.ghost.date.json | jq -r '.db[].data.posts[] | " ---(.slug)000000"' | pbcopy

This command extracts the slug field from each post and appends 000000 after it while also prefixing it with a triple dash. For example, if the input JSON contains:

{
  "db": [
    {
      "data": {
        "offers": [],
        "posts": [
          {
            "slug": "foo"
          },
          {
            "slug": "bar"
          }
        ]
      }
    }
  ]
}

This command would output:

---foo000000
---bar000000

And then I'd do two find and replace all commands so the 000000 is replaced with )\/$","to":"/blog/$1","permanent":true}, and the triple dashes are replaced with {"from":"^\/( leading to these results:

{"from":"^\/(foo)\/$","to":"/blog/$1","permanent":true},
{"from":"^\/(bar)\/$","to":"/blog/$1","permanent":true},

Warning

During the find and replace portion I happened to notice a page title and realized the posts' section in my data file didn't just include posts but also included all of my pages thus meaning I needed to further mine my file to remove all of the page-related lines that didn't need to be redirected. Luckily I didn't have too many pages but after uploading the new file I realized I missed my about page and it was now redirecting to a location that didn't exist. That said, I'm happy it was just the one page and I was able to fix it by simply renaming the page url (and then fixing the linked menu button) and now it's all good to go... that said, while writing this I realized any previous links to my about post no longer work but at least the menu offers a simple correction for this one.

How to Find the Redirect Section on Your Ghost Account

Kyra — Thu, 16 May 2024 12:23:20 +0000

A bit ago I realized I needed to generate redirect text for each of my current blog posts. Before posting about that; however, I wanted to go over redirects briefly... that said, if you are looking for the full solution now you can find the original post on my website at Oh No, I Need to Create Redirect Text for All My Posts!. Both there and below will be talk about the redirect file through the Ghost interface.

A redirect is when you want to send someone to a different URL than the one they just typed in. For me I wanted to do this back when I first migrated from Wordpress to Ghost and again when I changed all of my posts' urls to better organize my site. This meant that all of my currently set links no longer worked as they now pointed to the old location with a 404 Page not found error and I needed to redirect them to the new location.

To do this redirect, through Ghost, you need to find the redirect file by going to your domain and then typing in /ghost/#/settings/labs immediately afterwards. In my current website, running version 5.82.3+moya this looks like:

While my localhost instance, which is still running version 5.39.0, it instead is a two step process that starts with the labs, in the lower right corner:

And then shows the sub-options here:

The redirect file itself is essentially just an array [] where each object is a single redirect consisting of the from, to, and whether it's permanent or not. So, in my case, if my old blog posts' urls were domain/2017/10/16/halloween-costume-chuggington-onesie/ and domain/2017/11/25/make-your-own-playdough/ the their new ones would now be domain/halloween-costume-chuggington-onesie/ and domain/make-your-own-playdough/ In this example the array would look something like this:

[{"from":"/2017/10/16/halloween-costume-chuggington-onesie/","to":"/halloween-costume-chuggington-onesie/","permanent":true},
{another redirect objects},
...
{another redirect},
{"from":"/2017/11/25/make-your-own-playdough/","to":"/make-your-own-playdough/","permanent":true}]

Once you download and edit the file you can upload it back to your website through the same page. If there's an error it will tell you immediately and, worse case, you can use an online json editor to help find your issue. Once it's uploaded properly you can then type in the old link and you'll be redirected to the new one rather than get the old pesky 404 Page not found error again.

Word of warning: Just be sure this file was entered correctly. You don't want to redirect a working page url to a non-working one. I did that with my about page by mistake and ended up just editing its url for a quick solution rather than figuring how to undo the redirect.

And with that I'll leave you with some links in case your want more information about Ghost's documentation on redirects or their tutorial about Implementing redirects. Hope you're having a great day!

Quickly Create App Icons by Resizing Your Main Image With a Bash Script

Kyra — Thu, 09 May 2024 12:53:00 +0000

I just wanted to start out by saying that this is an abridged version of my original published version from June 4, 2023 that you can find on my website here.

When I first get excited about a new app idea I like to create a new project and I enjoy creating a new app icon so I'm excited seeing it on my phone and developing the idea. That said, I hate going through and resizing the image multiple times to generate all the differently sized images that Apple requires. This is made even worse if there's a minor design detail that needs to be corrected or even if I want to justify updating the icon as I have to go through the entire process all over again.

Thus I needed to come up with a way to make, at least, the image resizing quicker and this script solves it! I've saved my script in its entirety to a Github Gist which you can find here.

This script works by taking in your image file, confirming it's a square, and then resizing it to seven unique dimensions each with its filename showing its particular size as it's appended to the beginning of its name. As each dimension is dictated by it's own line (so for example the 1024 by 1024 size is created with: magick "$1" -resize 1024x1024 "1024 - $1") you can easily update the script to include new ones or remove obsolete ones. Currently the script outputs the resized image at the following seven dimensions: 1024x1024, 512x512, 256x256, 128x128, 64x64, 32x32, and 16x16.

When making my app icon I try to make an app icon at least as large as the largest size I'd need so in my case the minimum would be 1024 by 1024. Once the icon is made I call my script and pass in the app icon image's filename createAppIcons.sh myImg.jpeg and, once executed, all the newly resized images are in the directory with my original one.

With the images made I move the finder window over to Xcode and drag each individual image over to its corresponding spot in the assets app icon window.

And with that the app icon is ready to go... and the script is ready to speed up the process the next time I need to switch it out.

Hope this helps you out and you're having a great day!

That said, if you want more details about this script or even have it broken down and explained better than the Github Gist above then you can check out my original and longer version of this post from June 4, 2023 where explain it all in more detail including it's background, requirements, and all the in depth information you'd need!

Question About Large Language Models and SwiftUI

Kyra — Thu, 02 May 2024 03:37:16 +0000

I’m at the vague research and idea stage of an idea and figured I’d create a discussion question in case it helps anyone else.

Specifically I’m wondering if anyone has looked into integrating a large language model (llm) into their Swift iOS app before? Is there a best way? Are there any awesome tutorials to do this?

I’ve heard of Hugging Face and Meta’s Llama 3 {github repo}. I’ve also heard that Apple recently dropped corenet and openElm but I’m assuming there’s not a lot of information about it until WWDC in June… hopefully. That said I haven’t researched large language models before so before I delve into it too far I wanted to check if there's a proper path and/or any tips and tricks that would be good to know.

Thanks everyone!

SwiftData: Solving Filtering by an Entity in the Predicate

Kyra — Fri, 26 Apr 2024 04:33:54 +0000

I just wanted to start out by saying that this is an abridged version of my original published version from December 15, 2023 that you can find on my website here.

When moving my apps over from CoreData to SwiftData I came across a problem where I wasn't able to filter my query by another entity within its predicate. Whenever I did and tried to build the project it kept compiling and compiling and would eventually fail so the time wasted waiting while trying to solve the issue was another aggravation on top of it all.

To demonstrate the problem I took the iTour example project from Hacking with Swift and altered it a bit to showcase my problem and, eventually, the solution.

In his app there are two main data models. You have destinations you can visit and each one has a list of sights you can see at that destination. So for example if you were to visit Alberta (the destination) you could visit many sights while there like: Banff, Lake Louise, Royal Tyrrell Museum, and West Edmonton Mall. While a Destination can include multiple Sights each Sight can only belong to one Destination. His example didn't show my issue but I altered it to include a list of Sights that needed to be filtered by the id of a Destination thus recreating my problem.

The problem, once solved, was very simple. I was filtering the Sight data thus I could only filter by the data model Sight and no other ones. My problem came when I introduced the Destination. To get around this I took the persistentModelID from the Destination before entering into the Predicate to filter by. That worked!

The working code, in case you want to use it towards your solution, is:

init(sort: [SortDescriptor<Sight>], searchString: String, destination: Destination?) {
  // Make a point of grabbing 
  if let thisID = destination?.persistentModelID {
    _sights = Query(filter: #Predicate<Sight> {
      if searchString.isEmpty {
        return $0.destination?.persistentModelID == thisID
      } else {
        return $0.destination?.persistentModelID == thisID && $0.name.localizedStandardContains(searchString)
      }
    }, sort: sort)
  } else {
    // if id is nil than I don't want ANYTHING that said you could instead return $0.name.localizedStandardContains(searchString)
    _sights = Query(filter: #Predicate<Sight> { currSight in
      return false
    }, sort: sort)
  }
}

And with that the issue was solved! If you want more information about the problem, the example, the building issues, or the solution itself you can check out my SimplyKyra website where I published the longer and original version of this post back in December of 2023.

Hope you have a great day!

How to Run a Bash Script From Anywhere on Your Apple Computer

Kyra — Fri, 19 Apr 2024 12:44:59 +0000

I just wanted to start out by saying that this is an abridged version of my original published version from February 19, 2023 that you can find on my website here.

When you run a command in your terminal the computer looks through a list of directories where the file might reside and, if found, executes it. This special list of directories is stored in the PATH environment variable on your computer. If your shell goes through all of these paths, in order, and can’t find the file it then lets you know that it can’t be found before exiting. If there are two matching files it will run whichever one it comes across first.

To be able to run a script from anywhere on your computer the file holding the script needs to be in one of those directories stored in the PATH environment variable on your computer. So simply move your script to one of those directories!

But how do I know where that is?

To find out which directories are included in the PATH environment variable simply go to a terminal and type out echo $PATH. On my computer this looks like:

❯ echo $PATH
/Users/kyra/bin /usr/local/bin 
/System/Cryptexes/App/usr/bin /usr/bin /bin 
/usr/sbin /sbin /Library/Apple/usr/bin

And from that I've chosen to put all of my scripts that I want to run from anywhere on my computer within the /Users/kyra/bin directory. Then I can call it from anywhere!

In my original post, that this is based on, I go into more information on the hows and whys this works including what to do if you want your script to live outside of the PATH environment variable or if you want to add a new directory to it's list. You can check this all out here.

I hope you're having a great day!

Update to "My Custom Picker With Multi-Selection in SwiftUI" - Now With Images!

Kyra — Fri, 12 Apr 2024 16:19:09 +0000

I just wanted to start out by saying that this is an abridged version of my originally published post from August 31, 2022 that you can find on my website here.

It is also a continuation (part two) of my original post which is also an abridged from my originally published version from February 23, 2022 here.

After I posted my custom multipicker code someone reached out to me about having the selected items include images. I absolutely loved that idea and got to work switching the String array containing the items to a Struct array that could hold any possible thing you may want selectable. In this updated example I still store a String in the Struct, in this case holding the SF symbol name, but I could see this also including other types like Data or Image too.

If you’re interested in using this updated custom control in your code I saved it, in its entirety, to my public SimplyKyraBlog GitHub repository and, if you want a direct link, the file CustomMultiSelectionExampleWithImages.swift can be found here. The code is also shared as a Github Gist at the bottom of my post from August 31, 2022 that also includes the backstory, specific updates to the original code, and the fix to the previous issue I mentioned.

Hope this helps your code and you're having a great day!

How I Easily Used My Custom Color in My SwiftUI Project

Kyra — Fri, 12 Apr 2024 01:37:24 +0000

I just wanted to start out by saying that this is an abridged version of my original published version from February 9, 2022 that you can find on my website here.

A while back I decided to procrastinate a coding conundrum by finally figuring out how to bring one of my favorite colors to my SwiftUI project using the SwiftUI.Color struct. It was so simple to do!

I started out by seeing what information I'd need about the color by typing in Color( and looking through the auto-complete recommendations within the resulting popup. From here I knew I needed the decimal number version of each RGB value.

With that known I next went to the Color Hex website and looked up my color. I then scrolled down to find the percentage used of red, green, and blue to create this color.

In the above example the color #60364f is shown in the bottom left grid to be made of 41.92% red, 23.58% green, and 34.50% blue. Once you convert the percentages into decimal and insert them into the above Color struct it becomes Color(red: 0.4192, green: 0.2358, blue: 0.3450). In the following example I used both the purple color and another custom color, following the same steps, in the background modifier for two different controls.

I later turned my custom color into a shared variable that lives in one spot in my code. This way if I ever rebrand I can easily change one line and I'm good to go in every spot it's used.

I hope this post helps you out and if you want more information about it the full version from February 9, 2022 can be found here. Hope you're having a great day!

Have a great day!

SwiftData: Solving Fatal Errors and EXC_BAD_ACCESS While Handling Entities on Different Threads

Kyra — Thu, 11 Apr 2024 12:26:28 +0000

I just wanted to start out by saying that this is an abridged version of my original published version from December 22, 2023 that you can find on my website here.

Part of the back end code of one of my apps is composed of asynchronous functions that I call and then await their returned results. When moving my apps over from CoreData to SwiftData the data context that used to be passed into each function was dropped and I noticed it didn't act consistently anymore. The main problems were:

EXC_BAD_ACCESS

The first error I had was a generalized EXC_BAD_ACCESS (code=1, address=...) that showed up mainly in my entry App @main struct but also popped up at various entity relationships spots all under various thread count numbers.

Fatal Error: Duplicate Keys

At some point in all of this when I couldn't figure out how to fix the issue I decided to at least help mitigate it by manually saving the data context after each related entity was done being created. I figured this way if the program crashed at least the data that had been created before that point would be saved and the user wouldn't have to start back at the beginning each time. This didn't help as once I added saving, at any of the points, I got fatal errors on my entities complaining about duplicate keys.

Fatal error: Duplicate keys of type 'EntityName' were found in a Dictionary.
This usually means either that the type violates Hashable's requirements, or that members of such a dictionary were mutated after insertion.

The Solution

To solve this I realized I needed to stop passing in the main data entity and instead pass in it's PersistentIdentifier along with it's ModelContext so it can be recreated in the asynchronous and/or problematic functions. This worked!

So, for example, if I used pass in the entity directly to a function like:

private func doSomething(entity: EntityName, ...) async {
   // ... doing whatever happened to the entity
}

I'd now call the new method with doSomething(in: entity.modelContext!.container, entityID: entity.persistentModelID, ...) instead and the function itself would look like:

private func doSomething(in container: ModelContainer, entityID: PersistentIdentifier, ...) async {
   // First recreate the main entity in it's own ModelContext
   let modelContext = ModelContext(container)
   modelContext.autosaveEnabled = false
   let entity = modelContext.model(for: entityID) as? EntityName
   if entity == nil {
      // Can't continue without entity
      // TODO: Handle any error handling and...
      return
   }

   // ... doing whatever happened to the entity

   do {
      try modelContext.save()
   } catch {
      // It can't be saved
      // TODO: Handle any error handling and...
      return
   }
   // Success!
}

With the different data context used in my problematic asynchronous methods both my fatal and bad access errors are gone!

If you want more information about how I solved this along with a quick stop in concurrency check out my original version published in December 22, 2023 on my main website.

Have a great day!