Learn Bootcamp From Zero

In the last post, I shared my study note about one of the most important reason that Node is very popular is because Node has the largest package ecosystem of open source libraries in the world. Node's NPM, the package manager for Javascript, contains almost 200,000 packages which are centralized on the NPM website. And more importantly, NPM has a command line tool which help us to install packages really easily. The course instructor told us that we are going to learn Express.js to develop Apps in this course. screenshot for the Express.js.com homepage What is Express.js? Express.js is a web development framework. According to the course, framework is a bunch of code that someone else wrote just like a library is except when we use a framework, we have less control. The goal of using this framework is to make our development of APPs faster. Why do we use Express.js? 1. It is the most popular Node web development framework so far. 2. It is a very lightweight ...

What Is Node.js? According to Node.js , Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. from Google Image Basically, Node.js is a way for us to write JavaScript code on the server side instead of browser or a separate JS file. Why Should We Know Node.js? The trendiest IT techonology for people to be learning right now  The largest ecosystem of open source libraries in the world.(From Node.js) High performance Write in JavaScript Interact With Node Console The Node console is just a place that we can open in our terminal with a simple command, and then we can start typing JavaScript commands. Then, they will be executed just like they are in the browser. In the Goormide terminal, I type "node", it will automatically switch to node system. Then, I type a simple console.log and enter, it print out the console.log message. Howev...

According to the article " Getting to Know Command Line ", the command line is the ultimate seat of power on your computer. It is simply a place where you type commands to the computer. Once we know the important commands, we can create files and run files and delete files so much faster than if we are using the mouse. How can we use the command line to interact with those directories and files? Firstly, we need to have a workspace. The course recommends us to use Goormide , which is an integrated development environment on the cloud. And it is developed by a Korean company. You can feel free to sign up and create your first cloud by following their introduction. Once you sign in the cloud, you can create your directory and files. The course introduces six useful Command to interact with directories and files. List/Change Directories Command LS LS stands for list, and it just shows us all the files and folders of the current folder. For example, in the te...

Today,  I begin to learn the second part of web develop course: backend. Frontend is the stuff that we can see and interactive with, such as HTML, CSS, and JS. We can type our code, style our page, or write some function to make interaction. However, backend is everything else. For example, we type Target web address in the Internet Browser. As we hit "enter", there are a few steps to go through: 1. The HTTP request is sent to a particular server's IP address. 2. The server figures out what to send us 3. It sends a HTTP response back to us Those process we are hard to see, and it happens in less than one second. The instructor said that the browser is not the only place to send the HTTP request, and there are so many choices out there. In this learning course, we are going to use Postman App . Postman allows us to make HTTP requests and viewer responses. It is really for developers to understand how things are working or debug something. In the P...

From Google Image So far I have learned half way through the Web Develop Bootcamp course. I really want to share my deep feeling here: I have learned basic HTML, CSS,  Bootstrap, JavaScript and jQuery which belong to front end category. When I was learning HTML, CSS and Bootstrap parts, everything seemed good to go. I could understand how to write a simple web page, and create responsive nav-bar, and style my page into a good looking. All the small or big projects, I could finish 85% or 100% by myself depending on the project hard levels. So, I really felt some achievement at that time. However, as I started to learn JavaScript and jQuery, everything became no fun. The concepts of those functions were not hard to understand, but they were hard to implement in the real project. Even small exercises drove me crazy. I was struggle to write those function and logical stuff. Every time I saw a question, my mind was just blank. I didn't know how to start, which function s...

jQuery can do some animation to make some good effects to interactive with pages. There are two broad categories of effects: fading and sliding . fadeOut() and fadeIn() It basically fades an element out or in, and you can provide a duration if you want it to be slow or fast. I start to create a simple HTML page which include three divs and one button. I also add some style for these divs to make effect later. The page has three boxes and one click button. The point is that when we click the button, those three boxes will make some effect. If we want those boxes fade out as I click the button, we can select the "button", then set "click" event type inside on(), and pass the function. In the function, we select the "div", and use set a duration in the fadeOut(). The duration is given in milliseconds. 1000 milliseconds equal to 1 second. As I click the button, all of the boxes are hided in one second. The fadeOut() method ...

On() On() works similarly to addEventListener. It lets you specify the type of event to listen for. If we want to style the h1 text content when h1 is clicked, we could write: $("h1").on("click", function(){ $("h1").css("color", "green");}) Inside on(), we give the type of event we want to listen for, in this case is "click". Then, we pass a function to change the h1 style when the event happens. If we want to bold the button text when the mouse is on that button, we will select "button", then set "mouseenter" as event type, and pass a function which will make the text bold. If we want the bold button back to normal, we only need to change the "mouseenter" to "mouseleave", and change "bold" to "normal". What's the difference between on() and click()? In most case, click() and on("click") will both get the job d...