Jak pisać dobry CSS? 😱 opowieści, skrypty #4

[@acwo]

"CSS is like chess. You can learn the basics in a day and spend a lifetime mastering it."

[@tmchecki8610]

CheSS :)

[@HQ265]

Wydaje mi się, że w przypadku css działa to w drugą stronę, najciężej jest zacząć, a po ogarnięciu bardziej skomplikowanych rzeczy pokroju position, flexbox jest już z górki

[@stealthslushie610]

@@HQ265 Niestety nie jest. Może osobie, która dopiero skończyła tak się wydaje.

[@bartek4210]

@HQ265 To nie są skomplikowane rzeczy, to dopiero początek posługiwania się CSS. Najtrudniejsze jest umiejętne wykorzystanie wszystkich dostępnych możliwości do tworzenia responsywnych, wydajnych interfejsów graficznych w oparciu o dobrą architekturę HTML i CSS która pozwala na łatwe modyfikacje. Bardzo skomplikowany temat w dużych projektach.

[@jabariemilio4173]

Dont know if you guys cares but if you are bored like me atm then you can stream all the latest series on InstaFlixxer. I've been streaming with my girlfriend for the last couple of weeks xD

[@lukaszniepala6833]

Może odcinek o tworzeniu stron resposywnych ?

[@ukaszstusio585]

Tak jak prosiłeś na koniec odcinka, tak odpowiadam: Twoje rady są cenne w ch... ekhm, ponad miarę. Za każdym razem jak oglądam dobrze przygotowany materiał myślę o wszystkich szkołach, do których chodziłem i krew mnie zalewa. Strajk nauczycieli jest jedynym, którego nie popieram.

[@ComandeerPL]

Jeśli chodzi o formaty obrazków, to Firefox 65 w końcu wprowadza wsparcie dla WebP. A to oznacza, że coraz bliżej jesteśmy czasów, w których będą tylko 2 formaty obrazków: SVG do wektorów i WebP (czy też format oparty na AV1, który powinien go zastąpić w najbliższych latach) do całej reszty, w tym przezroczystych i animowanych.

[@8Lifesabitch4]

Świetny odcinek, ogarniam nieźle CSSa, więc najciekawsze były dla mnie praktyczne tipy i rady, jak np. z kompresorem obrazków. Dzięki i proszę o więcej.

[@element4225]

Roman, z miesiąc się w to bawię i co prawda większość informacji już znałem to i tak dajesz między wierszami tip'y których nie łatwo znaleźć na innych tutorialach, chociażby "float". Oczywiście czekam na ciąg dalszy :)

[@ewaevva4375]

Bardzo dużo wiedzy, dziękuję. Nie będę uzywać floata bo mnie też wnerwiały te dodatkowe style potrzebne z jego powodu. Dobry z ciebie uczyciel, Romanie !

[@piwosz6326]

Jak zawsze ciekawie opowiedziane! Teraz jak zacząłem się bardziej tym interesować to widzę ile rzeczy można zrobić w CSS. Po tym odcinku widzę jakie ja popełniam błędy i na pewno się zastosuję bo raz, że prościej to dwa czytelniej. Oby więcej takich filmów! Pozdro!

[@profiler11]

Jeszcze, jeszcze - więcej więcej - bardzo dużo praktycznej wiedzy - dziękuję.

[@jakubgarlik6346]

Bardzo bardzo cenne rady i wskazówki. Zaczynam się uczyć programowania i Twoje filmy są bardzo pomocne. Poza tym wprowadzają spokój przed nieznanym. Jesteś wielki!

[@_szyha]

Kurcze, zacząłem kodzić gdy jeszcze nie było żadnych flexów i nauczyłem się robić wszystko na floatach, a że specjalnie nie sprawdzałem co tam się zmienia w świecie html/css to tak mi zostało. Roman, dziękuje że tworzysz ten kanał, aż znów czuć świeżość w tym co robię i będę robił :D

[@ovr_dave]

