Szkielet strony ⌨️ hello roman

[@DziedziuchProgramuje]

Super filmik, na pewno ułatwi życie wielu osobom 😁 no i fajnie, że puściłeś to do rozwijania dalszego 👍🏻

[@muradishmurodov44]

Dzięki za przydatny material, chciałbym poprosić o więcej takiego typu odcinków. Pozdrawiam :)

[@michadulik2000]

Cześć Roman! mam taki mały life-hack dla Ciebie.. Otóż jak robisz sobie katalog src i w nim js, styles, assets to możesz to napisać w jednej lini: mkdir -p src/{styles,assets,js}

[@helloroman]

Z tworzeniem katalogu super hack ♥️ skróconych flag nie używam za często w odcinkach żeby ludzie wiedzieli o co chodzi +/-. Oddzielam tryb normalnej pracy a tryb nagrywania tutoriali :p

[@bartekjonczy]

@@helloroman ogólnie, w bash/zsh jeśli robisz coś w nawiasach klamrowych to tak to działa, np. "mv plik{,.bak}" odpowiada "mv plik plik.bak"

[@Sinres2]

Super materiał ! Roman jak zwykle zaskoczy 😁😁❤️

[@chesterxp508]

Kolejny fajny filmik :)

[@NervenGaming]

A propos remontu i Twojego kawału: Co łączy Hitmana z budowlańcem? - Wykańczanie Badabum-tsss 😋

[@2sOkO3]

Roman, w jaki sposób radzisz sobie ze ścieżkami do zasobów? Zakładam, że w trakcie developmentu na przykład grafiki wrzucasz do /src/assets/images i przed publikacją robisz builda z przeniesieniem, kompresją grafik do /dist. Wtedy ścieżka określona w jsie/htmlu się zmienia. Czy może masz wypracowany inny schemat? Pozdrawiam :)

[@mimoid7862]

Też się właśnie nad tym zastanawiałem, a to dosyć ważna kwestia

[@2sOkO3]

Tylko, że index.html jest na tym samym poziomie co src i dist. W takim przypadku, żeby wejść do assets trzeba w ścieżce określić najpierw czy src czy dist.

[@igorswies5913]

Co sądzisz o preprocesorach typu Pug (dla stron statycznych oczywiście)? Moim zdaniem bardzo się mogą przydać w dużych projektach z dużą ilością plików (nie musimy co chwilę kopiować jeśli zmieniamy coś w nawigacji), nie wiem dlaczego ale w dzisiejszych czasach te technologie straciły na popularności

[@hrabianero]

osobiście zrezygnowałem ze względu na wydajność kompilacji

[@igorswies5913]

@@hrabianero ja tam wolę szybciej działającą stronę niż szybką kompilację ale co kto lubi

[@xdestris5399]

zamiast dodawać script na koniec body można użyc atrybut defer

[@Krzysiekoy]

true

[@helloroman]

I pyk pull requescik ;)

[@igorswies5913]

I tak jest szybciej do tego

[@MysterKnajt]

Pozwoliłem sobie dodać MR: github.com/helloroman/hello-roman-boilerplate/pull/3

[@MrShagohad]

hej! Jakiś czas temu trafiłem na coś takiego : github.com/parcel-bundler/parcel, znasz ? wiesz ? :) . Czy są jakieś przeciwwskazania do używania tego narzędzia ? Nigdy nie korzystałem z gulpa, webpacka więc nie mam porównania ... POZDRO!

[@cruznovsky]

Skoro trzeba wybierać poprzednią wersję stabilną ParallelShell, to może warto zainteresować się paczką Concurrently.

[@jakubparlej2216]

Jakiego motywu używasz w webstormie?

[@B1oodus]

Jest jakas zaleta robienia sobie npm scripts zamiast np gulpa? Jesli dobrze rozumiem to wlasnie zrobiles sobie task runnera od nowa. To nie jest jakas krytyka :P Ucze sie sam i poprostu ciekawi mnie twoja/wasza opinia :D

[@helloroman]

Generalnie npm scripts wyparly gulpa po prostu. Choć nadal pozostaje to kwestią opinii.

[@DziedziuchProgramuje]

Z npm korzystają praktycznie wszyscy a z gulpa coraz mniej osób, wiec używanie npm scripts jest imo bardziej praktyczne na ten moment 🙂

[@hrabianero]

