DEV Community: Hung Nguyen

Final week

Hung Nguyen — Sat, 23 Apr 2022 17:11:37 +0000

Overview

It has been a long run for my second journey to Open Source. It is time for the release 3.0 to land. I am happy that finally, we already had a mobile app with posts service, which is the main feature of Telescope. On top of that, student quotes and Telescope's about screen (which is all about Telescope) has been finished with an integration of Supabase. This contains a really hard word of James, Kevan and I. I would like to say thanks to all reviewers who gave us a lot of useful feedback.

Last PR for this semester

This PR is about styling post component for the post service timeline.

A header has been added to each post. Now we can see that they will contain the name of the author, and also the title is now more similar to the original post in Telescope web app. Not only that, if you click on the author's name, the app will redirect to author's blog timeline, where you can find other blogs of that author. Based on some feedback, I still have to fix the text font and padding for the page.

Final thought

This semester is great, I have more chance to contribute open source community, especially Telescope. Also, I have more chance to work with React Native which is really new to me. Although it is the end of the semester, the app still need to have some improvement, so if I have some times, I will definitely keep working on it.

First time being a Sheriff

Hung Nguyen — Tue, 12 Apr 2022 08:43:19 +0000

What is a Sheriff in Telescope:

Sheriffs will be the one who help and manage the current project. They make sure to keep the team on track and shepherd their code through the review process so that the release of that week can be landed optimally without breaking any tests, CI. Each week, there will be 2 main Sheriffs and if one of the 2 Sheriffs cannot take the duty, a backup Sheriff will take the job.

Overview

This week, I had a chance to be a Sheriff with Tue. This week was a little bit different, we wanted to focus more on completing the current features and fixing current bug for the release 3.0 alpha. This means that we needed to "say no" to some new features or current features that are not important. Instead, we would focus wholly on important features. Here is the list of features from the email of our professor David Humphrey:

Finish the Parser service (done) and remove the Legacy Backend (not done)
Finish our monorepo tooling (eslint, tests, pnpm, etc), and fix edge cases we're hitting now (getting closer, but not all done)
Finish Dockerfile/Image optimizations and use our new Docker Registry for all of our images and deployments (getting close to being done)
Ship and finish the first version of the Docusaurus docs, including docs on anything that the next set of students will need (not done, but almost)
Get an Alpha (i.e., usable to read posts) version of the React Native App shipped (not done)
Fully integrate Supabase into our front-end and back-end in production, and stop using the Wiki Feed List (not done, and this one is critical for 3.0)
Use our front-end Sign-up flow for adding new users/feeds (not done)
Finish Search/ES improvements (progress, but not done)
Finish YouTube/Twitch feed integration (getting close, not done)
Finish dependency service so that it's usable by the next set of students in the fall for finding bugs to work on (progress, but not done)

Planning and meeting

To make things more easily, me and Tue created a new page in GitHub to group the issues into different areas. On Tuesday, I lead the meeting and at that time, I went through every current issues that were listed in our prepared sheet on GitHub. Everyone joined and helped me a lot on explaining the issues and giving me an update of the progress. And on Thursday, Tue helped everyone on reviewing the current PRs, we assigned more people to the PRs that needed to be finished the most and unassigned those who lost the interest to the PRs they had been working on. Everything went really smoothly because everyone did a good job.

Progress

Tue and I helped people on reviewing their PRs as well as asking the people in the current issues about their progress. The issue I cared the most was about React Native. I asked everyone to review my PR about the mobile app footer so that it can be merged immediately, and helped James to complete his PR about using Supabase to share file between both front-end web app and front-end mobile app. In the mean time, I was working on the loading posts for mobile app but since this week was overwhelming for me so I could only touch that issue just a little bit.

Planning for release 2.9

Hung Nguyen — Mon, 21 Mar 2022 19:29:02 +0000

Overview

This week we will land 2.9 for Telescope and as usual, I will be responsible for Telescope's mobile app using React Native. And in the release 2.9 I will work on the footer for About Screen.

Issue-3203

A footer need to be added to About Screen like the original Telescope web app. As you can see in the picture above, I have to make the UI as well as integrate with GitHub API to show the contributors of Telescope.
For now I have completed 40% of the footer. Links have been added and the Titles have been styled. The problem is that I am still researching how to use justifyContent: 'center' here so that a blank space will be created between Docs and More. I have tried it but I did not worked. flexWrap did not work either. I still have 2 days to complete it so everything should be good to have a PR before the release.

Planning

After finishing the footer, I will work on the Image service for Home Page as well as help Kevan on Posts service.

Planning for this week

Hung Nguyen — Tue, 15 Mar 2022 14:14:08 +0000

Overview

This week, I mainly focused on finishing React Native home page so that it can be merged as soon as possible. After some small fixes and rebasing, it got merged.

Code reviewing

