Tutorial Javascript i REST API, ale bez ściemy

[@n3tr00x]

O wiele więcej takich materiałów! Chyba najwięcej można się z tego typu filmów nauczyć :)

[@Flowman1991]

Stary nie wiem jak wygląda Twoje życie poza frontendem, ale wydajesz się tak pozytywnym człowiekiem, że obserwować Ciebie to jest sama przyjemność. Również jestem samoukiem od 1,5 roku w branży, ale zawsze chętnie wracam do takich tutoriali. Pozdrawiam!

[@JZP]

Dzięki! To mega miłe :)

[@rowingmb]

Klimatyzacja. Forma bardzo fajna, ponieważ pokazuje rozwiązywanie problemów na bieżąco w przeciwieństwie do "wyreżyserowanych" materiałów, a to pokazuje, że nawet jak zadanie rozwiązuje doświadczona osoba to i tak czasem się pogubi czy musi dojść metodą prób i błędów ;)

[@Donioo_]

3 godzinny materiał, wow! Super robota, biorę się do oglądania!

[@darknessofshadow7302]

Serio sporo mi pomogles ^-^ dopiero zaczynam i dzieki waszym filmikom jestem w stanie sie serio rozwijać, pozdrawiam

[@_vision_]

potężne źródło informacji dla każdego kto uczy się programować, bardzo fajne i ciekawie prezentowane :)

[@paula.Elf_]

Koniecznie więcej takich zadań do wspólnego przerobienia !

[@kamonek]

Mega materiał! Super, że objaśniasz wszystko co właśnie robisz. Dzięki!

[@ukaszklekner4098]

Klimatyzacja! Super odcinek! Szkoda ze jak ja uczylem sie to nie znalazlem takich fajnych tutkow z projektami :P Gratsy!!!

[@somersby8328]

Fajne zadanie jutro biorę się do roboty i też spróbuje pyknąć . Miłego oglądania życzę nie będę oglądać aby nie psuć sobie zabawy 😎

[@matteod1571]

Materiał konkret! Oby więcej takich filmów ps. masz "browara" w Krk!:) Ogromne dzięki za Twoja robotę! KLIMATYZACJA!!!!

[@JZP]

Uhuh, jakbyś mnie kiedyś spotkał na mieście to zbij pionę! Pozdro :)

[@patrykopala770]

Lubie oglądać takie odcinki. "Klimatyzacja"

[@sylwesterbednarz8320]

Klimatyzacja!

[@legolas2522]

Kurcze na początku odcinka pełny życia, sił i chęci do wszystkiego.. Po 3h kodzenia zostało tylko 'i' :D Dobra robota - na końcu mi też się zaczęło wszystko w oczach mienić od tych wszystkich creatów i apendów xd Bez klimy nie da sie żyć, potwierdzam :D

[@JZP]

Oj tak, mi też spiekło przewody :D Pozdro!

[@legolas2522]

@@JZP Mam w sumie dwa pytanka, powiązane ze sobą. Używasz do dodawania elementów appendChild. Czemu nie używasz nowszego append? Druga kwestia czemu nie dodajesz najpierw elementów do 'fragmentów', a następnie dopiero tego fragmentu do rodzica? Z tego co się orientuję appendem możesz dodać wszystkie powyższe elementy skracając kod (pomijam miejsca gdzie kolejność dodawania jest istotna), a za pomocą fragmentów polepszasz wydajność. Chyba, że coś źle rozumuje albo jest coś z powyższymi sposobami nie tak. Pozdrawiam !

[@mrdevtic]

Klimatyzacja xD ale Cię ten REST wymęczył 😄 pozdrawiam 👋

[@tomaszszydowski2754]

Klimatyzacja! Świetny tutorial!

[@sleepy6070]

Dzięki! Klimatyzacja!

[@Anna-ih4ec]

Świetny materiał, Dziękuję! .... Klimatyzacja ;)

[@Nutri-Know-It-All]

klimatyzacja, dzieki! :D

[@JZP]

Ależ proszę! :D

[@xSatanisticx]

