DEV Community: Yanze Dai

An indepth explanation of the Knuth-Morris-Pratt algorithm

Yanze Dai — Thu, 30 Jun 2022 00:00:00 +0000

Originally published on Pitayan | An indepth explanation of the Knuth-Morris-Prat

String matching is a very fundamental task for computer. We’ve seen many programs that allow you to pop out the search box via Ctrl + F / Cmd + F.

For example, we could check if there’s a string of “search” from “I’m searching on Google”. There’re many algorithms that could help you achieve this function. Knuth-Morris-Pratt (as known as “KMP”) is one of them (See also Rabin-Karp, Boyer-Moore).

This algorithm is named after the 3 inventors. I bet you’ve heard of this book The art of computer programming.

The author of this book Donald Knuth (The famous comupter scientist) is one of the inventors of this algorithm. (I haven’t read his book yet but let me pay my best tribute to this great scientist)

This algorithm was so difficult to me to understand until I found these 2 following articles from Google search.

Now I wanna try to explain this amazing algorithm in my own language coz any day in the future I might need to go over this amazing creation.

#The bruteforce issue

Suppose we have a string of

“ABCD EFGHABCAGBC” (haystack)

and a match string of

“BCAGBC” (needle)

We might have a bruteforce solution by comparing each of the characters in both haystack and needle as below.

First character not match, move to next position

ABCD EFGHABCAGBC

^

BCAGBC

First character “B” matched

ABCD EFGHABCAGBC

..^

..BCAGBC

Second character “C” matched

ABCD EFGHABCAGBC

…..^

..BCAGBC

Thrid character not match, move pointer to next needle character

ABCD EFGHABCAGBC

…….^

..BCAGBC

First character not matched, move needle head to next haystack character

ABCD EFGHABCAGBC

…..^

…..BCAGBC

Then it goes on with the previous steps… Just take a look at the GIF below, this will make you further understand it intuitively.

Now you see the problem, right? It’s not efficient because we’re trying to move the search position to the already compared position.

When we compared “D” with “A” at step 4, we already know that the current haystack characters are “BCD” and even we move to the next haystack postion character “C” it will obviously fail the attempt.

Thus, we need a good strategy to save us from comparing characters from the already “checked” positions.

#How does the KMP magic take effect?

Actually KMP does nothing special, apart of checking the next character it’ll just do the following.

Reuse the known information

How?

Let’s flashback to step 4 when it tries to compare “D” with “C”. Instead of aligning the head character of “BCC” with next haystack character “C”, KMP will skip comparing the character “C” and move it to a later position.

To achieve this, KMP also has to generate a “Partial Match Table” according to the needle string. In our case, the table may look like this.

B	C	A	G	B	C
-1	0	0	0	1	2

(Note: Usually we set the first value of the “Partial Match Table” to -1 for programming convenience)

To know how this table is generated, we need to understand the following terms first

prefix collection : All combinations of the needle string excluding the last character
suffix collection : All conbimations of the needle string exlucding the first character
partial match value : The longest element length of the union of prefix collection and suffix collection

Then, we’ll evaluate each “partial match string’s” value

“B”
“BC”
“BCA”
“BCAG”
“BCAGB”
“BCAGBC”

Okay, let’s continue the case in this article, step 4 -> matching “D” and “A”.

ABCD EFGHABCAGBC

…….^

..BCAGBC

Well, the result is false, we will need to move the needle’s position by 2. You will be needing the following formula to calculate the “positions to move”

positions to move = matched count - partial match value

In this case, we’ve already matched 2 characters “B” and “C”. The “partial match value” under character “A” is 0. Thus, we have to move 2 characters which aligned “D” and “B” in the same comparing position.

ABCD EFGHABCAGBC

…….^

…….BCAGBC

(Skip the ones in the middle “EFGHA”) We found the head character match, there’ll be another around of comparison until the end.

ABCD EFGHABCAGBC

…………………..^……….^

…………………..BCAGBC

Here is the intuitive GIF to help you understand if better.

#Actual code (Bruteforce)

Before we dive into the KMP solution, let’s take a look at how we usually implement it “bruteforcely”.

int bruteforce(char *haystack, char *needle)
{
    int i = 0,
        j = 0;
    int h_len = strlen(haystack);
    int n_len = strlen(needle);

    // When needle is an empty string, always return 0.
    if (n_len == 0) return 0;

    // Until i,j reaches the end of each string
    while (h_len > i && n_len > j)
    {
        // Aggregate i,j when there's a match
        if (haystack[i] == needle[j])
        {
            i++;
            j++;
        }
        else
        {
            // NOTE: This never efficient
            // Jump to the next character of which doesn't match
            i = i - j +1;
            // Jump to needle head
            j = 0;
        }
    }

    // Once the while loop finishes, j should equal to needle length if there's any match
    if (j == n_len) {
        return i - j;
    }

    return -1;
}

#Actual code (KMP)

The coding will be separated into 2 parts:

next array (partial match table)
main iteration

#1. Next array

Next array may appear very different to the explanation of the “prefix and suffix” thing. But indeed, the implementation used some tricks to make the time complexity stay as linear. In a simple word:

To match the needle string using itself

Note: Make sure to debug it so that you could fully understand how this amazing code works.

Alternatively, the blow GIF will help you out if you’re lazy for debugging.

int *get_next(char *needle, int len)
{
    int i = 0,
        j = -1;
    // Allocate a space of heap memory to store the "partial match table"
    int *next = (int *)calloc(len, sizeof(int));

    // Make the first element -1 for convenience
    next[0] = -1;

    // Until j reaches the end of needle
    while (len > j) {
        if (j == -1 || needle[i] == needle[j])
        {
            ++i;
            ++j;
            // j works as an accumulator. It gives you the number of how many
            // characters has matched
            next[i] = j;
        }
        else
        {
            j = next[j];
        }
    }

    // Caller will free the heap memory
    return next;
}

#2. Main iteration

The main part of KMP is almost the same to building the “next array”. As the whole algorithm is actually a format of “finite-state machine”.

int kmp(char *haystack, char *needle)
{
    int i = 0,
        j = 0;
    int h_len = strlen(haystack);
    int n_len = strlen(needle);

    // When needle is an empty string, always return 0.
    if (n_len == 0) return 0;

    // get "Partial Match Table" as next
    int *next = get_next(needle, n_len);

    // Until i,j reaches the end of each string
    while (h_len > i && n_len > j)
    {
        // Aggregate i,j only when
        // 1. j == needle[0] == -1, this means there's no succesful match, need to restart at a new position
        // 2. Same character appeared in both haystack and needle
        if (j == -1 || haystack[i] == needle[j])
        {
            i++;
            j++;
        }
        else
        {
            // Assign the "Partial Match Table" value
            j = next[j];
        }
    }

    // (Don't forget to free the heap memory)
    free(next);

    // Once the while loop finishes, j should equal to needle length if there's any match
    if (j == n_len) {
        return i - j;
    }

    return -1;
}

#In the end

Honestly, the KMP algorithm is still very much confusing to me especially the reason why they implemented that way. But it truly proves an excellent methodology of solving a “patternish” problem. The KMP algorithm is not the most efficient algorithm compared to “Boyer Moore” and “Rabin-Karp”. Most of our editors “find” function adopts “Boyer Moore” algorithm. I’ll write another article to explain it.

Capture the flag: A Node.js web app vulnerability practice (part 1)

Yanze Dai — Fri, 20 May 2022 00:00:00 +0000

Originally published on Pitayan | Capture the flag: A Node.js web app vulnerability practice (part 1)

Last time our team had a small JavaScript workshop together (Check this article here: 8 Javascript quiz that may confuse you). And we’ve done it quite well. Everyone enjoyed solving those small problems.

Well, this time, my teammate has brought us a practice of finding the Node.js web application vulnerabilities.

It’s not a hard one. There’re 2 vulnerabilities in the web app. The way to “capture the flag” is to succeed in login. If you made it, text of flag will be displayed in the page.

#Get Started

Follow the instructions and make sure that you’ve already got everything on track. Now, you’re only allowed to look at the repository files of

