Origin of Ray

Today’s daily question of leetcode is和至少为 K 的最短子数组This question requires the use of prefixes and monotone queues.

We all know that React can develop an SPA, that is, Single Page Application. The so-called Single Page Application, as the name suggests, is that there is only one html doc on the web front end of the entire website. This kind of application is different from traditional websites. At the beginning of the development of the web, different pages correspond to different html, which means that you can see several pages with several different html. Every time the address changes, the address bar will re-issue a get request to the server, and then request back a different html doc.

But Single Page Application does not need, or even should not send a get request every time the route changes, because it only has one page, so in this case, how do we achieve only update the page when the route changes without initiating a new request?, which requires the use of react-router. Let’s take a look at the use of react-router and a simple introduction to the principle.

The traditional solution to layout, based on the box model, relies on the display property + position property + float property. It is very inconvenient for those special layouts, for example, vertical centering is not easy to implement. In 2009, the W3C proposed a new scheme, Flex Layout, which can implement various page layouts in a simple, complete and responsive manner. See my last blog about Flex layout: https://sunra.top/posts/40806/

In this blog we continue to introduce the next new layout: grid layout

The traditional solution to layout, based on the box model, relies on the display property + position property + float property. It is very inconvenient for those special layouts, for example, vertical centering is not easy to implement. In 2009, the W3C proposed a new scheme, Flex Layout, which can implement various page layouts simply, completely, and responsively. Currently, it is supported by all browsers, which means that this feature can now be safely used.

Of course, there is another layout solution is grid layout, but this article will sort out flex first.

The Flexible Box model, commonly referred to as flexbox, is a one-dimensional layout model. It provides powerful spatial distribution and alignment between the child elements of flexbox. This article gives the main features of flexbox, more details will be explored in other docs.

We say that a flexbox is a one-dimensional layout because a flexbox can only handle the layout of elements in one dimension at a time, one row or one column. As a contrast, another two-dimensional layout, CSS Grid Layout, can handle both row and column layouts.

Today, I accidentally clicked on a series of articles on Performance optimization in MDN, learned a lot of new things, and reorganized a lot of old things.

For example, the loading order of different types of HTML resources, whether they will block each other, etc., and for example, learned some new optimization methods, such as 14K optimization, dns-prefetch, etc

This is the entry address: https://developer.mozilla.org/zh-CN/docs/Web/Performance

Given an array containing all integers from 1 to N, but two numbers are missing. Can you find them in O (N) time using only O (1) space?

Link to the topic: https://leetcode.cn/problems/missing-two-lcci/

This problem is not strictly an algorithm problem. I feel that in its solution, one kind of knowledge is like binary knowledge in computer composition, and the other is mathematical knowledge

CSS has been used for a long time, but some of the usage is always vague, and there is no systematic and logical understanding. This time, let’s first clarify the BFC and box model in CSS, as well as some related positioning and layout properties.

Today I saw a good open source project on Github, which is to implement a simple react demo based on the principle of react. Here is just to make your own comments on its code to deepen your understanding. Here is项目链接

This time, we must deal with what a universal lock is. This article will slowly unfold in the following order:

• Through a simple practical example to tell you, the performance of the universal lock in our lives
• What’s a universal lock?
• Talk about the principle of the existence of universal locks from the perspective of matrices and geometry respectively
• What’s wrong with the universal lock?
• Why quaternions can solve the gimbal lock problem

The textures we used before, such as normal textures, gradual change textures, mask textures, etc., are all one-dimensional or two-dimensional. This time we will introduce the cube texture and see how to use the cube texture to achieve environment mapping.