Articles under classification technology

Today, we found a strange bug with WSL. Should we not call sh directly under WSL?

Use Create React App Create react application, Yarn start Once, output Starting the development server... And then throw out one. Error: spawn Cmd.exe ENOENT I wonder how the WSL is invoked under windows. Cmd.exe What a strange mother!

go Create-react-app Flip down Source code It has implemented an open browser operation. Open Class library judgment Windows It's not just checking. Process.platform Value, incidentally. WSL and Docker The environment is also used as a condition for judgement. The following command is the last source of all evil.

 root of all evils

Fix the two way of bug.

  1. take /mnt/c/Windows/System32 Add the environment variables to WSL so that you can pull up the default browser.
  2. React-scripts/scripts/ Start.js Note out OpenBrowser ( Url.localUrlForBrowser );

This is really India bug. A kind of One hundred percent of the errors can not be deleted.

 Rm: can't remove XXX: No such file or directory

It has gone through the docker documents and issue, which seems to be related to the ftype of XFS partition, and can not be solved according to other people's plan. A kind of

In the end, two versions will be completed. Of course, reinstall the system.

Today, just an old friend chatted up the jQuery source code. He didn't understand the source code. I had a learning and communication attitude and explained the core realization to him. (as if he had been pigeon for a long time).

By the way, which CDN service provider is looking for a jQuery file to open? The 1.2.3 version I use here is for example. The latest version is almost the same, with only two or three changes. Https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.js

Source code analysis

17-20 elements Pass the selector and return the init method of your own new. It is estimated that you haven't used it either. $() The second parameter is omitted here.

 Var jQuery = Window.jQuery = function (selector) {
return NEW JQuery.prototype.init (selector);}

26-27 elements This is why it is always a global variable to mount to a window object because of the beginning of $.

 / / Map the jQuery namespace to the '$' one
window.$= jQuery;

36-547 elements Eliminate the core of retention that we do not need. Init Method, the jQuery instance and the selector are judged internally. Here we ignore and simplify.

 JQuery.fn = JQuery.prototype = {
init: function (selector) {
var nodes = Document.querySelectorAll (selector); 
for (VaR I in nodes) {
this[i] = nodes[i]; 
}
return this;}} / / here omitted one hundred thousand words}

549 elements In the last paragraph, the jQuery prototype chain is passed to the prototype of the init method under the jQuery prototype. Looking back at the new code, it is clear and clear.

 JQuery.prototype.init .prototype = JQuery.prototype ;

Complete implementation

Adding functionality to the jQuery prototype is very close to the first version of jQuery. Here I am a simple implementation. Text () Method

 Var jQuery= function (selector) {
return NEW JQuery.fn.init (selector); JQuery.fn = JQuery.prototype = {
init: function (selector) {
var nodes = Document.querySelectorAll (selector); 
for (VaR I in nodes) {
this[i] = nodes[i]; 
}
return this; Element: function (callback) {
for (VaR I = 0; I <) This.length ; i++) {
callback (this[i]); 
text:}}, 
text: function (content) {
if (content = = ''} content) { This.element (function (node) { Node.innerHTML = content;}) Return content;} else {
return this[0].innerHTML; JQuery.prototype.init .prototype = JQuery.prototype ; 

window.$= jQuery;

End

Actually, the core is not complicated. I like it very much. I think most of my functions are implemented by plug-ins. The ingenious design and convenience of the tools themselves.

On the traditional page production, jQuery used a very comfortable shuttle, but the appearance of MVVM changed the way of thinking. We only need to pay attention to business logic, do not need to manually operate DOM, do not need to pay attention to the synchronization of data status, and ease the project management.

If there are simple needs on a single page, jQuery is still useful, MVVM can only be added trouble.

Sort out some of the latest gadgets.

You can see that there are two buttons (get verification code, login) two boxes (enter the phone number, enter the verification code).

So we have the following thing (no concrete function, just look at the structure).

 <template>
<div class= "login-wrapper" >
<div class= "title-bar" > login </div>
<div class= "wrapper phone-wrapper" >
<span >
<span "X" > mobile phone number "" "" "" "" "" "mobile phone number" Class= "title" > verification code </span>
<input class= "input code" type= "number" placeholder= "verification code" >
<div class= ">
<div" > get the verification code.

At this time, you can start writing logic. It is also a simple analysis. Login needs to click, get the verification code need to click and countdown seconds, that is, dynamically modify the text, experience a good check can limit the number of mobile phone number, the number of verification code.

That's almost like this.

 <template>
<div class= "login-wrapper" >
<div class= "title-bar" > login </div>
<div class= "wrapper phone-wrapper" >
<span >
<span "X" > mobile phone number "" "" "" "" "" mobile phone "": "" "" "" "" "" "" V-on:input= "changePhone" >
</div>
<div class= "wrapper code-wrapper" >
<span class= "title" > verification code </span>
<input class= "title" "," "" "" verification code ":" "" "" "" "" "" "" "" "") @click= "loginCode" class= "send" >{{codeText}}</div>
</div>
<div class= "wrapper btn-wrapper" >
<div class= "input input" "," > "login" ",", "("), "," / / input box phone number. Code: '/ / / input box verification code 
codeText:' get verification code ', / / countdown display text 
timingBoard: 60, / countdown 
timer: null, / / a timer, used for countdown verification code}, 
methods: {
loginCode () {}, / / get the verification code 
login () {}, / / login 
changePhone () {}, / / check the cell phone number 
changeCode () {}, / / check the length of the verification code 
}
</script>

With these, it is enough for you to implement a basic mobile phone login interface. If you need full code, please click below. Gist links

