DEV Community: dbelokon

Getting a little bit technical!

dbelokon — Sat, 23 Apr 2022 17:21:35 +0000

After expressing my feelings about the OSD700 course, and all of the experiences that I went through this term, I thought, "what a good way to end the term..." But then I remembered that I have to speak about what I managed to get in for release 3.0!

So, I have one PR that took a while, despite being a single line change, and I would like to go into extreme detail, because it ends up in a really interesting lesson for other people to learn.

Flickering stars

So, back in release 2.9, I developed a simple "star field", which is a simple animation showing the GitHub contributors as profile pictures. I got the initial code and idea thanks to the Coding Train :D

One weird quirk that the star field had is that the profile pictures would "flicker". For some reason, a picture would get small, then appear super big, and then get small again, acting like normal. It is somewhat difficult to describe, but this would give a flickering effect that was very annoying and somewhat horrible to look at...

Adventuring into the solution

We did what a responsible developer would do: file an issue and leave it for later :)

After a while, the issue was picked up by @jerryhue. He mentioned something about rewriting the math logic so that it would fix the flickering issue.

I wasn't super sure what that would mean, because the logic itself was fine, it was just a weird flickering that was happening. I thought to myself, "how is that related to the flickering?"

After a loooooong while, the team decided to assign me the issue in a meeting. After the meeting ended, I asked @jerryhue why he couldn't solve it. He told me that it was difficult for him to rewrite the math logic since he was struggling to think of an easier approach to do the star field simulation.

Rewriting the solution or fixing the current one?

I wanted to know why he was so obssesed on rewriting the logic. He thought that the current logic was fine, but that it could be improved. One reason for this improvement is to make the stars a little more "believable", and the zoom effect would look better.

I understood his reasons, so I decided to improve the code to achieve something like that.

Of course, I didn't manage to do much...

I was back at square one. I was feeling frustrated. "Why I cannot solve this?", "why is this fix so difficult to happen?" I was almost going to give up and give it to someone else, however, I decided to try one last time.

If I was going to debug it properly, I wanted to write it in the p5js debugger, since I just wanted to focus on that specific part, and I didn't want to wait for Nextjs to compile every time I made a small change.

When I was trying it out, I didn't want to include the images at first, because I had to make an array of images urls that p5.js and I was feeling a little lazy, so I just went with an array of circles that will be drawn on the screen.

The only change I did was the circles being drawn instead of GitHub profile images, everything in the code was the same, and to my surprise, the flickering stopped.

I tried to understand the situation: how come the flickering occurs only with images and not with regular circles? At that moment, I decided to load a single image that could be reused for several stars and understand why this was the case. As expected, the flickering started to happen when I drew images.

I was utterly confused, since the behaviour of an image was clearly different of that from a circle. So, now that I knew that it would only happen with images only, I had to understand when that flicker would occur.

I wrote some code to make note of the values, I noticed something very consistent: the flickering wouldn't start at the end of a star reaching the maximum level, but right at the very start, when the size of star was 0.

When I thought about this, I was still confused, why at that moment? To answer some of my questions I went to the documentation to read upon the behaviour of the image function, the function that draws images on a canvas. Nothing much was mentioned when the width and height of an image was 0.

Since nothing was documented, I said to myself, "it wouldn't hurt to try in the live examples available", and so I did. I wrote the size of the image to be 0, and all my doubts started to disappear. If you try to write an image to a canva with dimensions 0, it would use the original dimensions of the loaded image!

So, that meant, if I wanted to avoid the flickering, I had to stop making the size to be zero, and instead to be something somewhat close enough. This line came out as a result:

this.z = p5.random(p5.width * 0.1, p5.width * 0.95);

Instead of getting a value that might be zero, I will instead a value that is never zero, and thus, get rid of the flickering once and for all!

Conclusion to this whole adventure

To be honest, this helped to learn a huge lesson. Sometimes it is harder to create a solution with the tools that you have rather than create your own tools to create your solution, however, at the same time, it is valuable to not have to create anything from scratch or rewrite everything. Even though it would have been nice to rewrite the math logic so that it looks better, I prefer this solution much better!

OSD600 + 700, i love you

dbelokon — Fri, 22 Apr 2022 01:44:17 +0000

Thoughts about OSD600 and OSD700:

