Digital Bunker

Auto Reloader: Page Refresh App - App Store

It works across:

macOS
iOS
iPadOS

Same extension. Same behavior. Just installed once per device.

How to Auto-Reload a Page in Safari

Install the app from the App Store.
Open Safari.
Go to Settings → Extensions and enable Auto Reloader.
Click the extension in the toolbar.
Set a refresh interval.

That’s it.

The current tab will reload automatically at your chosen interval.

Auto Reloader running — hands-free Safari refresh.

Who Actually Needs Safari Auto Refresh?

This isn’t a novelty feature. It’s for moments where you’re stuck manually refreshing the same page over and over.

Traders Watching Live Dashboards

Some market pages don’t push updates in real time.
Order books lag. Portfolio pages cache. Charts stall.

So what do you do? You sit there hitting refresh.

Auto Reload keeps the page current without you babysitting it.

Developers Testing Local Changes

If you’re working on:

localhost
staging builds
CSS/layout tweaks
dashboards that poll instead of push

Sneaker and Ticket Drop Monitoring

Limited drops usually come down to timing.

If a product page does not automatically update inventory or release status, refreshing every few seconds can matter.

Automating that refresh removes one more manual step.

Sports Score Refresh During Games

Some sports sites do not live update without interaction. If you're watching a score page during a game, automatic refresh keeps it current without touching the screen.

Why Use Safari Instead of Switching Browsers?

You could install a Chrome extension, but if you prefer Safari for:

Native performance
Lower battery usage
iCloud tab sync
Apple ecosystem integration

It makes more sense to add auto refresh directly to Safari rather than switching browsers just for one feature.

Common Questions

Can I set different refresh intervals?

Yes. You can choose a custom interval for the current tab. For example, you might refresh every 5 seconds for a live dashboard and every 60 seconds for something less time-sensitive.

Does it work per tab?

Yes. The refresh setting applies to the specific tab where you enable it. Other tabs remain unaffected unless you turn it on there as well.

Does it stop when I close the tab?

Yes. Once the tab is closed, refresh stops automatically.

Is my data tracked?

No. The extension does not require accounts, logins, or analytics. It runs locally within Safari.

Does it work on any website?

It works on standard web pages loaded inside Safari. Most dashboards, storefronts, news pages, sports pages, and development environments work as expected.

Will this drain battery?

Because it runs as a lightweight Safari extension and only reloads at the interval you choose, usage depends on how aggressive your refresh timing is. Longer intervals naturally use less battery and network activity.

If you find yourself refreshing the same page more than a few times in a row, that’s usually a sign.

Safari won’t automate it for you.
Auto Reloader will.

Set the interval once. Let it run. Move on.

👉 Download Auto Reloader on the App Store

Download Auto Reloader: Page Refresh by Aryaman Sharda on the App Store. See screenshots, ratings and reviews, user tips, and more apps like Auto Reloader: Page…

SimTag: Context for your iOS Simulators

SimTag: Context for your iOS Simulators

Aryaman Sharda — Wed, 11 Feb 2026 05:08:40 GMT

See which branch your simulator is actually running.

Even before AI coding, I’d often have multiple copies of the same project open—using git worktrees or separate clones—to work on different branches in parallel.

Now, with multiple Claude Code sessions running at once, each doing work on a different branch, that setup is even more common.

The result is multiple simulators running at the same time, all looking identical, with no clear way to tell which branch any of them is actually running. SimTag fixes that.

What SimTag Does

SimTag adds a small, unobtrusive overlay to each iOS Simulator window showing the branch that build came from.

That’s it.

When you glance at a simulator, you immediately know what you’re looking at. No more wondering:

Did I rebuild after switching branches?
Which Simulator has the auth changes?
Am I debugging my own work or a coworker’s branch?

If you do any kind of parallel development—worktrees, PR reviews, or AI-assisted coding—this removes a constant source of confusion.

SimTag is especially useful for power users running parallel workflows. If you use git worktrees, multiple clones, or have several AI coding sessions (e.g. Claude, Codex) building to different simulators, you’ll always know which Simulator is running which branch.

But even if your workflow is simpler, SimTag still helps. A quick glance confirms the Simulator matches the branch you think you’re on. The "Pending Build" indicator catches “forgot to rebuild” moments by warning you when commits exist since the last build. During PR reviews, it acts as a sanity check—you’ll know for sure you’re testing your colleague’s code, not your own.

The overlay is unobtrusive and easy to ignore—until you need it.

Features

Branch overlay
See the git branch for every simulator window at a glance.

Pending build indicator
SimTag detects when you’ve made commits since the last build. A small warning dot tells you the running app might be stale—no more debugging code that isn’t even in the build.

Custom labels
Add your own text to the overlay. Useful for marking simulators as “PR Review”, “Testing”, or whatever helps you stay oriented.

Details

macOS 13+
Requires Screen Recording permission (used only to track window positions—not to record anything; setup is guided on first launch)
Runs in the menu bar
Optional launch at login
Overlay position is configurable (any corner, top/bottom center)

I use SimTag every day now. It’s one of those tools you don’t think about—until it’s missing.

SimTag — Know What Your Simulator Is RunningSee which git branch your iOS Simulator is actually running.Even before AI coding, it was common to have multiple copies of the same project open—using git worktrees or separate clones—to work on different branches in parallel.Now, with multiple Claude Code (or other AI) sessions running at once, each working on a different branch, it’s even easier to lose track of what’s running where.The result: multiple simulators, all looking identical, with no clear indication of which branch they’re running.SimTag fixes that.What SimTag DoesSimTag adds a small overlay to each iOS Simulator window indicating which git branch produced the running build.That’s it.Easily keep track of which branch the iOS Simulator is runningAt a glance, you know exactly what you’re looking at—no more guessing, no more double-checking, no more debugging the wrong build.Why It’s UsefulWhen you glance at a simulator, you immediately know: Did I rebuild after switching branches? Which simulator has the auth changes? Am I debugging my own work or a coworker’s branch? If you do any kind of parallel development—worktrees, PR reviews, or AI-assisted coding—this removes a constant source of confusion.SimTag is especially useful if you: Use git worktrees or multiple clones Run several terminal sessions building to different simulators Review PRs while keeping your own work running But even with a simpler workflow, SimTag still helps: Quick confirmation that the simulator matches the branch you think you’re on Pending Build indicator warns you when commits exist since the last build PR review sanity check so you know you’re testing the right code The overlay is unobtrusive and easy to ignore—until you need it.FeaturesBranch overlaySee the git branch for every simulator window at a glance.Pending build indicatorA small warning dot appears when commits exist since the last build—no more debugging code that isn’t even running.Custom labelsAdd your own text like “PR Review”, “Testing”, or “Spike” to keep simulators clearly identified.Details macOS 13+ Runs in the menu bar Optional launch at login Overlay position is configurable (any corner, top/bottom center) Requires Screen Recording permission(Used only to track window positions—not to record anything. Setup is guided on first launch.) FAQMultiple Xcode projects open?SimTag figures out which project produced each simulator build.React Native / Flutter?Works fine—SimTag detects the git branch of the Xcode project that built the app.Git worktrees?Fully supported. Each worktree shows its own branch correctly.I use SimTag every day now. It’s a small tool, but it removes a surprisingly persistent source of friction.Questions or feedback? Message me at [email protected].

Getting Started

Download SimTag
Move the application to the Applications folder.
Launch and allow Screen & System Audio Recording permissions (System Settings → Privacy & Security → Screen & System Audio Recording).
Grant file access permissions when prompted.

That's it!

FAQ

Multiple Xcode projects open?
SimTag figures out which project produced each specific simulator build.

React Native / Flutter?
Works fine. SimTag detects the git branch of whatever Xcode project built the app.

Git worktrees?
Fully supported. Each worktree shows its own branch correctly.

Questions or feedback?
[email protected]

Backtick: Code Formatter

Aryaman Sharda — Mon, 09 Feb 2026 17:35:03 GMT

In Beta

If you write about code in chat, you’ve probably experienced this:

You’re explaining something in Slack or Notion, focused on the idea you’re trying to get across — and only after you send it do you notice nothing’s formatted. Or you remember halfway through and start going back to wrap things in backticks.

Or you forget entirely and just hope the other person figures it out.

It’s not hard, and it makes your message more readable, but it pulls you out of the flow every time.

After doing this for years, I finally got annoyed enough to fix it. So, I built - Backtick - a lightweight macOS menu bar app that automatically wraps code-like text in Markdown backticks.