Zakodowałem z Tobą całość, choć materiał na 3h to zajęło mi to ponad 6h z własnym myśleniem. Fajny odcinek :) Mam kilka zagadnień do omówienia: 1. Aplikacja się wywala na "Aland Islands". Tak to jest jak sie nie pisze testow na froncie :P Mozliwe, ze niektore panstwa tez nie dzialaja, wylapalem na ten moment tylko 1 przyklad. 2. Type module wystarczy uzyc tylko raz, nie trzeba kazdego pliku jsowego dodawac do scriptu w htmlu. Wiec samo załatwia temat. 3. Zamiast appendChildować tyle razy lepiej byłoby użyc append i dać kilka argumentów (choć jest to operacja wolniejsza) np. leftColumnElement.append( createInfoElement('Native name', country.nativeName), createInfoElement('Population', country.population), createInfoElement('Region', country.region), createInfoElement('Sub region', country.subregion), createInfoElement('Capital', country.capital) ) 4. Czemu wbijasz wszystko na sztywno za pomocą pikseli? 5. Strukturę htmlu można w niektórych miejscach lepiej zapisać, te divy w divach trochę bolą. Zamiast diva ze strongiem i spanem, mozna dać samego 'p' ze wstrzyknietym 'strongiem'. 6. Osobiscie unikam stylowania po ID, w Twoim przypadku wole .filters input zamiast #query (wiem, ze nie skupiasz sie na stylowaniu, ale akurat to mnie zaintrygowalo). 7. Czemu #root nie dodales do jakiegos stworzonego elementu np. section albo po prostu div, a zdecydowales sie wynieść .filters poza main? Nauczylem sie: 1. Pierwszy raz robilem routing z windows.location.search, milutko :). 2. Poznałem "toLocaleString". 3. Z komentarzy wyczytałem o "createDocumentFragment, bardzo ciekawe, postaram się zapamiętać i używać Dzięki za materiał, jak odpocznę to dokończę całość zadania :)

[@andrzejszelka6278]

Klimatyzacja :)

[@chesterxp508]

GoodJob! Klimatyzacja

[@yourSOULismy]

Uwielbiam wasze materiały ale jak widzę 3,5h film to już wiem że cały dzień będę go przerabiać i znów żona będzie zła, że po nocy siedzę z "tym" facetem a nie z nią xD ale za to powiedziała że masz miły głos i dobrze się Ciebie słucha. P.S. klimatyzacja dobra rzecz ;) 21:37 dobre heheszki tam macie

[@JZP]

Haha, dzięki!

[@martagrodzka9203]

idź lepiej do tej zony, IT-LIFE Balance!!! :D

[@estasicki234]

Super sprawa! Samo mięso!

[@belkocik]

Fajnie pokazane jak pracować z modułami :-)

[@gosiekk13]

Klimatyzacja 👌

[@dropka2pl]

klimatyzacja ;)

[@doner_tv4853]

Klimatyzacja! A teraz trzeba opanować JS po HTML i CSS/SCSS :)

[@svelte-code]

Ja zachwycony, jestem na etapie z JS wiem, że nic nie wiem przeprowadź mnie za ręke to w końcu coś zrozumiem. DZIĘKI !

[@arunsood5333]

Klimatyzacja

[@maers8260]

Będzie kiedyś tego typu materiał, ale napisany w typescript?

[@JZP]

O rany, chętnie :D

[@Flowman1991]

@@JZP TS for ever

[@maers8260]

@@JZP W takim razie czekam z niecierpliwością :D

[@Intothesky88]

klimatyzacja :D

[@nmnthgfbv]

Super film. Więcej takich projektów bez cięć. Natomiast moję małe ale, zamykajcie na przyszłość boczne okno VSC(+mały zoom :) ) bo możliwe, że tak samo jak ja, początkujący nie mają lapka + 2 monitorów, aby te malutkie litery świetnie widzieć. :)

[@martynakiljan2334]

Super! Może nagralibyście kurs/tutorial z OOP? Strasznie mało jest materiałów po polsku :( pozdrawiam!

[@dawidkubicki5145]

hmm czy przy tworzeniu modułów nie wystarczyłoby dać głównemu plikowi type module bez dodawania drugiego skryptu ?

[@Fox_Programmer]

jest podobna strona dla backendu?

[@kno1181]

Czy istnieje alternatywna strona dla frontend mentor, tylko, że z backendem?

[@designkarakter]

czemu nie wrzucacie nowych tutoriali, projektów? przecież dobrze to wychodzi, tylko więcej trzeba ;)

[@JZP]

Bo mamy też pracę i inne obwiązki - staramy się nagrywać jak najcześciej i jednocześnie się nie zajechać :)

