Elytra Blog

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

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. 

Diwali 2020 Discounted Pricing

This year for Diwali 2020, a few of us developers have decided to offer discounted pricing in our apps. Elytra is a part of that list and starting today (30th Oct, 2020) Elytra’s Monthly and Yearly pricing is discounted up to the 27th of November. 

The Monthly subscription is currently discounted to $0.49 and the yearly subscription to $4.99 during the offer period. 

If you’re on the 14-Day trial, now is a perfect time to upgrade to the subscription. 

However, this is not the new pricing. The pricing is only valid for your first (or upcoming) renewal cycle. If you are already subscribed and your renewal window falls between these two dates, you will be charged the discounted pricing. 

In the following renewal cycle, you will be charged the regular amount. Now this whole thing might sound a little confusing so here’s a quick chart to explain things visually using the Monthly subscription as an example: 

Diwali 2020 Promotional Pricing Chart

If you have any questions regarding the promotional pricing or how future cycles will be billed, please feel free to email me at support@elytra.app and I’ll be happy to answer them.

I wish you all a very Happy Diwali, happy reading!

Elytra 2.1.0 is now available

Elytra running on the iPhone 12 - Mutliple Screens

Version 2.1 brings a lot of stability and Quality of Life improvements to Elytra before the final Winter release of this year. This also brings the iOS App up to parity with its macOS app to be released soon.

This build also brings support the the newly released iPhone 12 lineup as well as the iPad Air 4th Gen.

Link: https://apps.apple.com/us/app/elytra/id1433266971

New Font: Atkinson Hyperlegible

Atkinson Hyperlegible font displayed on the iPad Pro Gen 4 and iPhone 12

Designed by the Braille Institute of America, and offered for free, Atkinson Hyperlegible is a great new font choice for greater visibility and legibility for low vision readers. Paired with an Accessibility focused app like Elytra, I hope this improves the reading experience for you. 

You can read more about the Atkinson Hyperlegible font here

Improvements

  • If you have a URL copied, the app will automatically detect it when attempting to add a new feed.

  •  Tapping an article now dismisses the sidebar on iPads in portrait mode.
  • The sidebar items are now correctly highlighted. They no longer use the tint colour when selected.

  • Search in the sidebar now uses Alpha sorting like the rest of the view.

  • Multiple improvements throughout the app for Voice Control (VC) and Voice Over (VO) a11y options.

    • The app now correctly shows titles for icon only buttons when VC is activated.
    • The app now correctly updates states for icon only buttons when VC is activated.
    • Simplified Article labels for VC to make it easier to select articles. They will now be presented as “Article 1”, “Article 2” and so on… Previously, the article title’s was used which could be difficult to command with long titles.
    • VO will now read the article index followed by its title.
  • Improves formatting for CJK Text. CJK text should no longer appear as one big blob of text. It may still happen if the source provides it that way.

  • Unreads Widget intents now work as expected. You can now toggle between loading favicons and cover images in the widgets.

  • The article viewer will now draw horizontal rules. (<hr /> element equivalent.)

  • During first launch, if your account already has a subscription, the trial interface is no longer shown. You are directly taken to the Feeds Interface.

  • Added support for dragging and dropping articles into the Unread or Bookmark rows in the Sidebar to perform respective actions.

  • Added support for dragging feeds between folders or outside folders.

  • Added support for dragging feeds to external applications. This action will drag with the RSS Feed URL. (iPadOS only)

  • Updated images for GIF loading and playback controls.

  • Tapping a gallery image now opens it in full view.

Fixes

  • Fixed a rare bug that would prevent the bookmarks counter from updating when adding or removing bookmarks.

  • Fixed an issue where unread counters would not update when you have 0 unread articles.

  • Fixed loading of GIF favicons.
  • Removing a bookmark while in the bookmarks feed now removes the article after a small delay.

  • Fixed a rare crashing bug that would occur when initiating a Refresh in the Feeds Interface. (Thank you for Lee.)

  • Fixed an issue with the Today Count always reporting as 1.

  • Fixed rotation behaviour on iPads.

  • Fixed an issue where the unread/today counts would change when reading an article from a feed you’re not subscribed to.

  • Fixed an issue where the selected feed would remain selected after opening recommendations.

  • Fixed an issue with the Unreads widget not updating in a timely manner.

  • Fixed a background crash that would occur when syncing and downloading new data.

  • The app now saves restoration data properly so launching the app from a saved state is now faster.

  • Fixed an issue where images in the article viewer would fail to load (network issues, invalid URL or for whatever other reason) and would show a large placeholder image.

  • Twitter apps selection now works again when tapping tweets.

  • Matched the keyboard navigation to the macOS App.

  • Images in Widgets should now load reliably. I’ve discarded the older method of loading images in favour of a more standard approach as recommended by Apple Engineering.

  • Fixed the app using a semi-bold font for headings on iOS 14.0.1 and higher.

  • Image Loading options now correctly apply to favicons inside the Articles List Interface.

  • Title Font preference now correctly applies to headings inside the article as well.

