Frederik Handberg's avatar
Frederik Handberg
npub1nj0c...2gqz
23 🇩🇰 Studying for a degree in Software Engineering while building fun projects and working freelance as a News Photographer 📷 I share my software projects, photos and videos from my work as a news photographer, and progress updates as I learn to sew garments. Basically, I just write about my hobbies. frederikhandberg.com
I got images and videos working in `NSTextView` using `NSTextAttachmentViewProvider`. image The reason why I made the block-based editor, was that I just could not figure out how to embed images and videos directly in an `NSTextView`. Therefore, I decided to make a block-based editor where each block was a completely separate SwiftUI view. This means, instead of showing one continuous text view, I was dividing the blocks individually. For example, a note document could have, say, 20 separate text views. Image blocks were also separate and was represented as a SwiftUI `Image`. Having so many different text views turned out to be a performance problem. Especially when text needed to wrap around (for example when resizing the window), the whole app would just freeze. **PROBLEM WITH VIDEOS:** I need to fix scrubbing behavior for videos that happens when swiping up or down inside a video. This is an annoying feature of `AVPlayer` from AppKit, but I assume there is a way to disable that 🤞 For example, if you are just scrolling up/down a markdown file, and you reach a video, then the video will hijack the swipe gesture.
I feel like the worst part about building the same app in multiple different frameworks is getting the app to feel and work the same in all versions being near impossible, because each framework has its own quirks and bugs. For example, my native app for macOS built using #AppKit and #SwiftUI allows pinch-to-zoom in `WKWebView`, but `<webview>` in Electron has a bug where pinch-to-zoom just will not work: So now, I'm in a situation where the native macOS app has a feature that the cross-platform Electron app does not have... Luckily this is a small feature, but I expect feature parity to become a bigger problem because I only just started with the Electron app. Also, should I have chosen Tauri? Idk, I'm getting an urge to switch. The whole frontend can just be moved immediately to Tauri with React, but the backend would need some work. The worst part will be having to deal with different web engines because Tauri uses native engine from the OS. But then again, is that really such a big issue? Because when you build a webapp, you need to make sure to support all web engines, anyways.
The new implementation uses the native HTML `<canvas>`. Then all canvas objects gets drawn on an 800x560px canvas allowing the app to take a snapshot. Now the app runs smoothly even when taking a snapshot of the canvas 😌 #dev #React #Electron View quoted note →
Using `html-to-image` was a mistake… I used it to generate the canvas objects so that the app could take a snapshot of the canvas, but the performance was horrible. After making a change in the canvas (e.g. moving an object), a denounce timer will run and afterwards, the canvas objects will be generated. Lastly, a snapshot will then be taken. This all happened using `html-to-image`. This caused a lag spike where the whole application froze for a few seconds.
I have a decision to make about how I will store the note documents in my app. The native Swift app stores the blocks in a flat JSON structure. This worked fine in the native macOS app, but now that I have also begun building the web app version in Electron, I have some issues because editors like TipTap and Lexical use their own structure, which is AST. That’s very different from my flat JSON structure. I’m probably just gonna switch over to the Lexical-way of doing it instead of my own. Bit annoying having to do that whole refactor now…
This is a very early version of the notes app I'm building. It's the cross-platform version using Electron. Like the native Swift app, I also wanted this one to have the same cool shortcuts. For example, the user can move blocks up and down or insert new blocks above or below using the shortcut `Cmd+Enter` or `Cmd+Shift+Enter`. The UI is very rough, but I'm just concentrating on getting the features working before I start working on a pretty UI. #dev #React #Electron
I love apps with an infinite canvas! #inspiration Here’s another one:
Trying to build your own Markdown parser is a horrible experience 😂 I tried once and quickly learned that there are just way too many edge cases to solve…
This app is quite similar to the notes app I’m working on. Looks really good!