OSD600 and OSD700 are AMAZING!!!

Out of all the courses that I have taken, I think that the ones that taught me the most about real life developer work experience, were OSD600 and OSD700.

MeaningFULL

YES, some days I really felt like giving up because I couldn't land a PR on time, I was not in a mood to write a blog, I didn't know what I was doing with git, I had no idea how to implement something, or debug something. It was frustrating. But honestly, everything I was doing was a contribution to a real open source project. It felt like each PR had a meaning. It wasn't just a stupid meaningless assignment. The features and the bug fixes were all useful to the project. It was not just a zip file of a visual studio solution. IT IS THE ACTUAL FEATURE IMPLEMENTATION AND BUG FIX.

Respect + How to Be a True Developer

What's also good about this course is that everyone respects your hard work. We all know how hard we all work and we don't judge or neglect anyone's effort. We review, we help implement, we discuss, we sheriff, we encourage. Even the people that aren't close to you, they still help you. I didn't know people at college can be like that. Because from my experience, no one wants to help. Everyone is just busy with their business. Feels like we live in a cold world sometimes. But OSD600 and OSD700 are making me feel like this world has still some hope hahaha. Really. It makes me think that people at work and school can be like a family, a supportive community, in a way, too. This alone, is what makes these two courses feel like a coop like experience + it teaches you how to be a developer and help other developers.

Freedom, not Slavery

You get to decide what to work on (what feature, technology, development area, etc.). And no one expects you to know how to implement something from scratch. You can start with 0 knowledge and make a draft PR. And people are going to support you from day 1. If you get stuck, they gonna unstuck you. You can freely break stuff and try stuff. Just fix it afterwards :) or someone can jump on a call with you and work on it together.

Also, there are other contributors, like Seneca College alumni, PROFESSOR, and other experienced developers that you can work together with. This is the only course that has this cool side to it:DDDD Feels like you are in the same team as your professor and many other talented people. It is not just a school stuff kinda vibe.

Furthermore,

I believe that everything comes from a family or people that surround you. And I think that it is so true when it comes to this course. Everyone is super passionate about what they are doing. Everyone cares. It makes you wanna care, too. It is amazing. And the professor, is like a father, in a way. He knows your struggles and he tries his best to help you in any way he can. He can be flexible, strict, understanding, encouraging, supportive, and easily approachable. I only know two professors like that, including him. And I have had experience studying in 3 different countries, and to find these kind of people that care about their students or just in general about other people, is super hard. They are rare.

Conclusion

It is super hard, but the whole vibe is really nice. It makes you feel passionate and caring and encouraged. Taking this course makes you wanna improve yourself, weaken your weaknesses - even the most fearful ones.

Being a Sheriff for the First Time

dbelokon — Thu, 14 Apr 2022 19:47:30 +0000

Last week I got an opportunity to be a Sheriff for the Telescope repo.

The Fear

To be honest, becoming a sheriff was a role I was scared the most about. I wasn't looking forward to it. Not because it is a huge responsibility, or because we have to do a release, or push people to review code, or anything else. I was scared because talking to so many people at once and me having to hold the meetings/do presentations is something that's out of my comfort zone. It just makes me super exhausted mentally. I could do anything else 24h straight but holding a meeting for 30 minutes makes me restless real fast🥵😰.

Our Supportive Community

After sweating about being a sheriff, I actually learned that it is not that bad. It is just another skill that I would have to master eventually. Or at least become more comfortable with it. I also received a lot of support from my classmates before, during, and after the release time🤗 Well, some of them almost gave me a heart attack😅🥵 joking around about how hard doing the release is and freaking out about whatever I did as if I have done something wrong🤪

Furthermore, I would love to thank my professor Dave who is always trying to support everyone. He encourages people to fight their scariest fears but accept themselves as they are at the same time. It is so impressive how some people care about other people so much every step of the way😎🙏🏻.

I will never forget this kind of support from our community. Some people are amazing, it is hard to believe.

Something Interesting We Tried

It was pretty cool trying out live reviews during our triage meeting. It does make a huge difference, especially when it comes to reviewing big PRs.

The way it worked was that someone who made a huge PR would share their screen and go through their thought process and explain what they did. Then, others would ask questions or suggest changes to the PR.

