Perfect Pixel

2em

2rem

100%

28px

5ch

5vh

5vw

clamp (2rem, 2vw + 1em, 5rem)

clamp(0.7rem, 1em + 1vw, 5rem)Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore sit veniam soluta quam? Quod nemo repellendus doloremque quas autem alias, sit fuga consequatur amet totam nobis a odio? Nulla, nisi?

1emLorem ipsum dolor sit, amet consectetur adipisicing elit. Labore sit veniam soluta quam? Quod nemo repellendus doloremque quas autem alias, sit fuga consequatur amet totam nobis a odio? Nulla, nisi?

1remLorem ipsum dolor sit, amet consectetur adipisicing elit. Labore sit veniam soluta quam? Quod nemo repellendus doloremque quas autem alias, sit fuga consequatur amet totam nobis a odio? Nulla, nisi?

clamp(0.7rem, 2vw, 5rem)Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore sit veniam soluta quam? Quod nemo repellendus doloremque quas autem alias, sit fuga consequatur amet totam nobis a odio? Nulla, nisi?

relative

margin: autoposition: absolute

display: flexjustify-content: center align-items: center

position: relative

position: absolutetop: 50%left: 50%transform: translate(-50%, -50%)

display: flexjustify-content: center

align-self: center

display: flex

margin: auto

display: flexjustify-content: centeralign-items: center

width: can't use relative values(this has a fix value)

display: gridplace-items: center

Could this be the cleaner way...?*from the container

display: grid

align-self: centerjustify-self: center

display: grid

margin: auto

onAbort

onBlur

onChange

onClick

onDblClick

onDragDrop

onError

onFocus

onKeyDown

onKeyPress

onKeyUp

onLoad

onMouseDown

onMouseMove

onMouseOut

onMouseOver

onMouseUp

onMove

onReset

onResize

onSelect

onSubmit

onUnload

onAbort

onBlur

onChange

onClick

onDblClick

onDragDrop

onError

onFocus

onKeyDown

onKeyPress

onKeyUp

onLoad

onMouseDown

onMouseMove

onMouseOut

onMouseOver

onMouseUp

onMove

onReset

onResize

onSelect

onSubmit

onUnload

onAbort

onBlur

onChange

onClick

onDblClick

onDragDrop

onError

onFocus

onKeyDown

onKeyPress

onKeyUp

onLoad

onMouseDown

onMouseMove

onMouseOut

onMouseOver

onMouseUp

onMove

onReset

onResize

onSelect

onSubmit

onUnload

onAbort

onBlur

onChange

onClick

onDblClick

onDragDrop

onError

onFocus

onKeyDown

onKeyPress

onKeyUp

onLoad

onMouseDown

onMouseMove

onMouseOut

onMouseOver

onMouseUp

onMove

onReset

onResize

onSelect

onSubmit

onUnload

OnlineOffline

window.addEventListener("online", handleOnline);window.removeEventListener("online", handleOnline);

Mouse quiet

window.addEventListener("onMouseMove", handleOnline);window.removeEventListener("onMouseMove", handleOnline);

Press mouse click

window.addEventListener("click", handleOnline);window.removeEventListener("click", handleOnline);

onAbort

onBlur

onChange

onClick

onDblClick

onDragDrop

onError

onFocus

onKeyDown

onKeyPress

onKeyUp

onLoad

onMouseDown

onMouseMove

onMouseOut

onMouseOver

onMouseUp

onMove

onReset

onResize

onSelect

onSubmit

onUnload

onAbort

onBlur

onChange

onClick

onDblClick

onDragDrop

onError

onFocus

onKeyDown

onKeyPress

onKeyUp

onLoad

onMouseDown

onMouseMove

onMouseOut

onMouseOver

onMouseUp

onMove

onReset

onResize

onSelect

onSubmit

onUnload

onAbort

onBlur

onChange

onClick

onDblClick

onDragDrop

onError

onFocus

onKeyDown

onKeyPress

onKeyUp

onLoad

onMouseDown

onMouseMove

onMouseOut

onMouseOver

onMouseUp

onMove

onReset

onResize

onSelect

onSubmit

onUnload

onAbort

onBlur

onChange

onClick

onDblClick

onDragDrop

onError

onFocus

onKeyDown

onKeyPress

onKeyUp

onLoad

onMouseDown

onMouseMove

onMouseOut

onMouseOver

onMouseUp

onMove

onReset

onResize

onSelect

onSubmit

onUnload

/Dockerfile

FROM node:18 # Create app directory WORKDIR /usr/src/app # Install app dependencies # A wildcard is used to ensure both package.json AND package-lock.json are copied # where available (npm@5+) COPY package*.json ./ RUN npm install # If you are building your code for production # RUN npm ci --omit=dev # Bundle app source COPY . . EXPOSE 8080 CMD [ "node", "server.js" ]

/.dockerignore

node_modules npm-debug.log

Building your image

~/Devmain

docker build . -t <your username>/node-web-app_

Run the image

~/Devmain

docker run -p 49160:8080 -d <your username>/node-web-app_

Print the output of your app

~/Devmain

# Get container ID

~/Devmain

$ docker ps_

~/Devmain

# Print app output

~/Devmain

$ docker logs <container id>_

~/Devmain

# Running on http://localhost:8080

Shut down the image

~/Devmain

docker kill <container id>_

~/Devmain

/Dockerizing a Node.js web app

https://nodejs.org/en/docs/guides/nodejs-docker-webapp

/Best practices for Node container

https://github.com/nodejs/docker-node/blob/main/docs/BestPractices.md

Terminal

~/Devmain

npm i express_

/Basic Node server with Express

'use strict'; const express = require('express'); // Constants const PORT = 8080; const HOST = '0.0.0.0'; // App const app = express(); app.get('/', (req, res) => { res.send('Hello World'); }); app.listen(PORT, HOST, () => { console.log(`Running on http://${HOST}:${PORT}`); });

/CORS example

Terminal

~/Devmain

adasd asdasd ads q ac c1c c1we t5w54rsgv 1232fe vs_

AWS CLI

Validate a User's Credentials

~/Devmain

aws sts get-caller-identity_

~/Devmain

{

~/Devmain

"UserId": "QWERTYUIOPASDFGHJKLZX",

~/Devmain

"Account": "123456789123",

~/Devmain

"Arn": "arn:aws:iam::012345678901:user/my_user"

~/Devmain

}

Create a new profile

~/Devmain

aws configure --profile profilename_

Change the AWS Region

~/Devmain

aws configure region (region-name)_

List your EC2 instances

~/Devmain

aws ec2 describe-instances_

List your lambda functions

~/Devmain

aws lambda list-functions_

List your S3 buckets

~/Devmain

aws s3 ls_

List the files in a S3 bucket

~/Devmain

aws s3 ls s3://mybucket_