Jako, że niedawno zacząłem się bardziej interesować Web Development'em chciałbym się trochę więcej dowiedzieć o co chodzi w ::before i ::after. Myślę, że byłby to dosyć ciekawy temat na odcinek. A jeśli chodzi o odcinek związany z animacjami w css to również mógłby być ciekawy. Ogólnie to nieważne jaki temat odcinka, zawsze wyniosę z niego jakieś ciekawe, przydatne informacje. ^.^

[@bencelinski523]

Podbijam! Odcinek z pokazaniem zastosowania ::before i ::after na przykładach byłby super. W ogóle co to jest za fantastyczny kanał to ja nie mam pytań!!!

[@ovr_dave]

@@bencelinski523 Ja natknąłem się na kanał dosyć niedawno i chyba lepsza rzecz mnie w życiu spotkać nie mogła. Bardzo fajnie się tego wszystkiego słucha i tak jak już wspomniałem, z każdego odcinka da się wynieść jakieś przydatne informacje.

[@siema32]

Nie to, że nie chcę takiego filmu u Ciebie Roman, ale polecam zajrzeć do kodu.je - kzbin.info/www/bejne/qIOZemObad9kq9U - zrozumiale wytłumaczone. Mimo wszystko żaden tutorial Was tego nie nauczy! Odpalajcie edytory, klawiatury w ręce i do roboty! :D

[@helloroman]

@@siema32 Luźno, znam się z Wojtkiem i jest super ziomkiem :) Jak najbardziej polecam też jego materiały

[@dkacper]

11:32 Co do position absolute, to bardziej dokładnie element pozycjonujemy absolutnie względem pierwszego przodka, który ma właściwość position relative. Jeżeli takiego nie znajdzie, to pozycjonowanie absolutne odbywa się względem body.

[@helloroman]

Super ❤️ Dzięki za doprecyzowanie

[@111FK]

Ten kanał jest świetny. Twoje filmiki są bardzo dobrze przygotowane, a treść jasna, interesująca i naprawdę przydatna. I to nawet dla osób, dla których CSS nie jest nowością A może w ogóle jakiś odcinek o dobrych praktykach podczas tworzenia kodu? Wydaje mi się, ze mówi się o tym niewiele, a to istotny temat.

[@Buc82]

Istnieje jeden przypadek, gdzie realnie float ma sens i z myślą o tym był tworzony: wewnątrz paragrafów, kiedy chcemy, żeby tekst "opływał" np. buttona do zamykania bannera po prawej.

[@Cienistosc]

Bardzo pomocny film! Zabiorę się zaraz za porządkowanie i optymalizację mojego kodu :) A ta dygresja o absolute/relative też mi się przydała, bo trochę mi się to mieszało, a w źródłach z których korzystałam akurat ten aspekt nie był za dobrze wytłumaczony

[@michaluryn]

Jak zawsze pełne mięcho ;) dzięki Roman!

[@theb4dboy298]

Może opowiedz jak się uczyć i od czego zacząć? Skąd brać "designy stron" które możemy sobie przećwiczyć? Jakieś rady dla początkujących :)

[@Kashello]

Wpadłem do Ciebie bo chcę wrócić do kodowania, zostaje na stałe! Tak się technologia pozmieniała na lepsze , a bawiłem się w podstawówce gdzie ludzie robili strony na tabelkach i szablony pod php fusion ! Tak pamiętam czasy 2005 :D a divy to była nowość hahaha :D

[@brodaty001]

zamiast sterować szerokością buttona można nadać mu np. "align-self: center" i wróci do swoich standardowych rozmiarów ;)

[@damianovskyy]

Dziękuję, jak zwykle świetny odcinek ♥️

[@jozefwojtkowiak1086]

Świetny odcinek z którego naprawdę wiele wyniosłem

[@ukaszstusio585]

Jak zwykle świetnie skrojony odcinek.

[@TheKseon]

