It’s finally happened. It took 3 years and I hope it was worth the wait.
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.
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:
If you have any questions regarding the promotional pricing or how future cycles will be billed, please feel free to email me at email@example.com and I’ll be happy to answer them.
I wish you all a very Happy Diwali, happy reading!
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.
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.
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.
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.
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.
Improved Swift & SwiftUI syntax highlighting in code blocks.
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!)
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).
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.
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.
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.
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.
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.
Elytra 2.0.2 (38) is now available on the App Store. This build includes some critical fixes and an update is recommended.
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.
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.
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
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
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.
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
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.
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.
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:
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.
On macOS, the colours will respect platform specific accessibility features like enhanced contrast, and light & dark modes.
All colours are taken directly from the system provided semantic colours with some alpha tweaks in places where it makes sense.
The story is similar on iOS just like macOS. System provided semantic colours are used throughout.
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.
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.
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:
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.