I did a review of James' PR about making an about screen for mobile app. He did a great job but a small issue was that he needed to changed the color of header Text to be the same as Telescope's original web app.

One more cool thing is that, inside the about page of original Telescope app, there is a footer that needs to be added. So I decided to create a new issue about that. Since this week I do not have issue to work on so I assigned it to myself.

Adding footer to Mobile app's about screen

This week I will mainly focus on creating a footer for React Native app. This will be complicated since there will be an integration with Github API service. Also There are a lot of links that need to be navigated too.

Updating on current works

Hung Nguyen — Thu, 03 Mar 2022 13:37:51 +0000

Mobile home page

The PR needs some changes and updates. Firstly, I need to change the file structure of student-quotes. On this conversation, we found a good approach by moving the student quotes service to a folder that can be shared by both web application and mobile application. I filed an issue about that so that everyone will know, and if they are interested, they can pick it up. Another problem of the current home page is it is lack of image service. This service will randomly display a picture to Telescope Banner component. The issue can be found and picked up here.
In order for the PR to get merged. I need to fix the View of all the screens.

As you can see in the picture above, the screen is not positioned properly. The reason behind is that I did not use SafeAreaView. So what is SafeAreaView? It is used to avoid your screen to overflow the whole mobile screen. For example, on top of the screen of your phone, there will be a lot of features like time, battery checking, etc. If develop a mobile app without using safe area view, all the components of your mobile app's screen will override the above features. However, it is weird that SafeAreaView of React Native will not always work. And I got that problem, I used margin top to solve that issue but with different screens, we need different margins. A better approach is using SafeAreaView of react-native-safe-area-context. I fixed my PR using it and also rebased the PR. I am waiting for everyone to review and it is going to be merged soon.

Dashboard contributor card

I have been stuck on this one the most. My main problem was finding the wait to test locally. I have worked with the Dashboard page before but it was related to front-end. This issue was from the server side, with Handlebars. During the time I was looking for the solution, staging did not have this issue anymore. Due to this comment, this is because Github Token was not added. This issue may be closed and reopened if it keeps happening after we add both tokens to staging and production

Update for week 6

Hung Nguyen — Tue, 22 Feb 2022 08:42:20 +0000

Overview

The release 2.7 landed successfully this week and I am happy to be one of the contributors. Next week we will work on the plan for 2.8 and I picked 2 issues to work on.

React Native Home Page

As I mentioned in my last blog post, I finished mostly the issues and just need some styling to make the page looks like its original version.
However, it is not easy at that. I had a hard time with styling. I had to re-order some View, Text and other elements to give them appropriate styling. Styling in React Native is not nearly the same as CSS styling.

container: {
   flex: 1,
   justifyContent: 'center',
}

This means the container will spread out the whole screen if it is the only parent element. And all the child elements will be centered horizontally.
In CSS, I normally use em or rem when applying padding or margin. However React Native does not understand that. We have to use specific number like marginTop: 25
On top of that, it is sometimes annoying that React Native StyleSheet,which a lot of people and I are using, does not have some styling properties like CSS. For example, letterSpacing. To deal with this issue, I have to research a lot and basically you have to style inside the tag. So your code will have separate parts of styling:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  studentQuote: {
    zIndex: 1000,
  },
  studentQuoteText: {
    color: 'white',
    fontSize: 21,
    textAlign: 'center',
    marginTop: 25,
  },
});

<View style={styles.container}>
      <Text
        style={{
          zIndex: 1000,
          letterSpacing: 13,
          fontSize: 45,
          fontWeight: '600',
          color: '#A0D1FB',
        }}
      >
        Telescope
      </Text>
      <Pressable style={styles.studentQuote} onPress={() => Linking.openURL(studentQuote.url)}>
        <Text style={styles.studentQuoteText}>"{studentQuote.quote}"</Text>
        <Text style={styles.studentQuoteText}> {studentQuote.author}</Text>
      </Pressable>
    </View>

Dashboard issue

Big challenge for me is that the dashboard has changed a lot since the last time I worked on an issue about it. It is now using Handlebars. In terms of the issue, the contribution cards will not sometimes show the avatar of contributors if there are more than 1 authors. This problem is related to how we render the view of Handlebars. My guess is that we have to make a loop into the numbers of authors to render out all of their name and avatars.

Home page using React Native for Telescope

Hung Nguyen — Mon, 14 Feb 2022 22:44:42 +0000

Overview

Next is important since there will be the release 2.7 and I still have 2 issues to work on which are creating bottom nav-bar and homepage. For the nav-bar, I have sent a PR. Everything is almost done but I still have to find an issue that changes the Icon of Telescope while I was in the middle of rebase. This pretty sure will be done before 2.7 landed.

Home page