Elytra 2.0.3 is now available

Hot off the tracks of v2.0.2 comes v2.0.3 with a couple of more fixes. All known issues in Elytra’s v2 are now fixed and patched. If any additional issues are reported, those will be addressed in v2.1.0 unless they prevent the app from functioning.

Improvements

Improved Swift and SwiftUI Syntax Highlighting
Improved Swift and SwiftUI Syntax Highlighting

Improved Swift & SwiftUI syntax highlighting in code blocks.

Fixes

  • Fixed an issue where selecting the “Only load on Wi-Fi” image bandwidth setting did not persist correctly.

  • Fixed an issue where selecting the “Low Res” image resolution setting did not persist correctly.

  • Fixed a bug where toggling dark mode (or already present) did not correctly set the colours for the filters’ input.

  • Fixed an issue where the Image Viewer would not display the image at full resolution once it is loaded.

  • Fixed an issue where the OPML Interface would launch with the base tint on the button backgrounds and then update to your preferred tint.

  • Fixed an issue where semantic colours would not load correctly on iOS 14.0.1 for your selected tint colour.

  • Fixed a crash that would occur when bootstrapping the local cache database.

  • Fixed a crash that would occur when saving restoration data.

  • Fixed an issue where images in articles would be scaled incorrectly when using the image proxy.

  • Fixed a bug where tapping on the Attributions item in the Settings interface would crash the app.

  • Fixed a crash that would occur when decoding certain HTML encodings. (16-bit decoding is hard, y’all!)

Link: https://apps.apple.com/us/app/elytra/id1433266971

New Elytra Landing Page

Elytra’s first website was made in the fall of 2017. It was extremely basic, gave the requiste information to the reader and a link to sign up for the TestFlight beta ( TestFlight Links were not a thing back then).

With the release of v1.0, I updated to an improved layout, more details and screenshots. I kept updating the screenshots up to the release of v1.4 and then completely forgot about it (this did lead to some confusion).

New Website

With the release of v2.0, it was time to update it, however, with the rushed release of iOS 14, I didn’t get enough time to complete it.

Today, I just launched the updated website. Check it out here.

Elytra's New Landing Page - Hero
Elytra's New Landing Page - Design

I have simplified the website by much, reduced as many interaction points as possible to ensure the reader can quickly get an idea of the app, and proceed to viewing further details on the App Store.

For the main navigation in the header, I used a simple <details> block with <nav> as its detail block. Accessible, simple, and known interaction.

Almost all images are optimised for retina screens as well as for various breakpoints at varying sizes.

One critical section I thought I must add was about Privacy.

Elytra's New Landing Page - Privacy

With Apple’s strong focus on Privacy, and a wonderful marketing page to go with it, I thought it would only compliment their message and my committment towards ensuring the same as a 3rd party developer on their platform.

Additional Enhancements

Some additional enhancements I’d like to make sooner than later:

  • I would like to make some tweaks to the font sizes of headers based on the device width metric, but I found it not to be a blocker, and release it as is.

  • Add sRGB and P3 specific images to the sources. When viewing the website on my Macbook Pro, the colours are evidently faded. Since I do have source images in the P3 format, I should be able easily do this.

  • Additional hints for a11y.

Noticeably Missing

Dark/Light mode. The previous website support this, however, for this time around I decided to go with a static colour scheme to suite the various bands I am using on the page as decorative backgrounds for the device images.

This darker colour scheme also strongly compliments the beautiful imagery one experiences when using Elytra with various Photography and Art & Design blogs.

If you have any suggestions for improvements or noticed a bug, do let me know.

As always, happy reading.

Elytra 2.0.2 is now available

Elytra 2.0.2 (38) is now available on the App Store. This build includes some critical fixes and an update is recommended.

Fixes

  • Fixes a rotation bug on iPads.

  • Fixes an article scaling bug on iPads when toggling the sidebar.

  • Changing the selected tint colour now applies correctly throughout the app.

  • Fixed the app not loading the selected tint colour on launch.

  • Fixed an issue when searching for a feed by title or keywords would dismiss the modal.

  • Fixed an issue with pagination when searching for feeds in the Add New Feed interface.

  • Fixed an issue where the App would show a “No Subscription Found” error after resetting or deactivating your account.

  • Fixed an issue where an interrupted on-boarding would prevent you from using the app without purchasing a subscription. This now ensures you are always able to start your free trial if your onboarding was interrupted.

  • If you’re currently enrolled in the Free Trial, the subscriptions interface will now correctly indicate that.

  • Some blog engines convert emojis to an image with the emoji as the alt text on the image. Elytra will now skip rendering the image and appropriately render the emoji used by the author in the same context as the original blog post. This prevents the paragraph breaking on to the next line to accommodate the custom emoji image the blog engine inserts.

  • Fixes an issue with sorting of Feeds. Feeds which are not inside any folder are now correctly sorted in ascending alphabetical order. Thank you Jason, for pointing this out.

  • iPads in Portrait mode now correctly hide the sidebar upon tapping an article.

