shotcut

 mask simple shape

blur box

mask apply

/////////////

https://www.youtube.com/watch?v=_HzWTY8oYoU

add video track

add other - color

grab this color to the new video track

add mask "size, position, rotate"

aws lambda

https://docs.aws.amazon.com/sdk-for-java/latest/developer-guide/migration-whats-different.html

A noticable change from the the SDK for Java 1.x to the SDK for Java 2.x is the package name change. Package names begin with software.amazon.awssdk in SDK 2.x, whereas the SDK 1.x uses com.amazonaws.

https://github.com/awsdocs/aws-lambda-developer-guide/tree/main/sample-apps

https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javav2/example_code/lambda

https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javav2/example_code/dynamodb/

https://docs.aws.amazon.com/lambda/latest/dg/java-samples.html

https://docs.aws.amazon.com/lambda/latest/dg/getting-started.html

https://docs.aws.amazon.com/lambda/latest/dg/example_cross_LambdaScheduledEvents_section.html

https://docs.aws.amazon.com/lambda/latest/dg/example_cross_LambdaAPIGateway_section.html

https://www.youtube.com/watch?v=A1rYiHTy9Lg Deploy a SpringBoot API on AWS Lambda in 10 minutes

        "Access-Control-Allow-Credentials" : true // Required for cookies, authorization headers with HTTPS 

backend must return the applicable CORS headers https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html

aws s3

 aws s3 ls --profile userY

https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html

python3 -m http.server

aws dynamodb

 aws dynamodb list-tables --profile userX --region us-east-1

api: https://docs.aws.amazon.com/cli/latest/reference/dynamodb/index.html#cli-aws-dynamodb

list-tables

get-item put-item update-item delete-item batch-get-item batch-write-item

query scan

https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javav2/example_code/dynamodb/src/main/java/com/example/dynamodb/ListTables.java

https://javatodev.com/spring-boot-dynamo-db-crud-tutorial/ (old java1 example, but with dynamodb from docker) 

https://www.techgeeknext.com/cloud/spring-boot-aws-dynamodb-crud-example

$ docker run -p 8000:8000 amazon/dynamodb-local -jar DynamoDBLocal.jar -inMemory -sharedDb

https://docs.aws.amazon.com/sdk-for-java/latest/developer-guide/examples-dynamodb-enhanced.html

https://bluexp.netapp.com/blog/aws-cvo-blg-dynamodb-pricing-how-to-optimize-usage-and-reduce-costs

https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/GettingStarted.html

https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/service_code_examples.html

React

npm install -g create-react-app

npx create-react-app file-upload-app cd file-upload-app npm start

maxschwarzmueller https://github.com/academind/react-complete-guide-course-resources

PizzaStore: CartContext Modal Button

TicTacToe

Investment Calc: 

Modal basic:

https://github.com/academind/react-complete-guide-course-resources/blob/main/code/08%20Refs%20Portals/07-adding-a-modal-cmp/src/components/ResultModal.jsx

Modal forwardRef:

https://github.com/academind/react-complete-guide-course-resources/blob/main/code/08%20Refs%20Portals/08-forwarding-refs/src/components/ResultModal.jsx

Section 8 Working with Refs and Portals

Demo project: Project Manager:

https://github.com/academind/react-complete-guide-course-resources/blob/main/code/09%20Practice%20Project%20-%20Project%20Management/10-finished/src/App.jsx

Demo project: Quiz app:

https://github.com/academind/react-complete-guide-course-resources/blob/main/code/13%20Demo%20Project%20-%20React%20Quiz/08-finished/src/App.jsx

Authentication: https://github.com/academind/react-complete-guide-course-resources/blob/main/code/22%20Authentication/09-finished/frontend/src/components/AuthForm.js

{data && data.errors && (

          <ul>

            {Object.values(data.errors).map((err) => (

              <li key={err}>{err}</li>

            ))}

          </ul>

        )}

https://github.com/jonasschmedtmann/ultimate-react-course

https://react.new/ - code sandbox

VS Code extentions: 

prettier, eslint, liveserver

Quokka - JavaScript and TypeScript playground in your editor.

1) we should never update the state in render logic

2) component will be re-rendered on:

-state change

-props change

-parent change

-

https://www.youtube.com/watch?v=i-hoSg8iRG0&t=231s 

https://github.com/facebook/create-react-app

npx create-react-app my-app
cd my-app
npm start

https://react-bootstrap.github.io/getting-started/introduction/

npm install react-bootstrap bootstrap

https://www.pexels.com/

const [items, setItems] = useState([]);

  function handleAddItems(item) {

    setItems((items) => [...items, item]);

  }

  function handleDeleteItem(id) {

    setItems((items) => items.filter((item) => item.id !== id));

  }

  function handleToggleItem(id) {

    setItems((items) =>

      items.map((item) =>

        item.id === id ? { ...item, packed: !item.packed } : item

      )

    );

  }