Select the text you want to format — or leave nothing selected to format the whole message — press the keyboard shortcut, and Backtick automatically identifies and formats:

functionNames
variableNames
--cli-flags
/file/paths
SCREAMING_CONSTANTS
environment variables, versions, commands, and much more

With just one (customizable) keyboard shortcut (⌥⌘B by default), all of the code terms in your text are automatically identified and formatted:

GitHub

Slack

Backtick works at the system level via the macOS Accessibility APIs, so you can use it in all of the apps you normally use:

Slack, Discord, Teams
Notion, Bear, Obsidian
Notes, TextEdit
Websites like GitHub, Linear, etc

Most common code patterns are handled automatically, without any setup. But, if there are a few terms you want formatted differently, you can fine-tune it with simple allow and never-format lists (within the "Custom Words" section).

Menu Bar App

Getting Started

Download Backtick
Move the application to the Applications folder.
Launch and grant Accessibility permissions (System Settings → Privacy & Security → Accessibility).
Write normally
Press ⌥⌘B
Stop thinking about backticks

Click here to download:

Backtick: Automatic Markdown Backticks

macOS utility • One-time purchase • BetaIf you write about code in chat, you’ve probably noticed how backtick formatting always shows up as an afterthought — something you fix after you send the message, or sometimes forget entirely. It’s not hard, but it pulls you out of the flow every time.Backtick is a lightweight macOS menu bar app that ends that little annoyance. It automatically wraps code-like text in Markdown backticks with a single shortcut, so your messages look the way you meant them to without the extra thinking.🛠 What Backtick DoesSelect the text you want to format (or select nothing to format everything), press the shortcut (⌥⌘B by default), and Backtick automatically identifies and formats things like: functionNames variableNames --cli-flags /file/paths SCREAMING_CONSTANTS environment variables, versions, commands, and more Because it works at the system level using macOS accessibility APIs, it functions in all the places you normally write: Slack, Discord, Notion, browser fields, Notes, TextEdit, and more.📈 Works Well Right AwayBacktick handles the common patterns you use every day without any setup. Most code-like text gets formatted automatically and correctly the first time you use it.If you want to tune it to your habits, Backtick includes simple customization: Always-format list — terms you always want wrapped Never-format list — terms you never want wrapped Toggle built-in tools on or off But customization is optional. For most people, Backtick just works from day one.🚀 Getting Started Download Backtick.app and move it to the Applications folder Grant Accessibility permissions in System Settings → Privacy & Security → Accessibility Write normally Press ⌥⌘B Stop thinking about backticks ❓ FAQInternet required?No — everything runs locally.Already formatted text?Backtick skips text that’s already wrapped.Multi-line code blocks?Detected and wrapped in triple backticks, with language hints where possible.Is it perfect?No. It’s a time-saver, not a mind reader — but it gets most things right out of the box.System requirements?macOS 14.0 (Sonoma) or newer.💰 Price$10 — one-time purchaseNo subscriptions. Future improvements included.Perfect for anyone who talks about code — in chat, docs, issues, PR comments, or notes.Feedback or questions? Message me at [email protected]

FAQ

Internet required?
No. Everything runs locally.

Already formatted text?
Skipped automatically.

Multi-line code?
Detected and wrapped in triple backticks with language hints.

Is it perfect?
Not quite. It’s a time-saver, not a mind reader — it gets most things right out of the box. It's currently still in Beta.

System requirements?
macOS 14.0 (Sonoma) or newer.

Feedback? Email me at [email protected]

The Fast Engineer Trap

Aryaman Sharda — Fri, 17 Oct 2025 22:22:58 GMT

At one of my first jobs out of college, I worked at a tiny development agency - just me, one other iOS engineer, and the founder.

The founder was a retired iOS engineer who'd published a few programming books and built several successful apps - and, being fresh out of college, I wanted to impress him. He was one of my first real bosses, and I figured if anyone could determine whether or not I was cut out for this industry, it’d be someone like him.

Most of his day was spent on client calls, but whenever he wasn't on one, he’d stand behind us watching us code - literally. Occasionally, he’d chime in with some unsolicited live code review that derailed my train of thought entirely.

He’d pick one of us at random to start his surveillance shift, following along from wherever we happened to be in the task. Once we wrapped up whatever we were working on - quick fix or complex new feature - he’d drift over to the other guy. It didn’t matter how big or small the task was; the mission was clear: get his eyes off our back as fast as possible. The other engineer and I never talked about it, but we both instinctively started optimizing for one goal — to escape surveillance.

The experience wasn’t just unpleasant - it warped my sense of what the job, and even the industry, was like. It felt like being stuck in a never-ending coding interview - except instead of whiteboard questions, I was shipping production code with someone second-guessing every decision I made.

That kind of pressure shaped how I approached work. I stopped thinking of code as something to design thoughtfully and started seeing it as something to finish before his next client call ended.

And the incentives? Completely broken:

If you moved quickly, you bought yourself a little bit of peace and silence - at least until the next ticket was assigned.
The backlog was endless, and delivery velocity was the only thing being tracked.
Output mattered. Outcome didn’t.
You were constantly trying to distance yourself from being the “bottleneck” or, worse, “layoff material.”
Working alongside others felt competitive - everyone chasing visibility, promotions, or just survival.
Speed gave you cover; it made you look like someone who had it all under control.

So, you adapt. You start cutting corners without realizing it:

You make PRs that are functional, but fragile.
You avoid “scary” parts of the codebase because getting stuck feels riskier than delivering a subpar fix.
You skip tests because “I’ll come back and add them later.”
You default to the same solutions because learning new ones might slow you down.
You skip documentation and deeper reads because those don’t “burn down” the board.
You move from task to task with the goal of closing, not understanding.
You get in the habit of copy-pasting from StackOverflow / ChatGPT without pausing to understand what the code is really doing.

And before long, you’re the “fast engineer.” Congrats. A rockstar developer. The one who always gets things done - even if it’s duct tape and dreams holding it together. That's how the bad habits form - not because you’re trying to be reckless, but because the environment makes slowness feel dangerous.

And look, speed can feel great. Early in your career, it gets you noticed and praised. You get labeled as a “10x engineer.” You become the person people turn to when something needs to get done quickly. But the label is a trap.

That mindset followed me to Porsche’s research and development wing - my dream job at the time. But, the focus there was specifically rapid prototyping - building fast was part of the mandate. And without proper checks, I leaned even harder into my speed-over-stability tendencies. One day, a friendly, sassy product manager I worked with started calling me “Bugs Bunny” - because what I built was fast, but often… buggy. Not entirely unfair. It was a joke, of course - we got along well - but it left an impression.

Now, I’m in a new job again. New team, new codebase, new first impressions to make. I’m working alongside some of the sharpest engineers I’ve ever met, and the temptation is real - to make every PR flawless, to move quickly, to prove I belong. But I’ve been reminding myself - sometimes daily - that it’s okay to take a beat.

You can write a great PR tomorrow after learning the system today. You can ask that “dumb” question instead of pretending you already know how it all works. You can flag uncertainty instead of quietly hoping it won’t blow up later. You can hold off on shipping until you’ve triple-checked the edge cases.

Because in the long run, no one’s going to remember whether you shipped that one PR in 20 minutes or two hours. Everyone’s juggling their own deadlines and anxieties. They’re not watching your GitHub Pulse as closely as you think.

This isn’t advice and it's not meant for anyone in particular. It's a note to myself to be a little more honest about the habits I’ve picked up, and the ones I want to leave behind. If it happens to mirror your experience, great - you're not alone.

Here’s what I wish I had internalized sooner:

Being fast makes you feel valuable. Being thorough makes you trusted. Trust takes longer to build, but it lasts a hell of a lot longer than “Wow, that was quick!”
You only get so many chances at learning something deeply. Don’t waste them rushing. Understanding the system once saves you from firefighting it ten times.
The engineer who’s always “busy” is often just the one stuck cleaning up their own shortcuts. There's no badge for that kind of hustle.
The “slow” path compounds. Reading documentation, writing tests, digging through related files - all of that adds up to better judgment, stronger instincts, and more meaningful contributions. That growth pays off in ways no burndown chart can ever measure.

So, yeah - read the docs. Understand the why. And maybe don’t rely on AI to solve everything for you.

More than anything, give yourself permission to slow down. Not forever. Not for everything - just for the stuff that matters.

