Elytra Blog

The simple RSS Reader. This blog publishes release notes, engineering and design details.

Bug Fixes available for the Summer 2021 Release

Elytra version 2.3.2 running on a Macbook Pro in dark mode.

Since the release of the Summer 2021 builds last week, I have released two additional patch versions for Elytra.

The builds are available on the App Store and on the dedicated Releases page.

Combined Release Notes:

  • Fixed an issue where the app would crash when creating a new folder.

  • Fixed some minor visual bugs with the Subscriptions Interface.

  • Fixed a bug causing the app to always index feeds on launch for Spotlight.

  • Fixed a bug where the article reader preferences would not apply in real time.

  • Drag & Drop for feeds across folders is now enabled.

  • Drop & Drop for articles into Unread or Bookmarks is now enabled.

  • Fixed an issue with articles rendering empty audio players in the article reader.

  • Fixed an issue with the articles next / previous commands being mapped to cmd + up and down arrow. They are now correctly marked to J and K including the app menu.

  • Fixed an issue where no activity indicator would be shown on macOS when adding a new feed.

  • Fixed some minor bugs with adding new feeds.

  • Fixed loading Youtube videos.

  • Fixed an issue where audio from videos wouldn’t play if the mute switch on your iPhone is on.

Elytra – Notarized Builds Now Available

Elytra running on the M1 family of Macs

Elytra v2.3 has just been released, you can read all about here.

I’m also excited to announce that Elytra is now also available on macOS as a Notarized app. You can head over here to download the latest release.

It’s same as the Mac App Store release with two distinct differences:

  1. The app can auto-update itself (or you can manually check for updates) between the two Release and Test Build pipelines. The release line is recommended for most users, the test line is for those who like living on the edge.
  2. The app will use an external Payment Processor which enables me to offer discounts, especially for students, you can read more about it here.

Going forward, I’ll be able to release more frequent fixes directly to the Notarized builds. These builds currently do not have any kind of crash reporter built-in. So if you encounter any crashing bugs, please do take a moment to send me the crash report.

I look forward to hearing from you about this, you can always reach out to me on twitter or email me at support@elytra.app. Happy Reading.

Elytra Summer 2021 Update

Elytra’s 2021 Summer Release is here, just in time for WWDC 2021. It’s been extra challenging to work on v2.3 as this is the first release of Elytra that introduced Swift into various core systems of the app. 

If you have read my earlier post about the public beta, you’d know this has been in the works for a while, but the work on the new version started all the way back in February of 2020. 

This is slightly bigger release (even I am not used to this) so this is going to need a TLDR.

TLDR;

  • New system for adding feeds: You can explore topics by prefixing your keyword with the # symbol. Or directly search for a website with its base URL.
  • Sync is now faster: more reliable and uses a delta updates approach to conserve power and network bandwidth.
  • Two new Widgets: Folders (configurable) and Bloccs.
  • Improved App Performance: Thanks to a new core, the app’s performance has seen a big boost and crashes less.
  • Filters on macOS: You can now add and remove filters directly from the macOS App.
  • Mini Audio player: Elytra now ships with a mini-audio player to quickly browse through audio-clips and podcast episodes.
  • Media Playback: Elytra now comes with improved support for Youtube and Apple Trailers feeds.
  • Search: Searching for feeds and articles is now simpler than ever and on macOS, it’s always available.
  • Reader Bar: You can now customise the reader bar size and choose from three sizes: Small, Regular and Large.
  • Finally: As always, an assortment of improvements and fixes.

New

Adding Feeds

Elytra's new Add Feed interface shown on the M1 iPad Pro and iPhone 12.

Elytra v2.3 introduces a new system for finding and adding feeds to your lists. You can explore some pre-defined topics or search for topics of your interest by prefixing the keyword with a # key.

Elytra's new Add Feed UI on iPhone 12 showing feed suggestions.

To directly explore feeds linked by a website, simply type in the website’s URL. If you have a feed URL, then you can directly use that.

Something that been asked for a long time is to directly add a feed to a folder when creating it. It’s now possible to do so and all your folders will be listed out. By default, None will be selected.

Core Sync

Syncing across all apps is now faster, more reliable and also automatically syncs in the background to keep all your devices in sync and ready to go. This lays a critical foundation for future releases.

The new sync system is written in Swift (version 5.4 for those who care) and is much more resilient, fault-tolerant and heavily tested compared to its previous iteration.

It also now uses a delta updates system so your devices only download the data they don’t already have. Multiple sync triggers can happen simultaneously on a single device of yours (say you added a feed, then marked all the items inside that feed as read which will trigger two events). This ensures your devices consume less power and consume less network bandwidth.

Two New Widget Types

Elytra's new Folders and Bloccs widgets running on ithe iPhone 12.

