Version 1.0.0 of Telescope, Seneca College’s open-source blog feed aggregator, written by students for students, has now been released! Check it out at https://telescope.cdot.systems/!
Before I reflect on all on the blood, sweat and tears that have been poured into this project since Fall 2019, I would like to quickly follow up on my last blog post, detailing the continuation of the prestissimo development undertaken during our final pre-release sprint.
My Feeds: functionally ready!
During our final sprint, I decided to continue dedicating all of my effort (detailed in my last blog post) to getting the My Feeds page production-ready.
Starting back where we last left off, I tackled two “5 min fix” issues:

Knowing the My Feeds page like the back of my hand at this point, the fix to Issue #976 ended up the simplest “5 min fix” I have thus far contributed to Telescope:

myfeeds.js
for a better user experienceThe second of the two My Feeds-related “5 min fixes” I took care of ended up not actually being directly related to the My Feeds page:


Unbeknownst to me at the time, one of the additional fixes I added to it (fixing an ESLint error) ended up resolving an additional issue: Eslint issue in Banner.jsx (#901).
With the two low-hanging fruit issues out of the way, I turned my attention to a real problem that was seriously inhibiting further development of the My Feeds page:

At first, we did not know why it was taking tens of seconds to input a single character into either of the My Feeds page’s two form fields. After some speculation and investigation, we determined that this was occurring because typing into either of the input fields was triggering a rerender of the entire page (including the massive existing feeds list).
(Technical details: typing a character into either of the aforementioned controls triggers a change handler, which updates the component state, which triggers a re-render.)
This was no bueno—I needed to find some way of preventing the existing feeds list component from re-rendering every time the state changes. However, I also needed to ensure that the list would re-render when we want it to: after adding or deleting a new feed.
The solution I came upon is known as memoization. By wrapping the existing feeds list in the React.memo higher-order component (HOC), I could control exactly when to re-render it:

As can be seen in the above code snippet, I wrote a custom comparator function that determines when the memoized component should be re-rendered (when areEqual(...)
returns false). As a result, the existing feed list is only re-rendered when a key/value pair (i.e. a feed) is added to or deleted from its feedHash
prop.
As a result of getting a handle when the existing feed list is rerender, I was able to ensure that this list was properly updated when a new feed is added or when an existing feed is deleted (which ended up consequently resolving two additional issues: #979 and #909).
I aggregated all of the aforementioned bugfixes (plus a few more) within my final My Feeds pre-release PR:

(As a result of my work on this specific issue, I gained a ton of invaluable insight into how React (and the useEffect
React Hook) decide when to re-render a component.)
Connecting the final My Feeds puzzle piece 🧩
With the front-end functionality of the My Feeds page completed, there remained only one matter of end-to-end connectivity remaining: ensuring that blog posts from the feeds added via the My Feeds page were displayed on Telescope:

Thanks to Telescope’s fantastic set of back-end tools, resolving this issue was as simple as making a small additional to the proper area of the back-end:

As can be seen in the above code snippet, the required changes, here, involved ensuring that Telescope was processing all of the feeds added to Redis (i.e. Feed.all()
) in addition to those pulled from the CDOT Wiki’s “Planet CDOT Feed List“.
I included these changes within my final PR of the sprint: #1015.
Peering back in time with Telescope 🌌
In numbers
- 56+ resolved issues and pull requests ✔️
- 31+ commits merged to master ✔️
- 9,000+ words written across 9+ blog posts ✔️
- 4 Docker environment setups (via
Ubuntu virtual machine❌,Docker Toolbox❌,Docker Desktop (Hyper-V)❌, Docker Desktop Edge with WSL-2 backend ✔️) - 10 Telescope dev team members collaborated closely with ✔️
- 2 major personal goals met (including one revelation)
- 12 major aspects of Telescope directly contributed to or interacted with:
- Opening and facilitating discussion within Telescope’s “oldest (and dearest!) issue” ✔️
- Peer-editing our environment setup project’s documentation (via review of PRs #398 and #948) ✔️
- Numerous tests for our back-end’s Jest unit testing suites, including for its prototypical feed-invalidation functionality ✔️
- Multiple aspects of our Bull queue powered feed processing pipeline, including dealing with rate limitation during feed fetching ✔️
- Various endpoints of our RESTful Web API, including that for OPML feed sharing ✔️
- Multiple components of our GatsbyJS front-end, including introducing Material-UI to Telescope ✔️
- Our (server-side) authentication via GraphQL and passport.js ✔️
- Our back-end’s logging, via establishing a format for human-friendly logger messages ✔️
- Our continuous-integration testing (via establishing a standard for supplying environment variables default values)✔️
- Our single-sign-on functionality (helping it land via a particularly-tricky review) ✔️
- Telescope’s dependencies and plugins, including the addition of
eslint-plugin-react-hooks
- Telescope’s
release-it
workflow, via performing Telescope’s v.0.8 GitHub Release (and helping identify a bug with it) ✔️
I would like to extend a huge thank-you to all of Telescope’s ~60 contributors, but especially to its core dev team: @humphd, @agarcia-caicedo, @c3ho, @cindyledev, @Grommers00, @lozinska, @manekenpix, @miggs125, @raygervais and @yatsenko-julia. Each of these devs have likewise documented their own journeys with Telescope, and I strongly recommend checking out their own blogs!
This is not a goodbye. There is always more work to be done in open-source development, and I welcome you to join us!