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);Why to use webpack
- Bundling
Modules are still not fully supported by browsers - htat is why we combine it into 1 files. Also 1 files is more efficient to load
css also should be bundled - Transpiling
JSX to js and latest es6 features - polyfiling - adding missing functionality on older browsers (promise, array.dind)
- Minifying the code
- creating source maps
- setup development and production configuration
Also it gives such tools as dev-server - which will watch our sources and re-bundle when changed (note that this re-bundling will only be made in memory, to rebundle really we need to run a command)
- eject command in react-app will delete webpack configuration
Why to use webpack
- Bundling
Modules are still not fully supported by browsers - htat is why we combine it into 1 files. Also 1 files is more efficient to load
css also should be bundled - Transpiling
JSX to js and latest es6 features - polyfiling - adding missing functionality on older browsers (promise, array.dind)
- Minifying the code
- creating source maps
- setup development and production configuration
Also it gives such tools as dev-server - which will watch our sources and re-bundle when changed (note that this re-bundling will only be made in memory, to rebundle really we need to run a command)
- eject command in react-app will delete webpack configuration and all black-magic
What are the benefits of server rendering
Useful for performance and SEO optimisation
Crucial for first render - when you need to load a lot of js and then build page with it
What is tsconfig.json
The tsconfig.json file is used to define how the TypeScript compiler should interpret the code, how strictly the compiler should work, which files to watch or ignore,
How to create own type in TypeScript
2 ways
type Operation = ‘multiply’ | ‘add’ | ‘divide’;
or
interface
interface MultiplyValues {
value1: number;
value2: number;
}
What is union type in TS
type CoursePart = CoursePartOne | CoursePartTwo | CoursePartThree;
If we will make an array of different types
const courseParts = [
{
name: “Fundamentals”,
exerciseCount: 10,
description: “This is an awesome course part”
},
{
name: “Using props to pass data”,
exerciseCount: 7,
groupProjectCount: 3
},
{
name: “Deeper type usage”,
exerciseCount: 14,
description: “Confusing description”,
exerciseSubmissionLink: “https://fake-exercise-submit.made-up-url.dev”
}
];
and then reference one of them
let second:CoursePart = courseParts[1]
TS will understand what type it is
What steps usually includes CI/CD
- Lint: to keep our code clean and maintainable
- Build: put all of our code together into software
- Test: to ensure we don’t break existing features
- Package: Put it all together in an easily movable batch
- Upload/Deploy: Make it available to the world
In fact, the process for ci and cd may literally be the same with only a check at the end to determine if we are on the main branch and need to do a deployment.
What are the options to organise CI and there +/-
self-hosted - Jenkins
+:
- environment is under your control
- secrets are never exposed
-:
- complicated to setup
- risks of hardware failures
cloud-based solutions - github actions
+:
- no need to host server
- setup is easier
-:
- you don’t have control over hardware (can’t just add more RAM)
Cloud-based options are also usually billed by build time which is something to consider.
What are conainers used for
Containers isolate the software running inside, it enables the software to run identically almost anywhere. As such, they are the go-to option in any cloud environment or application with more than a handful of users.
Container is created from an image
you can never actually build a container or download one since containers only exist during runtime
Relational vs Non-relational
differences, adv and cons
Relational
- structured in tables ( has columns and rows)
- data tables are connected to each other (have relations)
adv:
- easy to manage, data is consistent
- security (encip table, hide info)
- easy backup and recovery
Non relational
- schemaless, ( the database has only a very limited awareness of what kind of data is stored in its collections)
types
- key-value
- column-based
- graph db
- document store
adv
- scalability
- flexibility (since the schema does not need to be defined at the database level, application development may be faster in certain cases, and easier, with less effort needed in defining and modifying the schema in any case.)
- cost effective
- readability ( all info in one document, rather then collecting withJOINTS between tables)
cons
- can get hard to manage