W browsersync można po prostu dać browser-sync -s -w i będzie obserwowało wszelkie zmiany na wszystkich plikach.

[@helloroman]

To co, pull requescik? ;)

[@muczos]

@Hello Roman co to za wtyczka, która pozwala na ciemny motyw w GITHUB?

[@DziedziuchProgramuje]

Kuba ja korzystam z tego: chrome.google.com/webstore/detail/github-dark-theme/odkdlljoangmamjilkamahebpkgpeacp

[@meneltraz6651]

Czy w 2020 r. nadal można zdobyć pracę w IT bez wykształcenia wyższego? Czy strona Eduweb to dobry wybór aby nauczyć się programowania, aby potem bezproblemowo dostać pracę jako junior frontend deweloper?

[@helloroman]

Hej, nie musisz pisać trzech komentarzy o tej samej treści pod różnymi odcinkami :) Staram się odpisywać na wszystkie komentarze, gdzie widzę, że mogę pomóc. Ani Eduweb, ani Threehouse, ani Codecademy nie jest miejscem gdzie „nauczysz się programowania aby potem bezproblemowo dostać pracę”. Od zaczęcia nauki do rozpoczęcia pracy jest bardzo długa droga, która dla wielu okazuje się zbyt ciężka, dlatego proponuję po prostu zacząć się uczyć zamiast planować od razu jakie buty założysz pierwszego dnia pracy ;)

[@AdiPol1359]

Zna ktoś z Was jakąś fajną stronkę z darmowymi layoutami do własnych projektów? Mega lubię pisać strony WWW, bądź aplikacje webowe z wykorzystaniem electron.js, ale cholernie nie lubię myśleć o tym, jaki kolor ma do jakiego pasować itp.

[@jankiel3284]

Chodzi Ci o takie rzeczy jak Bootstrap ( getbootstrap.com/ ), Materialize ( materializecss.com/ ) bądź Bulma ( bulma.io/ )? Każdy z tych frameworków CSS - bo tak to się nazywa - wygląda domyślnie w miarę spoko, w tym paleta kolorów (>jak kolor ma do jakiego pasować) i jakieś domyślne marginy/paddingi, poza tym mają system gridowy. Używa się najczęściej dodając predefiniowane klasy CSS.

[@paulinadziobek6237]

Cześć Adam! Mam pytanie a pro po Twojej strony internetowej. Dlaczego style nie mają swoich plików css'owych/scss'owych tylko są w plikach js? Czy to jest związane ze specyfiką gatsby? Uczono mnie by style były w osobnych plikach (jestem poczatkujaca, robie strony w react). Czy może to kwestia tego, że jest to wersja produkcyjna? Wytłumacz mi proszę bo teraz zwariowałam i nie wiem co jest dobrą praktyką :D

[@helloroman]

Hejka, stosuje tam styled components, ktore są css pisanymi w js :)

[@paulinadziobek6237]

@@helloroman Jest to w jakis sposob bardziej wydajne, lepsze niz osobne pliki scss?

[@ComandeerPL]

@@paulinadziobek6237, raczej po prostu inne rozwiązanie, dostosowane pod konkretny workflow. Osobiście dla mnie wszelkie rozwiązania typu CSS-in-JS mają jedną wadę, wynikającą z ich specyfiki: style nie działają bez JS-a. No chyba że to narzędzie wypluwa normalne arkusze stylów - wówczas jest to po prostu inny sposób pisania CSS-a, więc kwestia preferencji.

[@outtrazd6552]

A jak mam potem używać sobie tego packed.json w innych projektach? Po prostu skopiować ten plik?

[@DziedziuchProgramuje]

OuttraZd to zależy czy tam korzystasz już z jakichś zależności i czy masz już inny package.json. Jeśli nie to tak, kopiujesz ten plik i wpisujesz yarn albo npm install w zależności od tego z czego korzystasz. Tylko musisz pamiętać że struktura folderów musi zgadzać się z tym co jest w package.json

[@outtrazd6552]

@@DziedziuchProgramuje Oki, dzięki!

[@helloroman]

Zazwyczaj tego typu rzeczy uzywa sie poprzez skopiowane repozytorium - patrz git clone

[@DziedziuchProgramuje]

W przypadku nowych projektów to dokładnie tak jak Roman mówi 😀 ja zrozumiałem że pytasz o już istniejące 🙂

[@sebastianf9831]

Do odpalania kilku komand z node na raz fajne też jest concurrently

[@pabas3792]