Dzięki za film, w sumie spotkałem się niema ze wszystkim na tym filmiku (oprócz strony tinypng - wczesnej sam w gimpie eksperymentowałem), ale wielu rzeczy nie stosowałem, przez niepamięć(?), jakąś taką upartość(naużywanie selektora potomka), czy lenistwo(stosowanie oddzielnych atrybutów do fontów). Proponował bym może proces tworzenia jakiegoś elementu w "stylu" mobile first. Albo czystości kodu w SASS/SCSS. Ewentualnie o konwencji nazewnictwa selektorów w CSS. A tak poza tym to się zastanawiam nad innym aspektem lekko związanym z tematyką filmu. A mianowicie czy dołączanie pliki np. fonty, powinny pochodzić z serwerów zewnętrznych(by np. zaryzykować, że użytkownik ma to już zapisane w pamięci podręcznej), czy jednak zdecydować się na zawarcie tego u nas na serwerze i tym samy uniezależnić się od jakiś ewentualnych problemów z innymi stronami. Jak to wygląda pod względem szybkości działania strony jeśli chodzi o aspekt SEO - bo on chyba nie uwzględnia "pamięci podręcznej", nawet dla bardzo popularnych fontów typu font awesome.

[@mateusz-grochowski]

Podbijam stawkę. Poważne problemy jak BEM vs Utility Class ABEM, ACSS CSS zorientowany komponentowo (np CSS Modules) Swoją drogą, super merytoryka !

[@belhiaro765]

Haaa tfu na float, tylko flex! jezuuuu jak w koncu nauczylem sie flexa to zrozumiałem jak wiele czasu i nerwów straciłem nad użeraniem się z FLOAT:LEFT; precz z tym! Team Flex/Grid pozdrawia :D

[@pawerafako6116]

a co z IE8? :(

[@poelover2024]

Ja najbardziej nienawidzę css backgrounda, wspomnę że się uczę dopiero i nie bijcie mnie za coś głupiego ale: Obejrzałem twój odcinek i od razu wdrożyłem choćby i shorthands. Miałem background-image, background-position, attachment - było tego dość sporo. Chciałem się uczyć dobrych nawyków od Ciebie i wyglądało to mniej więcej tak: background: url("link do obrazka") 50% 100%/cover no-repeat fixed; Dopóki było w formie powyżej to spoko, działało - pożyczyłem sobie z polecanego przez Ciebie mdn kolejność i zadziałało. Problem pojawił się gdy chciałem do tego shorthand'u dodać cień linear-gradientem. Dopisałem ten cień najpierw na końcu, potem na początek jeszcze przed URLem, jednak oprócz tego gradientu trzeba było dodać między nim a urlem "," kombinowałem z 2h czemu to nie działa i dopiero jak znalazłem jakiś przykład w sieci to się połapałem że chodzi o ten przecinek. Bo generalnie sądziłem że jak przy position, attachment, cover nie daje się przecinka to po co dawać i tutaj. Chciałem się zapytać od czego to zależy?

[@zlvskyy]

najlepszy kanał z tego typu contentem! dzieki za przydatny odcineczek

[@masztan]

Dla * można też uniwersalnie nadać margin i padding:0. Btw. Nie podaje się do elementu liniowego span elementów blokowych (tutaj p) :). Dla flexów jak chcemy aby element dany był po prawej wystarczy dla niego nadać mu margin-left:auto; Przykład: codepen.io/anon/pen/ZwOvvE

[@manoxevonix7687]

niesamowite! dziękuje, lece dalej! :)

[@ziemnaklolix3895]

Bardzo pomocny i miły do oglądania odcinek :D

[@meracle-8835]

I to lubie !

[@gradziu31]

@hello roman fajnie by było też wspomnieć o nazewnictwie, oraz czemu nie warto stylować np. ID pomimo iż się da ;p co do odcinka fajnie przygotowany, dobry pro tip jeśli chodzi o czcionki, nie wpadłem na to żeby szukać po takich ustawieniach. jak sam wiesz o CSS i preprocesorach można sporo gadać, temat nie jest taki malutki jak się każdemu wydaje trzeba po prostu poznać te wszystkie "smaczki", jedynie co mogę dodać to to iż piszę od roku projekt który musi być wspierany nawet na IE9 (android, ios, firefox, chrome, vivaldi) momentami chciało się płakać :D strona ma dość nowoczesny wygląd, a do małych nie należy ;)

[@mrlaqu]

Justify-content: space-betwen dla dwóch elementów jest dobrym rozwiązaniem. Niestety rzadko mamy tylko 2 elementy w kontenerze flex. Gdy mamy więcej elementów, możemy na ostatni dodać: margin-left: auto, aby umieścić go po prawej stronie.

