Przepis na layout - prosty formularz 😱Opowieści, skrypty #29

[@ukaszczuba9138]

Dobrym zwyczajem programistycznym jest dawanie łapki w górę przed obejrzeniem kolejnego odcinka na Twoim kanale 😉😀

[@bbart9628]

Zajebiście przydatna seria dla początkowych programistów. Brawo Roman.brrrrawo Takich ludzi, to z świecą szukać, nie dość że kanał twój jest doprawdy przydatny, jak i na początku tak i dalej i dalej i dalej.😁 To jeszcze niczym Filip z konopi wyslakujesz z tak przydatna seria, normalnie moja nauka ponownie, została uproszczona i zmotywowana.

[@shintenza8599]

Uważam że pomysł na serię jest wręcz doskonały. Mimo iż początki mam już za sobą to mimo wszystko mogę dowiedzieć się czegoś więcej o dobrych praktykach bądź też po prostu uczyć się od osoby z znacznie większym zapasem doświadczenia.

[@Jacek2048]

Dzięki za ten odcinek. Myślę, że to bardzo wartościowe zobaczyć, jak ktoś inny, kompetentny, programuje, a nie tylko słuchać o tym. Fajnie zobaczyć, że ktoś tak samo rozwiązuje problem wielokrotnego zagnieżdżania w BEM. To wydaje mi się całkiem sensowne: klasa "form-box__form" będzie definiowała style związane z umieszczeniem tego w form-boxie (np. alignment, marginy/paddingi), a klasa "form" - style formularza niezależne od kontekstu zewnętrznego, pozwalające stworzyć identycznie wyglądający (choć niekoniecznie identycznie umieszczony) formularz gdzie indziej. Ale trochę mnie rozczarowałeś tym width i height w .form-box. Można było zrobić max-width oraz odpowiednie paddingi i miałbyś ten sam efekt wizualny, tylko do tego responsywność za darmo. I wcale nie byłoby to jakoś wiele więcej roboty, ani nie skomplikowałoby przykładu, a od razu krzewiłbyś w młodzieży ;-) nawyk myślenia o responsywności od poziomu designu. Tak czy inaczej, fajny film, miło się ogląda i słucha. Czekam na więcej takich.

[@panhuragan4388]

Ale rzeczowy odcinek. Wspaniale

[@TheDiabelSv]

Super sprawa, mozna sie wiele nauczyc, zwlaszcza jak ktos zaczyna z html i css ;)

[@fixer8173]

Bardzo fajna seria, czegoś takiego brakowało, niby jest to zrobienie jednej funkcjonalności, ale widać w tym wszystkie dobre praktyki i sposób pracy, dzięki raz jeszcze :)

[@oleksku6761]

Jeszcze nie zacząłem oglądać ale przeczytałem w opisie na czym ma polegać ta mini-seria i już mi się podoba! 😃

[@FrytaPL89]

Pomaga i to bardzo, do niektórych (m. in. do mnie) bardziej przemawia praktyka niż teoria. Chcę więcej! :)

[@prz3myslawc366]

Bardzo fajny filmik, mi osobiście bardzo przypadł zawsze czegoś nowego mogę się nauczyć. Łapka w górę i oby tak dalej :) Pozdrawiam ;)

[@KrzysztofFurtakDev]

Super❗ Dzięki bardzo za materiał 😃 Pomysł o serii z layoutami bardzo ciekawy i na pewno będę śledził❗ Pozdrowienia❗ 🙂

[@LucasMatuszewski]

Super, 2 nowe rzeczy nauczone, dzięki :) Nie używałem w praktyce flex-direction column, ale najwyższy czas zacząć :) Używałem co prawda & w SCSS ale nie wpadłem na to, że można w BEM tak fajnie tego używać.

[@xxlarwaxx]

MEGA PRZYDATNE! Właśnie ćwiczę CSS i dużo rzeczy (w tym flexbox) mi wyjaśniło! Czekam na więcej!

[@Funtoshi]

Jestem ZA! Świetny pomysł na taką serię ! Pozdro!

