DEV Community: Tuan Thanh Tan

SPO600 - Project Stage 3

Tuan Thanh Tan — Wed, 15 Dec 2021 15:43:29 +0000

Introduction

Hello everyone, my name is Dustin. Today I'd like to talk about my last stage of spo600 project.

In my previous blog, I had a little discussion about ffmpeg and how it is important to us. So for this stage, I'm going to give some suggestions on how ffmpeg should be extended to support Scalable Vector Extensions v2(SVE2)

About SVE2

Speaking about SVE2, it is a superset of SVE and Neon. SVE2 gives more function domains, because it inherits its previous concepts including vector registers, and operation principles. So people are able to opt for hardware with a maximum of 2048 bits. Refer here

Recommendation

Because ffmpeg focuses much on process multimedia content such as audio, video, subtitles and related metadata, which are considered to be quite heavy as it involves a lot of decoding, encoding,... So SVE2 would bring a huge benefit in terms of options, flexibility. The good old SIMD instructions to do some color conversions or scaling routines can be improved by a library which is called libswscale. This library will tremendously bring ffmpeg to a whole new level as it help improve the process time. Apart from that, ffmpeg is using Neon in order to do some vector thing which can be improved by switching to SVE2 in order to utilize its benefits as it allows vector code to adapt to a wide range of vector lengths during execution time.

Wrap up

SVE2 has 32 scalable vector registers which ranges from Z0 to Z31 and it can be implemented from 128 bits up to 2045 bits with 128 increment which is amazing so by taking advantage of SVE2, people can actually maximize the usage of ffmpeg. This is a powerful tool but when given an add-on, it will offer more strength that facilitates users.

SPO600 - Project Stage 2

Tuan Thanh Tan — Sat, 11 Dec 2021 21:00:35 +0000

Introduction

Hello everyone, my name is Dustin. Today I'd like to talk about my process of working with project stage 2 in SPO600 course, and how I got it done, and the result.

For this stage 2 of the project, you have to choose one of these packages open source packages
ardour eigen ffmpeg gnuradio gromacs lame mjpegtools nettle numpy pipewire pulseaudio vlc xz

to do a little research about. After a while looking it up online, I decided to go with ffmpeg because it may be the closest one to me :) The project can be found here.

As they state on their github: FFmpeg is a collection of libraries and tools to process multimedia content such as audio, video, subtitles and related metadata. This basically means that we have already used it before but we don't really know their existence because it is just a small program in daily use of computer but has a huge importance. This project has lasted for more than a decade now since it's first created but we can see it's still actively being updated and contributed by looking at the last commit which is just a few hours ago.

About the package

SIMD (Single Instruction Multiple Data) is a processing which using single instruction to process data including audio, video, subtitles and related metadata.

They have like more than thousands files which contain humongous lines of code in there so finding which one is which also proposes a great challenge. But Github makes it easier as it offers people with search in the directory.

This is an example of them using SIMD in Aarch64 architecture.

Regarding x86_64 folder, it can be found here

and SIMD use can be found here

Because I'm not familiar with these architectures and I just spent a few hours looking at it. So I cannot fully understand what's going on in these files. It's just my personal perspective. And these files don't include lots of comments which brings the difficulty to a whole new level.

Speaking of h264pred_neon.s, in my opinion, it will be called during runtime because the line will only be called when the function outside is called. As we can see, this function is deep inside a file, another function from outside of this file can directly calls the function. Apart from that, it has a lot of function declarations and its implementations which I think will be called somewhere else.

For hscale_fast_bilinear_simd.c, as far as I understand, it's written in c because it's in .c file but nested within a __asm__. This file will create optimized horizontal scaling routine. This scaler is made of runtime-generated MMXEXT code using specially tuned pshufw instructions. For every four output pixels, if four input pixels are enough for the fast bilinear scaling, then a chunk of fragmentB is used. If five input pixels are needed, then a chunk of fragmentA is used.

Wrap up