[@helloroman]

Zależy od potrzeby, ale zawsze możesz zagnieżdżać elementy w odpowiednią liczbę rodziców - albo użyć grida po prostu

[@kasiakatejeziorska6713]

Hehe u mnie na bootcampie za float oblewali projekt. 😎 Serdeczności!

[@helloroman]

To musiał być dobry bootcamp :D szanuję

[@krzesinytv]

Pamiętam z czasów nauki CSSa, że zrozumienie myku z position: relative dla rodzica i position: absolute dla dziecka było jednym z najważniejszych odkryć w mojej ówczesnej karierze xD Wprowadziło zupełnie nową jakość xD

[@bartomiejwarzecha2708]

Bardzo mi się podoba twoja językowa składnia.Ciekaw jestem czy praca w IT miała duży wpływ na jej płynna i 'inteligetna' strukturę czy po prostu od zawsze miales podobna tendencje do tak przejrzystej mowy ;)

[@helloroman]

To akurat kwestia 5 lat pracy jako copywriter :P Jak się tyle czasu profesjonalnie człowiek posługuje językiem polskim to wchodzi w krew

[@element4225]

W sprawie pytań:) myślę, że tutorial tworzenia responsywnego menu byłby dobry :) jestem w trakcie tworzenia i problem pojawił się przy scrollowaniu menu przy mobile devices. Pozdrawiam.

[@mioszsukowski193]

Co sądzisz o tym żeby nagrać odcinek o rozwiązaniach dla localhosta. Czego używać np. na macu. Może o konfiguracji dockera?

[@TrasekJa]

Ja do zmniejszania obrazów .jpg używam guetzli od Google, działa całkiem nieźle, nie tracimy na jakości a do tego - jedyny minus, że zmniejszanie rozmiaru trochę trwa.

[@asepticolandia]

Łapka w ciemno i do obejrzenia po robocie przy odpalonym VSC :D

[@kamilwaszewski]

Super film Roman!

[@mrarc197]

Spoko, bardzo przyjemny kanał i odcinek, ale akurat w nim nie znalazłem absolutnie żadnej informacji o której nie wiedziałem. Mimo to rób to co robisz, bo robisz to dobrze :)

[@helloroman]

Bardziej zaawansowane materiały też się pojawią ;) Może uda mi się Cie zaskoczyć w przyszłości

[@TheMatizcd]

Szybkie pytanie lekko poza tematem odcinka - co to za wtyczka, która zwęża Ci kursor belki tekstowej? Po jakimś czasie nieaktywności kurczy się do środka i wygląda fajnie ;)

[@sebastianlaka6247]

Dzięki ci dobry człowieku uchroniłeś mnie przed niepotrzebnymi błędami jakie mogę sobie narobić po drodze :D :D\ Edit. Spotkałem się z napisem w CSS z klasami np: .container .line{} I teraz pytanie jaki sens ma taki zapis? Kolejna sprawa to semantyka HTML chodzi mi o to że jest i teraz tak: jak chcę go wystylizować to muszę koniecznie utworzyć w nim klasę czy mogę zrobić NP. . Czym się każda z pozycji: static, fixed, absolute, relative. Z góry dzięki za odpowiedź :D

[@pawelmalinowski3461]

Cześć Roman. Wspominałeś nieraz na swoich filmach o tym jak wiele godzin poświęciłeś na naukę JS, dlatego też jestem bardzo ciekaw z jakich źródeł korzystałeś lub kursów, dzięki którym dostałeś się do odpowiedniej agencji. Pozdrawiam :)

[@helloroman]

Trzeci odcinek vloga ;) polecam pozdrawiam, Adam Romański

[@adrianosky282]

Kurs Reacta się przyda od podstaw cała playlista :)

[@Ramox-oj6ic]

Stoję obecnie przed wyborem szkoły średniej, najprawdopodobniej technikum i tu pytanie: Czy informatyka to przyszłościowy kierunek? Czy w przyszłości nie będzie zalewu informatyków? Nie zaniknie popyt? Bo ewentualnie myślę nad pójściem w elektronikę czy automatykę

