Jednostki CSS - px, em, rem, %, vh, vw ⌨️ hello roman #20

[@travisScottFan3]

Wiem ze data ale jestes jedynym youtuberem dzieki ktoremu zrozumialem rem i em dziekuje!

[@helloroman]

Najśmieszniejsze jest to jak ta wiedza ucieka i dzisiaj miałbym problem z tym żeby to wytłumaczyć przez obejrzenia tego odcinka 😂

[@basiorbb3]

Jestes mistrz. Chociaz sam to wszystko znam to jestem za tym aby eiecej takich materialow ! Nie przestawaj prosze

[@rafaklimek6527]

Pierwszy raz słyszę o vmin/vmax, zajefajny odcinek. No i sto lat Roman!!1

[@b3ncr0w]

Niesamowicie przydatny, porządkujący wiedzę materiał. Dobrze wychodzi Ci tworzenie kursów, oby było ich więcej.

[@nataliabubiak3862]

Ale odlotowo, mam urodziny w Dzień Programisty! dzięki za to info! Z resztą za całą resztę informacji - o jednostkach - też dziękuję!

[@bartosz7584]

Super! Oby więcej technicznych odcinków

[@filiphubertsuwik8209]

No powiem Ci Roman , im bardziej brnę w tego CSS tym bardziej doceniam te Twoje filmiki. Dobry odcinek.

[@Iifeisharder]

Super filmik. Masz wspaniały dar nauczania, wszystko na spokojnie i rzeczowo. Wielkie dzięki! :D

[@tomaszswiatek4612]

Bardzo fajnie wyjaśnione i dobry suchar na początek, dzięki :), a i fajnie że czasem napomnkniesz, gdzie stosuje się tak jak tutaj tego typu jednostki, bo tego czasem brakuje mi jako początkującemu :). Np. teraz zastanawiam się do czego wykorzystać vmax i vmin:). W każdym razie dzięki :)

[@alexv7619]

Takie ciężkie, a tak prosto wytłumaczyłeś, dzięki.

[@jedrzejkuszewski79]

.hello-roman { min-age: 100y; } !!!

[@helloroman]

Jędrzej Kuszewski piękne życzenia ♥️♥️♥️♥️ dzięki

[@ingloriousmartin4588]

Widzę też jesteś spod znaku Panny. Pozdrawiam! ;) Mam nadzieję, że uda mi się osiągnąć jako taki poziom zarobkowy w programowaniu. 100 lat!

[@darekmazurkiewicz8044]

Udało się?

[@krystiank9063]

Jejku! Naprawdę przydatny odcinek!

[@angie5792]

to tak dla równego rachunku (no i 100 to za mało ;) ) 128 lat w zdrowiu i szczęściu! :)

[@AB-bb9vg]

kocham Cie za ten odcinek! Oby wiecej takich uzytecznych i codziennych rzeczy, pomagasz bardzo.

[@Lokus122]

Genialnie zobrazowane, czekam na więcej technicznych.

[@stblny]

Kurka, widzę jak luźno Ci to idzie, ja zacząłem przygodę z IT 2 tyg temu i jestem na podstawach HTML i CSS, różne odczucia heh. Teoretycznie łatwe bo ogarniam co robisz, ale nie proste bo samemu to ciężko ;P

[@filiphubertsuwik8209]

Ale w 21:33 mówisz o artykule W3C który miał być w opisie a ja go nie widzę...

[@sedalski]

Jeszcze jeden całkiem ważny temat jeśli chodzi o 100vw i 100%. Wiele desktopowych urządzeń ma domyślnie widoczny scrollbar (w Macu jest on akurat domyślnie schowany, warto to zmienić w ustawieniach). W przypadku, kiedy ten scrollbar jest widoczny, to dla np. bezpośredniego dziecka roota width: 100vw ≠ width: 100%. Przydatna wiedza chociażby w momencie, kiedy chcemy użyć 100vw w kalkulacjach, a szerokości nam się nijak nie zgadzają ;)

