Učím se HTML/CSS

17. 3. 2019 19:56:18

Napsal mjerabek;1517484
Nicméně můžete skutečně dokázat tu úsporu času nebo se vám to jenom zdá? Protože v realitě přece ty rodičovské prvky snad nikdo neopisuje, ne?

Jasně že neopisuje, ale musí se to rozkopírovávat, což zabere o hodně déle času, než jen zmáčknout enter :) A to ani nepočítám další výhody jako proměnné (například na barvy, breakpointy v responzivu) či předpřipravené mixiny.

Pokud by po mě někdo chtěl, abych napsal web v čistém CSS (neberme v úvahu že je to blbost, protože z preprocessoru také vyleze čisté CSS) tak bych to odmítl. Bylo by to pro mě utrpení.

17. 3. 2019 19:56:18

https://webtrh.cz/diskuse/ucim-se-html-css/strana/2#reply1391094

Michal Jeřábek

17. 3. 2019 20:27:31

Napsal Toliceek;1517491
Jasně že neopisuje, ale musí se to rozkopírovávat, což zabere o hodně déle času, než jen zmáčknout enter :) A to ani nepočítám další výhody jako proměnné (například na barvy, breakpointy v responzivu) či předpřipravené mixiny.
Pokud by po mě někdo chtěl, abych napsal web v čistém CSS (neberme v úvahu že je to blbost, protože z preprocessoru také vyleze čisté CSS) tak bych to odmítl. Bylo by to pro mě utrpení.

Určitě to zabere více času, ale právě trochu pochybuji, že o hodně. Záleží, jak to děláte.

Pro mě je utrpení pracovat s preprocesorem, přicházím pak o jiné zefektivňovací funkce: zejména live aktualizace změn* a označování vybraných elementů, což dělá v práci podle mého mnohem větší rozdíl.

Kdyby po vás někdo chtěl web v čistém CSS, tak ho prosím odkažte na mě :).

* Tohle už umí rozšíření do Sublimu, jenže to bych si zase musel přeprogramovat několik svých dalších rozšíření. A zase mi tam nebude fungovat live aktualizace HTML.

17. 3. 2019 20:27:31

https://webtrh.cz/diskuse/ucim-se-html-css/strana/2#reply1391093

Dominik Hašek

(12 hodnocení)

17. 3. 2019 21:18:33

Automatickou aktualizaci stránky v prohlížeči také používám, less soubor se mi automaticky kompiluje po uložení, následně se provede reload stránky. Co přesně znamená to "označování vybraných elementů"?

Já bych tomu preprocessoru dal šanci, neznám nikoho kdo by to chvíli používal a následně přestal.

17. 3. 2019 21:18:33

https://webtrh.cz/diskuse/ucim-se-html-css/strana/2#reply1391092

Michal Jeřábek

17. 3. 2019 21:27:16

Napsal Toliceek;1517515
Automatickou aktualizaci stránky v prohlížeči také používám, less soubor se mi automaticky kompiluje po uložení, následně se provede reload stránky. Co přesně znamená to "označování vybraných elementů"? Já bych tom preprocessoru dal šanci, neznám nikoho kdo by to chvíli používal a následně přestal.

Takováto aktualizace je úplně něco jiného. Jde o to, že bez ukládání a reloadu souborů se mění CSS/HTML v prohlížeči. Takže například měníte barvu pomocí color-pickeru a vidíte jak se to projevuje na stránce. Nebo se potřebuji podívat, co udělá nějaká změna animace, tak ji zakomentuji -> odkomentuji a automaticky se to spustí třeba ve dveceti oknech najednou. Nebo prostě měním velikost písma, odsazení apod a všechno je to naprosto realtime. V HTML také můžu třeba kliknout na element v prohlížeči a kurzor se přesune na příslušné místo v souboru.

