DEV Community: TCZ

Recent Files

TCZ — Wed, 08 Jun 2022 20:23:59 +0000

Recently, when I was developing with Houdini, Unreal Engine, Blender, VLC, and Chrome at the same time, downloading, saving, and opening files at different directories can be very cognitively tiring.

So many windows. So many files. So many versions. So many tabs. So many folders.

Where did I just save? How can I get to that folder?

I wonder if there is a more cognitively friendly tool to help with navigating these. I should use RECENT FILES function of the file explorer more.

First Impression

TCZ — Sun, 29 May 2022 12:19:31 +0000

关于crit。好久没有在这里写博客。简单说几句。看作品first impression可以捕捉一下。如果要给批评意见可以。最近的一个经历就是，本来想说，这个作品很随便，后来想想，人家那叫随性。其实那个画家也可以画非常雕琢的作品，但那多费劲。一开始觉得别人给的feedback没啥用，后来发现还是有用的。虽然那些feedback都是基于first impression，作者本人失去的就是first impression。

It's been a while since I've blogged here about crit. Just a few words. Look at the work first impression can capture a little. If you want to give a critical opinion can. One of my recent experiences is that I wanted to say that this work is very casual, but then I thought about it, people call it casual. In fact, the painter can also paint very sculpted works, but that much effort. At first, I thought the feedbacks given by others were useless, but later I found that they were still useful. Although those feedbacks are based on first impression, the author himself lost is the first impression. #knee-jerk-critic

Translated with www.DeepL.com/Translator (free version)

Today I woke up early to develop.

TCZ — Sun, 08 Nov 2020 02:49:17 +0000

Today I woke up early to develop.

I ran into a problem because I can't get Heroku CLI working due to proxy issues. I decided to try Glitch.

However, pushing to Glitch is not the easiest thing. If you develop locally, one way to push to Glitch is through Github. However, if you use SQLite locally, there isn't a direct way to sync your local database with the database on Glitch. You have to use some tricks to go around. In this case, you have to upload the database separately from other code as a static asset to your Glitch project. And you use wget in the Glitch project's terminal to put that database file into the correct folder. And you need to write some code to help the server to find the database file in different places in different environments (i.e. local v.s. Glitch).

The task was to merge my Express backend with the React front end. I did not know how I can achieve that. But it turns out to be quite easy. All you need to do is to use npm run build to build the React app and then move the output to the server app's folder and let the server app serve the front end app as static files.

I did all these development on my Windows machine. It's far from a happy business to adapt to PowerShell or cmd as someone who's more familiar with Linux bash. Even though both PowerShell and cmd belong uniquely to Windows, they have different ways to set environment variables. And they have different ways to combine several shell commands. I really don't enjoy the variances.

2020.11.8

My Fight that Made My Express.js App Work with Webpack's Hot Module Replacement

TCZ — Thu, 03 Sep 2020 18:35:47 +0000

I made Webpack's hot reload function work with my existing complicated Express.js app. I watched Lawrence Whiteside's video that taught me how to setup Webapck with Express, which was very helpful but Whiteside's tutorial is about setting up a very simple new Express app with Webpack while I was trying to integrate Webpack with an existing complicated app, so it's expected that I would run into extra hurdles and I did.

So the problem is that I had to configure Webpack so that the webpack-hot-middleware's client will make a correct HTTP request to get updates from the Webpack Dev Server. It sounds simple but when I was in the maze, I did not see an exit and I did not know if there was an exit and if there was one, how much more difficulties that I would encounter before reaching the exit.

Luckily, even though there was an error, I also saw "[HMR] connected" in the Chrome console. And when I changed a local file and saved, both the Chrome console and the webpack-dev-server's console displayed new messages. So things were connected; it's just not perfectly connected.

Seeing the URL the webpack-hot-middleware's client requested, I realized that it was using a wrong URL; the URL won’t return the needed information for a hot reload. So I searched online for articles about express and webpack, and soon I found out that I only need to do one extra configuration, which is to configure publicPath for Webpack's output.

Solving this issue required thinking, reading console outputs, doing research, and most importantly some courage to face the challenge. I'm glad that I can develop my Express.js app with Hot Module Replacement enabled by webpack-dev-server from now on.

Short Videos

TCZ — Fri, 21 Aug 2020 19:06:48 +0000

When learning new technology, I seek short (less than 4 minutes) videos.

Videos tend to be engaging and easy to follow. When talking as opposed to writing, we tend to be entertaining and make ourselves more understandable.

Watching a video requires less motivation. When reading, it's more alone and it can feel like that you are the only active agent in the learning process. However, when watching a video, it feels like a social experience, and someone else is leading you to learn, with enthusiasm.

Lastly, if lucky, we can find some short videos that teach a lot in 4 minutes, preserve our passion to learn, and sometimes clear up some big confusion for us.

RESTful API

TCZ — Wed, 12 Aug 2020 15:35:57 +0000

It is not hard to find the definitions of REST, API, CRUD, and HTTP methods separately. However, knowing these definitions does not give you the answer to what RESTful API is.

I did some research, and the simplest definition I can find is as follows:

"A RESTful API is an application program interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data." - Margaret Rouse

I think the reason why it is hard to come up with a precise and concise explanation for RESTful API is that it is difficult to explain REST in a few sentences, and therefore it is even more difficult to explain RESTful API in a few sentences.

RESTful API sounds simple but the architecture contains more components than it sounds!

generator+promise

TCZ — Tue, 11 Aug 2020 18:05:30 +0000

I saw a generator+promise pattern that intends to make asynchronous code as easy to understand as synchronous code.

However, with async+await, we don't need the generator+promise pattern anymore. And it seems to me that async+await is the neater way to make asynchronous code as easy to read as synchronous code.

callback hells

TCZ — Mon, 10 Aug 2020 13:31:08 +0000

I'm happy that I finally learned how promise, async, await, try and catch work together! Now I can remove many callback hells that exist in my node.js project. I did not know that they were called "callback hells" when I created them. But I did find it frustrating to write deeply nested code. With the promise-async-await-try-catch sword, I feel that I can conquer the hells now.

JavaScript closure

TCZ — Wed, 05 Aug 2020 08:52:03 +0000

I've read posts by several authors who patiently and kindly try to explain to me what a closure is. I can follow their logic. However, because the explanations are lengthy, I'm not satisfied with the fact that I can't pin down the concept with a few words. And I found it somewhat confusing when trying to delineate a closure's relationship with a scope.

The concept of closure becomes much clearer to me after encountering a sentence written by MDN:

"a closure gives you access to an outer function’s scope from an inner function"

I feel that there may be more to what a closure is, but the description above will be a solid point of departure and return. Cheers to precise and concise explanations!