[@Romek_S]

Ten calc mnie zadziwił :) Już za samo to plusik :)

[@riskzerobeatz]

Super, techniczne odcinki zawsze na propsie :D

[@FreshMediaProject]

Roman - może nagrałbyś coś więcej w temacie drukowania, ewentualnie tworzenia dużych pdf w node i react ? : ) Pozdrawiam

[@karoltrzcinski8171]

Wszystkiego najlepszego Roman! ;) jak zwykle petarda!

[@rasfael6156]

Świetny odcinek. Oby więcej takich

[@raygan3]

Super, bardzo mi to pomogło :)

[@space_hug]

Dzieki za odcinek i wszystkiego najlepszego! :)

[@ElementaryKnowledge3000]

Trafiłem przypadkiem, zostanę na dłużej ;)

[@Arrantasar]

Znowu spóźnione, ale wszystkiego najlepszego :D No i świetny odcinek! :)

[@sonyniktsol2470]

Świetny materiał!

[@rsazor12]

świetny materiał - oby więcej takich :)

[@Sharqiewicz]

SUPER FILM! Dziękuję !

[@bartoszoch1201]

Super mega odcinek dziki Roman :D

[@supermusk]

bardzo użyteczny odcinek. swietnie!

[@filipsowiak2064]

Dobry odcinek. Dzięki

[@TheMajkhrhr]

hej, w jaki sposob zaznaczasz kilka elementow o tej samej nazwie i zmieniasz im wlasnie nazwe jedoczesnie ?np w 10.57 ?

[@maksymiliankonarski3380]

Mega odcinek! A chciałbyś może zrobić, krótki tutorial z webstormowych skrótów?

[@helloroman]

Trochę niszowy temat :D mogę dać wskazówkę, która zadziała lepiej niż jakikolwiek film. Wydrukuj sobie na kartce A3 (albo 2 x A4) całą mapę skrótów, a do tego potrenuj skróty na pamięć na stronie www.shortcutfoo.com/ - działa cuda :) Nawet warto sobie chociaż na miesiąc kupić premium, opłaca się. A produktywność +100% :P

[@morrovd4733]

4:56 biało-czerwoni! xd

[@qweqwe_Flinstone]

jesteś moim bogiem na tym kanale masz prawie wszystko xD

[@mateusz6897]

Siemka mam pytanie do jednostek vw / %. Jestem na etapie budowania portfolio, używając vw zauważyłem problem, ponieważ vw nie bierze pod uwagę paska scroll z boku i przez to strona się rozszerzała i pojawiał się poziomy scroll. Więc do których elementów strony powinno używać się vw, a do których raczej będą lepsze % ?

[@helloroman]

Dla mnie taką "rule of thumb" jest to ze jesli kontener jest na cala szerokosc okna to daje 100% a jesli mniej to korzystam z vw. Ale pewnie są jakieś mądrzejsze podejscia, po prostu dla mnie to dziala ok.

[@monikaszymanska1332]

W jaki sposób zaznaczasz i zmieniasz wszystkie .left na .right w 11. minucie? Z góry dzięki!

[@helloroman]

Monika Szymańska to się nazywa select next occurance

[@dae2530]

Co do pikseli i ich wartości cząstkowych, to można nimi naprawić pewne bugi związane z wyświetlaniem.

[@_lut3k_]

o co chodzi z tym w3schools? o jakie niepoprawne treści chodzi?

[@helloroman]

www.webkrytyk.pl/2017/10/29/w3schools-com/

[@filqyt1949]

Jaki to font w VSC?

[@kamilwilczynski5268]

Gdzie ten link do strony?

[@michalmalinowski1297]

1:08 - css w czystej postaci :D

[@usdrealmano9897]

