NOTES
JS
-
querySelector + querySelectorAll → (“.li a”)[2]
-
classList. add, remove, toggle
innerHTML or innerText
style.color, backgroundColor
setAttribute (like class, href… everything inside < >) tipo (“href”, “https://……”)
text
css
addClass
removeClass
html
attr
after
before
prepend
appena
remove
on
keypress
click
1.
CALLBACKS
SetTimeout is an example where you have a callback function and also async JS.
Also when you add an event Listener, the second parameter is a callback function
Error first callbacks to catch errors first
2. PROMISE
“Passing a callback function that accepts both a resolve and a reject, and in the code
you want to detect or fails and if it’s successful you call resolve if it rejects/fails you
call reject”
https://www.youtube.com/watch?v=670f71LTWpM&t=473s&ab_channel=JamesQQui
ck
3. ASYNC/AWAIT
the await corresponds to the .then in promises.
Using try… catch… you can try to run code and handle the error in some way, but
can still use async await.
Node.js
1. Invented in 2009 by Ryan Dahl. It is a runtime environment to run Javascript
without the need of a browser. Node.js is an open-source runtime environment. It is
based on the Chrome V8 engine, written in C++.
It is used for intensive I/O web applications.
2. as
Express.js
A server is created using node.js, npm and express.js.
When we go to the browser and we type localhost:3000 we specify the location of a
server. When we hit enter, the browser will go to that location and make a request to get
some data back. And when that request gets made at that home location, then this
callback gets triggered, and we send the browser a response which is the text we typed in.
Nodemon
Nodemon is a utility depended on by over 1.5 million projects, that will monitor for
any changes in your source and automatically restart your server. Perfect for development.
Swap nodemon instead of node to run your code, and now your process will automatically
restart when your code changes.
API
Application Programming Interfaces. Set of commands, functions, protocols, and objects
that programmes can use to create software or interact with an external system.
API: Request from server to someone else’s server.
- Endpoints
- Paths
- Parameters
- Authentication - used to monetize based on # and types of requests
“https://v2.jokeapi.dev/joke/Programming,Miscellaneous,Dark?type=single&contains=debug
ging”
Importante che i parametri siano dopo ? e siano collegati da &.
https://api.openweathermap.org/data/2.5/weather?q=Ames&units=metric&appid=bcd50c34c
059584f6031555dc733c613
JSON: Javascript Object Notation. Data similar to Javascript Object. Readable by human by
can be compressed to make a single string.
HEROKU:
Create Procfile. Open in atom and type web: node app.js.
“Git init” in the same folder
“Git add .” in the same folder
“Git commit . -m “First Commit” in the same folder
“Heroku create”
“git push heroku master” to push online
GIT and GITHUB:
Version Control, Clone Repositories, Fork, Make pull Requests, merge repositories.
git init
//Initialize Local Git Repository
git add “file.txt” or . for all files
//Add File(s) to Index
git status (to check status of commits)
//Check Status of Working Tree
git commit -m “Complete Chapter 1” - write in present tense!
//Commit changes in
index
git push
//Push to remote repository
You can also create SSH keys so that you don’t have to type passwords
git pull
git clone(to get the log of all commits)
//pull Latest from remote repository
//copy repository into a new directory
git log (to get the log of all commits)
git add . (to add everything to staging area, ready to commit changes)
git diff chapter3.txt (to see the differences with the previous versions!)
git checkout “chapter3.txt” (to roll back to the last position in our local repositories) - this
restores the version of the file we want to checkout.
git status --short
master branch is the main branch of commits (where main progress is saved)
Local repository (it is the git file that is inside the story directory) vs remote repository (it is
GITHUB, which hosts the code and the changes that were made between the different
commits)
VSCODE Shortcuts
-
CTRL + SHIFT + P :Open command palette
CTRL + , : Settings tab
CTRL + W : to close active tab
CTRL + ò : Open terminal
CTRL + B : to hide sidebar or open
CTRL + SHIFT + N : Open new window
CTRL + SHIFT + E : to navigate sidebar quickly
CTRL + TAB : to move across tabs
CTRL + SHIFT + T : to reopen last file
CTRL + P : To open available files
CTRL + ENTER : automatically go to the next line!
CTRL + SHIFT + O : find all functions in code
- CTRL+SHIFT+L : selects all occurrences of the highlighted text, very handy to rename a method,
a variable or refactor a duplicated bit of code at all places at once
- CTRL+SHIFT+F : to search some text in the whole workspace
-
CTRL + ALT + N to run code scripts
TAILWIND
-
npm init -y : initialize JSON file
-
npm i -D tailwindcss
-
Replace echo in json file with "
"scripts": {
//to install tailwindcss
"build": "tailwindcss -i ./src/input.css -o
-
./dist/main.css",
"watch": "tailwindcss -i ./src/input.css -o
-
./dist/main.css --watch"
-
-
},
The first just builds it and the second also watches
Run “npm run build”
REACT
Always start with app.js b/c it is the root of your application.
React works using components. A component can be embedded in another component
-
-
React components: functions that return HTML elements
Props: Props are arguments passed into React components. Props are passed to
components via HTML attributes. Components can be passed as props, which
stands for properties. Props are like function arguments, and you send them into the
component as attributes.
useRef hook allows us to reference elements inside our HTML
FIRST, BUILD REACT USING: npm run build
CREATE SIMPLE HTTP SERVER (-g global): npm i -g serve
SERVE ON LOCAL PORT (-p): serve -s build -p 8000
To set-up quick backend
"server": "json-server --watch db.json --port 5000"