Release 0.4 : The End (of OSD600)

-

This will be my last post written for my OSD600 course, after that, every post will be about my own journey in programming. And so I wanted to say that this course, out of all the classes I've taken so far in Seneca College for my program (CPA), is by far the absolute best course I've had in the school. The topics it covers, the knowledge it teaches, and the practicality of it is just exceptional. I've learnt so much from this course, from both the professor and my own, and that's thanks to Prof. David Humphrey's mentoring. He not only taught us how to use GitHub, make pull requests, and use Git, which I should mention is one of the most well taught guides on how to use it and I recommend anyone to watch his recorded lectures on his YouTube channel, but he also taught us how to go out on our own and expand our knowledge through the beauty of Open Source Programming. With this newfound knowledge I've acquired from the class, I'm much more confident and eager to continue to grow as a programmer and as a contributor in the open source community. My only regret is that my work ethics kind of fell of towards the end of the semester and I wasn't able to or didn't give my full 100% effort in the final assignments. Though I won't let that hold me back from the things I did learn from the rest of the course.

There's so much more I could say about the outstanding quality of the course but I'm sure you can hear it from the rest of my peers taking the same course on Telescope where you can read about their blogs.

So back to the main topic, Release 0.4! I've finished all that I could before the submission date (which shout out to Prof. H who gave me an extension) And I'm a bit disappointed since I wasn't able to complete one component that I set out to port for telescope. But I want to talk about the efforts that I did put into my attempt.

Dynamic Image

The DynamicImage component was much more complicated then when I thought it was when I first started trying to port this component. Especially compared to the other 2 components that I worked on. DynamicImage is used in the landing page of telescope to present randomised splash photos taken from a website using an API. This component is initially coded in a gatsby opiniated method using gatsby components and graphql to query data. This makes porting it to Next much more complicated since data fetching compared to Gatsby is a whole another topic that I tried to learn in a weekend and failed to. But that's not to say I didn't learn anything, I somewhat figured out how graphql works with gatsby and how Telescope queries images for the component, and I tried my best to figure out how to convert it to Next Js.

The Gatsby front end included a file called gatsby-node.js that fetches the splash images used in the Dynamic Image component, so that was an extra component to port.

This was a great reference in understanding how to implement graphql in Next Js


The original Dynamic Image Gatsby component used other components such as StaticQuery and graphql from the gatsby module. The 'graphql' module used to code GraphQL queries was easy to replace, using the apollo-server-micro module commonly used as a substitute. But the static query was something that had to be rebuilt when porting to next js, since it queried data much differently in its Gatsby counterpart.

The Image component used in the current front end is also taken from the gatsby/image module, Next JS has its own image that the migration guide recommended to change to, but the props are different to since the gatsby image component worked in conjunction with the StaticQuery component

Safe to say this wasn't a topic to be crammed in a weekend and so as much progress as I tried to make, it was still way out of my reach.

BackToTopButton & GitHubContributorCard

The other two components thankfully were simpler to port and mostly consisted of dependencies added in the package json and converting the components to typescript/tsx. But I know the whole migration process is a slow and gradual one that requires the cooperation of with the open source community of the repo. So there's still lots still left to do. 


I wish I hadn't ended my final assignment in OSD600 this way, but I know that my work in open source doesn't end here, in fact it pretty much starts here. Even if I hadn't finished the work I set out to do now (I mean my PRs are still yet to be reviewed! Lots to followup still) I'm still looking forward to contributing to more open source repos starting with Telescope.

The telescope slack page


Thanks for reading

Comments

Post a Comment

Popular posts from this blog

HacktoberFest Entry No.2

-
Image
So around last week I found a great github repo of a chrome extension that previews contents of a webpage when you hover over a link. I stumbled upon it after a suggestion from my professor about taking a look at chrome extensions for a possible repo to contribute to. I'm glad I did because this was a chrome extension that was interesting, seemed practical and had a maintainer who was keen on receiving contributions to better his program. The extension is called Survol First I had to install it and test it out first, can't just contribute to a repo meaninglessly just to force a pr. I tested the extension and liked the functionality, it was useful and is well designed. Makes it all the more exciting for me to try and contribute to it. So I read the docs and learned how the extension worked. It uses a javascript file to inject html elements through the dom and uses mousemove event to detect anchor links to request information of a page, and positions and fills the div with conten...
Read more

Lab 1 : Our First Open Source Contributions

-
So for Lab 1 our tasks were fairly simple. Find a partner to review a repo on and make contributions, no matter the scale, to their code. Be it a suggestion for their code, reporting an issue, or even fixing up small details in their readme. So through slack I partnered up with one of my coursemates  Niaz Much like me, he wrote his code in nodejs, so it was perfect since I can go through his code easier through my understanding of node. His code, though written in the same language, differed from mine a lot. For one, he didn't use yargs so he had to process the arguments manually, and secondly he didn't use fetch and opted for a module called linkinator. No problem, in fact it's an opportunity for me to understand the logic and components that he used. I forked a copy of the repo, cloned it and tested it out for myself. The code worked perfectly as intended and processed urls well. Functionally, I couldn't find find anything in the code I could identify as a flaw or imp...
Read more

Hack.... vemberfest.. PR No. 3

-
Image
OK so this is pretty long overdue (sorry Prof!) And I still have one more pull request to go and that's on me yes. BUT, this week I spent working (or should I say learning) on our course's aggregated blog website which coincidentally, our prof is making us work on this week for the lab, so I guess I got a good head start going on.  So I took on an issue that seemed pretty straight forward in the repo. It was to change the functionality of the search bar when filtered by author. Seemed pretty straightforward enough, so I went ahead, forked the repo and cloned it on my computer. Now the reading begins, the lengthy process of coding. And the fact that this was a whole website coupled with different technologies that I'm not familiar with only made it waaayyy longer, which maybe is a sign that I should have started working on this much much earlier. But that's what happens when your time management skills is hot garbage. Anyways, I spent the next few days learning about eac...
Read more