<PackingList

        items={items}

        onDeleteItem={handleDeleteItem}

        onToggleItem={handleToggleItem}

        onClearList={handleClearList}

      />

export default function PackingList({

  items,

  onDeleteItem,

  onToggleItem,

  onClearList,

}) {...}

      <button onClick={() => onDeleteItem(item.id)}>❌</button>

https://i.pravatar.cc/

https://i.pravatar.cc/200

https://i.pravatar.cc/200?u=499476

https://jsonplaceholder.typicode.com/

https://api.adviceslip.com/

https://api.adviceslip.com/advice/1

https://www.omdbapi.com/apikey.aspx

 const isWatched = watched.map((movie) => movie.imdbID).includes(selectedId);

  const watchedUserRating = watched.find(

    (movie) => movie.imdbID === selectedId

  )?.userRating;

 function handleDeleteWatched(id) {

    setWatched((watched) => watched.filter((movie) => movie.imdbID !== id));

  }

asdf

163  Initializing State With a Callback Lazy Initial State

localStorage.setItem("asdf",JSON.stringify(json));

const [asdf,setAsdf] = useEffect(function(){

return JSON.parse(localStorage.getItem("asdf");

});

localStorage.setItem('test', new Array((i * 1024) + 1).join('a'));

// Function to update the object state
  const updateObject = () => {
    // Update the state by creating a new object with the updated values
    setMyObject({
      ...myObject, // Spread the current state
      key2: 'updatedValue' // Update the desired key/value pair
    });
  };

const countRef = useRef(0);

useEffect(function(){

countRef.current++;

})

function getWeatherIcon(wmoCode) {

  const icons = new Map([

    [[0], "☀️"],

    [[1], "🌤"],

    [[2], "⛅️"],

    [[3], "☁️"],

    [[45, 48], "🌫"],

    [[51, 56, 61, 66, 80], "🌦"],

    [[53, 55, 63, 65, 57, 67, 81, 82], "🌧"],

    [[71, 73, 75, 77, 85, 86], "🌨"],

    [[95], "🌩"],

    [[96, 99], "⛈"],

  ]);

  const arr = [...icons.keys()].find((key) => key.includes(wmoCode));

  if (!arr) return "NOT FOUND";

  return icons.get(arr);

}

js: <script src="..." type="module"></script>

export let apikey="asdf"

import {apikey, somekey as newkey} from './props.js"

import * as props from "./props.js"

console.log(props.apikey)

import "img" from "./img/some.png"

<p className={`label  ${ emailValid? 'valid' : 'invalid'}`}>email</p>

<p style={{color:'green', border:'solid'}}

import whateverName from './App.module.css'

<p className={whateverName.err}>Err</p>

className={`${whateverName.err}`}

const ChildComponent = forwardRef({ actual, ...otherProps },ref) => { return ( <div> {/* Pass other props to the input element */} <input {...otherProps} ref={ref} /> {/* You can use the "actual" prop here */} <p>Actual prop: {actual}</p> </div> ); });

Java profiling

 jconsole

jcmd; jcmd 207639 JFR.start duration=10s filename=asdf.jfr

jmc :

Standalone JMC and Plug-ins Download

Download JMC from: JDK Mission Control (JMC) 8 Downloads; ensure that you accept the license agreement.

                      

IntelliJ IDEA provides integration with the following profilers:

    Java Flight Recorder – the standard profiling tool shipped as part of the JDK.

    Async Profiler – a very accurate profiler that can also collect native call and memory allocation data.

$ jcmd 206983 JFR.start name=continuous

206983:

Started recording 1. No limit specified, using maxsize=250MB as default.

Use jcmd 206983 JFR.dump name=continuous filename=FILEPATH to copy recording data to file.

$ jcmd 206983 JFR.dump name=continuous filename=asdf

206983:

Dumped recording "continuous", 351.3 kB written to:

Node.js

https://github.com/nodejs/help/wiki/Installation

https://www.youtube.com/watch?v=Gx4iBLKLVHk&list=PLwvrYc43l1Mz_c-vV1yVyvFNFZPAleSNE&index=8

1) Download zip from https://nodejs.org/en 

2) Unzip and add to .bashrc

export NODE_HOME=/home/encaps/Downloads/node-v18.15.0-linux-x64/

export PATH=$PATH:$NODE_HOME/bin

3) https://angular.io/cli

node install -g @angular/cli

HTTPie https://youtu.be/Gx4iBLKLVHk?list=PLwvrYc43l1Mz_c-vV1yVyvFNFZPAleSNE&t=3524

Nodejs app: https://www.youtube.com/watch?v=6YisG2GcXaw&list=PLy7NrYWoggjwPggqtFsI_zMAwvG0SqYCb&index=8

ng new my-first-project

cd my-first-project

ng serve

ng generate service item --skip-tests=true

git config credential.helper store

git config credential.helper 'cache --timeout 36000' # 10 hours

or

git config --global credential.helper credential.helper store 

git config --global credential.helper 'cache --timeout 7200'