[@Pici3k]

Mega! Widzę, że mogłem do niektórych rzeczy podejść zupełnie inaczej. ☺️

[@hyal9623]

Mega 😍

[@wiktorios1229]

A może coś o stylowaniu checkboxów?

[@lukasniebochodek333]

Pomysł na serie : rewelacja :] Znam podstawy flex, grid i bem , ale jak próbuje je łączyć to często coś idzie nie po mojej myśli :) Ciesze się że będę mógł potrenować z przewodnikiem jak robić to prawidłowo .

[@sztylka87]

mega! odpowiadasz na potrzeby!!

[@2105randy]

Świetny pomysł! A możesz dodawać też linka do projektu w Figmie, żeby można sobie samemu spróbować zakodować od początku, bez patrzenia na Twój kod?

[@bartoszkozak]

Do stylowania checkboxów fajnie użyć: "-webkit-appearance: none;". Nie trzeba się bawić wtedy na afterach/beforach :) Tutaj przykład: kozakbartosz.github.io/Draft/#checkbox Pomysł na serie fajny. Ale nie podoba mi się podejście że to jest jeden layout i podchodzisz do tego w sposób taki że nigdzie więcej tych elementów nie wykorzystasz a fajnie by było uczyć się z tego również jakiś dobrych praktyk przy kodowaniu większych stron. Chodzi mi o takie rzeczy jak np. dodawanie wielkiego margin-top do buttona co powoduje że go się już nigdzie indziej nie wykorzysta bez dodawania zmian, a wystarczało objąć formularz jakimś div'em. Według mnie lepiej żeby z takiego filmiku wyciągnąć więcej dobrych praktyk niż np. samą znajomość css. Pozdrawiam.

[@helloroman]

Siema! Dzięki wielkie, mądrze gadasz, postaram się to uwzględnić w kolejnym odcinku. Tak jak mówiłem ten traktujmy trochę jak pilotaż, bo ciężko wysondować od razu czego ludzie oczekują :) pozdro!

[@Soyacz93]

Adam, jak uczyłeś się Figmy? Ja właśnie jestem na etapie nauki tego narzędzia. Masz może jakieś materiały do polecenia?

[@Kurtos81]

Przydatne i pomaga 😁.

[@konraduczak170]

Dobry kierunek, poproszę o templatkę do newslettera ;)

[@Janowik17]

Mega pomagasz! Dzięki :)

[@gustawtanski5827]

Wymyśliłem suchar :D (mam nadzieję, że nie było)! Jaka jest ulubiona bajka backendowca? CRUDowie

[@chaczyk]

Celowo zostawiasz domknięte inputy?

[@paweidzikowski8378]

Czy to nie będzie problematyczne na różnych rozdzielczościach jak wpisujesz wartości w pikselach?

[@robert2262]

A ja bym z chęcią zobaczył działający contact form w Twoim wykonaniu 😀

[@fraczakadrian]

Jest super, świetnie zapowiada się ta seria mam dwa pytania: 1. osobiście staram się podchodzić oszczędnie do klas czyli przykładowo w wypadku formularza ostyowałbym tak: .nazwa-formularz{} .nazwa-formularz input[type=text]{} .nazwa-formularz label{} .nazwa-formularz input[type=checkbox]{} .nazwa-formularz button{} Zawsze staram się duży layout tworzyć z małych "obiektów" pytanie czy to jest poprawne? 2. Drugie to może nie tyle pytanie co pewna sugestia, Roman layout wygląda super mimo to można go troszkę dopracować, chodzi mi o to, że jak wspomniałeś są pewne wzorce różnych elementów i można by stworzyć gotowe repozytorium kodów css, które są ładne i idealnie zakodowane tak aby każdy mógł tworzyć perfekcyjny kod

[@JokerSoundscape]