Ja bym powiedzial, ze px to px tyle ze przegladarki jak i rowniez same systemy operacyjne skaluja widoki w zaleznosci od ustawien systenowych, np. jak sie ma zrootowany smartfon to mozna zmienic skalowanie ekranu na 100% i wtedy przy ekranach rzedu ok. 5 cali i full hd albo 4k mamy skrajnie maly przez co nieczytelny widok. Czyli px to bedzie dokladnie ten pixel jaki jest uzywany do definiowania rozdzielczosci ekranow.

[@kapuchaster]

Dzięki :)

[@rafalx92]

W jaki sposób mogę zrobić aby strona którą tworzę otwierała się jako localhost na komputerze i przeładowywała się automatycznie gdy tylko nastąpią jakieś zmiany w plikach html/css/js?

[@helloroman]

Jeśli dopiero zaczynasz i nie masz doświadczenia z takimi narzędziami jak webpack / gulp / npm scripts, to najłatwiej będzie jak zainstalujesz sobie plugin do Visual Studio Code - marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

[@rafalx92]

@@helloroman Dzięki wielkie :)

[@stblny]

Jak to zrobiłeś, że piszesz w 3 miejscach jednocześnie :D ?

[@helloroman]

Magia 😎 A tak serio to każdy edytor kodu ma funkcję multiple cursors

[@Harukiii.Dragneel]

Witaj! Myślę nad programistyką. Oglądam cie od kilku dni i wielbie twoje odcinki. Nie wiem jak mam podążać ścieżką szkół.. Czy mógłbyś mi powiedzieć swoją historie w jakich szkołach byłeś?

[@helloroman]

Szkoła nie ma żadnego znaczenia - byłem w najzwyklejszym (raczej słabym) gimnazjum w Słupcy, potem w LO także w Słupcy, które górnolotnym nazwać ciężko. Potem studia - rok kulturoznawstwa, potem całość na dziennikarstwie. I tyle :) A nic z tych rzeczy, o których opowiadam w odcinkach nie nauczyłem się w szkole.

[@14jasieksz]

Testowałem dzielone px i mam dobry monitor, jest to widoczne tak do 0.5 px. @hello roman :)

[@konraduczak170]

100 lat , dobry odcinek, a jak się zapatrujesz na CSS grid vs flexbox.

[@helloroman]

Używałem css grid raptem kilka razy i póki co nie w komercyjnych projektach (wiadomo, wsparcie) ale póki co jestem zdania że jedno i drugie to świetne narzędzia, które pozwalają osiągnąć nieco inny efekt. Jestem fanem flexa i stosuję go niemal wszędzie. Na grida jeszcze chwilkę zaczekam, ale fajnie że najnowsze przeglądarki już go wspierają w 100%

[@konraduczak170]

@@helloroman Dzięki, a tak na marginesie to dobry kierunek te technologiczne odcinki 😉

[@TrasekJa]

Czyli dopiero za kolejne 2-3 lata.

[@Spyze]

A co z procentami?

[@KondzioTVstudio]

Bardzo fajny odcinek, dobrze wytłumaczyłeś różnice między procentami a vh/vw.Ja mam pytanie dot. elementów ,które uciekają w prawo poza widzialny obszar i pojawia sie scrol dolny i trzeba przewijać.Mimo ,że daje marginy 0 paddingi itd czasem mam takie sytuacje ze tak się dzieje a overflow x hidden nie jest rozwiazaniem ponieważ ucina element.Fajnie jakbyś zrobił o tym filmik i jeszcze mam propozycje coś o rwd np są strony ze jak wchodzisz to glowna sekcja z powitaniem itd zajmuje zawsze 100% wysokosci i szerokości jak taki efekt uzyskać według cb ja jedynie umiem to zrobić w taki sposób ,że dziele strone na sekcje i pierwszej sekcji daje 100%vh i 100%vw i jest wtedy taki efekt.Ciekawy jestem twojego rozwiązania.Filmik o media jak robić tylko rozbudowany a nie podstawy bo takich jest mnostwo a malo co sie mozna dowiedziec i z przykladami w takich tutorialach tez ciezko.Pozdrawiam mam nadzieje ze wezniesz cos pod uwage.

