General Flashcards
How spread operator works
{ …note } creates a new object with copies of all the properties from the note object. When we add properties inside the curly braces after the spread object, e.g. { …note, important: true }, then the value of the important property of the new object will be true
```
const noteToEdit = notes.find(note => note.id == id);
const newNote = { …noteToEdit, important: !noteToEdit.important };
~~~
const t = [1, 2, 3, 4, 5] const [first, second, ...rest] = t
How destruction works
object and array
const body = {
content:"this is content",
important: true
}
const {content,important}= body; //const should be named same as in destructed object
with array
const t = [1, 2, 3, 4, 5]
const[one,two] = t // one =1, two =2 es6 object initialiser feature
compact way to init object
the names of the keys and the assigned variables are the same, we can write the object definition with a more compact syntax:
```
const age = 37
const name = “Yahor”
const person = {age,name}
person.name //Yahor
~~~
also can be done partially{ token, username: user.username, name: user.name }
The HTTP standard talks about two properties related to request types, safety and idempotence.
Describe this two types
Safety means that the executing request must not cause any side effects in the server.
All HTTP requests except POST should be idempotent
if a request does not generate side-effects, then the result should be the same regardless of how many times the request is sent.
POST is the only HTTP request type that is neither safe nor idempotent. so all other method will return same result no matter how much times called ( other requests return only status (put returns updated note), but post return new note(
Waht is CORS
Cross-Origin Resource Sharing
Same-origin policy restricts how a document or script loaded by one origin can interact with a resource from another origin.
By default, the JavaScript code of an application that runs in a browser can only communicate with a server in the same origin (same goes for other resources).
Types of tests
- unit - testign functions and units outcome
- testing where multiple components of the system are being tested as a group, is called integration testing. It occurs after unit testing and before
- e2e or system testing
How to send auth token with server request
There are several ways of sending the token from the browser to the server. We will use the Authorization header. The header also tells which authentication scheme is used. This can be necessary if the server offers multiple ways to authenticate.
Identifying the scheme tells the server how the attached credentials should be interpreted.
The Bearer scheme is suitable to our needs.
local storage
Local Storage is a key-value database in the browser.
window.localStorage.setItem(‘name’, ‘juha tauriainen’)
window.localStorage.getItem(‘name’)
The storage is origin-specific so each web application has its own storage.
To save object to localstorage use JSON.stringify() and when getting it back JSON.parse()
REST urls and methods and what they should return (get post etc.. on urls notes/10 and notes)
notes/10 GET fetches a single resource
notes GET fetches all resources in the collection
notes POST creates a new resource based on the request data, returns 201 and new note
notes/10 DELETE removes the identified resource, returns 204
notes/10 PUT replaces the entire identified resource with the request data, returns updated note
notes/10 PATCH replaces a part of the identified resource with the request data
what are the map files (blabla.js.map)
files helps to debug minified app - you will see clean structure of the project.
can be deleted for prod
TDD what it is about
tdd is about fast feedback
a bit test a bit code
taking small steps
Transpile vs compile
transpile- is from source code to source code
compile is from source code to binary file
Dependenices vs devDependencies
dev dep - for development, tests, transpilator, minificator, json-server etc.
Devdep are not installed transitively - so they wouln’t be installed for the packages which are listen in your project.json
Why to use deltaTime in animations, what is it? how to get it?
How to move object in px/sec (speed = 100)
Animations should be frame rate independent
The way to make animation frame rate independent is to compute how much time it took between frames and use that to calculate how much to animate this frame.
~~~
let now;
let then = performance.now();
function draw(now){
//let now = performance.now(); //same if now wasn’t passed
const timePassedinSec = (now-then)/1000 //time between frames updates;
x+=speed*timePassedinSec
then = now
requestAnimationFrame(draw)
}
draw()
~~~
How to display FPS
Use deltaTime, dont forget calculate lefover %
let then = 0
let fps = 0;
const update = (now) => {
const delta = now - then;
fps++
if (delta >= 1000) {
then = now - (delta % 1000)
document.getElementById("p1").innerHTML = `${fps}`;
fps = 0
}
window.requestAnimationFrame(update);
};
window.requestAnimationFrame(update);