1. Nie, nie powinno się stylować po tagach, do tego służą właśnie klasy. Poza tym im większe zagnieżdżenie, tym więcej pracy będzie potrzebne, aby wyrenderować stronę. Dzieje się tak, ponieważ CSS czytany jest od prawej do lewej, więc najpierw w kodzie zostaną znalezione wszystkie labele, a dopiero z nich wybrane zostaną te, które znajdują się wewnątrz klasy nazwa-formularz.

[@marcinwachcinski1096]

Super seria się zanosi :)

[@SunFoxPL1]

Bardzo lubię Twoje filmiki (nawet jeśli nie zawsze ze wszystkim się zgadzam). Bardzo przyjemnie się je ogląda i w sumie jesteś jednym z najlepszych (jeśli nie najlepszym) polskich frontend devtuberów. Mam jednak prośbę o komentarz, co sądzisz o tym artykule w kontekście używania box-sizingu aastudio.fr/box-sizing.html . Dzięki za odpowiedź :)!

[@BlacKlyExactly]

Proponuje pod koniec serii (jeśli będzie) edytowanie kodu na responsywny. I kolejne odcinki z tego.

[@tekkutekk7459]

Bardzo dobry plan :)

[@h3xpoland69]

Lubię to! ;)

[@marcincirocki623]

Ja też w nieskomplikowanych form'ach używam samych placeholder'ów w input'ach, ale Google Lighthouse zawsze się świeci na czerwono, że potrzebne label'e, bo screen reader'y itd. Ustalanie szerokości i wysokości div'ów na sztywno, też nie jest chyba w większości przypadków dobrą praktyką, choć ekspertem nie jestem i mogę się mylić. Pomyślałem, że warto o tym wspomnieć. Poza tym jak zawsze dobra robota. Pozdrawiam :D

[@helloroman]

Dzięki za komentarz! Z labelami to prawda i w następnym odcinku to szybko sprostuję - myślę, że tutaj fajnie by wyglądały te a'la Material Design gdzie label wygląda jak placeholder, ale po focus leci nad input. Co do divów to nie ma zasady i uważam, że tutaj jest to jak najbardziej uzasadnione z tego względu, że ten form-box będzie wyglądał tak samo dobrze na małym laptopie jak i na full hd (nie ma potrzeby, żeby na dużym ekranie rozrastał się do monstrualnych rozmiarów). Poruszono tę kwestię w bardzo fajnej książce o web designie Refactoring UI.

[@marcincirocki623]

@@helloroman Ja robię tak, że div jest na szerokości ograniczony szerokością container'a, lub jednej z kolumn w container. Tak jak w bootstrap'ie. Długość określa się sama, poprzez ilość content'u, plus oczywiście margin'y i padding'i. W ten sposób nie określam wysokości na sztywno, a jak mi, lub użytkownikowi przyjdzie na myśl dopisanie kilku nowych zdań w tym divie, to nie ma problemu ze zmianą height w stylach za każdym razem. Raczej Ameryki nie odkryłem i chyba wszyscy działają podobnie. Zaś w tym pojedynczym przypadku to może dobre wyjście, ale to raczej tutorial dla początkujących, więc jak ktoś mniej ogarnięty nie pomyśli i z wyjątku zrobi zasadę to może każdy element na stronie w ten sposób ustalać (prawie przykładając linijkę do monitora :D ). Co skończy się tym, że przy dodawaniu responsywności zacznie myśleć o samobójstwie :D

[@SYNAPSEdwl]

Fajny styl! Może coś więc w tym klimacie ?

[@helloroman]

Cała seria będzie w takiej stylistyce, bo jest na tyle minimalistyczna że w miarę łatwo mi się to projektuje.

[@roadtosleep]

Mógłbyś wrzucić sam projekt graficzny? Chciałbym zrobić to sam, a dopiero potem porównać z Twoim kodem na filmie.

[@helloroman]

www.figma.com/file/5VKby5tFRPe13TN9PcRQ7F/Layout-cookbook?node-id=0%3A1 prosze, tylko font bedzie zepsuty

[@roadtosleep]

@@helloroman wielkie dzięki

[@LOLdjrabaanLOL]