It seems like this project is using a lot of SIMD in its code as in aarch64 folder, most of the files are .c, and .S. Because this is a transcoding, conversing library so it needs to utilize SIMD to maximize its performance.

This is one of the most difficult assignment I've ever had in this course. Mostly because I have not got a chance to deeply learn about these architectures. Besides, this is a big project that has been there for more than 1 decade, more than 100k commits have been made. So a few hours of looking at the source code means nothing.

Contributing to Telescope project (part 3)

Tuan Thanh Tan — Fri, 10 Dec 2021 16:24:01 +0000

Introduction

Hello everyone, this is part 3 where I'd like to talk more about the details of each issue that mentioned in part 2.

Process

First

Pull request for the first issue can be found here
To be honest, this issue only took me around 10 to 15 minutes to fix as it's about removing const fetch = require('node-fetch'); and changing it to const {fetch} = require('@senecacdot/satellite');. The thing is that you have to use a command to look for it git grep node-fetch.

Second

Pull request for the second issue can be found here
Because Telescope is written in React so I have to work with component most of the time. This is no exception. I created a dedicated component for the share button.

import { useState } from 'react';
import { Tooltip, IconButton, createStyles, Zoom } from '@material-ui/core';
import { makeStyles, Theme } from '@material-ui/core/styles';
import { withStyles } from '@material-ui/styles';
import CopyIcon from '@material-ui/icons/FileCopyOutlined';
import Check from '@material-ui/icons/Check';

type Props = {
  url: string;
};

const ButtonTooltip = withStyles({
  tooltip: {
    fontSize: '1.25rem',
    margin: 0,
  },
})(Tooltip);

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    copy: {
      fill: theme.palette.primary.main,
    },

    check: {
      fill: '#3fb950',
    },
  })
);

const ShareButton = ({ url }: Props) => {
  const classes = useStyles();

  const [isCopiedToClipboard, setIsCopiedToClipboard] = useState(false);

  const copyToClipboardEvent = () => {
    navigator.clipboard.writeText(url);
    setIsCopiedToClipboard(true);

    setTimeout(() => {
      setIsCopiedToClipboard(false);
    }, 3000);
  };

  return !isCopiedToClipboard ? (
    <ButtonTooltip title="Copy URL" arrow placement="top" TransitionComponent={Zoom}>
      <IconButton
        onClick={() => {
          copyToClipboardEvent();
        }}
      >
        <CopyIcon className={classes.copy} />
      </IconButton>
    </ButtonTooltip>
  ) : (
    <ButtonTooltip title="Copied" arrow placement="top" TransitionComponent={Zoom}>
      <IconButton>
        <Check className={classes.check} />
      </IconButton>
    </ButtonTooltip>
  );
};

export default ShareButton;

In the code above, as you can see, I tried to use as much material ui component as possible such as the CopyIcon, Check icon, and some class components. For the share button, when a user clicks it, it will be changed to the check button. It also shows tooltip to let user know what is happening. After adding the share button component, all I have to do is put it in both Posts/PostInfo.tsx and Posts/Post.tsx.

Third

Pull request for third issue can be found here
This is my most commented pull request I've ever had. Because different people have different preferences so it's difficult to just make one that fits all. And after that, I also have struggle with aligning it properly in different screen sizes. After struggling with that, I also had to make eslint happy as new esline rules just got merged into the main branch. After a while, I thought I would have done but a problem with search bar occurred. The problem was found when I pull new code from upstream and force push to my branch. At first, I found I introduced the bug, so I spent way too much time figuring out how to fix it. I almost gave up but it turned out that my code before I pulled from upstream was working just fine, so I'd believe that it was not me who introduced the bug. After that, I also had to adjust currentPost variable in order that it is side effect free.

