Advanced Web Developer Bootcamp - Colt Steele Flashcards
What are CSS transitions?
Makes it possible to do basic animation, by transitioning 1 or more CSS properties from one value to another.
Explain two ways of implementing CSS transitions
CSS only:
The base CSS class should contain properties such as transition-* properties and the default values that will be transitioned. Then a second CSS class, with a pseudo-class selector should apply the final transition property values. The pseudo class selector can also use transform and translate properties. All properties from the pseudo class that change between the base class and the pseudo class will be transitioned by default.
`
.card{
height:100px;
background-color:red;
transition-duration:200ms;
}
.card:hover{
background-color:blue;
}`
With Javasript:
The same EXCEPT, a pseudo class is not used, but rather Javascript is used to a assign such a class to an element.
`
.card{
height:100px;
background-color:red;
transition-duration:200ms;
}
.card-transitioned{
background-color:blue;
}
window.setTimeout(()=>{
document.getElementsByClassName(‘card’)[0].classList.add(‘card-transitioned’);
},1000)
`
Transition properties
transition-duration: how long it takes
transition-property: opacity, height… :which properties to transition, by default ‘all’
transition
transition-delay: how long to wait before starting transition
transition-timing-function: The bezier curve to use for the animation OR values such as ease-in, ease-out etc
Explain performance concerns with regards to CSS transitions
There are a plethora of properties that can be transitioned, however, for best performance, these are recommended:
`
transform: rotate()
transform: scale()
transform: translate()
opacity
`
The reason is that transforms and opacity come right at the end of the rendering process that the browser uses. If height for example has to change, then there is a waterfall effect, where the browser has to do layout-> paint -> composite layers (transforms and opacity). If only transforms or opacity, then only the composite layers step is required.
Explain transforms
The transform property allows transforming a selected element by moving it around with translate(), scaling it, rotating it.
transform-origin, can be set to determine where the transform is pinned to when changing the scale for example. By default it is in the center.
Explain :active
It’s a pseudo class for when the mouse button is held down on any element.
Explain :focus
When a form element, button or field, receives focus.
What are keyframes
Allows a developer to create more complex animations with more than just transitioning from 1 value to another.
You can set propertie(s) values at different intervals. For example, at 10%, 50%, 80%, 100% etc.
You can also repeat the animation.
Basic keyframes implementation and explanation
The animation is created and named using the @keyframes name{
[%]{
properties
}
}
The animation is then used and manipulated via the animation-* properties.
@keyframes animatedBall {
0%{
background-color:green;
}
20%{
background-color:red;
transform:translateY(100px);
}
70%{
transform:translateY(300px);
background-color:orange;
}
}
.ball{
height:100px;
width:100px;
animation-name: animatedBall;
animation-duration: 1000ms;
animation-fill-mode: backwards;
animation-iteration-count: 3;
}
Some important keyframes animation properties
animation-name: the keyframe animation name
animation-duration: how long
animation-fill-mode: what to do once the animation is stopped
animation-iteration-count: how many repetitions.
The x, y axis for translate
-x +x
-y
+y
JWTs (JSON Web Tokens)
Signed JWTs are used for authentication and authorization.
Authentication - ensure that it’s a valid request, JWT is valid
Authorization - middle-ware on the server is meant to authorize users with certain permissions/roles to access certain routes. The JWT is used to determine the user.
JWT is a token that is sent as an Authorization Header Bearer Token by convention to the API.
The API can decode the JWT in order to determine the user using the payload saved within the JWT.
The server issues the JWT, with information such as the user data, encrypted in the JWT. The front-end sends it to the API with every request. The API decrypts it to get the payload in order to determine the user. When the JWT is created and decrypted, a secret (password) is used.
Signed token structure:
header.payload.signature
- header: contains the algorithm used for encryption and decryption
- payload: contains claims, some are standard, but you can add custom claims, such as data about the user
- signature: this verifies the validity of the JWT
- header:
`
{
“alg”: “HS256”,
“typ”: “JWT”
}
`
base64url encoded in order to create header string
- payload
Registered claims that are not mandatory but are standard claims such as issuer, expiry, audience etc
Private claims: custom claims such as {
userid:1233
}
Also base64url encoded to form second string
Signature:
Use algorithm defined in the head
`
HMACSHA256(
base64UrlEncode(header) + “.” +
base64UrlEncode(payload),
secret)
`
What are the building blocks of flexbox layouts
The flex container (with display:flex), and flex-items (the children of the container)
Important properties on flex container
display:flex - makes it a flex container
flex-direction: the direction can be row or column. Defaults to row, meaning the flex items are displayed in a row by default. This sets the main axis as this value. The cross axis is the opposite value.
justify-content: how flex items are spaced along the main axis, if there is space that is not fully taken up by the flex items via flex-grow. flex-end, flex-start, space-between etc
align-items: how flex items should be spaced along the cross-axis, if space not fully taken up by flex-grow. flex-end, flex-start, center etc
flex-wrap: by default this is nowrap, but by setting it to wrap, as soon as there is not enough space left (when it’s in a row) for the flex items to go below the flex-basis (the min width if shrink not set), then items will wrap to a new row. width can be used as well, instead of flex-basis on a flex item.
align-content: Spacing of the flex item rows, when flex-wrap was required.
What is the purpose of flexbox?
Makes it easier to design parts of a layout that are in one direction - row or column
