My Telescope experience

This is the end of my last semester of the BSD program in Seneca. I still cannot properly explain why I end up having the most complex classes from my program left for my last term. This was the craziest term I ever had. Today I want to reflect on one of the professional options I chose to took – DPS911. This class is the second of two Open Source classes offered by Seneca. IT felt really different from the first one that I took a year ago.

First of all, this time we had one big GitHub project called Telescope that we were working on for 13 weeks, whereas a year ago I was participating in Hacktoberfest and was fixing bugs in randomly chosen repositories. Even though it was pleasant to get a Haktoberfest t-shirt, it is much more pleasing to see the growth of the project you’re actually involved in.

Secondly, the structure of the classes changed a lot. This time I was presenting every week in front of other contributors that were in my class what I am working on, what I learned and hows the progress going on. I am not a fan of talking in Engish in front of the audience but I should admit it helped a lot to keep up the same pace during the whole term and also see your progress. Also, every week we had a triage meeting, that gave me a feeling that I am a part of the Telescope community and that ideas and thoughts of each contributor matter. We had an opportunity to chose the direction we would like to go with a project. Not many classes could provide you with such freedom.

Also, as we were all working on the same project, we were able to help each other. Even though I did not use this ‘feature’ as much as I could, it was nice to know that you could get instant help from your classmates if you’re stuck. Moreover, its easier to work on something, knowing that you won’t be left out with your problems alone.

During this term, I work on different parts of the project: testing, frontend, documentation, a bit of backend, I even did a design for one of the pages. I improved my skills using Git and GitHub and I had an opportunity to work with new technologies: Docker, Material UI, Jest testing and Express framework.

UI layout bug at the Telescope myfeeds page

Last week I was working on another frontend issue for the Telescope. This time it was a UI layout bug at the /myfeeds page that I previously created a design for. For issue#945 my task was to adjust sizes of all input fields on the page as well as the size of the whole My Feeds component. Input fields for the name of the author and the blog feed URL are on average around 13.5 and 51 characters respectively. In the case of /myfeeds page, the input spaces for these fields were slightly smaller.

Here is how the page looked before:

First of all, I had a look at the myfeeds code (myfeeds.js) and found out that I can change the max-width of the root container. Initially, the maxWidth of the container was set to ‘xs’. I’ve changed it to ‘md’ in order to make the main container wider.

So, part of the problem was fixed, but internal elements, such as icons and text fields, were still not responsive. I checked the Material-UI Grid API and added missing breakpoints in order to make UI elements responsive. I also found out that part of the UI is rendering from another file. So, I added missing breakpoints to the ExistingFeedList.jsx as well. After thorough testing, it looks like /myfeeds page is responsive and looks good on mobile and desktop devices. Here are my changes.

Here are reviews from other contributors of Telescope with a screenshot of the final look of the page with my changes:

Telescope Release 0.9

Last week I wrote some test cases where a client requests different content types of text like JSON, text, and HTML. Also, not so long ago I took a part in writing a code that was tested in these cases. When I was writing it I made one small misstep. Code in Telescope is written using Express framework, but at some point when I was trying to manage how to identify what kinds of the content type are passed, I did not found anything better than to add external accepts module. It appeared, Express framework has a similar method – req.accepts(). In issue-616 I swapped out accepts() with req.accepts() and completely removed accepts module so our project has one less dependency that we have to maintain directly.

When I committed code for the first time it did not pass Circle CI testing. It appeared that my VSCode Prettier extension did some automatic formatting that I haven’t notice at first. Also, I was told by one of my classmates that Prettier for Telescope has been recently updated and the formatting rules for Telescope now differ from what I have on my PC. I’ve updated my Prettier and Prettier ESLint and run npm run prettier. It did not help. Next, I decided to make my local Prettier ignore this ‘error’. Apparently, if you do stuff like this, VScode just creates a comment on top of the line but when you click save is still adds the formatting to an ‘error’.

Here is how the line of code looks without formatting and before I click save:

This what I’ve got after saving the changes:

What happened when I disabled prettier for this error:

As you could see it did not work out too. I could not find anything better than to completely disable both of my Prettier extensions for now. I still need to figure out what’s wrong with it.

Anyways, I managed to commit code with the right formatting and it was approved and merged.

The next issue I’ve worked on was issue-770 .

Recently, we decided that the Telescope code should follow Material-UI format. Our use of styling is currently inconsistent as we are using both CSS as well as Material-UI format.

So for this issue, I’ve removed banner CSS file and put styling code with appropriate changes inside of the Banner.jxt. I had a few troubles with formatting as this is my first time working with CSS-in-JS. After some research and documentation reading, I’ve added style class bannerImg to the makeStyles() with new formatting and used it in the needed place using className={classes.bannerImg}. Also, I’ve tried a different approach – inserting CSS directly inside of the code without using makeStyles(). Here are my changes. I am planning to do the same for the rest CSS files that are left so out code looks cleaner and more consistent.  

Test Cases for Telescope

This week I was working on creating test cases for Telescope. I was assigned to an issue-615. The main point of this issue was to create tests for cases where a client requests different content types of text for a given post ID.  The content types that I covered were JSON, Text, and HTML.

Automated tests for Telescope’s REST API endpoints are written using Jest and Supertest. I started by researching both of them and skimming documentation provided online.

Jest is a JavaScript testing framework that focuses on simplicity. It works with Node, Angular and Vue. It is an open-source project and its repository on GitHub is maintained by Facebook. Jest has a nice and easy to understand documentation. Also, I found Jest cheatsheet which was helpful in writing tests for Telescope.

Supertest is a library made specifically for testing NodeJS HTTP servers. It is also an open-source project with handy documentation on its GitHub page.

My task for this issue was to:

• Update the two objects (addedPost and receivedPost) so that the HTML property contains real HTML (content

  ) and the text property contains the same content as text stripped of HTML (content),

• Convert all the it() to test(),
• Write cases for requesting Text, HTML, and JSON.

When I was writing tests for ‘request test’ and ‘request HTML’ I faced an issue – I was using the response body (res.body) to compare received data with testing data and res.body was always empty. It did not make any sense, so I’ve spent some time researching why it is not working the way I want. I found out that if content type header is text/plain or text/HTML, then the response body won’t be parsed. For cases like this, there is res.text that will contain data as a string. Here is the code snippet of it:

The rest of my changes for this PR you could find here.

Thank you for your attention!

Release 0.7

Hello everyone!

This last term has been craaazy! I have no idea where to find time to finish all assignments, projects, business proposals, researches, and at the same time get ready for midterms! I missed a few posts for Open Source class because of the terribly heavy workload. But they are coming soon! Today I want to share some of the work I did for Release 0.7 of Telescope project.

This release started for me with a Triage meeting where I was one of two people who ran it. The purpose of such meetings is not to solve issues, but rather to keep track of the project’s state, discuss the problems, and make sure everyone has pieces to work on during the release. I was responsible for taking notes and posting them to Telescope Wiki pages.

During the next class, we had a planning session and I had the same responsibilities. The resulting notes that you could find on Telescope Wiki. In the planning session, we were discussing our goals for Release 0.7 as well as later releases. There were a lot of things our team had in mind that could be implemented. I think we shared some cool ideas and even I as a newbie in the project had something to add too. Unfortunately, we are limited in time: the end of the term is close. At the end of the meeting, I had a feeling that we managed to set aside high priority tasks and divide them among the remaining releases.

It was really pleasing to get such a feedback as I really tried hard to make notes as understandable and well structured as possible 🙂

Release 0.7 for me was all about the frontend which I did not actually enjoy. I created a low fidelity prototype for one of the pages we decided to create. This part was fun, I like drawing and creating something new. To come up with a prototype, I went through a few popular online platforms that have similar functionality. One of the main ‘inspirations’ for me was Outlook’s ‘Update your profile’ page. I liked how interactive it was compared to the others. Additionally, I was relying on my previous experience from the coop work where I was developing the backend and fixing bugs in frontend for a credit and risk assessment application. Back then I noticed how many of the applications screens looked very similar to Outlook profile and configuration screens. I found such kind of the layout of a page (with interactive dropdowns, instant error messages, no additional pages and windows) more user-friendly and easier to understand, develop, and debug. Drawing on these thoughts I created sketches that are attached to this issue. 