README.md
vuln1/index.js
uploads/*
package*.json

Remember not to cheat before you complete the quiz (The God is watching you). Here are some notices before starting it.

Please don’t open .env file.
Please complete the quiz without changing the source code (However, debugging is allowed).
Please follow the above advices

#0. Prerequisites

Make sure that you have Node 16+ install on your system (NPM v8 is required). A recommended way to install Node.js via nvm

$ nvm install 16
...
$ nvm use 16

#1. Clone the repo

Here is the repository link: https://github.com/daiyanze/vulnerability-code-challenge

$ git clone git@github.com:daiyanze/vulnerability-code-challenge.git
$ cd crack-the-code-challenge & npm i

#2. Start the server

$ npm -w challenges/vuln1 run start

> vuln1@1.0.0 start
> node index.js

Started on http://localhost:81

#3. Open http://localhost:81

Then the following screen will pop out.

Your everything about cracking the code starts from here

This admin page does 4 things:

Modify the JSON file’s name & content
Upload your JSON file
Print out the JSON file content
Login

Your mission now is to pass the login step, and let the page display flag text.

#Hints

If you are still not sure how to do it, pry out the hints below 1 by 1. But please do remember to read the code in index.js file first. You’ll find many useful clues in it.

Hint 1

What about browsing other files on the server?

Hint 2

Take a good look at the messages from your terminal.

Hint 3

How about changing the content of the parsed.json file?

Hint 4

You know you could mutate prototypes and __proto__, don’t you?

Hint 5

Just go to answer section. It’ll tell you how.

#When flag is captured

Don’t read this section if you haven’t captured the flag. But I really hope you’ve already made it. Otherwise the following will just lead you to a detailed explanation before you could actually resolve the mystery by yourself.

#Explanation

In the first few paragraphs of this article, it’s mentioning that we have 2 vulnerabilities. And they are both threatening the login step.

The key points are

Where do we get the password?

How do we cheat the authentication?

Once we have a clue of how to handle these things above, then the answer would be right above the surface.

It’s not very hard to associate the password with the mysterious .env file right? Since you’ve been told not to look at it, then curiosity may have driven you toward the “method” of opening that file as what’s written in the “Hint 1”.

So if you try to open the content of .env file via “Read uploaded JSON”, the password will appear. Oh, we got a password now. Then that should work? Certainly nope. It’s just a start.

Remember what’s written in the source code about authentication?

const user = {
  // just pretend this comes from a db
  password: "$2a$12$3cSdZFdEIG9FizllB9.5E.M8DTQQ185zyITtBTBz7Lz3Va8s0xjSy",
};

switch (user.auth_method ?? "bcrypt") {
  case "bcrypt":
    passed = bcrypt.compareSync(req.body.password, user.password);
    break;
  case "superadmin":
    passed = req.body.password === process.env.SUPER_ADMIN_PASS;
    break;
  default:
    throw new Error("invaid auth method");
}

The encrypted password is already there but you can’t decrypt it easily. So the breakthrough point is user.auth_method. You need to find a way to turn user.auth_method value into "superadmin". But how?

Well, here’s one useful information from the terminal when you install the package. There’s one critical severity vulnerability in your package.

added 110 packages, and audited 111 packages in 8s

5 packages are looking for funding
  run `npm fund` for details

1 critical severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

When you tried to npm audit fix, the solution would come to your mind easily if you had experience with “prototype pollution”.

added 1 package, removed 1 package, and audited 120 packages in 2s

10 packages are looking for funding
  run `npm fund` for details

# npm audit report

lodash <=4.17.20
Severity: critical
Prototype Pollution in lodash - https://github.com/advisories/GHSA-jf85-cpcp-j695
Prototype Pollution in lodash - https://github.com/advisories/GHSA-fvqr-27wr-82fm
Command Injection in lodash - https://github.com/advisories/GHSA-35jh-r3h4-6jhm
Regular Expression Denial of Service (ReDoS) in lodash - https://github.com/advisories/GHSA-x5rq-j2xg-h7qm
Prototype Pollution in lodash - https://github.com/advisories/GHSA-p6mc-m468-83gw
fix available via `npm audit fix --force`
Will install lodash@4.17.21, which is outside the stated dependency range
node_modules/lodash

1 critical severity vulnerability

To address all issues, run:
  npm audit fix --force

Here is a very good article about “prototype pollution”.

https://brightsec.com/blog/prototype-pollution/

In a simple word, “Prototype pollution” is “to extend / modify the global objects”.

Object. __proto__.auth_method = "superadmin"
Object.constructor.prototype.auth_method = "superadmin"

With the above trick, you could just add some extra seasonings to that JSON content. Now you are good to capture the flag.

{" __proto__":{"auth_method":"superadmin"}}

The vulnerability that helps you “overcome” the password authentication comes from lodash <= 4.17.20. Refer to this page to get more details.

#Answer

The solution takes only 3 steps.

Input the following to “Secure JSON formatter” <textarea> and click “Format & Upload” button.

{" __proto__":{"auth_method":"superadmin"}}

Input ../.env to “Read uploaded JSON” and click “Read” button
Input what you get from step 2 to “Login” password

Then you’ll get a flag text in the page.

#Summary

This practice itself isn’t a very hard one. But at least I think gave us some good warnings of taking care of our project’s securities.

The first important thing in making secure applications is to carry out “user-input validation & sanitization” all the time and never use those inputs directly.

When shall we trust the end users? When there’s no input at all.

The second important thing is from our projects. Some of the developers don’t usually pay attention to the information from the npm audit. There’re so many reasons of “we don’t have to” (you know why :p). But when it comes to some security concerns, npm audit has already given us enough clues to follow up with. Thus, constantly check and update our dependencies will probably do us a favor in building a rather secured application.

Interview Officer: "Tell me about Cookies Session and Tokens". Me: "Emm..."

Yanze Dai — Thu, 12 May 2022 00:00:00 +0000

Originally published on Pitayan | Interview Officer: "Tell me about Cookies Session and Tokens". Me: "Emm..."

In late 2021, I took an interview with a hotshot IT company for a front end engineer position. During the interview process, the interview officer’s question of “Tell me about cookie session and token” got me into my knowledge blind spot.

I will be explaining some details around “cookies” “sessions” and “tokens”.

Meanwhile, hope this article will remind everyone to strengthen related knowledge points so that it could come to help any day in the future when necessary.

#The interview briefing

It was an online interview with only interview officer and me in that meeting. The officer was a bit late but he was still very nice and polite. He introduced himself and the interview flow.

Self introduction
Recent projects
Fundamental knowledge quiz
Algorithm quiz

There’re quite few casual talks among the interview and the whole process took about 50 min (should be 1 hour but he was late, so 10 min was gone…). I did my best to answer each questions as I could.

However, I got stuck when it came to the question below.

Interview officer: “How much do you know about ‘Sessions’ ‘Cookies’ and ‘Tokens’? Could you explain by giving some examples?”

Me: Emm… Sure. Well, cookie is emm… Sorry, I think I can answer it. But could I have 1 minute to prepare the answer?

(Actually even with 5 minutes, I think I still can’t get through it. My brain was simply all blank… Frankly speaking, even I could answer it I think I was only fighting for my ego.)

Then after 1 minute, I began my speech with some stuttering: “Cookie stores on the client side. Session is kept on server side. Token is authorization / authentication credential that helps querying resources. And uh…” (paused for several seconds)

Interview Officer: Okay, sounds good. Anything else to add? What about the differences between sessions and tokens?

Me: Emm… (paused for another several seconds)

As a result the interview turned into a failed attempt. And after that day of the interview, I’ve set up my mind to study those fundamental knowledge about “Session” “Cookies” and “Tokens”.

#The evolutionary history of session

From long ago, our Internet was just a place full of documents for simple browsering purpose. The server doesn’t need to remember “who” and “what”. Every single HTTP request was just a pure request towards document contents.

Later when users are looking for more interactive functions for example shopping cart and credit card payments, websites started facing a problem which is to memorize and manage the user related information. Like “who” put “what” product into “which” shopping cart.

This means website needs the ability to distinguish every single user. It’s a challenging task to the servers since HTTP doesn’t really fit in such “stateful” scenario.

Servers could simply add a “mark” (session id) to each of those who visited / logged-in / purchased. In another word, this “mark” is a random and unique string that is created and remains in memory of the web server and can be attached to the HTTP request. This “mark” is also stored on the user’s browser as so-called “Cookies”. When user started a new request, server will then understand who is requesting.

Such solution brought convenience to the users, however the servers were under a huge burden of remembering each user’s session id. As a result, hundreds and thousands of session ids were kept on the servers. A web service’s backend be a cluster (or several clusters) containing tons of server nodes and each of them has to store user’s session id.

Well, this sounds like a “fair” solution by far, isn’t it?

But what if a user login from “server A” the first time and redirects to another page via “server B” the second time? “server B” doesn’t have the user session id yet… How could “server B” handle such case?

Now, here comes the role of sticky-session (also check out this article). The simplest solution is to only allow user to stick with “server A” which maintains user’s session id. But what if “server A” crashed and cannot respond to user’s request? (the well-known “single-point-of-failure”)

Copy sessions from server A to server B

We can copy the session id from “server A” to “server B”. When “server A” crashed, “server B” will still help handle requests. But it’s not yet optimal because doing “copy-paste” between servers are clearly “cost-effective” especially when there are many many users.

How about we store session ids in another dedicated server as “session server”, away from those “servers” that are providing page routing / rendering. And such server will only maintain the user session ids. To avoid having “single-point-of-failuire”, let’s group multiple “session servers” together as one cluster.

Web server cluster and session server cluster

Okay, we separated the website servers into “web server cluster” and “session server cluster”. (Redis and Memcached are those popular solutions to session management) Even though the sessions are reliable now, managing this little “session” is yet a big burden to the maintainers no matter what.

So, is there a simple and feasible way to manage those sessions only on the client side to make both users and maintainers happy? Which can be interpreted as: a user login to the website but the website doesn’t store the user session.

We can let the server return a “Token” string (the most common example is JWT) to each logged-in users similarly to “Cookies”. In order to prevent bad guys faking the “Tokens”, we use a hash algorithm (for example HS256, RS256) and a secret key that only we know to generate a “signature”. This “signature” together with the user id (can also use some other user related information) treated as “Token” is what’s finally stored in the user’s browser.

Token generation

When user sends a request together with this token, servers will take some parts (“header” and “payload”) from the token and regenerate the “signature”. If the signature of the given “token” is the same to the regenerated one, then the user can be considered as logged in. Server should fetch and return the user data. Otherwise, authentication should fail.

Note that,

Signature is not encryption!

This means we can’t put any sensitive data into the “Token”. Because people will still get what’s written in the “Token” easily. The below is an example of “JWT” which looks like already encrypted. But actually it’s just a Base64 encoded string.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJNZSJ9.Ftkmp-5WXYuhgSya_Ah97SBQ1ffR5WlWl_1lLsK3DyM

With any “Token” decoding tool you could find on the Internet, this “Token” can be decoded into:

{ alg: "HS256", typ: "JWT"}.{ userId: "Me" }.[Signature]

Wait… If this can be decoded and seen by anyone else, then it is never safe, isn’t it?

Right, if someone stole your token and pretend he is you then server doesn’t know this “someone” is the real you or not.

In another word,

One with a “valid” token is a “valid” user.

But this indeed removes the burden of servers managing sessions for user since servers just need to authenticate whether the “token” is valid without remembering any sessions. Engineers can now do scalings and maintanences without worrying much about sessions.

#More about “Cookies”

Cookies are small pieces of data (no more than 4kb) that websites store on your computer as records of your interactions with them. They’re used by websites to keep track of who you are and to remember things like your indentity information.

This is how websites are able to remember you as you move between pages and return to the same login screen or the same shopping cart. Nowadays, web apps also utilizes cookies to allow users to save their preferences for instance themes / local settings.

Some key points of “Cookies”.

Maximum 4kb of data stored on user’s computer
Not able to cross origin but Top-level domain cookies can be shared to Second-level (and higher levels) domain
Cookies can be expired
Cookies’ number is limited for each domain

#More about “Sessions”

Session is a mechanism to save the clients’ information on the server with a certain data structure. It represents the process of a session between the server and the client.

For instance, a user session data may contain following information

user profile
user authority and authentication
user group
etc

In this way, information stored in the session object will not be lost when the user jumps between the application’s web pages, and it will persist throughout the user’s visiting period.

However, session will probably be closed when user proactively closes the session, for example closing pages or logging out. To add more, session will also be closed when it expires.

The server’s session usually needs to collaborate with browser cookies to specify the user’s identity because the browser doesn’t know who this “John Doe” is.

Thus, what’s most commonly seen inside a cookie value is “session_id” which is a unique identification to help server understand the vistor’s identity to proceed to some further actions (e.g. fetch user data).

How browser and server handle session

Let’s take a look at a real world example.

A user login to a site, the server handles the login request and return the response with a cookie which contains “session_id” in it and gets stored in the user’s browser.

Then the second time the user redirects himself to a page that requires a login. The request brings the cookie to server. And then the server finds that this user has already logged in, it redirects the user with the target page.

Some key points of “Sessions”

“Session” and “Cookies” are under a cooperative relationship
Able store any kinds of data structure as identification information
Stores on server side. Safer than cookies
“Session” can be expired

#More about “Tokens”

(The “Tokens” here we talk about is the “Web Tokens”. The BlockChain related tokens are not in this topic)

“Token” is a series of strings generated by the servers as a token for the user’s request. When the user visits the server for the first time, the server will generate a “Token” using algorithms (for instance, HS256 / RS256) and a secret key according to the unique identifier passed in. Then the “Token” is encoded with Base64 and returned to the user side. The “Token” can be saved locally as a file or in browser’s memory. In the second time visit, the “Token” will get attached to the requests. And then server will validate the token via the same algorithms and the secret key.

Some key points of “Tokens”

Should be attached to every “resource-fetching” HTTP request’s header when the request requires authentication / validation
No server-side session required
Supports mobile devices naturally
“Tokens” can be expired
CORS is made available especially when we need to collaborate with other public services or applications or even devices
Able to circumvent CSRF because “Token” is authenticated on the server-side and can be expired

#Access token

An “Access token” is the “Token” mentioned before which is carried together with the requests and as a credential for fetching resources via API endpoints. It has a fixed expire to make user re-authenticate periodically which prevents security issues to a certain extent.

A simple “Access token” can be composed by

unique identifier
timestamp
signature (a generated string based on )

How access token works

#Refresh token

A “Refresh token” is a good helper to ask server to regenerate a new “Access token”. It’s considered as a convenient solution because generating the “Access token” requires user’s id and password everytime.

Same to “Access token”, “Refresh token” also has an expiry date attached to it but “Refresh token” has a longer expiry. Once “Refresh token” expired, user has to redo the login to get a pair of new “Access token” and “Refresh token”.

How refresh token works

Usually, “Refresh token’s” expiry datetime is stored in the database, it’ll be authenticated and validated only when re-issuing the “Access token”. Thus, it has a very minimal effect to the backend server performance.

#JSON Web Token (JWT)

A “JWT” string contains

Header (hash algo for signature)
Payload (a user data structure containing the unique indentifier)
Signature (a generated string based on Header and Payload)

According to jwt.io,

JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA.

To make it short, JWT is a solution to provide authenticated info for crossing origins. The official document has done a very clear and in-depth explanation about JWT’s features. Allow me skip re-explaining.

“JWT” truly brought us engineers a lot of advatanges. However, its security issue is a nonnegligible topic. There’s already a good alternative PASETO to replace “JWT”.

For those who are interested in the “JTW” securities, here’re some good articles:

#In the end

Even this article has already covered quite a few knowledge points of sessions cookies and tokens, but there’re a lot more to investigate.

As for the interview I took that time, I think I was good at interactions and double-confirming questions which contributed to a smooth interview process.

#References

What do these console.log print out?

Yanze Dai — Mon, 02 May 2022 00:00:00 +0000

Originally published on Pitayan | What do these console.log print out?

Come to the original site for a better reading experience.

These days, I was preparing a small game for our team's tech workshop. Thought it'd be a good opportunity of introducing the some fundamental and tricky stuffs around JavaScript. So I made 8 quiz to our team members. And hope they could solve them within 15 min. Eventually, it took all of them over 20 minutes to complete and most of them could solve 4-5 questions correctly.

You can take it as just a small test, each quiz has answer attached to the end of the code. Try to answer them first and then look at the answers. Good luck.

#What do these console.log print out?

#No. 1 -- Doctor Pavlov has a dog

function Animal(){ 
  this.type = "animal"
}

function Dog(){ 
  this.name = "dog"
}

Dog.prototype = new Animal()

var PavlovPet = new Dog(); 

console.log(PavlovPet. __proto__ === Dog.prototype)
console.log(Dog.prototype. __proto__ === Animal.prototype)

Answer for No. 1

Very basic stuff about the prototype chain.

// Output
true
true

#No. 2 -- Be careful with the "sort"

var arr = [5, 22, 14, 9];

console.log(arr.sort());

Answer for No. 2

Sorry, not [5, 9, 14, 22]. Each element is converted into string and then comparing the sequence of UTF-16 value.

Check this out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

// Output
[14, 22, 5, 9]

#No. 3 -- Closure and event loop

for (var i = 0; i < 3; i++) {
  const log = () => {
    console.log(i)
  }
  setTimeout(log, 100)
}

Answer for No. 3

It prints out 3 thrice since setTimout puts that log function to the next macro task queue

// Output
3
3
3

#No. 4 -- There's indentation

function createNewArray(item) {
  return
    [item]
}

console.log(createNewArray(0))

Answer for No. 4

This causes an error. Can't return value with break-line and indentation together

Uncaught SyntaxError: Invalid or unexpected token

#No. 5 -- What's inside the "numbers"

const length = 4
const numbers = []
for (var i = 0; i < length; i++);{
  numbers.push(i + 1)
}

console.log(numbers)

Answer for No. 5

This needs a pair of sharp eyes. See that semicolon between the parentheses and curly bracket?

// Output
[5]

#No. 6 -- No length

const clothes = ['shirt', 'socks', 'jacket', 'pants', 'hat']
clothes.length = 0

console.log(clothes[3])

Answer for No. 3

This is equivalant to removing all elements from the array

// Output
undefined

#No. 7 -- Variable went crazy

var a = 1
function output () {
    console.log(a)
    var a = 2
    console.log(a)
}
console.log(a)
output()
console.log(a)

Answer for No. 7

First output: using the global var a

Second output: the first one in the function output() using before declaration should be undefined

Third output: print out after the declaration. Nothing special.

Forth output: var a never got changed by function output()

// Output
1
undefined
2
1

#No. 8 -- There's an accidental declaration

function foo() {
    let a = b = 0
    a++
    return a
}

foo()
console.log(typeof a)
console.log(typeof b)

Answer for No. 3

let a is a local variable. typeof a is checking undeclared variable.

b is a global variable which value is assign in function foo().

// Output
undefined
number

#In the end

Thanks so much for reading! Have you got them all correct?

8 Javascript quiz that may confuse you

Yanze Dai — Mon, 02 May 2022 00:00:00 +0000

Originally published on Pitayan | 8 Javascript quiz that may confuse you

These days, I was preparing a small game for our team’s tech workshop. Thought it’d be a good opportunity of introducing the some fundamental and tricky stuffs around JavaScript. So I made 8 quiz to our team members. And hope they could solve them within 15 min. Eventually, it took all of them over 20 minutes to complete and most of them could solve 4-5 questions correctly.

You can take it as just a small test, each quiz has answer attached to the end of the code. Try to answer them first and then look at the answers. Good luck.

#What do these console.log print out?

#No. 1 – Doctor Pavlov has a dog

function Animal(){ 
  this.type = "animal"
}

function Dog(){ 
  this.name = "dog"
}

Dog.prototype = new Animal()

var PavlovPet = new Dog(); 

console.log(PavlovPet. __proto__ === Dog.prototype)
console.log(Dog.prototype. __proto__ === Animal.prototype)

Answer for #1

#No. 2 – Be careful with the “sort”

var arr = [5, 22, 14, 9];

console.log(arr.sort());

Answer for #2

#No. 3 – Closure and event loop

for (var i = 0; i < 3; i++) {
  const log = () => {
    console.log(i)
  }
  setTimeout(log, 100)
}

Answer for #3

#No. 4 – There’s indentation

function createNewArray(item) {
  return
    [item]
}

console.log(createNewArray(0))

Answer for #4

#No. 5 – What’s inside the “numbers”

const length = 4
const numbers = []
for (var i = 0; i < length; i++);{
  numbers.push(i + 1)
}

console.log(numbers)

Answer for #5

#No. 6 – No length

const clothes = ['shirt', 'socks', 'jacket', 'pants', 'hat']
clothes.length = 0

console.log(clothes[3])

Answer for #6

#No. 7 – Variable went crazy

var a = 1
function output () {
    console.log(a)
    var a = 2
    console.log(a)
}
console.log(a)
output()
console.log(a)

Answer for #7

#No. 8 – There’s an accidental declaration

function foo() {
    let a = b = 0
    a++
    return a
}

foo()
console.log(typeof a)
console.log(typeof b)

Answer for #8

#In the end

Thanks so much for reading! Have you got them all correct?

Learning tmux as a beginner

Yanze Dai — Sat, 30 Apr 2022 00:00:00 +0000

Originally published on Pitayan | Learning tmux as a beginner

Nowadays, Tmux has become into the everyday tool in my workdays. I always wanted to summarize the Tmux usage from long ago when I began to use it. So this article is pretty much what I have started with as a Tmux beginner.

#Table of Contents

What consists of Tmux
What is a Tmux session
- 1. Create a session
- 2. Kill a session
- 3. Kill all of the sessions
- 4. Switch between sessions
- 5. Rename session
What is a Tmux window
- 1. Create a new window
- 2. Switch between windows
- 3. Search the windows
- 4. List all of the windows in this session
- 5. Rename current window
- 6. Close current window
What is a Tmux Pane?
- 1. Split pane vertically / horizontally
- 2. Kill a pane
- 3. Switch between panes
- 4. Move the current pane to a new window

#What consists of Tmux?

Session
Window
Pane

#What is a Tmux session?

The "dialog" that's been kept by Tmux for running tasks which can be resumed later disconnection.

#1. Create a session

Creating a session in Tmux is very semantic:

$ tmux new -s <session_name>

# e.g.
$ tmux new -s helloworld
$ tmux new -s great

#2. Kill a session

The -t flag here means "target". Put the target session name after it to delete the session from Tmux

$ tmux kill-session -t <session_name>

# e.g.
$ tmux kill-session -t helloworld

#3. Kill all of the sessions

The command kill-server seems a bit confusing. But Tmux does have a server running behind the scenes to be able to keep the located processes when the session is detached. So, killing a Tmux server means deleting all saved sessions.

$ tmux kill-server

#4. Switch between sessions

It's useful when we are in a particular session but want to transfer to another session we used.

$ tmux switch -t <session_name>

# e.g.
$ tmux switch -t great

#5. Rename session

Edit the session name after we created it.

$ tmux switch -t <from> <to>

# e.g.
$ tmux rename -t great hi

#What is a Tmux Window?

The "child" under a Tmux Session. A session can have multiple windows ("children") to switch from.

To manipulate the window, we need to use the "Prefix" shortcuts. By default, Tmux uses Ctrl+b.

#1. Create a new window

This will create a new window and leave a number of the window we created to the Tmux bottom status line.

Ctrl + b + c

0:zsh is the first window, 1:zsh is the second window.

#2. Switch between windows

We could choose the target window by specifying its number.

Ctrl + b + <window_number>

# e.g.
Ctrl + b + 2

#3. Search the windows

We could look for the windows we created. The Tmux will go search the output / printout in the terminal.

Ctrl + b + f

#4. List all of the windows in this session

The result screen is actually the same to search but with all of the windows we have.

Ctrl + b + w

#5. Rename current window

By default, the window we created with Ctrl+b+c will have a name like "0:zsh" "1:shell". Sometimes we need special names to distinguish those windows (like naming the sessions) in a rather semantic way.

Ctrl + b + ,

#6. Close current window

Ctrl + b + &

#What is a Tmux Pane?

Instead of Tmux windows to switch back and forth, a Tmux pane can help split the window into certain smaller blocks within the same screen. So that we could retain the information on the same screen.

#1. Split pane vertically / horizontally

Tmux makes it very easy to understand about pane splitting. The symbol % and " vividly explains how we are gonna split our screen.

# vertical split
Ctrl + b + "

# horizontal split
Ctrl + b + %

#2. Kill a pane

Usually when we run nothing in the terminal, we could close it immediately with Ctrl+d for most of the terminals. However if we are under some program like Vim or SSH and still hope to kill the pane forcefully, this will come into help.

Ctrl + b + x

#3. Switch between panes

Jump around the panes.

Ctrl + b + o

We also have numbers for each panes. Display the number of each pane and type the number to select the target pane.

# display pane number
Ctrl + b + q

# e.g.
Ctrl + b + q & 1

#4. Move the current pane to a new window

Sometimes the pane we created is maybe too small to showcase everything in that terminal. We might need to consider moving the pane to a new window.

Ctrl + b + !

#Summary

I personally think Tmux is a very good looking and helpful tool to allow everyone to control their terminals with only keyboards. Nowadays terminal apps like "iTerm" "cmder" all provided features similar to Tmux's "window" and "pane". Sometimes, these features are even more convenient than Tmux.

Tmux is really a powerful tool. But it needs time for us to digest the shortcut keys which is seemingly a "learning" curve to us all so that we could finally master using this powerful tool.

Remake Pitayan Blog (Part 2)

Yanze Dai — Mon, 25 Apr 2022 00:00:00 +0000

Originally published on Pitayan | Remake Pitayan Blog (Part 2)

In 2021, I wrote an article of Remake Pitayan Blog (part 1) sharing an idea of re-constructing my blog with a better design. And finally at the same timing when this article was published, the project was initialized.

This project went quite a long way for over 10 months. I never thought this whole project would ever spend so much time to complete. As of this day when this article is written, Pitayan blog is officially updated to this new version.

#Table of Contents

Setting up the objectives
Migrating from "Gridsome" to "Gatsby"
The UI design
- Using Rotala.css?
- Color Palette
Some cool features
- The selection popover menu
- Medium-link picture magnifier
- Dark and light mode
@pitayan/gatsby-theme-pitayan
What's next?

#Setting up the objectives

I can only use my spare time on my personal projects. And almost all of my time were spent on function developments and fixing bugs. As a consequence, those intermittent contributions caused many back and forth due to lacking of appropriate objectives ahead of starting those projects.

Thus this time, I setup some practical objectives and list out the necessary "todos" under each of its items. I know that if I don't keep a track on what to do and what has been done somewhere, then resuming the process of this project later after some break may become very problematic.

To begin with creating objectives, I wrote down some notes around the following aspects:

The blog new UI design
Implement the blog with Gatsby (as a plugin)
Create necessary pages
Migrate articles from the current blog

(And actually in the next following months, the development kept running toward that direction without any turnings.)

For managing objectives, I utilized Github "Projects" feature to help me manage issues and notes. As you could see there are still quite a few more tasks to do for this project. Although some of the tasks are not very fine-grained, they are yet helpful every time when I hope to recall the latest progress.

Github Projects for issues and notes

#Migrating from "Gridsome" to "Gatsby"

The previous article mentioned why to migrate away from Gridsome

I want to migrate to Gatsby for a bigger community.

It is a very interesting but a very time-consuming step to me. But I believe the outcome of this step will eventually turn out to be the right decision.

Gatsby provides a solid user guide that let me get started quickly without digging into their source code for solutions. And meanwhile, Gatsby's rich plugin library helps extending the functions rather easily(even with only official plugins).

Since it's a complete rewrite, I followed some example repos to scratch my own project. (Want to say thanks to these repo owners and contributors)

gatsby-theme-novela (Unfortunately, the original repo was out of maintenance and removed by the owner. This is a fork)
gatsby-starter-blog-dev-mdx
gatsby-starter-tailwind-mdx-blog
gatsby-mdx-blog-starter-project

These years, many CSS frameworks claims their helpful features are able to solve developers' pain points. At first, frameworks using CSS-in-JS like styled-components & emotion were taken into consideration judging their community relativity toward React.js.

I started using Tailwindcss from long ago, and felt it extremely handy and flexible (maybe I'm just quite used to it already). So, in this project, I want to try with Tailwindcss again.

And for the core plugins, the following ones are chosen based upon the official starters. (Guess almost every developer would pick these up no matter what)

gatsby-plugin-mdx: need to allow using React components in Markdown source for a quick feature enhancement
gatsby-plugin-sharp: Image quality control
gatsby-plugin-image: Provides the images component
gatsby-remark-images: Process markdown images
gatsby-transformer-yaml: Process Yaml file (used for author profile)
gatsby-transformer-sharp: Image quality control for markdown images
gatsby-source-filesystem: You know, the very necessary plugin...

Finally, with some extra "personal-favored" plugins, I created a rough repo outline. Check out to this commit 0d23f502cb2538e51e75ea7589b1ca53722c121f to see the beginning setup (Github link here).

#The UI design

The previous Pitayan blog design is very good-looking to me. Back then, it was made to mimic Medium.com and Dev Community to a certain extent (perhaps only the color schemes :p).

But frankly speaking, creating a new design out of the thin air is quite challenging to an engineer without much of design knowledge like me. Thus this time when I started working on the designs, I almost copied 100% of Novela's layout but added some personal flavors to make the difference. Which the "difference" is actually to bring the previous designs like "page footer" & "post meta" etc to the new design.

I now have only one comment for this decision:

Experience is a reliable beacon.

The Novela blog design, this is really good-looking

I wanted to log all of those beautiful designs somewhere like a Github issue. I made one here but it's a pity that the progress was never to date...

#Using Rotala.css?

I still remember my CSS project in 2019: Rotala.css which is used by the previous Pitayan blog. This little framework seems very handy at first because it provides lots of useful CSS definitions to extend upon, especially the typographical designs.

Here is example how I implemented the classes for the components. Such implementation style is exactly what Rotala.css recommends (by using @apply keyword to mix classes).

.site-tag {
  @apply rounded-sm;
  @apply py-0.5 px-1;
  @apply text-sm;
  @apply text-gray-800;
  @apply bg-gray-200;
  @apply hover:bg-gray-300;
  @apply transition-colors;
  @apply duration-150;
  @apply ease-in-out;

  /* Dark Mode */
  @apply dark:hover:bg-gray-700;
  @apply dark:bg-gray-800;
  @apply dark:text-gray-400;
}