While it is time consuming, it is definitely worth it in the long run. It can save a lot of time outside of the meeting when it comes to understanding and reviewing someone's code.
😎😋🐱‍💻

Conclusion

At the end, I kind of enjoyed making decisions, being a leader, and encouraging people. Even though I know I have a lot of areas where to improve on regarding leadership skills, I think that holding the meetings last week was a good start.

I, once again, learned that having such good relationships with people is a blessing. We are always stronger when we are together. Sometimes, even a single like on Slack to one's message OR replying to someone during the meeting when no one else does can make a difference in someone's day :)

🙈😋🥰

Connecting with the YouTube API in Telescope

dbelokon — Thu, 07 Apr 2022 00:11:51 +0000

Update:

In the last blog post, I mentioned that I worked on a simple YouTube information banner, but it was somewhat incomplete because the subscriber and view count was showing negative numbers.

The reason for this was that in Telescope, we don't actually store that video information, since it is not included in the YouTube articles given by the feed. Instead, we would need to request YouTube for that information.

So, YouTube offers an API just for this. You can use it for more than just requesting statistics though. For example, you can send requests to your API to start a livestream, or upload a video.

How did I make it work?

Well, while it was somewhat straightforward, the journey to the conclusion wasn't as simple as I thought.

In JavaScript, any kind of HTTP request you'd make through modern APIs is asynchronous. This makes sense, because if you make it synchronous, you would block the execution of the script, which can make your UI freeze (that horrible experience of having your page freeze and then turn slightly white in Windows...)😤🥴. While this is nice, it is somewhat annoying when you are working with React.

Normally, I wouldn't say this. Making requests with React is simple, since React will update the UI when you change the state (through the useState hook, of course). However, if the code that does the request and changes the state is not written in a specific component, but instead written in a custom hook, then everything changes.

Things that happened:

When I worked on it for the first time, something like this would happen:

When the React element would get constructed, it would call the function that does the request.
Since the request is made on a promise (and we are not awaiting), the code continues running while the request to YouTube occurs.
The element, with the default values, will now appear.
The request is finished and you update the values. Since these values were not updated through any kind of hook, React does not know about these changes.
If you force a redraw (maybe by resizing the window), the correct values would be properly shown automagically.

Of course, an application that works like that is unacceptable, so I knew I was doing something extremely bad that goes against React's principles.

So, after understanding what was going on (I was updating the values without a proper hook), I started to fix it little by little. The first step was changing this:

let objA = { value: -1 };

fetch(...).then(res => { objA.value = res.body.json().value });

I had to do something like this:

const [value, setValue] = useState(-1);

useEffect(() => {
    fetch(...).then(res => { setValue(res.body.json().value) });
}, []);

I wrap the fetch request in a useEffect because I want to cause a side effect.

However, the main problem was that the original function that contains the code is not a hook! So I had to rearrange a lot of stuff throughout the code so that it uses the function as a hook instead of a regular function. If I didn't do that, the linter would warn against it, and I do not want to go against the linter 😅

Conclusion:

After that crazy journey, I managed to make it work, which was my end goal! Look forward to the PR!

Release 2.9: Progress - Adding the YouTube Banner

dbelokon — Sun, 03 Apr 2022 19:02:28 +0000

I would like to write a quick update on the YouTube banner
situation for Telescope!

For Telescope 2.9, we managed to ship the YouTube banner,
unfortunately on an incomplete state ☠😢

So, the banner will originally pop up every time you find
a post from an article that comes from a YouTube feed (extra
work is necessary to make it so that it identifies any
YouTube link available in the poster).

There's one big problem: the subscriber count and the
view count are shown as negative numbers!🙈

This was intentional. I wanted my PR to just nail the styling
of the banner, without worrying about the logic of getting the
view count and the subscriber count. The next step would be
filing a PR that cares about that logic.

The reason why it didn't fit into the release 2.9 window was because the first PR was merged really close to the actual release, so there was no time to review the PR that added this logic.

The logic for the PR itself is not super complicated, but it might
look like that because the way that React deals with state and
hooks.

I actually finished the code for this PR, but I would like to
leave the explanation of it for the next post!

Priorities for Telescope 2.9

dbelokon — Fri, 18 Mar 2022 03:48:49 +0000

I would like to reflect a bit about what my plans are for Telescope 2.9😄.

Translating Telescope's About Page