Because if you don’t - if you chase speed at all costs - you pay for it eventually. In tech debt. In brittle codebases. In late-night outages. In burnout. In never actually getting better - just faster at doing the same shallow things. Take your time. Ask the "dumb" question. Write that extra test.

And don’t worry - Bugs Bunny already took the hits for you.

I Built a Bay Area Transit App to Solve My Own Commute

Aryaman Sharda — Sat, 19 Apr 2025 18:47:17 GMT

Like a lot of folks in the Bay Area, I rely on public transit—BART, Caltrain, Muni, AC Transit—to get around. But keeping track of routes and schedules across all these providers was more frustrating than it needed to be.

So, I built Commuter: Bay Area —a clean, reliable app that brings schedules from every major Bay Area transit provider into one place; real-time transit info, right when you need it.

‎Commuter Bay Area | Transit

‎Your fastest way to stay connected to Bay Area transit. Whether you’re riding BART, Muni, Caltrain, VTA, or hopping on a ferry, Commuter Bay Area helps you catch your next ride — effortlessly. Quickly find nearby stops, track real-time departures, and save your favorite routes across agencies. No…

‎Commuter Bay Area | Transit

Stay ahead of your ride

The Problem

I was using 3–4 different apps just to plan my daily commute. One had decent schedules, another showed delays, and none of them covered every agency I needed. Even the ones that looked okay were bloated with features I didn’t care about.

I just wanted one app that could quickly tell me when the next train or bus was coming at the stops I care about—without making me dig through menus or switch apps.

What Commuter Does

Commuter gives you real-time transit info for every major Bay Area provider:

BART
Caltrain
SF Muni
AC Transit
VTA
Golden Gate Transit
And 40+ more…

You can check departures, view live ETAs, and quickly add routes from any agency to your dashboard. It’s built for people who want fast, reliable transit info without extra steps.

Built with SwiftUI and Vapor

The app is built entirely in SwiftUI, with a Vapor backend that fetches and processes real-time data from 511.org.

Sharing models across the iOS app and backend made it easy to iterate quickly and keep everything in sync.

All the routing, filtering, and presentation logic is handled locally in SwiftUI, while Vapor handles syncing schedules, delays, and agency metadata.

Why It’s Useful

Whether you’re heading to work, catching a train into the city, or checking weekend schedules, Commuter Bay Area makes it easy to see what’s coming up next. You can check real-time departures for the stops you care about and get going—without bouncing between websites or dealing with clunky interfaces.

If you’re in the Bay Area and use public transportation regularly, give it a try. And if it saves you time, a quick share or review goes a long way.

Built to solve my own problem—but maybe it solves yours too.

What’s Coming Next

This is just the start. There’s a lot more we want to build into Commuter Bay Area to make it even more useful:

Notifications – Get alerted when your train or bus is arriving soon
Route delays – See disruptions and service changes in real-time
Reminders – Set custom alerts for your regular commutes
Widgets – Glanceable info right from your Home Screen or Lock Screen

If there’s something you’d love to see in the app, let me know—I’m always looking for feedback.

Time-Based View Updates in SwiftUI

Aryaman Sharda — Fri, 22 Nov 2024 17:00:04 GMT

SwiftUI's TimelineView is a powerful feature for building views that update according to whatever schedule you provide.

Whether you're creating a real-time clock, a countdown timer, or periodic data visualizations, TimelineView simplifies the process by letting you schedule updates with fine-grained control.

What is TimelineView?

A TimelineView is simply a container view in SwiftUI that redraws its contents at scheduled points in time. It's especially useful for time-sensitive or periodic tasks where precision is important, such as:

Clocks or calendars.
Periodic updates (e.g., refreshing live data every 10 seconds).
Animations or visualizations tied to time.

As a container view, it has no appearance of it's own, it simply accepts a closure that creates the content you wish to redraw:

TimelineView(...) { _ in
    // Some view
}

The TimelineView initializer accepts a TimelineSchedule to control when updates happen and there's a few different types of schedules you can pick from:

.periodic(from:by:)

Regularly refresh the view at defined intervals (e.g. every second), perfect for periodic updates like clocks and timers.

struct RealTimeClockView: View {
    var body: some View {
        // Redraws the view every 1 second
        TimelineView(.periodic(from: Date(), by: 1)) { context in
            let currentDate = context.date
            let formattedTime = timeFormatter.string(from: currentDate)

            VStack {
                Text("Current Time")
                    .font(.headline)
                Text(formattedTime)
                    .font(.largeTitle)
                    .bold()
            }
            .padding()
        }
    }

    private var timeFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateFormat = "hh:mm:ss"
        return formatter
    }
}

.explicit(dates:)

Refresh the view at predefined moments (i.e. alarms / reminders) using a specific list of dates.

struct ScheduledUpdatesView: View {
    let updateTimes = [
        Calendar.current.date(bySettingHour: 9, minute: 0, second: 0, of: Date())!,
        Calendar.current.date(bySettingHour: 12, minute: 0, second: 0, of: Date())!,
        Calendar.current.date(bySettingHour: 18, minute: 0, second: 0, of: Date())!
    ]
    
    var body: some View {
        TimelineView(.explicit(updateTimes)) { context in
            VStack {
                Text("Next Update")
                    .font(.headline)
                Text("Updated at \(context.date, style: .time)")
                    .font(.largeTitle)
            }
            .padding()
        }
    }
}

.animation(minimumInterval:paused:)

Drive smooth, time-based animations with precise timing.

struct RotatingClockView: View {
    var body: some View {
        // 60 FPS
        TimelineView(.animation(minimumInterval: 1 / 60)) { context in
            let seconds = Calendar.current.component(.second, from: context.date)
            VStack {
                Text("Clock Animation")
                    .font(.headline)
                ZStack {
                    Circle()
                        .stroke(lineWidth: 2)
                        .frame(width: 150, height: 150)

                    Rectangle()
                        .fill(Color.red)
                        .frame(width: 2, height: 75)
                        .offset(y: -37.5)
                        .rotationEffect(.degrees(Double(seconds) * 6)) // Rotate based on seconds
                }
            }
            .padding()
        }
    }
}

.everyMinute

Refreshes the view at the beginning of each minute.

TimelineView(.everyMinute) { context in
    ...
}

Custom Schedules

You can create your own custom schedule by subclassing TimelineSchedule:

struct CustomSchedule: TimelineSchedule {
    func entries(from startDate: Date, mode: TimelineScheduleMode) -> [Date] {
        var entries: [Date] = []
        ...
        entries.append(someDateObject) 
        return entries
    }
}

For a schedule containing only dates in the past, the TimelineView shows the last date in the schedule. For a schedule containing only dates in the future, the TimelineView draws its content using the current date until the first scheduled date arrives.

Limitations of TimelineView

While TimelineView is great for time-driven updates, it has some limitations:

Not event-driven: It can’t react to data updates outside of its time schedule (e.g., WebSocket or user input).
System-managed scheduling: SwiftUI may coalesce updates to conserve resources, so it’s not guaranteed for extremely high-precision tasks like millisecond timing.
Static timing schedules: Once a TimelineView is created, its timing schedule cannot be dynamically modified.

For event-driven use cases (like a real-time data stream), consider using Observation or Combine instead.

In case you missed it, here's a recording of my talk at SwiftCraft earlier this year:

If you're interested in more articles about iOS Development & Swift, check out my YouTube channel or follow me on Twitter.

And, if you're an indie iOS developer, make sure to check out my newsletter! Each issue features a new indie developer, so feel free to submit your iOS apps.

The best investment for landing your dream iOS jobHey there! My name is Aryaman Sharda and I started making iOS apps way back in 2015. Since then, I’ve worked for a variety of companies like Porsche, Turo, and Scoop Technologies just to name a few. Over the years, I’ve mentored junior engineers, bui…

Indie Watch is an exclusive weekly hand-curated newsletter showcasing the best iOS, macOS, watchOS, and tvOS apps from developers worldwide.

Universal Link & Apple App Site Association Testing Tool

Easily verify and test Universal GetUniversal.link is a free tool for verifying and testing Apple App Site Association (AASA) files. Ensure your Universal Links are configured correctly with easy link creation, real-time testing, and team collaboration features. Save the website as a bookmark for quick access on devices and simulators. Simplify your AASA file troubleshooting today!

Creating a macOS Screensaver in SwiftUI

Aryaman Sharda — Fri, 15 Nov 2024 16:26:54 GMT

