VS Code

• Nainstaluj NODE.js - pro příkazy "npm" v terminálu
• Nainstaluj extension Tailwind CSS intellisense
• Nainstaluj extension LIVE server (klikem pravým tlačítkem na index.html vyber Open with Live Server)
• package.json do projektu
  npm init --y
• item 5

Zajímavosti

• ECMAScript 6 => ECMAScript 5
  Babeljs.io - transpiller
• NPM - node package manager
  NPMJS.com
• Lodash - A modern JavaScript utility library
  studnice mnoha užitečných funkcí
  Lodash
• MODULE BUNDLER
  Webpack - ...
  ...
  ...
• item 5

Moje kurzy

• TailwindCSS na learn2code.com
• Git a GitHub na learn2code.com
• Git a GitHub na Githubu
• Vue 3 rýchlokurz ✨ programovanie cez komponenty
• item 5

NPM - konzolový rychlokurz

• Verze npm
  npm -v
  Help npm
  npm -h
  Zastav všechno
  CTRL + C
  
• Najdi package
  npm search lodash
  Více info o package
  npm view lodash
  Nainstaluj package
  npm install lodash
  Nainstaluj package
  npm install -g lodash
• Nainstalované packages
  npm list -g --depth 0
  Globálně nainstalované packages
  npm list -g --depth 0
  Více info o package
  npm view lodash
  Stáhni package
  npm install lodash
• Kolik místa zabírá každý soubor v adresáři
  du -sh *
  Kolik místa zabírá celý adresář
  du -sh .
  
• Package, který má skončit na webu
  npm install lodash
  Package, který potrřebuješ jen ty, programátor
  npm install babel-cli --save-dev
  nebo
  npm install babel-cli -D
  
• Znovu spuštění projektu
  bez node_modules a package-lock.json
  takhle lze poslat projekt kolegovi a on pak jen zadá
  npm install
  toto natáhne všechny packages do projektu, které jsou v dependencies
  Jen do dependencies
  npm install --only=prod
  takto přípravíme jen ty data, které přeneseme na ostrý web
  Jen do devDependencies
  npm install --only=dev
  
• SASS package - jak sass soubor převést na css výstup
  Používání SASS
  npm sass
  tento package není nutný v produkční verzi webu
• BABEL-CLI package - převádí ECMAScript 6 => ECMAScript 5
  BABEL-CLI
  ...
  tento package není nutný v produkční verzi webu
  Přidal BABEL-CLI do dev
  npm install babel-cli --save-dev
  hlavně dle dokumentace, chceme babel použít na toto:
    'use strict'
    es6 class převést na obyč. es5
    minifikaci kodu
  
  Nebo použít PRESETS
  Vytvoř v adresáři projektu soubor .babelrc
  {
    "presets": ["env"]
  }
  
  Přidal set pluginů, co mění ES6 na ES5
  npm install babel-preset-env --save-dev
  
  A když skončíš, zadáš toto:
  node_modules/.bin/babel src/app.js --out-file js/app.js
  nebo také celý adresář:
  node_modules/.bin/babel src -d public/js
  node_modules/.bin/babel src --out-dir public/js
  nebo také s watch (po každé změně v souboru)
  node_modules/.bin/babel src -w -d public/js
  
• BABEL - POLYFILL - doučí tvůj JS kódem, který ve starém ES5 neexistuje
  BABEL - sekce POLYFILL
  npm install --save babel-polyfill
  naučí staré prohlížeče novým funkcím musí běžet před tvým kódem

Vue.js 2

• Pro práci s ajaxem
  npm i axios
• Instalace Parcel - vůbec není nutný!
  - umí import dat
  npm install -g parcel-bundler
  parcel --version
  package.json do projektu
  npm init --y
  Zkontroluj package.json dle parceljs.org Spustí server
  parcel index.html

Vue.js

• Vše o Vue.js
• Instalace pomocí Vite
  Nezapomeň na NODE.js
• 
  Založení Vue aplikace pomocí Vite
• 
  Postupuj dále takto
  cd vueappBlog
  npm install (or `yarn`)
  npm run dev (or `yarn dev`) ... chvíli počkej
• Před npm run dev nastartuj VS Code
• Nainstaluj extension Vetur
• Nainstaluj extension Vue VSCode Snippets
• Nainstaluj extension Prettier - Code formatter
• Nastavení extension Prettier - Code formatter
• Nyní nastartuj
  npm run dev