For this release, I would like to focus on translating Telescope's About page into Mandarin and review the Russian version of the page once it is ready to be reviewed. You can view more details about the issue here.

This would be my first experience contributing to localization efforts. It is so cool that I can utilize my language skills in programming. It is like you get to experience the magic feeling when you get to enjoy your hobby while doing the job. I think if I find it exciting, I might explore more opportunities to strengthen my language abilities and help community with localizing global software😋😌.

Here is an amazing article for anyone who is also interested in software localization/translation that my professor Dave shared with me a while ago:

What they don’t tell you when you translate your app

It has a lot of great points and stuff to think about when localizing/translating software 💡💡💡.

Finishing up the Star field

I would also like to finish my little creative project about star fields. Specifically, this sneaky bug🐛.

Also, thanks to our Telescope community, I am going to get some help fixing this little guy🐛.

File the Necessary Issues for YouTube information bar

I have been working on this for a while now, from designing all the way to doing the back-end. I didn't expect that this issue was THAT huge at first. But I am trying my best to finish it up. I am planning to file a few issues to do the front-end and fix the back-end a bit. Hopefully, we are going to have a complete YouTube information bar once and for all very soon!!

Wish me luck!😉😋

Celebrating Telescope's 3000th Issue and PR: Progress

dbelokon — Wed, 16 Mar 2022 20:58:47 +0000

Star Field: Progress Report

As I mentioned in the previous blog, I was brainstorming about some ideas to celebrate Telescope's 3000th issue and pull request. Last week, I have decided to go with the idea about the Star Field with our beautiful faces😎.

Although I haven't finished implementing the whole feature completely, you can see my progress here. I had a few bugs which have to be fixed which I filed the issues for here: bug1🐛, bug2🐛. Those are interesting bugs😁, I don't recommend you to look at the star field before they get fixed, because your eyes might hurt a bit😵🤪.

Star Field Implementation

To implement this feature, I used the Coding Train's video as an inspiration and guidance resource.

I had to adapt the code from regular JavaScript to React JavaScript using a wrapper called react-p5-wrapper.

The hardest part was figuring out the images. There were 2 steps:

Getting the profile images of our contributors: I had to use GitHub's API to get the data. With that, I could use a list of URLs to get the images themselves. Then, I had to pass those image URLs to the p5 wrapper and load the images using the loadImage function.
Making those images have a round shape, because they were squared shaped originally. I was difficult because there is no explicit option to do that in p5.js. The way I solved it was playing around with the shapes that I could draw in p5.js, so that I could get rid of the corners of the square and get the circle shape.

Some more details about removing the corners:

After I got all the URLs of images, I noticed that they weren't shaped the way I needed them to. They all were square shaped. So I needed to make the profile images to be of a circle shape, because that's how they will look more like stars.

Unfortunately, in p5.js, you cannot just erase the corners that easily. I couldn't use any shapes, like triangle to draw because then I would end up with a diamond shape of an image. I would have to use something like a triangle with a curved bottom. But since there is no such shape in p5.js, I had to come up with a more complicated, BUT working😅😅, solution.

How???

So I thought, why don't I just leave the shape as is, but add an extra shape inside of that, that can colour the borders to be transparent, but not the inside?

So to me, it had to be a circle that had no filling, and a border that was thick enough to cover the corners of the square and transparent, to actually get rid of the corners.

Then, there was some math thingy involved:

const strokeWeight = innerCircleRadius * (p5.sqrt(2) - 1) * 2;
starGraphic.blendMode(starGraphic.REMOVE as typeof starGraphic.ADD);
starGraphic.stroke(0, 0, 0, 255);
starGraphic.strokeWeight(strokeWeight);
starGraphic.square(
  -strokeWeight / 2,
  -strokeWeight / 2,
  side + strokeWeight,
  innerCircleRadius + strokeWeight / 2
);

I used a square instead of the circle to position the shape more easily. The border's thickness will depend on the size of the image profile.

TA - DA

🥳🥳🥳

Behind the Monitor: Struggle, Discovery, Idea, Celebration

dbelokon — Thu, 03 Mar 2022 03:30:39 +0000

Behind the Monitor:

For the past 6 months, I have been feeling kind of unmotivated. You know, so many things happened around the world just in the past 2 years. Around the whole world, back home, here, family, college - 🤯. So I was hungry🍕 for some inspiration to brighten up my life and spread this bright infection to everyone around me 🔆.