Although this is a really cool feature to reply upon, it seems Tailwindcss prefers users to handle their classes in the HTML template.

#Color Palette

The color of the new design is just the default setting of Tailwindcss. The default palette is already very eye-comfortable, thought it'd be not that necessary to change that so early.

gray

500

red

500

yellow

500

green

500

blue

500

indigo

500

purple

500

pink

500

By the way, changing the colors with Tailwindcss is just another piece of cake. Overriding the theme settings in the tailwind.config.js will do the trick.

// tailwind.config.js
module.exports = {
  ...
  theme: {
    colors: {
      primary: {
        ...
      },
      red: {
        ...
      },
      green: {
        ...
      },
      ...
    }
  }
}

#Some cool features

#The selection popover menu

Medium has a popover menu displaying right above the text content you selected. When it pops up, you could highlight the text and add comments (and even share it to Twitter). Isn't it a wonderful feature?

The Medium popover menu example

Such feature also exists in the Novela blog. It doesn't support text highlight because it requires backend data. But instead, you could copy the selected text and share it to Twitter. So I decided to mimic the Novela's selection popover feature. In this article, you might already noticed this feature but note that the only available area is this article content itself.

I referred to some community React libraries react-selection-popover & react-text-selection-popover. They offered great example of how to detect selection and calculate the positions. Anyhow in the end, I have to create my own plugin / hooks to introduce this feature into the blog theme.