A few months ago, I wrote an article titled Recreating The DVD Screensaver In SwiftUI. In this post, we'll take it one step further and we'll turn it into a macOS screensaver.

To get started, create a new Xcode project and select Screen Saver:

The new project comes with some starter code, but it's in Objective C:

Fortunately, we can just delete those classes and replace them with their Swift equivalent. No need to create a bridging header either.

Next, we'll need to go into our Project Settings and update the Principal class to match the name of the Swift class we're replacing the starting Objective-C code with. We'll need to provide some namespace information here as well, so make sure to update this value to be in the format of PROJECT_NAME.SWIFT_CLASS_NAME:

Now, creating a macOS screensaver is largely undocumented and riddled with bugs in macOS Sonoma, so implementing this custom screensaver was a bit trickier than expected.

We'll start by making a basic vanilla screensaver to get a feel for the main functions and steps involved and then we’ll replace it up with our SwiftUI version.

Building A Basic Screensaver

In order to create our custom screensaver, we'll start by subclassing ScreenSaverView.

import Foundation
import ScreenSaver

class RotatingLogoScreensaver: ScreenSaverView {

}

Now, we have our first decision to make. We can implement our screensaver relying entirely on CoreAnimation or we can implement it by overriding specific functions on ScreenSaverView.

Core Animation vs. Manual Rendering

If you’re creating smooth, continuous animations—like rotating, scaling, or moving an object—Core Animation is ideal. It’s highly optimized for these types of animations, running efficiently on the GPU without requiring continuous manual updates. Core Animation takes care of frame timing and updates automatically, making it easier to implement animations that need consistent refresh rates (e.g., 60fps) without worrying about defining how the screensaver should work from frame to frame. So, if your building something like a rotating logo, a pulsing effect, or continuous fade-in/out—simple effects that don’t require frame-by-frame custom drawing, I'd recommend you use CoreAnimation directly.

Instead, if you need custom drawing that changes each frame (such as an animation involving path drawing, text changes, or data visualizations), draw(_:) and animateOneFrame() give you full control over the exact contents of each frame. And for screensavers where you want to control the exact update frequency and timing independently of the display refresh rate, animateOneFrame() offers more flexibility in setting custom frame rates.

If you want to proceed with the manual rendering approach, you'll need to override the following methods:

`init?(frame: NSRect, isPreview: Bool)`

Creates a newly allocated screen saver view with the specified frame rectangle. isPreview tells the system whether it should use this screensaver as the preview in System Settings.

`func draw(NSRect)`

The draw(_:) method is for static rendering, allowing you to draw shapes, images, or text without continuous updates—ideal for screensavers without animation.

`func animateOneFrame()`

This is called repeatedly at the screensaver’s frame rate, making it perfect for animated elements where you’re updating positions, colors, or other properties over time. Since animateOneFrame() can manage both updating and rendering animated content, you generally don’t need to use draw(_:) alongside it, as they’re almost mutually exclusive in practice.

Implementation

Since we're after a simple rotating image screensaver, we can rely on CoreAnimation directly.

import Foundation
import ScreenSaver

class RotatingLogoScreensaver: ScreenSaverView {
    override init?(frame: NSRect, isPreview: Bool) {
        super.init(frame: frame, isPreview: isPreview)
        setupLayers()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayers()
    }

    private func setupLayers() {
        // 1
        wantsLayer = true // Enable layer-backed view for animations

        // 2
        layer = CALayer()
        layer?.backgroundColor = NSColor.black.cgColor

        // 3
        let logoLayer = CALayer()
        logoLayer.contents = Bundle(for: Self.self).image(forResource: "Logo")

        // Scales the logo to 35% of the view's dimensions
        let defaultLogoSize: CGFloat = 150.0
        var logoDimension: CGFloat = defaultLogoSize
        if let currentWidth = layer?.frame.width {
            logoDimension = currentWidth * 0.35
        }
        logoLayer.frame = CGRect(x: 0, y: 0, width: logoDimension, height: logoDimension)

        // Center the logoLayer in the view
        logoLayer.position = CGPoint(x: bounds.midX, y: bounds.midY)

        // Apply the rotation animation
        let rotation = CABasicAnimation(keyPath: "transform.rotation.z")
        rotation.fromValue = 0
        rotation.toValue = CGFloat.pi * 2
        rotation.duration = 4.0 // Adjust for rotation speed
        rotation.repeatCount = .infinity // Repeat indefinitely

        // 5
        logoLayer.add(rotation, forKey: "rotate")

        // 6
        layer?.addSublayer(logoLayer)
    }
}

Enable Layer-Backed View: wantsLayer = true tells the view to use a Core Animation layer as its backing store. This allows us to add sublayers and apply animations directly to them.
Set the Background Layer: By setting layer = CALayer(), we create a new custom root layer for this view. Then, layer?.backgroundColor = NSColor.black.cgColor fills the background with black, giving the screensaver a clean slate to work with.
Create the Logo Layer: The next step is to create a logoLayer to display the image we want to animate. logoLayer.contents loads the image resource from the app bundle and assigns it to the layer, which acts as the logo’s "canvas."
Add a Rotation Animation: To make the logo rotate continuously, we create a CABasicAnimation on the transform.rotation.z key path.
Adding this animation to logoLayer starts the rotation.
Add logoLayer to the Main Layer: Finally, layer?.addSublayer(logoLayer) attaches the logo layer (with its rotation animation) to the main view’s root layer, making it visible and active in the screensaver.

Testing

With our testing complete, we can now focus on testing our new screensaver. We can't "Run" our screensaver directly from Xcode, so we'll need to grab the Build Product from Derived Data.

Inside Derived Data, in your project's Products folder, you'll find the new .saver file which you can now double-click to install.

Next, you'll be asked to approve the installation of the screen saver; you'll only be asked this the first time you install it.

You should now see a preview of your screensaver in System Preferences:

Now, creating and testing custom screensavers in macOS Sonoma is a bit of a mess.

I ran into an issue where the preview in System Settings was showing the correct behavior, but when I ran the screensaver, I just saw a black screen.

According to this article, the issue is that the previous screensaver process isn't actually terminating; instead, it's just being reused. To get around this, I found that opening Activity Monitor and force-quitting any processes related to "legacyScreensaver" forced the system to recognize the updated version of the .saver.

My recommended testing workflow would be to:

Quit System Preferences.
In Activity Monitor, search for "legacy" and delete relevant entries.
Build Xcode screensaver project.
Open Derived Data and install new .saver file.
Rinse and repeat.

I also noticed that sometimes the Derived Data build product wouldn't update even if the code did, so you may need to delete Derived Data and build again if you don't see the "Last Modified" timestamp change.

Adding SwiftUI

You can turn any SwiftUI View into a screensaver. Simply implement your SwiftUI screen in your typical way and wrap it in a NSHostingController.

We'll be borrowing the implementation from my Recreating The DVD Screensaver In SwiftUI article.

Note: The original implementation was for iOS, so I had to make some minor tweaks to make the implementation work for macOS.

class DVDScreensaverScreensaverView: ScreenSaverView {
    override init?(frame: NSRect, isPreview: Bool) {
        super.init(frame: frame, isPreview: isPreview)

        // Enable layer-backed view for better rendering compatibility with SwiftUI
        wantsLayer = true

        let timeView = ContentView()
        let hostingController = NSHostingController(rootView: timeView)

        // Set frame directly to bounds and enable autoresizing
        hostingController.view.frame = bounds
        hostingController.view.autoresizingMask = [.width, .height]
        addSubview(hostingController.view)
    }

    required init?(coder decoder: NSCoder) {
        super.init(coder: decoder)
        fatalError("Not implemented.")
    }
}

That's all we need to do to make any SwiftUI experience available as a screensaver!

The rest of the process is the same; simply build the project and install the new .saver file:

Actual frame rate is 60FPS. The .gif lies.

The source code for this project is available here:

GitHub - aryamansharda/RotatingLogoScreensaverDemo

Contribute to aryamansharda/RotatingLogoScreensaverDemo development by creating an account on GitHub.

GitHubaryamansharda

GitHub - aryamansharda/DVDScreensaverScreensaver

Contribute to aryamansharda/DVDScreensaverScreensaver development by creating an account on GitHub.

GitHubaryamansharda

In case you missed it, here's a recording of my talk at SwiftCraft earlier this year:

If you're interested in more articles about iOS Development & Swift, check out my YouTube channel or follow me on Twitter.