mam bardzo nurtujace mnie pytanie :) ide dopiero do szkoly sredniej i nie mam pojecia czy chce sie zajmowac backendem czy frontendem, stad moje pytanie. Co uwazasz za bardziej przyszlosciowe? pomijajac inne aspekty, po prostu jestem ciekaw co wedlug ciebie moze miec wiekszy sens za 5-10lat? do tego jeszcze moglbys zrobic film na temat wyboru frontendu czy backendu rozwijajac te 2 kwestie. pozdrawiam

[@helloroman]

Ale przecież jedno i drugie to webdev. To jakbyś zapytał czy w aucie ważniejszy jest gaz czy hamulec 😀 to nie są jakieś dwa osobne byty.

[@LOLdjrabaanLOL]

w sumie, moze nie do konca to przemyslalem, chodzi mi bardziej czy twoim zdaniem jezyki bardziej techniczne (nie mam pojecia jak je nazwac) typu python, java, ruby maja szanse w przyszlosci byc bardziej rozchwytywane/niezastapione, czy na odwrot, uwazasz ze moze byc wiekszy popyt na jezyki frontendowe (ladnosc, czytelnosc strony, animacje) (chodzi mi głownie tez o to, czy uwazasz ze za 10 lat mozliwe jest zeby czesc tej pracy zabralo AI lub jakies boty, a jesli tak to jaki typ jezykow byloby najciezej zastapic)

[@helloroman]

@@LOLdjrabaanLOL 10 lat temu myśleliśmy, że strony we flashu to szczyt techniki i pół sieci na tym się opierało. Web development to jedno z najbardziej dynamicznych zagadnień programowania - jeśli oczekujesz jakiejkolwiek tak daleko idącej prognozy to nie możesz liczyć na racjonalną odpowiedź. Rób to co uważasz za ciekawe, bądź w tym dobry, pozostań ciekawski, ucz się nowych rzeczy. Dobrych programistów jest bardzo mało na rynku - jeśli nim zostaniesz, zawsze znajdziesz pracę. Nie ważne czy będziesz pisał w JavaScript, Pythonie czy Javie.

[@LOLdjrabaanLOL]

osobiscie tez tak czuje, bedzie trzeba sie dostosowac do tego co sie dzieje w swiecie it i to nie jest tajemnica, mam tylko nadzieje ze nie spelnia sie mokre sny wielkich jasnowidzow i w 10 lat nie zostaniemy wymienieni na maszyny:) w kazdym razie chcialem poznac twoja opinie wiec dzieki za poswiecony czas, ja tym czasem pojde nadal szukac w sobie powolania do jednej z drog programowania :) pozdrawiam

[@lexiu_]

Zarąbisty film ;)

[@Szybki1446]

Hej! Dopiero się uczę flexboxa, mógłby mi ktoś wytłumaczyć dlaczego trzeba było wrzucić display:flex również na ul? Dlaczego nie wystarczyło tego zrobić tylko na navie?

[@usdrealmano9897]

Bo wlasciwosc display nie jest dzidziczona wiec uzywasz jej dokladnie tam gdzie ma ona miec swoja funkcjonalnosc. Zarowno nav jak i ul potrzebowaly flexa aby sprowadzic elementy blokowe do jednego rzedu. Czyli jak usuniesz sobie display flex dla ul to itemy bedziesz mial jeden pod drugim, oczywiscie i przy display flex mozesz wymusic taka sytuacje (dzieki wlasciwosic flex column), bo jak widomo display flex przydaje sie do wielu innych zastosowan niz tylko poziomowania elememtow. Malo tego, czasem mozesz sie spotakc ze wrap jakigos flexa ma ni z gruszki tez flexa, pozornie nie wiadomo po co, a to jest zabieg stosowany przy ie11 (niestety ciagle wspieranej przegladarce przez wieksze korporacje), ktora nie w pelni obsluguje flexboxa a tego typu sztuczka potrafi naprwic tam np. flexowe centrowanie w pionie.

[@kamilniepamietam9543]

