Úvod do (web) programovania

Web = HTML
Web = HTML + CSS
Web = HTML + CSS + JS
Web = HTML + CSS + JS + DIZAJN

• BEM pre naming conventions, spolu s Atomic design – je dôležité pochopiť kde začína a končí jeden komponent (jeho práva a povinnosti), aby ovplyvňoval len čo má vnútri a s vonkajším svetom komunikoval na základe nejakých dohôd (interfaces)
  • TLDR;
    • Block
    • Element
    • Modifier

Príklad <product-card :product=“{}“>:

• CSS:
  • Block – .product-card
  • Element – .product-card__header, .product-card__aside, .product-card__footer, .product-card__body, .product-card__btn (až v ňom <btn>) – štýlujem len vnútro, aby som následne komponentu mohol umiestniť do listingu, banneru, hocikam bez toho, aby ovplyvňovala okolitý svet (no margins just paddings) – parent sa postará
  • Modifier – .product-card–secondary, .product-card–small
• JS:
  • product – object, ktorý dostanem a pracujem len s ním, nemením ho priamo, ak potrebujem niečo povedať okolitému svetu použijem eventy (nie product.amount = 99 ale @update-price) – parent sa postará

• Atomic design lego rozmýšlanie nad dizajnovaním, naming-om a programovaním od menších jednoduchších prvkov po komplexné systémy bez duševnej ujmy
  • TLDR;
    • Atoms
    • Molecules
    • Organisms
    • Templates
    • Pages
      
• HTML – vanilla, Vue/Angular, JSX, blade, Twig – templates
• CSS – SASS alebo LESS – lebo je to jednoduchšie a pomáha s browser compatibility
• JS – Vanilla (pure JavaScript), Vue, React – lebo komplexné projekty a jednoduchšie programovanie
• npm – lebo nevymýšľame kolesá
• Vite, webpack – build process – lebo browsers compatibility and speed
• FONTs – google fonts alebo import cez CSS, minimum- každý weight (300,400,700…) je ďaľší font
• localhost (name.*.odyzeo.com) a server – PHP: Apache, Nginx; JS: Node; Docker – all in one
• deployment – SFTP, push to deploy, pipelines, jobs

• DIZAJN sme za čias mýtov a legiend robili vo Photoshope, potom sme prešli renesanciou Zeplinu a momentálne sa nachádzame (2025) v dobe Figmy.
• Finálny dizjan neexistuje. Vždy sa bude meniť tak ako funkcionalita.
• Cieľ je px perfect výstup, avšak ak dizajn nie je px perfect hrozí katastrofa
• Vždy sa treba teda zamyslieť ak niečo nesedí, či je to lenivosť/nevedomosť dizajnéra – rôzne veľkosti, marginy, farby hocičo pre rovnaké prvky