When can I use Index as Key, and when should I generate another value for it?
Rendering a list of items is a common scenario for most UI these days. In its official document, React states key as an essential property for your list. In this post, I'll summarize some notes on its usage.
Index Is Good Enough For Some Cases
Static Lists
Suppose you only display items without any chance to reorder the list, such as deleting an object, filtering, or moving things around. In that case, index is a safe and easy way for key.
Lists of Stateless Components
If your items are stateless components, it’s also OK to use index…
The reason why I ask to remove most of the comments during code review
When I was a student in University, I learned from many people that I should make a fair amount of comments in my code to make sure other people can understand it. In an onboarding course of an outsourcing company that I participated in, the guide told me that comments should take an average of one-third of lines. I followed this guideline for the early years of my career, but I found that it’s not the right choice later on. These days, I usually ask other…
A few days ago, one of my colleagues asked me to review his Pull Request (PR). The PR is about implementing a dynamic list of text inputs. The program will let users add as many fields as they want via an “Add” button.
This guy ran into one problem: the inputs will lose focus when users type in a key. ReactJs seems to rerender all inputs whenever users type a key; hence, no one focuses. He tried many solutions, but no one worked:
- Using controlled components, store states as an array of strings
- Using controlled components, store states as an…
A simple way to record your video and audio on browser and download it using Javascript
Videos have become very popular in our daily activities on the internet. Do you wonder how difficult a website needs to do to support video? It was tough for companies to bring Media technologies to their tech product since it required knowledge from both Media and Software development. But things had changed in the past few years; when WebRTC was introduced as an open standard for browsers and mobile devices, software developers can easily use its APIs without the need for advanced Media knowledge.
This post will introduce a simple example of recording Video and Audio via your browsers, then…
And could cause frustrations sometime if you don’t acknowledge it
It was an afternoon break. I met Justin, a colleague of mine, appearing a bit thoughtful in the pantry. He is a smart junior developer who did amazingly in our project.
“Hey Justin, how are you doing?”
“Not so good. Well, I can’t remember what I did besides meetings today.”
“Wow, what a busy meeting day, hah?”
“Not really.” Justin paused for a while. “I have three meetings. The longest one is for an hour. The other two are just half an hour for each. They are about 2 hours in total. …
We can apply them in other areas as well
Bao Khoi, my 3-year-old son, is a chatty kid. He loves to play and talks with others all the time. A year ago, he saw my wife and me as the whole world. He followed and obeyed us a hundred percent. As he grew up, he figured out many other exciting things and started to negotiate, argue, or even ignore my words. “The crisis of three years” is the common term people called kids at that age.
Keeping my son sleep in regular time was my focus. Many articles pointed out the benefit for kids if they have a consistent…
Instead of generating zip file and transfer it from your server, why not download data and zip them in your browsers?
I recently worked on a side project, which generates reports per user’s request. For each request, our backend will generate a report, upload it to Amazon S3 storage, and return its URL to the client. Since generating a report takes a while, the output files are stored and the server caches their URLs by request params. If a user orders the same thing, the backend will return the URL of the existing file.
A few days ago, I had a new requirement. Instead of individual files, I needed to download a zip file containing hundreds of reports. …
Attached the TTY for a command that required input, then detach it to run in the background
A few days ago, I created my own remote signer for the Tezos blockchain. For those who are not familiar with Tezos, a signer is a process that holds users’ credentials and signs all transactions on behalf of them. Thanks to Tezos’s docker repository, the setup has gone smoothly. What I have to do is pull the docker image, and run its command.
$ docker run --net=host tezos/tezos:carthagenet tezos-signer launch socket signer -a 127.0.0.1 -p 22000 -WEverything went well in the test environment when I added a testing key in plain text. For production, I need to introduce some…
Note: I’ve published an open-source library go-cloudfunction-auth for this purpose. If you run into the same need, you can just go ahead with the library (see the sample here). In the scope of this post, I will talk more about how I investigate and resolve the problem.
A few weeks ago, I needed to integrate my backend with another service deployed on Cloud Function. Originally, I thought that this integration should be straight forward since my backend and the new service are both backed by Google’s services. Authenticating to Cloud Function should be straightforward using my google service accounts.
Sometimes, you may find currying hard to understand and wonder about its application. In this post, I will list some tips which may helpful for you
In this post, I assume that you already know Currying in Javascript. If you do not, I would recommend you to go through my previous post about currying prior to this post.
Curry in the right order
If you plan to use curried functions for function composition, remember to curry in the right order. The last primary input, which will be traveling along with the composition chain, should be put in the last function. …