[@twoplustwoequals5733]

@@JZP spoko, ale przydałby się nowy projekcik z fontendmentor - może w reakcie tym razem

[@wsciekynerd3099]

34:04 Zupełnie jakbym siebie widział. Też się często gubię w nawiasach. XD Ogóle fajne materiały z tymi "pomyłkami" rozwiewają takie demotywujące poczucie beznadziei podczas nauki. Bo skoro nawet komuś, kto już tak długo zajmuje się programowaniem zdarzy się czegoś nie wiedzieć, czy zgubić się w nawiasach to chyba nie ma się czym przejmować. XD

[@calwera85]

klimatyzacja

[@Johny_Scooba123]

Bardzo fajne te tutki bez ściemy :D Możecie pomyśleć nad jakąś grubszą apką z serią filmów w takim stylu (może TypeScript dla odmiany), ewentualnie w formie live'ów :)

[@M.A.G.N.E.T.E.R]

Bez ściemy to najbardziej legit stwierdzenie w internecie haha :D Zaraz po tak przeczytałem regulamin i tak mam 18 lat :D

[@dapolcio3405]

Kiedy dodajesz elementy do listy zwłaszcza jak jest ich dużo to wydajniej chyba będzie dodać je najpierw do fragmentu (createDocumentFragment) a dopiero potem fragment dodać do listy

[@JZP]

Racja!

[@aleksanderoleszkiewicz2760]

klimatyzacja xD

[@PURPLEBLACK]

Następny projekt może w TypeScript?

[@JZP]

ok

[@PURPLEBLACK]

AKA projekt, po którym rzucasz JS i zaczynasz używać frameworka

[@twoplustwoequals5733]

zrobicie jakiś kursik z React ? uczę się teraz, mam problem, żeby dobrze "state" zrozumieć, może w polskim wykonaniu lepiej bym ogarnął 😅

[@gw0zdziu273]

Fajny kurs ma Hello roman, ale jest płatny, bo musisz wspierać kanał

[@twoplustwoequals5733]

@@gw0zdziu273 eh już kupiłem jeden na udemy, ale mnie drażni instruktor, bo kto inny promował, a 95% kursu kto inny prowadzi ..., ściema na całego ..., a chyba jest już za późno, żeby zwrócić, ale powodzenia z takim podejściem, bo już nigdy nie kupie nic od niego, więc szukam czegoś za free

[@Malutki243]

Mam pytanie czy warto zaczynać od programu Codepen czy lepiej od razu zaczynać naukę programowania w Visual Studio Code?

[@JZP]

Od razu VSC :)

[@Malutki243]

@@JZP Dziękuję serdecznie za odpowiedź, robisz świetne materiały, przede wszystkim wytłumaczysz wszystko na "chłopski" rozum. Serdecznie pozdrawiam :)

[@djdiejususis1839]

Hej. Mam pytanie zaczalem dwa tygodnie temu naukę Pythona. Czy lepiej nauczyć się Pythona, w sensie, klepać dalej kod, próbować robić bardziej zaawansowane rzeczy, czy raczej delikatnie próbować też HTML, próbować budować strony itd? Proszę o jakas podpowiedź :)

[@JZP]

To zależy co bardziej Ci się podoba - jeśli podoba Cię się backend lub praca z danymi, to lepiej zostać przy pythonie. Jeśli bardziej podoba Ci się frontend i tworzenie stron, to wtedy warto przejść do HTML i CSS :)

[@djdiejususis1839]

@@JZP dziękuję bardzo za odpowiedź. Tak, myślę że backend to jest coś dla mnie, a wy może planujecie nagrać jakiś obszerniejszy materiał na ten temat? Dzięki za to co robicie, to jest mega wartościowe :)

[@JZP]

@@djdiejususis1839 Tak, w przyszłości powinno się pojawić coś o backendzie :)

[@marcinmagala9453]