This is the code that I added in Posts/Timeline.tsx

  const firstLength = pages[0].length;
  const getCurrentPost = (pageIndex: number, postIndex: number): number => {
    // this function takes 2 indexes from the 2-d posts array and length of the first array
    return pageIndex * firstLength + postIndex + 1;
  };

  const postsTimeline = pages.map((page, pageIndex): Array<ReactElement> | ReactElement =>
    page.map(({ id, url }, postIndex) => {
      return (
        <PostComponent
          postUrl={url}
          key={id}
          currentPost={getCurrentPost(pageIndex, postIndex)}
          totalPosts={totalPosts}
        />
      );
    })
  );

Apart from that, it's just about getting totalPosts, adjusting styling,...

Thank you for reading.

Contributing to Telescope project (part 2)

Tuan Thanh Tan — Fri, 10 Dec 2021 15:20:29 +0000

Introduction

Hello everyone, my name is Dustin. Today, I'd like to talk about the process of contributing to an open source project on Github, which is 🔭.

Process

In this part, I mainly go through all issues that I've worked on and and a little introduction about what it is. And in part 3, I'll give more details about each issue and how I really feel about it.

First issue:
The issue can be found here. This issue was open for quite a long time and was resolved by one of contributors but as the project grew, people introduced the same issue over and over again, so the issue was open again. The issue was about moving from using const fetch = require('node-fetch') to extract it from @senecacdot/satellite as satellite exposes it.

Second issue:
My second issue can be found here
Image using Telescope one day, and you find an interesting post and you want to share it with your friends but the process of going to the original url and copy the url is quite cumbersome, so I introduced a share button which will help user to copy the origin url directly to the clipboard. Apart from that, This issue also contains another potential feature which is bookmarking posts. In my opinion, this feature is quite cool and important as Telescope is about all PULLING all blogs from different sites and different people and putting it in one place. One who likes a blog posted on dev.to by person a and a blog posted on medium.com by person b has no other way but going to original url's and signing up and saving it. What if we can make it way more easy for Telescope's users by implementing bookmarking in Telescope. I already filed an issue for the idea which can be found here. This may be another cool feature so I leave it for future students

Third issue:
My third issue can be found here
This issue was open a year ago but doesn't seem to catch lots of other students' interest. This issue is about showing post count when users do a search. Without post count, user is just like a sailor without a compass. They just keep going and going but don't know where they're going exactly. The issue required me to not only figure out how to work with data returned back but also some styling.

Thank you for reading.

SPO600 - Project Stage 1

Tuan Thanh Tan — Tue, 07 Dec 2021 19:58:56 +0000

Introduction

Hello everyone, my name is Dustin, and today I'd like to talk about my experience working on project stage 1, and some of the testing stuff as well as the performance of different types of algorithms.

About the this project stage

The project requires us to compile different algorithms to see if there's any difference between them. There's six programs that have been provided by the professor.

vol0.c is the basic or naive algorithm. This approach multiplies each sound sample by the volume scaling factor, casting from signed 16-bit integer to floating point and back again. Casting between integer and floating point can be expensive operations.
vol1.c does the math using fixed-point calculations. This avoids the overhead of casting between integer and floating point and back again.
vol2.c pre-calculates all 65536 different results, and then looks up the answer for each input value.
vol3.c is a dummy program - it doesn't scale the volume at all. It can be used to determine some of the overhead of the rest of the processing (besides scaling the volume) done by the other programs.
vol4.c uses Single Instruction, Multiple Data (SIMD) instructions accessed through inline assembley (assembly language code inserted into a C program). This program is specific to the AArch64 architecture and will not build for x86_64.
vol5.c uses SIMD instructions accessed through Complier Intrinsics. This program is also specific to AArch64.

My very first prediction was that vol0 would be the slowest because it has some castings, and vol1 will be faster than vol0, and vol3 will be the fastest.

Process

First, I ran some tests on AArch64 architecture as well as x*4_64 architecture. The result it gave back to me was quite similar to each other though.

But before actually running the program, I have to copy the folder to my current directory so that I don't need to move around too much and then I have to unzip the archive

For copying to current directory I used
cp /public/spo600-volume-examples.tgz .