And, if you're an indie iOS developer, make sure to check out my newsletter! Each issue features a new indie developer, so feel free to submit your iOS apps.

Indie Watch is an exclusive weekly hand-curated newsletter showcasing the best iOS, macOS, watchOS, and tvOS apps from developers worldwide.

Universal Link & Apple App Site Association Testing Tool

Implementing Shared With You in SwiftUI

Aryaman Sharda — Wed, 02 Oct 2024 03:15:27 GMT

This is a companion article to my presentation about "Creating Shareable Experience" at iOSDevUK 2024 in Aberystwyth.

Have you ever lost track of a link, a song, or some other recommendation a friend has sent you in a busy chat? It happens to all of us and, fortunately, that's exactly what the Shared with You feature on iOS is meant to solve.

What is Shared with You?

Shared with You makes it easy for users to find content that's been shared with them in Messages directly within the relevant apps. For example, here we can see all of the website links that have been shared with me by my contacts and I can keep the conversation going without ever leaving Safari:

This was originally introduced in iOS 16, but very few apps are taking advantage of it. It's really easy to implement as you'll soon see, so if your app has shareable content of any kind, I highly recommend adding this feature to your app.

Getting Started

Before we jump into the code, there’s a few things you should know first:

In order for your app to support Shared With You, your app needs to support Universal Links since this is how Apple verifies that the links shared in Messages belong to your app.
Since Shared with You relies on Messages, you’ll need to test your app on a physical device.
The framework only pulls content from saved contacts, so make sure the person who sent you the link is saved in your contacts when you're testing your implementation.

Our only real setup step is to add the Shared with You capability to our Xcode project:

Adding Shared with You and Associated Domains (for universal links)

Implementation Overview

In most Shared with You implementations, you’ll see two components - the shelf and the attribution view.

Shelf

The shelf lists all of the content shared with you in Messages in a single convenient location. The system automatically organizes this shelf, starting with Siri Suggestions based on recent interactions with the content, then pinned messages, and finally, it sorts everything else chronologically.

Attribution View

The attribution view lets you see who shared the content with you and shows you their name, their profile picture, and provides a link back to the original message in the conversation.

Now, as far as I know, you’re not required to have a dedicated shelf in your implementation, but Apple does recommend it. If you prefer, you can just use the attribution view directly to call out shared content in your app.

Let's add Shared with You support to this app.

The first tab shows a list of blog posts from this website, and in the second tab, we’ll create a shelf to display posts shared with us by our contacts.

Retrieving Links

To get a list of links shared with the user, we’ll create an instance of SWHighlightCenter, the main class responsible for retrieving and managing shared links.

import SharedWithYou

// Provides the application with a priority-ordered list of
// universal links which have been shared with the current user.
private let highlightCenter = SWHighlightCenter()

Next, we'll use the SWHighlightCenter to get a list of highlights. A highlight represents a single shared item, so anytime you see highlight, think of it simply as the link shared with the user.

We’ll save the highlights to a @Published property which we’ll eventually use to populate our shelf:

import SharedWithYou

final class SharedWithYouService: NSObject, ObservableObject {

    // Each highlight represents a shared link
    @Published var highlights: [SWHighlight] = []

    // Provides the application with a priority-ordered list of universal links
    // which have been shared with the current user.
    private let highlightCenter = SWHighlightCenter()

    override init() {
        super.init()

        highlights = highlightCenter.highlights
    }
}

Then, we'll implement the HighlightCenterDelegate function so we can get notified whenever the highlights change:

import SharedWithYou

final class SharedWithYouService: NSObject, ObservableObject, SWHighlightCenterDelegate {

    // Each highlight represents a shared link
    @Published var highlights: [SWHighlight] = []

    // Provides the application with a priority-ordered list of universal links
    // which have been shared with the current user.
    private let highlightsCenter = SWHighlightCenter()

    override init() {
        super.init()

        highlights = highlightsCenter.highlights
        highlightsCenter.delegate = self
    }

    func highlightCenterHighlightsDidChange(_ highlightCenter: SWHighlightCenter) {
        highlights = highlightsCenter.highlights
    }
}

Don’t forget to implement this delegate otherwise you won’t receive any content.

And, that's it! That's all the code we need to get a list of the content shared with the user. We now have a real-time updating list of links that we can use to populate our shelf.

All that’s left to do is render the attribution view.

Feel free to skip this section and continue with the implementation details below.

Closer Look at SWHighlight

The SWHighlight also includes details like who shared the content and a reference to the original message, but the only public properties we have access to are the identifier and URL fields:

SW_EXTERN @interface SWHighlight : NSObject 

/*!
    @abstract The unique identifier for this highlight
 */
@property (copy, readonly, nonatomic) id  identifier;

/*!
    @abstract The surfaced content URL
 */
@property (copy, readonly, nonatomic) NSURL *URL;

- (instancetype)init NS_UNAVAILABLE;
+ (instancetype)new NS_UNAVAILABLE;
@end

Fortunately though, all we really need is the URL. We can use the information in the URL to figure out what data we need to fetch from our backend.

For instance, in our earlier Podcast example, the URL would likely contain a podcastID that we could send to a backend endpoint to retrieve the remaining details needed to display the podcast on our shelf, like the thumbnail, author, length, etc.

Displaying Links

The Shared with You framework includes the SWAttributionView class for displaying attribution views, but it doesn't have SwiftUI support out of the box. We can easily add support by making a custom UIViewRepresentable and passing in the highlight we want the attribution view to be tied too.

We’ll start by creating an instance of our SWAttributionView and we’ll start configuring it.

The displayContext informs the system about the environment we’re showing the attribution view in - we want to use .summary when we’re presenting the view in a top-level list and .detail when we’re showing the view in some kind of detail page. Knowing the context the user is encountering the attribution view in helps the system rank this highlight in the shelf.

struct SWAttributionViewRepresentable: UIViewRepresentable {
    let highlight: SWHighlight

    func makeUIView(context: Context) -> UIView {
        let attributionView = SWAttributionView()
        attributionView.horizontalAlignment = .leading

        // Change `.summary` to `.detail` if presenting in
        // a detail view.
        attributionView.displayContext = .summary
        attributionView.highlight = highlight
        attributionView.backgroundStyle = .default
        attributionView.menuTitleForHideAction = "Remove Article"

        return attributionView
    }

    func updateUIView(_ uiView: UIView, context: Context) {}
}

This view is really locked down and the only things Apple lets us customize here are some basic layout properties - no colors, no fonts, not even the height.

We'll explore some customization options in a moment, but let's finish implementing our shelf.

Creating The Shelf

We’ll use the SharedWithYouService we created earlier and the SWHighlightCenter to get a list of highlights (remember a highlight is just how the framework represents a shared link).

We’ll integrate over all of them and create an attribution view and BlogPostRow for each which will give us this:

struct SharedWithYouShelf: View {
    @StateObject var sharedWithYouService = SharedWithYouService()

    var body: some View {
        NavigationView {
            List(sharedWithYouService.highlights, id: \.url.absoluteString) { highlight in
                VStack {
                    SWAttributionViewRepresentable(highlight: highlight)
                    BlogPostRow(blogPost: getBlogPostFrom(highlight))
                }
            }
        }
    }
}

Now, Apple’s documentation suggests that your shelf should offer a rich preview of the content, including a thumbnail, title, subtitle, and attribution view, which you can see we’ve implemented here for each highlight.

Apple wants the presentation of these attribution views to be secure and they don’t want to reveal any information about the recipients or the conversations, so Apple creates these views on your behalf “out of process”. This means that this view is rendered by a separate process off the main thread, so you can add this feature to your app without worrying about it really affecting your app’s performance.

And that it’s - that’s all the code we need to build our shelf and call out shared content in our apps.

In our current implementation, if we were to long press on the SWAttributionView, we'd see a supplemental menu with some default actions:

"Reply" will bring up the relevant message in the conversation allowing us to reply without leaving the app.
"Remove Article" will prevent this link from appearing in Shared with You.

Now, while Shared with You is generally very locked down, Apple exposes some customization options here that allow us to add a few more options to this menu.

In order to do that, we'll need to update our UIViewRepresentable implementation from earlier.

First, we'll add a series of custom UIActions that we want to add to this menu. These will be specific to your use case, but in the case of our list of blog posts, we may want to expose actions for saving to the user’s reading list, translating the article, and bookmarking it.