Označování vybraných elementů znamená to, že kolem elementů, které odpovídají selektoru, na kterém máte kurzor, se vykreslí box ukazující, kde takové elementy jsou. Tedy teď to funguje tak, že to ukazuje border, padding a margin (box model).

17. 3. 2019 21:27:16

https://webtrh.cz/diskuse/ucim-se-html-css/strana/2#reply1391091

Dominik Hašek

(12 hodnocení)

17. 3. 2019 21:53:53

Máme každej jinou work flow koukám. Já si vždy navrhnu HTML strukturu nějakého bloku stránky, následně napíšu CSS (v lessu či sassu) a poté se jen ujistím pohledem do prohlížeče, že jsem nikde neudělal chybu. Dělám tedy weby vždy oproti grafickému návrhu, takže pokud vím co píšu, vím i jak to bude vypadat v prohlížeči. Je tedy pravda že to přišlo až časem, ze začátku jsem potřeboval také po nakódování každého elementu vidět online, jestli jsem to udělal dobře. Nicméně to poměrně brzdí práci, alespoň z mého pohledu, proto jsem se učil metodu "code in the dark" a po čase si člověk v mozku udělá takové vlastní vykreslovací jádro :-D

Chápu ale že pokud toho člověk potřebuje, výhody psaní v preprocesoru se tím částečně mažou, protože kompilovat po každém zapsaném pravidlu není opravdu dobrý nápad a oproti psaní CSS by to bylo asi i pomalejší. Paradoxně ale neznám osobně žádného frontend kodéra, co by psal čisté CSS.

17. 3. 2019 21:53:53

https://webtrh.cz/diskuse/ucim-se-html-css/strana/2#reply1391090

Jan Stejskal

(7 hodnocení)

17. 3. 2019 22:48:23

Napsal mjerabek;1517518
Takováto aktualizace je úplně něco jiného. Jde o to, že bez ukládání a reloadu souborů se mění CSS/HTML v prohlížeči. Takže například měníte barvu pomocí color-pickeru a vidíte jak se to projevuje na stránce. Nebo se potřebuji podívat, co udělá nějaká změna animace, tak ji zakomentuji -> odkomentuji a automaticky se to spustí třeba ve dveceti oknech najednou. Nebo prostě měním velikost písma, odsazení apod a všechno je to naprosto realtime. V HTML také můžu třeba kliknout na element v prohlížeči a kurzor se přesune na příslušné místo v souboru.
Označování vybraných elementů znamená to, že kolem elementů, které odpovídají selektoru, na kterém máte kurzor, se vykreslí box ukazující, kde takové elementy jsou. Tedy teď to funguje tak, že to ukazuje border, padding a margin (box model).

Jak se ten addon jmenuje prosím?

17. 3. 2019 22:48:23

https://webtrh.cz/diskuse/ucim-se-html-css/strana/2#reply1391089

Michal Jeřábek

18. 3. 2019 08:52:22

Toliceek: Já jsem právě na tom celkem dost závislý. Ono je sice fakt, že člověk má pak tendenci se dívat na skoro každou změnu, ale zase to šetří kognitivní sílu. Jinak se ten postup asi zase tak neliší – nakóduji si nějakou sekci webu v HTML a už přitom v hlavě vím, jak bude vypadat CSS. Ve chvili, když ale píšu CSS, tak jsou ty realtime aktualizace naprosto neocenitelné, protože když to nedělá to, co jsem chtěl, tak můžu snadno zkoušet různá řešení. Ale nejužitečnější je to při jakémkoliv designování. Když si pak na samostatném monitoru otevřete 10 prohlížečů v různých velikostech, tak je to ještě větší pecka.

Jan Stejskal: Tohle, co tady popisuji, dělá editor Adobe Brackets. Pro Sublime Text a pro Atom (v beta verzi) existuje LiveStyle pro živé aktualizace CSS/SASS/LESS.

18. 3. 2019 08:52:22

https://webtrh.cz/diskuse/ucim-se-html-css/strana/2#reply1391088