Forem: Liu Yongliang

#GitHubHack23: Coded Clique

Liu Yongliang — Sun, 30 Apr 2023 10:22:49 +0000

What I built

I built a GitHub action called "Coded Clique" that allows maintainers to (kinda) hide their issue and comment content from casual visitors who happen to poke around in their repositories.

Category Submission:

This app is submitted under "Wacky Wildcards".

App Link

As this is a GitHub action, it can be accessed directly from the GitHub Marketplace: https://github.com/marketplace/actions/coded-clique

Screenshots

Try it out by commenting 🤡

Description

To reduce the visibility of their discussions from random strangers on GitHub, maintainers can use Coded Clique, a GitHub action. The action allows maintainers to hide issue and comment content with ease, making it harder for unintended individuals to access their discussions. Whenever a new issue or comment is created or edited, Coded Clique can be configured to run automatically.

Coded Clique works by using the HTML element, which creates a disclosure widget that only shows information when toggled into an "open" state. The original content is only visible when the disclosure widget is open, and the action adds an encoded version of the content or a random question to create the appearance of a discussion.

Link to Source Code

The source code for Coded Clique can be found on GitHub: https://github.com/tlylt/coded-clique

Permissive License

MIT

Background

Coded Clique was developed as a fun project to address the issue of random individuals peeking at discussions in GitHub issues. By making it slightly harder for unintended individuals to access discussions while still allowing the maintainers & active developers to view the content easily, Coded Clique helps maintainers form a "committed community" in which they can communicate freely.

In a more practical context, the action can be extended to transform content into a more digestible "TLDR" via OpenAI's API while still keeping the original content accessible.

How I built it

To build Coded Clique, I utilized GitHub Actions and the GitHub API to automatically read and edit issues and comments.

Additional Resources/Info

Users can find more information and detailed instructions on how to use Coded Clique in the README file on the GitHub repository.

Deploy a ChatGPT API Server in no time

Liu Yongliang — Wed, 22 Feb 2023 22:01:57 +0000

Motivation

Need a ChatGPT API server for quick prototyping? Let’s make an endpoint and deploy it with Vercel, for free!

TLDR:

you get an endpoint that you can POST JSON to
the endpoint will return JSON with the response from “ChatGPT”
it’s done via OpenAI’s official text completion API
using the “text-davinci-003” model
OpenAI API is not free, but you are given some free credits to try it out
you will need OPENAI_API_KEY

Pre-requisites

Get a OpenAI API key
Have a GitHub account and a Vercel account that is linked to your GitHub account

Steps

If the pre-requisites are met, you can simply click on the button below to deploy. It will guide you through the process of cloning the repository and filling in the environment variable.

The exact steps are as follows:

Clone/fork my template repository
Go to the Vercel dashboard and click on “Add New…” to import your new repository
Enter the environment variable OPENAI_API_KEY
Deploy the project

DONE!

The deployed API will be available at https://your-vercel-project-name.vercel.app/api/chat (or whatever domain that you have configured)
Send a POST request with a JSON body of {"message": "Something to ChatGPT"}

E.g. using curl:

curl -i -X POST \ -H "Content-Type:application/json" \ -d \ '{ "message": "Hello, how are you today?" }' \ 'https://your-vercel-project-name.vercel.app/api/chat'

The response will be a JSON with the key “response” containing the response from your API server. { "response": "I'm doing great! How are you?" } ## Conclusion

That’s it! You’ve now deployed a “ChatGPT” API server with Vercel and OpenAI’s official text completion API in no time. If you want to customize your API, you can modify the API code in the cloned repository.

References

Creating a regex-based Markdown parser in TypeScript

Liu Yongliang — Tue, 03 Jan 2023 18:26:53 +0000

Motivation

Markdown is a markup language that has gained immense popularity in recent years. Besides being used as a convenient way to create content that generates full-blown static websites (via engines such as Gatsby.js and MarkBind), I also started to see widespread usage of Markdown in knowledge management systems such as Obsidian and Dendron.

I write articles like this one using Markdown and I am also actively exploring the use of Markdown in the above-mentioned capacities this year. As a result, I decided to dive deep into how Markdown works and hence this article.

I realized that there are two extremes in software projects:

the most popular/battle-tested/enterprise-grade projects that define the “standard” for a particular domain
- e.g. for Markdown, it’s markdown-it and marked
tutorial examples/toy projects for educational purposes

While the former is complex and production ready, the latter is simple and easy to understand. The problem is that there’s a huge gap between creating something simple to something complex. Should you want to do it, there’s less help and at times you are basically on your own to read the code and figure out how the complex implementation works. Nonetheless, there are values in the toy examples, which is what (and why) I will be going through in this article. A simple, starter-friendly implementation.

To understand how Markdown works, I intend to implement several Markdown parsers according to the tutorials/articles that I can find online and work from simple/naive implementations to (hopefully) a more realistic implementation that can be used in production. This is the first one in the “series” and hence the elaborated introduction.

What is Markdown

As Markdown was born without a well-defined set of rules or tests, it has evolved to have a few different flavors. The most well-known flavor of Markdown is CommonMark, which provides a standard set of rules for the language. Borrowing their Markdown reference as seen here, a common set of Markdown syntax looks like this:

*This text will be italic*
**This text will be bold**
# heading 1
## heading 2
* List
* List
* List
1. One
2. Two
3. Three
---
[link](https://www.google.com)
![image](https://xxx.png)
> and more!

The syntax available in Markdown allows you to style plain text using simple “decorators” such as * and #. It is easy to write and even reads well without the need for a rendered HTML preview.

How it works

The simplest idea for a working Markdown parser is probably using regular expressions. They help you match patterns in a string and you can thereafter replace them with the formatted version. For example, you can grab text surrounded by ** (e.g. **text**) and replace them with <b>text<b>. With this mechanism, we can establish a set of regular expressions and their string replacement strategy, and then just iteratively apply them to the input text. However, it is important to note that this approach has obvious limitations which will be discussed later.

With that, we will examine how a simple Markdown parser can be implemented.

(Note that the following sections will be brief in certain areas that are trivial. You can check the codebase for reference)

Setup

As the title suggests, we will be building our parser using TypeScript. Here are the steps to get started:

Create a new project with npm init -y
Install the dev dependencies with npm i -D typescript parcel jest ts-jest @types/jest
- typescript is the TypeScript compiler
- parcel is a bundler that we will use to bundle our code into a single HTML file
- jest and the related packages are going to help during unit testing
Initialize the TypeScript project with npx tsc --init
Ensure that the tsconfig.json file generated is configured properly

With the setup done, we can start building just a few simple components.

Pattern

The Pattern class in src/Pattern.ts is an abstraction that holds the regular expression and the string replacement strategy. It also provides the method to apply the regular expression.

export class Pattern {
  regex: RegExp;
  replacement: string;
  constructor(regex: RegExp, replacement: string) {
    this.regex = regex;
    this.replacement = replacement;
  }

  apply(raw: string): string {
    return raw.replace(this.regex, this.replacement);
  }
}

As an aside, the above can be simplified by using the public modifier.

export class Pattern {
  constructor(public regex: RegExp, public replacement: string) {}

  apply(raw: string): string {
    return raw.replace(this.regex, this.replacement);
  }
}

Rule

From patterns, we create a higher-level abstraction which is the Rule. It is a collection of patterns that are applied in a sequence. The reason why we have a collection of patterns is that in Markdown, there can be more than one way to achieve the same formatting. For example, you can use * or _ to achieve italic text. The Rule class in src/Rule.ts is defined as follows:

import { Pattern } from './Pattern';

export class Rule {
  name: string;
  patterns: Pattern[];
  constructor(name: string, patterns: Pattern[]) {
    this.name = name;
    this.patterns = patterns;
  }

  apply(raw: string): string {
    return this.patterns.reduce(
      (result, pattern) =&gt; pattern.apply(result),
      raw
    );
  }
}

RMark

With Pattern and Rule, we can now use them to create a RMark class that will be the Markdown parser. RMark is just a convenient name for “Regex Markdown” and it is defined in src/index.ts as follows:

import { Rule } from './Rule';
import { Pattern } from './Pattern';

const defaultRules: Rule[] = [
  new Rule('header', [
    new Pattern(/^#{6}\s?([^\n]+)/gm, '&lt;h6&gt;$1&lt;/h6&gt;'),
    new Pattern(/^#{5}\s?([^\n]+)/gm, '&lt;h5&gt;$1&lt;/h5&gt;'),
    new Pattern(/^#{4}\s?([^\n]+)/gm, '&lt;h4&gt;$1&lt;/h4&gt;'),
    new Pattern(/^#{3}\s?([^\n]+)/gm, '&lt;h3&gt;$1&lt;/h3&gt;'),
    new Pattern(/^#{2}\s?([^\n]+)/gm, '&lt;h2&gt;$1&lt;/h2&gt;'),
    new Pattern(/^#{1}\s?([^\n]+)/gm, '&lt;h1&gt;$1&lt;/h1&gt;'),
  ]),
  new Rule('bold', [
    new Pattern(/\*\*\s?([^\n]+)\*\*/g, '&lt;b&gt;$1&lt;/b&gt;'),
    new Pattern(/\_\_\s?([^\n]+)\_\_/g, '&lt;b&gt;$1&lt;/b&gt;'),
  ]),
  new Rule('italic', [
    new Pattern(/\*\s?([^\n]+)\*/g, '&lt;i&gt;$1&lt;/i&gt;'),
    new Pattern(/\_\s?([^\n]+)\_/g, '&lt;i&gt;$1&lt;/i&gt;'),
  ]),
  new Rule('image', [
    new Pattern(/\!\[([^\]]+)\]\((\S+)\)/g, '&lt;img src="$2" alt="$1" /&gt;'),
  ]),
  new Rule('link', [
    new Pattern(
      /\[([^\n]+)\]\(([^\n]+)\)/g,
      '&lt;a href="$2" target="_blank" rel="noopener"&gt;$1&lt;/a&gt;'
    ),
  ]),
  new Rule('paragraph', [
    new Pattern(/([^\n]+\n?)/g, '\n&lt;p&gt;$1&lt;/p&gt;\n'),
  ]),
];

export class RMark {
  private rules: Rule[] = defaultRules;

  public addRuleBefore(rule: Rule, before: string): RMark {
    const index = this.rules.findIndex((r) =&gt; r.name === before);
    if (index !== -1) {
      this.rules.splice(index, 0, rule);
    }
    return this;
  }

  public addRule(rule: Rule): RMark {
    this.addRuleBefore(rule, 'paragraph');
    return this;
  }

  public render(raw: string) {
    let result = raw;
    this.rules.forEach((rule) =&gt; {
      result = rule.apply(result);
    });
    return result;
  }
}

There are two parts in src/index.ts, one being the default rules and the other being the RMark class. The default rules are the Markdown syntax that we support. As for the RMark class, its render method simply iterates through the rules and applies them to the input text. It also has the addRuleBefore and addRule methods that allow us to add new rules to the parser.

Result

Now, the parser is ready to be called via new RMark().render('input text').

A set of unit tests have been written to showcase the result:

 test('should render bold', () =&gt; {
    expect(new RMark().render(' **Bold**')).toBe('\n&lt;p&gt;&lt;b&gt;Bold&lt;/b&gt;&lt;/p&gt;\n');
    expect(new RMark().render(' __Bold__')).toBe('\n&lt;p&gt;&lt;b&gt;Bold&lt;/b&gt;&lt;/p&gt;\n');
    expect(new RMark().render('This is **Bold**')).toBe(
      '\n&lt;p&gt;This is &lt;b&gt;Bold&lt;/b&gt;&lt;/p&gt;\n'
    );
  });

By using parcel, a simple HTML example is created to see the rendered result in the browser (by running npm run build and npm run serve in the rmark repository):

The source code below for the screenshot above can be found in src/page.ts (index.html is also created for this example to work).

import { RMark } from '.';

const sampleText = `# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

**Bold**
*Italic*

[Link](https://github.com/tlylt/rmark)
![Image](https://raw.githubusercontent.com/tlylt/rmark/main/static/logo.svg)

This is **Bold** and this is *Italic*.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare erat facilisis odio viverra gravida. Phasellus in finibus libero. Duis eget pellentesque arcu, ut lobortis mi. Praesent vitae nulla sed leo dignissim finibus eget hendrerit arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum enim nibh, eu pellentesque tellus fermentum venenatis. Nam consectetur sem a magna mattis, sed luctus purus tincidunt. Nam faucibus tellus sed ligula molestie pulvinar. Mauris facilisis felis ex, eu tempor justo commodo et. Aenean lobortis dignissim diam eget tempor.

Sed pellentesque nulla sit amet tincidunt sagittis. Phasellus eget justo nulla. Cras nisi odio, lobortis nec ante eget, commodo euismod
turpis. Cras id orci dolor. Etiam auctor, nisl luctus volutpat lacinia, turpis orci euismod magna, pharetra eleifend massa metus aliquet
`;

const page = document.getElementById('page');

if (page) {
  page.innerHTML = new RMark().render(sampleText);
}

Limitations

Besides offering only an incomplete set of Markdown features, there are other limitations to the simple rmark parser above.

The regular expression approach may not be the most efficient way to parse the text
The regular expression is difficult to write and understand for complex syntax
The current approach does not strictly obey the CommonMark spec in terms of the expected HTML output

The limitations are frustrating because while the HTML generated looks almost there/mostly identical, it is not the same as the one generated by the referenced implementation. You can compare the difference with this markdown-it playground (Click on source in the right pane to view the HTML code as well).

One reason is that in the above simple implementation, the paragraph tags are added even for those that do not need them. For example, the heading tags should not be wrapped. However, to tweak the implementation to be more compliant with the CommonMark spec, the regular expression turned out to be difficult to create. If it stops adding the extra paragraph tags, it starts breaking other specs, such as not adding paragraphs for the block of lines. Additionally, the parser is likely to fail when handling nested Markdown syntax.

Conclusion

And…this is where most tutorials on (regex-based) Markdown parsers end! We are left with a simple parser that can handle a few Markdown features. Hopefully, this time it is going to be different. I am interested to find out how the edge cases can be handled, and how the parser can be made more efficient. So, I will stop here for now but continue with a more advanced implementation in the next post of the series.

References

The source code of RMark is available on GitHub at the RMark repo
Creating Your Own Markdown Parser
regex101 to test regular expressions

Create VSCode Snippets for Markdown Blog Workflows

Liu Yongliang — Tue, 03 Jan 2023 15:09:34 +0000

Motivation

I write my blog posts in Markdown and my personal site is powered by Gatbsy.js. Within a Markdown file, there are frontmatter and content.

Frontmatter is a YAML block that contains the post’s metadata such as title, date and description. It will be parsed and used by the site generator to generate the post’s page.
The content is simply Markdown-styled text.

For example, this post will look something like this in the source code:

---
title: Create VSCode Snippets for Markdown Blog Workflows
date: 2023-01-03T15:09:34Z
description: Utilize VSCode snippets to simplify the creation of new posts
tags: ["markdown", "vscode"]
---

## Motivation

I write my blog posts in Markdown and...

And the rest of the body text...

For the past year, what I had to do when creating a new post was to copy the frontmatter from an existing post and then manually update it. This was not particularly pleasant. I am ashamed to admit that I just let laziness take over and did not do anything about it.

Let’s fix this with VSCode snippets.

Create a snippet

A VSCode snippet is a pre-defined text that can be inserted on a trigger. You can specify:

the triggering word or phrase
what should be inserted
- can be a simple text
- can have placeholders
- can use variables

The details can be found in the VSCode documentation.

Let’s go through my use case as a concrete example.

Steps

What I want to achieve:

insert a frontmatter block with the key-value pairs required
auto-populate the date field with the current date-time in ISO 8601 format (this is the format that my parser expects)
insert some boilerplate headings for the content

1. Create a snippet file

Open VSCode
- Open the repository of your choice, if any
- My blog is contained in a folder called blogging, so I will open that folder
Go to File > Preferences > Configure User Snippets
Choose the scope of the snippet
- In my case, I want to create a snippet just for my blog project, so I will choose New Snippets file for "blogging"...
Give it a name
- I will call it blog

With that, a file called blog.code-snippets will be created in the .vscode folder.

2. Create the snippet

The blog.code-snippets file will be prepopulated with comments:

{
    // Place your blogging workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    // "scope": "javascript,typescript",
    // "prefix": "log",
    // "body": [
    // "console.log('$1');",
    // "$2"
    // ],
    // "description": "Log output to console"
    // }
}

Read the comments if you would like to understand the default example given. Let’s clear the file and start from scratch.

Let’s first give the snippet a name and a description:

{
  "Blog template": {
    "description": "Blog template for a new article"
  }
}

This is the metadata of the snippet. The name is what will be displayed in the IntelliSense dropdown. The description is what will be displayed in the snippet preview.

Let’s choose a trigger word, here I am choosing a simple two character bt:

{
  "Blog template": {
    // ...omitted for brevity
    "prefix": ["bt"]
  }
}

This means that when I type bt in my project files and press ctrl+space, the snippet option will show up.

Lastly, let’s add in what will be inserted when the snippet is applied:

{
  "Blog template": {
    // ...omitted for brevity
    "body": [
      "---",
      "title: ${1:blog title}",
      "date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T$CURRENT_HOUR:$CURRENT_MINUTE:${CURRENT_SECOND}Z",
      "description: ${2:blog description}",
      "tags: [$3]",
      "---\n",
      "## Motivation\n",
      "$0",
      "## Conclusion\n",
      "## References\n"
    ]
  }
}

Some details to note:

the ${1:blog title}, ${2:blog description} and $3 are placeholders. When the snippet is applied, the cursor will be placed at the first placeholder and the user can tab to move or type to replace/fill in the spot. The tab order is ascending from 1 onwards
- $0 is the final cursor position.
the CURRENT_YEAR, CURRENT_MONTH variables are predefined by VSCode
the items in the body array are joined together with a new line

Completed snippet

For reference, this is the final content in .vscode/blog.code-snippets:

{
  "Blog template": {
    "description": "Blog template for a new article",
    "prefix": ["bt"],
    "body": [
      "---",
      "title: ${1:blog title}",
      "date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T$CURRENT_HOUR:$CURRENT_MINUTE:${CURRENT_SECOND}Z",
      "description: ${2:blog description}",
      "tags: [$3]",
      "---\n",
      "## Motivation\n",
      "$0",
      "## Conclusion\n",
      "## References\n"
    ]
  }
}

Conclusion

My use case is for creating blog posts, but code snippets can be used in other scenarios as well. If VSCode is your main editor, do take a moment to think about what snippets you can create to make your life easier.

References

My Journey into Open Source

Liu Yongliang — Wed, 28 Dec 2022 22:12:03 +0000

Motivation

About one year ago, I had no idea how to contribute to open-source projects and yet it was something that I really wanted to do. I read articles and watched YouTube videos that provided good suggestions and resources, but somehow I just could not get over the initial hurdle and actually contribute to Open Source Software (OSS) projects. I have done things like trying first-contribution, starring and bookmarking projects and doing all the preparation to end up not being able to contribute to any projects out there.

Looking back, two issues prevented me from moving forward:

How to find a project that is of the right technical level and has beginner-friendly issues
After finding one such project, how to navigate through its large codebase and start working?

I have made some progress over the past year and I hope to pen down my thoughts on open-source work. I am not a “10X” developer, but my perspective could be helpful to people who are just starting.

What do I really need to know?

As you can see from the first issue mentioned above, the number of available projects for you depends on your technical ability and interest. Before anything, it is really important to know how Git & GitHub (or Gitlab) works because most OSS projects are done with the help of Git for version control and GitHub (or Gitlab) to host the code for sharing among developers.

In particular, you should minimally understand:

What’s a commit and how to write good commit messages?
What’s a PR?
What’s a branch?
What’s branching workflow and forking workflow?

With that out of the way, the main bulb of learning is on the tech stack of the project. This can be difficult if you are completely new. However, my experience has been that depending on the complexity of the project, you don’t always need to be an expert in the tech stack to contribute. What I would recommend is to go through some tutorials and try to understand the basics of the tech stack. With that, the rest of the learning can be done on the go.

Something else I feel strongly about is getting to know the product from a user’s perspective. This will open doors for you to

verify the correctness of the documentation (or lack of it)
find edge cases that are not covered
think of new features that can be added
reproduce bugs and help in the debugging process
participate in discussions on how to improve the product

Non-technical contributions can be very important. They also provide chances for you to interact and find out more about the project and the community. After all, the project is not just about the code. It’s also about the people who are working on it.

How to understand a project’s repo?

It’s important to remember that it’s okay to not understand everything right away. It may take time and practice to fully grasp the project’s codebase. This “advice” is not unique but I think most articles and guides don’t emphasize it enough.

With limited time and also limited interest (you may never want to work on certain aspects of the project), prioritize what you should know according to what you want to do. Here are some tips that I have found useful:

make use of the project’s developer guide, if available. This document should provide an overview of the project’s architecture and workflows.
start by focusing on a specific aspect of the project that interests you or that you feel confident in tackling. This could be a bug or a feature that needs to be implemented. As you work on this task, you will naturally become more familiar with the codebase and be able to contribute more effectively.
stalk the project’s ongoing issues and PRs. This will give you a sense of what the project’s maintainers are working on and how they do it.

Contribute when the opportunity arises

I have found that when you start working on just a single project, it will naturally lead to other opportunities (e.g. upstream libraries, similar projects, etc). When I started working on MarkBind, a static site generator, I was also making occasional contributions to some of the plugins for markdown-it, the Markdown parser that MarkBind uses. I was fixing bugs in MarkBind by discovering the root causes in the upstream libraries and pushing fixes there to hopefully benefit other projects as well. I even made a pull request to fix the documentation that I was reading on an MDN page for : The Table Body element, something that broke the server-side rendering of MarkBind.

Closing thoughts

Working on OSS projects can be challenging and sometimes frustrating. While it is rewarding to contribute to projects that others may benefit from, it’s important to recognize that at times, it’s just free labor that some people will not even appreciate. You will also realize that “The reward for good work is more work”.

Being a developer involves more than just writing code. It may also include tasks such as investigation, discussion, research, proper documentation, and explaining your code to others. These are important software engineering tasks, but may not always be as satisfying as simply writing code.

My conclusion about OSS is that it’s worth trying out and you will learn a lot from it. It’s also not as “glamorous” as you may think. People abandon OSS projects all the time and you may not always get the recognition you deserve. I hope that this short article will help you to get started on your journey into open source. Good luck!

Crossing Abstraction Barrier Between Parent & Child Class - [OOP & Java #15]

Liu Yongliang — Fri, 06 May 2022 03:34:50 +0000

Motivation

This article is inspired by a question I received in a programming methodology class. In this class, in which we write Java code to solve programming exercises, we have the constraint that every attribute of a class should be private and final. It means there is no access to the field outside of the class, and no modification is allowed once this field is initialized. This strict requirement is put in place to enforce immutability when constructing a class object in Java.

Sooner or later, when the exercises get more complex, we tend to move on to an OOP solution whereby multiple classes are constructed and organized with the help of inheritance. The problem then arises when there is a need to access this private final field in the parent class from a subclass. What should we do then?

To give a concrete example, let's say we have the following classes:

class Parent {
    private final int value;

    Parent(int value) {
        this.value = value;
    }
}

class Child extends Parent {
    Child(int value) {
        super(value);
    }

    int add(int another) {
        return super.value + another; // UNABLE TO ACCESS!
    }
}

What should we do if the child class wants to access value from the parent?

Solutions

Change modifier

The simplest way to deal with that is to change the access modifier from private to something else - perhaps public or protected. This solution can be legitimate depending on the context. In some cases, perhaps it is perfectly normal to expose this value to other classes.

Add a getter method

From the Oracle's Java tutorial on inheritance

A subclass does not inherit the private members of its parent class. However, if the superclass has public or protected methods for accessing its private fields, these can also be used by the subclass.

So, another possible solution is to have a getter method in the parent class and make that method public. This way child classes (and technically other classes) will have access via the getter. So a quick example will be:

class Parent {
    private final int value;

    Parent(int value) {
        this.value = value;
    }

    public int getValue() {
        return this.value;
    }
}

class Child extends Parent {
    Child(int value) {
        super(value);
    }

    int add(int another) {
        return super.getValue() + another;  // CAN ACCESS!
    }
}

Having a getter method can be beneficial in the sense that even though now a "private" field is exposed, you still have one layer of abstraction over it. The users of the getter method do not need to know how that value is generated, which can be manipulated (if needed) by some complex preprocessing steps in the getter method. Also, the underlying private field could change drastically and yet the users of the getter method are unaware.

Rethink code design

Lastly, this problem may be a signal to rethink if there is a legitimate need to access a private final field. Given a parent-child relationship, sometimes it's difficult to be clear about which field/method should reside in which classes.

Would it be better to have the field in the child class instead?
Can we shift what the child class wanted to do with value into the parent class as a general method that the child class can inherit and possibly override?

A better code design might suggest that the private final field can stay as is, maintaining an abstraction barrier between the parent and the child class. One example solution is then:

class Parent {
    private final int value;

    Parent(int value) {
        this.value = value;
    }

    int add(int another) {
        return this.value + another;
    }
}

class Child extends Parent {
    Child(int value) {
        super(value);
    }

    int add(int another) {  // will work if this method is omitted as well,
        return super.add(another); // as it will be inherited
    }
}

Anti pattern

A problematic walkaround that some might come up with is to redeclare the same field in the child class.

class Parent {
    private final int value;

    Parent(int value) {
        this.value = value;
    }
}

class Child extends Parent {
    private final int value;

    Child(int value) {
        super(value);
        this.value = value;
    }

    int add(int another) {
        return this.value + another; // will work but not recommended
    }
}

This works but is arguably a bad design because it does not make use of inheritance to reduce any duplicates between shared properties. It also could result in the values (that meant to represent the same thing) going out of sync, especially if these fields were not declared as final.

Conclusion

When I was asked the motivating question, my immediate response was: "make a public getter method". To which I was then asked a follow-up question:

Why do we resort to using a public getter method, when we want to keep the field private?

Which got me thinking:

Why can't private fields be inherited?

This article is a reminder for me to ask the "why" questions more often, and explore the reasons for the answers.

Intermediate GitHub CI Workflow Walk Through

Liu Yongliang — Tue, 15 Feb 2022 09:27:00 +0000

Motivation

There are many interesting use cases out there for GitHub Actions. One of the main use cases is to create custom continuous integration (CI) workflows that are hosted and executed in your GitHub repository. I should add that that it's FREE for public repositories, with some usage limits/policies :)

With that introduction out of the way, here I am going to walk through a slightly more complex workflow that I am using in the open-source project MarkBind

MarkBind / markbind

MarkBind is a tool for generating content-heavy websites from source files in Markdown format

P.S I am an active dev there so feel free to show your support by giving it a star or using it to create course/documentation websites today!

Requirements

The reason why I would like to explain the workflow in detail here is that I think some requirements are fairly typical and it could serve as an example of a common CI script. Of course, the main reference that I would recommend is the official documentation by GitHub Also, this goes without saying that what I presented here is not the only way to do things.

So, let's talk about what I want the workflow to do:

Run tests
- Run it whenever someone makes a PR against the master branch
- Run it in all major OSes
  - To ensure that it ain't just working on my machine
- Also run it when a PR is merged, or when someone commits directly to the master branch
  - Sometimes senior devs might directly commit a quick fix to the master branch and this should still trigger the tests
Deploy developer guide
- Run it whenever a PR is merged, or when someone commits directly to the master branch
  - This is similar to the test runs but it is only triggered when a PR is merged (not when it is created)
  - The rationale for updating the developer guide per PR merge is so that our developer guide is always up-to-date with the latest development of the project, which could be slightly ahead of the released version
Deploy user guide
- Run it whenever we release a new version
  - Some context: when we release a new version we will push a tag of the master branch to GitHub. Hint: this is how we are going to trigger this step

Code

Now we know the what, let me share the how.
First, here's a brief summary of what we need to know about workflows:

A workflow can have multiple jobs that can run sequentially or in parallel (this is the default)
Each job can have multiple steps that run sequentially.
Both jobs and steps can be configured to run under certain conditions.

Test

So to achieve just what we need for the test, we can do something like this:

name: CI
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
jobs:
  test:
    strategy:
      matrix:
        platform: [ubuntu-latest, macos-latest, windows-latest]
    runs-on: ${{ matrix.platform }}

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '12'
      - run: npm i -g npm@8.3.1
      - run: npm run setup
      - run: npm run test

Some explanations of the syntax used:

on.push.branches says that the workflow is only triggered when pushing to master, which is what happens when a PR is merged
on.pull_request says that the workflow will run when someone sends over a PR, which is nice to ensure that the changes don't break the build
the use of strategy and matrix is pretty much boilerplate code that is used to specify that the job named test will run on all three OSes.
- This will run the tests in Ubuntu, macOS, and Windows, in parallel. It will by default fail-fast to stop the other two test runs if one of them failed unexpectedly.

Dev Guide

To achieve just what we need for the developer guide update, we can do something like the following:

name: CI
on:
  push:
    branches:
      - master
jobs:
  deploy-docs:
    # disabled on forks
    if: github.repository == 'MarkBind/markbind'
    runs-on: ubuntu-latest
    env:
      GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '12'
      - run: npm i -g npm@8.3.1
      - run: npm run setup
      - name: Deploy DG on any commit to master, to markbind.org/devdocs
        run: >-
          npm run build:web &&
          npm run build:dg &&
          npm run deploy:dg

Now we reach the fun part... how to include the above with the test job so that it only runs when all tests have passed?

Here's my approach:

# code for test job omitted
deploy-docs:
    needs: test
    # disabled on forks
    if: github.event_name == 'push' && github.repository == 'MarkBind/markbind'
    runs-on: ubuntu-latest
    env:
      GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '12'
      - run: npm i -g npm@8.3.1
      - run: npm run setup
      - name: Deploy DG on any commit to master, to markbind.org/devdocs
        run: >-
          npm run build:web &&
          npm run build:dg &&
          npm run deploy:dg

There is quite a bit of stuff here, so here's a summary:

I have defined another job named deploy-docs
I specified it to only run if the previous job test is done and successful by doing needs: test
I added a check to ensure that this job, unlike the test, will not run for pending PRs.
- if: github.event_name == 'push' && github.repository == 'MarkBind/markbind'
- it first checks if it is a push event (and not PR)
- it then checks if the repository is the root repository
  - this is added to ensure that forks of the repo do not execute this job because they have no permission/access to publish the developer/user guides.

The rest is just set up and deploy commands that you may ignore.

User Guide

Lastly, let's deal with the user guide which only needs to run per release.

To achieve just what we need for the user guide update, we can do something like the following:

name: CI
on:
  push:
    branches:
      - master
    tags:
      - 'v[0-9]+.[0-9]+.[0-9]+'
jobs:
  deploy-docs:
    # disabled on forks
    if: github.repository == 'MarkBind/markbind'
    runs-on: ubuntu-latest
    env:
      GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '12'
      - run: npm i -g npm@8.3.1
      - run: npm run setup
      - name: Deploy UG on release, to markbind.org
        if: github.ref_type == 'tag'
        run: >-
          npm run build:ug &&
          npm run deploy:ug

To integrate it into the entire workflow, the following changes are required (full script at the end):

name: CI
on:
  push:
    branches:
      - master
    tags:
      - 'v[0-9]+.[0-9]+.[0-9]+'
  pull_request:
    branches:
      - master

    # some code in between
     - name: Deploy UG on release, to markbind.org
        if: github.ref_type == 'tag'
        run: >-
          npm run build:ug &&
          npm run deploy:ug

The addition of on.push.tags ensures that when a new tag on the master branch is pushed to GitHub, as part of making a new release, will trigger the workflow.
- This runs the test job and the developer guide deployment step as well.
  - It could easily be turned off such that only the user guide step is run.
- the v[0-9]+.[0-9]+.[0-9]+ is a glob pattern to match semantic versioning tags.
The if: github.ref_type == 'tag' in the user guide step will ensure that if this is just a PR merge or a push event to master, the step will be skipped.
- The details of the github object that I am accessing here is available here

Full Script

Putting everything together:

name: CI
on:
  push:
    branches:
      - master
    tags:
      - 'v[0-9]+.[0-9]+.[0-9]+'
  pull_request:
    branches:
      - master
jobs:
  test:
    strategy:
      matrix:
        platform: [ubuntu-latest, macos-latest, windows-latest]
    runs-on: ${{ matrix.platform }}

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '12'
      - run: npm i -g npm@8.3.1
      - run: npm run setup
      - run: npm run test
  deploy-docs:
    needs: test
    # disabled on forks
    if: github.event_name == 'push' && github.repository == 'MarkBind/markbind'
    runs-on: ubuntu-latest
    env:
      GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '12'
      - run: npm i -g npm@8.3.1
      - run: npm run setup
      - name: Deploy DG on any commit to master, to markbind.org/devdocs
        run: >-
          npm run build:web &&
          npm run build:dg &&
          npm run deploy:dg
      - name: Deploy UG on release, to markbind.org
        if: github.ref_type == 'tag'
        run: >-
          npm run build:ug &&
          npm run deploy:ug

Conclusion

Now that CI script is written and workflow is automated, robots can finally take my job.

Room

Liu Yongliang — Wed, 12 Jan 2022 01:41:11 +0000

Overview of My Submission

Application URL

https://room.notawake.co/

Summary

A simple Web App to allow your students/event participants to "take a seat" virtually so that you, the instructor, can see their name and their location in the room.

Submission Category:

Choose Your Own Adventure

Service used

MongoDB Atlas

Link to Code

tlylt / room

A simple Web App to allow your students/event participants to "take a seat" virtually so that you, the instructor, can see their name and their location in the room.

Overview

When teaching a class of over 20 students, it may not be easy to learn their names immediately. Given that we do not always have access to a reference sheet with the student's name and their photo, an alternative is to have a reference of the student's name and where they are in the classroom. This project does just that!

Functionalities

Anyone can easily create a room with a room name and a password (to identify the room admin)
Anyone can easily join a room with the room link or from the list of rooms in the home page
Anyone can easily leave a room (just close the browser)
In a room, one can choose to "sit" at a spot that mirrors his/her actual location in the classroom
In a room, one can choose to "leave" the previous spot to switch to another spot
The room admins can remove…

View on GitHub

Additional Resources / Info

Screenshot

Main Page:

Individual Room Page:

Demo

Thoughts

I had a lot of fun hacking(and debugging 😂) this together in a day:)

Automatically add all existing repo contributors with all-contributors-cli

Liu Yongliang — Mon, 10 Jan 2022 16:15:32 +0000

Introduction

A while ago, I posted a question on Dev.to to find out more about technologies for recognizing GitHub Repo contributions:

Hello guys,

I am aware of all-contributors bot that helps with adding new contributors to an OSS project on GitHub, but it does not seem to be able to automatically add all contributors(those who previously contributed, before the point of using all-contributors), perhaps with some sensible defaults.
I am wondering if there are any alternative tools out there that you are using to recognize contributors in your GitHub Repo?

Would love to learn more about that:)

The Problem

I needed a way to recognize and show Github Repo contributors in the README file of a project for more visibility. The all-contributors-cli is a CLI tool that fits my needs. However, the problem is that while the Repo already has a dozen contributors, the CLI tool is not able to recognize any of them before the point of using the tool.

Running npx all-contributors-cli init sets up the Repo with the default settings, but it does not recognize any of the existing contributors. One helpful command provided by the CLI is npx all-contributors-cli check. This command checks the Repo for any contributors not yet added in the .all-contributorsrc file and prints the list of names. Given that the Repo that I was working on has about 50 contributors, I would have to take the names from the missing list and manually add them via npx all-contributors-cli add {contributor} {contribution_type}. This is a tedious task, and I would like to automate this process.

The Solution

Inspired by the discussions in related GitHub issues, I think a Python script can help. The final script is made up of several functions that are called in the main function. I also included a few options to handle the common use cases in the script that I put together.

`init`

This function will initialize the Repo with the default settings. The code basically calls npx all-contributors-cli init.

import subprocess
import shlex
import sys

def init():
    print("Initialize all-contributors")
    subprocess.run(shlex.split("npx all-contributors-cli init"), shell=True)

`check`

This function will check the Repo for any contributors not yet added in the .all-contributorsrc file and use the list to call npx all-contributors-cli add {contributor} code. Note that I intentionally ignored dependabot[bot] and set the default contribution type to code. Change them to suit your needs! There is also a dryrun parameter that is used to control the execution of the add command.

def check(dryrun=False):
    all_contributors_check_result = subprocess.run(
        shlex.split("npx all-contributors-cli check"),
        shell=True,
        stdout=subprocess.PIPE,
    ).stdout.decode("utf-8")

    missing_contributors = all_contributors_check_result.replace(
        "Missing contributors in .all-contributorsrc:\n", ""
    ).strip()
    if missing_contributors in ["", "dependabot[bot]"]:  # ignore dependabot[bot]
        print("No missing contributors")
        return

    default_contribution_type = "code"  # default contribution type
    contributors_to_add = missing_contributors.split(", ")
    if "dependabot[bot]" in contributors_to_add:
        contributors_to_add.remove("dependabot[bot]")  # ignore dependabot[bot]

    print("Update .all-contributorsrc to include all contributors read from Github")
    for contributor in contributors_to_add:
        command = (
            f"npx all-contributors-cli add {contributor} {default_contribution_type}"
        )
        if not dryrun:
            print("run: " + command)
            subprocess.run(shlex.split(command), shell=True)
        else:
            print("dryrun: " + command)

`generate`

This function will update the README file with the list of missing contributors. The code basically calls npx all-contributors-cli generate.

def generate():
    print("Update README.md to generate table of contributors")
    subprocess.run(shlex.split("npx all-contributors-cli generate"), shell=True)
    print("Done!")

`main`

This is the main function that calls the other functions in the script. To make things simpler, the script can be run with an argument that determines what gets done.

def main():
    command = sys.argv[1] if len(sys.argv) > 1 else "help"
    if command == "init":
        init()
        check()
        generate()
    elif command == "help":
        print(
            """
        Commands:
        init: initialize all-contributors for the first time (will generate .all-contributorsrc)
         - python add-all-contributors.py init
        add: add missing contributors (when you already have .all-contributorsrc)
         - python add-all-contributors.py add
        dryrun: dryrun add missing contributors (test without adding)
         - python add-all-contributors.py dryrun
        """
        )
    elif command == "add":
        check()
        generate()
    elif command == "dryrun":
        check(True)
    else:
        print("Unknown command: " + command)
        exit(1)

The full code is available as a GitHub Gist

Usage

Understand all-contributors and decide if you want to use it. You should also have recent versions of npm and Python available on your machine.
Put the script in the root directory of your project.
If nothing is done yet (no .all-contributorsrc), run python add-all-contributors.py init. Remove the add-all-contributors.py file and that's it!
If you already have .all-contributorsrc file, run python add-all-contributors.py add. Remove the add-all-contributors.py file and that's it!
If you would like to see a help message, run python add-all-contributors.py.
If you would like to see who will be added without actually doing it, run python add-all-contributors.py dryrun. (Assuming the repository already have a .all-contributorsrc file)

Conclusion

Even though I "solved" my own problem, the comments and discussions on this topic/issue gave me the idea to write this script. So, thanks to random people on the internet for sharing!

How to debug iPhone Safari on Windows

Liu Yongliang — Thu, 28 Oct 2021 05:12:01 +0000

Motivation

Want to ensure that your website & web application works across different screen sizes and devices? One of the must-dos is to check that it works well on iPhone Safari(as you know, people tend to stick with the defaults and one does not simply tell the user to download another web browser .-.).

Here's how I debugged a display issue on my website and hopefully it will save you some time when sh*t happens :)

Setup

Problem: something wrong with your website, perhaps due to CSS or JS, but you don't know why.
Tools:
- iPhone with Safari
- Windows
- iTunes
- Inspect

Steps

You may be testing your website on your iPhone Safari browser, you realized something is wrong and you want to access the debug console to check any relevant error messages. One available tool is Inspect(not affiliated, just something that worked)

Create an account (free 30 days trial)
Download the installer for your OS
Setup and connect your iPhone according to the instructions given
Debug!
DONE

After setting it up, I was able to discover an error message in my debug console:

"ResizeObserver loop completed with undelivered notifications"

...Which I have no idea what that means. So, what else can be done?

If the above does not solve your problem, you might want to find out if you have accidentally introduced a CSS feature that is not yet supported.
To do this, you may want to search for the feature on caniuse. Here is how I found out that the CSS property: aspect-ratio is not fully supported on all iPhone Safari:

Check caniuse CSS property: aspect-ratio
Check your iPhone Safari Settings (as you will see, there are a ton of properties and features that are experimental and not enabled by default)
Go to settings -> Safari
Go to Advanced
Enable Web Inspector(will be required if you use a tool like Inspect)
Check if you are ahead of your time (Experimental Features)
Cry over hours of wasted time

That's all. Go back to coding...

Technologies for recognising GitHub Repo contributions

Liu Yongliang — Fri, 27 Aug 2021 04:05:41 +0000

Hello guys,

I am aware of all-contributors bot that helps with adding new contributors to a OSS project on GitHub, but it does not seems to be able to automatically add all contributors(those who previously contributed, before the point of using all-contributors), perhaps with some sensible defaults.

I am wondering if there are any alternative tools out there that you are using to recognise contributors in your GitHub Repo?

Would love to learn more about that:)

Data Visualization With Highcharts

Liu Yongliang — Fri, 06 Aug 2021 13:12:41 +0000

Motivation

I was looking through the drafts that I wrote and thought that this one could be salvaged. I have done some simple graph visualization projects and I still think they are fun to work on. Though most of the time we just learn the APIs of the graphing libraries of our choice, these libraries work wonders to present data. So here is a short walk-through of how I would use HighCharts to showcase data from the Dev.to API. As an example, Dev.to API is used to retrieve details of 1000 articles to plot them in the form of a "packedbubble" graph. The size of each bubble refers to the reaction count (positive_reaction_count + comment_count). Then when hovered over, the title, URL, and the count of the article will be shown. The articles that have over 1000 reaction counts will be labeled. I have also arbitrarily chosen to only display articles of 8 categories/tags (More details in Step 2).

Initial Preparation

I have come to realize that a part of programming work is converting data from one form to the other. To use a front-end graphing library, in my experience having data in JSON format is the most convenient. However, there are times when the data source could be coming from CSV or Excel spreadsheet. We could either write some conversion scripts in Python or have some preprocessing steps in JavaScript. Papa Parse is one such JS helper package that I have previously used. Even if we have APIs that return us JSON formatted data, we might still need to manipulate it into the format that the charting library expects.

In this working example, I am choosing Highcharts for their rich features and extremely good documentations. They have many Jsfiddle examples that could serve as a good reference/starting point. However, do note that paid license is required to use their products commercially. To use it for free, note the following:

Non-profit organisations, schools and personal websites can enjoy our software for free under a Creative Commons (CC) Attribution-Non-Commercial license. In order to obtain a non-commercial license, please fill out this form.

The first thing to do is to find out what structure of the data is expected by Hightcharts. Sometimes this information can be confusing to figure out, given that documentations of graph/chart libraries are filled with options and explanations. So, we look at examples. This is one such example I found browsing their documentation. Looking at the code, it is easy to identify that data to be used in the chart is specified here:

series: [{
        data: [1, 4, 3, 5],
        type: 'column',
        name: 'Fruits'
    }]

So a series contains an array of individual groups of data. The actual data points are within the attribute data, in the form of an array. Upon further inspection of other examples, we can see that the data points need not be primitives like numbers or strings. They could be objects containing the data point and its metadata such as its name or other attributes. Now we are ready to proceed.

Step 1:

Fetch 1000 articles from Dev.to using the API:

async function makeGetRequestAndReturnJson() {
    const response = await fetch('https://dev.to/api/articles?per_page=1000');
    return await response.json();
}

Step 2:

Manipulate the data into the required format. Each individual data point is of the following format:

{
  'title': 'someTitle',
  'url': 'someUrl',
  'value': 'someReactionCount'
}

And the code to filter and consolidate the data is as follows (I might have gone too functional in the data processing part, use of for-loops is possible too) :

async function processData() {
    const targetTags = ['react', 'opensource', 'codenewbie', 'beginners', 'tutorial', 'webdev', 'showdev', 'productivity'];
    const seriesData = [{
        name: 'react',
        data: []
    },
    {
        name: 'opensource',
        data: []
    },
    {
        name: 'codenewbie',
        data: []
    },
    {
        name: 'beginners',
        data: []
    },
    {
        name: 'tutorial',
        data: []
    },
    {
        name: 'webdev',
        data: []
    },

    {
        name: 'showdev',
        data: []
    },
    {
        name: 'productivity',
        data: []
    }];
    const data = await makeGetRequestAndReturnJson();
    const filteredData = data.filter(article => article.tag_list.some(tag => targetTags.includes(tag)))
    filteredData.forEach(article => {
        const filteredTags = article.tag_list.filter(tag => targetTags.includes(tag))
        filteredTags.forEach(tag => {
            seriesData.find(type => type.name === tag).data.push(
                {
                    title: "article.title,"
                    url: article.url,
                    value: article.comments_count + article.positive_reactions_count
                })
        });
    })
    return seriesData;
}

Step 3:

Setup and use the prepared data in the graph configuration process:

async function setupGraph() {
    const seriesData = await processData()
    chart = new Highcharts.chart('container', {
        chart: {
            type: 'packedbubble',
            height: '50%',
        },
        title: "{"
            text: 'Visualizing Dev.to articles'
        },
        tooltip: {
            useHTML: true,
            stickOnContact: true,
            pointFormat: '<b>{point.title}:</b> <br/>Reaction Count: {point.value} <br/><a target="_blank" href={point.url}>{point.url}</a>'
        },

        plotOptions: {
            packedbubble: {
                useSimulation: false, // true for a better animation
                minSize: '30%',
                maxSize: '100%',
                zMin: 0,
                zMax: 2000, // the max value of the bubble
                layoutAlgorithm: {
                    gravitationalConstant: 0.01,
                    splitSeries: false, 
                    seriesInteraction: true,
                    dragBetweenSeries: true,
                    parentNodeLimit: true,
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.title}',
                    filter: {
                        property: 'y',
                        operator: '>',
                        value: 1000 // labeling the articles with over 1000 in positive reaction counts
                    },
                    style: {
                        // adjusting of styles for data labels
                        color: 'black',
                        // textOutline: 'none',
                        // fontWeight: 'normal',
                    },

                },
            }
        },
        series: seriesData,
    });
}

Step 4:

Invoke the function call when ready:

// trigger setupGraph function on document ready
document.addEventListener('DOMContentLoaded', () => {
    setupGraph();
})

Step 5:

Create a basic HTML page to run the script and display the outcome:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>DevTo Visualization</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <!-- Load jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script src="index.js"></script>
  </body>
</html>

Conclusion

Putting everything together, here is the link to see the visualization in action. Here is the link to the GitHub repo if you are interested in the code.

In terms of difficulty, most of the complexity lies in knowing the settings and configurations of the library in use. I think the harder part is finding out what to visualize and the appropriate graph/chart type to use. What story should the data tell? In my quick example, I guess it shows that people really enjoy "collectible" and "mark for further usage" kinds of articles 😂.

Some further extension ideas:

Explore the Dev.to API to get some interesting data, such as
- filter the tags using the API parameter to only retrieve articles of certain tags
- Retrieve articles that you authored
Explore other graph/chart types available