Ten parallelshell cos nie chce dzialac :/ a dziwne bo mam w wersji 3.0.1, a wczesniej tez browser-sync z -f nie dzialal. Dopiero z flaga -w sie odpalil :

[@owen19901]

Spróbuj użyć zamiast parallelshell - npm-run-all z flagą parallel ( "watch:all": "npm-run-all --parallel start watch:scss watch:js" ). Dla mnie ta paczka jest fajniejsza bo trochę mniej pisania w niej a komendy można pisać bez podawania npm run. Zawsze parę znaków krótszy kod :)

[@pabas3792]

Rafał dzięki za pomoc na pewno skorzystam :D

[@owen19901]

@@pabas3792 Polecam się :D xD

[@MichaBrakowski]

Dzięki @Rafał! Z Concurrently chodzi jak złoto. Jeszcze jedna uwaga, u mnie, na środowisku windows skrypty nie działają jeżeli zawierają jakikolwiek single-quote, więc wszystkie trzeba zastąpić kombinacją backslash i double-quote. Niby jest o tym mowa w dokumentacji npm, ale jak się to przeoczy to skrypt potrafi "umrzeć" podczas egzekucji, bez żadnej informacji o błędzie... :) Zatem, może się komuś przyda ta pozornie oczywista uwaga. ;)

[@jakubschulz4353]

Świetny materiał! Ale czy tylko ja nie rozumiem tych sucharów na początku odcinka?

[@helloroman]

Ten akurat byl w miarę intuicyjny :D

[@go_ninik]

ciekawe :D

[@devnullex]

Panie Roman, jak tam nasze pull requesty, które tam czekają? :)

[@helloroman]

Parę zmerdżowałem, ale teraz się przeprowadzam i szczerze mówiąc siadam do kompa bardzo rzadko. Ale pamiętam o Was i obiecuję, że sprawdzę ♥️

[@outtrazd6552]

Jak zostawię browser sync i node sass to mogę używać bo reszty to nie znam

[@ernestrudziec7210]

Śmiesznie się składa - Masz w swoich widzach również policjanta front-endowca ;) Oglądam wracając z nocki. Pozdrawiam i uśmiałem się 👮🏻‍♂️🤣

[@helloroman]

Haha 😂😂 pozdro!

[@mikoajchudy2688]

Fajny kot :D

[@szczeczaczoszczeczek5077]

Spoczko spoczko filmiczek :) Wywal z repo package-lock.json chyba że to celowo :P

[@helloroman]

Trzyma sie lockfiles w repo ziom

[@szczeczaczoszczeczek5077]

hello roman od kiedy ziom, bo coś mnie musiało ominąć ziom?

[@helloroman]

Zachęcam do researchu w necie ziom. Dlaczego miałbyś go nie trzymać w repo?

[@szczeczaczoszczeczek5077]

@@helloroman Faktycznie ziom. "Jeśli package-lock.json nie jest w folderze najwyższego poziomu, zostanie automatycznie zignorowany". A to ciekawe, bo kiedyś ucząc się gita słyszałem i czytałem ciągle, żeby go nie commitować, bo on jest dla npma po instalcji pakietów, a na repo wystarczy sam package.json. Kurde mole... albo sobie to wmówiłem albo źle zapamiętałem albo zostałem w tyle ze zmianami. Dzięki ziom za informacje. Lubię Cię Ziom. EDIT: Tyle razy się już wygłupiłem w komentarzach pod twoimi filmami, że mam obawy przed napisaniem jakiegoś.

[@le-hu]

@@szczeczaczoszczeczek5077 package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates. - jest potrzebny, jak to napisał ktoś mądry na SO - A file can't help produce a deterministic install if package-lock doesn't exist.

[@kezy2695]

Dla kogo jest taki szkielet? Moge go wykorzystać w moich aplikacjach jak pisze je w react?

[@helloroman]

Nie, tak jak tlumaczylem to jest do statycznych stron :)

[@Nesyulett]

:D

[@smigool666]

Przez naukę programowania zmarnowałem sobie życie. Poświęciłem wszystko żeby się tego nauczyć i nic z tego nie mam poza problemami. Gdybym tylko mógł cofnąć się w czasie prędzej bym się zajebał niż zaczął się tego uczyć. Nie polecam

[@xaven9227]

Moi kumple nie podzielili Twojego zdania i teraz zarabiają po 10k zł,także nie pitol.