Cześć, super materiał! Pytanie: W filmie Twoja aplikacja dla każdego kraju tworzy kilka elementów co sumarycznie daje ponad tysiąc poszczególnych elementów, które aplikacja musi stworzyć podczas renderowania strony. Ja tworząc strony, na których muszę stworzyć dużą ilość elementów robię to trochę inaczej: najpierw piszę kod html dla jednego elementu (taki szablon), następnie tworzę zmienną* w JavaScript, która zawiera ten szablon i w miejsce danych w tym szablonie np. liczba mieszkańców wpisuje zmienną np. pobraną z API (oczywiście nie pobieram za każdym razem na nowo danych z API tylko tworzę np. obiekt tak jak na Twoim filmie). W ten sposób moja zmienna* jest całym elementem, w który są insertowane wartości. Następnie taką zmienną* za pomocą metody .insertAdjacentHTML() wrzucam na stronę(lub do jakiegoś div, który ma zawierać w sobie te stworzone elementy). Czy te metody tworzenia elementów na stronie różnią się od siebie w kwestii np. wydajności aplikacji? Która z tych metod wg Ciebie jest lepsza i dlaczego? Mój sposób, który starałem się opisać można zobaczyć na moim GitHub: github.com/marcinmagala/Bankist/blob/main/script.js linijki: 126-136. Pozdrawiam

[@JZP]

Cześć! Bardzo fajne pytanie :) O twojej metodzie wspominam w pewnej części filmu. Jeśli chodzi o performance - zupełnie szczerze nie mam pojęcia co jest szybsze. Wydaje mi się, że zależnie od spefyciki elementu, który renderujesz, czasami szybsza będzie metoda pierwsza, a czasami druga. Jak korzystam z tej metody, bo nie się za sobą szereg fajnych możliwości - przede wszystkim tworząc każdy element po kolei z osobnych klocków mam dostęp do każdego z nich, mogę spowodnie przypinać event listenery, przekazywać referencje, itd. Jest to znacznie trudniejsze do osiągnięcia metodą, która używasz.

[@cursetommy]

Wartościowy materiał, Super robota!

[@JZP]

Winter is coming :)

[@cursetommy]

​@@JZP Dziękuję 😄

[@TheCzemp]

Czy wiesz może, czy istnieje sposób na wygenerowanie w vsc na szybko szkieletu strony,tzn 3 plików: index.html,style.css i script.js bez robienia tego ręcznie?

[@JZP]

Nie korzystam z czegoś takiego w VSC niestety :(

[@gw0zdziu273]

@@JZP VSC - Visual Studio Code

[@TheCzemp]

Dokładnie: Visual Studio Code

[@mateuszpaszczyk5845]

Super! jest szansa na githuba tego projektu, żeby móc się lepiej zapoznać?

[@JZP]

Dodałem w opisie :)

[@ziemnaklolix3895]

Jakie masz kolorwanie skladni?

[@JZP]

Używam theme Winter is coming :)

[@ziemnaklolix3895]

@@JZP Szkoda, że nie zrobiłeś tak aby wyświetlały się pełne nazwy borderów a nie tylko skróty.

[@DIEGO-ym9hg]

A może jakiś poradnik z tworzenia servera discord tworzenie botów itp

[@Yctftcyccyycyvvyyvtvt]

Cześć. Mam już bardzo fajną pracę, a jednym z jej plusów jest to, że często mam sporo wolnego czasu do własnej dyspozycji. Stąd też w ostatnim czasie sporo się zastanawiałem co można by dodatkowo robić, aby go jakoś spożytkować. Pomyślałem, że nauka programowania byłaby świetnym rozwiązaniem, ale zastanawia mnie, czy znalazłbym odpowiednią pracę, która miałaby na tyle elastyczne godziny, że mógłbym się tym zajmować w wolnym czasie. Moglibyście się wypowiedzieć, czy jest sens próbować nauki programowania, aby to było moją drugą pracą? Moglibyście podać przykłady czym konkretniej mógłbym się zajmować w takim trybie pracy?

[@JZP]

Hej! Możliwości pracy związanej z programowaniem jest naprawdę ogrom - sprawdź nasz odcinek 'Popularne specjalizacje w programowaniu' :)

[@kamyy.894]

Hejka, jestem samoukiem podobnie jak Wy, korzystam głównie z darmowej wiedzy dostępnej w internecie do nauki i mam pytanie. Mianowicie po opanowaniu HTML, CSS i JSa jakie języki programowania są najbardziej wskazane do dalszej nauki? Wielkie dzięki za cały kontent jaki zapewniacie i życzę Wam jak najlepiej 🙏🙏 Z góry dzięki.

[@JZP]