func makeUIView(context: Context) -> UIView {
    let attributionView = SWAttributionView()
    ... 

    // Action to save the article to a reading list
    let saveToReadingListAction = UIAction(
        title: "Save to Reading List",
        image: UIImage(systemName: "book")
    ) { _ in ... }

    // Action to translate the article
    let translateAction = UIAction(
        title: "Translate",
        image: UIImage(systemName: "globe")
    ) { _ in ... }

    // Action to bookmark the article
    let bookmarkAction = UIAction(
        title: "Bookmark",
        image: UIImage(systemName: "bookmark")
    ) { _ in ... }

Then, we can just define our new menu, specify a title and the children to show and assign it to the attribution view's supplementalMenu property.

func makeUIView(context: Context) -> UIView {
    let attributionView = SWAttributionView()
    ... 

    // Action to save the article to a reading list
    let saveToReadingListAction = UIAction(
        title: "Save to Reading List",
        image: UIImage(systemName: "book")
    ) { _ in ... }

    // Action to translate the article
    let translateAction = UIAction(
        title: "Translate",
        image: UIImage(systemName: "globe")
    ) { _ in ... }

    // Action to bookmark the article
    let bookmarkAction = UIAction(
        title: "Bookmark",
        image: UIImage(systemName: "bookmark")
    ) { _ in ... }

    attributionView.supplementalMenu = UIMenu(
        title: "Extras",
        children: [
            saveToReadingListAction,
            translateAction,
            bookmarkAction
        ]
    )
    return attributionView
}

And now we have these custom options appearing whenever we interact with the SWAttributionView.

Testing

Lastly, I want to call out some things to make your testing easier.

In the Settings app, go to Messages, and verify that Shared with You is enabled globally across your device. This should be true by default, but it’s good to double-check.
Apple lets users disable automatic sharing, both globally and for individual apps, so make sure Shared with You is turned on explicitly for your app too.
Pinning content in Messages is a great way to verify your implementation since it automatically grants Shared with You permissions. So, if you’ve pinned a message from a known contact and still aren’t seeing results in the HighlightCenter, the issue likely lies elsewhere in your implementation.

In case you missed it, here's a recording of my talk at SwiftCraft earlier this year:

If you're interested in more articles about iOS Development & Swift, check out my YouTube channel or follow me on Twitter.

And, if you're an indie iOS developer, make sure to check out my newsletter! Each issue features a new indie developer, so feel free to submit your iOS apps.

Indie Watch is an exclusive weekly hand-curated newsletter showcasing the best iOS, macOS, watchOS, and tvOS apps from developers worldwide.

Universal Link & Apple App Site Association Testing Tool

iOSDevUK 2024 Source Code & Slides

Aryaman Sharda — Sun, 01 Sep 2024 07:36:59 GMT

I'll be speaking at iOSDevUK later this week and wanted to make the source code for the demo apps available in advance.

Creating Shareable Experiences.pdf

Google Docs

https://github.com/aryamansharda/SharedWithYouDemo

GitHub - aryamansharda/TicTacToe: GroupActivity Demo

GroupActivity Demo. Contribute to aryamansharda/TicTacToe development by creating an account on GitHub.

GitHubaryamansharda

Using @DebugDescription in Xcode 16

Aryaman Sharda — Mon, 22 Jul 2024 06:31:10 GMT

Debugging can be tricky, especially with custom types. Clear and informative debug output is essential for understanding the behavior of your code.

That's where the CustomDebugStringConvertible protocol and @DebugDescription macro come in. In this article, we'll take a look at how to work with this protocol and how to use this new macro in Xcode 16 to make debugging even easier. 😊

Using CustomDebugStringConvertible

The CustomDebugStringConvertible protocol allows you to customize the debug description of your custom types, providing more detailed and readable debug output.

When you conform to this protocol, you implement a computed property debugDescription that returns a String. This string is used when you print the object in a debug context, such as when using print() or inspecting variables in Xcode's debug console:

struct Book: CustomDebugStringConvertible {
    let title: String
    let author: String
    let pageCount: Int

    var debugDescription: String {
        // Ace the iOS Interview - Aryaman Sharda [330]
        "\(title) - \(author) [\(pageCount)]"
    }
}

This is especially helpful when dealing with complex custom types since a custom formatted output is often more useful than the default one.

Before implementing the CustomDebugStringConvertible protocol, our output looks like this:

let book = Book(
    title: "Ace the iOS Interview",
    author: "Aryaman Sharda",
    pageCount: 330
)

print(book)
Book(title: "Ace the iOS Interview", author: "Aryaman Sharda", pageCount: 330)

With this conformance in place, our debugger output now looks like this:

struct Book: CustomDebugStringConvertible {
    let title: String
    let author: String
    let pageCount: Int

    var debugDescription: String {
        // Ace the iOS Interview - Aryaman Sharda [330]
        "\(title) - \(author) [\(pageCount)]"
    }
}

print(book)
Ace the iOS Interview - Aryaman Sharda [330]

(lldb) po book
▿ Ace the iOS Interview - Aryaman Sharda [330]
  - title : "Ace the iOS Interview"
  - author : "Aryaman Sharda"
  - pageCount : 330

This is clearly a noticeable improvement, but there's still one small issue....

I'd much rather inspect my variables in Xcode's Variable Inspector instead of adding print statements in my code or typing po book to utilize our new custom debugging format.

What if we could change how our variables appear here directly? What if we could see the debugDescription at the top-level without having to expand the book variable? Fortunately, the @DebugDescription macro allows us to do just that.

@DebugDescription

By simply annotating our type with the new DebugDescription macro, we can now use our debugDescription in Xcode's Variable Inspector and crash logs:

@DebugDescription
struct Book: CustomDebugStringConvertible {
    let title: String
    let author: String
    let pageCount: Int

    var debugDescription: String {
        // Ace the iOS Interview - Aryaman Sharda [330]
        "\(title) - \(author) [\(pageCount)]"
    }
}

The debugDescription is available here so I no longer need to expand book to see the relevant variables or use print(book) or po book.

It's definitely a nice quality of life improvement, but how does it all work? And what if I can't use Xcode 16 yet?

How It Works

In order to display a custom debug description, LLDB - the debugger used in Xcode - needs to evaluate the code that generates this description. In other words, it needs to actually execute the debugDescription computed property.

This process is called "expression evaluation". LLDB usually performs this evaluation only when you explicitly ask for it, commonly using the po (print object) command. Outside of these explicit commands, LLDB avoids the overhead of expression evaluation which can often be complex and slow (or just simply unavailable).

Luckily, we can avoid the need for expression evaluation altogether by defining an LLDB Type Summary. This tells LLDB how to display your type without needing to run any extra code.

For example, in the debugger, we can manually add a Type Summary for Range with the following command:

type summary add --summary-string "${var.lowerBound}..<${var.upperBound}" "Range"

Since the format is pre-defined, LLDB doesn't need to evaluate any expressions or execute any code to display the summary. It simply replaces the placeholders with the actual values of the properties. This means that LLDB will always be able to display the debug output quickly and reliably, regardless of the state of the program or the availability of expression evaluation.

So, simply put, when we annotate our type with DebugDescription, it's just creating a LLDB Type Summary for it under the hood and then, at compile time, bundling these summaries with the binary.

If you're interested in reading more about the proposal and evolution of this macro, check out the discussion in the Swift forums:

Pitch: Debug Description macro

In addition to the macro, can we please also expose a straightforward way to simply manually specify the summary string that we want lldb to use, alongside each type? @_lldbFormatter(”${var.id}: ${var.name}”) struct Student: CustomStringConvertible { var name: String var id: Int var description: String { // potentially more complicated code than what `@DebugDescription` // would be able to handle } } I understand macros are very awesome, but it isn’t always appropriate to rely…

Swift Forumslorentey

Macro Alternatives

For those who can't use Xcode 16 yet, an alternative is to use LLDB Type Summaries and configure them in your .lldbinit file. The .lldbinit file is a configuration file that Xcode automatically loads when you start a debugging session. It allows you to define custom scripts and commands to control how types are displayed in the debugger.

By writing Type Summaries in the .lldbinit file, you can customize the debug output for your most important models, providing meaningful and formatted information during debugging - even without the new macro.

You can also share the .lldbinit configuration with your team which would allow everyone to benefit from the same enhanced debugging experience. Then, whenever your team is in a position to use Xcode 16, you can migrate to using the new macro.

You can find instructions on setting up the .lldbinit file here:

Debugging Tips

What are your favorite Swift debugging tips?

Krzysztof ZabłockiKrzysztof Zabłocki

If you're interested in more articles about iOS Development & Swift, check out my YouTube channel or follow me on Twitter.

And, if you're an indie iOS developer, make sure to check out my newsletter! Each issue features a new indie developer, so feel free to submit your iOS apps.

Indie Watch is an exclusive weekly hand-curated newsletter showcasing the best iOS, macOS, watchOS, and tvOS apps from developers worldwide.

Universal Link & Apple App Site Association Testing Tool

Blend Modes in SwiftUI

Aryaman Sharda — Wed, 10 Jul 2024 19:32:02 GMT

Blend modes play a crucial role in digital design, enabling designers to easily create complex visual effects like overlays and textures. They're essential for tasks like photo manipulation, creating lighting effects, and adding depth to images.

Blend modes, as the name suggests, blends the colors of multiple layers of pixels using mathematical formulas to determine each pixel's influence on the final image. You can combine any number of layers, but at a minimum, you'll need 2 layers - a base layer and a blend layer to create a blend mode effect.

Source: Elegant Themes

In this article, we'll dive deeper into blend modes, why they're important, how they're implemented, and how to use them in SwiftUI.

Blend Modes in SwiftUI

SwiftUI supports the following blend modes:

public enum BlendMode : Sendable {
    case normal
    case multiply
    case screen
    case overlay
    case darken
    case lighten
    case colorDodge
    case colorBurn
    case softLight
    case hardLight
    case difference
    case exclusion
    case hue
    case saturation
    case color
    case luminosity
    case sourceAtop
    case destinationOver
    case destinationOut
    case plusDarker
    case plusLighter
}

Blend modes can be applied to a variety of components, not just images. In SwiftUI, blend modes can be used with any view, including text, shapes, and even entire containers that hold multiple elements.

However, for simplicity sake, the examples in this article will just use an image.

Here's the SwiftUI setup I'll use to explore different blend modes:

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .trailing) {
            Image("porsche")
                .resizable()
                .scaledToFill()
            
            Rectangle()
                .fill(Color.red)
                .frame(height: 178)
        }
        .frame(width: 533, height: 355)
    }
}