Roman, pytanko, na wielu stronach wielkości fontów są określane w rem'ach ale też np rem stosowany jest przy paddingach lub szerokościach, czy dobrą praktyką jest stosowanie rem'ów dla szerokości elementów itp czy raczej do takich rzeczy używać px? ;)

[@ewaevva4375]

najlepiej chyba % dla szerokości

[@ewaevva4375]

Sie czepiają niedomkniętego omyłkowo i domkniętych .

[@helloroman]

:D Przyzwyczajenia z Reacta z tymi dokmnięciami, zawsze o tym zapomniam jak piszę zwykły HTML

[@dawidkubicki5145]

w zakres "*" nie wchodzą również aftery i befory ? dla nich trzeba pisać osobne resety ?

[@helloroman]

Tu masz fajnie wyjaśnione dlaczego universal selector nie obejmuje pseudoelementów stackoverflow.com/questions/24794545/universal-selector-and-pseudo-elements

[@piotrkowalski9528]

Twój codepen ma niedomknięty H1. Szukałem dobre naście minut, dlaczego u mnie jest div z checkboxem przytulony do buttona, a u Ciebie nie... Po domknięciu H1 trzeba jeszcze line-height na div/label dać albo margin-buttom na button... Generalnie przychylam się też do opinii kolegów - XD lepsze niż figma :-) A Ty jak uważasz Adam?

[@mrowa1221]

Siema Roman! Super film. Mam jedno pytanie. Tag h1 jest celowo napisany bez slasha czy może wkradł się błąd? :)

[@DraKoN101x]

Dlaczego na początku filmu kadr się tak trzęsie? To celowy efekt?

[@helloroman]

O kurcze nawet nie zauważyłem - pewnie statyw mi krzesła dotykał i za bardzo tyłkiem wiercę jak gadam XD

[@marekpackiewicz9829]

Wincyj poproszę :D

[@lexiu_]

Pierwszy raz słyszę o programie Figma, widzę, że jest to odpowiednik Adobe XD. Pobrałem sobie tą Figmę i zacząłem w niej działać, ale wg. mnie, Adobe XD lepsze ;)

[@helloroman]

dość pochopna opinia jak na kogoś kto dopiero pobrał program ;) Figma ma sporo zalet, podobnie jak Adobe XD. Już dawno przestałem porównywać te programy ze sobą bo to nie ma sensu. Figma na bank jest o wiele szybsza i stabilniejsza + ma lepsze API które niedługo zostanie udostępnione do tworzenia pluginów. Ponadto masz kolaborację w czasie rzeczywistym no i możesz ją otworzyć w przeglądarce (działa tak samo szybko) co czyni ją najbardziej uniwersalnym programem graficznym.

[@tomaszgasior772]

@@helloroman Właśnie się zastanawiałem, czemu użyłeś Figmy, skoro wcześniej pojawiał się XD. Dla mnie dużą zaletą jest, że ma appkę na Linuksa! :) Niestety nie umiem tego używać, ale kiedyś się zepnę i nauczę, mimo bycia programistą, choćby sam dla siebie.

[@helloroman]

@@tomaszgasior772 fakt, że nie jestem grafikiem i nie muszę się „żenić” z konkretnym softem daje mi ten komfort, że mogę sobie dowolnie testować wszystkie programy :) Akurat tym razem padło na Figmę i bardzo mi się podoba

[@woket4730]

Może jakiś film o BEM? Bo widzę że używasz :)

[@helloroman]

no właśnie nigdy jakoś mi się nie chciało, bo nie jestem specjalistą od BEM, a żeby zacząć tego używać to wystarczy przeczytać w 5 minut dokumentację :P

[@usdrealmano9897]