Jeśli chcesz zostać frontendowcem, to nie potrzebujesz dodatkowych języków - możesz zacząć naukę jakiegoś frontendowego frameworka, np. React albo Angular.

[@kamyy.894]

@@JZP Jeszcze raz dziękuję za pomoc i odpowiedź

[@kontozamkniete9575]

Pytanie trochę nie na temat. Jak wyglądają pierwsze dni juniora front enda (gdy jest to jego pierwsza praca)? Zaczynam studia i szukam pracy w front endzie, nie jestem w tym jakiś genialny ale szybko się uczę na praktyce i trochę martwi mnie czy jest szansa że mnie zatrudnią ale na początku będą brać poprawkę że nie wszystko wiem i dadzą mi się poduczać na polach w których mam braki. Xd

[@JZP]

Spokojnie, nie wymaga się od juniorów, żeby znali odpowiedzi na wszystkie pytania od razu :)

[@kontozamkniete9575]

@@JZP Dzięki :D

[@mattf6454]

@@kontozamkniete9575 zależy od firmy. Jak ja zaczynałem od juniora fullstacka z zerowym expem to już coś tam wymagali i bywało ciężko. Z własnego doświadczenia powiem że nic nie daje tyle nauki co praca nad komercyjnym projektem z kompetentym zespołem. Możesz się spodziewać na początku bardzo dużej ilości uwag co do kodu i być może krytyki, problemów których nie będziesz mógł rozwiązać, ale trzeba początki przeboleć, wyciągać wnioski i nie bać się pytać. Sama nauka tu nigdy się nie skończy. No ale żeby dostać tę pracę to w większości przypadków trzeba mieć tego expa i już coś tam ogarniać, być może trochę szczęścia. Powodzenia

[@mateuszwojewnik3773]

Ja mam zgoła inne pytanie, polecisz fotel? Warto?

[@JZP]

W tej cenie jest całkiem spoko - możesz sobie obczaić odcinek o stanowisku pracy, tam mówię więcej o fotelu :)

[@caqu4]

Klimatyzacja mi nie działa ;(

[@soulhunter7003]

Dla krajów nieposiadających kodu CIOC (np Wyspy Kokosowe, Gujana Francuska) wyrzuca błędy. "Uncaught (in promise) TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))" "Failed to load resource: the server responded with a status of 400 (Bad Request)"

[@czapskia1]

Na jaki level to jest zadanie ? :D

[@JZP]

Moim zdaniem na junior level :)

[@JZP]

Który fragment sprawił Wam najwięcej problemu?

[@przemekp5459]

Data fetching

[@marcinczernek4762]

Lepiej Ci się pracuje, programuje słuchając przy tym, takiej spokojnej muzyki?

[@coderdaxezy9996]

I once asked programmers at what age they started and they replied that every good programmer started at the age of 12, what's your opinion?

[@JZP]

I don't agree :)

[@twoplustwoequals5733]

that make literally 0 sense, lol programming is not like sport, you can maintain proficient brain thought whole lifespan basically

[@selfmaster1123]

się przejmujesz literówkami które są normalne ..., hmm ja bym się bardziej przejął bardziej tym, że te filtry to jednak słabo wytłumaczone ...

[@JZP]

Dzięki za komentarz! Co konkretnie mogło być wytłumaczone lepiej? Postaram się poprawić na następny raz :)

[@Sido626]

Czy ktoś przeszedł cały tutorial bez problemów ? Nie sugeruje że jest zły bo przeszedłem godzine i pojawiły sie problemy nieczytania API ,lub tych modułów js Nie wiem jak rozwiazać te problemy ale walcze i chyba zaczne od początku

[@Lauraa_RL]

Oho

[@Falwack]

O, cześć Laura

[@ZdrowyKod]

Skoro Ty to robisz 3h i musisz się natrudzić to jak ma to Junior zrobić? 😂 Przepraszam: osoba która chce zostać juniorem

[@wojciechsobczak6163]

Klimatyzacja ;)

[@kp1976]

Klimatyzacja.

[@imigi427]

klimatyzacja

[@andrzejbuleczka]

Klimatyzacja :D

[@zoraak7]

klimatyzacja :)

[@sq3jpm]

Klimatyzacja

[@krupar840]

Klimatyzacja

[@damianosiecki6692]

Klimatyzacja

[@owszystkim5415]

Klimatyzacja

[@ukasznowak21]

Klimatyzacja