The reason of doing this is pretty simple: neither of those 2 libraries work perfectly in my case.

In order to make it work as expected, I created a hook to meet my demands.

function useTextSelection (
  container: HTMLElement = document.body,
  offsetWidth = 0,
  offsetHeight = 0,
  lineHeightDelta = 32
): { left: number top: number textContent: string }

The function returns left top and textContent. To position the popover, just set the popover mask to absolute together with its left and top values.

<div className="selection-popover" style={{ left, top }}>
  ...
</div>

The container is the HTML element target that holds your selection content. It is a relative anchor of the selection popover container. By default, the document.body should be a decent container. However usually, it's depending on how you gonna define your popover component.

In my case, since the popover component has to stay as descendent of the markdown content(the MDX container), it's better just to use that content tag as container.

offsetWidth and offsetHeight are used for centering the popover container. They don't have to be static values as you could grab those attributes from the HTML tag const { width, height } = targetContainer.getBoundingClientRect().

In the short feature, I may create a new repo to make everyone accessible to this useful plugin. By far, the source code is also a good example I presume for those who wants to have a selection popover component in their page.

#Medium-like picture magnifier

There's a ready-to-use library called medium-zoom that reproduced the feature of the Medium.com's picture zoom-in. The time when I found it, it made me so happy that I don't have to create a plugin myself to achieve the feature.

Guess there's no need to talk more about this feature. Just feel the power of it by click the picture below (or any other pictures in the article page).

This picture will pop out like a modal

Amazing, isn't it?

#Dark and light mode

Like some document sites such as vuejs.org, Pitayan.com now has supported dark-mode with the Tailwind's builtin feature. It affects not only the usual components for site layout but also the code highlight.

Remember Tailwind's dark variable? It is the key to making styles inverted under dark-mode.

@apply text-gray-800;

/** Dark Mode */
@apply dark:text-gray-400;

