bookmark_borderHow to locate keywords when using vi / vim in Linux

Easy Steps:

  1. Make sure it is in command mode (writing appears in the lower left corner)
  2. Enter the “/” slash
  3. Enter the text you want to find, such as “loadmodule”-the lower left corner is “/loadmodule”
  4. The corresponding text will be highlighted

Display the next matching text: type n

Display the last matching text: type N (upper case)

bookmark_borderThoughts after Reading “On Average”

How the article “On Average” relates to the work of web development 

The article describes how the average is designed and the consequences of the average. At first, the average value was used to measure the size of the soldier’s chest, and later gradually developed into statistics of various data sets. But later, with the popularization of the concept of average value, the problems caused by the setting of the average value are also increasing. Some people realize that this is because the average value is not reasonable or accessible to all. It may represent many people, but not everyone. Many people are also troubled by the average setting.

The same thing happened on the website. If a website is on average, then he can serve most ordinary people. But just like what happened to the paratroopers, there will be many people who are not included in the scope of ordinary people who can not use this site normally. They will not feel the same usability and accessibility. We don’t just need to make a website that is on average and serving ordinary people. We should make a website that serves all human beings. Because everyone is born equal. Another point is that the average value will change according to the passage of time in society. In this case, the average value we made earlier may need to be changed, resulting in a website that has entered the maintenance period needs to return to the development period. This is a waste of human resources. However, if it is not modified, it may lead to the loss of customers on the originally developed website. So why not make a website that serves all human beings directly?

bookmark_borderAUDIO标签详细解读

过程

前情提要

这两天弄了个基于Vue的音乐播放器,因为最近好多人做我也就跟着学了学。还没有很完善,在audio这里玩了很久。以前都没用过audio标签。

重点

前言

audio标签是HTML5中新增的标签之一。可以看看HTML5之前怎么导入音频

网页内播放可以用embed导入,但是embed标签过不了HTML4的validation。下面这个用了vue绑定src。

<embed height="50" width="100" :src="songUrl">

audio标签概述

用来定义声音。

下面看看属性们。测试的时候手上没有音乐的话src可以用我的

属性

src

用来指定音乐的路径。Demo:

<audio src="song.mp3">
  能看到说明不支持
</audio>

但你会发现用了上面的代码,并不会显示。这是因为没有自定义界面,也没有加上controls属性。

controls

用来指定是否显示默认的音乐面板。Demo:

<audio src="song.mp3" controls></audio>

这样浏览器会显示audio标签的默认播放面板。也可以写作:

<audio src="song.mp3" controls="controls"></audio>

controls默认是没有的,然后值又只有一个”controls”,不加他就不会显示面板。但是现在autoplay属性都已经禁止使用了,只有自己自定义的话才会不需要controls。

loop

存在此属性则开启循环。值只有”loop”。Demo:

<audio src="song.mp3" controls loop></audio>
muted

存在此属性则静音。值只有”muted”。Demo:

<audio src="song.mp3" controls muted></audio>
preload

设定音频的预加载方式。

=”auto”:自动加载,页面加载后载入整个音频

=”metadata”:自动加载,页面加载后只载入元数据

=”none”:不自动加载

PS 手机端的preload会被无视,具体默认值是什么没测试~盲猜所有内核都是none吧~

Demo:

<audio src="song.mp3" controls preload="none"></audio>

JS操作

拿到audio标签

就是获得DOM。Demo:

const audioDOM = document.getElementById("audio");
当前播放时间currentTime

currentTime属性可读可写。返回当前播放时长,单位是秒。可以通过修改它来实现倒退or前进x秒,倒退5秒Demo:

const audioDOM = document.getElementById("audio");
if (audioDOM.currentTime > 5) {
   audioDOM.currentTime -= 5;
} else {
   audioDOM.currentTime = 0;
}
音频总时长duration

duration属性是可读属性。返回音频总时长,单位是秒。要注意在load()方法之前,duration的值为NaN。用法伪代码:

