Web Development Basics 2022

Installation : 

Task: check package library/framework version number. 

node -v

npm -v

yarn-v

npm and yarn do similar things

• ES6 JavaScript - ECMA pronounced ehk-ma decides the standard for javascript. And that's why the newest version of JavaScript is called ES6, ecmascript 6. symbol is new in ES6.
• JavaScript - Dynamic Typing - Don't have to declare types right away.
• JavaScript - Primitive Types (no methods, immutable): undefined, null, boolean, number, string, symbol. 
• Toast message : a temporary message, for example display error.
• array can store data with different types.
•  HTTP status code 
• introduction: https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
• https://www.twilio.com/blog/http-status-codes-relationship-problems
• https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
• Different versions of it https://docs.microsoft.com/en-us/troubleshoot/iis/http-status-code
• MDN https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
• Typecasting: changing a variable from one time to another. 
• Coercion: explicit versus implicit. We need to watch out for this in JavaScript. Often it doesn't work as we would expect. 
• Comparison and testing. Double equal versus triple equal. Double equal will coerce the types then test. Triple equal will require the type to match as well. This too can be counter intuitive, unexpected in JavaScript. There are also quirky JavaScript equality issues. JavaScript quirky equality issues https://github.com/dorey/JavaScript-Equality-Table
• HTML DOM : Web dev Document Object Model (DOM) turns html documents into a tree like structure of nodes. nodes include img, body and the element node can contain attribute nodes such as src, text. A common task is traversing DOM elements.

Use ready to use, low-code environment:

Did you know you can upload custom font to Wix? Wix let's you start websites using a bit of HTML and CSS. 

Debugging : 

Node.js out of memory error. If encountered try upgrading node js to the latest version see if the problem is resolved. 

JavaScript events

JavaScript addEventListener, js events

https://ml.learn-to-code.co/skillView.html?skill=5uzzAiNC9FftC8DMH0By

Web Server request and response

Can return, de-couple tuple request object result into header, url and method

package.json the file that describes the node project, also specify dependencies, 

npx comes bundled with node

Key concept : request response cycle between client and server

Header is made of key value pairs, such as token value

Body response or data sent to server form date

node js http module is useful handle web requests.

JavaScript allows trailing comma. The extra last comma in objects. And that is okay. 

Content delivery network (CDN)

Mouse event, draggable droppable dragging and dropping a div usually has default behaviors that need to be cleared and disabled first. They can make debugging very difficult and confusing.

MEAN stack

“A Promise is an object representing the eventual completion or failure of an asynchronous operation. Essentially, a promise is a returned object you attach callbacks to, instead of passing callbacks into a function.” - codeburst medium

Dark mode : some themes come with one click flip dark mode button. Dark mode is build into the theme.

Image optimization: use lazy loading attribute, place placeholders or use pre-loading for images, iframes.

What is Next.js? Next.js builds on top of React. It’s more opinionated. "Next.js is a simple framework for building React applications that handles many gory details related to routing and SSR."

A-Frame VR in the browser, based on three.js games. Script pdf with python export some pages

Tutorial CS50 Harvard web dev with python and JavaScript