As a next step, I asked to be assigned the implementation issue for the page I have prototyped. The plan was to take on a simple issue first, so here is a bug I was assigned to  bug. The description has been changed since I started working on it, but you can still see the old version of it if you unfurl ‘old issue text’ collapse element.

A simple issue it looked, but the reality turned out to be much more complex. First, I struggled with loading this page locally on my laptop. I was trying different methods to run Docker, change code in .env file, etc. Having spent a day in fruitless attempts, I decided to talk to our Slack community. It appeared I was not the only one with such a problem. As I now understand, I was running backend server locally, which was enough for my previous work on Telescope, but in order to work on the frontend, I also need to run the frontend Gatsby development server.

I started working on the issue where I just needed to remove general styling that was unwanted on this page.

I could not reproduce the issue in two different browsers I had installed on my workstation – Safari and Google Chrome. After a discussion with the creator of the issue, I found out he was using Firefox.

I was requested to make changes in the .css file, so I just added elements’ IDs to the stylesheet with necessary properties. And again, what looked like an easy walk in a park, turned out to be a confusing mess. See my follow-up to this issue on github:

As suggested I used port number for a Gatsby live-reloading development server.  My changes worked but, this should not be surprising at this point, a new problem had occurred. The HTML for our frontend is automatically generated by Gatsy, so many elements do not have IDs specified, while available classes are not necessarily unique for a given page. For example, the body element of the page where I had to modify styling,  was automatically generated by Gatsy and did not have the ID. It made impossible to write a selector in CSS file which would affect only this page. This made me look into other options I had to modify styling on the page. I learnt that it is possible to inject styles with java script  but it looked too complicated for such a small fix. I’ve never worked with Gatsby before, I was not sure whether it was OK to change code in our .js file because the task was to update .css only and I did not like the idea of such fix. I decided to bring up this issue in the class, and hoped my classmates agree that we had to change the approach to such problems or that someone could show me a less awkward solution.

Indeed, the discussion in the class highlighted a hidden conflict with our initial approach. The Telescope uses both static CSS files and the Material-UI styles via Gatsby which don’t work well together. Also, it is a bad architectural design to have styling defined in two completely different places of the project. With this in mind, the team decided to go with Material-UI as the single source of styling information. It supports a CSS-in-JS approach to extend existing styles with custom-defined ones, and this will most likely be the way we will control web page styling in the Telescope going forward.

Telescope

This is my last term in Software Development program in Seneca College. One of the classes that I choose for this term is part 2 of DPS class, so I am back to posting about my adventures in the Open Source world.

Last time I wrote a post in a WordPress was more than a year ago and during this time things changed in Seneca’s Open Source (OS) community. Now, almost all the people in my college that are involved in OS are working on a project called Telescope. Before I came to class I’ve never heard about it. My professor and new classmates decided that they would like to test how easy is ‘on-boarding’ process for a newcomers. And I will be a test subject.

I should say that my acquaintanceship with Telescope took place 3 weeks ago, so my emotions faded away. I will not go into details of it, I’ll just list things that changed in Telescope after I tried to ‘touch’ it. My main task for the first week was to go through the documentation of the project and file any issue, unclarity or confusion I spot there. I thought that since everybody in the class was already contributing to Telescope for at least one term, the set up should be easy and quick.

I started with reading about what is Telescope in README.md file. This is were I filed my first issue.

If you are interested in reading an updated, nice and comprehensible version of what is Telescope — here it is. 🙂

Next step was the setup. Here is where my torment started. I did not understand a thing there, almost every step was problematic. I can’t say that I went through hell and high water there, but I definitely felt lost and stupid.

“This is my last term and you cannot even set up a project on your laptop” — that was my primary thought. Luckily, it appeared that I’m fine and a lot of stuff in setup instructions were messed up. Here is one more issue, created by me:

I’ve got a reply from one of my classmates that was working on documentation at that time.

As you could understand,  CONTRIBUTING.MD file also went through some major changes.

