RSSAmplifier

Blog

Pitayan Blog

Inspiring stories, thoughts and ideas of software development

pitayan.comRSS feed ↗32 posts

Latest posts

Here're what I've learned after 5 weeks of Leetcode study plan

I started using leetcode.com since 2016 and solved quite a lot of easy problems using Python. There were many solutions on leetcode.com with only one line of Python code back then. It felt very cool and I took some time practice a lot mimicking that “one-liner” for solving those problems. But apparently in the end, it didn’t help me acquire any actual algorithm knowledge. My goal of doing…

An indepth explanation of the Knuth-Morris-Pratt algorithm

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,…

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…

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…

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…

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

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,…

About

Hi! Welcome to Pitayan.com . This is a place publishing articles about web techonologies and experience about web developments. Thank you for coming by and reading those articles. Hope Those materials could actually help you improve your skills or gain some knowledge in web development industry. What does “Pitayan” mean? “ Pitayan ” is composed by the following words: pitaya and blog Combined as…

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…

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…

Making a modern JS library in 2020

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…

Attempting to create a 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. # 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.…

Vue 3 new features summary

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…

Learn Functional Progamming Design from Redux

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. Now React has already got hooks which can…

JSON.stringify accepts 2 other parameters

Do you know that JSON.stringify can actually take 2 other parameters? I didn’t know this before I laid my eyes on my colleage’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…

I Have Very Good Feelings about ES2020 features

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

The optimal solution to shuffle an Array in Javascript

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

Have You Mastered These 9 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. # 1. Functional Component A functional component is stateless and has not lifecycle or methods . So it cannot be…

16 CSS Pseudo Selectors Worth Bookmarking

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. # 1. :first-line It represents the first line of text as its name implies. Browser Compatibility:…

I created a sexy voice assistant in 180 lines of code

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 &#x2F; new Edge browser) I think this is quite fun to make some interesting…

A brief talk about technical debt

# What is technical debt? “Techinical Debt” comes from the mouth of Ward Cunningham , he first used the technical complexity ratio as a liability, referred to as “technical debt”. Software development is a very complicated project, so many people consider “software development” as “software engineering”. Software is aimed at serving various industries (finance, medical, shopping, etc.). Thus our…

A drill down of React Router: can&#x27;t be any simpler

# Drill down Recently, I started drilling down to the bottom of those tools and frameworks’ source code in order to enlighten me on software&#x2F;system design (as a pretentious developer). I think you’ve seen that there are many libraries which kernel are with only a few lines of code on Github (e.g. Reselect), and they are starred 1000+. (Actually, react-router isn’t one from them though) Thus,…

Javascript key-value store: understand some cool built-in Objects

In this article, I’ll show you how to handle Javascript “key-value” data type with its special “Array”. # Can you use “Array” as a “key-value” store? Technically, No … An Array is used for storing ordered list of data. This means that the key to each of its value is actually a number(string number). let arr = [ 0 , 1 , 2 ] arr[ 0 ] &#x2F;&#x2F; 0 arr[ 1 ] &#x2F;&#x2F; 1 arr[ '2' ] &#x2F;&#x2F; 2…

Well explained: Javascript in operator

This article is going to uncover the usage of Javascript in operator. in operator is one of the keywords in Javascript. We use it very often in loops or if conditions. in operator can check if something exists in the Object. It returns true when the first operand is in the Object as a property or exists in the prototype chain. # 1. Simple basic usage # Object property check The follow example…

Javascript this Object: still confused with this helpful keyword?

This article will help you fully understand the keyword this in javascript. With some “pain-in-the-ass” examples, I’ll show you how to turn this from a “headache” into a real helper. # “this” is a changeful object Maybe you misunderstood this keyword with a class this . But javascript this keyword behaves a bit different than some other programming languages like Python or Java. The way to use it…

Javascript Get URL info with document.location

In this article, you will learn about the usage of document location object in javascript. # 1. Basic Usage # href Using the location api is quite easy. What we use most frequently is perhaps the href property. This returns us the string url of the current working page. function getURL () { return window . location . href &#x2F;&#x2F;…

Server-side rendering (SSR) for an SPA project

SSR stands for Server-Side Rendering. It is a technique used to improve the perceived page load times. You may heard of SSR (server-side rendering) or have already been using it in your project. I believe that there are still many questions about when we need it and how we are going to implement it in our project. In this article, we are going to have a peak over this interesting topic. # 1. What…

Deploy Springboot application with Travis and Heroku

Our target in this article here is to let you know how to deploy the application to Heroku cloud with Dockerhub and Travis CI. The code example is uploaded to Github repository my-springboot-helloworld . TL DR; Please skip to step 3 if you are ready with a Github repository and a simple Spring Boot application. You also need to have Travis Dockerhub and Heroku accounts before start. They are all…

Git commands: 8 very commonly used magics

The article is going to cover the following Git commands that will likely make you more efficient on using Git. Hopefully you’d like to put them into your daily practice. git show git rev-parse git rebase git cherry git cherry-pick git diff git stash git checkout TLDR; # 1. Get me the given commit message Sometimes you need the message of one commit. Of course it’ possible to trace back the log…

Privacy And Policies

At Pitayan, accessible from https:&#x2F;&#x2F;pitayan.com , one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by Pitayan and how we use it. If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us. 1. Log Files Pitayan follows a standard…

Terms and Conditions

These terms and conditions outline the rules and regulations for the use of Pitayan’s Website, located at https:&#x2F;&#x2F;pitayan.com . By accessing this website we assume you accept these terms and conditions. Do not continue to use Pitayan if you do not agree to take all of the terms and conditions stated on this page. Our Terms and Conditions were created with the help of the Terms &…

Write For Us

Hello friend! Thought you must be interested in submitting your own writings to this site. Pitayan.com welcome people who are also fan of software development. If you are also one of them, why not read the following guide and begin your writings? Commitments For those who wants to contribute to Pitayan, please feel free to submit articles. However, there are several commitments for an author to…