Release 0.3 – Learning

With Hacktoberfest 2019 officially over its time for me to take the next step. I learned a lot and met a lot of the goals I set for myself at the beginning. For the next step in my journey in the open source community I want to take on a bigger challenge.

There are two things I intend on working on over the past few weeks. Our class is working on a large open source project. Telescope is our attempt to revamp our website. This is where we view open source blog posts by past and present students. The other issue I’m working on this week is continuing my previous issue with Microsoft. Last week when working on a issue one of the members of the project noticed another issue, and I offered to work on it and fix it.

Telescope

Telescope has a lot of different parts to it. The first challenge was to find the part of the project I wanted to work on. Fortunately this didn’t turn out to be too difficult, as I was able to find an issue I felt I could work on that would also allow me to learn something new. That is one of my goals in this class is to continue to learn new things while working on new issues. In this project we are using bull to queue up our jobs, these jobs can include parsing a feed of blogs and extracting all the information in them. My part of this project was to implement bull-board, which is a dependency that would allow us to visualize the jobs as they were being processed. While the documentation wasn’t perfect there was definitely enough provided in the repo for me to be able to set it up and try and see some jobs being queued up.

const Bull = require('bull');
const { setQueues } = require('bull-board');

require('./config');

const queue = new Bull('feed-queue', process.env.REDIS_URL);

// For visualizing queues using bull board
setQueues(queue);

module.exports = queue;

While the set up for using bull board was fairly straight forward, I am also asked to use express routing. This is something I had no previously done but do think would be useful to learn how to set up. The idea behind express routing is that if we were to put all of our routes in a single file thing can get quite chaotic very quickly. We could possibly end up with file with hundreds of different routes, and multiple people working on it which could lead to conflicts. With express routing we can break up this one large file into many smaller ones. This is exactly what I did for the route I set up to view the bull board queues.

const express = require('express');
const { UI } = require('bull-board');

const router = express.Router();

router.use('/queues', UI);

module.exports = router;

Accessibility Insights for Web

For my last PR during Hacktoberfest I worked on a small issue on an extension created by Microsoft. It was an interesting project related to accessibility and I was fairly interested continuing to work on it. While I was working on a fix for the previous issue, it was brought up there was another problem coming up. Previously I fixed an issue with the overall size of a drop down menu and text overlap when the text spacing was being modified. While that was happening the drop down menu also dropped down outside of the header. Initially I thought to address this at the same time, but upon looking into it further the fix would require quite a few more changes. In order to find the solution to the problem I looked into how the code they already had worked. Just below the header bar there is a second command bar which acted as expected in different circumstances. They way that was set up was as a flex-box.

image
Drop down dropping below the header bar when a bookmarklet is applied

Flex-box is a way of doing CSS that allows for easier and more powerful formatting and positioning. If there was problems with centering and positioning then it made sense to make the header bar a flex-box as well. Again this felt like a useful thing to learn beyond this one issue.

In order to learn more about flex-boxes I looked into some tool, and one that I found to be very useful was Flex-box Froggy. Flex-box Froggy was a simple web based “game” to learn how to use flex-boxes to achieve various goals. I found it incredibly useful in teaching me how to use them, it was really simple and fun to work through the puzzles.

Flexbox Froggy a game to learn how to use flex-boxes

After learning about flex-boxes I began working on the code base. The first step was to make the entire header bar a flex box. After that I played around with different flex box properties. I had some challenges here getting everything to work correctly. Whatever I changed I could not get all the contents of the header to end up in the correct place. Again I looked at the command bar to see how it was being done there. And that is when I noticed that the left side and right side of the command bar were wrapped in a a div that was also a flex-box. Flex boxes only effect the container and their direct children. Understanding this I created a new div to wrap the left side of the header bar and left the gear icon on the right separate. With this change I as able to get the drop down menu to remain centered while also positioning all the other contents in the right places.

 public render(): JSX.Element {
        return (
            <header className="header-bar">
                <div className="header-text-switcher">
                    <HeaderIcon deps={this.props.deps} />
                    <div className="ms-font-m header-text">{title}</div>
                    {this.renderSwitcher()}
                </div>
                {this.renderButton()}
            </header>
        );
    }
    .header-bar {
        padding-left: 12px;
        position: relative;
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        min-width: 550px;
        .header-text {
            padding-top: unset;
        }
        .header-text-switcher {
            display: flex;
            align-items: center;
        }
    ...
    }
image
After changing the header bar into a flex box everything is correctly positioned

Conclusion

At the end of this new section of this course I am pretty happy with all the new things I have been able to learn. Between express routing and flex-boxes I have worked with two things I think and have been able to apply in other places. While taking this course I am also working on my capstone project, and I begun to implement both of these technologies into it.

Telescope:
Original Repo: Seneca-CDOT/telescope
My Fork: varshannagarajan/telescope
The Issue: https://github.com/Seneca-CDOT/telescope/issues/62
My Pull Request: https://github.com/Seneca-CDOT/telescope/pull/200

Accessibility Insights for Web:
Original Repo: microsoft/accessibility-insights-web
My Fork: varshannagarajan/accessibility-insights-web
The Issue: https://github.com/microsoft/accessibility-insights-web/issues/1219
My Pull Request: https://github.com/microsoft/accessibility-insights-web/pull/1693

One thought on “Release 0.3 – Learning

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website at WordPress.com
Get started
%d bloggers like this: