Helped my sister move and brought replaced sofas and tables to my house.
Continued learning Exercise and meditation - positive psychology 17 today.
Meditation:
- It focus on one thing.
- Doesn't have purpose.
Mindfulness: When we begin to experience painful emotion, immediately going and being mindfulness, aware of what ever the physical manifestation is. Just observer it, and our body will take care itself.
Introduce deep breath in your life.
Today was busy. I found we can't please all people, everyone is different. We should make simple try and be patient when researching. Think and do more analysis and search before code. Carefulness is important, lots of mistakes are because of carelessness. And remember don't spend too much time on perfectionism. I also learned Exercise and meditation - positive psychology 17 today.
Today was a little rough. I need to ask several colleagues to help me open permissions. Because I was kind of busy, I made some mistakes. Tired.
Continued learning Enjoy the process - positive psychology 16.
The wonder drug:
- 30 minutes physical exercises 4 times a week.
- 15 minutes of meditation exercises 6 or 7 times a week.
- 8 hours sleep more or less per 24 hours.
- 12 hugs a day.
I watched Enjoy the process - positive psychology 16.
3P: Permission, Positive and Perspective.
Today I continued learning Perfectionism - positive psychology 15.
Learn to fail or fail to learn.
I finished developing (completed the development of) the svg-arc-center-endpoint. At the afternoon, I tried to replace the bottom bracket of my bike, but it's so tight that I couldn't get it off. So I bought a saw to destroy it and take it off.
Continued coding SVG arcs converter.
Today I start coding an SVG arcs converter.
Today I learned Perfectionism - positive psychology 15.
Perfectionism: an incapacitating fear of failure that permeates our lives, especially those areas that we care about most.
You need to ask yourself now: What kind of life do I want for myself.
Today I maintained reveal.js-mermaid-plugin and continued learning 30 Phrases to Talk about your Free Time in English:
I often code. I regularly ride. I recently took up cooking. I started coding about ten years ago. I've been palying games for as long as I can remember.
Benefits of Hobbies:
- To relax
- To stay healthy
- To socialize
It (just) helps me relax. I find that it helps me keep fit. It's a nice way to socialize.
I worked overtime today. Watched and read various things by phone after went home.
Today I learned 30 Phrases to Talk about your Free Time in English.
What do you do in your free time?
I don't get up to much. (I don't do much.) I'm fond of coding. I like to dabble in cooking.
- If a verb follows a preposition it must be a gerund.
Perfected swipe, scroll and tap gesture for Repeat Miracle today. We can detect gesture by moving distance, and block other gesture if we already sure current gesture. I used use-gesture before, but it didn't work very well for me, so I wrote a similar function.
Today I coded App and watched The Burial of Fulilian.
I added select days of week feature for Repeat Miracle today.
This morning when I was waiting for the elevator, a girl was so harry and was afraid of not being able to get in when it up that wanted to get into the elevator when it going down, I should have gotten out of the way and let her get in frist. Because we should know there are various people and all of them are different, includes me. This evening I added get today template feature to Repeat Miracle.
Today I coded the Repeat Miracle, added style to current and finished task and implemented auto scrolling to current task.
Today I read my diary to 2022 March. I was learning English for a long time. Is there some improvement?
Today I learned the spaced repetition system, and we can't use every word we learned in the real life, we just need small part of them. And recorded a great end:
Thank you so much. I'll see you in the next video. Take care my friends. Bye bye.
Today I maintained my bike. It's lots of stuff, almost took my whole day. At evening, I coded Repeat Miracle and added feature using on the phone browser.
I found a solution of VS Code open default editor in diff mode while using custom editor. This took my two days. Today I also had lunch with my sister, she brought lots of fruit and things for me. Tomorrow I will continue to coding Repeat Miracle. We can't do all things in one day.
I've been updating VS Code Snippet Manager from yesterday to now.
Today I used the blade to cut my ingrown toenail, so pain.
Today I worked and bought more bike maintenance tools.
Today I completed the circular time range picker, and published the first version of Repeat Miracle.
Today start coding a circular time range picker.
Today I learned how to maintain the bike and bought some tools.
Today I continued using MWC and found that we can globally regist it in Next.js like:
// app/components/mwc-import.tsx
"use client";
import { useLayoutEffect } from "react";
export default function MwcImport() {
useLayoutEffect(() => {
import("@material/mwc-top-app-bar-fixed");
import("@material/web/icon/icon.js");
import("@material/web/iconbutton/icon-button.js");
import("@material/web/list/list.js");
import("@material/web/list/list-item.js");
import("@material/web/divider/divider.js");
}, []);
return null;
}// app/layout.tsx
import MwcImport from "./components/mwc-import";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<link
href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined"
rel="stylesheet"
/>
</head>
<MwcImport></MwcImport>
<body>{children}</body>
</html>
);
}Material Design Web Components is awesome. Today I tried to use MWC to beautify my App and fined it's very useful, although the top app bar is not completed in MDC 3.
Today continued coding Repeat Miracle App and watched some videos.
Today I worked and continued to learning Too much of a good thing - positive psychology 14.
Today I washed closes, shopped, cleaned the house, watched anime The Burial of Fulilian and maintained my bike. Then I learned Too much of a good thing - positive psychology 14.
- Presser is not the problem, recovery is.
- Quantity does affect quality.
- TBD: Too Busy Disorder
I learned Phrasal Verbs. A phrasal verb (usually) an action verb + a preposition/adverb. Examples:
- I'll run over tomorrow.
- We run out of gas.
- I have to run around a lot today.
Many times, when you see UP as the preposition, it means completely:
- Clean up your room.
- Eat up your food.
- Shut up.
Many times, when you see ON as the participle, it means continuously:
- Carry on!
- I'll work on through the night.
- I read on for about an hour.
Today is a recovery day for me, because I'll work over time tomorrow. I didn't learn and using matchmaking App today but only watched fun videos after went home.
I learned Pronouns. Too many times, we tend to lose the mean of pronoun. That can even be confusing for the native English speaker. Example:
- The car went over the bridge just before it fell into the water. What fell into the water? The car or the bridge.
Sometimes we never mention the none.
- It says it's going to rain tomorrow. Are the two Its the same?
Pronouns like He and She can also refer to things.
- I always push premium gasoline in her.
Them and They can refer to one person.
- I took them to the airport.
- They give me a coffee.
Today I tried to short chat with girls with matchmaking App. This is an interesting function that we can chat 5 minutes each people. I found that many girls will stop the chat after saw my introduce. It's really real, even using short chat function, many girls find boys not march their request, they will stop immediately.
Today I learned Get-Got. A pronoun takes the place of a noun. Get, Got and Do are "pro-verbs". For example:
- Shane likes ice cream. I do (like ice cream), too.
- I'll go to church if Jimmy does (goes to church).
- Get (Bring / Buy / Make) me a coffee.
Got is past tense, however in daily English Got can be past, present and future. Examples:
- I got it. (I understand it. / I received it. / I caught it. / I'll do it.)
- I got two. (I have too. / I bought too. / I brought too.)
- You got this. (You'll be able to do this. / You can do this. / You have this. / You did it.)
The 80-20 Rule: We keep 20% of the first sound, and 80% of the second sound. Examples:
- She cooked the meal.
- She sells stocks.
- I'd do it.
- I can't tell her.
Today I learned S-Sound Family. When we have S in a word, make sure you pronounce it. Examples:
- I think about some things. (Many things)
- I think about something. (One thing)
Also the S is so strong, it can actually cancel other consonants. Examples:
- What's up?
- I was gone for three months.
Sounds that are very similar to the S can carry the power of the S. They are S, Z, SH, ZH, J, CH and F.
Today I deployed a HTML5 game. This game is the same as the HTML5 Menghuanxiyou I've been playing. Because the services of the game were controlled by me, I could send any in-game currency to my account. I knew this would be boring, before I deployed the game. Because excitement is a rare thing, if you get something easily, you may not be excited.
I also continued coding Repeat Miracle App today.
Today is Saturday, but I went to work, because working overtime on weekends will get vacation or money. I find that working on weekends is very effective, because there aren't many chores and I can focus on coding.
Today I learned TH pronunciation. There are 20 consonants. The TH has both vibrated (like in that) and aspirated (like in think) sounds. For example:
They think that there are thirty things inside, but there are thirty-three things there.
With a width of eighth of an inch, the locksmith made the scythe.
Whether Heather like the cold weather, her and her leather feather will freeze together.
I rode a share bike to work today and found that it seemed to be faster than my bike. Maybe it because I was recording the speed and RPM, so I rode harder. Today I learned Long A. There are 6 vowels A, E, I, O, U and Y. The long A sounds in A in same, place, okay, face, angel, wait, weight, gray etc.
I was so stupid today. After I was working overtime, I ordered a free taxi through enterprise taxi. But I selected a taxi that required extra money. I thought there was no need to pay the personal part, only company part need to pay. But after arrived, I found that both of them need to pay. So I paid almost normal taxi fare while using enterprise taxi.
Today I responded to a post and wanted to help the poster, but he thought what my wrote is useless. He's right. I found maybe other people look at me the same way I look at this poster, both he and I are a few abnormal. I've been changing, and I think I'll be "normal" soon.
I also checked how much natural gas the heat uses per day, and found 1 cubic meter is enough. Great only one cubic meter of natural gas a day makes me happy.
Today is cold, so I opened the heat in my new house, but it doesn't seem to be very effective. The temperature of the room opened heat is almost the same as the other rooms.
I started creating an App about routine and spent about 6 hours coding today. Although it's not finished, I rested and watched video. I've been learning patience and Roma was not built in a day. Then I watch videos about positive psychology. I didn't call my mom this week, because I didn't want them to think I want to talk about getting a girlfriend. Feedback is important.
Today spent lots of time to thinking about finding a girlfriend. The main reason was pressure of my parent, and I also need to start doing this too. I've been preparing for a month, and it's time to start. Not waiting, but try my best to start contact.
Continue to learn common questions:
What kind of music do you like?
All sorts, to be honest. But I rarely listen to music. Most music I listened is the game background music.
What is your favorite kind of weather?
I actually like hot weather. I love to ride on the street in summer.
What city would you like to visit in future?
There are so many, but if I had to choose one, I'd say Xizang in China. I've never been to western China, but I have seen so many breathtaking pictures of Xizang. I think that would be my top choice.
Are clothes important to you?
If I'm going to be honest, not really. I don't think I'm fashion conscious at all, for me clothes are just something practical. So long as I look nest and tidy, that fine. I don't pay much attention to coordinating colors or wearing the latest style.
Work and continue to learn common questions:
What's your morning routine?
I aim to get up at 9am. Then I ride to company. After arriving, I eat bread. After that I start work.
How do you stay fit and healthy?
As I mentioned before, I ride every work days. I eat plenty of vegetables and eat meat in moderation.
Did you do any sport as a child?
Yes, we used to play football at school, that was the main sport. Although I also played ping-pang at school, but I wasn't very good at it at all.
Continue to learn common questions:
What part of your home do you like the most?
I'd like to say the bedroom. There's a laptop and really comfy chair and that's where I relax and code.
What do you do in your free time?
Actually, I'm a bit of an animation buff, so I watch lots of animations, but apart from that, I also write code when I have free time.
Do you prefer to spend time with family and friends?
That's hard to say. I enjoy spending time with both, but my work is busy. So I strive to spend a consistent amount of time every week with my family and friends.
My bike flashlight and a strap on the bike were stolen today, so I bought a new cheaper flashlight. I'm mentally prepared that because this flashlight is good, someone may want to take it off, so I'm not very angry.
Today I tried to fix a bug of VS Code, but after I took over an hour to locating the wrong code, I discovered that it's had been fixed 7 hours ago. The VS Code team is so efficient.
Today I recorded and edited a video about Adobe Firefly. It's fun but I rarely use it, so I didn't buy it. Continue to learn common questions:
What job would you like to do?
I haven't really thought about that. Maybe a painter. I think it'd be interesting to learn drawing, not to mention to express my through by images.
What do you study?
Right now, I'm learning English, as I'm working as well. So it's always a balancing act between work and study, but I can just about manage it.
What kind of accommodation do you live in?
I live in the city. It's a basic two-bedroom apartment, with a nice kitchen and one bathroom. It has all the main mod-cons.
When I was going home, a car pulled up, and I stopped behind it to see what should I do next. Then the car began to reverse. It's a bit dangerous because I often stop closer when I ride the bike. I'll stop further from the front car in the future. Learning common questions:
What do you do?
I work as a programmer, actually working in a regular company. I write code, and I'm also responsible for writing technical solutions and code reviews.
Do you like your job?
Yes, I like it most of the time. My work is fun and productive. But I must admit the hours are long and work eats into my personal time.
Today is ordinary. Go to work, work overtime, go back home, help others solve problem and learn English. I learned past tense today. For example, I used to fall into negativity, to tell the truth, and I rarely do this now.
The present perfect continuous is very useful. For example, I've been programming for around 10 years. I've been living in Wuhan for about two years. As a matter of fact, I've been preparing for it for about one month.
Writing diary again, because I want to improve my English. I know practice is very important, so I decide writing diary again. Today, I watched some video about English speaking. I was doing this last year for finding a remote job in other English-speaking country. But after I found a job in Wuhan, China, I almost stopped to improve my English. Now it's time to continue, because I want to change my life a little. Not I'm dissatisfied with current job, but I've experienced various frontend works in China, and want to make some change in my next job. And there's a common belief in China that normal programmer will hard to find a job when they over 35 years old.
Semantic Version (SemVer): We can use semantic version calculator to search matched versions.
| Code status | Stage | Rule | Example version |
|---|---|---|---|
| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |
| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |
| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |
HowToLiveLonger: Pessimism is associated with greater all-cause and cardiovascular mortality, but optimism is not protective.
React SyntheticEvent: a cross-browser wrapper around the browser’s native event.
JS ArrayBuffer vs Blob: An ArrayBuffer is in memory, available for manipulation. A Blob is immutable can be on disk, in cache memory, and other places that are not readily available.
The typed array objects and DataView are represents the ArrayBuffer in a specific format.
const buffer = new ArrayBuffer(8);
const v1 = new Int32Array(buffer);
const v2 = new Int16Array(buffer);
v1[0] = 1;
console.log(v1); // Int32Array(2) [ 1, 0 ]
console.log(v2); // Int16Array(4) [ 1, 0, 0, 0 ]
new DataView(buffer).setInt32(1, 256);
console.log(v1); // Int32Array(2) [ 16777217, 0 ]
console.log(v2); // Int16Array(4) [ 1, 256, 0, 0 ]Git: Using pathspec magic exclude some files when log or diff, e.g. git log -- ':!dist'. See Git pathspec and Making 'git log' ignore changes for certain paths - Stack Overflow
Nothing.
Nothing.
Nothing.
XSS (Cross-site scripting) is a security exploit which allows an attacker to inject into a website malicious client-side code.
CSRF (Cross-Site Request Forgery) is an attack that impersonates a trusted user and sends a website unwanted commands.
HTML crossorigin attribute:
| Keyword | Description |
|---|---|
| Crossorigin attribute is not specified. (Default) | CORS is not used at all |
crossorigin="anonymous" or crossorigin="" or crossorigin |
Request uses CORS headers and credentials flag is set to 'same-origin'. There is no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication, unless destination is the same origin. |
crossorigin="use-credentials" |
Request uses CORS headers, credentials flag is set to 'include' and user credentials are always included. |
Practice interview by AI mock interview.
Many talks.
The data structure of undo and redo (See useUndoable):
{
"past": [0, 1],
"present": 2,
"future": [3]
}Greatest common divisor:
function gcd(a, b) {
let c;
while (b !== 0) {
c = a % b;
a = b;
b = c;
}
return a;
}Take an interview and find some improvements:
- Listen carefully then answer, don't answer irrelevant things;
- Make your mind clear;
- If you don't know the answer the question, please tell straightly;
- Make examples and drawing to make things clear.
CSS position: The size and position of an element are often impacted by its containing block.
Reading.
Practice algorithm.
Practice algorithm.
webpack using TypeScript webpack.config.ts need to install ts-node.
interpret can tell us which file extension need which module to support it. xxx/register can change require to automatically compile files on the fly.
Dynamic programming: Items in the knapsack problem can be related, and we can combine related items into "one" item. Example
Algorithm to compute prime factors:
function primeFactors(num) {
const result = [];
let d = 2;
while (num > 1 && d * d <= num) {
if (num % d === 0) {
result.push(d);
num = num / d;
} else {
d++;
}
}
if (num > 1) {
result.push(num);
}
return result;
}
primeFactors(2000000014);Reading.
Reading.
How to build a tree from unordered and undirected links?
We often create a tree from ordered directed links by iterate through links. But for unordered undirected links we can create a tree like an undirected graph. For example node1 and node2 are connected, we can let node1.links contain node2 and node2.links contain node1. Then we can traverse the tree by set visited flag of each node.
How to visit each child before visit each parent without recursive?
We can traverse the tree by BFS/DFS, and use another array to save the traverse order. Then we can iterate through this array, that order is we wanted.
VSCode go to folder: VSCode has built-in go to file, go to symbol and go to line etc. But for go to folder we need to use this extension.
Get the file name from HTTP response: We can get the file name from the response header Content-Disposition. We can use content-disposition to create and parse HTTP Content-Disposition header.
React get DOM by React element: We can get the DOM of React element by the ref of the wrapped HTML element. Note: This method can only get the initial DOM. Unable to get dynamically updated DOM. Example
Close Sockets - Chrome Web Store: chrome://net-internals/#sockets
HTML <dialog>: ::backdrop CSS pseudo-element can be used for each dialog to style the mask behind the dialog. Example
Watch "Back Arrow".
Watch "Back Arrow".
Nothing.
Access-Control-Allow-Origin: *:
Attempting to use the wildcard with credentials results in an error.
So you can't send Cookie to the interface that with Access-Control-Allow-Origin: *.
Nothing.
Nothing.
Nothing.
Publish a JS file to CDN: Using Migrate from GitHub to jsDelivr, paste a GitHub link to get a jsDelivr link. We can't use GitHub raw content sometimes, for example import('GitHub raw content url'), because the type of GitHub raw content is text/plain.
Currently, body-parser doesn't support multipart/form-data, we should use multer to do this.
Nothing.
Spoken English:
- After you.
- Are you sure of [what you said]?
- Thank you for [what you have done for me].
- Why not [try to persuade him to give up smoking].
- No matter [what he says, don't believe him].
- What's wrong with [this machine].
- What's your favorite [dish].
- What do you mean by [saying that].
- Have you ever [been to Nanjing].
- Would you [care for something to drink]?
- What if [it rains when we have no umbrella with us]?
- Where can I [get a map]?
- I bet [we're lost].
- I can't help [but feel sorry for him].
- I can't wait to [see my family].
- I'd like you to [fetch some boild water].
- I have no idea [how to operate these machines].
- I have got to [go].
- [I'll work] as [hard] as [I can].
- I'm afraid [you didn't quite get his meaning].
- I'm looking forward to [working with you].
- I'm not really happy with [their performance].
- I'm thinking about [moving to a new house].
- It's too bad that [we lost the match].
- It's my fault [we missed the bus].
- It's your turn to [tell a story].
- I wonder if [it would be convenient to visit you next Monday].
- I've had enough of [her continual chatter].
- Once you [decide, you can't change your mind].
- By the way, [is there a bathroom in the apartment?]
- See that [the door is locked before you leave].
- How dare you [call me fat]!
- Do you agree [that we should start early]?
- What can I do [for you]?
- What I'm trying to say is that [he is a good husband].
- What's the matter with [him].
- What would you do if you [were me]?
- How do you like [your new apartment]?
- You are not to [waste your time doing nothing].
- Did you use to [live in Tokyo]?
Nothing.
Nothing.
“Good to go” is an English idiomatic expression that means someone or something is ready for action, and no further delay is necessary.
React ErrorBoundary:
Use ErrorBoundary to catch errors about render. Other errors occur in asynchronous code and event handlers need to use try-catch.
As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.
Pull and Push:
Pull and Push are two different protocols that describe how a data Producer can communicate with a data Consumer. -- RxJS - Observable
This is a common theme in React design. Some popular libraries implement the "push" approach where computations are performed when the new data is available. React, however, sticks to the "pull" approach where computations can be delayed until necessary. -- React Fiber
React memo, force update and useSyncExternalStore
Paly TFT.
Paly TFT.
Vue.js Render Pipeline: Compile -> Mount -> Patch
Trusted Types API:
Trusted Types works alongside Content-Security Policy with the trusted-types and require-trusted-types-for directives.
If the sanitization logic in DOMPurify is buggy, your application might still have a DOM XSS vulnerability. Trusted Types force you to process a value somehow, but don't yet define what the exact processing rules are, and whether they are safe.
Vue.js Lifecycle:
new Vue()
Init Lifecycle
【beforeCreate】
Init reactivity
【created】
Wait el and get template from template option or el outerHTML
【beforeMount】
Create vm.$el and replace el with it
【mounted】
【beforeUpdate】
Re-render and patch
【updated】
【beforeDestroy】
Teardown watchers, child components and event listeners
【destroyed】
Both node emit and web dispatch events are synchronized
web:
document.addEventListener(
"testevent",
function (e) {
console.log(1);
},
false
);
const event = new Event("testevent");
document.dispatchEvent(event);
console.log(2);node:
const EventEmitter = require("events");
const myEmitter = new EventEmitter();
myEmitter.on("testevent", function (a, b) {
console.log(1);
});
myEmitter.emit("testevent");
console.log(2);Node.js JavaScript heap out of memory: Start the process with an additional V8 flag --max-old-space-size, e.g. node --max-old-space-size=8192 server.js start the server.js with a memory limit of 8 GB.
Play TFT.
Play TFT.
Node.js Event Loop:
The event loop is what allows Node.js to perform non-blocking I/O operations. libuv is the C library that implements the Node.js event loop and all of the asynchronous behaviors of the platform.
The event loop's order of operations:
┌───────────────────────────┐
┌─>│ timers │ - nextTickQueue
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ pending callbacks │ - nextTickQueue
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ idle, prepare │ - nextTickQueue
│ └─────────────┬─────────────┘ ┌───────────────┐
│ ┌─────────────┴─────────────┐ │ incoming: │
│ │ poll │<─────┤ connections, │ - nextTickQueue
│ └─────────────┬─────────────┘ │ data, etc. │
│ ┌─────────────┴─────────────┐ └───────────────┘
│ │ check │ - nextTickQueue
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
└──┤ close callbacks │ - nextTickQueue
└───────────────────────────┘
Each phase has a FIFO queue of callbacks to execute.
process.nextTick(): the nextTickQueue will be processed after the current operation is completed, regardless of the current phase of the event loop
- Add a static
formAssociatedproperty to your custom element class. This tells the browser to treat the element like a form control.- Call the
attachInternals()method on the element to get access to extra methods and properties for form controls, likesetFormValue()andsetValidity().- Add the common properties and methods supported by form controls, like
name,value, andvalidity.
webpack tree shaking:
A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports. An example of this are polyfills, which affect the global scope and usually do not provide an export.
We need to add a "sideEffects" property to our library's package.json file to tell webpack which part of the library have no side effect and can be removed if not used.
qiankun CSS sandbox: Use shadow DOM or alter CSS selectors. For example:
/* if app name is react16, alter from */
.app-main {
font-size: 14px;
}
/* to */
div[data-qiankun-react16] .app-main {
font-size: 14px;
}Use Lodash set when there is already a specified key:
var a = {};
a["b.c"] = 1;
_.set(a, "b.c", 2); // {b.c: 2}
_.set(a, "b.d", 2); // {b.c: 2, b: {d: 2}}Nothing.
Nothing.
Paly chess.
React defaultValue: Often uses with uncontrolled components. CodePen - react defaultValue with custom component
Changing the value of
defaultValueattribute after a component has mounted will not cause any update of the value in the DOM.
none
Clash vmess config changes
ws-path: /path
ws-headers:
Host: v2ray.comto
ws-opts:
path: /path
headers:
Host: v2ray.comCreated many bookmarks that need to organize as notes.
Happy! My PR to vscode-js-debug is merged.
Unban health pass.
Can't enter the office building because of health pass baned due to I came back form Baotou after New Year and Baotou become COVID-19 risk area.
git branch --merged [<commit>]: Only list branches whose tips are reachable from the specified commit (HEAD if not specified). Implies --list.
Before my body is dry
In the dusty bassment where we met
May you surprised me so much
Becase you're talking now
I gotta find the truth from many fights
But I'm all alone
You're the only one can help me out
We'll be as one
We're ready to fight
Look over there
They try to kill use for stars
Our bond has got much stronger then before
Don't lose your way in your mind
We have to be as one
Don't be afraid my sweet heart
This is the way to be more strong
Harbor my deep secret
It makes me so blue
Run through this game before my body is dry
--- to be continued ---
D City Rock
PSG: Panty & Stocking with Garterbelt
Bangin' on the heaven's door!
My name is Panty the crazy
Sexy blondie and I'm not dumb
I'm breaking the news now, boys
Us girls, we're full-time horny too
Hey check out that hot one
Damn! He's got a big one delicious
It's time to get dirty now
So will y'all excuse me? Beat the air, I'm busy
Garterbelt
Again you've dialed D-City-2-900?
Pantsu line!
Copy that! Clear the city
Anarchy!
Everyone wants to be me
Anarchy! yeah!
Get it up so I can see
Anarchy!
Let it flow wild and free
Anar chy chy chy chy chy yeah
Y'all ready for the gig?!
By the way, my name is Stocking
I spit venom, stinging arrows
And I got sweet tooth for lollipops
Loli goth, I lick good
These stripes will strip you down
I got no mercy for chiralism
My fans they all love me
cuz I kick it real tasty
I get high being nasty
Garterbelt
he keeps slappin' my butt around
Pantsu line!
freaky girl comin' you way
Anarchy!
Everyone wants to be me
Anarchy! yeah!
Standing ovation please
Anarchy!
Shake that thing wild and free
Anar chy chy chy chy chy yeah
Steady ready for the gig?!
I know you know
those wings inside of you
I know you know
they do get naughty too
Before I go
there's something I wanna say
Your sleepy Anarchy
Wake it up! Wake it up!!
Anarchy!
Everyone wants to be me
Anarchy! yeah!
Get it up so I can see
Anarchy!
Let it flow wild and free
Anar chy chy chy chy chy yeah
Y'all ready for the gig?!
Experience: take off headphones when meet acquaintances.
React Reconciliation Assumptions:
- Two elements of different types will produce different trees.
- The developer can hint at which child elements may be stable across different renders with a key prop.
React Fiber:
The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames. A description of React's new core algorithm, React Fiber
NestJS ignore interceptor
const IgnoredPropertyName = Symbol("IgnoredPropertyName");
export function TimeoutInterceptorIgnore() {
return function (
target, // eg: TimeoutController
propertyKey: string, // eg: ignoreInterceptor
descriptor: PropertyDescriptor
) {
descriptor.value[IgnoredPropertyName] = true;
};
}
@Injectable()
export class TimeoutInterceptor implements NestInterceptor {
intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
const isIgnored = context.getHandler()[IgnoredPropertyName];
if (isIgnored) {
return next.handle();
}
// next.handle() return RxJS Observable
return next.handle().pipe(timeout(5000));
}
}
@Controller("/timeout")
@UseInterceptors(TimeoutInterceptor)
export class TimeoutController {
@Get("/use-interceptor")
asyncuseInterceptor(): Promise<string> {
return new Promise((resolve) => {
setTimeout(() => resolve("ok"), 10000);
});
}
@Get("/ignore-interceptor")
@TimeoutInterceptorIgnore()
async ignoreInterceptor(): Promise<string> {
return new Promise((resolve) => {
setTimeout(() => resolve("ok"), 10000);
});
}
}git-bisect - Use binary search to find the commit that introduced a bug
git bisect start
git bisect bad
git bisect good
lowcode-engine: Another alibaba lowcode engine.
js-hosts: Coordinate non-browser environment and whatwg.
validator.js: A library of string validators and sanitizers.
Daily English Dictation 54: Anti-piracy legislation under consideration in Washington has some websites in a tizzy. Wikipedia, Boing Boing and Reddit say they’ll have none of it and are blacking out their sites on Wednesday.
React Component Lifecycle:
Mounting
constructor()static getDerivedStateFromProps()render()componentDidMount()
Updating
static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
Unmounting
componentWillUnmount()
React Pointer Events
The following event types are now available in React DOM:
onPointerDownonPointerMoveonPointerUponPointerCancelonGotPointerCaptureonLostPointerCaptureonPointerEnteronPointerLeaveonPointerOveronPointerOut
Pointer capture allows the events for a pointer to be retargeted to a particular element other than the normal hit test result of the pointer's location.
React hooks get the previous props or state:
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
// usePrevious(1) -> return undefined/null -> ref.current = 1;
// usePrevious(2) -> return 1 -> ref.current = 2;React useLayoutEffect:
The signature is identical to
useEffect, but it fires synchronously after all DOM mutations.
React Class to Hooks:
-
componentDidMount,componentDidUpdate, andcomponentWillUnmount->useEffect. -
shouldComponentUpdate()->memo
Today I went to hospital and was investigated itinerary. Because there were COVID-19 patients near my city and my answer is off topic, it took a lot of effort to make it clear during the investigation. I should confirm that both have the same understanding when answering other people's questions, be patient and focus on the topic in the future.
React re-render will reset the scrollbars. You can wrap a component with memo to doesn't re-render when props haven't changed.
We can control how to emit TypeScript helpers (__spreadArray, __awaiter, __generator etc.) by use importHelpers or noEmitHelpers.
Why grid layout make page show horizontal scrollbar sometime?
It's not a bug in the grid layout, but because the width of ant-picker-active-bar is wrong and the ant-picker-active-bar is transparent. So it's hard to debug.
We should use document.cookie like getCookie and setCookie functions.
The Document property cookie lets you read and write cookies associated with the document. It serves as a getter and setter for the actual values of the cookies.
document.cookie = "foo=123;max-age=31536000"
// like setCookie('foo', '123', 31536000);Brower randering pipline: DOM - style - layout - paint - tiling - raster - draw - display