Hello again!
Hi, this is me — Ilya! Yes, I haven’t been writing a lot during the past year, but here I am again.
What happened during the last year?
Well, you might have heard about a tiny incident called the World Pandemic and COVID-19, and Canada treats it very seriously — so there was a lot of “getting used to the new lifestyle locked inside of your house”.
But overall, here is a shortlist of the most interesting events in the last 12 months:
- I finished the 6th semester of Seneca’s BSD program;
- The COVID-19 Lockdown started, and all of us got very happy at first…
- … and really bored and trying to get used to the new way of living some time after;
- I got hired for a Co-op at TD Bank Personal Banking Quality Engineering — Metrics Initiative (I might be posting a little bit of what I did there later);
- “Among Us” literally exploded after 2 years of being released;
- I enrolled in the 8th semester of the BSD program (yes, 8th, not 7th, I know it is weird, but this is the way for me to be able to graduate by the end of this year);
- And, probably the most interesting one — I am back at the Telescope project.
Telescope
As you might recall from my previous posts, I was a part of the team that gave a start to the Telescope Project for Seneca Open Source Development back in 2019. And our baby grows extremely fast! There are so many things going on at Telescope right now that I am just not able to describe everything that happened there during the last year.
As people who work on it come and go, the goals of Telescope change. Last semester the group of students working on it were working hard to build a new cool Front-end using Gatsby — and this term we were so happy to get rid of it and switch to our Next.js version of Front-end. This doesn’t mean that we don’t appreciate the work of the previous term students — no, they did a great job, but the reason we decided to switch was that Gatsby is just built for other purposes, and we had a lot of problems supporting it.
By the way, I will be posting about how I contributed to switching the Telescope Front-End from Gatsby to Next.js during the next week — so stay tuned!
Last week’s coding adventures
This week started for me with a Triage 1.8 meeting — and I was leading it. We went through all of the PRs in the Telescope repository and discussed a significant number of issues to be done for the 1.8 release — it was productive. We recently switched to the Next.js Front-End, and now we have 2 major milestones regarding the Front-End: UI 2.0 and Dark Mode.
At first, Dark Mode was my priority, but as I realized a bit later, it will be easier to switch to a new UI first, and then fully implement the Dark Mode feature in our new UI.
As this week was dedicated to midterms, there was not a lot of room for development. At the same time, I was able to file an issue about the Search page height, review a brilliant PR by Huy Nguyen that was closing it with some changes to the UI, and got to my coding work.
Contributors Card
Thanks to Chris Pinkney, we finally have a styled About page. At the same time, adding MDX to Telescope caused a couple of bugs that needed to be fixed. One of them — the styling of the GitHub Contributors card.
MDX is a powerful tool that lets you use markdown to write content for your web-pages. As Chris was the one who added it to Telescope — I will let him tell you more about it here.
The bug was actually caused by two things: MDX and the new colour palette, so the component was referring to the wrong component. Fixing colours was easy, however, then I realized that colours are still not correct. Why?
When using MDX to render our About page, we added the About footer inside the MDXPageBase.tsx — so MDX is now the parent of our About footer, where the GitHub Contributors Card resides, and MDX styling controls the text colour of the Contributors Card as well. This aspect should be looked into but for now, I just changed the colours of the MDX Page Base so both About contents and About Footer look good and are readable.
Broken Production
Well, here we get to our most interesting part of the week.
After getting rid of Gatsby and switching our main Front-End to Next.js, we found out that if we went directly to /search or /about pages directly, without going to the index page first, we would get a 404 error and infinite redirects. At the same time, when working with the development server, there was no such issue — it was only in production.
I decided to get on this issue, and our team initially thought that it was Nginx that needed to be rewritten to work with Next.js.
To be completely honest with you, I have no experience with Nginx whatsoever, and after reading through the docs and not having any clue where to start fixing this bug, I realized that I needed some help.
With this, I contacted The Father of Telescope — David Humphrey. Together we were able to resolve this bug.
What was it about?
So to start with, Nginx was not guilty. Well, it was, but it was just doing its job.
We started by recreating this bug on my machine. To do this, we had to build Next.js Front-End npm run build and serve it via npx http-server out,out is a directory that we have our build in. After going to localhost:8080/search and seeing that we get the same behaviour as in production, we were able to look deeper into it.
Apparently, Nginx was not an issue whatsoever. When we did a request to /search and /about, NGINX was not able to find those, because, in the static (built) version of the frontend that NGINX had, we have /search.js and /about.js, not /search/index.js and /about/index.js.
So NGINX was following this instruction: try_files $uri $uri/ @proxy; and, after not being able to find the needed pages, sent the request to the Backend. The Backend replied with an error handler, and because the Next.js app was not running (nobody started it yet) - the /error page request went back to Backend, and again, and again, and again.
To fix that, we added a single line of code that changed everything (This is probably my smallest fix that had so much significance).
In our next.config.js file we added this line: trailingSlash: true. What it did is it built our front-end in a way that every page of it has its own folder now, so instead of having /search.js we now have /search/index.js.
This way, when receiving a request for one of those pages, the Back-End will be able to call to one of the index.js files and actually render the Next.js Front-End, so it can handle any further requests to it and not cause infinite redirects.
That’s all for today, folks!
As I said before, I am working on the 3-part long read that will tell you about how I contributed to the Next.js Front-end for Telescope — so stay tuned!
Telescope Page: https://telescope.cdot.systems/
Telescope GitHub — We welcome all contributors! — https://github.com/Seneca-CDOT/telescope
My GitHub: https://github.com/izhuravlev
Chris: https://github.com/chrispinkney
David: https://github.com/humphd
Pst-pst
We at Telescope wanted to do a little rebranding and are working on merch — so I will definitely share some news about it soon!
