If someone asks me to study the React offical tutorial when I have no experience with this library, then I think I will close the tab immediately…

The good way to learn a new technique is **Just Do It** So, let’s start with a small example, a form validation (not todolist)

The first pic is what we want to do today. When user click the submit and all blanks are empty, the bottom will show a warning message “Please fill all blank”; and if you fill one of the blanks and the value does not meet the required format, the…

An algorithm is a set of instructions for accomplishing a task. In the reality, for example, there are many ways to go to a supermarket. You can go to the MRT station and take the MRT, then walk around 10 minutes or you can take a bus and transfer to another bus then walk for 2 minutes to the supermarket. But the question is which one we should choose?

The algorithm is to make your process faster, like the above example. Go to the MRT station and take the MRT, then walk to the supermarket. It takes three operations. However…

@unsplash.com from Stephen Dawson

When it comes to the communication between the client side and the server side, we usually ask about how we get the data from the server side. If you have used API to get data for your web app, you must have heard about XMLHttpRequest(), fetch(), or jQuery AJAX. How much do you know about them? Is there any difference between them? I will share some key points to learn about API and Ajax.

What happens behind the scene?

When we press reload button (F5), the browser sends a “GET request” to the URL, then the URL gives a response…

If you have some basic knowledge of DOM, you can start to build your web side projects and I think to-do list is a good one for building solid concept of DOM.

Let’s try to understand the behind logic of a to-do list and I will explain each logic.

1. When click add or press enter, the value in the input field will show in the to-do item section

2. When click the edit button, you can edit the item your to-do items

3. When click the delete button, the to-do item can be deleted

4. When click the checkbox…

An event is a signal that something has happened. Take google’s index for example, if a user clicks “Google Search”, then the page turns to the search results. But! How does browser know the user click the button?

We can add an event listener on the place we click, so when an event happens (“Ex: click”), it triggers the event handler function which also called callback function. The most common browser’s event like mouse (click, over, move), keyboard (keypress, keydown), and form event (submit and focus).

element.addEventListener(“event”, “event handler function”)

We can also assign an Object as a handler, like…

According to MDN, DOM connects web pages to scripts by representing the structure of a document, such as the HTML representing a web page — in memory. In other words, DOM is an application programming interface which allows users interact with web pages. Also, it allows you change the page’s content without changing HTML.

How do you interact with the Page?

Let’s begin from how to choose the node or element you want.

To interact with web pages, we have to get the node of each element. …

The previous article (The world of the Internet)is about the basic knowledge of the Internet. Now, we can use an environment, Node.js, to make a simple web server, so you will understand more clearly about the HTTP request. Before making the web server, I highly recommend to having some basic knowledge of NPM and some node module.

Node.js is a platform that allows developers use JavaScript on a server. So, when we want to build a web application ourselves, we can just run JavaScript. And we can read, delete, and update files to the server.

Let’s make a simple web…

The Internet is all about communication, including how we communicate with each other, what method we use? There are many ways to do communication, however, it is chaos if everyone uses different ways. So, we need protocol to unify the format and set a standard to manage the method of communication.

In the previous article, we have gone through some basic but powerful Git command line. In section 2, I would like to share the concept of branch and you will see Git’s real power in collaboration.

Branch is not tree branch (git branch -v/git branch “branch name”)

Why do we need the concept of branch? The above photo illustrates the difference between linear and branch development. The feature C is new feature which you have not done yet and it can not be launched. But there is problem (A fixed) you need to solve. …

Git is a powerful tool to do version control. There are two key features of Git, one is a great system for history tracking, and the other one is for collaboration. I believe you might see some example on the Internet. In the past, we did the version control via different file name. It might be ok for one-man team, but not for multiplayer team. It causes tons of untraceable history and inefficient teamwork. Like sometimes you revise app2, but the next your colleague revise app2 again.

In fact, you do not worry about the above situation would happen on…

Francabel

從業務轉換跑道,目前正朝著前端工程師邁進,寫code是生活,是工作,也是態度。轉職是一段旅行,享受旅行的過程,並指引到夢想處

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store