Complete code is read: Https://gist.github.com/flxxyz/64ceb06a0754d67a771b3e3e7dc94d48

To tell you the truth, I haven't seen API for such a long time. Vue rediscovered my blog these days. Vue.directive It looks great.

Always see here. Vue.use (ElementUi) Where to use Vue.use (Axios) It has always been at the level of application, and I find that the consumption of markdown parsing examples is a little too large. It may be a lot easier to process directives directly.

Describe the process briefly.

The components that render the article will query whether there is a corresponding article in the local record during the lifecycle of the installation. If there is no request, the request will be searched online, otherwise 404.
The article is for the content of markdown, considering that front-end processing can be directly resolved (after all, the front-end performance is over 233), so as to reduce the burden of logical processing on the back end and consistency.
The markdown parser is used. Marked The completion logic is as follows

 / / Main.js

 Import Vue from'vue'
import App from'./App'
import markdown from'./markdown'; Vue.use ( Markdown.install ) Vue.prototype .$marked = Markdown.marked

 New Vue ({
store, 
router, 
render: H = > H (App)}.$mount ('#app')

Integrated marked makes plug-in form exposure

 / / Markdown.js

 Import marked from'marked'
import (' Highlight.js/styles/atom -one- Dark.css ()) Marked.setOptions ({
renderer: NEW Marked.Renderer (), 
pedantic: false, 
gfm: true, 
tables: true, 
breaks: false, 
sanitize: false, 
smartLists: true, 
highlight (code) {
return require (' Highlight.js '.HighlightAuto (code).Value;},}) 

let install = (Vue) = > {
if ( Install.installed ) return; Vue.directive ('markdown', {
bind: (EL, binding, vnode) = { El.innerHTML = marked ( Binding.value }, 
update: (EL, binding, Vnode) = { El.innerHTML = marked ( Binding.value 
}

export default {
marked, 
install,}

Use on labels V-markdown instructions

 / / Test.vue

 <template>
<div>
<div v-if= "isNotFound" >404</div>
<div v-else v-markdown= "article" ></div>
</div>
</template>

<script>
const, which is an interface for finding articles = function () {
return new new ((*, V) = > > (}})} Return {
article: ', 
isNotFound: true, {}}, 
methods: {
handlerArticle (ID) {} / find local article 
let a = This.findArticle (ID, async (ID) = > {
return await. This is an interface for finding articles (ID); If (a = = null) {
return 404; 
}

return a; {}, 
findArticle (ID, callback) {/ / let res = = "{}};" = = ";" (= = = =) "; 
}

return res; {}}, 
mounted () {/ / ID to find articles 
let a = This.handlerArticle (123); 

if (a = = = 404) {/ / jump to error page}} / / processing loading
 This.isNotFound = false; A kind of This.article = a; / / save markdown content directly to variable 
}
}
</script>

Complete code is read: Https://gist.github.com/flxxyz/93e009d32ecd7e0c6785a52571577cd7

Rubbed the student discount, bought a Ali cloud server, 5M bandwidth to foreign lines to reduce the probability of packet loss is not bad, NS online beauty, but it is said that the port service online service is out, I do not know how online quality will be.

Firewall relay chestnut

 IP open 
firewall-cmd disguise --add-masquerade --permanent

# add port protocol 
firewall-cmd --add-forward-port=port= port after transfer: proto= Tcp:toport= Sour milk port: toaddr= sour milk address --permanent
firewall-cmd --add-forward-port=port= port after transfer: proto= Udp:toport= Sour milk port: toaddr= sour milk address --permanent

# Overloading 
firewall-cmd --reload

Recently, in the golang, which used all the online data in redis, the configuration that used to be written dead is not very suitable, and thermal loading is the kingly way.

As the saying goes, programmers who can't search are not good programmers.

I saw the other chiefs writing, mostly using. Timer +goroutine Achieved. It's not very difficult, starting code.

Configuration file structure

Let's assume that our configuration files are JSON files, which should be the following.

 / / Conf.json
 {"host": "127.0.0.1", "port"): 6379, "passwd": "," "DB": 0
}

First of all, it must be to write a structure that is exactly the same as it.

 //json configuration file structure 
type Content struct {
Host string `json: "host" `
Port int `json: "`
Port", "" "," "" "

If it is not very safe to write operation functions on this structure, serialization of JSON is also a pointer to direct operation. The trial and error of breaking them up before, and finally let them stay together 233

Optimized structure

Integrate file name, synchronization lock, last modification time, and configuration file structure together.

 / / configuration structure 
type Config struct {
Filename string
LastModifyTime int64
Lock * Sync.RWMutex
 Data interface{}
}

Write the factory function of instance configuration (this is a conventional rule, the specific source is your own textual research, it has many advantages).

 Func NewConfig (filename string, data interface{}) *Config {
conf: = &Config{
Filename: filename, 
Data:, &Config{
Filename:, Sync.RWMutex {} Conf.parse () 

go Conf.reload () 

return conf
}

The default parameters are configured in the configuration structure, and the external parameter is File name of configuration file and Configuration file structure The type of data is interface type. The advantage is that Config Can be independent, code Multiple reuse We also used it. Conf.parse () Method, the first analytical file, Go Conf.reload () Method to run a goroutine run alone (see the specific effect), and of course return to the ontology.

- reading the remainder part -

Why?

Why should we develop integral mall?

Because we used to use the bar service, not bad.

But this year's (2018) closure of the free version of the service in the second half of the year requires paying for professional or ultimate use.

Of course, the staff have also contacted us, can give preferential prices, commercial mutual blow must say, "OK, we will discuss and consider".

If we use it, you won't see this article 23333.

- reading the remainder part -