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
- TLDR;
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
- TLDR;
- HTML – vanilla, Vue, JSX, blade, Twig teda templates
- CSS – SASS alebo LESS – lebo je to jednoduchšie
- 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 (2024) 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