Link: https://apps.apple.com/us/app/elytra/id1433266971

2.0.1 is now available. Update Recommended.

Version 2.0.1 (31) should now be processing for the App Store and should become available shortly. I run into a small hiccup with the Review Process causing a small delay with the release.

This release mostly contains fixes for a few crashing bugs and it’s highly recommended, if you’re running iOS 14 now, that you update to this release.

Fixes

  • Various fixes for adding new feeds.

  • Fixed applying selected tint colours globally.

  • Deleting a feed (which is inside a folder) no longer collapses the folder.

  • Fixes a crash on opening the Notifications Interface if you have 0 subscriptions.

  • Fixes a crash on adding a feed from the Share Extension

There are some minor issues I am aware of. I’ll post another release next week to address those.

In the mean time, happy reading.

Link: https://apps.apple.com/us/app/elytra/id1433266971

Elytra Fall 2020 Update

Elytra’s Fall 2020 update is finally here alongside the release of iOS 14. This is v2.0 and will be the first build to only support iOS 14. If you’re still on iOS 13 and for whatever reason you won’t be updating to iOS 14 soon, rest assured, v1.8 will continue to function as long as you use it.

You can download the update from the App Store

Upcoming Devices

Elytra running on 4th Generation iPad Air

Apple will be releasing new hardware later in October starting with the recently announced new iPad Air 4th Generation devices. Elytra will be ready on day-1 when these devices reach you with no new updates required.

iOS 14 UI

Elytra running on the iPad Pro and on the iPhone 11 Pro showing new User Interface elements from iOS 14

Throughout the app, I’ve made changes to the app’s interface to closely follow new updates Apple has released this year, including menus from buttons (for the sorting option), new Sidebar Layout style on the iPad, Triple Column Layout on the iPad and new List styles.

New Code Theme

The new code theme in Elytra 2.0

Also in this release, I’ve included a new Code theme which uses the semantic colours from iOS, auto-updates for dark mode without reloading the entire stack and, may I say so myself, looks beautiful. You can read more about in this blog post I wrote earlier.

Widgets

How could an iOS 14 release build be complete without new Widgets! I’ve personally been looking forward to using Widgets and making them was fun too! Elytra 2.0 ships with 2 different widgets:

  • Counters Widget: Shows the latest counts of articles from Unread, Today and Bookmarks sections of the app. This widget is only available in the small size.

  • Unread: Shows the latest articles from the unread section. The medium size widget shows 2 articles and the large size widget will show 4 articles. This widget will prioritize articles with cover images.

Full Change Log

What’s New

  • All new triple column support using Apple’s own UI Framework.

  • An all new Sidebar Interface. This uses Apple’s latest UI Framework for displaying your folders and feeds.

  • iOS 14 Widgets support. Contains a Counters (Small) Widget and an Unread Articles (medium and large) widget.

  • Implements Trailing Swipe actions on Article List Items.

  • Directional marking as read. Long press on an article in Unread, Today or a Feed to see these options.

  • New Code Theme for pre-formatted code blocks.

  • The Add Feed interface now shows Recommendations for its default state to help improve finding and adding new feeds.

Improvements

  • Unread counts update more reliably as you read through your content.

  • Improved underlying code for managing the initial state of the app.

  • Force touch and tapping on urls now works reliably.

  • Updated Feed Sorting options to use a menu interface instead of an options controller.

  • Improved styling for inline code blocks.

  • New Folder/Edit Folder interface now uses a basic interface which is faster to use IMO.

Fixes

  • Prevents an issue causing the app to sync data twice upon successfully launching.

  • Fixes an issue where marking currently loaded articles as read in the Unread view would prevent new articles from loading.

  • If you have setup a custom title for a Feed, the custom title will now show up correctly for the empty state.

  • Fixed a crash caused when trying to share a Feed’s URL or its website’s URL.

  • Fixed an issue where reading an article from today would not decrement the “Unread Today” counter.

  • Fixes showing cover images inside the Article Reader.

  • Fixed I/O View not appearing when importing / exporting OPML files.

  • Fixed some pre-formatted quotes appearing as single-line code blocks.

  • Fixed code blocks appearing out of order. A year old bug finally fixed!

This update also includes miscellaneous improvements and fixes under the hood to improve the general stability of the app.

As recently put by one of Elytra’s admirers on twitter:

Read more, distract less. #letsgo

Hardik Parmar

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.