Motivation, Inspiration, and Discovery:

So after struggling for so long, I discovered a very interesting person that KNOWS how to turn coding into something creative and inspiring. Specifically, he does tutorials and challenges on things like algorithmic art, anything creative using JavaScript (p5.js, processing.js), bot tutorials, and looooooooooooooooooooooooooooooooooots of other cool stuff.
To me, it is like an inspiring library of programming knowledge.

I promise that after watching his videos, you will fall in love with those boring and tedious algorithms and coding stuff. Or at least, get inspired to do creative things with coding. I want to learn EVERYTHING from this guy. I hope I will! (🤞🏻🤞🏻🙏🏻)

So the YouTube channel is...

🥁

here

Have fun!

Disclaimer:

Sometimes I don't understand lost of math, physics, and coding stuff he does, but even when I don't, it is still interesting to watch and learn slowly, or at least to enjoy the art he makes with those. BUT it won't stop me from learning and trying.

Favourites:

I haven't watched a lot of his challenges and tutorials YET, but so far I loved these ones:

this is ...like... WOW! This is literally a piece of art with just this few lines of code. I was wondering if there is or ever will be a profession called Programming Artist(?), Art Developer (?).

Coding Challenge #4: Purple Rain in Processing

Ideas ✨🎨💡

I also loooooooooooooved this one, and it inspired me for an idea:

Coding Challenge #1: Starfield in Processing

I am thinking that I could use the Starfield idea, but instead of the stars, I would have all the icons of Telescope's contributors falling from space. I think that would be cool and artsy to celebrate our 3000th issue.

just imagine our handsome faces out in space:

I also loved all the suggestions that everyone mentioned in the comment session of that issue, about three.js, Easter egg, quotes, pictures, Spline..

I would have to look into all of that and see what's good in terms of optimization, artsyness, and maintenance.

THIS IS IMPORTANT

My little brother did his first contribution on GitHub, and I can't express how PROUD I am. He did most of the stuff by himself, and now he is so excited and can't wait to see his work in production on a live website. His excitement makes me so excited, I can't 😌😌🥺🥺.

...

Just wanted to celebrate him a bit here, in my blog post, too.

🥳🥳🥳💃🏻💃🏻

See you next blog!

Figuring out the Best Abstraction

dbelokon — Sun, 20 Feb 2022 23:28:06 +0000

Title: Figuring out the Best Abstraction

Welcome back! New Telescope version release report incoming!

Last Thursday, Telescope 2.7 was released, and with it, lots of cool stuff got in motion. Stuff like documentation, Supabase integration, parser service, the search service, react native front end were the areas that had a lot of activity by several Telescope team members, as well as new contributors 😋😋😋.

As for me, I had some discussion regarding the YouTube info banner and its implementation.

Thinking of the best abstraction

When I was trying to solve the issue, I decided to first read the code that handled the original GitHub information banner.

I learned there was a component called a ContextProvider. I wasn't sure what this was, so I read the React official documentation to understand what Context was supposed to be. After a few minutes of reading, I understood that there was a component that extracted the GitHub links from the original post, and that component shared the information necessary to other components via the use of a custom hook that used the useContext hook to access the information.

The main purpose for this structure is to not constantly pass the information necessary to child components via props, but instead let those child components access the necessary information by themselves 💡.

While the current structure worked just fine for the GitHub information, I noticed that there might be a little bit of an issue if we tried to incorporate the YouTube information banner through the same way.

A naive approach might be create a new provider that handles the YouTube information, so then you use the context in a new component.

The problem with this approach is that you would need to add another provider for the future Twitch info banner, so the approach won't scale 🙅🏻‍♀️🙅🏻‍♀️❌ if you add more types of banners.

Another approach might be instead generalizing the provider so that it can provide distinct types of information🤔. A good reason for this approach is that you won't have to modify the DOM structure every time you add a new provider.

This is where I started to think of the perfect abstraction…😌💡🌈

The GeneralInfoContext abstraction

When you have a general provider like this one, it works almost like a hub: some information will enter the provider, and it is the job of the provider figure out who asked for what information. The problem is figuring out how to write it so that it is:

simple,
easy to read,
easy to maintain,
localized in a single file.