• Vue 3 rýchlokurz ✨ programovanie cez komponenty

Tailwind CSS

• dokumentace TailwindCSS
• nezapomeň nainstalovat NODE.js
• nezapomeň extensions
• instalace poslední verze tailwindcss do projektu npm install tailwindcss@next
• do src/style.css šoupni toto
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  @layer components {}
• vytvoř nový příkaz "build-css" do package.json ve "scripts" misto "test" dej "build-css" a jako hodnotu dej "tailwindcss build src/style.css -o public/style.css", je to alternativa k opakovenmu prikazu do terminalu "npx tailwindcss-cli@latest build -o tailwind.css"
• pro rebuild nového css (po každé změně v css a nebo tailwind.config.js) vždy zavolej npm run build-css
• npx tailwindcss init -> vytvoří prázdný tailwind.config.js soubor
• nezapomeň po dokončení vývoje udělat PURGE.
  V tailwind.config.js změn na toto:
  
  module.exports = {
  purge: {
  enabled: false,
  content: [
  "./public/*.html",
  "./src/**/*.vue"
  ]
  },
  
• item 3

Git a GitHub

• Nepoužíváš-li zabudovaný terminál ve VSC, tak cmder je dobrá volba. (je i s podporou Git)
  Instalace GITu.
• Test instalace git --version
• Nastav jméno a heslo (používáš-li Github, použij Github údaje)
  
  git config --global user.name "jmeno"
  git config --global user.email "em@em.hu"
• Aktivace Gitu pro projekt
  Nastav terminál na adresář tvého projektu a zapiš
  git init
• Ověř stav
  git status
• Po změně v souboru, např. index.html, ho označ jako změněný.
  git add index.html
• DŮLEŽITÉ! Tuto změnu vytesej do kamene.
  git commit -m "změnil jsem index.html"
• Zkontroluj vývoj.
  git log
  A stále dokola.
• Označ všechny .png soubory z adresáře images
  git add images/*.png
• Označ všechny z tohoto adresáře (kromě vymazaných souborů).
  git add .
• Označ všechny z tohoto adresáře (včetně vymazaných souborů).
  git add -A
• Zrušit označení souborů.
  git restore --staged .
• Commitni všechny změněné (ne nové) soubory.
  Hned přidej komentář.
  git commit -a
  git commit -am "upravil jsem kód, a už je dobrý"
• Vycucni log. Dej ho na jeden řádek.
  git log --graph --decorate --abbrev-commit --all
  git log --graph --decorate --abbrev-commit --all --pretty=oneline
• Když uložíš index.html, ale zkazil si to. A chceš sa vrátit na verzi z gitu.
  git checkout -- index.html
• Přes git log nájdeš hash commitu. Zkopíruj prvních pár znaků (např. c10e47f) a takto můžeš skočit na starší verzi projektu.
  git checkout c10e47f
• Vrať sa nazpět na aktuální verzi.
  git checkout main
• Jak vypnout VIM.
  - stlač "i"
  - napíš text
  - esc
  - :wq
  - enter
  - ;)
  
  A šípky nahoru/dolů a q, pokud je git log dlouhý.

Git a GitHub 2

• GIT PUSH/PULL
  Naklonuj projekt do adresára mujprojekt.
  git clone https://github.com/user/mujprojekt-na-gitu.git mujprojekt
• Vytvoř odkaz na externí server (resp. konkrétní repozitář).
  git clone git remote add origin https://github.com/ty/odkaz-na-tvoj-projekt.git
• Natlač změny z tvého počítače na server. (Zadej github jméno/heslo.)
  git push origin main
• Natáhni změny ze serveru do tvého počítače.
  git pull origin main
• Čekni, zda na serveru nenastaly změny.
  git remote update
  git status
• Plus mínus jaké změny to byly?
  git whatchanged origin/main -n 1
• GIT BRANCH/MERGE (rozvětvi se)
  Když děláš bugfix, udělej si bugfix větev. Ak děláš novou login fičuru, udělej si login větev.
  git branch login
• Přepni sa do nové login větve. Commity o loginu dělej do ní.
  git checkout login
• Vytvoř a okamžitě se přepni sa do nové bugfix větve. Commity o bugu dělej do ní.
  git checkout -b bugfix
• Když máš login fičuru hotovou, přepni sa do hlavní větve.
  git checkout main
• A sluč změny z loginu do ní.
  git merge login