[@paweonorin2978]

dziękuje

[@MrDahar]

Leżę sobie chory i myślę zobaczę te css od Romana i 2 strony notatek a miało być rekreacyjne 😅

[@Cobza385]

Ja zawsze mam problem z dobieraniem rozmiarów fontów tak aby dobrze wyglądały na wszystkich ekranach, chętnie posłucham o Twoich praktykach w tym zakresie ;p

[@MrSajrus33]

Ja bym użył sans-serif i em, rem w kontenerze określonym vh, vw. Margin czy tam pozycjonowanie tych że kontenerów fukcją calc (vh,vw). Pozdrawiam. Plus trzy odpowiedniki stronki pod telefon/laptop/tv (rozdzielczość).

[@jude5624]

Jest taki theme na VS Code???

[@helloroman]

Atom One Dark jest bardzo podobny na VSC

[@tabloid64]

Co do pikseli jeśli dobrze pamiętam, choć nie wiem jak to możliwe, osiągałem mniejszą wartość od 1px przez użycie jakiegoś tam cząstkowego em. Jak to możliwe?

[@jakubwisniewski6052]

Czy styl globalny (*) ma wpływ na ''rem"'?

[@helloroman]

* nie jest stylem globalnym, tylko uniwersalnym selektorem (w odcinku chyba omyłkowo nazwałem go globalnym), czyli takim który „łapie” wszystkie elementy w DOM i nadaje im jakąś wartość. W tym wypadku jesli np. * { font-size: 20px; } h1 { font-size: 1rem; } to 1rem będzie wynosił 20px ponieważ globalnym selektorem łapiesz także Natomiast jeśli * { font-size: 20px; } h1 { font-size: 50px; } to uniwersalny selektor nie nadpisze wartosci z selektora h1, czyli h1 będzie miał 50px a nie 20px

[@jakubwisniewski6052]

Dzięki za wyjaśnienie. Tylko pojawia się, drugie pytanie. Skoro określamy jakiś atrybut selektorem uniwersalnym to czy w praktyce (standardzie) warto pisać w stylowanym później selektorze np. , że jego wartość wynosi 1 rem; czy lepiej nie pisać nic?

[@vamteusz3898]

Czemu w3schools jest złe? Czekam na ten kurs css, ogólnie fajnie byłoby zobaczyć proces tworzenia responsywnej strony od 0, np. jakiegoś landing page - tak dla kompletnych juniorów. PS 100 lat!

[@bartek4210]

w3schools nie jest dobrym źródłem wiedzy i nie ma nic wspólnego z w3c. Po wiedzę warto zaglądać na mdn: developer.mozilla.org/en-US/

[@BojoMinecraft]

Co mnie przezywasz na lajwie jawora

[@MadBunnyRabbit]

Aaaaaaaaa!!! Rozumiem, bo nie ma takiego Króla jak SCSS, ok ok, dobry suchar XD

[@QWACHU]

Technicznie rzecz biorąc pixel (px) jest jednostką względną, nie absolutną. Jego określenie szło jakoś, że to rozmiar punktu na ekranie o jakiś tam promieniu (szerokości) widziany z odległości bodajże 30 cm :) Ale na potrzeby designu przyjmowane jest, że to bezwzględna wartość, z uwagi, że wszędzie ów pixel jest zawsze na ekranie taki sam. Gęstość (dpi) tych prawdziwych pixeli (urządzenia) nie ma znaczenia, bo finalnie maja się składać na ten standardowy pixel :) Jakoś tak to szło... piszę z głowy, więc mnie nie cytujcie. :) Wyczytałem to jakieś z 15 lat temu (czyli w erze komputera łupanego :)), a whisky robi spustoszenie w szarych komórkach :)

[@paveypl]

dzieki uysy

[@helloroman]

na miękko ✌️

[@TheBobson1111]

Tak pół piksela działa. Testowane w pracy x razy na rozkaz QA xD

[@helloroman]