This results in the following starting image:

Normal

The normal blend mode displays the top layer as is, without blending it with the layer beneath. This is the default mode, ensuring each layer appears as intended.

So, by adding .blendMode(.normal) to the Rectangle, we get an identical image to our starting one:

Multiply

The multiply blend mode darkens the image by multiplying the color values [RGB] of the top and bottom layers. It's great for adding shadows and creating depth.

Since color values range from 0 to 255, multiplying both values and then dividing by 255 makes it easier to normalize the result within this range.

Screen

The screen blend mode lightens the image by combining the color values of the layers. It's useful for highlights and creating a glowing / dreamy effect.

Overlay

The overlay blend mode enhances textures by increasing contrast, darkening dark areas, and lightening light areas. It combines the multiply and screen modes, based on the pixel values of the bottom layer.

These are just the multiply and screen formulas again with a multiplier of 2.

Hard Light

Hard light applies the same principles as overlay, but swaps the roles of the layers.

It increases contrast by considering the brightness of the top layer, making it ideal for dramatic lighting effects.

Both blend modes enhance contrast, but overlay focuses on the brightness of the bottom layer, while hard light focuses on the brightness of the top layer. Overlay is typically used to enhance textures and add depth, whereas hard light is favored for creating intense lighting effects and dramatic highlights or shadows

Color Dodge

Color dodge brightens the image by dividing the bottom color by the inverse of the top color. It creates vivid highlights, often used to add depth and realism.

Experimenting with blend modes in SwiftUI can significantly enhance your design's visual appeal. For more on the formulas behind these blend modes, check out this Wikipedia article:

Blend modes - Wikipedia

Wikimedia Foundation, Inc.Contributors to Wikimedia projects

If you're interested in more articles about iOS Development & Swift, check out my YouTube channel or follow me on Twitter.

And, if you're an indie iOS developer, make sure to check out my newsletter! Each issue features a new indie developer, so feel free to submit your iOS apps.

Indie Watch is an exclusive weekly hand-curated newsletter showcasing the best iOS, macOS, watchOS, and tvOS apps from developers worldwide.

Universal Link & Apple App Site Association Testing Tool

Mastering Animatable and AnimatablePair in SwiftUI

Aryaman Sharda — Sat, 06 Jul 2024 00:45:42 GMT

SwiftUI makes creating animations a breeze, but sometimes you need a bit more control over how things move and animate.

In this article, we'll explore Animatable and AnimatablePair and we'll see how we can use these APIs to craft more advanced animations in our apps. But, before we do that, let's make sure we understand the problem it solves.

In the following code, whenever the user taps on the Rectangle, I want to animate the change in dimensions:

0:00

/0:03

Hmm, do you see how the Rectangle just snaps to its new dimension without any animation? I'm using withAnimation and updating the width and height - what's going on?

When dealing with custom objects, such as a new Shape with a custom Path, SwiftUI doesn't know how to interpolate custom properties like width and height between their initial and final states.

To handle this, we need to use the Animatable protocol to explicitly tell SwiftUI how to interpolate these properties.

Animatable

Luckily for us, all Shape's in SwiftUI already conform to Animatable:

/// A 2D shape that you can use when drawing a view.
///
/// Shapes without an explicit fill or stroke get a default fill based on the
/// foreground color.
///
/// You can define shapes in relation to an implicit frame of reference, such as
/// the natural size of the view that contains it. Alternatively, you can define
/// shapes in terms of absolute coordinates.
@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
public protocol Shape : Sendable, Animatable, View

/// A type that describes how to animate a property of a view.
@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
public protocol Animatable {

    /// The type defining the data to animate.
    associatedtype AnimatableData : VectorArithmetic

    /// The data to animate.
    var animatableData: Self.AnimatableData { get set }
}

If you are trying to synchronize animation between properties on other types, don't forget to make the type conform to Animatable.

So, it would appear that all we need to do is tweak the implementation of animatableData.

Ultimately, I want to animate the width and height together, but I can only return one value (i.e. var animatableData: Double). So, let's see what happens when I modify just the width:

var animatableData: Double {
    get { width }
    set { width = newValue}
}

0:00

/0:07

With this addition, we finally have animation, but you'll notice that the change to the height is applied immediately and then the width is animated. Progress, I guess?

We're heading in the right direction, but since Animatable will only allow us to return one value - either width or height - we'll have to use another solution to animate these properties in sync.

AnimatablePair

If we want to synchronize the animation of the multiple properties together, we need to use AnimationPair instead:

/// A pair of animatable values, which is itself animatable.
@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
@frozen public struct AnimatablePair : VectorArithmetic where First : VectorArithmetic, Second : VectorArithmetic

So, let's change our Animatable conformance to return an AnimatablePair instead of a Double:

var animatableData: AnimatablePair {
    get {
        AnimatablePair(width, height)
    }
    set {
        width = newValue.first
        height = newValue.second
    }
}

0:00

/0:09

Great! The width and height are finally animating together!

Now, that we have a way of synchronizing the animation of 2 properties, we can start to build some really cool animations.

If you find yourself needing to synchronize more than 2 properties, you can extend AnimatablePair like this:

var animatableData: AnimatablePair, CGFloat> {
    get {
        AnimatablePair(AnimatablePair(width, height), labelScale)
    }
    set {
        width = newValue.first.first
        height = newValue.first.second
        someOtherProperty = newValue.second
    }
}

Morphing Shapes

Let's say you want to animate a Shape that morphs between a circle and a rounded rectangle. We can use AnimatablePair to help animate the cornerRadius and size simultaneously.

struct MorphingShape: Shape {
    var size: CGFloat
    var cornerRadius: CGFloat

    var animatableData: AnimatablePair {
        get {
            AnimatablePair(size, cornerRadius)
        }
        set {
            size = newValue.first
            cornerRadius = newValue.second
        }
    }

    func path(in rect: CGRect) -> Path {
        let adjustedSize = min(size, rect.width, rect.height)
        let rect = CGRect(
            x: (rect.width - adjustedSize) / 2,
            y: (rect.height - adjustedSize) / 2,
            width: adjustedSize,
            height: adjustedSize
        )
        return Path(roundedRect: rect, cornerRadius: cornerRadius)
    }
}