Overall, I guess it was a tough beginning , but I learned a lot. During the process I became familiar with things like Docker, Redis and .env files and refreshed in memory what you feel when doing OS. Next post about my first contribution to Telescope soon will be here, stay tuned 🙂

SenecaBlackboardExtension and Elastic

Today, I want to write about 2 PRs which I have made this week for Release 0.3 for my Open Source class.

I have decided to contribute again to SenecaBlackboadExtension which is a Chrome Extension for Seneca Blackboard. This project is made by the students from my Open Source class. If you are interested in my last work on this Extension — here is a blog post about it. Right now, our project is on a stage, where we remove parts that are not used by students, faculty, and staff on a daily basis. I decided to edit a My.Seneca Tools section which originally looked like this:

I spoke with some of my friends from college and they suggested a few ideas. My.Seneca Tools contains a lot of clutter that can be removed and this will make the page less overloaded with unnecessary information. For example, there are links to some pages, that a majority of students do not have access to, like ‘Student Connect Starfish’. Also, there are things like ‘My Tasks’, that, unfortunately, are not used, because there are more convenient or efficient ways of planning. But at the same time My.Seneca Tools section has two frequently used links: ‘E-mail’ and ‘Calendar’.

Overall, I removed more than half of the items in this section but I had a weird feeling that something was still wrong. This feeling was not related to the number of links I deleted. I sat for a few minutes and tried to understand what was wrong. And then I realized what it was! I was looking at this website for four years and it is not a surprise that I know every ‘functional’ detail I want to change. But at the same time, there are things that I saw so many times, that I do not even realize they are there. I think my ‘not seeing’ is usually related to design. In this case, there were those icons, that looked like they were 20 years old!

I knew that some websites use icons from the fontawesome. I looked at the sources of Seneca website. Here is what I found:

Seneca website uses it too somewhere else! 3.2.1 version is not the newest version but still, this meant that I was able to use them too. All old gifs are replaced with less older icons now. Here is the final look:

Better, right? 🙂 I made a PR and it was merged to the project.

The next task for the Release 0.3 was to contribute to a large Open Source project. I decided to work on Elasticsearch. The reason was simple — I really wanted to try to contribute to a project written in Java. Elasticsearch is the most popular search engine based on the Lucene library and is commonly used for log analytics, full-text search, security intelligence, business analytics, and operational intelligence use cases. Among the clients of Elasticsearch are Uber, SoundCloud,  Quora, GitHub, Netflix, Amazon, IBM, Foursquare and others.

I have found three issues that were totally unclear to me. After I spent a few evenings without any results, I decided to find something else and leave these three for later.  I knew that I looked through all of the existing issues with ‘help-wanted’ and ‘good-first-issue’ labels again. nothing there. Then, I realized that Elastic has a wide range of other repositories for other projects, like the one for Kibana. Kibana is a data visualization plugin for ElasticSearch. Honestly, I’ve got glued to Kibana’s dashboards. Good visuals are my weakness, and those dashboards are just incredible! There, I found my issue. The task was not hard — to change old links with new ones. But the description was a little unclear to me, so I researched this topic, just to make sure I did not put a wrong link in the wrong place.  So now I know a little bit about Elastic APM because I have read their documentation. I am still working on issues for Elasticsearch, so be ready for new posts about how I handle them!

 

 

Seneca Blackboard Extention

As I already wrote in my last post, today I am going to talk about my experience of contributing to a new GitHub project that my classmates and I have created. This project is called SenecaBlackboadExtention and it is a Google Chrome extension for the website that everybody uses at Seneca College. I bet, a lot of people from Seneca would tell you that this website is not really up to today’s standards of usability, probably because it was designed years ago. And would I totally agree with them. For almost four years I have spent learning, I am painfully aware of all its downsides and I am really glad that now I have a chance to improve it.

For my first contribution, I decided to work on an issue that, in my opinion, is one of the most useful things that could be implemented for this website – separate notifications for marks and announcements. I will explain why. Almost every day I wake up anxious to find out what grade professors gave me for some of the things I have been working on lately. I open my laptop and click on the icon of the Seneca Blackboard that is in my browser ‘Favorites’ bookmarks.  I log in to the system and I see something like this:

I’ve got 12 notifications! My heart starts beating faster, I click on my name in the upper right corner, and I expect to see my grades. However, what I usually get is this:

NO GRADES. Just regular notifications from professors that the new assignments have been posted, the deadlines have been moved, that there will be no class on Tuesday or something like this. This whole situation irritates me every time and kills my nerve cells. No surprise, that when I saw an issue that said “Split up announcements and marks notifications in the top right corner on the main page” I decided to work on it without hesitation.

This task appeared to be not so simple as I initially thought. There were two reasons for it, I believe – first was that it has been 2 years since the last time I wrote something on JavaScript, and the second was the complexity of Seneca Blackboard code structure, which was really tangled, complex, and hard to understand. I don’t want to write here about every difficulty I faced, because, honestly, in most cases, it was because of me not remembering JavaScript. But there were two challenges which were caused by the complexity of the Blackboard, and I want to talk about how I solved them.

The first problem I faced was that the information about how many grades and announcements there are is not available in the page HTML when it is loaded. This information loads only when I click on the dropdown with notifications in the top right corner. I decided to simulate 2 clicks on this area just to make the page load the necessary data. It wasn’t the best approach possible, but it worked. The next issue was that the data about grades and announcements needs quite a bit of time to get injected into the page code. I realized this when I put the call to get this data right after the clicks I simulated in our chrome extension. For some reason, all the returned values were null; but when I ran exactly the same function calls in Developer Tools, everything worked perfectly. To work around this issue, I used the setTimeout() function that waits asynchronously 1000 ms and then runs the function that is passed to it as an argument.

After I had all the problems sorted out and the code tested, I made a PR and my code was merged into the extension. Here is how the marks and announcements now look like:

Now, the rest of my nerve cells are safe and I do not panic every time I open the Blackboard website. By the way, there is a small hint in the last screenshot about my next PR for the SenecaBlackboardExtention. 🙂

Starting to Work on Seneca Blackboard Extension

Now, when Hacktoberfest is finished I will be working on a few things for my Open Source class. Our next task is to contribute to one of the projects created and run by our class. I decided to work on a project called SenecaBlackboarExtention which is basically a Chrome extension for an ugly website that every student and teacher uses in our college. I have been struggling with this website for almost 4 years and now I think it is time to make some changes to it.

I have zero knowledge of how to create and code web extensions. That is why,  first of all, I decided to look at some already existing ones so I could have at least an approximate understanding of how it works. There are a lot of Open Source browser extensions on the GitHub. I really like few of them, like this refined-github which I installed on my laptop and even thought that this would be cool to contribute to it sometime. Then, I decided to read some documentation on how to write extensions for chrome. There were a few websites with small instructions on how to create basic Chrome extensions which I did on my laptop. Also, I forked and upload SenecaBlackboarExtention to my PC and tried to do some DOM-model modifications just to practice.

I found the first issue to work on. Here it is a link to it. It is not so easy to do as I thought and I will write in the next post how I fixed it.

 

Hacktoberfest 2018

This is the end of October and this means that Hacktoverfest is finished. Overall, this was a great experience and I am really glad I participated in this event. I have this awesome feeling that I was a part of something big and meaningful and my contributions to different projects have a value. Before Hacktoberfest I contributed to open source project only once. Now, I have worked with people from 5 different projects, offered solutions, and incorporated feedback. And I am not planning to stop! All of the pull requests I made are totally different and I learned something new during work on each one of them. Here are the names of the projects I contributed to with the links to the blog posts I wrote about my experience with working on them:

• killedbygoogle
• Periodic Table
• ClassicPress
• securedrop-sdk
• Filer

Of course, it was not easy at all, but now I know so much more and finally have a feeling that I can do things. I also feel more confident about using git and GitHub. Moreover, I realized how important is the communication between developers and how great is the open source development with all these people that are willing to help you.

I definitely did not expect participating in such events as a part of my study in college. And I’m more than happy that I have this awesome open course class that gives me such opportunities!