When I discussed some of my ideas with the rest of the team, there were two opposite points:

we should have a single hook that provides the information because otherwise too many hooks would complicate the structure,
we should have several hooks that provide the information separately because otherwise a single hook would be too complex.

This is where I started to feel somewhat conflicted🤯🤪, since I wasn't sure how to keep discussing without having a small code sample for people to read and think about it.

The main idea was this: Create a GenericInfoContext, where it will provide a context that somehow had the information we wanted to share.

The interesting bit was achieving this, since I had two ways:

create an interface that would hold each group of information (that means, the interface has fields, where each field is the interface that groups related information such as GitHub information, YouTube information, etc).
create a component provider that would receive the type of information it would need to provide, as well as how to produce it.

If the second option sounds super abstract, let me be a little bit more specific.

Let's say that, in Typescript, I create a ContextBuilder, and this ContextBuilder expects a callback, where the callback has to expect an argument of type Post (which already exists in the code), and it returns an object of any type. So, something like this:


function buildContext(fnCallback: (p: Post) => any): Context {
    // do something with the callback
}

If the idea still sounds complicated, don't worry, I didn't develop it that much because I thought it was getting out of hand😅😅.

However, I would like to explain why I was considering this in the first place. You see, the first approach would have something like this:

interface GenericInfoContextInterface {
    gitHubInfo: GitHubContextInterface
}

If we had to add another group of information, like the YouTube information, we would need to do something like:

interface GenericInfoContextInterface {
    gitHubInfo: GitHubContextInterface;
    youTubeInfo: YouTubeContextInterface;
}

And if we had to add the Twitch context, we would have to expand the GenericInfoContextInterface. The biggest problem I had with this approach is that it is not extensible without going through modification of the internals😵🤯, which is why I wanted to go with the second approach.

However, since this approach is simpler to understand and read, I decided to go with this one. You can view the PR that modifies the original context provider to work like this here.

Reviving the parser service in Telescope

dbelokon — Sun, 13 Feb 2022 04:20:10 +0000

This week is the last one before we wrap up Telescope version 2.7, and I couldn't be more surprised with what I achieved...

While I haven't finished a particular issue, I did work on a couple of smaller ones, like #2906 and #2904. Instead, most of the work I did today was working on a review on a really big PR. 😁

The Parser service

Let me tell a short story about the Parser service.

When Telescope shipped in the 2.0 release, it moved its monolithic infrastructure into microservices, but there were still remains of the old infrastructure since the rewriting of the system couldn't make it to the release. This is where the parser service comes into play.💁🏼‍♀️💁🏼‍♀️

The parser service was supposed to be the one in charge of doing the most important part of Telescope: aggregating the feed posts into a database so that they could be read by other microservices. The keyword here is was! The parser service stayed on a frozen-like state, where no progress was being made due to how big the change was, and how crucial it was to the whole infrastructure. This is the reason why Telescope ended up having to keep its legacy backend infrastructure, as a way to not freeze progress on other aspect of the proyect.