v2.3 brings two new Widgets: Folders and Bloccs. The Bloccs widget brings up to 6 of the latest unread articles from your feeds to your device’s homescreen, decorated by the articles’ cover images. The Folders’ widget enables to you select a folder of your choice and showcase up to 4 articles from that folder. I can’t wait to see how you have these setup on your devices.

Performance

I’ve spent all of March working through various modules in the app to optimise the performance. The Article Reader was the only component in the app that was optimised down to the last bit (to my best knowledge and technical capabilities). Everything else was just mish-mash. You should now notice improved performance in the app for just about any activity you’d perform in it.

Filters on macOS

The new filters UI in Elytra on macOS.

Filters have been available in Elytra since v1.0 so it was always weird that there was no UI for it on macOS. Now there is, it’s mac-assed and works exactly as you’d expect it to.

### New Subscriptions UI

Elytra's new subscriptions UI. The prices in the screenshot are placeholders.

I also took this opportunity to redesign the subscriptions interface. The new design is an indicator towards the next iteration of the design system for Elytra, it better and more clearly explains the advantages of each subscription type and enables you to quickly switch between the two offerings.

Mini Audio Player

The new mini audio player playing the Core Intution podcast's Episode 462

For a long time, I’ve used Elytra to notify me when new episodes are available for the podcasts I follow. In v2.3, I’ve built a mini-audio player into the app. It detects Podcast episodes and automatically updates its rendering state. This is in no way a replacement to a full-fledged Podcast app, but just a little something to get you a sneak-peak into that episode if you so desire.

Rich Media

Elytra now supports playing audio clips within the app.

I’ve made several improvements to the API and the apps to improve media playback. This fixes some Youtube videos not loading correctly. But most importantly, the apps now load, and enable playback of Movie trailers from the trailers.apple.com RSS Feeds.

Search results in Elytra now also match Article titles and author names.

The apps now feature global search enabling you to search for Feeds and Articles. You can also match for author names. In a future release, tokens will also be introduced to tokenise your search for a more precise hunt.

Search results in Elytra on macOS now also match Article titles and author names.

If you’re looking up an article and there are no feed suggestions for the app to provide, the app will suggest feeds from the articles it has found. So you can jump to the feed or the article.

Reader Bar Sizes

The two new reader bar sizes: The small size on the left and the large size on the right.

To ensure the app is accessible by everyone, Elytra has always supported Dynamic Type, Voice Over and the various navigation accessibility features that macOS and iOS provides. In March, a customer got in touch with a complaint about the reader bar and a potential solution. We worked on that solution and I am now happy to let you know that the reader bar now comes in three sizes: Small, Regular (default) and Large. You can toggle the size from Settings > Misc.

PS: This setting has no effect if you’re using the toolbar.

Improvements

  • Drastically improved performance and accuracy of batch marking articles as read. (In my testing, marking a batch of 2000 articles as read previously took over 8s, and now only takes 2s).

  • Counting unread articles is now literally 6 times faster. The app can now spend less time keeping these counters up to date and more time rendering articles.

  • Improved handling and logic for rotation on iPadOS. This also fixes the blank slate launch state of the app on iPads in portrait mode.

  • Sharing articles on macOS will now use the recommended approach instead of the workaround I was previously using. This will ensure a smoother experience across various macOS versions.

  • The macOS app will now correctly sync after waking up your mac from sleep.

Fixes

  • Fixed a critical and long standing issue where articles marked as read on one of your devices would not sync to your other devices.

  • Fixed a critical bug where the “Start Trial” button would have no effect or start the process and keep the button disabled preventing retries.

  • Fixed an issue where opening a Feed or a Folder and then opening the Unread list would reset the sorting preference to Unread – Latest First.

  • Fixed an issue with sync not working correctly upon a fresh signup.

  • Fixed an issue where the wrong state for the article reader would be setup: incorrectly showing next and previous articles to be available when only a single article was available in that list.

  • Fixed an crashing bug on iPadOS where the app would crash after backgrounding the app.

  • Fixed a bug in which HTML would show in the summary field.

  • Fixed a bug with Substack newsletters where the images in the posts would be really small (Substack converts the original URLs into their image proxy URLs for the Feeds which caused this issue, Elytra strips out this information and then loads the images).

  • Fixed a bug where custom feed names would not correctly sync across to your other devices.

  • The macOS app will no longer open duplicate windows. If it finds an existing window for the same activity, it’ll bring that window to the foreground.

  • Externally connected displays on iPads will now mirror the the iPad screen. This would previously display the app’s UI at native resolution with no scaling. A future release will correctly address this issue.

Designing Elytra for macOS Big Sur – Part 1

Big Sur has been the biggest change to macOS since I started using it back during the OS X 10.6 (Snow Leopard) days. We’ve gone from the “hyper aqua” to the subdued and flatter aqua look and finally into the iOS-esque Big Sur design language.

In part 1, we’ll go through the app’s interface from top to bottom, left to right. So as is the case, let’s begin with the toolbar.

Toolbars

In Big Sur, Apple has completely changed the toolbar, not only in terms of its visual design, but also how it behaves, its sizing, allowing content to flow under it (just like iOS’ Navigation Bars), monochrome icons and sticky sections.

macOS Big Sur - Photos.app in the foregroup, Mail.app in the background

The new toolbars in some contexts are even invisible. They are part of the content as seen in Photos.app.

Here’s a quick comparison between Elytra for macOS Catalina and macOS Big Sur.

Top: Elytra running on macOS Catalina. Bottom: Elytra running on macOS Big Sur

I’ve included fullscreen screenshots on purpose, because Big Sur really enables deferring all UI real-estate to the content if you so desire. In Elytra’s case, an app for reading written content, this was a default choice.

Big Sur also enables pinned or sticky sections for the toolbar, so each vertical column of the app has its own set of actions. While v2.1.3 (first version, odd, I know!) shipped with the toolbar items as you can see, they are definitely set to change in an upcoming release to bring more powerful features to the app.

With macOS taking care of so many things for me, Mac Catalyst became the obvious choice for Elytra right from the get go.

The Sidebar

Full height column, translucent materials, collapsible sections,searchbars, automatic light and dark states; I could keep going on. The new frameworks supplied by Apple to compose such sidebars have been the best thing since their Compositional Layouts framework. And the new sidebars rely on this Compositional Layouts framework to enable a lot of these things automatically.

They are however not without their faults. They do lack some features which native AppKit apps have but I’m sure they’ll all arrive in due time as Apple Engineers continue to reduce the gap between macOS and iOS, or I switch to using SwiftUI and everything renders natively per host OS.

Articles List

This was a tricky one to get right. Up until late October, this is how the Articles List looked
Elytra's original interface with incorrect styling for the Article's list

There are a few reasons why this is completely wrong on macOS.

  1. The list item completely ignores the new insets which native apps on Big Sur use.
  2. The list ignores the additional padding required by such lists.
  3. The list also ignores the inter-cell padding.

All of this is noted by Apple in the “What’s new in macOS” HIG document.

By using Apple’s supplied values, we get a list which is much more comfortable to read and glance at.

Elytra's UI with corrected styling for the Article's list

So even if you’re using Mac Catalyst to bring your iPadOS App to macOS, I urge you spend some time studying the HIG (and not just read it) so you’re familiar with what your users are going to expect from your app.

The Article Reader

This is what you’re here for. This is why I built Elytra. The article reader in Elytra renders all text using Apple’s TextKit framework, all images directly supplied to UIImageView subclasses, most videos directly supplied to the AVPlayerView, and all code rendered just like text.

Groups of consecutively appearing images are converted into horizontally scrolling galleries with page counters.

Customisation of the reader view by setting up your preferences for font-size, line-spacing, separate header and paragraph fonts.

It’s all there, it all works just as you have come to expect coming from the iOS and iPadOS apps. But it wasn’t as simple as enabling the magical “Optimise for Mac” option in Xcode.

To make sure things work correctly on both iOS and macOS, I had to redo a few bits of the rendering engine to make sure text renders sharp on modern Macs and renders exactly as one would expect it to.

Here’s how the Scale Interface to match iPad variant looked:

Elytra's UI with the Scale interface option enabled Elytra's UI with the Scale interface option enabled

Everything was tiny. Everything looked off. Nothing looked like it it deserved to be on macOS. When working on the macOS Catalina build, I used a small hack to scale all type by 1.3x and even that didn’t look all that great.

So to make sure everything is up to the mark and deserving of the Mac-assed Mac App title, I reworked a good chunk of the rendering engine which also ended up benefiting the iOS and iPadOS apps by improving the rendering performance.

My iPhone 12 first impressions article in Elytra on macOS Big Sur

I also took the opportunity to enable better rendering for CJK and Indic languages.


In part 1, we looked at the app from a distance, assessed it from left-to-right, went over each column and briefly discussed each section. In part 2, I hope to dig into some technical details of bringing an iPadOS App to macOS via Catalyst.

Elytra is now available for macOS Big Sur

Elytra is now available on the Mac App Store.

It’s finally happened. It took 3 years and I hope it was worth the wait.

Elytra running on a Macbook in Dark Mode

Elytra for macOS brings the same native rendering performance you have come to know and love on iOS and iPad OS.

All of this has been possible because of Apple’s Mac Catalyst system which has been significantly improved on Big Sur, since its debut on macOS Catalina.