[@Rzeznik24h]

Cześć Roman, rzuciło mi się w oczy jak nazwałęś klase ".pink-paragraph" i z tego co mi wiadomo też ważną rzeczą jest by nie nazywać naszych klas zbyt dosłownie. W przypadku jezeli będziemy chcieli zmienić taki kolor paragrafu to musimy to robić w css jak i poprawić w html, to samo się tyczy określania stron (prawa,lewa). Fajny materiał i czekam na więcej. Pozdro :)

[@helloroman]

Siema, szczerze mówiąc to wpisałem pierwsze co mi wpadło do łba - akurat o konwencjach nazewniczych to można osobny odcinek nakręcić :D Ten to totalnie zignorował

[@AndrzejDunowski]

Do zmniejszania wielkości JPG obecnie najlepszy jest Guetzli od Google. Do PNG używam optipng. Pozdrawiam

[@gatherpl]

Bardzo ciekawy odcinek, niby wiekszosc oczywista, a jednak nie do konca. BTW co to za skorka do VS Code? Ten kursor i font wygladaly pieknie😍

[@maciejhamulak3264]

Motyw to chyba Material Theme Ocean ;)

[@rajkonkret]

Do zmniejszania wielkości obrazka polecam digiKam

[@krzesinytv]

justify-content: space-between to najlepsza rzecz jaka przytrafiła się cssowi! XD Zaraz po keyframesach

[@brodaty001]

#pomyslnaodcinek Roman, chętnie bym nauczył się czegoś więcej o narzędziach do zarządzania i obsługi SVG w projektach. Mam tu na myśli SVG sprites z zewnętrznego pliku.

[@tmchecki8610]

co to za wtyczka, że Ci podświetla żółtym borderem aktualnie stylowany selektor?

[@Denoderek]

Haj, coś nie daje mi spokoju. Skoro możemy optymalizować jakość kodu CSS, jak możemy zbadać, które rozwiązanie jest lepsze ? Jest jakiś tester szybkości stylowania DOM ? Zakładam, że mam kilka rozwiązań ostylowania jakiegoś elementu i jak mogę sprawdzić, które jest najbardziej wydajne ?

[@firebite4956]

Hej Roman [...] Zrobiłbyś odcinek, na którym pokazujesz jak łączyć backend node.js z frontend'em vue.js oraz frontendem react.js ? Z góry dzięki :]

[@emilkowalski_]

Jak zmieniles animacje tej kreski pozionej(?) ktora wskazuje gdzie jestes? + I jaki theme w Google chrome? :D

[@kacperfiga8481]

Jak nazywa się ten dodatek z animacją(?) kursora?

[@krzesinytv]

Widziałem kiedyś test różnych kompresorów. TinyPNG nie jest zawsze najlepsze, ale można powiedzieć, że jest po prostu najbardziej uniwersalne, bo daje zadowalające wyniki w większości przypadków. Polecam sprawdzić i pobawić się API tinypng, bo są dostępne choćby pluginy do gulpa, które umożliwiają kompresję jednym poleceniem z terminala. Dla mnie bajka!

[@helloroman]

Super, obczaje :)

[@CodingByMyself]

Niezle, nauczylem sie czegos nowego ;)

[@krzesinytv]

Tam od razu, że float ohydnie wygląda - po prostu stara szkoła cssa ^^ Ja dopiero ostatnio przekonałem się w końcu do flexa po latach konserwatyzmu, a swoje podejście tłumaczyłem sobie "no przecież bootstrap 3 korzysta z floatów, a flex przecież nie ma 100% wsparcia). Aż w końcu Bootstrap 4 wyszedł z bety i nie miałem już żadnej wymówki xD Nie żałuję

[@helloroman]

Starą szkołę to możesz mieć w aktorstwie :D Tutaj albo coś jest w użyciu albo z niego wypada - float musi wypaść! (Trochę jak „Balcerowicz musi odejść” 😂)

[@janwszoek1578]

wow o wielu rzeczach nie wiedzialem, super

[@patrykbunix241]

Kozak 🔥 waiting4more

[@krzysztofurbanek2037]

