End of Term Contributions
With the term coming to an end, we are wrapping up the external and internal contributions talked about in my previous blog post. Just a briefing on the task that we must completed, we must complete 1 internal PR inside our Telescope project and 1 external PR I have chosen inside of Darkreader.
Internal PR
My internal PR is for the email section in the Telescope project and it is to create an email template to make it easier to send an email as it is not descriptive enough and looks plain.
Issue
This issue needed to be fixed as the current email is displayed as a following by using the following function
sendEmail.sendMessage(‘student@hotmail.com’,’Seneca had an Testerror’,’<p>Test</p>’)
This is not sustainable as you would have to design the email every time you send an email using HTML and if not designed properly it would not be descriptive enough.
Preparation
As stated in my previous blog I wanted to create a simplistic design because it would make code more sustainable for people that use it next and would have to use a table type structure if i’m creating it from scratch.
I started programming the template from HTML body element and added a table inside.
<body>
<table border=”1" cellpadding=”0" cellspacing=”0" width=”100%” </table>
</body>
After I created my mock up, It did not look good because you wouldn't be able to see if its an error without reading the second line, so I decided to create a design where the error is beside the name
Solution
After experimenting with the design and attempting to make a clean design, I ended with the code shown below
‘<body>’ +
‘<table border=”1" cellpadding=”0" cellspacing=”0" width=”100%”>’ +
‘<td align=”center” bgcolor=”#70bbd9" style=”padding: 40px 0 30px 0;”>’ +
‘<h1 style=”font-size:40px”><b>Seneca-CDOT Telescope</b></h1>’ +
‘<a href=”https://github.com/Seneca-CDOT/telescope" style=”font-size:30px”>Github</a>’ +
‘</td>’ +
‘<td align=”center” bgcolor=”#db3d3d” style=”padding: 40px 0 30px 0;”>’ +
‘<h1 style=”font-size:40px”><b>⚠️ERROR</b></h1>’ +
‘</td>’ +
‘<tr><td style=”padding: 40px 30px 40px 30px;” colspan=”2">’ +
‘<table cellpadding=”0" cellspacing=”0" width=”100%” style=”table-layout: fixed;”>’ +
‘<tr><td width=”15%”><b>Error Message:</b></td>’ +
`<td style=”word-wrap:break-word” width=”85%”>${message}</td></tr>` +
‘</table></td>’ +
‘</table>’ +
‘</body>’,
Experience
I really had fun designing from previous experiences, it was like designing the front-end of a website with a lot of restrictions. I really like how the email design turned out compared to my previous mock up
As always, it was great to collaborate with others to get this merged. Although others may not leave a comment when they approve which is probably not best practice, I had contacted them to see if everything was fine with this PR.
External PR’s
Darkreader Release 0.3
After the initial PR for this issue, he left a change request. This was a great learning experience as I learned more about how Darkreader works and the action that takes place behind the scenes. Darkreader uses Malevič.js to manage its content and contains many custom functions. The creator of Malevič.js, alexanderby was in charge of reviewing this PR as we talking back and forth for 7 days before this PR got merged. This was a great experience as it shows the dedication and friendliness of the open source community. You can view our full conversation in the above link as a lot was talked about.
Darkreader Release 0.4
My external PR was the same project that I worked on for release 0.3. The project that I chose was Darkreader and the issue was that the Site list on the application is not maintainable when the list gets too long
Issue
This issue would require me to add a new feature to Darkreader to increase the maintainability of this Site list, this means that I will either create a sort functionality or filter for this initial PR and get feedback from the code maintainer as they have a certain design in mind.
Preparation
I started exploring what goes into the Site list and how the data is transferred to the text area. From last PR, I came prepared as to not change the code in the debug folders but instead change it in the actual files. I found and started from where the site list is generated from.
darkreader/src/ui/popup/components/site-list-settings/index.tsx
After playing around and debugging the code, it seems that the data stored in their props ( data.settings.siteList ) contains an array of elements and then is generated into the site list. This means that if I wanted to sort the list then I would have to change the props and I would need to create a function that follows the design.
I started with a button that would sort the elements and then moved onto a toggle button. To implement this toggle button it has a minimum of 4 criteria according to the other toggle buttons in the code. For this toggle button, I would have to create locale variables in all the different languages and would have to add 3 variables to 3 of their definition files. I held off on the locale variables until the final design was implemented because it would be a waste of time if they did not like how I labeled the text for the toggle buttons.
After the toggle button, I started to work on the sorting functions. I started with the built in sorting function (sort()), but it could not detect the beginning of the strings such as http,https and www. So i started creating my own sorting function that would parse the string before sorting.
Sudo code I created before creating the function
- Sort list takes in two parameters: The site list and ascending or descending and return the site list
- You would have to parse the string for http, https, www
- It looks like they use unary operators in a lot of the code so I would have to include that as well.
- Last step is to refresh the list to the updated list
Solution
This function will first start to sort the site list but before it returns which element goes first, it parses the string using the function below and depending on the mode it will return which elements goes first. Mode == true will return ascending, Mode == false will return descending. After, it calls actions.changeSettings will change the siteList and refresh the list.
function sortList(sitelist : string[], mode : boolean) {
sitelist = sitelist
.sort((a, b) => {
var textA = parseURL(a);
var textB = parseURL(b);
return mode ? textA.localeCompare(textB) : textB.localeCompare(textA)});
actions.changeSettings({siteList: data.settings.siteList});
}
This function will take in the site list elements and remove the https, http and www from the string.
function parseURL(text : string) {
return (text
.toLowerCase()
.replace(/^(https?):\/\//,’’)
.replace(/\www./g,’’));
}
For this toggle button I had to add new data in three files
- src/background/user-storage.ts — filterListed: false,
- src/definitions.d.ts — filterListed: boolean,
- src/ui/connect/mock.ts — filterListed: false,
In the onChange function it grabs the value from the filterListed added in the three files and then sorts the list depending on this value. After it changes the filterListed to the selected value on the Toggle
<Toggle
checked={data.settings.filterListed}
labelOn={“Ascending”}
labelOff={“Descending”}
onChange={(value) => {
sortList(data.settings.siteList,value);
actions.changeSettings({filterListed: value})
}}
/>
Change Request
On 12/4/2019 alexanderby submitted a change request, he wanted the toggle to be changed into a multiswitch, create a popup, filter site list and change my variable names. I have been working on this for the past couple days, but there’s a lot of grey areas in the code that is pretty confusing and will take some time to figure out.
Experience
This PR has been pretty fun as I have been working with both front-end and back-end for Darkreader. The challenging part of implementing this initial PR and for the change request is to understand how the data moves around.
For example
<MultiSwitch
value={engineNames.find(([code]) => code === engine)[1]}
options={engineNames.map(([, name]) => name)}
onChange={(value) => onChange(engineNames.find(([, name]) => name === value)[0])}
/>
This is code for the MultiSwitch taken from one of their forms. I understand how it works, but when I tried to implement it does not work properly.
This is probably due to the definition files where I added the variables for the toggle switch
- src/background/user-storage.ts — filterListed: false,
- src/definitions.d.ts — filterListed: boolean,
- src/ui/connect/mock.ts — filterListed: false,
I will have to look more in depth to how everything connects before actually trying to implement the change request.
Overall Experience OSD600
Overall I really enjoyed this course — OSD600 and would definitely take OSD700 if I was not in my last semester. With the support of my wonderful professor David Humphrey, we got to experience the world of open source. Not only did we get to learn Git and increase our proficiency in it, we got to experience using Github as source control, participate in the most recent Hacktoberfest, contribute to repo’s used in industry and also learn what its like to contribute on an internal project with a lot of people. If I did not take this course, I would not have experienced these things and I am really happy that I took it as I would of regretted not taking it later.
Links
Previous Blog — https://medium.com/@rwilson31/update-on-the-release-ee437a3a177a
Internal
Issue 0.3 — https://github.com/Seneca-CDOT/telescope/issues/25
PR 0.3 — https://github.com/Seneca-CDOT/telescope/pull/93
Issue 0.4 — https://github.com/Seneca-CDOT/telescope/issues/190
PR 0.4 — https://github.com/Seneca-CDOT/telescope/pull/389
External
Issue 0.3 — https://github.com/darkreader/darkreader/issues/1621
PR 0.3 — https://github.com/darkreader/darkreader/pull/1732
Issue 0.4 — https://github.com/darkreader/darkreader/issues/682