Your subscription will carry forward to the macOS App as well, no separate purchase or subscription will be necessary. (You can also take this opportunity to take advantage of the special pricing I have going on for Diwali)

I’ll be sharing a deep-dive into the design decisions for Elytra, but for now, I hope you enjoy the release.

As always, Happy Reading!

PS: A small update for iOS and iPadOS has also been released, so be sure to grab that from the App Store as well. 

New Code Theme

As part of the v2.0 release cycle, I’ve been working on a macOS/UIKit inspired code theme. In this post, I’m sharing what I have come up with so far inviting feedback and suggestions for changes. 

The colours are platform specific, so they will be slightly different across iOS/iPadOS, macOS and the Web. Work on the web part is pending but it’ll look mostly similar to the macOS screenshots.

macOS

On macOS, the colours will respect platform specific accessibility features like enhanced contrast, and light & dark modes.

The new Elytra Code theme on macOS

All colours are taken directly from the system provided semantic colours with some alpha tweaks in places where it makes sense.

iOS

The story is similar on iOS just like macOS. System provided semantic colours are used throughout.

The new Elytra Code theme on macOS

Across the board, I quite like how this is rendering. It’s softer on the eyes too, and if you didn’t notice, the code blocks no longer use the Menlo typeface at a static 16pt. It’ll now scale dynamically to your font-preference, system sizing or custom, using the SF Monospaced typeface from Apple.

In a future update, I’ll look into embedding additional Monospaced fonts suited for viewing code (my current favourite being Fira Code).

I’ll share additional screenshots on Twitter as I go along tweaking and optimising the code.

Technical

So let’s get into the technical details of this for those of your interested.

Here is an excerpt of what the original css structure looked like.

.hljs {
	color:#333;
	background:#ffffff
}

.hljs-comment,.hljs-quote {
	color:#998;
	font-style:italic
}

.hljs-keyword,.hljs-selector-tag,.hljs-subst {
	color:#333;
	font-weight:bold
}

This is from the light theme of my CodeParser. This CSS file is imported by the Class, parsed and processed to convert those hex values into their respective UIColor counterparts and then used in Attributed Strings.

So to make this existing system use semantic system colours included making some trivial changes to my code base, starting with the CSS file which now looks like this:

.hljs {
	color:*labelColor;
	background:*systemBackgroundColor
}
.hljs-comment,.hljs-quote {
	color:*systemPinkColor#.75;
	font-style:italic
}
.hljs-keyword,.hljs-selector-tag,.hljs-subst {
	color:*labelColor;
	font-weight:bold
}

I’m now directly using the semantic colour names, prepending it with an asterisk to denote a semantic color name, and followed by a pound with the alpha component.

As you can imagine, parsing the above is pretty trivial, so is detecting if it should use the semantic name using -[UIColor performSelector] or the method from my HEX to UIColor category.

Once all of this is wired up, the information is assigned to ranges in the Attributed String the same way as it did before with no changes to that part of the code.

With this new system in place, I can use any of the semantic colours exposed by the host OS, of pure hex values or a combination of both in the same file which makes this solution very versatile and light weight.

Here’s a reference to Apple’s documentation regarding the various semantic colours and their respective RGB values in Dark and Light modes.

I’ll be publishing the iOS Beta including this change shortly to TestFlight. Do try it and send me your feedback. 

Elytra & Big Sur

It’s been some time since I posted an update here and since I was gathering some screenshots of my progress on the Mac Catalyst app, I thought I would share my progress here as well for everyone to check out.

Hello, Big Sur

As noted in my previous post (WWDC20 and Elytra), I mentioned I’d release two separate builds, one for Catalina and another for Big Sur. But looking at how much better the app is using new technologies released this year, the plans have changed a bit. There won’t be a Catalina build, not anytime soon anyways. However, here’s an early look at the work in progress app running on Big Sur:

Elytra running on Big Sur with an article open from the unreads section

Elytra running on Big Sur with Large Sidebar Icons enabled under the OS Preferences.

Elytra supports OS tinting and will use your preferred tint color from the OS preferences

Elytra on Big Sur also supports inline playback and Youtube support just like the iOS App.

Elytra on Big Sur will also bring Multiwindow support similar to the Web App for opening Articles in separate windows.

The app is probably only 50% done. There a lot of tweaks and adjustments that need to be precisely made so that the app feels native to macOS Big Sur. It is still missing critical features like Importing & Exporting OPML files and managing your Subscriptions.

So I’d definitely tag this as Alpha for now. Once I determine it has all the necessary features from its iOS and Web counterparts, I’ll tag a beta pipeline and figure out a way to introduce it to testers. So if you’re interested in helping me test the macOS App, have Big Sur running on one of your computers, send me DM on Twitter or email me. Also send in any feedback or features you’d like to see in the macOS app.

Happy Reading!