This post (You go your way, I’ll go mine: Front-end Separation) is one of the articles I wrote for the iT Ironman Contest. After receiving some feedback, I decided to revise and clarify the article.
If you have the following questions, this article is perfect for you:
When learning to write web pages, you usually start with HTML and CSS, which are responsible for creating and beautifying the layout. Once you have a solid foundation, you start learning JavaScript to create interactive effects. In addition to user and browser interactions, don’t forget about the interaction between the client and server, which means you must learn how to use JavaScript to retrieve data from the backend server. Otherwise, your web page data will be static.
The main target audience of this article is beginners in web front-end development. I hope that after reading this article, readers who do not understand how to exchange data with the server or how to connect to APIs can have a better understanding of how to connect to the backend.
To be honest, the prototype chain in JavaScript has always been a topic that I am afraid of. The reason is simple, it is really difficult to understand. Just a bunch of terms and complex relationships can drive you crazy, such as prototype, __proto__, constructor, Object.prototype, Function.prototype, new, etc.
However, this is indeed a very important part of JavaScript and a must-have question for interviews. Even if you don’t understand it now, you will eventually have to understand it someday, otherwise you will never be able to improve your technical skills.
There are many articles about the prototype chain that you can find on the internet, and each one has a different way of understanding it. Some of them directly use a lot of technical terms, which can scare you to death. It wasn’t until recently that I read a few articles that I thought had a better perspective, that I truly understood the prototype chain.
So, let’s take this opportunity to learn more about the prototype chain in JavaScript! This article is suitable for those who have a basic understanding of JavaScript but are not very clear about it. If there are any mistakes in the article, please feel free to point them out in the comments. Thank you.
Recently, I just finished CS50 Week3, and the topic of this week is: Algorithms. It introduces several classic sorting algorithms, such as selection sort, bubble sort, insertion sort, and merge sort.
As a software engineer, I think we can never escape from sorting algorithms. After all, this is one of the classic algorithms! Instead of preparing for interviews in a mess every time, it’s better to organize a post now to record the experience of each sorting algorithm and help ourselves to integrate.
Therefore, this post will use JavaScript to implement various classic sorting algorithms.
The sorting algorithms implemented this time will be sorted from small to large, and for convenience, each sorting algorithm “will directly modify the original array”. But if you don’t want to modify the original, it’s easy. Just add arr = arr.slice() at the beginning of each function to copy the original.
Also, because it is difficult to put animations in the article, I can only put some pictures. If you want to learn with visualized algorithms, I highly recommend VISUALGO. This website will definitely take your understanding of sorting to the next level.
(Supplement: Thanks to the guidance of senior othree, it is pointed out that this is actually talking about the order of event propagation in the DOM, so the title and content are revised. The original title is: JavaScript Event Propagation: Capturing and Bubbling)
Today, we bring you the event propagation mechanism in the DOM, and the code related to these events, I believe everyone should be familiar with, that is addEventListener, preventDefault and stopPropagation.
Simply put, it is the order in which events are propagated in the DOM, and what you can do with these events.
Why is there the term “propagation order”? Suppose you have a ul element with many li elements underneath, representing different items. When you click on any li, you actually click on ul because ul wraps all li.
If I add eventListener to two elements, which one will be executed first? At this time, it is important to know the execution order of events.
In addition, because the mechanism of some browsers (yes, I am talking about IE) is different, I will not mention those things at all. Those who are interested can study the reference materials attached at the end of the article.
Recently, I was researching some things related to HTTP Cache, and I found myself confused by the different headers such as Pragma, Cache-Control, Etag, Last-Modified, Expires, etc. After reading many reference materials, I gained a deeper understanding. I thought that if I could understand Cache from a different perspective, it might be easier to understand what these headers are doing.
In the previous research materials, many articles explained the functions and parameters of each header one by one. However, I think that too many parameters can easily confuse beginners. Therefore, this article attempts to guide the usage scenarios and purposes of each header step by step through different questions. Also, because this article is for beginners, not all parameters will be discussed.
In fact, there are different opinions on Cache on the Internet. If there are any doubts, I will try to follow the standards written in the RFC. If there are any errors, please correct me. Thank you.
Recently, I encountered some cases of CSRF and took the opportunity to study it thoroughly. After in-depth research, I found that this attack is actually quite scary because it is easy to overlook. Fortunately, some frameworks now have built-in CSRF defense functions that can be easily enabled.
However, I still think it is necessary to understand what CSRF is, how it attacks, and how to defend against it. Let’s start by briefly introducing it!
CSRF is a type of attack on the web, which stands for Cross Site Request Forgery. Don’t confuse it with XSS, they are two different things. So what is CSRF? Let’s start with an example of my own.
Previously, I wrote an article to briefly summarize my experience in learning Redux. I still recommend the official documentation because it is super clear.
However, when I was reading the official documentation before, I didn’t fully understand the middleware part and got confused towards the end. This time, I re-read the official documentation on middleware and asynchronous operations, took notes while reading, and finally understood the implementation principle of middleware. As usual, I will share my experience.
Official documentation (Chinese version, but this article has not been translated yet)
The great thing about the official documentation is that it not only teaches you how to use it, but also starts from scratch, so you know why middleware is in its current form.
In JavaScript, there is a super important concept called asynchronous, which is also the easiest concept to confuse and forget when you first start learning. ES6 natively supports Promise, which works better with Generator, and ES7 even supports the syntax of async. I think this is an evolutionary process that makes the program architecture better and more readable. So to explain these new things, let’s start with the most basic callback.