https://yosgi.github.io/en/tags/engineering/Recent content in Engineering on YosgiHugoenMon, 29 Jun 2026 09:20:51 +0000https://yosgi.github.io/en/post/ai-won-t-replace-software-engineers-it-will-replace-the-parts-of-coding-we-never-loved/Thu, 21 May 2026 23:28:56 +1200https://yosgi.github.io/en/post/ai-won-t-replace-software-engineers-it-will-replace-the-parts-of-coding-we-never-loved/AI will not replace software engineers as a whole. It will remove much of the repetitive, mechanical work and give engineers more leverage to focus on judgment, systems, users, and building better products.https://yosgi.github.io/en/post/high-frequency-synchronization-architecture-between-react-state-and-a-3d-engine/Sat, 31 Jan 2026 23:42:31 +1300https://yosgi.github.io/en/post/high-frequency-synchronization-architecture-between-react-state-and-a-3d-engine/A synchronization paradigm for massive real-time data: a middle layer isolates high-frequency data sources, and React consumes only the linear projection of the visible viewport.https://yosgi.github.io/en/post/138-copying-a-linked-list-with-random-pointers/Thu, 22 Jul 2021 00:00:00 +1200https://yosgi.github.io/en/post/138-copying-a-linked-list-with-random-pointers/The idea behind the question is to use double pointers to point to the old and new nodes, and then add a map to map the old and new nodes. recursion var listMap = new Map() var copyRandomList = function(head) { if(head === null) return head if (listMap.get(head)) { return listMap.get(head) } let newNode = new Node(head.val,null,null) listMap.set(head, newNode) newNode.next = copyRandomList(head.next) newNode.random = copyRandomList(head.random) return newNode }; ```Iteration ```javascript var copyRandomList = function(head) { if(head == null) return head var listMap = new Map() listMap.set(null,null) var cur = head while (cur!= null) { listMap.set(cur,new Node(cur.val,null,null)) cur = cur.next } cur = head while (cur!= null) { listMap.get(cur).next = listMap.get(cur.next) listMap.get(cur).random = listMap.get(cur.random) cur = cur.next } return listMap.get(head) };The idea behind the question is to use double pointers to point to the old and new nodes, and then add a map to map the old and new nodes.https://yosgi.github.io/en/post/865-minimum-subtree-with-all-deepest-nodes/Sun, 21 Mar 2021 00:00:00 +1300https://yosgi.github.io/en/post/865-minimum-subtree-with-all-deepest-nodes/Time: 60 minutes I was misled by the depth of the question and thought that the calculation depth should be done from top to bottom. In fact, it can be done from bottom to top. If the left and right subtrees have the same height, return the node itself and its depth. If the left subtree is deeper, it means that the smallest and deepest part is in the left subtree. Return the left subtree and its own depth.https://yosgi.github.io/en/post/783-binary-search-tree-node-minimum-distance/Thu, 18 Mar 2021 00:00:00 +1300https://yosgi.github.io/en/post/783-binary-search-tree-node-minimum-distance/Time: 10 minutes Solve by using the property of pre-order traversal of binary tree var minDiffInBST = function(root) { var min = Infinity var pre = null var dfs = function (root) { if (!root) return if (root.left) { dfs(root.left) } if (pre == null) { pre = root.val } else { console.log(pre,root.val) var reduce = Math.abs(pre - root.val) min = Math.min(min,reduce) pre = root.val } if (root.right) { dfs(root.right) } } dfs(root) return min };https://yosgi.github.io/en/post/1448-count-the-number-of-good-nodes-in-a-binary-tree/Wed, 17 Mar 2021 00:00:00 +1300https://yosgi.github.io/en/post/1448-count-the-number-of-good-nodes-in-a-binary-tree/Notes on counting good nodes in a binary tree using DFS with a running max.https://yosgi.github.io/en/post/1325-delete-the-leaf-node-of-the-given-value/Wed, 17 Mar 2021 00:00:00 +1300https://yosgi.github.io/en/post/1325-delete-the-leaf-node-of-the-given-value/Post-order traversal approach to delete target-valued leaf nodes using a dummy root.https://yosgi.github.io/en/post/129-find-the-sum-of-numbers-from-the-root-node-to-the-leaf-node/Tue, 16 Mar 2021 00:00:00 +1300https://yosgi.github.io/en/post/129-find-the-sum-of-numbers-from-the-root-node-to-the-leaf-node/The question is about starting from the root node. The first thing that comes to mind is top-down DFS, passing parameters downward, and the end condition has no left or right children. Start with the pre-order traversal, and you can assume that all the previous nodes have been processed. var sumNumbers = function(root) { var ans = 0 var DFS = function (root,path) { if (!root) return path += root.val if (!root.left && !root.right) { ans += Number(path) } root.left && DFS(root.left,path) DFS(root.right, path) } DFS(root,'') return ans };The question is about starting from the root node. The first thing that comes to mind is top-down DFS, passing parameters downward, and the end condition has no left or right children.https://yosgi.github.io/en/post/863-all-nodes-with-distance-k-in-a-binary-tree/Sat, 13 Mar 2021 00:00:00 +1300https://yosgi.github.io/en/post/863-all-nodes-with-distance-k-in-a-binary-tree/Time: 60 minutes The idea is still very simple. First use DFS to add a parent to each node, and find the required target by the way. Then starting from the target, use DFS to find a point K away from the target. Find all the parents of target in turn and use DFS to find the point with a distance K. The reason why it takes so much time is that after finding the parent, DFS is used to find it back, causing a memory overflow.https://yosgi.github.io/en/post/222-number-of-nodes-in-a-complete-binary-tree/Sat, 13 Mar 2021 00:00:00 +1300https://yosgi.github.io/en/post/222-number-of-nodes-in-a-complete-binary-tree/Time: 80 minutes The first reaction when I got the question was of course to solve it with DFS. But this is a complete binary tree, so we should use the properties of a complete binary tree. You can examine the depth of the left and right subtrees of the binary tree If the left depth is greater than the right depth, it means that the right side is full. The number of full nodes is 2 to the power of n - 1, plus the root is 2 to the power of n, and continue recursively on the left side.https://yosgi.github.io/en/post/450-delete-a-node-in-a-binary-search-tree/Thu, 11 Mar 2021 00:00:00 +1300https://yosgi.github.io/en/post/450-delete-a-node-in-a-binary-search-tree/Time: 30 minutes The question is divided into two parts to be solved, search and delete The search part is to find the node. You can find the required node according to the properties of the binary search tree. There are three types of deletion If there is only a left child, replace it with the left child. If there is only a right child, replace it with the right child. If there is neither child, assign null. (Since there was a recursive assignment earlier, this will succeed.) If there are both children, store the left child, replace it with the right child, and then find the left child’s position on the right. var deleteNode = function(root, key) { function insert(root,node) { if (root.val > node.val) { if (!root.left) { root.left = node } else { insert(root.left,node) } } else { if (!root.right) { root.right = node } else { insert(root.right,node) } } } function search(root) { if (!root) { return null } if (root.val > key) { root.left = search(root.left) } else if (root.val < key){ root.right = search(root.right) } else { if (!root.left && !root.right) { root = null } else if (root.left && root.right) { var left = root.left root = root.right insert(root,left) } else if (root.left) { root = root.left } else if (root.right) { root = root.right } } return root } return search(root) };Points to notehttps://yosgi.github.io/en/post/116-fill-in-the-next-right-node-pointer-of-each-node/Wed, 10 Mar 2021 00:00:00 +1300https://yosgi.github.io/en/post/116-fill-in-the-next-right-node-pointer-of-each-node/Time: 25 minutes The main idea is to use the stack. The difference from the ordinary level-order traversal is that the stack is cleared every time var connect = function(root) { if (!root) return null var stack = [root] while(stack.length) { var _stack = [...stack,null] stack = [] var pre = _stack.shift() while(_stack.length || pre) { pre.left && stack.push(pre.left) pre.right && stack.push(pre.right) pre.next = _stack.shift() pre = pre.next } } return root};Obviously, the memory space of On I used does not meet the constant space requirement of the question, considering that the links of each layer can be found in the form of a linked list by relying on the parent node.https://yosgi.github.io/en/post/summary-of-binary-trees/Sun, 28 Feb 2021 00:00:00 +1300https://yosgi.github.io/en/post/summary-of-binary-trees/When traversing a binary tree in front, middle, or post-order, we use a stack to simplify operations. This is because they are all recursive structures of DFS, which means processing from bottom to top. However, I always start writing code from the root node, so I need a stack, and the stack is first-in-first-out. This way, I can process the root node last. Level-order traversal is BFS, from top to bottom. The root element that was enqueued first is also the one I want to process first. This is why DFS uses a stack and BFS uses a queue.https://yosgi.github.io/en/post/understanding-react-hooks/Thu, 25 Feb 2021 00:00:00 +1300https://yosgi.github.io/en/post/understanding-react-hooks/Understanding React Hooks Release Date: February 25, 2021 Understanding React Hooks Those who have used the old version of react should know that react’s class component has state to manage the internal state, as shown in the following example code class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }Function components do not have their own state, as shown in the following example code function Clock() { return ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ) }If I want to use a function component and want to have manual control over the date, I have to modify the component using props as follows, which transfers control to the parent component:https://yosgi.github.io/en/post/review-of-login-and-registration-requirements/Sun, 21 Feb 2021 00:00:00 +1300https://yosgi.github.io/en/post/review-of-login-and-registration-requirements/A few years ago, the company needed to log in and register, and the estimated construction period was one month. As a result, the project became uncontrollable during the process, and it took almost three months to complete. In order not to waste the overtime work during this period, I reviewed the process of completing the project. About Requirements Review Let’s briefly review the requirements first. Registration/login has three channels: account/password, mobile phone number, and three-party (including WeChat QR code scanning, QQ authorization, and Weibo authorization). Through a series of rules and guidance, you will eventually reach the login/registration success page and then jump to the source web page.https://yosgi.github.io/en/post/vue-express-mongodb-build-a-backend-login-system/Fri, 29 Jan 2021 17:44:40 +1300https://yosgi.github.io/en/post/vue-express-mongodb-build-a-backend-login-system/Keywords nodejs vue express mongodbhttps://yosgi.github.io/en/post/dom-event-flow/Fri, 29 Jan 2021 17:44:40 +1300https://yosgi.github.io/en/post/dom-event-flow/DOM event flow is easy to confusehttps://yosgi.github.io/en/post/hexo-upgraded-to-5/Fri, 11 Dec 2020 12:37:55 +1300https://yosgi.github.io/en/post/hexo-upgraded-to-5/Filling Diaryhttps://yosgi.github.io/en/post/update-after-a-year/Fri, 11 Dec 2020 00:17:30 +1300https://yosgi.github.io/en/post/update-after-a-year/One month after leaving Dahuahttps://yosgi.github.io/en/post/css-pseudo-class-selector-nth-child/Thu, 07 Mar 2019 17:32:19 +1300https://yosgi.github.io/en/post/css-pseudo-class-selector-nth-child/About nth-child and HTML specificationshttps://yosgi.github.io/en/post/ajax-data-transmission-optimization/Wed, 28 Nov 2018 14:47:40 +1300https://yosgi.github.io/en/post/ajax-data-transmission-optimization/High Performance Javascript Knowledge Pointshttps://yosgi.github.io/en/post/ui-interface-response-optimization/Thu, 22 Nov 2018 16:55:21 +1300https://yosgi.github.io/en/post/ui-interface-response-optimization/High Performance Javascript Knowledge Pointshttps://yosgi.github.io/en/post/regular-expression-performance-optimization/Tue, 06 Nov 2018 15:48:14 +1300https://yosgi.github.io/en/post/regular-expression-performance-optimization/High Performance Javascript Knowledge Pointshttps://yosgi.github.io/en/post/algorithm-and-process-control-optimization/Thu, 25 Oct 2018 14:33:59 +1300https://yosgi.github.io/en/post/algorithm-and-process-control-optimization/High Performance Javascript Knowledge Pointshttps://yosgi.github.io/en/post/performance-optimization-of-dom-operations/Wed, 12 Sep 2018 15:09:33 +1200https://yosgi.github.io/en/post/performance-optimization-of-dom-operations/High Performance Javascript Knowledge Pointshttps://yosgi.github.io/en/post/summary-of-vue-s-easy-to-error-and-easy-to-confuse-knowledge-points/Mon, 10 Sep 2018 18:30:10 +1200https://yosgi.github.io/en/post/summary-of-vue-s-easy-to-error-and-easy-to-confuse-knowledge-points/Knowledge Points Summaryhttps://yosgi.github.io/en/post/javascript-loading-optimization/Tue, 04 Sep 2018 09:23:11 +1200https://yosgi.github.io/en/post/javascript-loading-optimization/Notes from 'High Performance JavaScript'https://yosgi.github.io/en/post/arrays-stacks-queues/Wed, 22 Aug 2018 15:09:45 +1200https://yosgi.github.io/en/post/arrays-stacks-queues/Javascript Data Structureshttps://yosgi.github.io/en/post/proxy-implementation-of-data-response/Fri, 27 Jul 2018 15:56:49 +1200https://yosgi.github.io/en/post/proxy-implementation-of-data-response/Javascripthttps://yosgi.github.io/en/post/http-protocol-summary/Mon, 23 Jul 2018 23:29:19 +1200https://yosgi.github.io/en/post/http-protocol-summary/HTTP simple organizationhttps://yosgi.github.io/en/post/es5-inheritance/Tue, 17 Jul 2018 09:57:34 +1200https://yosgi.github.io/en/post/es5-inheritance/ES5 knowledge reviewhttps://yosgi.github.io/en/post/es5-creating-objects/Fri, 13 Jul 2018 16:51:52 +1200https://yosgi.github.io/en/post/es5-creating-objects/ES5 knowledge reviewhttps://yosgi.github.io/en/post/async/Wed, 11 Jul 2018 14:47:05 +1200https://yosgi.github.io/en/post/async/"ES6 Standard Introduction" Knowledge Points Summaryhttps://yosgi.github.io/en/post/generator-functions-and-applications/Fri, 06 Jul 2018 18:37:55 +1200https://yosgi.github.io/en/post/generator-functions-and-applications/"ES6 Standard Introduction" Knowledge Points Summaryhttps://yosgi.github.io/en/post/a-brief-introduction-to-web-security/Thu, 05 Jul 2018 10:05:36 +1200https://yosgi.github.io/en/post/a-brief-introduction-to-web-security/Web security related contenthttps://yosgi.github.io/en/post/promise/Wed, 27 Jun 2018 13:18:47 +1200https://yosgi.github.io/en/post/promise/"ES6 Standard Introduction" Knowledge Points Summaryhttps://yosgi.github.io/en/post/javascript-deep-copy-implementation/Tue, 26 Jun 2018 17:01:50 +1200https://yosgi.github.io/en/post/javascript-deep-copy-implementation/Javascript Basicshttps://yosgi.github.io/en/post/javascript-sorting-algorithm/Mon, 25 Jun 2018 18:48:42 +1200https://yosgi.github.io/en/post/javascript-sorting-algorithm/Javascript algorithm sorting algorithmhttps://yosgi.github.io/en/post/proxy/Fri, 18 May 2018 09:59:26 +1200https://yosgi.github.io/en/post/proxy/"ES6 Standard Introduction" Knowledge Points Summaryhttps://yosgi.github.io/en/post/observer-mode-and-vue-monitoring-object-changes/Sat, 05 May 2018 22:38:54 +1200https://yosgi.github.io/en/post/observer-mode-and-vue-monitoring-object-changes/Javascript Design Patterns Knowledge Pointshttps://yosgi.github.io/en/post/set-and-map-data-structures/Wed, 02 May 2018 00:00:00 +1200https://yosgi.github.io/en/post/set-and-map-data-structures/"ES6 Standard Introduction" Knowledge Points Summaryhttps://yosgi.github.io/en/post/object-expansion/Tue, 24 Apr 2018 00:00:00 +1200https://yosgi.github.io/en/post/object-expansion/"ES6 Standard Introduction" Knowledge Points Summaryhttps://yosgi.github.io/en/post/iterator-pattern/Fri, 20 Apr 2018 09:41:05 +1200https://yosgi.github.io/en/post/iterator-pattern/Javascript Design Patterns Knowledge Pointshttps://yosgi.github.io/en/post/proxy-mode/Thu, 19 Apr 2018 09:46:11 +1200https://yosgi.github.io/en/post/proxy-mode/Javascript Design Patterns Knowledge Pointshttps://yosgi.github.io/en/post/js-singleton-pattern/Fri, 13 Apr 2018 20:06:30 +1200https://yosgi.github.io/en/post/js-singleton-pattern/Javascript Design Patterns Knowledge Pointshttps://yosgi.github.io/en/post/function-extension/Thu, 12 Apr 2018 00:00:00 +1200https://yosgi.github.io/en/post/function-extension/"ES6 Standard Introduction" Knowledge Points Summaryhttps://yosgi.github.io/en/post/array-expansion/Wed, 11 Apr 2018 00:00:00 +1200https://yosgi.github.io/en/post/array-expansion/"ES6 Standard Introduction" Knowledge Points Summaryhttps://yosgi.github.io/en/post/destructuring-assignment-of-variables/Tue, 10 Apr 2018 11:07:34 +1200https://yosgi.github.io/en/post/destructuring-assignment-of-variables/"ES6 Standard Introduction" Knowledge Points Summary