struct ContentView: View {
    @State private var size: CGFloat = 100
    @State private var cornerRadius: CGFloat = 50

    var body: some View {
        MorphingShape(size: size, cornerRadius: cornerRadius)
            .fill(Color.green)
            .frame(width: 200, height: 200)
            .onTapGesture {
                withAnimation(
                    .spring(
                        response: 1.0,
                        dampingFraction: 0.5,
                        blendDuration: 1.0
                    )
                ) {
                    size = CGFloat.random(in: 50...150)
                    cornerRadius = CGFloat.random(in: 0...75)
                }
            }
    }
}

0:00

/0:08

Synchronizing Text

As we've already seen, there are several types of animations and transitions that do not have built-in interpolation mechanisms in SwiftUI and require the implementation of the Animatable protocol:

Custom Shapes: If you create custom shapes with properties that need to animate (e.g., path points), you need to conform to Animatable to provide smooth transitions.
Complex Property Combinations: When you have multiple properties that need to animate together, such as the position and size of a Shape, or the corner radius and shadow radius of a View.
Non-Numeric Properties: Properties that are not inherently numeric, such as color components or certain enum values, require custom interpolation.
Non-Standard Animations: Any non-standard or complex animations that involve more than simple position, size, rotation, or opacity changes typically require Animatable.

This also extends to Text, where SwiftUI can easily animate properties like opacity or font size but struggles with animating the actual text content.

In this example, we aim to animate changes to the Text component's content.

Without using Animatable or AnimatablePair, SwiftUI defaults to a fade animation, which looks clunky:

0:00

/0:03

Once we add Animatable and AnimatablePair, the animation looks much better, as SwiftUI can now use animatableData to accurately interpolate between the starting and ending values:

0:00

/0:03

struct AnimatableTextView: View, Animatable {
    var value1: Double
    var value2: Double

    var animatableData: AnimatablePair {
        get {
            AnimatablePair(value1, value2)
        }
        set {
            value1 = newValue.first
            value2 = newValue.second
        }
    }

    var body: some View {
        VStack {
            Text(String(format: "%.2f", value1))
                .font(.largeTitle)
                .foregroundColor(.red)
                .padding()
            Text(String(format: "%.2f", value2))
                .font(.largeTitle)
                .foregroundColor(.blue)
                .padding()
        }
    }
}

struct ContentView: View {
    @State private var value1: Double = 0.0
    @State private var value2: Double = 0.0
    @State private var animate = false

    var body: some View {
        VStack {
            AnimatableTextView(value1: value1, value2: value2)
            Button("Animate Values") {
                withAnimation(.easeInOut(duration: 2)) {
                    value1 = animate ? 100.0 : 0.0
                    value2 = animate ? 200.0 : 0.0
                }
                animate.toggle()
            }
        }
        .frame(width: 300, height: 200)
        .padding()
    }
}

If you're interested in more articles about iOS Development & Swift, check out my YouTube channel or follow me on Twitter.

And, if you're an indie iOS developer, make sure to check out my newsletter! Each issue features a new indie developer, so feel free to submit your iOS apps.

Indie Watch is an exclusive weekly hand-curated newsletter showcasing the best iOS, macOS, watchOS, and tvOS apps from developers worldwide.

Universal Link & Apple App Site Association Testing Tool

Useful Aliases for Everyday iOS Development

Aryaman Sharda — Wed, 03 Jul 2024 00:22:57 GMT

In this post, we'll cover a bunch of handy aliases for Xcode, CocoaPods, Git, and more that will help make your workflow more efficient. These tips will help you spend less time context switching and more time coding.

ℹ️ We'll look at how to add these to your .bashrc file at the end.

Disclaimer: I don't use or endorse all of these aliases equally - use whichever ones make sense to you.

Git

# Show the status of the working directory and staging area
alias stat='git status'

# Show a compact log of commits with a graphical representation of branches
alias glg='git log --oneline --graph --decorate'
# Display a compact log of commits with custom formatting
alias glp='git log --pretty=format:"%h - %an, %ar : %s"'

# List local branches
alias gb='git branch'
# List all branches, including local and remote
alias gba='git branch -a'

# Commit with a message
alias gcm='git commit -m'
# Commit all changes to tracked files
alias gca='git commit -a'
# Commit all changes to tracked files with a message
alias gcam='git commit -am'
# Amend the last commit
alias gcae='git commit --amend'

# Undo the last commit but keep the changes staged
alias gundo='git reset HEAD~1 --soft'
# Discard all changes and reset to the last commit
alias gtoss='git reset --hard'

CocoaPods

# Install the pods specified in the Podfile
alias podi='pod install'

# Install the pods and update the repo to ensure the latest versions are fetched
alias podiru='pod install --repo-update'

# Update all pods to the latest versions allowed by the Podfile
alias podu='pod update'

# Remove the Pods directory and Podfile.lock, then reinstall all pods
alias podnuke='rm -rf Pods Podfile.lock && pod install'

Derived Data

# Deletes the DerivedData folder
alias ddd='rm -rf ~/Library/Developer/Xcode/DerivedData/*'

iOS Simulator

# Erase all simulators
alias simerase='xcrun simctl erase all'

# Change a particular user default value
# Usage: simdefaults [APP_BUNDLE_ID] [DEFAULTS_KEY] [VALUE]
alias simdefaults='xcrun simctl spawn booted defaults write [APP_BUNDLE_ID] [DEFAULTS_KEY] [VALUE]'

# Open a deep link
# Usage: simdeeplink [URL_SCHEME] [URL_PATH]
# Usage: simdeeplink turo://search
alias simdeeplink='xcrun simctl openurl booted'

# Set location
# Usage: simlocation [LATITUDE] [LONGITUDE]
# Usage: simlocation 37.7749 -122.4194
alias simlocation='xcrun simctl location booted set [LATITUDE] [LONGITUDE]'

# Adjust privacy settings
# Usage: simprivacy [SERVICE] [ACCESS_LEVEL]
alias simprivacy='xcrun simctl privacy booted grant [SERVICE] [ACCESS_LEVEL]'

# Handle push notifications
# Usage: simpush [PAYLOAD_PATH]
alias simpush='xcrun simctl push booted [APP_BUNDLE_ID] [PAYLOAD_PATH]'

# Reset all user defaults for a particular app ID
# Usage: simresetdefaults [APP_BUNDLE_ID]
alias simresetdefaults='xcrun simctl spawn booted defaults delete [APP_BUNDLE_ID]'

I'm usually only working on one app at any given time, so I hardcode the aliases to include the relevant Bundle ID, URL Scheme, etc., so I only need to provide a value for the "last" parameter:

# Basic Alias
# Usage: simdeeplink [URL_SCHEME] [URL_PATH]
# Usage: simdeeplink turo://search
alias simdeeplink='xcrun simctl openurl booted'

# What I Use
# Usage: simdeeplink search (resolves to ....booted turo://search)
alias simdeeplink='xcrun simctl openurl booted turo://'

For easier testing of Universal Links and your Apple App Site Association file, check out:

Universal Link Checker & Apple App Site Association (AASA) Validator

Xcode Project Management

# Open the Xcode workspace file
alias xcworkspace='open *.xcworkspace'

# Open the Xcode project file
alias xcproject='open *.xcodeproj'

# Open the Xcode workspace if it exists; otherwise, open the Xcode project file
alias xcopen='open *.xcworkspace || open *.xcodeproj'

Misc.

alias .="cd .."
alias ..="cd ../.."
alias ...="cd ../../.."

alias cl="clear"

Adding Custom Aliases

When you start a new terminal session, your shell (Bash or Zsh) reads and executes the commands in the corresponding configuration file - .bashrc for Bash and .zshrc for Zsh.

If you want to customize your shell experience with custom commands, you'll need to add these aliases to those files.

If you're using the native Terminal app on your Mac, you'll want to edit the .zshrc file.

Open your .bashrc or .zshrc file: vim ~/.bashrc or vim ~/.zshrc
Paste your aliases at the end of the file.
Save and reload the file: source ~/.bashrc or source ~/.zshrc

Those aliases should now be ready to use.

If there's any useful ones I've missed, shoot me a message on Twitter or at [email protected] and I'll add it here.

And, if you're an indie iOS developer, make sure to check out my newsletter! Each issue features a new indie developer, so feel free to submit your iOS apps.

Indie Watch is an exclusive weekly hand-curated newsletter showcasing the best iOS, macOS, watchOS, and tvOS apps from developers worldwide.