js

https://jsonplaceholder.typicode.com/posts

var firstName = "Jamila";

console.log(typeof firstName); //string

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

console.log(Object.values(person));

console.log(Object.keys(person));

console.log(JSON.stringify(person))

const advice = document.querySelector(".advice");

advice.textContent = "asdf";

btn.addEventListener("click", fnBtn);

arrays: map find reduce sort

datas = [{id:1,title:'adsf'},{id:2},{title:'asdf3}]

datas.find((id)=> d.id===id)

const id = data?.id? ?? 0;

const arry = [1,2,3]

console.log(arry.map((el)=>el*2)) //2,4,6

console.log(datas.map((el)=>el.id)//1,2

const dataNew = datas.map((data)=>({

        dataId:data.id;

        dataTitle: data.title;

}))

 const pages = books.reduce((accu,book)=>accu + book.pages,0);

//initial value could be a number 0, array [], object {})

//unlike map filter, the sort mutated the array

[2,1,3].sort((a,b)=>a-b) //[1,2,3]

//to preserve the original array, we create a copy first:

data.slice().sort(a,b=>b-a)

const booksAfter = [...books, newBook] //spread operator (not rest)

Vue.js

Vue.js cheatsheet https://devhints.io/vue 

https://vuejs.org/guide/essentials/lifecycle.html

jQuery

https://htmlcheatsheet.com/jquery/

React

• vite
• next.js

Example with Vite:

npm create vite@latest

================================

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> ); });

npx create-next-app@13.4

npm run dev

npm run build #for prod

npm start

===============

npm create vite@latest

npm i(nstall) & npm run dev

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'