@@helloroman dokumentacja dokumentacją, ale BEM pozornie jest banlny, w 5 min przy teorii dokumentacji jest zludne aby go od razu pojac tak aby porawnie, z palca zaczac go uzywac zwlaszcza przy duzych strukturach. Czesto obserwuje jak bardzo on potrafi byc nadinterpretowywany przez koderow, latwo mozna nim poplynaca i wyjsc poza jego ramy, do tego na poczatku potrafi bardzo spowolnic kodowanie, dlatego BEMa nalezy uzywac (zwlaszcza na poczatku) z pewnym dystansem (i tak jak wspomniales), stosowac go tak aby on mial pomoc a nie stal sie kloda, ktora blokuje programiste przed kwintesencja, bo latwo sie zrazic (chociaz ten dystans powoduje pozniej caly ten BEMowy chaos). Jednak w koncu jak sie go zalapie to bardzo ulatwia on logiczne, modulowe kodowanie.

[@asepticolandia]

7:00 - "Można zagnieżdżać dzieci w rodzicu" przywiało mi na myśl znaleziony w internecie żart: "Me: Sometimes, I wonder if non-tech friends wonder about my search history ... My google history: how to remove child from parent with fork"

[@helloroman]

Hahahah xD ale hardkor

[@TheZychol]

Strasznie zawiedziony jestem że nie ma psd na wzór aby zrobić samemu a sam link do codepen :(

[@helloroman]

Zychol ツ w innym komentarzu wklejalem link do figmy

[@jakub8517]

Następny odcinek może o bardziej nowoczesnym layout-cie

[@helloroman]

co to znaczy nowoczesny layout?

[@jakub8517]

Chodzi mi o to żeby dodać np więcej animacji, coś z podstaw js jeśli chciałbyś zrobić o tym materiał to Wielkie dzięki 👍💪

[@helloroman]

@@jakub8517 kumam - tak jak tłumaczyłem to nie jest seria o tym jak robić strony od a do z, tylko poruszamy tu kwestie wyłącznie layoutowe

[@jakub8517]

Ok dzięki za odpowiedź. Czekam może w przyszłości zrobisz taka serie bo naprawdę dobrze się od ciebie uczyć. Ale ta serię i tak będę oglądał bo można sobie przypomnieć wiele z podstaw.

[@7h3mon]

Nie polecam skracać klas BEMowych za pomocą &. Dlaczego? Weź potem szukaj w edytorze styli jak masz pocięte klasy... Powodzenia! Już nie raz to przerabiałem. W niewielkim projekcie to może nie być problem. W projekcie, gdzie kod pisze 40 frontowców... No tutaj już nie jest fajnie 🙂.

[@helloroman]

Robiłem tak w projekcie gdzie było nas siedmioro, ale jak sie wszyscy trzymali tej konwencji to nie zauważyłem niedogodności - ale wiadomo, kwestia co komu bardziej siedzi.

[@JokerSoundscape]

Wystarczy edytor tekstu niewiele lepszy od notatnika i będzie potrafił przekierować po kliknięciu klasy w HTML do pliku źródłowego niezależnie czy skracasz czy nie ;)

[@7h3mon]

Używam Sublime Text i jakoś jest całkiem sporo lepszy od notatnika.

[@JokerSoundscape]

Niektórzy lubią szpadel, inni wolą koparkę :) wracając do głównego tematu to sama dokumentacja Sassa mówi, że zapis użyty przez Romana jest właśnie pod BEM :)

[@7h3mon]

BEM czy nie BEM dzielenie klas może narobić problemu. Dlaczego nie można być fair wobec ludzi, którzy wolą używać innego IDE/edytora?

[@skaldycom]

Trochę słabe to robienie na oko. Gdzie "perfect pixel", już się tak nie robi?

[@helloroman]

Jakbym miał tak robić, to ten odcinek trwałby pewnie ze trzy razy dłużej - bardziej chodzi o pokazanie pewnego podejścia. Poza tym wartości fontów, paddingów, szerokości są dokładnie odwzorowane, więc chyba się tu delikatnie czepiamy panie kolego :P

[@skaldycom]

@@helloroman oj tam oj tam, nie bierz tego tak do siebie. Nie wszyskie komentarze to hejty ;) To miało być pytanie a nie stwierdzenie ;)

[@helloroman]

skaldycom absolutnie nie pomyslalem nawet o tym komentarzu jako o hejcie ❤️ peace!