A jak odniesiesz się do przejrzystości kodu w sass'ach i targowaniem do klas ?

[@rafastelmaszyk4042]

Roman mogłbyś powiedzieć jakiego używasz edytora ????

[@HQ265]

Co to za wtyczka od zmiany "migania" kursora podczas wpisywania tekstu?

[@mariuszpodgorski6695]

Mruganie oczami taki suchar.

[@acwo]

Do kompresji grafik polecam ImageOptim - darmowy program na maca. Dużo szybciej kompresuje się obrazy niż przez tinypng i inne strony.

[@jsarnowski]

Potwierdzam! :)

[@helloroman]

Wow! super, sprawdzę i porównam :) Dzięki wielkie!

[@Denoderek]

Co do imageOptim polecam zajrzeć w opcje. Jest tam system kompresji Guetzli. Niesamowite ile potrafi wycisnąć z jpg. Niestety ma swoją cenę w czasie przetwarzania.

[@marozumek3115]

Ok, co z tego, że dużo szybciej, skoro tinypng posiada lepsze algorytmy kompresji i zdjęcia są mniejsze, często przy zachowaniu lepszej jakości?

[@acwo]

@@marozumek3115 To z tego, że nie musisz wchodzić na stronę, dodawać zdjęć, pobierać zipa, rozpakowywać, kopiować i wklejać. Do imageOptima wrzucasz np. kilka folderów ze zdjęciami, one automatycznie się kompresują, a pliki podmieniają. Ogromna oszczędność czasu i nerwów. A kompresja jest na tyle dobra, że Google Pagespeed uznaje ją za wystarczającą.

[@tmchecki8610]

Bardzo fajny odcinek, dzięki, sporo się dowiedziałem. Może też byłby ciekawy odcinek jak robić RWD na mobile-first albo desktop-first. Np. że na mobilce wszystko jest w 1 kolumnie, a przy min-width: 600 'to cos' rozdzielca się na 2 kolumny. Chodzi o sposob myslenia i przewidywania, jakie rzeczy umiescic w osobnych divach, zeby pozniej moc je rozdzielic na 2 lub wiecej kolumn. Na jakim etapie trzeba to rozplanowac, zeby pozniej sie nie okazalo, ze zbyt duzo elementow jest upchanych w jeden wrapper. Może wiesz o co mi chodzi i jeśli znałbyś jakiś artykuł z dobrymi praktykami pisania htmla pod rwd (że tak to nazwę), to proszę wrzuć linka :)

[@dawidjarmoluk2439]

Tutaj ziomal pokazuje, jak kodując techniką mobile-first, używa grida do odpowiedniego ułożenia layoutu na desktop: kzbin.info/www/bejne/g2TUc6OGrJxqp9E

[@maciekdzialo]

Jakiego edytora używasz w tym odcinku?

[@andskyryu]

prawdopodobnie Visual Studio Code

[@thesylwio]

Nie czasem Sublime?

[@helloroman]

bingo

[@helloroman]

@DarekRogoz VSC

[@HQ265]

VS Code

[@marozumek3115]

Bardzo dobry odcinek, moim zdaniem trochę zagmatwałeś z tym tłumaczeniem dlaczego selektory CSS są parsowane z prawej do lewej, ale reszta bardzo ok. Z jakiego narzędzia do automatyzacji zadań korzystasz? Mógłbyś zrobić o tym odcinek? Te wszystkie tutoriale na necie to często o kant d*** można rozbić. Robisz świetną robotę, jestem jednym z Twoich pierwszych widzów i naprawdę wiele wnosisz do społeczności.

[@michalmazurkiewicz4015]

Świetny film!

[@tisqun636]

Jak ustawiłeś taki kolor składni czy to jakiś inny program niż Notepad oraz jak tak szybko tworzysz listę ul ?

[@Denoderek]

@Tisqun Co do tworzenia listy ul Roman użył składni Emmet (ul>li*4) daje Ci z 4 Tutaj masz stronkę, gdzie wszystko jest opisane emmet.io/ W popularnych edytorach można to dograć jako plugin. W VSC jest to wgrane jako standard

[@tisqun636]

@@Denoderek Okej dzięki za odpowiedź ;)