In terms of the home page issue or in my case named home screen, I started by taking a look at mobile responsiveness of Telescope to gain the idea of the design. Basically, there are a lot of services in the home page ^^, so I think breaking these things into smaller tasks will be much more easier. For now, I will just making a static home screen.

Home screen for now will include a component named Banner. Of course in the future, there will be more like Image service, Posts service, etc. I also created a function named navigateToContact. As it name, it is used to navigate to contact screen, I will pass this function from the parent to Banner -> BannerButtons.

Banner component will simulate the original banner of Telescope so it will have BannerButtons, and Student quotes, here I will call it BannerText.

BannerButtons has 2 buttons for navigating to Contact Screen and an option for signing in. The funny thing of React Native is that it is limited to style a Button component, so I use Pressable instead. It is something user can press on and if you style it properly, it will be come a button.

I re-used the useEffect() that we already had in the front-end of Telescope to randomly display the student quotes in the banner. And again Pressable is used as a to go to the student's blog link when user clicks on the code.

New file named student-quotes.js was copied from src/web as well.

Result

For now, I have some problem with CSS and the home page is still not styled properly so there is no PR at the moment. It will come out soon this week.

My first PR to Telescope's React Native project

Hung Nguyen — Mon, 07 Feb 2022 22:01:11 +0000

Overview

The first thing I have to say is I am very excited right now after submitting PR about adding a basic bottom navigation bar to the current UI. I was assigned to the issue that will create a basic mobile UI using React Native. I created a private chat in Slack with James and Kevan to discuss what we would add to the UI, and my task was creating a nav-bar based on the original design of Telescope.

Progress

I created a new branch first then starting to work on it. I went to Google to research how React Native app could navigate between screens. So React Native uses something called React Navigation. After following the documentation, I created a Navigation container to store the navigation in App.jsx

To create a navigation bar, I used @react-navigation/bottom-tabs. So it will allow you to create a bottom nav-bar to navigate between screens. This means I had to create some basic screens to test.

Using Navigator can help you to navigate between screen components, tabBarIcon option will allow you to add Image or Icon to the screen component.

Issues

Lots of libraries installed
Installing Android Studio to get it's virtual machine to test (Android emulator). And an Android Emulator is usually around 10GB
I am using Windows so for now I cannot test the app on IOS. But React Native is using for cross platform purpose so I guess it should be ok
I have to re-order some files to match the files structure of Telescope
My PR has a conflict with James' PR, so after my PR gets approved by everyone, I will have to ask James how I can fix this conflict before merging to master.

Preparing for Telescope 2.6

Hung Nguyen — Sun, 06 Feb 2022 19:57:07 +0000

Overview

This week's is very challenging for me. #2676 is about including the option for user to add their Youtube channels in the Sign Up flow.

Challenge

Firstly, I need to understand the sign up flow. I did talk to Duke and he knew how to fix it. It was because of a function that caused an endless loop. In the mean time, we planed to move to Supabase which is completely new to the project so for now I will have to wait for that to be merged first because it is related to the Sign Up. This means I can have some times to review and understand the code.
So far, I have applied the fix of Duke to the sign up button. The form is inside \telescope\src\web\src\components\SignUp\Forms\RSSFeeds.tsx. My guess is to duplicate the and change the variable name:

This means I have to include one more object in the FormModel:

My problem for now is to understand the validateBlog() function since it seems like this function will call a service to validate and input the blog feed to the site. And I guess I have to do the same to the Youtube UI.

React Native first implementation

In the meeting, we talked about the React Native in Telescope, and Mengi has started to do his research on how to start the project through pnpm, so soon I will pick up or file some issues about React Native. I am really excited about that, I have worked with React Native once, it was fun to play with.

Contributing to Telescope 2.5

Hung Nguyen — Sun, 23 Jan 2022 18:21:42 +0000

Overview

This week, we are planning to release Telescope 2.5, everyone has their own PRs to deal with. My issue was modifying the build log page in the dashboard to a better UI which is more understandable for users.

Progress

My first mistake that took me hours to tackle was not rebasing the newest master branch. My old version did not have the header in the build log so I was lost. After talking to the Telescope group in slack, the problem was solved. My professor also gave me the status links to test locally, this made everything way more easier.
In build-log/api.js, I added a new condition to the checkBuildStatus.

if (!data.current && data.previous) {
      return {
        building: true,
        previous: true,
        title: data.type,
        githubData: data.previous.githubData,
        startedAt: new Date(data.previous.startedDate),
        stoppedAt: new Date(),
        result: data.code,
      };
    }

If the status returns previous data and there is no current data, checkBuildStatus will return the previous data instead of building: false.
I also had to modify views/builds.hbs to create a new title if there is a previous build. This means, in build-log/build-header.js, I had to add on another if condition to create a message for the previous build

if (previous) {
    buildPrevious.innerText = 'Previous Build';
  }