chuj skul xD czo te QA'je

[@antero7680]

wytłumacz flex i grid

[@helloroman]

Antero bankowo nie w jednym odcinku, ale pomysł super

[@jackejacke2052]

przykład z border-box podsunął mi skojarzenie z Polskim Instytutem Sztuki Filmowej.

[@michapastewski8513]

Super odcinek, chyba jaśnie j nie da się tego przedstawić. A z takich ciekawostek to natknąłem się na ciekawe rozwiązanie - clamb(). podsyłam link: www.stevefenton.co.uk/2020/04/css-clamp-the-goldilocks-of-css-math-functions/. jestem ciekawy co o tym sądzisz? pozdro

[@KubkaYT]

Może się to wydawać banalne ale jestem ciekaw jak od strony kodu wygląda ten Twój testowy layout na ciemnym tle. Udostępnij jeśli jeszcze to gdzieś masz:)

[@TomekCl]

Eee... Czekałem czy powiesz gdzie i kiedy używać której jednostki... Kiedy rem, em a kiedy px.. Zawsze są o to spory:)

[@helloroman]

TomekCl są spory bo to zależy od przyjętej konwencji w projekcie. Nie ma na to jednej poprawnej metody. Dlatego nie mowie nikomu co i kiedy ma robić. Dobre poznanie narzedzi prowadzi do ich swiadomego wykorzystania :) i to jest cel tego odcinka.

[@Osotogari1992]

u mnie działa .5px ;)

[@gskgrek]

Kiedys mialem zlecenie zeby naniesc poprawki na projekt w ktorym wszystkie (!) elementy mialy font-size oparty o em :/ Niektorzy devi potrafia byc zlosliwi :P

[@pysiu007]

Grzegorz Sieczkowski może zależało komuś na szybkim skalowania tekstów, zmieniając root font można było zmniejszać i powiększać wszystko :) a nie od razu złośliwość :p

[@gskgrek]

Nie mam pojecia co kierowalo autorem kodu, ale napewno bylo z pod ziemi :D Np. jak masz Tytul z duza czescia i klient/account chce zeby powiekszyc Tytul ale reszta zeby sie nie zmienila to sie tego latwo i szybko nie zmieni :P A to najprostszy przyklad. Pelno bylo akcji gdzie zmienialo sie rozmiar fonta a potem okazywalo sie ze gdzies jakis pierdolnik nagle malal do 6px bo w domie byl zagniezdzony w milionowym drzewku :P Brzydkie slowa same sie cisna wtedy ;) em jest fajny, ale trzeba naprawde umiec z niego korzystac i robic to z pomyslunkiem a nie wpierniczac wszedzie jak leci :P

[@HCforLife1]

@@gskgrek REM > EM

[@biggestturtle973]

Są gdzieś jakieś kursy, które są płatne i naprawdę warto w nie zainwestować? Od a do z jak dla debila, najprościej jak się da. Chciałbym opanować wszystko do poziomu wystarczającego, żeby podjąć się pracy i tak mam świadomość, że nie da się tego osiągnąć w 2 miesiące a nauka może potrwać bardzo, bardzo, bardzo długo.

[@arkadiusz4714]

Arkusze Kaskadowe Stylów odziedziczyły z typografii jednostki w tym em (wymowa: firet) ale o tym już nikt nie pamięta.

[@helloroman]

Fajna ciekawostka. Ale firet to nazwa polska - używanie jej w języku, gdzie wszystko jest po angielski byłoby niezwykle mylące.

[@szczeczaczoszczeczek5077]

Miałem okazję użyć ex oraz ch. działają podobnie, a w niektórych przykładach identycznie. codepen.io/anon/pen/wEXmGz

[@kacperkujawa213]

Siema co tam?

[@helloroman]

Kacper Kujawa a spoko siedzimy sobie nic się nie dzieje fajnie jest

[@aleksanderszut2098]

pierwszy

[@PaulKHeld]

I cyk zakładka

[@ErxEris]

Emirem