repo modern hello world

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.

Originally published at https://pitayan.com.

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…


Rotala css framework
Rotala css framework

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 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.


vue 3 new features
vue 3 new features

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…


redux function programming
redux function programming

Before I set my eyes on the Redux source code, I naively thought OOP is superior than FP(Functional Programming) as a programming paradigm. But this is not right. As we know that FP is dedicated to forming a easy to understand and clear workflow without those obscure abstracted objects and relations. It’s much closer to human’s procedural mode of thinking.

Visit Pitayan.com to read the original article.

Now React has already got hooks which can handle the "states" properly event without Redux. The demand for Redux could be declining but its code base is still worth learning. Especially for those…


JSON.stringify 2 other paramet
JSON.stringify 2 other paramet

Do you know that JSON.stringify can actually take 2 other parameters? I didn't know this before I laid my eyes on my colleague's pull request. (I'm such a noob) But it's nothing difficult. Those 2 parameters will help optimize the result in a good format.

In my opinion, the usage of JSON.stringify parameters is never a rare case. Well, let's take a look at those "I-didn't-know" features that "educated" me.

Visit https://pitayan.com/posts/json-stringify-params/ to read the original article. We also have beautiful source code highlights.

1. Replacer: Filtering your properties

This parameter is of course optional by default. By assigning Array of Number or String, the…


es2020
es2020

ES2020 has been out for a while. I guess a lot of Node developers have already adopted these features. Some even started using them when these features were still under proposal stages. Yep. My team started using some stage 3 features for quite a while.

In this article, I’m going to talk about my feelings of using these ES2020 features. As a result, I think those features are great and essential.

(Visit https://pitayan.com/posts/vue-techniques/ to read original article. Source code is highlighted.)

1. Operator: Nullish Coalescing

At the beginning, my idea of “providing exlicit explanation of your code” denies such improvement. I think since a…


I recently met a small issue on creating a new randomly ordered array based on an old one. To speak shortly, the final goal is to get a shuffled array.

Visit https://pitayan.com/posts/javascript-shuffle-array/ to read original article with source code highlights.

The following is my solution after a few moment’s experiment before I search the web. (I thought I could do it myself :p)

var arr = [1, 2, 3, 4, 5, 6, 7]function shuffle (arr) {
let i = 0,
res = [],
index
while (i <= arr.length - 1) {
index = Math.floor(Math.random() * arr.length)
if (!res.includes(arr[index]))…

vue techniques
vue techniques

Now Vue.js has become a hot framework for front end development. There are a lot of engineers utilizing the convenience and powerful features of Vue.js. Yet, some of the solutions we’ve done might not follow the best practice. Well, let’s take a look at those must-know Vue techniques.

(Visit https://pitayan.com/posts/vue-techniques/ to read original article. Source code is highlighted.)

1. Functional Component

A functional component is stateless and has not lifecycle or methods. So it cannot be instantiated

It’s very easy to create a functional component, all you need to do is to add a functional: true property to the SFC or adding functional


This article suggests using more CSS and less JS to construct the web UI. To realize this target, it’s preferrable to get farmiliar with as many as possible of CSS features. But it’s quite difficult to know all them. Another solution instead is to follow the best pratices and reduce the code quantity.

Pseudo selectors to cover in this article:

1. :first-line

It represents the first line of text…


Just a few days ago, I saw someone (nhudinhtuan) made a voice recognition helper with Chrome experimental WebSpeechAPI. The helper app is going to listen to human voice and turn it into plain text. After all that it will open up a new tab page of Google Search.

Give it try via the link here. (Only supports Chrome / new Edge browser)

Yanze Dai

“DX-first” Web Developer. Check out my blog https://pitayan.com.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store