For unzipping the folder, I used
tar xvf spo600-volume-examples.tgz

Because I copied it to my current working directory, I can test it now in my current directory. Then, I would have to use a command which is called make to build program.

Make will give me programs highlighted on green

Then in order to invoke a program, I will have to just simply type the file name and then enter.

This the test that I tried to run on AArch64 Architecture. I also run the same on x84_64 Architecture but the result was pretty much the same to each other.

The screenshot below shows the results given back when I ran on AArch64 architecture. Some of the results (vol0, vol2l vol4, vol5) are the same at 481.

Next, in order to know its performance, I have to run it with time command.

As we run programs with time, it gives us back a bunch of information: real, user, sys. From my perspective, Real and User are the same and all sys is O. real is the total time that the command ran on the system while user is the time it takes to execute the command on the users` side.

After that, I use the command free -m to check the relative memory usage of the program on my current machine.

On AArch64 architecture

On x86_64 architecture

Questions found in program comments:

for (x = 0; x < SAMPLES; x++) { ttl=(ttl+out[x])%1000; }
We have a loop right here to go through all SAMPLES variables that we defined above. Then we have a calculation of (ttl + out[x]) then divide it with 1000 to get the remaining.

printf("Result: %d\n", ttl); return 0;
The result of ttl will be printed here by using printf

Q: What is the purpose of the cast to unint16_t in the next line? precalc[(uint16_t) x] = (int16_t) ((float) x * VOLUME / 100.0);
Because we wanted to make sure that it is an unsigned 16-bit integer

Q: What's the point of this dummy program? how does it help with benchmarking?
The dummy program will not scale the volume. And it helped different computer run the same program to test its performance.

Q: what is the purpose of these next two lines? in_cursor = in; out_cursor = out;
The purpose of these two lines are to assign the input cursor to array in and output cursor to array out

Q: should we use 32767 or 32768 in next line? why? vol_int = (int16_t)(VOLUME/100.0 * 32767.0);
I think we should use 21767 because this is a 16 bit integer, the max value is 32767.

Q: what does it mean to "duplicate" values in the next line? __asm__ ("dup v1.8h,%w0"::"r"(vol_int)); // duplicate vol_int into v1.8h
As I can understand, the duplicate will be stored in a vector, which will be like an array that has the same size. The duplicate will be stored in the dup v1.8h.

Thank you for reading.

Planning for my final release assignment

Tuan Thanh Tan — Sat, 27 Nov 2021 20:16:53 +0000

Introduction

Hello everyone, my name is Dustin. Today, I'd like to talk a bit about my plan of what I'm going to with the final assignment in OSD600.

Plan

I really feel like working on Telescope issues and stuff as the project's really potential and still has a lot of features waiting to be added.

The reason why I don't choose an external project is because it's gonna take much of my time finding one, and I'm unsure that I can even complete it on time. So instead I go with Telescope because I'm familiar with some aspects of it and it has a great community and an awesome professor who's always willing to offer me support.

Currently, I'm actively looking for issues that are relevant to ENHANCEMENT OR FEATURE, so it would be much of a work for me to do.

One of another reason why I chose Telescope is because it's production ready and has a lot of technologies that are being used for production by many people. If I choose a random project that has a COOL feature waiting to be implemented, I can of course give it a try but it may not have some really cool technologies that I'm looking for in a project.

I just put my names in 2 two issues that are also ENHANCEMENT for the project. The first one is about sharing posts and the second one is posts count in search. Yes, I mean they're small and not meeting the requirement. But I just finished a small fix and still looking for more issues. Apart from that, the sharing posts thing can be expanded more as I can add the feature BOOKMARK posts for authenticated users so that I can come back and read.

Thank you for reading.

Lab 5 - SPO600

Tuan Thanh Tan — Sat, 27 Nov 2021 19:44:50 +0000

Introduction

Hello everyone, my name is Dustin. Today I'd like to talk about my experience of working with Loops in AArch64 and x86_64 Assembly. Stay tuned!

Progress

For previous weeks, I got a chance to work with 6502 Assembly language which is quite not my interest but when moving to aarch64 and x86_64, I found it a little bit easier to understand! However, this is still difficult to our group. It requires a lot of thinking and we were struggling so hard to get it running correctly.

Lab 5 instruction can be found here.

For this lab, we're asked to extend the assembler program (both x86_64 and aarch64) to suppress the high digit when it is 0. In other words, the printed values should progress from 0-30 instead of from 00-30. It is ok to output a space in place of the suppressed digit (this will cause the numbers to be aligned vertically in the output)

For this lab, instead of using an emulator that we've been using for the last couple weeks, we're now using Linux to build and run the program.

In order to compile an assembly file, we had to run two commands. In this case, we have a file name helloWorld.s so we have to use this command as -g -o helloWorld.o helloWorld.s to compile it. And then we have to take our helloWorld.o file and link it using this command ld -o helloWorld helloWorld.o and then we can actually run our program using this command ./helloWorld. This is quite a heavy step but it is what it is. Normally this is we have to do under the hood but visual studio or other IDMs have taken care for us. If you're trying hardcore and using command line completely, you may feel like using this.

After taking a look at files supplied, we started to start writing some codes to see what's going to happen. The professor gave us two code files including a file for loop and a file for printing out hello world string. So we did some experiment and we got this:


.text
.globl _start

min = 0                          /* starting value for the loop index; note that this is a symbol (constant), not a variable */
max = 30                         /* loop exits when the index hits this number (loop condition is i<max) */

_start:
        mov     x19, min
        mov     x0, 0           /* status -> 0 */

loop:
        mov     x0, 1           /* file descriptor: 1 is stdout */
        adr     x1, msg         /* message location (memory address) */
        mov     x2, len         /* message length (bytes) */

        mov     x8, 64          /* write is syscall #64 */
        svc     0               /* invoke syscall */

    add     x19, x19, 1
        cmp     x19, max
        b.ne    loop

        mov     x0, 0           /* status -> 0 */
        mov     x8, 93          /* exit is syscall #93 */
        svc     0               /* invoke syscall */

.data
        msg:    .ascii      "Hello, world!!!\n"
        len=    . - msg

The next task is that we have to use loop in order to print a given string N times. So we're thinking about storing the value of 0 (the min value) into x19 and 0 into x0. Then, we added the file descriptor to x0, memory address of the message to x1, and the length of message to x2.

This is the final code:

.text
.globl _start

min = 0                          /* starting value for the loop index; note that this is a symbol (constant), not a variable */
max = 31                         /* loop exits when the index hits this number (loop condition is i<max) */
ten = 10
_start:

        mov     x19, min
        mov     x17, ten
        mov     x0, 0           /* status -> 0 */

loop:
        mov     x0, 1           /* file descriptor: 1 is stdout */
        adr     x1, msg         /* message location (memory address) */
        mov     x2, len         /* message length (bytes) */

        mov     x18, x19        /*mov x19 into x18 */
        udiv    x9, x18, x17
        add     x13, x9, 0x30   /*convert quotient into char*/

        msub    x10, x9, x17, x18 /*get remainder*/
        add     x14, x10, 0x30  /* add value at x10 and 0x30, and store in x14 */
        adr     x15, msg        /* put address of msg into x15 */
        strb    w13, [x15, 8]   /* storing the byte that is at 14 into x15, 8 spaces over, which is 8 spaces over from the msg string */

        strb    w14, [x15, 9]   /* storing the byte that is at 14 into x15, 9 spaces over, which is 9 spaces over from the msg string */
        mov     x8, 64          /* write is syscall #64 */
        svc     0               /* invoke syscall */

        add     x19, x19, 1
        cmp     x19, max
        b.ne    loop

Wrap up

The actual work took us a lot of time and effort as nobody is familiar with this before, so it means we have to learn everything from scratch.

Thank you for reading.

Publishing my package to NPM

Tuan Thanh Tan — Thu, 25 Nov 2021 19:17:05 +0000

Introduction

Hello everyone, my name is Dustin. Today, I'd like to talk about my experience of publishing my static site generator to NPM. It's quite a fun experience as I finally made my project up and running in public.

Process

I've used this as instruction to publish it to NPM.

You can check it out here

Because I already built my project for quite a long time so, I can skip most of the steps, and just focus on this step and some steps that help me understand the semantic versioning and dist-tags.

When I first start using command line npm publish to publish the project, I had to sign up and log in to NPM. But I encountered an error where it said something like this

npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/cv-ssg - Forbidden
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.

As it stated right there, the error code is 403 which means it involved sign up or log in part. After a few minutes, I just realized that I forgot to verify email. So just make sure that if this is your first time publishing a project to npm, you have your email verified.

While working with updating version stuff, I also had to delete e2e snapshot file and run it again because when I changed the version in the package.json, and pushed the repo to github, the github action won't be happy. I'm not sure if I'm doing the right way that other people do. If I don't, please show me. Thank you.

I tried to test it as a client's perspective by installing Nodejs and then I do npm install -g cv-ssg to install it globally so that I can run it anywhere I like. As expected, it worked very well, I got no error. Or maybe I'm just testing the bright side of the project.

In order to tackle that problem, I got one of my friend who is also a student of this course to test it out on his computer. Fortunately, he also ran it successfully a few times using cv-ssg command.

Wrap up

For this lab, it didn't require us to code anything as this is like a final step for the project, not quite the final one because if the project is delivered to end users and they found bugs or errors. It needs to be fixed and published again. The cycle keeps going and going.

Reviewing Github pull requests - OSD600

Tuan Thanh Tan — Fri, 19 Nov 2021 23:14:05 +0000

Introduction

Hello everyone, my name is Dustin. Today, I'd like to talk about my experience of reviewing other people's code.

Progress

In my recent pull request, it was actually one pull request broken into 2 small parts for 2 people, me and one of my friend. The issues needed to be solved are quite relevant to each other, so we would know what problem each other's having and facing right now.

My friend's pull request
My pull request

The experience was fantastic as I got to talk with a lot of great developers and learn more from them. Reviewing is also a way to improve each other's code as nobody's code is perfect and it needs to be tested and run multiple times by multiple people.

As I said, these 2 pull requests are relevant to each other and it should have the same coding style as if one made it.

This is the problem I've mentioned in my previous blog when window.onload should be changed as it would override the other one. Thanks to reviewing other people's code, I also benefit from it.

Wrap up

Thank you for reading my blog, reviewing code is another good way of learning new things and help each other produce better code.

OSD600 - Release 0.3 - Second Pull Request

Tuan Thanh Tan — Fri, 19 Nov 2021 20:25:37 +0000

Introduction

Hello everyone, my name is Dustin. Today I'd like to talk about one of my pull requests in Telescope project.

Progress

Instead of choosing another project to work on, I decided to go with Telescope again because why not?. This is also an external project and can compete with other open source projects.

My second pull request was about showing the feeds count on a status report webpage, which is up and running here. If you go to the page, you could see total feeds displaying right there below commit count card.

This issue proposed a lot of problems as this is a completely new feature and nobody has touched the code before.

First, I ran into a problem with base url so I had to disable a couple lines to get it work properly on my local. After solving that problem, I had another one which I was not able to extract x-total-count from header because the posts api didn't expose headers for some reason. In order to get it work, I added cors: { exposedHeaders: ['X-Total-Count', 'Link'] } which basically means expose x-total-count in header so that I can access it.

However, I just saw another potential bug which may happen when someone uses window.onload(), which may be resolved by the time you read this blog, but I'll have a discussion with other people to see how they'd like it to be.

const apiHost = new URL(location).origin;

async function getFeedCount() {
  try {
    const data = await fetch(`${apiHost}/v1/posts/feeds`, {
      method: 'HEAD',
    });
    const feedCount = data.headers.get('x-total-count');
    const feedCountElement = document.getElementById('feeds-count');
    feedCountElement.innerText = feedCount ?? 'N/A';
  } catch (err) {
    console.error(err);
  }
}

window.onload = () => {
  getFeedCount();
};

For the last 3 lines, window.onload() should be changed to window.addEventListener('load') in order that the main window.onload() won't be override accidentally.

Wrap up

This is actually interesting and I've learnt a lot from it. Not only the code I wrote but how an issue, and a pull request on Github will be treated and how to work with Git correctly. Although this is not a big pull request, but I'm proud of what I've done.

OSD600 - Release 0.3 - First Pull Request

Tuan Thanh Tan — Fri, 19 Nov 2021 18:16:03 +0000

Introduction

Hello everyone, my name is Dustin. Today I'd like to talk about my experience working with Telescope project.

Progress

As I was going through issues in Telescope project, I found an issue that was not very difficult so that I can get to know the project a bit more and learn something out of it. So I chose to go with this issue, which is about adding border for github avatars.

Looking at the issue and thinking about it, It'd be easy to do as I only had to add a couple lines css code, but no. Because telescope has 2 different theme colors which are dark and light. So I had to add another interface to the PaletteOptions

import * as createPalette from '@material-ui/core/styles/createPalettes';

declare module '@material-ui/core/styles/createPalette' {
  interface PaletteOptions {
    border?: PaletteColorOptions;
  }

  interface Palette {
    border: PaletteColor;
  }
}

So that I could make my own border attribute in createTheme object

for light theme

border: {
      main: 'rgba(27,31,36,0.15)',
    },

for dark theme

border: {
      main: 'rgba(240,246,252,0.1)',
    },

However, there was an embarrassing moment where I didn't notice that github isn't using border: for the border around their avatars but a box-shadow. I literally stoled their color code but it still didn't show as github. It took me a decent amount of time to realize it.

Wrapup

This is a beginner-friendly issue so it's totally easy but gives me a bit more foundation to try something bigger and harder in this project. Of course, this is a very small thing in a humongous project but I got it working and merged into the main branch, I'm very happy for that.

You can find my pr right here

Adding Github Actions CI Workflow

Tuan Thanh Tan — Thu, 18 Nov 2021 03:19:17 +0000

Introduction

Hello everyone, my name is Dustin, today I'd like to talk about my experience working with Github Actions and some testings in Javascript.

At a glance

Github Actions was easy to set up as it's written beforehand, I just needed to remove 1 line of building step because I don't need it yet. But making my code to run and pass all 3 node versions was quite difficult. I ran into trouble a lot of times.

Progress

First, I decided to migrate from Commander to Yargs in order to make the code clearer. And then I added some more tests for the e2e test to make sure that help option and version option are working as I expected. As I was running the tests, I found out there's some errors happening and needed to be fixed as soon as possible. So I created a separate branch to fix it. The problem involved resolve variable in promise because I accidentally added curly braces around them. As I progressed, I decided to clean up my code a little bit more so I moved from using sync functions to async functions in the produceFolder class.

After that, I pushed the code to my repo, and it seemed like Github wasn't very happy with my package-lock.json and __snapshots__ for some reason. So I had to npm install and delete __snapshots__ and run the test again.

What I have for my github actions is

name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm test

Unfortunately, it was only successful on the first 2 node versions, not the 16 one due to rm and mkdir. There was also a problem with rmdir because in Node 16, If I remember correctly, it won't be supported anymore so I had to only use mkdir to create a folder. I also had to add {recursive: true} just in case the folder already exists.

Wrap up

After a day struggling, I've successfully passed all 3 tests from Github actions and I've learnt a lot from it, especially using Git.

My testing still needs to be improved as it just covers some basics, not every edge case because testing takes a lot of time and thinking. More testing will be added later.