Elytra Blog

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

Elytra Summer 2021 Public Beta

You’ve been waiting for this, haven’t you?

The Summer 2021 update isn’t quite ready yet, but I’m happy to announce the Public Beta details.

You can join the TestFlight Public Beta list here.

You should also consider joining the Slack Group for sharing feedback, screenshots, videos and the list. Head over the #iOS channel there.

If you don’t prefer Slack, the support email is always open.

I won’t be sharing the change log here. It’s available on the TestFlight log for now. You should go through it carefully before installing the new beta.

This brings the app back up to parity with v2.2.3 albeit with two features currently disabled. I will commence work on the new features and widgets later this week. 

I look forward to your feedback. Cheers.

Elytra Winter 2020 Update

The Winter 2020 update is finally ready in 2021! This is the first release of Elytra which brings local sync, local notifications and a lot of performance and stability improvements to the apps.

Similar to Elytra v2 and v2.1, this is an iOS 14 only release. The latest supported version for iOS 13 is v1.8 and will be deprecated soon.

You can download the update from the App Store. If you feel generous and have a couple of minutes, please leave a review on the App Store. It makes a huge difference for me. Thank you in advance.

Local Sync

Elytra v2.2 running on Macbook Air, iPhone XS and iPad Air This release brings Local Sync to the apps. Local Sync caches all articles across all your feeds (just like other RSS Feed Reader Apps). This is not a “new” technique. Feed Reader apps have been doing this for as long as I can remember. Elytra now uses the same technique by leveraging its APIs to make the entire process a lot faster!

Elytra does not have to check every single feed if it has new updates. It uses a single API to check if updates are present, and if they are, sync them to your devices.

Full Change Log

New

  • Local Sync. All feeds are now synced to your device locally, so you can continue reading even when your device is offline.
  • Added a new “Title View” to individual feeds. Open a feed and tap on its title. This shows the Feed Info and two preferences at the moment: Push/Local Notifications & Safari Reader Mode. These are per feed settings. This is very similar to the design and functionality from NetNewsWire, is directly inspired by it, but with a minor difference: the layout and copy denotes which feeds support Push Notifications, while the others supporting Local Notifications.
  • Push Notifications Request Form. If you already have push notifications enabled, you won’t see this. This is per device.
  • Added support for background push notifications to keep all your devices in sync without needing manual refreshing.
  • Push Notifications for new articles now download and cache the article for immediate use.

Improvements

  • Tapping on a folder now opens the folder’s feed.
  • Tapping on the disclosure icon on a folder now toggles its expanded state.
  • Filtering is now stricter. It’ll match “sponsor” but will not match “sponsored”.
  • Added Feeds to the iOS Search Index. You can now directly open feeds by their names (or custom names if you have one set).

Fixes

  • Fixed the tint colour for the blog name when opening a micro-blog article.
  • Fixed adding feed by URL where the feed presents multiple options.
  • Fixed an issue when searching by title for 3-letter sites like CNN or BBC.
  • Fixed articles not loading for certain feeds.
  • Fixed Today View not updating when opened after an app launch.
  • Fixed an issue with the iPadOS app showing different widths for the columns in different orientations or environments (split view).
  • Fixed an issue with the apps not correctly download bookmarks from the API.
  • Fixed an issue where toggling folders in the sidebar interface would show empty folders.
  • Fixed an issue with certain CJK paragraph blocks rendering incorrectly when certain linebreak characters are used in the paragraph text.
  • Fixed an issue with filters incorrectly hiding articles when matching against CJK based filters.
  • Fixed an issue with line-heights in the articles list for multi-lined article titles with favicons.
  • Fixed an issue where the “no articles” label would appear over the articles.
  • Fixed an issue for adding Streaming Video Channel feeds. They recently changed their format which was causing issues.
  • Fixed a crash when writing the widgets data to disk when the app has just been sent to the background.
  • Fixed Navigation Bar buttons not appearing in some contexts.

Thank you for reading.

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!