const audioDOM = document.getElementById("audio");
if (isNaN(audioDOM.duration)) {
   // 未加载时的操作
} else {
   // 已加载时的操作
}
音量volume

volume属性可读可写。返回当前音量,最小是0(静音),最大音量是1。可以通过修改它来实现音量增加or减少的按钮。加10%音量Demo:

const audioDOM = document.getElementById("audio");
if (audioDOM.volume < 0.9) {
   audioDOM.volume += 0.1;
} else {
   audioDOM.volume = 1;
}

音量有时候会变成7.99999999这样的奇葩数字…很奇葩,但是用户来说没有任何影响。

播放速率playbackRate

playbackRate就是播放速率,可读可写,返回播放速度,值是速度的倍率,最大播放速度根据内核的不同而有所不同,但是正常来说2倍已经够用了。选择速度Demo:

// 拿到dom
const audioDOM = document.getElementById("audio");
// 不是数字
if(isNaN(rate)){
return;
}
rate = parseInt(rate);
const minRate = 0.5;
const maxRate = 2;
if (rate <= maxRate && rate >= minRate) {
   audioDOM.playbackRate = rate;
} else if (rate < minRate) {
   audioDOM.playbackRate = minRate;
} else {
   audioDOM.playbackRate = maxRate;
}
播放play()

使用播放方法让暂停了的音频播放。Demo:

// 拿到dom
const audioDOM = document.getElementById("audio");
audioDOM.play();

诶看到这个是不是很心动,autoplay属性被取缔了,那我直接在window.onload里面用play()开始播放不就好了吗?不。如果用户没有“跟页面互动”就会报错!

“Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.”

暂停pause()

使用暂停方法让正在播放的音频暂停。Demo:

// 拿到dom
const audioDOM = document.getElementById("audio");
audioDOM.pause();
是否暂停paused

paused属性是可读属性,返回boolean值:若音频是暂停状态,返回true;反之返回false。通过paused实现播放/暂停Demo:

// 拿到dom
const audioDOM = document.getElementById("audio");
if (audioDOM.paused === true) {
   audioDOM.play();
} else {
   audioDOM.pause();
}
暂停pause()

使用播放方法让暂停了的音频播放。Demo:

// 拿到dom
const audioDOM = document.getElementById("audio");
audioDOM.play();
加载load()

如果前面没设置preload或者设置了preload为none,可以用这个方法来触发加载。

加载的生命周期(按先后顺序排序)

其实是可以被监听的事件们,监听伪代码:

myAudio.addEventListener("loadstart", function() {
 // 当这个事件触发的时候干嘛呢~
});
loadstart开始加载

开始加载音频了。

durationchange时长改变

音频的时长改变了。

loadedmetadata元数据加载完毕

可以用作判断“音频初始化”的方法。当然初始化也可以用duration属性是否为NaN或者durationchange来判断,看需求了。

loadeddata数据开始加载