Well, that is no more the case until [TueeNguyen]((https://github.com/TueeNguyen) decided to work on this task. He created a PR that took the biggest step for this migration of the infrastructure. He requested several Telescope members to review his work, and I was one of them.

(Great job, Tue!!:D)

No pain, no gain!

If I had to be honest, I was somewhat intimidated by the PR. Over 1k line changes that went over 30 or more files, how could I actually review something like this? 🙈☠😱🤯🤯

Well, since I wanted to provide as much feedback as I could, I went through the entire changes...

Yeah, you heard me right, I went through the entire parser service, reading each file until I had an idea of what each thing did.

This is probably the most amount of work I ever put into a review, and I am somewhat satisfied being able to understand the parser service a little bit more.😋😋 I also run the program with the changes and I made sure that it run just fine. I had a couple of issues that I am not really sure if they are related, but it seems to be working as fine as the legacy back-end!🤩💃

I'm going to cross my fingers that the PR passes review and we end up with the parser service working for release 2.7! 🙏🏻🙏🏻🤞🏻🤞🏻🤞🏻

Pray for us!!

Integrating with Twitch in Telescope: Part 1!

dbelokon — Sat, 05 Feb 2022 15:16:01 +0000

For this week, I worked on finishing up my work on #2769, as well as doing work on the Twitch integration by introducing an RSS feed generator, called rss-bridge.

Syntax Highlighting Summary

In the previous post, I mentioned about the work that I had to do for adapting the syntax highlighting. During reviewing, we had this small issue that we couldn't figure out how to solve: import the static CSS stylesheets from the node_modules folder to receive updates more easily, instead of having a copy of the minified files in our project.

After trying out for a while, we decided that we were spending too much time and we were holding the PR for such a small problem that was probably not even worth it. A couple of small fixes later regarding coloring, the PR was merged successfully.🤞🏻

RSS-Bridge

RSS-Bridge is super cool😎🤏. So, newer websites do not offer RSS feeds, and they try to provide their own API, if you want to extract any information programmatically. Twitch is one of these websites. What RSS-Bridge addresses is this exact problem: instead of expecting these websites to offer a RSS feed, we will generate them ourselves. It works so well🤩

Setting up was not hard at all, which was the best part😋. I didn't have to install the source code, I just specified that I wanted to install the image hosted in Docker Hub, and set up some routing to make it work properly. I had to do this with the help of Dave🙌🏻, because I had no idea how to do the routing in Telescope.

We will use this Docker container to get the feeds we want and get the posts we want to display them in Telescope :D

This is what I ended up with:
PR#2788 which was a solution to one of the problems in this issue.

YouTube Sidebar UI design

Meanwhile, this issue: (#2680) did not have a related PR that was addressed, but we did discuss some possible design ideas for this. I will follow up with the team to see what we can do to file a PR later.

React Native Port

I haven't followed up that much regarding this area, so I would need to ask our community and skim through the filed issues and PRs to know the overall status.

A quick update for Telescope 2.6

dbelokon — Sat, 29 Jan 2022 03:33:42 +0000

I am not really sure how, but we are doing a lot for release 2.6!

I cannot explain how much, since there is a lot of moving parts while I am writing this post, so we would have to wait for the changelog of the release next week.

However, I can describe what I managed to work for this week:

Fix the syntax highlighting so that it is adapted to the dark theme of Telescope.
Figure out what to do for the MVP of the Twitch integration feature in Telescope.
Suggest a design for a YouTube summary bar shown for video posts in Telescope.

Syntax Highlighting Madness

The issue (#2377) was fairly simple: fix the code block colours so that they adapt to the dark theme.

The issue was tackled by another person on December of last year, but the PR was closed per request of the author, and it wasn't picked up again until last week.

When I read the old PR, a problem was highlighted (pun not entirely intended): the colour seemed to not adapt well in the light theme.

I started to ask myself "why? Why did the PR caused this problem?". I read the front-end code to figure out, but I didn't have much progress, so I head to the production website and started to "inspect element" to understand how the current syntax highlighting worked.

I read a familiar class name: hljs. I remember reading something similar to that before, and that's when I remembered: that's the classes of thehighlight.js` library!"

I had a really nice keyword to use for searching around. I went through the front-end to figure out how the code blocks were parsed by highlight.js, since the library first had to analyze the text to annotate the keywords properly with the css classes.

I didn't have much luck, and of course, the annotation of the keywords wasn't happening in the front-end, but instead in the back-end!

Anyway, this was an interesting revelation, and it also helped me to clear out one doubt: where was the highlight.js annotation happening.

The second problem was figuring out how to change the style sheet that sets the syntax highlighting to the hljs annotated elements given in the front-end depending on the theme.

One of my teammates, @dukemanh recommended me to follow the usage in the highlight.js demo. And so I did! It was fairly easy to set up, but I have to make some changes given in the review of my PR.

MVP Twitch Integration

The sequel to the YouTube Integration chapter: Twitch Integration. I didn't research much until today, when another of my teammates, @sirinoks found a cool repo that creates a service that caches responses from the Twitch API and gives an RSS feed as a response.

While we haven't forked yet, we are planning to provide Docker support, since that would help us immensely on integrating this feature!

The discussion of this issue is found here.

YouTube Summary Bar

While this issue has not been advanced much yet, I pitched a rough sketch how I think the YouTube summary bar should look like.

I will be waiting for any feedback in the issue thread!.

Last words

So, yeah, a lot of issues are getting closed near the release date! Hopefully, I will be able to focus on other issues, like #2725, #2730,
#2736,
and #2737.