[@panhuragan4388]

Dzięki

[@maro1977pl]

Czy można korzystać z CSS i flexbox oraz używać animacji z JQuery ?

[@abazur7742]

Hej roman, dopiero co zaczynam z javascriptem i "odkryłem" programowanie na kanale "the coding train" (może znasz a jeśli nie to polecam) i tam tez znalazłem poradniki jak nauczyc się javascript i ten gosciu cały czas używa biblioteki p5.js i mam pytanie czy opłaca sie uczyć js od początku uzywając p5 czy lepiej js bez żadnych dodatków ? (jeśli chodzi o przyszłą prace itd)

[@helloroman]

p5 jest JavaScriptową odmianą Javowego środowiska o nazwie Processing - do pracy Ci się to raczej nie przyda, bo to zwykła libka do robienia efektów wizualnych i innych tego typu rzeczy. Ale jako przygoda/eksperyment spoko. Choć mi nie przypadło to do gustu jakoś szczególnie.

[@abazur7742]

Dzięki za odpowiedź :)

[@matthias319]

Super odcinek

[@kacperfiga8481]

WINCYJ, WINCYJ!

[@martynat30]

Hej. Który to theme w VSC?

[@barpar4369]

Cześć wszystkim, mam pytanie, mianowicie czy możliwe jest połączenia vue.js z php i zbudowanie projektu w takim stacku technologicznym, jeśli tak to jak?

[@Denoderek]

@barpar Zapoznaj się z takim frameworkiem jak Laravel. Z tego co się orientuje tam vue jest jako standard dodawane

[@hubertbartman7345]

szanuję Ciebie

[@helloroman]

Hubert Bartman ja Ciebie również ♥️

[@MrFibbanacci]

Ge-nial-ne, więcej proszę :-) !

[@shell11_]

Czy styled components można używać w vue?

[@helloroman]

Można ale z tego co widziałem nie jest to tak przyjemne jak w React

[@TheBurbush]

No dobrze a co jeżeli mam taką sytuację div#photoContainer img div " Jakiś tekst na zdjęciu" Jak koduje to już nie ustawiam klasy dla tych dwóch dzieci tylko w css odnoszę się do #photocontainer > img. Dobrze robię czy raczej powinienem nawet takim małym elementom nadawać klasy? Ja właśnie staram się używać mało klas bo po 1) później jest bardziej czytelnie w kodzie 2) Wymyślanie nazw to sztuka większa niż programowanie xD

[@helloroman]

Ale rodzic powinien miec klase a nie id, odnoszenie sie bezposrednio do dziecka jest spoko

[@TheBurbush]

@@helloroman Ja przyjąłem taką zasadę, że container zawsze jest podpisany ID bo jest na stronie tylko jeden. W sensie każda grupa elementów ma swój container. A wszystko wewnątrz containera idzie jako class

[@helloroman]

@@TheBurbush z przykrością zawiadamiam, że przyjęta przez Ciebie zasada jest niepoprawna 😁

[@patryktokar]

W jakim programie pisesz kod?

[@kubix889]

Witam Cię Romanie. Chcę zapytać Ciebie o to czy warto pójść na kursy programowania dla młodzieży, mam 14 lat i bardzo lubię informatykę jak i programowanie (choć nie jestem zbyt dobry) i chcę iść dalej w tym kierunku i czy taki kurs byłby przydatny z C# i Unity lub Web Development ? Jakieś rady apropo tego.

[@helloroman]

Wydaje mi się, że z tej trójki Web Development będzie fajny, bo Unity może być dość przytłaczające na początek - albo po prostu spróbuj wszystkiego po trochu i zobaczysz :)

[@kubix889]

​Dziękuję za odpowiedź. I czy ok. 1000 zł za kurs web developmentu i jak jest napisane na stronie "hackowania" (tworzenie wirusów i ddos) za semestr (15 spotkań po 90 min) to dobra cena

[@helloroman]

Kubix to pisanie wirusow brzmi jak jakas kompletna bzdura. Zacznij od darmowych materialow moze? Zobacz czy Ci sie to na serio podoba zanim zainwestujesz w to pieniadze

[@kubix889]

