 Neskávam budem rozprávať o takéj jednej téme, ktorá je v celku aktuálna, stále vždy bude aktuálna, a CZS-ko je tu už asi 20 rokov a stále ho veľa ľudine ve písať. Tak skúzme sa pozrie na to CZS-ko trochu inák. Nazvoval som tu prednášku, že modularný prístut k CSS. A dopredo sa mám osprávedl nemak vyzoran trochu vyfičaný, ale ako malo spánku je rovnaký učinnok to majak drogy. Vážne som malo spával, ale to obeznevadí. Takže dám pokus. Oby som rád, abyste do toho zapojili, pretože to, čo mám budem rozprávať, to nie je niečo, čo musíte fix nedodržiavať. Písať CZS-ko sa dá milión roznými spôsobmi, každý má svoje zvyky, ale možná niekedy dobre sa zamysleť na tým, či to robíte dobre. A možná existé lepší spôsoba, ako to písať. Tak ako som to zistili, ja časom, že zistíte, možná je byť. Dobre, to som, pojímám trochu o sebe. Ja rád, že kdy počúvam príbeji ľudí, lebo sú zájímavé, a mňa tiež dokázali motívovať a nakopnúť mnohých veciach. A som 9 rokov pracoval ako windows engineer, architek, windows server engineer, architek pre apečko. A tak som tam riešil strašné technologie, veľké veci. Veľká zodpovednosť, hej? Tak som som zodpovedný fakt za technologie serve, kde čo ja viem od nich záležalo, či vám z Rotterdamu odpláva loď, alebo či z ožem neví odletia, ale je to dlá, hej? Veľká zodpovednosť, to celku halus. A keď mám ráno píšu nejaký típci, že nefunguje celá sajta niekde v Kolumbii, a potom o tyždeň sa dozvete, že tam prišli nejaký partí za nejaký típdo a celé to zabudne zhabali a už iba došli fotky, že to už je ich, že máme zabudne na nejaké servery, hej? Čiže takéto príbej za tam ďali, ale v záslede toho celku zájmaviť job. Okrém tej zodpovednosti tam bylo veľmi veľa technologii, strašne, ale som sa naučil o ne len windows server technologie, ale hlavne o tom, ako fung de TCP, IP ceľa si jeť protokol, sústava protokolov. O tom vlastne na čom je postavený intern. Ja si osobne myslím, že veľa ľudí má s tým to problém, veľa nedostatkov, hlavne tých webdesignerov, každý si robi webby, ale nikdo poriadne nerozumie tomu, ako to funguje. O konca veľa adminov sa žívať, ale nedostatkov fyzický tých serverov, hej? Čo je smutné. Ale akož pracovať s tými neálepším technológiami je faktku také technologie, čo na Slovensku nikdo aníľa nemálo, bo si hne nevedia dovoliť. Ne to fakt super. Čo je ale problém, potom nastal, že tých rokov som brutálne vyhorel, dál som vypovede, a ješel som na 3,5 roka cestovať s prestávkami. Alek som robil šejaké chujoviny, rokov som ještruktor a potápenia, to bol super. 8 mesiacov na Islandie a cestile Rusko v Lákom do Číny, tam ma zatklí. A tak proste rovite si, proste som si užíval žího 3,5 roka, hej? A počas toho 3,5 roka som ale nezastal stáť, ale začal som zaujnať webdesijnu. Ale ma to strašne ako tak láko, a tak som začal dŕtid learn to code, začal som dŕtid javlkole kúrzy, hlávne webrebel kúrz a tak som sa pomali prepracovať vlastne až k tomuto. A potom keď som sa po 3,5 rokoch nejako vrátil, tak som začal hľadať job a tu to, môj ševluki tu sedí. Halanis LJ Studio Creatives mi dali šancu, aby som sa úpladil, som to vtedy nikdy nepracoval ako frontend, ako čo bola Halus je ten systémový inžiner ale Halanie mi dali šancu, začal som kodiť vlastne ja neviem či sú spokojný, asi Janok ke tam stále som. Takže podstatie cestovanie mi dalo niečo, dalo mi ten webdesijn a začal mať návzajne skutočne báviť koniečne opäť nechodím do roboty splesly, ale chodím do roboty značením na poriešime zajímavé projekty to je jednoj časme sedeli robote do polieň do rana, obet mi to nevadí, pretože ma to baví, a tak som si uvedomil počest tých rokov dlhých že niekedy proste zaryskujte robte niečo, čo vás návzaj baví a uvidíte káma z to doťahne je to len v život proste niekán sa dostanete. Dobre, o čom budeme dneska točiť sú frontendové technologie nebudeme zachácať do nejakých jazikov frontend HTML, CSS, JavaScript JavaScript by nechávame a zostanem prítom HTML ku CSS ako sa budeme baviť či sú frontend jazí skutočný programátori ja si myslím, že ano častokrát fronten napisať frontend je oveľa ťažšie ako napisať backend je to oveľa viac z roboty a zobáče si to, že ten backend musí nejako fungovať máte programácii jazik nejakoto nakodite ale ten frontend prispôsobiť to na všetky zariadňa proste doľadí to do úplných detailov častokrát je to strášna strášna morda teraz častokrát začnete písať ten projekt a ešte ľaka znik upravuje design stále to znamená, vy to zase prepisujete a prerávať je to dookoľ a už si z toho nannerví ale v konečnom dosledku to dokončíte a ste hepilo to ste proste niečo vytvorili je to úžasné fungu, je to na každom zariadňi ľudiam sa to páčí máte nejaký instantný feedback a to je super ja si myslím, že frontend jazí sú programátori aj keď používajú len HTML a CSS aj keď to nie sú skutočné programácii jaziki čo je však problém toho frontendu je to, že ho dokážete písať milión roznými spôsobmi v tom back-endie ok, dokážete hoci jakýkod napísať tiež, povedzme 100 roznými spôsobmi vo frontendie milión roznými spôsobmi a dokážete to napísať úplne zle, úplne dobre alebo nekde v strede a preto, preto by som sa neskárad vám povedal vlastne ten modularny prístuk to by je takéto lepšie písanie toho frontendu a hlavne toho CSS čo ma prínvotelo a vlastne, prečo som bym sa rozvedal urobiť toto prednášku je to, že ja som do poslednej možno 2-2 po roka skoďil len sám robil som Wordpressi, skoďil som si feby ale skutočný pojnt u toho respektie prečo som si uvedal prečo písať frontend dobrej také dôležité bylo až keď som začal robiť v týme uchalanou hej, vtedy, príšlo toto písať sám, alebo tým hej keď robíte sám, sami a písať ste veby sami, písať ste to ako chcete lebo stočíte sami po vse veby chlúdne, akože budete to upravať večinou písať som, že možno nekdo popáro ako to po vás preberie a ten si bude búchať potom hlávou ostôl ale ak robíte trošku komplexnejšie projekty ak robíte v týme, ak výste ten čo písať ten frontend a kolega po vás bude k tomu písať backend pretože pokiaľ nepišete náhovno tak robíte veľký problém výravať a veľa problému o tomu svojom kolegovi a to sa presne stalo mne hej, ta dlhodoba údržba kódu, ako taká, je naozaj komplikovaná, hej, ako som povedal CZS-ko je tu 20 rokov stáleho večšina ľudí nevypísať a čas to kraj CZS-ko če, to je také paradox ne ale CZS-ko býva ta najstrašší najstrašší, delnejšia čas kódu hej, pretože v tom býva obrovský bordel na to CZS-ko potrebuje tiežšie nápova dnejaký jávaskryp zrazu zistíte, že to vôbec nejé také ľahke, hej, ta reusabilitý, že častokrát sa opaký obrovské hnóstvo kódu, častokrát je všetko urobené takto, hej čiže ano funguje to prečo ne, výzerá to, ten klient nič nesprá, ten klient to nerozpozná je stále to bude výzeráť rovnako ale prečo by to nemohlo byť urobené dobre a keď sa na to pozretie o 4 roky je to dobre a stále byte vedieť prečo si to tak napísali lebo idete jednoho cesta a používať jednú metodoloviu a to je dôležité voľakají točišto bol také, že to bol také striktne dielenie, hej, že bol frontendiácii, backhandiácii a každý si išiel svojho cestov dneska frontendiácii už sú tiež programátovia začíneho sa pýta také dobre otázky hej, také te programátovské a preto sa aj vlastne do toho CZS-ka začína tlačiť ten modularny prístup obiektovo orentovaný prístup do CZS-ka dobre na to, aby sme mohli vlastne robiť ten modularny prístup CZS-ku tak potrebujeme samozrejme saz hej, čo je to ten saz saz je... saz je da sa povať CZS-ko na drogách je to nejaký extension language je to nejaký roširujúci jazik pre CZS-ko CZS-ko 3 dokáže toho velás používať jeho všetci to viete veľmi dobre ale veľa veci stále, neviem a zľadom na to akým tempom to ide, tak najbližších 10 rokov to ani vede, nebude hej o chvíľku sa budeme baviť o tom, čo to mu CZS-ku samozrejme chýba ale už aby sme mohli vlastne využivať všetky te programátovské veci je v tom CZS-ku vznikol saz saz je naozaj úžasný jazik vajárnol, si to myslí dobre, ak sa chcete naozaj dozvedieť o sa se veľa chote na learn to code ja bol ko tam má brutálny kurs to sa si takmer všetko je to naozaj veľmi, veľmi dobrý kurs ja som v nim prešiel všetko veľkovej kursy sú dosť haluzné takže jedno značne mám ho odporu ča mystú nezba prejdeme nejaké také základy základy, čo som sa naučil sú dve veci na tom kursie prvá, dry, hey, do not repeat yourself to znamená, snašne sa písať o CZS-ku tak, aby ste sa neopakovali čo je pri CZS-ku dosť ťažké pokiaľ sa len to nezamyslite že budete len kodiť, kodiť, kodiť tak zravo zistiť, že tam opakujete strašne, strašne veľa kodu koješom dôslutku, ak máte veľký projekt tak to spomaluje veľ te dlžky čítania sú naozaj dlžky načítania, všetko so spomaluje tým, že nemáte efektívny kód druhou vec, ktorú ma ja bol ko naučil je že kód má byť jednoduchy ale nemusí byť najkrajší tam sa úplne nedná o to, že tu byť úplne e-no-no-no-tupu kod je jednoduchy, že kto kolek sa ho chytí tak mu bude rozumieť tomu kodu to sa presne stále mne uchala na unakodil som veb bol som som s ním úplne fronten bol som s toho načinil, dal som to peťový kolegov je tam mňa pozerať, že čo to je a prerábali som neto a poviem vám za chvíľko e-bo tom, že prečo dobre, čom je dobrý ten sas prečo je ten sas taký strašne super je tam veľa veľa dôvodov prvá vec je preprocesing pochopil ako funguje ten sas ako som prišiel do tohto ja som vás nevedil čo je to sa ako to celé funguje tak som si o tom náštudoval o tom jazyku ale stále som nevedil čo z tým ďalej vaš browser rozumie HTML rozumie CSS natívne ale vaš browser nerozumie s CSS čo z tým vy potravujete nejaký software a ktorý vám skompiluje ten sas aby vygrcne z toho proste číste CSS ktoré muž browser bude rozumieť a tomu sa hovoria compilery máte veľa veľa compilero môžu to byť prejámo od sasú z to command linehové nástroje ja môj úplne na oblúbeniejšie code kit code kit je aplikace čisto premek neexistuje to na windowsi ale je to úžasna unikátna apka ktorá vlastu vám beží na pozadí a ona automátský keď uložíte ten code v tom sasujom a to skompiluje a vygrcne vám CSS a to CSS už si námapujete vo vašich súboroch a všetko vám funguje okren to jedna z veci ktorú to dokáže samozrejme ten code kit to je aplikácie na druhach fakt že silný pogáľ do poznáť ktorú to pozná tak vie code kit vám robi aj lokalny nejaký web server dokáže vám robiť to, že vyvíjate u sebatu web stránku všetky broustry vrátne môjho mobilu vrátne vrátne všetke o čo vám pootváhrane všetko sa robí automatický batým že som sajvol jedno CSS alebo jeden sas čiže je to vážne super vec okren toho to kompiluje všetky jazyky ktoré asi existujú odporúčam, nie je to za darmo stojíte asi 34 dolarov ale sú to najlepšie investované peniazé aké som asi kedy dal a samozrejme teď softwareho tento je ale môj taký oblúbený hej čiže musíte mať nejaký kus softwareu ktorý vám skompiluje ten vaš sasový kód a vygrť nevám to CSS to je jediný problém, keď to to máte, fungujete to čo chyba v CSS už dlho sú premené toho potreba je úplne káždý základne úplne potreba kde to ja pocitem najemne z hlavne pri velkých projektov sú farby tisíc krát sa mám opak premené a tú premenu nám má povať všade úplne rád herná jednoduché riešenie samozrejme te premené sa dajú použiť na úplne všetko môžte tam používať polia môžte sa múkladáť zoznamy fontov čo len chcete naozaj premené úplný základ toho toto je doskontrovers na témach hlavne s tým oxygenom o ktorom budeme sa bávit v náranie kodu tak ako máte HTML hej, že máte nejakú domovu máte nejaký header, footer nejaký main, v rámci toho máte sekcie máte nejakú strukturu stromovu hej, toto v cs zesku nie je, a chýba to tam dos brúthálne to znamené na to, aby ste si vyvedeli robiť nečo takéto to znamené, že mám nejakú hlavnú trynu mám nejaký navigation v rámci toho mám nejaké ul i a toto napíšete v sase a v konečnom dôsledku vantový kompilo je do nečoho takého čisté cs zesko tak prevaze jednoduché keď to štrukturujete a robíte si proste v nárate ten chod do seba je to oveľa prehladnejšie s týmto ale vzniká obrovský problém ktorý sa stál pri tých prvých projektoch keď som začal používať sáze mne a to je to, že ľudia sa dokážu zblázni do toho vnáraňa to znamené, že o nejakú keby začnú replikovať tu HTML štrukturu kompletne do cs zeska če úplna blbosť, hej, lebo zrazu zrazu bojete mať nejakých 10 úrovni sa v noríť a v tom sase to vyzera super kopíro je to vyzera tak HTML až na to, že vám to bude grť sa takéto selektory hej, a to nie je dobré to obeznenie je dobré, nejení to prehladné nejení to moc použiteľné a predostre má to dávať pozor preobecné odporúčanie s tým nestingom je, že ano používajte ho, ale chote tak 2-3 levely maximálne do hlbky úplne 4 to už je úplne maximálne ako je vzistuje a čiže na to dosť treba dávať pozor ten oksýdžen, ta metodológia oksýdženie presne o tom že ona úplne ide proti protivnáraniu, že naozaj používá maximálne 2 levely, pobezno ne používá čiže pozor-pozor s tým nestingom dobre, ďalšia veľstora je sa naozaj dobrý, sú takéto neparšels to sú nejaké parciálne súbory to znamená, že nepišete jedno strašne dlhé cese súbor, ale všetko si rozkúsku je to tak znamených parciálnych súborov te parciálne súbory majú také špeciálne meno, že začínajú pod čiarkovníkom a potom v hlávnom súbor si ich na import je to znamená, že závinať import a oni automaticky pri kompilovaní ten compiler z nich vytvorí jeden súbor to znamená, nie je to tak, že to funge že je tam viac nejakých HTTP requestov jak funge klasický import, nie kompiluje do jedného ale z vážnou pohľadu, keď to chodíte je to veľmi prehľadné, pretože to máte rozdelané a možte si vytvorí, ja osobně napríklad tie paršelsúbory vyrabam na všetko mám zvážná farby, navigation, na futér alem na čo ještia mixiny o čom za chvíľku budem hovoriť hej, či na čekolek si možete vytvoriť tieto na batoní a podobné veci všetko máte pekne oddelené potom je tá import direktívá povodil, že vlastne možete si na importovať ako keby tie veci, ne tam žiadne, tie HTTP requesty tam nevznikajú to znamená, že on sa to celé výkompilú ešte uvaz a vzniká cssúbor ďalšia vec, ktorá strašne chýba v cssku sú práve tie mixiny sú práve funkcie hej, niečo, že si napíšem nejaký kús kód môžem tomu poslať nejaké parametry a ono my to niečo vrátí sa ako taký podporuje aj funkcie, aj mixiny toto je príklad napríklad z webu priamo z osasu možete napríklad náhadzeť keď máte predpony možete vám to samozrej robiť autoprefixer, ale možete sce urobíť aj sami vytvorím sa nejaký mixiny dám tomu nejakú premenu a prosti to iba použijem include, border radius, parameter a te celé výbavene a kompilé už to vykompilo je do nečoho hen takého ja osobně po napríklad použijam mixiny to znamenie, aké do webu importujeme fonty custom fonty takto robíme presne tak, že si ich skonvertíme do všetkých formátov hey do svdg kvô v dvojky a potom chcest fontwise importujeme ale aj sme dne museli stále opako do okola to jisté tak si proste vytvoríme jednoduchý mixin ktorému poviem, že tu máš font má takúto hrúbku čo tam ešte nejaké parametry proste eba závolan ten mixin a poviem mu, že tu je font výbavene a je to výbavene takže dá sa to naozaj na rôzne veci použí mixiny sú naozaj supervec takisto potom je extend extend je opäť nečo veľmi podobné napíšem si nejaký kus kodu ktorý sa mi pravidelnie opakuje je úplne jedno, niečo čo by ste použili v oviacerých trieda alebo selektoroch tam použen directivu zaví na extend meno toho kusu kodu jak som sa to pomenoval a on to všade vykompiluje a pridáto že nemusíte to opäť prepísať jednoducho prepisujete to na jednom mieste a to je celé a potom samozrejme operátory hej bavíme sa o matematických operátor možť roviť všetky operácie plus, minus ďaleno čokolek možť to roviť aké kolek výpočty ten compiler to spracuje vygrcne vám csko, vygrcne vám finálny súbor rozširuje to csko a dává vám tu funkcionálny tu ktorú nemáte samozrejme, že večinou z týchto veci na dené báze asi používať nebudete úplne jedno použite len te základné veci ja večinou používam te mixiny používam te parciálne súbory premenné a to úplne stačí zlak čo je mi to tú robotu je to prehladné kdo kolek sa na to pozrie dáva to zmysel jediný problém s tým to si potom dávajte taký, že a to vlastne vás ani mozne vplyvne aleby vlastne vždy nechávajte prí tom zdrojevom kodem aj samozrejme ten SCSS súbor oň má u koncoku SCSS dôvod je ten, že ak tam nechatie cs a niekto po vás to upraví tak vlastne upraví ten finálny output ten to vygenerované csko a vy ste skončil lebo spetne 100 csko už nevygenerujete csko čiže vdy tam nechatie csko keď to niekto edituje to SCSS ko vykompiluje to a zase máte správny súbor dobre otázka teraz dne toto je všetko pekne ale prečo používať nejakú metodólogiu pri písani toho csská a čo je to vlastne dobre asi najlepší dôvod je ten, že my sa tým programovaním živíme, čiže mali by sme to písat dobre pre mňa to najdôležitejšie je ta práca v týme pokiaľ to robí, ako som povedal robíte to sami, robte si to ako chcete ale v momentie ako začnete pracovať v týme také strašne vôležité aby ste followovali nejaké nejaké vzorce aby každý používal to isté aby ste jednoducho boli na tej isté lájne čo je to vôležité skôr či neskôr niekdo ten chod po vás čítať bude či už to be o rok, o dva lebo o týždeň niekdo to nejako prečítá niekdo to nejako pochopí niekdo to možno ani nepochopí ak ten kód máte napísaný zle a potom jest toho celko veľký maglájs a projektori mohol aj byť vyzera dobra a byť dobrý je zrazu úplne zlý aj je dosť neudržateľných z dlhodobého hladiska dobre preto vznikal ten oxygen všetko čo vám poviem je na oxygen c z zbotka kľudne si tam chodíte, pozryte si to aj príklady, ktoré vám budem hovoriť sú odtial je to nejchalan, ktorý sa volá, že chala nisko sa premyšel na tým ako písa teda to c zesko dobre a v zásladie existuje veľa metod podobných tomu oxygenu napíklad BEM učitevnou jich z vás poznajú BEM dosť teba počiarkovníky, to neznášam tak on tiež neznáša preto si vyrobil vlastnuté metodólogiu existuje nejaký o, o, c, z alebo nečo hej, tých metodólogii je viac jemu nevyhovala ani jedna preto vytvoril nečo vlastné ktoré sa chápali, to nejení nejaký jazíganí nič, to je len spôsob akujem pomenovávať tie triedy ako pomenovávať to c zesko ako ho písať hej, môžete robyť ako kolekcete môžete si stoho zobrať jednu vec môžete si to zobrať celé, to je absolútne na vás hej, oni by prišiel z niečím čo dáva naozaj zmysel dáva to logiku a ako celok to naozaj funguje v kope hej dober, preto sa tovala o2 oxygen pretože o2 je ako o, ako object oriented či celku zájemové, tak halos takže a o c zeské už bylo zabráce tak si pojela, že to by bolo o2 dobre čo je to ten oxygen je teda objektovoyorientovaný prístup c zesku, hej, je to metodológia ten jong on si položil takú otázku keď sa na tým zamyslite, hej dva typy programovania, štrukturované objektovoyorientované vyžijeme v objektovom svetie všetko okolo nás sú objekty tak preto, čo te objekty nepoužívať e v c zesku preto, čo ten prístup, ktorý sa používa všade v programovaní, preto, čo to nedotlačie do toho c zeska, čo a v zásade má absolutnú pravdu, hej všetko okolo nás sú objekty, hej pohárstvo, stolička, notebook, čokolek všetko sa dá charakterizovat ako objekt a presne to isté viete urobiť aj s tým webom, dostanete design, aby ten web viete rozkúskovať na časti to je navigation bar, to je footer všetko sa dá výrobiť ako objekt pojňtol tých objektov je, že sú veľmi krásne znovu použiteľné, hej cielom, prečo používať je to metodológie je to, aby ste mali čo najväčšiu znovu použiteľnosť toho kodu aby ste sa neopakovali aby ste čo najmenie vjazali ten kód na kontext hej, preto, že ten kontext sa môže meniť, a moment, jak sa meni kontext tak sa mení aj celý váš kód snášte sa ten kód písať, čo najviac najuniverzálnešie hej, kde je to baton, tak je to baton hej, nebudem ho pchať niekde, nebudem ho pomenovať do konkrétneho kontextu je to proste baton, a môžem ho použiť hoci kde na vebe, hej, a tak hohaj naš týlujem to je teórie nevždy to funguje dobre, prečo to je noxigen už som vám povedal, oksigen je naozaj čista technológa, funguje to naozaj je to, uvidíte za chlopie, vám pomen tez akladné kamene toho oksigenu, prečo to prečo to je také čísté vyzerá to dobre matologiku uvidíte, dobre povedal som obiekty sú absolútne základným kameniam toho oksigenu, hej pozriete sa na hoci, ako apkú, čo vidíte hohoho, som header, tabi máte nejaký blok, tabo, máte nejaký search bar, ikoní, avatar, data grid a jednotku každá jedna z týchto veci je objekt hej, a každú jednú z týchto veci viem naštílovať ako objekt toto, by možno bol nejaké klasické písanie khodu, hej mám nejaký sidebar, do neho v noriu nejaký ul zoznám, potím ul mám nejaké elíčko potom nejaké elíktorie last shell a v tom elíčku mám nejaké A hej, toto si môžete písať, keď to robíte samý, vám to dáva, zmysel, všetko je ok znovu použiteľnosť toho je absolútne nulová hej, pretože to absolútne naviazané Alex, presne v sidebar, presne ul presne elí, presne A tamto končí čo je dôležité, kde som použiteť žiadné klasí, žiadné mená, žiadné objekty to znamená, že toto, keď potom pošletie bekenďáku, ako som to urobil ja toho mu peťovi, tak ten sa na to pozrel a vlastne hodinu lúštil, že že som ti myslal, hej ešte, ako máte oveľa zložitejšie to menu predstavte si, že tých zoznámov ul tam máte viac, predstavte si, že je jeden ul v rámci, iného ul zoznámu je tak komplikovať, aby musíte premíšlať ok, je tam šipka, nie je tam šipka ako sa to celé na seba vyjáže hej, toto celé sa da oveľa krásne, prepíse do nečeho takého to nazvem to navigation vnútry budú položky, now item v rámci now itemu, mám nejakú poslednú last child, a v rámci now itemu mám link, hej to znamená vám now item link zrazu, už na to poď sa pozrem tak o kam žiť to dáva zmysel je to objekt, mám navigation bar mám položku v rámci navigation baru a mám link v rámci navigation itemu a je to vyriešené celé to dáva zmysel, máte tam triedy viete to nám a povať na jake rina, čo kolego ste s tím ďalej pracovať pozriete sa na háté melko, spojí sa vám to dokopy, nemusíte to lúštiť možno pre niekoho je to to úplne normalne čo je super, hej ale verte mi, že pre mnohých ľudí to to normálne nie je, že prosto píšu tie strikné selektóry a co je na otej sa môr da s tím roviť a som to tiež robila, je to fakt zle dobre, tie objekty som také tri veci, hej je dlhé selektóry, vám predlžujú čas načítavania, hej čiže je tam oveľa väčší overhead na tým hej keď je to naozaj, že je to dlhé je to absolútne neprehladné a takisto ako sa vám povedal úžte sa premíšlať v objektu všetko je objektovou orientované svedokolonáziu objektovou orientovaný v súčasnosti alo väčšina a tým padom je to veľmi krásne použiteľné dobre, poďme sa pozrieť na tie základné bloky toho oxyđenu, hej, čiže máme nejaké objekty máme nejaké subklásy z nejaké potriedy, máme nejaké child objekty a potom máme modifikátory vstahu a modifikátory atrivu to zne to úplne zlé toto celé ale keď to uvidíte a pochopíte na pejkáde, tak je to strašne jednoduché hej, dobre, objekt jednoduchý objekt je button hej, máte proste nejakú triedu na zojmeju button a nadefinujete všetky všetky propretistore potrebujete máme nejaký button toto možete bytvorici aké kolego objekty naozaj keď dostane ten design zamyslíte sa na tým pozryte sa na neho skúste to rozložit na objekty celý ten design rozložite na objekty preti mnež začnete manuálne asi, opäť mám nejaký button ale chcem modrý button tak nevujem chodíť znovu celý modrý button ale nazvujem si, že budem mať stále tu triedu button ktorá mi definuje celúto štruktúru do toho buttonu a pridám k tomu nejaký subclass nazvujem ho, že primary button a to budem modré ale znamená, že aby som dostal tie dve tlačidka mám proste button primary button a to je celé možete si vytvoriť takých modifikátor Child objekty je napríklad keď chceme vytvoriť button s nejakým keredom čo je ta rozbalovacia šipka tak normálne si vytvoriť ďalší child objek, ktorý nazvujem button carrot, nadefinujem múšetky vlastnosti, hatejmal štruktúra bude vyzeráť nejaká takto budem mať hlavnú triedu button v niej budem norená nejaká child button carrot, ale opäť sa bavíme o tom, že ta rodičovská trieda sa volá button carrot, to znamená, že okamžite z toho vidíte, že to ma súvislo, že to k sebe patrí mohol by som urobiť to, že nazvem tu rodičovskú button a tu podňou iba carrot ale začína to stráce zmysel ale už len tým prvým pohľadom z razu ten carrot môže patriť k čomu kolek, obzlaž, ak by ste o použili na viac objektoch, pod sovom vašom dizajne, toto mám dať o veľa väčších zmysel okamžite tuho to nie je dobre vidieť, ale tento button je ešte taký modrejšý je mne, to znamená že mám nejaký modifikátor stav, ktorý hovorí, že isselected to znamená, že modifikujem stav toho buttonu, opäť mám button a poviem mu, že ak si označený isselected, tak maj taký to design čiže zase dostávam dostať na to, aby som zmodifikoval stav, použijem takú to menu convention a potom ešte nejaké modifikátory sa používa bootstrap, absolútne pozná hey, bootstrap má tomto je založený vytvoríte si triedy, ktoré sú veľmi špecifické na konkrétnú vec, napríklad float left, float right, a robia len tu jednu vec, a jednoducho na to, aby ste dosiahli niekde float left, tak proste aplikujete tu triedu bráne čistý bootstrap, hey bootstrap je pačo to takto robiet naozaj jednoduché napísanie tých trietsi samozre môžete vytvoriť kolko chcete tých modifikátorov je to veľmi prehľadné, veľmi lachko použiteľné a tu ná je práve ta tabulka, ktorá to celé dáva do kopy to znamená, že máte nejaký objekt napríklad button alebo menu je to podstatné meno na on, hey vždy je to podstatné meno, je to notebook je to auto, je to čokolek je to podstatné meno, názov objektu ten child objek opäť sú to podstatné meno, pomlčka podstatné meno, hey to znamená, že máme menu, item, menu, item link všetko sú to vždy podstatné meno tie subklásí už máte nejaký prídavné meno, pomlčka podstatné meno, hey napríklad primary button, primárny button alebo pop-up menu, hey vyskakoľacie ok. a tie modifikátory sú práve také, že máte isselected alebo scrollable, hey tamte pravidla nesú úplne striktné ale zásadie sú máto, aby zmodifikovali ten stáv a to je celé, to je celý oxygen, hey pojete si, že to úplna zprosto aleby si boli prekvapený, že väčšina ľudí to vôbec nie robia, vôbec to takto nepomenováva a keby, že keby, že všetci píš videálne ten kód a robia to tak, to, že dodržiavajú takúto veľmi jednoduchú vec tak zrazuje ten svet krajší, hey niekto vám dá ten kód a vy sa to pozriete, ja okamžite tomu rozumieť, je to preto, že to proste dáva zmysel to je nejaký príklad aby sme to nejakos vhrnuli, hey máte nejaké navígačne menu dorem máte nejaký footer, hey opet je tam nejaké navígačne menu v právo vlávo v strede máte nejaký obrázok nejaký surgebok za dva batony, hey celé to rozoberať nebudeme, ale v zásade tá hátémelštruktura je veľmi jednoduchá máte body, máte header máte footer, mezi tým máte nejaký ten side search, hey súper jednoduché a presne toto je použité tej oxygen metodologii mám side header, mám side search tu z toho vidíte, že vôbec nie potrebný ten nesting, hey aby som to celé mohol v nori do seba ale ja to vôbec nemusím robiť s toho dôvodu, že všetko má veľmi špecificky povedanú triedy, hey je to side, side header, side search side footer, tým pádom všetko môže byť ako samostatná položka a tým pádom vám to negeneruje keď to scele skompilujete v tom sase tak vám to nevygeneruje dlhý selektor, hey nebuje tam, hey side, medzor, side header bla, bla, bla, tak ďale, hey vám ostatné triedy, tým pádom je to krátké je to rýchle to isté napríklad, keď sa pozereme na ten footer, alebo aj na ten navigačné menu, hey máme nejaký blog now to je nejaký ulkový zoznam v rámci nieho máme nejaké itemy a v rámci tých itemov máme te item linky opäť veľmi jednoduché keď sa pozereme na to v cezesku opäť blog now, blog now item item link, a potom máme status je kej focus hover a podobne a a that's it dobre pozrieme sa na toto ešte sú tam určite také súvislosť nejaké paterny v tom oksidženie, hey ja som to začal používiať a samozrejme v momentie vznikli otázke opovejte si, že toto sú dosť jednoduché príklady, hey ale keď začnete naozaj chodit nejaké zložite ešte design, bojete máť nejaký ja neviem price box, hey a v tom boxe máte nejaký header a máte nejaké body, nejaký footer a začnete sa proste vnárať vnárať, vnárať, vnárať, hey že čo s tým? ako k tomu prístupiť toto sme si už povedali, to som aj vysvetlil že oveľa lepšie povedať button a button card, lebo van to dáva zmysel, nedatejiba button card, hey, pretože kared môže byť použ ty niekde ide a proste prestanie to dáva taký jednoznačný zmysel že problém je toto, že máte parent parent child, parent child grandchild grade grandchild, hey to už sa to začína komplikovať lebo už začína tie ma tých norení oveľa, oveľa viac aký prístup zvoliť vtedy búto môžete urobiť tak, že menubar, menubar item menubar item menu menubar item menu item to už naozaj ako dos hardcore a začnete sa v tom strácať čo tým to chceme iba povedať, že máme nejaké menu v rámci menu máme item a ten item ma ďalšie rolovácie menu, hey to je celé, čo tým chceme povede že len to tak je to dosť nepoužiteľné mesto toho, to môžeme veľmi krásne rozdíli, to znamená, že to hlavný menubar, bude menubar a každa položka bude menubar item a tie podmenu submenu vysuvať je, budu menu a menu item a opäť máte to oklásované viete presne čo čo znamená nemáte tam žiadne nestingy nemáte žiadne komplikované mená a je to prehľadné takisto tu máte potom nejaký prefix prefixový pattern, hey že nečo potrebujete oprefixovat tak tomu proste dám nejaký prefix všetkému, tým padom viem, že to k sebe patrí čo nevýhoda tohto celého a to už možno aj z niektorí z vás pochopili je ten overhead na html začnete zrazu použiat strašne veľa triet v html to znamená, že to html je dlhšie je väčšie, je pomalšie ale na oplatku dostanete čistiejšie čistiejšie css dostanete oveľa krajšiu znovu použiteľnosť to znamená, je otázne, že či je to nevýhoda a no ten kód sa predleží, všetko by je oklasované ale v končnom vosledku dostanete nečo na viac takže ja by som to nebral ako nejakú nevýhodu úplnú a či sú tam nejaké pravidla v rámci tohto oxigenu to už som hovoril ta dry methodology snašte sa neviaza to čo píšete na ten kontext snašte sa to písať čo najuniverzálnejšie lebo te dlhé selektóry veľmi špecifické selektóry znižuje to ten performance opakujete kód je to úplne zbytočné keď nečo začeníte meni tak to musíte kompletne celé prerábať teraz ak máte príli špecifické selektóry na to naviažete jQuery teraz sa vám to celé zmeni tak musíte zmeniť aj to jQuery a čo je ta reusability hlavna pointa je aby ste dokázali objekty použiť v akíkolech podmienkach jasne, že on to nevždy idie niekedy povedzme máte osem rôznych typov batonov aj to sa môže stať vtedy musete premysleť ako na to či má zmysel vytvárať nejakú jednú univerzálnú triedu jeden univerzálny baton potom ho modifikovať alebo vytvorím osem rôznych tried o tomu, že sa tam budú opakovali určitej veci alebo použijem niečo iné ako tam extent hejt direktívu z toho sa sú nie vždy sa to dá aplikovať každý projekte iných, niektor projekty sú naozaj komplikované prájem niektor projekty sa menia zajazdy to je ešte horšie, keď musíte nečo fakt prierávať zajazdy že už to máte nejak na designu ale teraz sa tam po designu zmeni a viem to pozoráte, čo sa tým ďalej že aleboho stáva sa teraz nejakéto celé použitele na WordPress toto veľmi špecivický závisí všeobec sú nejaké vaše náviki ktoré by ste mali mať je to úplne jedno, či kodite WordPress alebo nie kodite WordPress mali by ste písať pekný kód v tým WordPresse to ale veľmi veľmi závisí o to čo robíte ak máte komerčnú tému, ktorú modifikujete a nekdo iného napísal hold to by asi veľmi ťažke použiť ej, vtedy proste zobrajte tú tému a zmodifikujete v tak, ako to potrebujete keď píšete vlastné témy máte volné posobisko píšete si vlastnú tému úplne z nuly robte si čo chcete, napíšte si to, jak ho chcete odporúčam tou metodou hej, to znamená, že na ten WordPress ano, môžete to použiť ano, nemusíte to použiť, právim veľmi to závisí od toho že ako je to úrovené celé, aký projekt robíte malé, nemá zmysel písať celú tému od nuly, niektoré projekty sú práve práve veľké, tam už sa oplatí investovať ten čas do toho a spísať to úplne napísať to celé od nuly hej, takže takže asi toľko, to je šepko tak kúdiem sa pítajte no, toto je ta vec na tom, že ja osobně nemodifikujem WordPress v tomto hej, nemá zmysel modifikovať ten WordPress proste ten WordPress to robi nejako to má je úrobené, niektoré vece sú z historických dôvodov, možno niektoré ako brávný toto nebude používať každý, aj na to zabudnete používať je to len vtedy, keď to dáva zmysel, to znamená, že v tomto prípade používam to, čo mám že modifikovať WordPress golytom keď si uvedomíme, že by sme mali modifikovať každú jednu funkciu, ktorá by toto robila, vlastne ma zmysel, hej jasne, právim v tom WordPress je to komplikovanejšie ja osobně použijam Bootstrap ktoré ma skoro všetky projekty aj keď to nie použijáme, celý použijáme niektoré funkcjonálista nám je všetko hotové, prečo to nie použíte, poľa mňa Bootstrap je úžasné ja som rával, že presne aj te modifikátovi týchatry, to úplne to isté v tom Bootstrap to znamená, že ten Bootstrap dne, prečo to tak urobil, to naozaj dáva zmysel, dáva to logiku hej, takže určite, ano veľmi dobrá otázka ja neviem fag neviem založilo by to o toho konkrétného projektu ak by boli úplne rovnaké že by som možno lyšil vo farbáho, možno by mali aj farbu rovnakú asi by som vytvoriol niečo universalan tým panom by som porušil len to právidlo hej alebo ak by to nebolo nejaký, že extrémne veľa kodu tak by som možno napísal len prehľadnosti by som 4x pakoval ten hod že by som goli toho pomenovaniu že by som napísal zvláškare pre každou jedno použice ale skôr by som použil, takže universalnú trié do pretenkáren ale verovím, toto sa nedá použiť, nedá sa to aplikovat na všetku úplne universalne nedá sa to ani celé použiť úplne, že stoparcem je teraz mi to zapasuj na moj projek ako, že to nehrozi vždy to bude, vždy to bude nejaký kompromis tak, že sme takto škriávať hlavu, že jak to to urobiť je to fajný preto je ten frontden, podľa mňa o veľa ťaši, než ten back-end musíte niečo kreatívne vymysleť ako to celé nakôdi, tak aby to bolo dobre, aby to vyzeralo dobre hej takže jasne ja tie sasí samozrejme nechávam tie súbory pridložane v tej téme tam už vlastne ten kompiler vygeneruje tie csská a ja tie nalinkujem už potom v tej téme to znamená, že aj v tej v tej world presoji téme, ktorú si nakodin tak už použijam, potom tie csská ale vždy ich tam necháte, to je ten základ necháte tam tie csská aby niekto po vás proste to csskosobrá otvoril si to a vy kompiloval nové, ke tam urobiť nejaké zmeny hej, lebo to už sme tiež riešili to je presne to, že soberete projekt po nekom inak do to urobil niejako a zrazu zistíte, že jednúcho je len to urobiť tak druhý tak, tretí tak a už proste je tam nejaké csskó ale už tria ľudia modifikovali poňom iba csskó to výsledne takže to csského nie použičil nemôžte trochu nozmázať takže hej je to, je to takto na jednoduchšie a no čekaj, neviem, že to bol nie, nie, to bol ten toto je ono alebo toto chcíš? toto je ten toto hej? ešte ďalej ja je ten múgl hej toto? ešte? a jasne, viem čo myslíš toto a no a no a a a a a a a a no, jasne, opet v Rávin kompromisy, hej, môžš použiť hemto, niečo také to bojto to dávať väčší zvysel ja neviem, hej Brian je to také také nazváženie, že čo z tým ďalej urobiť jasne, tým môžš s tým urobiť alebo to ma sa v menu a sa v menu hej tam je tak kreativita, hej, v tomto dôležité je, že nezpravíte a to, čo bolo skomenu toto hej toto je nepoužiteľné viac toto je prosti kuz nepoužiteľného kodu a no, vyzerá to presne tak isto nevedete pracovať, jak by ste mali menu ešte niekde w offu 3 hej, tak možno to to už ani nepoužiteľne bo to v menu bude vyzeráť úplne jinak alebo bude mať inú funkciálne, tu proste s tými triédami to vedete použiť znova hej, a hlavne viete to naviaze na ten jQuery, viete s tým ďalej pracovať s tými triédami ďalej, hej toto je to krásto na tom čo je na tom nečitateľné je napríklad to, že predstav si, že by si mal v tomto ulku ešte ďalší ul zoznam alebo, že by to bol nám zreček komplikované menu, hej a mal by si ul v tom ul teraz nebo lebi to tak je to alebo mal by si tu takéto takéto properties, hej pred každý jeden a zrazu dostal by si, povedzme aj v tom sase takýto kod a vyznaj sa v tom a začneš to čítať to nesting, hej, že to v náranie hej to by si ďalej a ďalej akože, ano, dá ti to zmysel alebo si koder veš to kodi takže sa pozrieš na to a ano, pochopíš to, hej ale o veľa jednoduchšieho, boje keď to oklasuje daš tomu jednoznačným menu menu, submenu, hej a okamžite veš o čom sa tu bávim a nemusím to hladať nekde v náranie v tom kode toto práve vravím, že to napríklad o toho menu a ítemu že by si pridal nejaký span, hej ale to práve može spraviť a som hejš do toho menu a ítemu čekaj, je to tu nekde napríklad čo je len do toho nowa ítemu pridáš do vnútra tohto, do týchto zátorek ložižiba ampersand, čo znamená rodičovský elemen a to toho daš span, hej jasne, jasne jasne je tu veľa jednoduchšieho do vešte niečoho aby som z toho lepšiej klasov ale tým, tieto prejavne jasne hej no dve daj no dobré prvá prvá otázka je to osobná preferenciá hej, ja osobné nemám rád potržitke potržitke preto nemám rád BM čisto osobná preferenciá preto mám rád ten oxygen hej, je možno, že to v náša trochu jať zbordelú do toho hej, alebo že to nie je také jednoznačné preto vrávujem, je to čisto-čisto osobná preferenciá požívajte BM Oxygen je len niečo ďalšie opäť, jak v celom frontendem máte milióne jazyko vyberte si, že čo mám najviac výhovu proste, to je krása toho frontendu nači ste kaké tie druhé otázky ja v zásade ja mu poviem, že čo má vykompilať om používate štandardné kompileri aj keď je tých kompilerov viac, ja si vám vybram presne ktorý kompiler, on použije na vykompilovanie toho hej, presne ktorú library a presne uviem povedať, kam to má kompilovať a on si s tým projektom ten codekit napríklad má tam vlastní konfigura, kde to má všetko úložené to šerujeme v tíme samozrejme, ako niekto nepoúžíva ten codekit, tak sa dohodneme na tom, že oké budeme to vykompilovať sem, on si nastavi svoj túli a svoj túl hej, ale napríklad k tým, že my dospoužiamy Laravel, tak Laravel má nejaké pravidlanie, ako to funguje, vejme presne kam to vykompilovať, hej Laravel všetko robí na tým nečo vlastné a takže není to v záslede nejaký problém, hej? dobre, ale brane ten túli strašne dobrý, hlavne v tom momentie, keď som začal používať to, že on vám rozbeha vlastný lokalný web server a vy všetko developujete na tom web server to znamená, že ja uložím to cese, skoložím, háty, melko robím čokolvek na mobilu mám otvorený web všetko sa refrešne same, ten auto-refreshing je fakt brutálna vec ničo sa neotýkate, prosto nemusím sláči prosto všetko sa refrešne samo a to aj není, že full refresh to, ak ste si napríklad, že v Chrome máte otvorený developer túli, nečo si tam pomeníli a zménite nečo v cese sku uložíte to, on robí do parciálny refrešie to, čo ste si tam vy nadefinali developer, to to vám nezmizne hej, to na stále zostane, to na tom úplne cool takže to je fakt super no, a no hej, to som nevedil na príklad ale je čo? to používajiečko ne, nevedim ja si myslím, že toto je tuším aj Laravel robíť, ak si dobre pamietam hej, môžete samozrejne to isté používať Laravel tiež na príklad vám je takové, že mitrovujeme povedzme tým túlom ale v momentie, kde to uložím, Laravel to chytí a zmínifikuje to, roztredí to vôbec právne na tým miliónov operácii takže, a no, urobiť presný to isté urobiť aj tu samotnú kompiláciu takže, hej, je to osobná preferencia ja používam napríklad code kit môže mi to dáva ešte viadokrem toho hej, takže a hlavne to všetko testujem lokalne potrebujem níkam chodne, potrebujem níč robiť všetkom lokalne, môžem byť offline môžem sedeť kde chcem, všetko si vyvýjam moment, jak som online, púšním to na gýt a som vybavený, hej a jasne, hej, hej, hej vzra dobré, no volne to Microsoft ja už sa vyhyniam Microsoft ne, ne, ne, ne všetko uverziť v námegane šagáno, aj ofizm aj v námegane čo myslíš sublime ale prešel nadatom, ale to vyzerá doskutne alebo ten, akúž, videl som to vyzerá to fakt dobré, hej hej, ja som, videl som to vyzerá to dobré, veľa ľudí to chváli, keď to porovnali z o sublime alebo za tomu fakt je to dobré, akož som bo prekvapený, že Microsoft nečo také vyprodukoval, hej ale, ale bážne, bážne ľudia to chváli, aj takže hej, možno tomu šancu dáme no, bo to ešte PHP storm, hej, akúž že ten je vál čisto na PHP, keď sa je robíť, ne, ne, aj námegane verzia, ja aj mekova verzia, no tak, že tak ešte niekoľnáský, díkes mám