After all, my code worked and I submitted the PR. My PR got reviewed by my professor, some other open source students and the Sheriff. Everything was good and I just needed to rebase and merge it to the master branch.

Discussion

A have small discussion about React Native. The idea was creating the mobile version of Telescope using React Native. I have worked with React Native once and I loved it. If someone is willing to lead the React Native project in Telescope, I will definitely join his/her team.

Plan for next week

I have 2 issues for next week:
https://github.com/Seneca-CDOT/telescope/issues/2676
https://github.com/Seneca-CDOT/telescope/issues/2296
They are related to the sign up component that has been turned off. I need to talk to Duke for more details but at the moment, I need to finish my other assignments since they will be due this week so I will take a look at both issues next week.

Another journey to open-source world

Hung Nguyen — Sat, 15 Jan 2022 22:04:53 +0000

OSD700

That is the name of the course that I am taking this semester. It will mainly focus on open-source just like OSD600, but I will need to put more effort on contributing to projects. Also, OSD700 will focus on Telescope a lot. For those who do not know about Telescope, it is an open source web server and client application that show a timeline of Seneca's open source blogs. It is a combination of different features from front-end to back-end so everyone can choose their own areas of interest to contribute to.

My Goal

My first goal is to understand Telescope in more depth, especially the front-end. Telescope has React which is the JavaScript framework that I like the most. Moreover, TypeScript is something that I would love to learn. Docker is popular at the moment and many companies use it to ship their projects. And luckily, Telescope is also using Docker to run its services. This is a good chance for me to understand it in more detail. For now, all I did was installing it in my PC to run Telescope services. Last but not least, this is project of a community, so most of the time, you have to read and understand the code of other developers. This is awesome since it can be a good example of working at a company, on a software that has been developing by many developers. It is quite a bit challenging but I feel excited and ready.

Progress

So far I have picked an issue in Telescope. If there is no current build, it will display an error message to the browser and it is not a good practice. My job is to show the previous build instead so the terminal will not be empty and the error message should be gone or replaced with a better UI. At the moment, I already had everything set up for Telescope, but I am still finding the way to understand the build log in local. It would be hard to test since I need to put some code for the build log to run. Not only that, I have still not found the /status which was the route to show current ,previous, and processing build logs. The code said it was at port 4000/status but when I ran everything locally, port 4000 was not found and with the Docker service, it was related to Firebase instead.

Release 0.4: Final step

Hung Nguyen — Mon, 13 Dec 2021 12:20:57 +0000

Overview

As I mentioned in my last blog post, I finished the Telescope's issue and my PR got accepted. So I spend this week only for the second issue.

Issue

I had a hard time finding the design for the leaderboard. There were so many templates and also the design should match the whole website in general, especially the background of the site. This is the current temporary leaderboard they have:

After hours, I came up with a few designs but this one like the most.

I send the design to Discord but none of the owners replied to me to I just started working on the leaderboard page.
Their project was a ReactJs project so setting everything up for me was not hard. However, there were like thousands lines of code and the way they write their code was confusing to me. My solution was just finding the right components for the leaderboard and where it was located so that I did not get distracted by something else. Luckily, after 15-30 minutes, I found that, but I had to write a bunch of console.log to know where the component was.

Progress

I started by creating a new branch. First thing I did was keeping the elements inside the JS file intact. I only added the className so that I could access it from the .css file. To know if my class were already applied to the elements, I added some background-color. After that, I spend some times to understand the React code and how they displayed the data to front-end. Another issue that just came to me. There were the gaps between the tr elements from the design:

I thought I just needed to add the margin to it. But it was not that easy, adding margin did work. I was really surprised and started to do some research about table element. The solution was separating the elements and adding the spacing for it:

To match the design, I needed to add background for each row:

The reason I named my class like color0, color1 was utilizing the index parameter from the map function:

Also, we cannot add the border-radius for tr so I needed to add this feature to td instead:
tr td:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}

tr td:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

tr th:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}

tr th:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

I also had to remove some old CSS styling of the owner. And this is the final result:

You will see I modify the Go to Page: 1 so it would be neat and more beautiful. Also I added a yellow cup (from material-ui) for the top player. This will make my design more interesting.

(Note that, only the cell that has value === 1 will have the cup icon)

Pull request

After that, I submitted a PR. It did not go smoothly because there were some request changes from the owner. He would like me to modify the colors and there was a bug related to displaying:
https://user-images.githubusercontent.com/72855990/145670180-16c00799-f1b7-4c01-9542-d1811b355cd9.png
(If more than 5 players are displayed, the rest will be transparent)
At the moment, I am still working on the changes to my PR and I am pretty sure that everything will be good because I know how to handle this problem.

Last thought

This final release was very useful, I have learnt a lot of things from understanding a completely new style of writing React code. Also, I learnt new feature of table elements in CSS, and this will be great for me in my future project that would use table.