You may have noticed the "sun" icon ☀️ in the top navigation bar, it triggers the theme to toggle between light and dark. (Believe you'll be enjoying using the dark-mode for protecting eyesight 🤓)

#@pitayan/gatsby-theme-pitayan

Now the Pitayan.com provides a Gatsby theme plugin so that everyone else can build their own Gatsby blog with our theme.

Check out this Github repo: Pitayan/gatsby-theme-pitayan.

Following a quick installation which is also mentioned in the README file. The sad part is that it's only a plugin rather than a startup template. It still requires some more steps to get it to run locally.

$ npm install --save-dev gatsby @pitayan/gatsby-theme-pitayan react@17 react-dom@17

Besides, as you may noticed, at the moment it supports React 17 instead of 18 because the peerDependency of gatsby-plugin-mdx requires @mdx-js/mdx: ^1.0.0. Let's wait until they upgrade their version dependencies. Or maybe we could force using the latest React during NPM modules installation to circumvent the warnings.

#What's next?

Finally, the new theme of Pitayan.com is released. Although there're still some bugs within the theme, they'll be fixed any day soon.

I think what's more important to the site now is automate the release process. Believe any day soon in the future, all I need to do for publishing a new article is just "write content" and "create PR". And then it should merge the PR automatically by a Github scheduler. Since the Pitayan.com deploys with Netlify, any commits to the master branch will trigger a new build.

I'll be publising a part-3 to introduce this automation as the last step of the "remake". Hope I could complete this as soon as possible (No more procrastinations 😆).

Thanks for reading!

Remake Pitayan Blog (Part 1)

Yanze Dai — Fri, 25 Jun 2021 00:00:00 +0000

Originally published on Pitayan | Remake Pitayan Blog (Part 1)

Recently I've decided to remake this whole blog to improve its workflow and UI/UX. This article will uncover my story of creating this blog and also some thoughts about the "remake" approach.

#TLDR;

#The beginning

In 2020, I spent some weeks on building a tech blog Pitayan.com using some popular technologies — Gridsome & Netlify. At the beginning, it seems that the blog has a natural attraction that urges me to put more efforts onto it. So I kept writing stories to share my recent studies and projects.

This little blog is totally a dream come true for me ever since the first time when I came to know about Wordpress back in 2011. The process of creating a blog using Wordpress was so fun that there's not a day without imagining how it will look like after the development is finished. In those years when I was with Wordpress, I've learned a lot about web development. If you are a frontend engineer, I bet you understand the joy and funs of tuning up the designs and program logics for a web app.

images/wordpress.png

Honestly, that Wordpress blog I made long ago was somehow a "crucial factor" of me quitting my former accounting job and decided to devote myself into software engineering. Now I can feel that it is always what you make out of the imagination brings you the most fantastic memories. So this blog I made today Pitayan.com has become into that indivisible part of my life. I'm loving it!

However, it's never difficult to admit that the whole blog was created by a whim without any architectural designs. I just simply picked up some of the most cutting-edge technologies: Vue.js / Gridsome / Netlify. I also attempted to create a CSS framework Rotala.css to power up the blog appearance.

Here is the article of me creating my first ever CSS framework Rotala.css — Attempting to create a CSS framework.

Believe it or not, all of these "cool looking" features went through a lot of "back and forth" which consumed large amount of my time (I could have done something else much more "engineering"). Well, the final result is just in front of you, it looks elegant minimal and fashionable. Hope you find it enjoyable as well.

#The "free" plans

At the time of me writing this article, my blog is hosted on Netlify under a free plan. All of the articles are saved in a Github private repository. It's very obvious that I'm taking advantage of "Free of charge".

But don't take it wrong, the "free" thing here will actually charge you in a different "format" which is clearly written in the service policies and terms.

And any day in the future, if you hope to continue using the same service but with better functionalities, the "user of inertia" will drive you directly to the port of "subscriptions" or "plans". This is how the nowaday's SaaS business converts their "traffics". (For now, the "free" plan fits me really well thanks to the "open-source spirit" from Netlify and Github)

However I really hope the day of upgrading my account could come earlier because it means this blog has gained decent amount of traffic which becomes into a successful site and brings valuable information to the crowd.

To tell you the truth, maintaining this blog is not totally free of charge. I still have to spend some coins for some extra functions.

Domain name on Godaddy.com (20 US dollars a year)
SEO tool from SERanking.com (40 * 12 = 480 US dollars a year) (Btw, I think SEO tool isn't quite a necessary thing at the beginning. I rarely use it to help optimize the article keywords)

The expense in total is 500 US dollars for a year. Yet I made no profit out of it as of today.

#The turning point

Most of the tech blogs I've seen on the Internet don't really have ads on it. Maybe they are just blogging for hobbies, thus earnings perhaps don't really matter to them.

For my part, advertisement is one big reason(target) for me to keep on with it. I consider it as a long-term investment with relatively low cost and high return even this may took much longer than I could imagine.

But I always confidently believe my blog will eventually become into an "oil field" that's minting dollar bills.

During 2020's big incident "COVID-19", Google Adsense has rejected all of my applications due to the well-known "Review Capacity Reached". This prevented a lot of blog owners to convert their traffic into some real income.

images/adsense_review_capacity_reached.png

I’ve also consulted with Adsense community for help. They told me that it's maybe not because Pitayan.com is not eligible but it's just that Google don't really have enough auditing resources for the time being.

After searching the answers on the community forum, I think I've found the most reliable solution which is to submit the application once a while. And then I started taking my chances clicking that submit button once a month.

Just around 2 weeks before (May 28th 2021) I started writing this article, my application for Google Adsense has been approved! It is such great news to my 2020's effort.

images/adsense_approval.png

Hooray 🎉🎉🎉🎉🎉🎉!

I am so excited to be able to put some advertisements to the blog pages. However, after a few days of consideration I've decided not to do it so quickly.

why?

Well, here are the reasons not to display ads at the moment:

The blog isn't a well-thought product. Adding ads onto the page will significantly affect the user experience.
There's not enough amount of traffic and not enough session time. So the ads conversion ratio will lead to a disappointing result.
I want to migrate to Gatsby for a bigger community. The Gridsome is good enough but the reason why I chose Gridsome at the beginning is that I wanted to learn more about Vue.js. Now it's time to get back to React for my personal flavor. (I'll write an article about why I choose React over Vue.js in the end)

Above all, if I hope to implement Google advertisements I need to remake my blog Pitayan.com first.

#The architecture design

Once you choose to go with static site generators like Gatsby or Gridsome, the rest of the things to do is to start writing and then deploy the articles to Netlify with their pre-configured starter template. Everything is so "open-box" that you don't quite need to modify a lot of things by yourself.

However this time, I hope to bring some solid engineering practices to make it robust and foreseeable. It'd be very hard to picture every single detail for each of the features. So, it's perhaps a good idea to just initialize a rather intuitive features outline in the first place. And then, I'll drill down to each of them to fill in the missing details.

#Features outline

The following items are those essential components to take into consideration. You can call it "minimal requirements".

Github repo 1: Source code
Github repo 2: UI
Github repo 3 (private repo): Posts
Tests
Github Actions (CI/CD)
Netlify setup
Google Tag manager
- Google Analytics
- Google Adsense

#Github repos

There will be 3 major Github repos:

Repo 1 (Source code): The main repository that follows the Gatsby folder structure. Netlify will use this repo for builds.
Repo 2 (UI): It contains all of the necessary UI components for a blog. And also showcase the collection of components to public under a subdomain.
Repo 3 (Posts): It contains all of the blog articles.

And the 3 repos have a simple relationship among them:

images/repo_relationship.png

Repo 3 is a Git submodule of Repo 1. Repo 2 is a JS package dependency of Repo 1.

#Tests

images/tests.png

Repo 1 (Source code) & Repo 2 (UI) will have unit tests and e2e tests.

Repo 3 (Posts) has no tests since it's only used as a "database".

#Github Actions (CI/CD)

#Repo 1 (Source code) & Repo 2 (UI)

Detect PR, run tests

(As a personal project, it feels quite redundant to create a PR and merge it by myself... And I'm quite used to merge the changes directly and push them to the remote repo. But I think this disobeys the "engineering spirit" 🤓, right?)

images/repo_1_actions.png

#Repo 3 (Posts)

Detect PR, automatically merge to develop if test passed (Same to Repo 1)
Weekly Crontab, automatically merge develop to master if test passed

Both of the CI jobs will finally trigger Netlify to build the source.

Note that Repo 3 (Posts) has no tests. The CI job has to collaborate with Repo 1 (Source code). The test here behaves like a logic switch to guard against anything wrong with Repo 1 (Source code) so that it won't proceed to "merge" or "build" step when test cases failed.

images/repo_3_actions.png

#Netlify

In the new architecture design, most of the settings on Netlify will probably stay unchanged.

Apart from the current "build & deploy" workflow, there are some "boost-up" features I want to add to Netlify.

Trigger preview build on develop branch (like a staging environment)
Trigger production build on master branch
Notify subscribers (Email & SNS) on a successful production build for the new post tentative

images/netlify_builds.png

Netlify provides this "Branch subdomain" function to allow deploying a branch to a sub-domain. Which will be used as a staging environment for me to confirm the changes.

images/netlify_branch_subdomains.png

Notifying subscribers will be a very important automation feature. Usually I'll send out my new article manually to SNS subscribers after the deployment. (Unfortunately, there's no email subscribers yet 😐)

By the way, I did some research on the "post-build notification" thing but found nearly no articles about how we could send out tweets and emails after the deployment. However, there's a "Outgoing Webhook" thing for me to coupe with what's after the deployment.

images/netlify_outgoing_notifications.png

Anyway, this feature may consume a lot of time throughout development and researches. Let me mark it as tentative.

#Google Tag Manager

Now Pitayan.com has installed Google Analytics tags for counting page views. The implementation is together with source code. I kinda regretted not implementing the tags with Tag Manager when I noticed how powerful it is now.

With Tag Manager, the Adsense can be installed easily without any coding in the source repo.

#Put them all together

I've created a rough workflow digram to make everything intuitive and also relational. It now looks like a vivid system when put together.

images/Pitayan_new_architecture.png

#Lastly

Is all of this worth it? It's just a blog.

Yes. I'm taking a great pain to make all aspects of a blog under control. Anyway, it's also a good opportunity to practice designing a system even though everything here seems making a mountain out of a molehill. So, in my opinion this is exactly what "engineering" looks like. It visualizes the "known" and "unknown" parts clearly and helps understand how we should approach the solutions.

There are a lot more to do including task management and integrations etc. I'll move on to list out all of the necessary tasks for the next step which will be written as a different article Remake Pitayan Blog (part 2).

Can't wait to write some code and have fun with it!!

A petty trick in front of a builtin function

Yanze Dai — Tue, 19 Jan 2021 00:00:00 +0000

Originally published on Pitayan | A petty trick in front of a builtin function

Lately, I was working on a project that’ll heavily concentrating on the server-side. Although those server-side stuffs aren’t really my expertise. The lucky part is that this project is about process the HTTP header and return a proper json as response.

After most of my challenges are completed, there’s one last problem for me to solve:

“How do I get only the domain name and extension name out of a host name?”

For instance, you’ve got some string domains as input:

www.google.com
www.google.co.jp
mail.google.com.hk

The expected output should be:

google.com
google.co.jp
google.com.hk

After some research, I came to know that there’s a builtin function gethostbyname from a native C library netdb which can be directly adopted into my program. The function is well explained in the https://www.gnu.org/software/libc/manual/html_node/Host-Names.html.

Just take a look at the solution out there, it’s easily parsing the hostname into a easy-to-use data structure which completely is the final answer to look for.

Actually, before I investigated this builtin function, I’ve got myself another solution. And here is what I thought.

#My own approach

Just by taking look at the input and output. It’s obviously an easy problem of processing strings. The first idea I came up with was cutting the first group of strings and return the rest of them.

My idea was obviously naive after running a couple of tests. Because some scenarios like multiple sub-domains weren’t taken into consideration.

For instance, a host name like this one:

one.two.abc.com

Expected result:

abc.com

If I only cut the first group of strings. The result is:

two.abc.com

It’s still far from the correct answer. Then I realized that such “obviously easy” algorithm problem shouldn’t be solved by a brute force. There must be a certain pattern in it.

My ration told me to list all of the elements from the hostnames and then find out some aspects to brainstorm with later.

Alright. What does a hostname consist of?

Domain name + Delimiter + Extension name

For google.com

google as domain name
. as delimiter
com as extension name

Okay. I think I’ve found something here...

There’s actually a simple formula to balance the numbers of delimiters and sectors

delimiters = sectors - 1

Usually the extension is either 1 sector (.com) or 2 sectors (co.cc). So if I could enumerate all of the 2-sector extensions, then the domain name is apparently an easy catch.

Why?

It is quite common to say that species of the 2-sector extensions aren’t many. Most of such extensions starts with either “co” or “com”. For instance, co.jp & com.hk.

So in all, the solution would be doing the following things:

Split the hostname by delimiter of “.”
Check if the second to last element is “co” or “com”
if yes, then take the third to last element as domain name.
if no, then take the second to last element as domain name.

#Implementation

Here is my implementation in C:

function getdomainbyhost(char *http_host)
{
  char *res = calloc(128, sizeof(char));

  // return directly if Dev env
  if (!strcmp(http_host, "localhost") ||
      !strcmp(http_host, "127.0.0.1") ||
      !strcmp(http_host, "0.0.0.0"))
  {
    sprintf(res, "%s", http_host);

    return res;
  }
  // Get "." occurrence frequency in host
  // e.g. a.b.google.com.hk => 4
  // e.g. b.google.com.hk => 3
  // e.g. google.co.jp => 2
  // e.g. google.com.hk => 2
  // e.g. google.com => 1
  int occur = 0;
  for (int i = 0; http_host[i] != '\0'; ++i)
  {
    if (http_host[i] == '.')
    {
      ++occur;
    }
  }

  if (occur == 1)
  {
    sprintf(res, "%s", http_host);

    return res;
  }

  char *arr[32];
  int i = 0;
  char domain_name[128];
  memcpy(domain_name, http_host, strlen(http_host));
  domain_name[strlen(http_host)] = '\0';
  char *token = strtok(domain_name, ".");

  while (NULL != token)
  {
    arr[i++] = token;
    token = strtok(NULL, ".");
  }

  // If it's 2-worded domain extension, check the second to last word
  // e.g. google.com.hk => check "com" => google.com
  // e.g. some-service.google.com => => check "google" => google.com
  regex_t regex_domain_ext;
  regcomp(&regex_domain_ext, REGEX_DOMAIN_EXT, REG_EXTENDED | REG_NOSUB);
  int match_result = regexec(&regex_domain_ext, arr[occur - 1], 0, NULL, 0);
  regfree(&regex_domain_ext);

  if (match_result != REG_NOMATCH)
  {
    sprintf(res, "%s.%s.%s", arr[occur - 2], arr[occur - 1], arr[occur]);
  }
  else
  {
    sprintf(res, "%s.%s", arr[occur - 1], arr[occur]);
  }

  return res;
}

It’s perhaps never a good solution. And it may look a bit buggy and will not pass some of the QA tests. Just as you know, I'll have to use the builtin function gethostbyname.

But I believe it's a good practice of solving problems in an unique way. Maybe in the feature days when I take a look back on what I’ve done here, I’ll think myself a super idiot coming out with such dumb solution.

Making a modern JS library in 2020

Yanze Dai — Thu, 05 Nov 2020 13:59:20 +0000

Originally published on Pitayan.com

Recently, I was assigned a task of creating a new JS library to replace the obsolete one that's been released for almost 8 years. This is a quite intruiging task because I'm also permitted to try everything new to make this project much more robust. The first thing came to my mind was to have myself a complex but great "development environment" which explains exactly properly vividly why I'm a DX first developer :D. In this article, I'll demonstrate how I made it with a little "hello-world" repo.

Why the fuss? Is it worth?

Suppose you are in a war, the battalion chief only gives you the bayonet to battle with the enemies. Do you think you dare to charge forward while your enemies are using machine guns? I bet 99% of us are not brave enough to do so (Please don't tell me you'd like to die for glory).

So what if the battalion cheif gives you the most lethal weapon that can defeat your enemies with only one click just like Thanos' snap of fingers? I guess now you got the courage to fight against the enemies :P.

Anyway, I'd like to become that battalion chief providing lethal weapons to my teammates in order to remove the painful part from our development. When our development has become into a joyful experience, I believe the fuss of moving things back and forth is definitely worth of it.

Okay, here is the link to my demo repo:

https://github.com/daiyanze/modern-hello-world

The Inspiration

For making our great new library a real modern one, I've been doing some research on varieties of modern JS repos.

Angular
Vue-next
Graphql-js
popper-js
next.js
redux
and some other interesting libraries

I found that all of these libraries have one thing in common:

They all happen to conincide having either Jest or Mocha/Chai as their testing suites.

Actually Jest and Mocha/Chai have been in the market for years, they are pretty solid. Even there are some new comers like Ava.js, but they still cannot replace the ones with larger community at the momment.

It's already quite a common sense to choose the libraies with larger communities. Because their code is being tested by many other people, and have more bug fixes. In one word: Almost no one is brave enough to use those librarie that are not being tested thoroughly.

How to know if a library has a large community?

Simple, just check if they have many Github stars or issues. "Stars" usually means the library is pretty qualified and accepted by developers. "Issues" in some degree refects the community interactivity and library activeness. Those 2 indicators should be very reliable for our technology selection.

Therefore, I will choose those tools as our devDependencies from Github that have lots of stars and issues.

Dependency Features

Here are some of the mayjor ("must") features for our new project. In my opinion, these features have somewhat been the technology selection standard for a new JS library to start up with in 2020.

1. Typescript

Writing code without types was actually a pain in the ass, "TypeError" will surely appear if we don't think of our data type in advance. So nowadays, since Typescript has become into quite a standard or convention of almost all of the new born JS libraries. Without a doubt, this feature is a "must" to our project.

2. Jest

Test is another thing that a JS project cannot live without. I believe not a team leader will choose a technology that's not even being tested by itself. So Jest is certainly the utility that we need for tests, as you know they got a big community.

3. Prettier

Unifying the team's coding style is time-saving. It matters the most when you are visiting your teammates pull request.

The first time when I saw this tool was 2017. Back then, there was almost no JS code formatters in the open market. Well, Prettier made it available. You can format the code the way you hope it should look like.

And what's more, with the help of ESlinter or TSlinter the editor could become into a really cool stuff for JS developers.

The reason to adopt such tools is simple because:

They give you hints!

Just take a look at the Airbnb's javascript style guide which was created 7 years ago, you'll know how important the code style is.

4. Husky & Conventional-changelog

I think everyone has the following insatiable wishes.

I wish my project can spit out the changelog automatically.
I wish the commit format can be united.
I wish ...

These tools may sound stange to you. But they are actually a great combination to generate stable changelogs automatically based on the git commit messages. Angular project is using this approach to create better changelogs.

Take a look at the Angular's beatiful changelog:

11.0.0-next.3 (2020-09-23)

Bug Fixes

common: add params and reportProgress options to HttpClient.put() overload (#37873) (dd8d8c8), closes #23600
compiler-cli: generate let statements in ES2015+ mode (#38775) (123bff7)
core: ensure TestBed is not instantiated before override provider (#38717) (c8f056b)
forms: type NG_VALUE_ACCESSOR injection token as array (#29723) (2b1b718), closes #29351
Features

common: Add ISO week-numbering year formats support to formatDate (#38828) (984ed39)
compiler: Parse and recover on incomplete opening HTML tags (#38681) (6ae3b68), closes #38596
router: add migration to update calls to navigateByUrl and createUrlTree with invalid parameters (#38825) (7849fdd), closes #38227
service-worker: add the option to prefer network for navigation requests (#38565) (a206852), closes #38194
BREAKING CHANGES

core: If you call TestBed.overrideProvider after TestBed initialization, provider overrides are not applied. This behavior is consistent with other override methods (such as TestBed.overrideDirective, etc) but they throw an error to indicate that, when the check was missing in the TestBed.overrideProvider function. Now calling TestBed.overrideProvider after TestBed initialization also triggers an error, thus there is a chance that some tests (where TestBed.overrideProvider is called after TestBed initialization) will start to fail and require updates to move TestBed.overrideProvider calls before TestBed initialization is completed.

Just don't write the changelog yourself. Let the machines handle them.

Okay, these 4 tools are basically the features I'm really really eager for as a "DX-first" developer. There are of course some other nice features to have, but I think it's already enough to start with at the moment. After all, new more tools will increase the learning time for each of our members.

The "Rollup"

While I was prototyping my repository, I never thought that Rollup would be the biggest challenge to me. Rollup has a great document which you would understand what it hopes you to do immediately just by looking at the examples. But the true problems locate at how I should handle my output files.

Since my output is a library, I need to rollup all my sources into one JS file that can be used within a browser (or maybe Node.js). This can be easily done by Gulp or Grunt with some plugins. I'm pretty new to this magical tool that has enpowered the most famous frameworks like Vue and React.

Frankly speaking, I don't know much about how I should move next.

In order to save those steps of moving back and forth, I gave up on exploring the Rollup configurations. As you could imagine, there's no way for a "noob" to create something "great" from completely zero.

Alright, then. Let me try another approach.

If I don't know how to do it, then somebody else should know.

Vue and React have already done the homework, the rest is me copying them :D.
(Very proud of being a copycat~)

I chose Vue 3.0 to be my targeted repo because it's quite a new project. And Vue currently has a very high popularity.

Its configuration is a bit complex, but still very easy to understand.

// Part of rollup.config.js in Vue-next repo

import path from 'path'
import ts from 'rollup-plugin-typescript2'
import replace from '@rollup/plugin-replace'
import json from '@rollup/plugin-json'

if (!process.env.TARGET) {
  throw new Error('TARGET package must be specified via --environment flag.')
}

const masterVersion = require('./package.json').version
const packagesDir = path.resolve(__dirname, 'packages')
const packageDir = path.resolve(packagesDir, process.env.TARGET)
const name = path.basename(packageDir)
const resolve = p => path.resolve(packageDir, p)
const pkg = require(resolve(`package.json`))
const packageOptions = pkg.buildOptions || {}

// ensure TS checks only once for each build
let hasTSChecked = false

const outputConfigs = {
  'esm-bundler': {
    file: resolve(`dist/${name}.esm-bundler.js`),
    format: `es`
  },
  ...
}
...

After exploring the Vue 3.0 configuration file rollup.config.js, I found that it only does 3 things:

receive the command line parameters via another script
generate list of configs for different types of builds
export that configs list

Just by doing a bit of copy & pasting, I managed to create a custom Rollup configuration file that has the above features. But I replaced one of the Rollup plugins because I personally favor the official packages.

Changed rollup-plugin-typescript to the official @rollup/plugin-typescript

Vue provides various types of builds which I think is a smart move, because the users will have different development purposes and environment.

For now, we could see that Vue offers the following types of build outputs based on the output format of JS code (es & cjs & iife). The ones with a prod in the file name is used for production purposes:

# Vue dist

vue.cjs.js
vue.cjs.prod.js
vue.d.ts
vue.esm-browser.js
vue.esm-browser.prod.js
vue.esm-bundler.js
vue.global.js
vue.global.prod.js
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js
vue.runtime.esm-bundler.js
vue.runtime.global.js
vue.runtime.global.prod.js

I hope that this approach can be applied in our project. Similarly but differently, the build outputs with a dev in the file name is the ones for development.

And what's more, we don't really separate the builds like Vue by judging if it's the runtime or not. So the following outputs are the final targets.

# hellowrold dist

helloworld.cjs.js # for using our library via `require` method
helloworld.cjs.dev.js
helloworld.d.ts
helloworld.esm.js # for using our library via `import` keyword
helloworld.esm.dev.js
helloworld.js # for browser
helloworld.dev.js
helloworld.modern.js # for modern browser like latest Chrome or latest Firefox
helloworld.modern.dev.js

Here is the link to the rollup.config.js: modern-hello-wrold rollup config.

TLDR;... but be patient :P.

some issues of my rollup configuration

1. Type checking issue

It seems that even if I hope to build only one package at a time, the Typescript is checking all of the packages within the monorepo no matter they are dependencies to the build target or not.

Besides, the type checking is likely to happen many times while building multiple packages. I could hear my fan is pretty busy during builds. (This is pretty unnecessary)

Vue 3.0 repo used a flag to disable the duplicated type checking while I didn't. I'm not very sure if this is a good approach or not. But it will surely affect our development or even production builds.

2. Declaration exports issue

My helloworld is using the same tool (API-Extractor) and configurations of Vue for extracting the type declarations from the source code. I'm using a different Typescript plugin. Regrading building declaration outputs, I need to pass the tsconfig.json parameter declaration to that plugin.

Apparently, I didn't do it. Because I opinionatedly thought building without declaration would be slightly faster. And this could be a wrong idea. Anyhow, I should optimize this part later.

The "Build" scripts

I think Vue project is quite smart in the "build" process. They use commands directly together with execa to avoid using the programmable APIs.

execa(
  'rollup',
  [
    '-wc',
    '--environment',
    [
      `NODE_ENV:development`,
      ...
    ]
      .filter(Boolean)
      .join(','),
  ],
  {
    stdio: 'inherit',
  }
);

execa gives us the direct experience of using those farmiliar commands just by regroup the fragments together. This made things a lot simpler IMHO.

I was once thinking about using the Rollup APIs to handle the builds. But after taking a look at the official document, I realised that it is a stupid idea. It made me feel like enforcing a newbie guitar player who can only play 3 chords to beat the rythm in a big concert.

In a brief conclusion: sometimes it's maybe a good idea to comprimise to ones making things simpler.

The "packages"

As I hope to make it a "Monorepo", the packages/ folder contains all of the necessary builtin modules.

# In the demo repo, we have 2 modules in total
packages/
  helloworld/
    src/
      index.ts
    index.js
    package.json
  shared/
    src/
      print.ts
    index.js
    package.json

The shared module is like a helper or util in a normal repo, but it's used as a package so that I could import it as if I'm using a third party lib.

import { print } from '@helloworld/shared'

function helloWorld() {
  if (__DEV__) {
    print("It's under development")
  }
  print('hello world')
}

I personally favor the naming convention of prefixing an @<global_module_name> to the package. This made all of my modules look very united.

{
  "name": "@helloworld/shared"
  ...
}

I found out that Vue 3.0 repo uses NODE_ENV to define the target commonjs module (because the require context usually ignores the Node environment). It will help the users to include the correct script accordingly.

Inside the root dir of each module, I copied & pasted how Vue 3.0 handles its commonjs modules by adding a new entry file.

// packages/helloworld/index.js
'use strict'

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./dist/helloworld.cjs.js')
} else {
  module.exports = require('./dist/helloworld.cjs.dev.js')
}

The difference between helloworld.cjs.js and helloworld.cjs.dev.js in my example is whether it contains the following code block which only serves the script for development. (Have to say that Rollup "treeshaking" is quite an eye opener to me)

...
// "if (__DEV__)" is treeshaked by Rollup

{
  print('It\'s under development')
}
...

The "summary"

During these several weeks of investigation over the Vue 3.0 repository, I think I've found enough fresh new stuffs to learn about. My recent task won't get kicked-off easily without those smart ideas from them.

Now my project was succesfully released. When I saw my teammates having fun with the "well-thought repository", I feel my effort is really worth it.

Attempting to create a CSS framework

Yanze Dai — Wed, 19 Aug 2020 09:48:21 +0000

In 2019, I created a CSS framework and named it Rotala.css. After some refactorings and modifications, I finally released the "toy" framework in 2020. But still it is under prototyping because I think my solution is not yet elegant.

Visit Pitayan.com to read the original article.

The Beginning

The reason why I built this framework is simple:

I want a css framework myself

I knew it will cost me a lot of time to start building it from scratch. So I hope to create such framework by standing on the shoulder of some other powerful tools in order to speed up my development.

At first, I started prototyping with SASS. It is a tool that allows you to combine a lot of unique grammars so that you could experience designing with CSS like programming.

@mixin button-icon {
  margin: 0 2px;
}

.button {
  padding: 2px;

  @include button-icon;
}

Frankly speaking, I learned a lot of good techniques from other famous frameworks like Bootstrap & Bulma & Spectre & Miligram. And I borrowed some good designs from them especially from Spectre.css (There's no shame about reinventing the wheels by imitating others).

A Remake Attempt

CSS was never my expertise. So I didn't expect any goodies from my initial prototyping. Everything I made the first time was frigile and "copy-cat". There's no "I-created-it" in the framework.

Even it was just an unexperienced attempt, how could I undertake such bad result?

Without a doubt, I started it over.

This time, I'll make a great one. Great enough to make me smile.

By a lucky chance, I saw a video talking about a different CSS framework Tailwind.css which made everything nicer. It is perhaps the time to give it a go.

Tailwind.css allows you to build your own framework with their "partical" styling classes. I'm quite into such solution since it is the original usage of styling HTML templates.

<button class="mx-4 p-2 text-gray-600 bg-gray-300">button</button>

Everything in Tailwind.css is segmented tiny enough so that writing these classes into the element is just like putting the building blocks together.

However, my Rotala.css will output stylesheets not templates. So it is a "must" to figure out how I could make it spit out some files on build.

The research proved my worry was redundant. All of the styles in Tailwind.css can be compiled into a small css file with proper configurations just like SASS.

/* Base */
@import "tailwindcss/base";
@import "./base.pcss";

/* Components */
@import "tailwindcss/components";
@import "./components.pcss";

The compile was made simple with postcss-cli

$ postcss docs/main.pcss -o docs/assets/css/rotala.css
...

As you can see from the build command, I completely ditched SASS and migrated to Postcss. There's nothing bad about SASS, but I just hope to stick with only one technology for my framework to avoid some complexities.

Construct the Source Folder

Along with restart everything over again and again, I finally found a pattern to keep my code base in a good shape.

The source folder structure looks like this:

rotala/
  docs/
  style/
  CHANGELOG.md
  README.md
  package.json
  postcss.config.js

docs/ folder is meant to hold static files that could help demonstrate the output. This is also an alternative setting for Github pages that could easily help publish static page without an extra route param.

docs/
  assets/
  base/
  components/
  index.html
  main.pcss

style/ contains all of the source styles. At the beginning, I made around 20 components because I believe they are quite necessary for building the fundamental parts of a modern website. Those styles were heavily based on Spectre.css and Bulma (I'm fan of those frameworks).

style/
  base/
  components/
    Accordion/
    Typography/
    Badge/
    Breadcrumb/
    Tooltip/
    Button/
    Checkbox/
    Divider/
    Drawer/
    Table Group/
    Form Group/
    Input/
    Tab/
    Avatar/
    Link/
    Menu/
    Modal/
    Notification/
    Pagination/
    Popover/
    Radio/
    Select/
  base.pcss
  components.pcss
  main.pcss
  prefix.pcss

Making Difference

When you read till this line, you may ask:

How is it different to other frameworks since you've copied many of their designs?

I do also have the same question in my head. My intention was to create my own CSS framework. Repolishing others' work doesn't smell like a "creating-my-own" spirit. It means this small framework will forever be a toy of mine and has no value to other developers.

Actually, I also hope someone else could benefit from what I built. But I'm already tired of recreating everything from start. Is there a simple way to bring the dead project back to life by adding some finishing touch?

Making "different" is truly difficult especially when you don't have any good inspirations.

What if I take a step back and think about the pros and cons toward Tailwind.css, could I possbily build up a new feature based on the Tailwind.css's legacy and its "shortcomings"? I think the answer would be a "YES".

<div class="md:flex bg-white rounded-lg p-6">
  <img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg" />
  <div class="text-center md:text-left">
    <h2 class="text-lg">Erin Lindford</h2>
    <div class="text-purple-500">Customer Support</div>
    <div class="text-gray-600">erinlindford@example.com</div>
    <div class="text-gray-600">(555) 765-4321</div>
  </div>
</div>

Pros Tailwind.css:

Non-opinionated styles
Low level utility classes
Design is customizable
Plugin system
Based on Postcss eco-system

Cons Tailwind.css:

Template may get too "crowded"
The file size is "big", need to be purged on build
Utilities are less semantic

Even there are some down sides of Tailwind.css, I think they can be outweighed by the Pros far easily. So in my framework, I'll need to figure out plans on dealing with those Cons.

Have to say the 2nd and 3rd Cons are already part of the Tailwind.css's "feauture" which I cannot get rid of. But the first one "crowded template" seems fairly easy to balance with. Thanks to the Tailwind.css's powerful function, I could also write my styles in this way:

.container {
  @apply bg-white rounded-lg p-6;

  @screen md {
    @apply flex;
  }
}

I believe the blow usage looks much nicer, isn't it.

<div class="container">
  ...
</div>

And if I hope to change the container a little bit, I could also use the "template style" to decorate it directly.

<div class="container font-bold mx-2">
  ...
</div>

I clearly understand that I'm not the first one to think in this way, but at least this can be a good feature of my framework to standout among other frameworks.

The Core Feature

As I hope to make differences for my framework, I came up with such core feature to accomplish.

"Design-less" & "Extensible" components

First of all, Tailwind.css is "design-less". It gives full control of the stylings to us developers. I will follow that and make sure all my components are just skeletons that contains very rudimentry styles. By meaning "rudimentry styles", components will have fonts text-size color background-color padding margins et cetera if necessary.

.button {
  @apply appearance-none;
  @apply select-none;
  @apply align-middle;
  @apply font-medium;
  @apply text-center;
  @apply text-base;
  @apply no-underline;
  @apply leading-normal;
  @apply whitespace-no-wrap;
  @apply inline-block;
  @apply cursor-pointer;
  @apply rounded-sm;
  @apply py-1 px-3;
}

In this way, all of the components can be modified into the desired shape just by adding the new styles to override. It follows the original practice of how we should handle the CSS stylings.

Suppose we are styling the "skeleton button":

from this:

to this:

<button class="button text-gray-700 bg-gray-300 hover:bg-gray-500 transition-colors duration-150">
  Background Gray
</button>

In a brief expression:

Class + Utilities = Your stylish component

It may look too crowded in the template. So the better way to use it is maybe to extend the current class instead.

.button {
  @apply text-gray-700;
  @apply bg-gray-300;
  @apply transition-colors
  @apply duration-150;

  &:hover {
    @apply bg-gray-500;
  }
}

Conclusions

The rest of the tasks will be to implement all other components I hope to have in the framework. It took less time creating each of them than before because I defined how to use the "skeleton" components as a core feature.

Now there are all essential components for building a website. The blog page you are reading is actually utilizing the Rotala.css framework. There are still a lot of drawbacks but in my opinion it is such an achievement for me to create something I'm not good at from totally 0.

Anyhow, I'll continue developing the framework. I'd appreciate that you are also interested in my little work here. Feel free to drop me emails to tell about your opinions of Rotala.css. Any PRs or issues are welcome!

About how to use Rotala.css, refer to the document by clicking the link below.

https://rotalacss.com

Originally on Pitayan.com

https://pitayan.com/posts/css-framework-attempt/

Vue 3 new features summary

Yanze Dai — Tue, 11 Aug 2020 12:11:01 +0000

Vue-next (Vue 3) has been out for a while. It is now under release candidate stage which means there won't be big changes on the open APIs. Good to see that Vue has already been stabilized and ready to waltz into our projects.

I have to say that Vue 2 is already amazing enough. But with Vue 3's new features, it's likely to upgrade our projects to an upper level. I guess the most thrilling feature in Vue 3 would be the composition APIs. Evan You himself mentioned that the composition APIs are inspired by the React hooks. Even though the two APIs hooks and compositions are a lot alike, but from the code base they are completely different. Let's not discuss which is better or promising because I don't really think either framework outraces another.

In all, it's so happy to see that Vue can also do what React does. Let's have a close look at the new features.

TLDR;

Visit https://pitayan.com/posts/vue-next-features/ to read original article.

1. Vite

This is another work of art by Evan You which is aim at replacing Webpack in Vue development (Currently only works for Vue). It is designed to be fast just as its French name implies.

Getting started with Vite

The official repo offers us a simple way to create a Vue 3 app via Vite.

Npm

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

Yarn

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

Start Dev Server

It all happened in a blink of eyes.

 ❯ yarn dev
yarn run v1.22.4
$ vite
vite v1.0.0-rc.4

  Dev server running at:
  > Local:    http://localhost:3000/
  > Network:  http://192.168.3.2:3000/
  > Network:  http://10.80.67.216:3000/

Open http://localhost:3000/

vue-next-features

I created a small app to demo the new features of Vue 3. If you take a look at the projects' package.json, the simplicity of vue-next-features dependencies will make you fond of Vite immediately. (I mean, who doesn't want a simpler package.json to start with?)

There is another Vue 3 "Hello World" repo (vue-next-webpack-preview) bundled with Webpack. It is also a good playground.

vue-next-features

{
  ...,
  "dependencies": {
    "vite": "^1.0.0-rc.4",
    "vue": "^3.0.0-rc.5"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.0-rc.5"
  }
}

vue-next-webpack-preview

{
  ...,
  "dependencies": {
    "vue": "^3.0.0-beta.2"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.0-beta.2",
    "css-loader": "^3.4.2",
    "file-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "url-loader": "^4.0.0",
    "vue-loader": "^16.0.0-alpha.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",¥
    "webpack-dev-server": "^3.10.3"
  }
}

2. Composition API

As the biggest the change of Vue.js, the composition API would become your next most frequently and commonly used feature. Just like React hooks, with the Vue composition API will help gain more customizibilities.

Here is a list of the Vue 3 composition APIs. (There are actually more...)

Reactivity
- computed reactive ref readonly
- watch watchEffect unref toRefs
- isRef isProxy isReactive isReadonly
- customRef markRaw shallowReactive
- shallowReadonly shallowRef toRaw
Lifecycle Hooks
- onBeforeMount onBeforeUnmount onBeforeUpdate
- onMounted onUpdated onErrorCaptured
- onRenderTracked onRenderTriggered onUnmounted
- onActivated onDeactivated

Visit Vue 3 official doc to know more about these APIs.
https://v3.vuejs.org/api/composition-api.html

Component Styles

In Vue 2

Use configuration template to define the component contents. In Vue 3, this legacy usage is still available. If you'd prefer this style, you can continue using it.

<template>
  <button @click="count++">count: {{ count }}</button>
</template>

<script>
const multiplier = 2

export default {
  data () {
    return {
      count: 0
    }
  },
  computed: {
    result () {
      return this.count * multiplier
    }
  },
  mounted () {
    console.log(this.count)
  },
  watch: {
    count (val, oldVal) {
      console.log(val, oldVal)
    }
  }
}
</script>

In Vue 3

To use the composition API, you'll need to add a setup property in to the default export. The below code is completely equivalent to the code above.

<template>
  <button @click="count++">count: {{ count }}</button>
</template>

<script>
import { computed, reactive, toRefs, onMounted, watch } from 'vue'

export default {
  setup () {
    const multiplier = 2

    const state = reactive({
      count: 0
    })

    const result = computed(() => {
      return state.count * multiplier
    })

    onMounted(() => {
      console.log(state.count)
    })

    watch(state.count, (val, oldVal) => {
      console.log(val, oldVal)
    })

    return {
      ...toRefs(state)
    }
  }
}
</script>

Go Ahead with the new API

There are 4 reasons why you should use composition API over the default Vue 2 config template:

To increase readability of source code
To avoid duplicated or redundant logics
To group up similar logics
To reuse the logics

Compared to the Vue 2 configuration style, the logics are precisely broken down into smaller particals so that you could group the similar logics together easily. In this way, it also reduces chances jumping around from irrelavant logics. This will help increase the productivity without a doubt.

2. Advanced Reactivity API

Personally, I think this is nothing different to the other reactivity APIs. But it indeed offers those abilities of handling edge cases like custom hooks and shallow layer modification. It is now part of the basic reactivity API according to the Vue 3 official doc.

In the Vue composition api doc (Yes, there's a doc only for the composition APIs), the following APIs are listed as advanced reactivity apis.

customRef: custom hook
markRaw: not able to be a reactive
shallowReactive: Object's first layer reactive
shallowReadonly: Object's first layer readonly
shallowRef: Object's value not reactive
toRaw: restore a reactive to normal Object

Are you farmiliar with Debounce? Here is an official demo of customRef:

import { customRef } from 'vue'

const useDebouncedRef = (value, delay = 200) => {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      },
    }
  })
}

export default {
  setup () {
    return {
      text: useDebouncedRef('some text')
    }
  }
}

3. v-enter-from / v-leave-from

In Vue 2, the <Transition> component helps handle the component animation / transition. But the component property v-enter-active v-enter v-enter-to were quite ambiguous to me. Sometimes I'm confused which happens first.

Now in Vue 3, those transition property names became more unified and intuitive.

v-enter => v-enter-from
v-leave => v-leave-from

<template>
  <transition name="fade">
    <div v-show="show">fade transition</div>
  </transition>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  setup () {
    const state = reactive({
      show: true
    })

    setTimeout(() => {
      state.show = false
    }, 1000)

    setTimeout(() => {
      state.show = true
    }, 2000)

    return {
      ...toRefs(state)
    }
  }
}
</script>

<style>
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2000ms;
}

</style>

The transition order:

v-enter-from (v-enter)
v-enter-active
v-enter-to
v-leave-from (v-leave)
v-leave-active
v-leave-to

I believe this is much easier to understand, isn't it?

4. Allow Multiple Root Element

Vue 2 throws errors on multiple root element. All elements must be nested within one root element in the template.

<!-- Error -->
<template>
  <div>pitayan</div>
  <div>blog</div>
</template>

<!-- One Root Element only -->
<template>
  <div>
    <div>pitayan</div>
    <div>blog</div>
  </div>
</template>

Vue 3 removed this annoying usage. I think this is extremely helpful when you really don't want to nest your elements within a "container" parent. Sometimes all you need is maybe just to insert those bare elements into the right place.

This works similarly to the React Fragments which helps mitigate the nesting issues.

<!-- Vue 3 Multiple Root Element -->
<!-- Okay -->
<template>
  <div>pitayan</div>
  <div>blog</div>
</template>

5. "Filters" is Deprecated(Removed)

I think a lot of people think that filters is maybe an awesome feature of Vue.js. It indeed works well in Vue's template engine. (For example, data formatting / calculation etc).

Let's see how Vue 3 doc explains why filters is removed:

While this seems like a convenience, it requires a custom syntax that breaks the assumption of expressions inside of curly braces being "just JavaScript," which has both learning and implementation costs.

I believe it's nothing bad for development without the filters, even though it may cost you extra time on migrating to Vue 3. In my projects, the appearance of filters is pretty a rare case since I could replace such functionality with a method or computed easily. Because in my opinion, method / computed has higher readability than the filters.

<template>
  <!-- Deprecated (removed) & Error -->
  <span>{{ count | double }}</span>

  <!-- If you have to use fiter, make it a function -->
  <span>{{ double(count) }}</span>
</template>

<script>
import { ref } from 'vue'

export default {
  // Not working
  filters: {
    double (val) {
      return val * 2
    }
  },
  setup () {
    const count = ref(1)
    return {
      count,
      double: val => val * 2
    }
  }
}
</script>

6. New Async Component: Suspense

This is perhaps the only new feature of Vue 3 that may be changed even after official release. The inspiration is also from React Suspense. So the usage scenario would be the same in my opinion.

Do you remember how you render the asynchronous data previously in Vue 2? I think v-if / v-else should be the answer.

<template>
  <div>
    <div v-for="i in items" :key="i">{{ i }}</div>
    <div v-else>loading...<div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: null
    }
  },
  mounted () {
    this.items = await new Promise(resolve => {
      setTimeout(() => {
        return resolve(['one', 'two'])
      }, 3000)
    })
  }
}
</script>

With Suspense component, you can do it without handling conditions yourself. By setting up the default and fallback slot, the Suspense component will handle the async event automatically.

<template>
  <suspense>
    <template #default>
      <div v-for="i in items" :key="i">{{ i }}</div>
    </template>

    <template #fallback>
      Loading...
    </template>
  </suspense>
</template>

<script>
export default {
  async setup () {
    const items = await new Promise(resolve => {
      setTimeout(() => {
        return resolve(['one', 'two'])
      }, 3000)
    })

    return {
      items
    }
  }
}
</script>

7. Display it elsewhere: Teleport

It is another cool stuff based on React Portals. It provides the ability to insert the component to a target DOM Node.

What we do in Vue 2 to insert a custom component in <body> (Of course there is a Vue 3rd party plugin PortalVue providing such functionality):

import Vue from 'vue'

const Ctor = Vue.extends({
  template: `<div>hello world</div>`
})

const vm = new Ctor({ ... }).$mount()

document.body.appendChild(vm.$el)

To use such feature in Vue 3, wrap your target component within <Teleport> and define the destination Node (querySelector) in to property.

<template>
  <Teleport to="body">
    <div>Pitayan</div>
  </Teleport>
</template>

8. Allow Multiple v-model

v-model is used for data two-way bindings in form elements or even custom components. In Vue 2, a custom component can only have one v-model in the tag.

<template>
  <my-input-form v-model="input" />
</template>

Vue 3 removed the limitation and allows you to have multiple v-model so that you could specify the bindings separately for more input elements.

<template>
  <my-input-form
    v-model:first="inputFirst"
    v-model:second="inputSecond"
    />
</template>

9. Global APIs

Vue 3 offers some new APIs to help us control the components and instances better.

createApp

In Vue 2, Vue can be used as constructor to return an instance Object. In Vue 3, you could use createApp function instead. The behavior is actually the same.

// Vue 2
import Vue from 'vue'
import App from '@/src/App'

new Vue({
  el: '#app',
  components: {
    App
  }
})

// Vue 3
import { createApp } from 'vue'
import App from '@/src/App'

const app = createApp(App)

What about those global methods like extend component&nbspmixin and directive?

Same, but you need to use the instance method instead.

// Global methods
app.extend()
app.component()
app.mixin()
app.directive()

nextTick

I think nextTick is a frequently used API since a lot of the logics are actually asynchronous and they need to be arraged to the next DOM update cycle.

In Vue 2, nextTick is an instance method.

export default {
  ...,
  mounted () {
    this.$nextTick(() => {
      console.log('pitayan')
    })
  }
}

Vue 3 allows to you use nextTick as an independent function.

// nextTick function type
export declare function nextTick(fn?: () => void): Promise<void>;

// An official doc Example
import { nextTick } from 'vue'

export default {
  setup () {
    const message = ref('Hello, Pitayan!')

    const changeMessage = async newMessage => {
      message.value = newMessage
      await nextTick()
      console.log('Now DOM is updated')
    }
  }
}

Other Helper Functions

These new APIs will be extremely helpful when you need extra controls for much more abstracted scenarios. I personally think that they can be frequently used in the 3rd party libraries.

h: return virtual node
createRenderer: custom renderer that can be used for cross-environment purposes
defineComponent: type the Object passed in
defineAsyncComponent: load async component when necessary
resolveComponent: resolve a component within the current instance scope
resolveDynamicComponent: resolve a dynamic component within the current instance scope
resolveDirective: get a directive from the current instance scope
withDirectives: applies directive to a VNode

Conclusions

I'm very happy and honored to vitness the growth of Vue.js 2.x => 3.x. Vue team concludes what was not possible natively in Vue 2 and made them possible in Vue 3. As I could see that there are many familar stuffs from Vue 3's code base.

It's not hard to tell that Vue 3 is a much more solid framework. It provides a new and simpler way to organize your source code, meanwhile smaller and faster. And under the help of Typescript and their new features for instance composition API, projects' structure can become very much different than before. Which I believe is a positive impact to the front end community.

That's all for the Vue 3's new feature.

If you think this article is great. Please share it to the social networks. Thanks for reading.

References

Originally on Pitayan.com

https://pitayan.com/posts/vue-next-features/