“The loadeddata event is fired when the first bit of media arrives.”在加载了第一位(bit)的文件时触发。我感觉这个名字取得不好,loadeddata更像是数据已经加载完了。然而加载完了的事件是canplaythrough`。

progress加载中

音频还在加载中。loader可以在这里部署。

canplay可以播放

音频可以播放了。可以在这个事件触发之后再把controls设置为可以操作的。

canplaythrough可以播放整个音频

音频加载完全完成了!

#####

播放事件

timeupdate时间更新

这个time指的是currentTime ,最频繁是“每250毫秒触发一次”。

waiting等待中

由于没有数据而导致暂停时触发。

playing播放中

从waiting状态转换到可以播放的状态时触发。

play播放

play()方法被调用时触发。

pause暂停

pause()方法被调用时触发。

ended结束

音频播放完毕后触发。

volumechange音量改变

音量改变时触发。

尾巴

  1. 什么??!你要找的这里没有?那来读读文档吧!我略过了一些~
  2. 比如有一个canplaytype我就没写,因为我自己只在用mp3格式,也就懒得一个个type去测试了~
  3. 我的自定义界面要留到以后水博客的时候再写~
  4. 我又又又又又又又通宵了。

bookmark_borderA simple understanding of common software architectures MVC, MVP, and MVVM

Recap

I have learned ASP.NET, DJango, and VueJS, and then I went to check some [articles about MVP]

Process

ASP.NET-MVC

MVC is Model, View and Controller

Our process of writing ASP.NET

  1. First, write the Model, and then generate a database based on the Model through the entity framework.
  2. Fill the Controller. Each Controller function corresponds to at least one View page. The Controller is similar to a Route.
  3. Improve the layout of the View.

The communication method is sauce purple: M-> V-> C-> M-> …

Model passes data toView for display

The user’s operation in View is transferred toController to run the corresponding code

Code run by Controller will change the result ofModel

DJANGO-MTV is actually MVC

MTV is Model,Template (View in MVC) and View (Controller in MVC)

The communication method is M-> T-> V-> M …

VueJS-MVVM

MVVM is Model`` View ViewModel

Model is still linked to the data,View is still linked to the view

ViewModel is the bridge between the two.

In MVVM, M and V do not communicate directly, but through the VM.

The communication method is this: View <=> ViewModel <=> Model

MVP

MVP (P is Presenter) is very close to MVVM, the only difference is according to the article mentioned above, which is Two-way binding (data-binding): View changes are automatically reflected in the ViewModel and vice versa. “. Then MVP is an MVVM without two-way binding, which means that when a View changes, it needs to communicate once and transmit it to aPresenter.

tail

  1. Harmful, the understanding is too shallow, you need to work harder!
  2. To get up early tomorrow to buy food, ready to start at 7:30, then it is almost time to sleep …
  3. I reviewed Vue a little bit today, and I will start to watch XCSF’s recommended UI series tomorrow ~

bookmark_borderleetcode Interview Question 56 – I. Number of occurrences of numbers in the array

The source of the question here面试题56 – I. 数组中数字出现的次数

translated the question here ~

In an integer array nums, except for two numbers, other numbers appear twice. Please write a program to find these two numbers that only appear once. The required time complexity is O (n), and the space complexity is O (1).

Example 1:

Input: nums = [4,1,4,6] Output: [1,6] or [6,1]

Example 2:

Input: nums = [1,2,10,4,1,4,3,3] Output: [2,10] or [10,2]

Summary in one sentence

Flexible use of bit arithmetic solutions

process

Without further ado, just look at the code ~

Super detailed comment~

// In addition to two digits in an integer array nums, all other digits appear twice. Please write a program to find these two numbers that only appear once.
        // The time complexity is O (n) and the space complexity is O (1).
        let input = [1, 2, 10, 4, 1, 3, 4, 3];
        // output: [2,10] or [10,2]
​
        function getSingle(input) {
            // The time complexity is O (n), you cannot nest loops
            // The space complexity is O (1), so you cannot create a new array or something
            // The following two are output
            let num1 = 0;
            let num2 = 0;
            // temp is the XOR value of the target number
            let temp = 0;
            input.forEach(item => {
                /It is known that a ^ a = 0, after traversing the array ^ this temp is the two target numbers ^ (exclusive OR)
                Taking the above input as an example, the specific operation process of this wave cycle is as follows:
                00000001 (1) ^ 00000010 (2)-> 00000011 (3)
                00000011 (3) ^ 00001010 (10)-> 00001001 (9)
                00001001 (9) ^ 00000100 (4)-> 00001101 (13)
                00001101 (13) ^ 00000001 (1)-> 00001100 (12)
                00001100 (12) ^ 00000100 (4)-> 00001000 (8)
                00001000 (8) ^ 00000011 (3)-> 00001011 (11)
                00001011 (11) ^ 00000011 (3)-> 00001000 (8)
                */
                temp ^= item;
            });
            /Because there are two separate numbers, the input needs to be divided into two groups next. So how do you group them?
            XOR: If one is 1 and the other is 0, the result is 1, otherwise it is 0
            The above temp is the XOR of these two numbers, that is to say:
            00000010 (2) ^ 00001010 (10) = 00001000 (8)
            The result of the XOR of the two numbers is 1 bit, the number must be different. So just use this as the credential for grouping
            */
​
            // Group credentials (find the first digit that is not the same)
            let mark = temp ^ (temp & (temp - 1));
            /Operation process:
            First of all, temp & (temp-1) in brackets
            00001000 (8)-00000001 (1)-> 00000111 (7)
            00001000 (8) & 00000111 (7)-> 00000000 (0)
            Then XOR with the outside temp
            00001000 (8) ^ 00000000 (0)-> 00001000 (8)
            This example seems weird, because 8 has only one digit as 1.
            Try another example, if temp is 7 (00000111) XORed from 10 (00001010) and 13 (00001101)
            00000111 (7)-00000001 (1)-> 00000110 (6)
            00000111 (7) & 00000110 (6)-> 00000001 (1)
            Then XOR with the outside temp
            00000111 (7) ^ 00000001 (1)-> 00000001 (1)
            See, the first number is different ~
            */
​
            /Now that there is mark, it can be distinguished.
            We know that mark is the two target numbers [the first number is different]
            Next, iterate again, use mark to divide the target number into different groups, and perform XOR between the groups.
            Group A includes all numbers that appear twice and the fourth digit is 1 + only appear once and the fourth digit is 1.
            Let them XOR, and you can find the single number.
            Group B is the same.
            */
            input.forEach((item) => {
                if ((mark & item) === 0) {
                    // Perform an AND operation with 00001000, the one that is 0 must be xxxx0xxx, that is, the fourth digit is 0
                    num1 ^= item;
                } else {
                    // Then it must be xxx1xxx here
                    num2 ^= item;
                }
            });
            return [num1,num2];
        }
        console.log(getSingle(input));
​

Tail

  1. The time complexity of the above code should be 3 + n + 1 + n + 1 = 2n + 5, that is, the new variables of O (n)
  2. The space complexity are only a single layer < -(Not sure what to call), so it’s O (1)
  3. I have to start looking for a job … hey …
  4. recommend a blog post you overlooked js implicit conversion, it is written in Chinese so please translate yourself.

bookmark_borderWanna build a blog, your own den? Come take a look at these open-source static website generators!

I believe many people want to build a blog or document website for the project. This article will recommend the static site generator (Static Site Generator, SSG), what it does is generate your documents and content (usually Markdown files) which can be published as a website (HTML) tool, so you can concentrate on creating at the same time. There are also websites that publish their own ideas like GitHub, Gitee, etc. all support free Page service. By simply configuring SSG, a command can be issued. Having a small nest of its own is so simple and convenient.

The following is the popular and excellent open-source static website generator carefully selected by HelloGitHub on GitHub. Welcome friends to comment and discuss.

Hexo

GitHub repository: https://github.com/hexojs/hexo

Number of Stars: 29.6k

Official website: https://hexo.io

Hexo is developed with Node.js, which is very popular. It has hundreds of themes and plugins, supports GFM (GitHub Flavored Markdown), and requires only one command to deploy the Hexo website to GitHub Pages, Heroku and other platforms. It is currently driven by the official documentation of Vue.js. However, compared to other frameworks, Hexo is not very fast.

By the way, there is a Hexo tutorial called EasyHexo.

Hugo

GitHub repository: https://github.com/gohugoio/hugo

Number of Stars: 41.9k

Official website: https://gohugo.io/

Hugo is developed with Go and is known as “the fastest web page generator in the world”. The number of Stars is much higher than the Hexo. There are currently more than 300 themes.

VuePress

GitHub repository: https://github.com/vuejs/vuepress

Number of Stars: 15.6k

Official website: https://vuepress.vuejs.org/zh/

VuePress is regarded as a “rising star” among all the builders, and was originally developed by You Yuxi. After it has developed to a certain extent, it will replace Hexo as the generator of Vue.js official documents. It is based on Vue, you can use Vue components in Markdown, and you can use Vue to develop custom themes.

MkDocs

GitHub repository: https://github.com/mkdocs/mkdocs

Number of Stars: 9.1k

Official website: http://www.mkdocs.org/

MkDocs is developed in Python and is more biased towards document generation. There are not many users, only a dozen themes.

Gatsby

GitHub repository: https://github.com/gatsbyjs/gatsby

Number of Stars: 42.5k

Official website: https://www.gatsbyjs.org/

Gatsby is the project with the largest number of Stars on the GitHub # static-site-generator topic, based on React. It goes beyond static websites and is more powerful. Data can be loaded from anywhere.Docsify
GitHub repository: https://github.com/docsifyjs/

docsify

Number of Stars: 12.6k

Official website: https://docsify.js.org/

Docsify is also based on Vue, which is biased towards documents and dynamically generates web pages. The biggest feature is that it only has an index.html, which starts to be generated when you open the web page. Docsify is also compatible with IE 11. The disadvantage is that it is not very friendly to SEO.

Jekyll

GitHub repository: https://github.com/jekyll/jekyll

Number of Stars: 39.8k

Official website: https://jekyllrb.com/

Jekyll is developed using Ruby, it is simple enough to allow you to focus on the content. It has nearly four hundred themes and more than two hundred plug-ins, these two alone are enough to prove its excellence.

Something to say at last

I want to remind you that the most important thing for blogging is content, so after you choose a generator and pick a favorite theme, don’t over-promise and beautify, content is the most important.

bookmark_borderFinally understand the difference between TCP and UDP protocol

Meet these two guys first

Both TCP and UDP are protocols from the transport layer.

The transport layer is located on the second layer, as shown in the figure below.

The transport layer is located between the application layer and the network layer and is responsible for communication between processes located in different hosts.

One of my co-workers asked me: How do different computers communicate? Do you still need to develop the agreement yourself?

Analysis: This man feels that if he wants to develop an application, he needs to define his own protocol. In fact, it is not unreasonable. What is the agreement? An agreement is a rule that both parties communicate to abide by and is called an agreement. Like how to use HTTP, FTP, these are all application services, why is it called application services? Because it is an application dedicated to serving other people. Such as QQ, WeChat, Taobao, browser, etc. are usually called application clients, of course, we ca n’t see or touch these servers unless you are a developer involved. QQ uses the OICQ protocol, and HTTP services use the HTTP protocol. These protocols are definitely custom. If you use an HTTP server, you must obey this rule, otherwise, people will not recognize you. It is actually based on TCP or UDP.

The transport layer of the Internet provides two different services, and application developers must choose one of them.

TCP

It is a connection-oriented and reliable transport layer protocol.

UDP

It is a connectionless and unreliable transport layer protocol.

Where is reliable and unreliable?

Compared with IP, UDP only adds the process-to-process distribution service and error checking mechanism, because it also provides unreliable services.
And TCP provides services including reliable data transmission, flow control and congestion control for applications.

With reliable TCP, why we still need UDP?

Applications can control more granularly when and what data is sent
Send data without establishing a connection in advance
No connection status, simple implementation
Small head overhead

Extension:

  1. The application can better control when and what kind of data is sent: without establishing a connection, UDP can send the message to the network layer as soon as possible; TCP may need to retransmit the segment that has not received the confirmation within the specified time. UDP does not have the delay introduced by establishing a connection, which is probably the most important reason why DNS chooses UDP instead of TCP.
  2. Simple implementation: Because UDP is connectionless, the Host does not need to maintain the connection status, and the implementation is simple;
  3. The header overhead is small: the UDP Segment header field has a total of 8 bytes, and the TCP header includes a total of 20 bytes.
    UDP is used by most multimedia applications. but…

The advantages of TCP:

Reliable and stable.
The reliability of TCP is reflected in that TCP will have three handshakes to establish a connection before transmitting data, and there are acknowledgment, window, retransmission, and congestion control mechanisms during data transmission. After the data is transmitted, the connection will be disconnected to save system resources.

Disadvantages of TCP:

Slow, low efficiency, high resource consumption, and easy to be attacked; TCP must establish a connection before transmitting data, which will consume time, and in data transmission, confirmation mechanism, retransmission mechanism, congestion control mechanism, etc. will consume a lot of practice, And to maintain all transmission connections on each device. In fact, each connection will occupy the system’s CPU, memory and other hardware resources.
Because TCP has a confirmation mechanism and a three-way handshake mechanism, these advantages have become flaws, resulting in TCP being easily used by people to implement DOS, DDOS, CC, and guessing attacks.

Advantages of UDP:

Fast and slightly safer than TCP.
UDP does not have TCP handshake, confirmation, window, retransmission, congestion control. UDP is a stateless transmission protocol, so it is very fast when transferring data.
Without these TCP mechanisms (eg, three-way handshake), the vulnerability of attackers using UDP will be less. But UDP cannot avoid attacks, such as UDP Flood and so on.

Disadvantages of UDP:

Unreliable and unstable.
Because UDP does not have the reliable mechanisms of TCP, when data is transmitted, if the network quality is not good, it will be easy to lose packets.

When should the TCP transport protocol be used:

When there is a requirement for network communication, for example, the entire data should be passed to the other party accurately, which is often used for some reliable applications, such as HTTP, HTTPS, FTP, and other file transfer protocols, POP, SMTP, and other mail transfer protocols.

When should I use UDP:

When the quality of network communication is not high, the network communication speed is required to be as fast as possible, then UDP can be used. For example QQ language, QQ video, etc.

Interviews often ask: What is the difference between TCP and UDP?

  1. TCP connection-oriented, UDP connectionless;
  2. TCP occupies more system resources and less UDP;
  3. The TCP structure is complex, and the UDP twisting is simple;
  4. TCP is based on streaming mode and UDP datagram mode;
  5. TCP guarantees the correctness of data, UDP may lose packets;
  6. TCP guarantees data order, UDP does not guarantee.

bookmark_borderHow to build up a wordpress blog with Google Cloud.

Professional Steps Here

Firstly, go to https://console.cloud.google.com/ and follow the instructions to create your own project if you don’t have one.😇

On the dashboard page, you can see a Compute Engine in the left navigation bar. Click it and select VM Instance.😄

Create a new instance to host your blog. Instance region, zone and machine configuration should be based on your own need. FYI my setting is n1-standard-1 with 1 vCPU and 3.75GB Memory, and both region and zone set as us-central1. When you slide down you will see a FireWall section, allow both HTTP and HTTPS traffic here. You don’t need to change anything else unless you know what you are doing.😄

Now the page goes back to VM Instance. Find the new instance you created and click the SSH button under the Connection section.😁

Once you are connected, follow the instruction here: https://ubuntu.com/tutorials/install-and-configure-wordpress#1-overview. It teaches you how to install and configure your WordPress in a Linux system step by step.🤣

Simple Steps Here

First, go to https://console.cloud.google.com/ and follow the instructions to create your own project if you don’t have one.🙂

Now search “cloud deployment manager API” in the search bar and click enable. After this, go to the marketplace which is in the left navigation bar. Find WordPress in it and click.🤔

Make sure you select install phpMyAdmin. Also, you need to allow both HTTP and HTTPS traffic. Click deploy.😏

After a while, you will be able to see the logged-in info on the right side of the page. Enjoy your WordPress now!🧐