​@@helloroman Teraz zacząłem jakby na nowo. Wcześniej oglądałem filmiki i coś tam robiłem, ale to było na codeblocku, a teraz przechodzę kolejne poziomy (jeśli można to tak nazwać) w codecademy o którym wspomniałeś w swoim filmie.

[@sterowniczy6618]

Co to za edytor kodu ?

[@bantu3514]

To skoro by się przydało nauczyć tego całego flexa i grida w CSS to może odcinek, który to wszystko w prosty sposób objaśni? :)

[@Denoderek]

Grzesiek z Eduweb super to objaśnia: eduweb.pl/live/poznaj-css-flexbox

[@karolwydmuch2166]

Fajna stronka do potestowania: codepen.io/osublake/pen/dMLQJr/

[@siwusekkk]

jakie ide?

[@KiszuPL]

warto by było wspomnieć o tym, że nie wszystkie przeglądarki łapią wszystkie przypisania (można to sprawdzić np. na caniuse.com/ ), dla przykładu jak mamy wymóg by nasza strona również działa na ie9, gdyż jakieś korpo ma taki standard to nie użyjemy 'dispaly: flex' :)

[@helloroman]

Ech, to jest własnie to, że niektóre rzeczy po jakimś czasie wydają się tak podstawowe, że człowiek zapomina o nich powiedzieć. Dobra uwaga z tym can i use. Na szczęście czasy IE9 odchodzą w niepamięć powoli (a ja próbuję jeszcze przyspieszyć wyjebanie IE10 i IE11 z obiegu xD)

[@KiszuPL]

@@helloroman Szanuję i doceniam walkę z nieużywaniem IE, bo ostatnio robiłem projekt, który miał być zgodny z tą przeglądarką (dokładnie z ie9) - to była dopiero zabawa dla masochistów.

[@alejandro5138]

@hello roman, cóż to za edytor?

[@helloroman]

VSC

[@m4tewoosh]

Możesz teraz zaktualizować w FAQ na swojej stronce sprzęt na jakim pracujesz

[@szustakziom]

Co to za edytor kodu? Można dostać nazwę? PS. Dopiero zaczynam

[@helloroman]

visual studio code ;)

[@karolwydmuch2166]

Bardzo fajny film. Cieszę się, że mogłem zweryfikować czy moje przyzwyczajenia są okej, a no i omówienie flexa

[@helloroman]

Co do dwukropków, to nie mają one wpływu na działanie kodu, ale przyjęło się, że na pseudoelementy dajemy dwa dwukropki a na pseudoklasy (:hover, :nth-child) dajemy jeden

[@jsarnowski]

A propos ładowania fontów, polecam artykuł Zacha Leathermana: www.zachleat.com/web/comprehensive-webfonts/ :)

[@HQ265]

Jak przeczytalem pierwsza litere nazwiska, to myslalem ze chodzi o Zelenta, ale na szczęście nie, uff.. xD

[@patryknowak1946]

Co to za program?

[@RadeckiRadzik]

SUPER !

[@d3zecik]

Może kolejny temat to pixel perfect? :)

[@rafalmyszynski]

Ale jak to wcale nie używać float? A obrazki wśród tekstu?

[@helloroman]

Rafał Nowak floata juz nie uzywamy. Nie ma absolutnie zadnego przypadku w ktorym nie istnialoby lepsze rozwiazanie 😉

[@rafalmyszynski]

@@helloroman Spoko, zatem co z tymi obrazkami? jsfiddle.net/o4zf8Le9/1/

[@helloroman]

@@rafalmyszynski faktycznie tego przypadku niczym innym nie obsłużysz - ale weź pod uwagę inną rzecz. Zanim zaczniesz zastanawiać się jak taki efekt uzyskać, warto zdać sobie sprawę, jak okropny to jest efekt. Tego się nie robi w sieci, to jest rzecz zapożyczona z prasy drukowanej.

[@rafalmyszynski]

@@helloroman No w sumie racja, wygląda słabo no i czyta się niewygodnie. Pozdro.

[@bobolek10]

A czy możnaustawiac w uniwersalnym selektorze margin i padding na 0

[@RitualHRS]

Tak