Series: macOS Mastodon Client

macOS Mastodon Client

In this series I'm joined by none other than Gui Rambo to build a Mastodon client for macOS from scratch with SwiftUI.

Length: about 11 hours


1. Starting a Mastodon Client for macOS from Scratch

Subscribers only

Gui Rambo joins us to build a Mastodon Client for macOS using SwiftUI. In this episode we'll show the app we'll be building and then start from a blank slate where we will cover some topics about how a SwiftUI macOS app is set up, how we can define some build settings using xcconfig files, and how to deal with building for different Apple Developer teams.

2. Instance selection UI and transitions

Subscribers only

The first step to use Mastodon is to select your instance. You can browse a public timeline of that instance or you can log into that instance to see your own timeline. In this episode we will create a simple instance selection UI. We'll then use animated transitions to switch to the timeline view. Gui teaches us a new tip about debugging animations.

3. OAuth App Creation and Keychain

Subscribers only

In this episode we lay the foundation for the OAuth flow with Mastodon servers. We'll utilize KeychainAccess as a wrapper for the Keychain API, so that we can store secrets in a secure way.

4. Adding OAuth Log in with ASWebAuthentication

Subscribers only

In this episode we complete our log in functionality using the AuthenticationServices and the keychain. We'll also see how we will represented an authenticated session using a new type, so that other parts of our code will have everything it needs to make authenticated calls to the API.

5. Showing the Timeline

Subscribers only

In this episode we take our authenticated session and use it to fetch the user's timeline on the selected server.

6. Mastodon Post UI and HTML Parsing


In this episode we tackle showing a list of posts, which requires us to convert the network models into models more fit for the UI, parsing HTML in order to display as an AttributedString, and displaying the author information.

7. ViewThatFits and Remote Images

Subscribers only

In this episode we continue with our post UI, making it adapt the layout to the available size using the ViewThatFits view in SwiftUI. Then we turn our attention to the avatars, which need to be fetched and displayed. We start with AsyncImage, but after a discussion we conclude that we will need more control over how the images are fetched and cached, so we implement our own RemoteImageView.

8. Creating Rich Link Previews

Subscribers only

Posts with links in them can be expanded to show richer information, including an image for many sites that support it. In this episode we'll utilize the LinkPresentation framework to add this to our app. We'll also build out a cache using NSCache to ensure that we respond quickly when rendering the same post while scrolling.

9. Integrating Link Previews into the Timeline

Subscribers only

Now that we have a view for rendering link previews, now we integrate it into the timeline. We'll start by updating our model to capture links, then move on to adjusting the layout within the post view.

10. Auto Login and Sidebar with Translucency

Subscribers only

We add the ability for the app to remember that a user was logged in, auto log them in w/ the saved credentials. We also add a sidebar to display the user's avatar, including a translucency effect that was not obvious at first glance how to implement. Finally we add auto-paging to the app so that the app will continuously fetch the next page when you reach the bottom.

11. Laying Out Images

Subscribers only

In this episode we show the post's images, using a custom layout algorithm to position multiple images in the space available for a post. Also, new icon!

12. Opening Windows | macOS Coordinate System

Subscribers only

In this episode we dive a little deeper into how Windows can be opened using SwiftUI, then see how we can drop down to AppKit to customize it further. We'll learn about style masks and the different behaviors we have for positioning the window. Finally we use this knowledge to open a window with a selected image from a post.

13. Understanding and Fixing Hit Testing Issues

Subscribers only

In this episode we explore a little hit testing problem we have with our custom layout solution. We implement some techniques to help visualize and explain the problem and then ultimately fix it.

14. Aligning and Zooming Images

Subscribers only

When tapping on an image, we want to open a new window with that image, but have it expand from the position in the gallery on the post. To do so, we have to do some window manipulation using NSPanel and some frame calculations.

15. Image Zoom Gesture & Keyboard Shortcuts

Subscribers only

In this episode we handle zooming into images using a gesture on the trackpad or with ⌘+/- on the keyboard.

16. Image Gallery Navigation

Subscribers only

In this episode we page between images in a post using some custom navigation buttons. When doing this we encounter an issue with implementing keyboard shortcuts for these buttons where a SwiftUI helper just doesn't work. For the fix we'll have to wait for the next episode.

17. Implementing a Command Design with Combine

Subscribers only

Last time we left off where keyboard shortcuts weren't quite working the way we wanted. In this episode we take the time to explore the various options we tried and why they don't work. We address this by implementing a key handling system in AppKit and publishing these as commands to SwiftUI using a Combine subject. This wraps up our series on Building a Mastodon client for macOS!