Tutorial Javascript i REST API, ale bez ściemy
ฝัง
- เผยแพร่เมื่อ 27 มิ.ย. 2024
- ⭐ zrozumiecreact.pl/ - Sprawdź nasz kurs React! ⭐
👉 Newsletter: zaczynamyprogramowac.pl 👈
🎤 Discord: / discord 🎤
🔥 Facebook: / zaczynamy.programowac 🔥
👉 Newsletter: zaczynamyprogramowac.pl 👈
Link do zadania na Frontend Mentor:
www.frontendmentor.io/challen...
Link do repo:
github.com/FilipMam/rest-api-...
00:00:00 Intro
00:01:20 Opis zadania
00:12:50 Plan działania
00:17:40 Start kodzenia
00:19:30 Czym jest API?
00:29:40 Data fetching
00:41:23 Renderowanie listy
01:03:00 Podstawowe style
01:38:38 Filtry
02:13:50 Detal
Na kanale znajduje się sporo odcinków, w których kodzimy strony i aplikację. Z perspektywy wielu z Was wygląda to tak, jakbyśmy od kopa otworzyli VSC i stworzyli w nim bez pomyłki stronę. Cóż... Realia wyglądają tak, że często do takich odcinków przygotowujemy się wcześniej, żeby samo nagranie przebiegło płynnie. Nawet pomimo tego zdarzają się błędy, które jesteśmy w stanie wyciąć w post produkcji, więc końcowy efekt wygląda na bardzo bezwysiłkowy.
Ostatnio prosiliśmy Was w ankiecie o wybranie frontendowe projektu, który zakodzimy bez wcześniejszego przygotowania. Chcemy w ten sposób pokazać Wam, że popełnianie błędów, trafianie na ściany i plątanie się we własnym kodzie jest normalne, nawet dla osób z większym doświadczeniem :)
Pierwszy odcinek z serii bardzo się Wam spodobał - stworzyliśmy w nim aplikację w HTML CSS i Javascript. Dzisiaj bierzemy na tapetę kolejny projekt i tym razem pomęczymy się wspólnie z REST API.
Filip Mamcarczyk
Kacper Sokołowski
O wiele więcej takich materiałów! Chyba najwięcej można się z tego typu filmów nauczyć :)
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!
Dzięki! To mega miłe :)
3 godzinny materiał, wow! Super robota, biorę się do oglądania!
Mega materiał! Super, że objaśniasz wszystko co właśnie robisz. Dzięki!
Koniecznie więcej takich zadań do wspólnego przerobienia !
Klimatyzacja! Super odcinek! Szkoda ze jak ja uczylem sie to nie znalazlem takich fajnych tutkow z projektami :P Gratsy!!!
potężne źródło informacji dla każdego kto uczy się programować, bardzo fajne i ciekawie prezentowane :)
Lubie oglądać takie odcinki.
"Klimatyzacja"
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 ;)
Klimatyzacja! Świetny tutorial!
Świetny materiał, Dziękuję! .... Klimatyzacja ;)
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 😎
Super sprawa! Samo mięso!
Dzięki! Klimatyzacja!
Materiał konkret! Oby więcej takich filmów ps. masz "browara" w Krk!:) Ogromne dzięki za Twoja robotę!
KLIMATYZACJA!!!!
Uhuh, jakbyś mnie kiedyś spotkał na mieście to zbij pionę! Pozdro :)
Klimatyzacja 👌
GoodJob! Klimatyzacja
klimatyzacja, dzieki! :D
Ależ proszę! :D
Fajnie pokazane jak pracować z modułami :-)
Klimatyzacja!
Klimatyzacja :)
Klimatyzacja :D
Klimatyzacja ;)
Klimatyzacja xD ale Cię ten REST wymęczył 😄 pozdrawiam 👋
klimatyzacja :D
klimatyzacja ;)
Klimatyzacja
klimatyzacja :)
Klimatyzacja.
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 !
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 :)
Super! Może nagralibyście kurs/tutorial z OOP? Strasznie mało jest materiałów po polsku :( pozdrawiam!
Klimatyzacja! A teraz trzeba opanować JS po HTML i CSS/SCSS :)
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
Oj tak, mi też spiekło przewody :D Pozdro!
@@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 !
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 :)
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ć. :)
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
Haha, dzięki!
idź lepiej do tej zony, IT-LIFE Balance!!! :D
Wartościowy materiał, Super robota!
Winter is coming :)
@@JZP Dziękuję 😄
klimatyzacja
Będzie kiedyś tego typu materiał, ale napisany w typescript?
O rany, chętnie :D
@@JZP TS for ever
@@JZP W takim razie czekam z niecierpliwością :D
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
klimatyzacja xD
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ź :)
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 :)
@@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 :)
@@djdiejususis1839 Tak, w przyszłości powinno się pojawić coś o backendzie :)
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.
Jeśli chcesz zostać frontendowcem, to nie potrzebujesz dodatkowych języków - możesz zacząć naukę jakiegoś frontendowego frameworka, np. React albo Angular.
@@JZP Jeszcze raz dziękuję za pomoc i odpowiedź
Super! jest szansa na githuba tego projektu, żeby móc się lepiej zapoznać?
Dodałem w opisie :)
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
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.
hmm czy przy tworzeniu modułów nie wystarczyłoby dać głównemu plikowi type module bez dodawania drugiego skryptu ?
Mam pytanie czy warto zaczynać od programu Codepen czy lepiej od razu zaczynać naukę programowania w Visual Studio Code?
Od razu VSC :)
@@JZP Dziękuję serdecznie za odpowiedź, robisz świetne materiały, przede wszystkim wytłumaczysz wszystko na "chłopski" rozum.
Serdecznie pozdrawiam :)
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)"
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
Racja!
Bez ściemy to najbardziej legit stwierdzenie w internecie haha :D Zaraz po tak przeczytałem regulamin i tak mam 18 lat :D
AKA projekt, po którym rzucasz JS i zaczynasz używać frameworka
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
Spokojnie, nie wymaga się od juniorów, żeby znali odpowiedzi na wszystkie pytania od razu :)
@@JZP Dzięki :D
@@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
Czy istnieje alternatywna strona dla frontend mentor, tylko, że z backendem?
Ja mam zgoła inne pytanie, polecisz fotel? Warto?
W tej cenie jest całkiem spoko - możesz sobie obczaić odcinek o stanowisku pracy, tam mówię więcej o fotelu :)
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?
Nie korzystam z czegoś takiego w VSC niestety :(
@@JZP VSC - Visual Studio Code
Dokładnie: Visual Studio Code
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?
Hej! Możliwości pracy związanej z programowaniem jest naprawdę ogrom - sprawdź nasz odcinek 'Popularne specjalizacje w programowaniu' :)
czemu nie wrzucacie nowych tutoriali, projektów? przecież dobrze to wychodzi, tylko więcej trzeba ;)
Bo mamy też pracę i inne obwiązki - staramy się nagrywać jak najcześciej i jednocześnie się nie zajechać :)
@@JZP spoko, ale przydałby się nowy projekcik z fontendmentor - może w reakcie tym razem
Który fragment sprawił Wam najwięcej problemu?
Data fetching
Oho
O, cześć Laura
zrobicie jakiś kursik z React ? uczę się teraz, mam problem, żeby dobrze "state" zrozumieć,
może w polskim wykonaniu lepiej bym ogarnął 😅
Fajny kurs ma Hello roman, ale jest płatny, bo musisz wspierać kanał
@@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
Następny projekt może w TypeScript?
ok
Na jaki level to jest zadanie ? :D
Moim zdaniem na junior level :)
Jakie masz kolorwanie skladni?
Używam theme Winter is coming :)
@@JZP Szkoda, że nie zrobiłeś tak aby wyświetlały się pełne nazwy borderów a nie tylko skróty.
A może jakiś poradnik z tworzenia servera discord tworzenie botów itp
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?
I don't agree :)
that make literally 0 sense, lol programming is not like sport, you can maintain proficient brain thought whole lifespan basically
Lepiej Ci się pracuje, programuje słuchając przy tym, takiej spokojnej muzyki?
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 ...
Dzięki za komentarz!
Co konkretnie mogło być wytłumaczone lepiej? Postaram się poprawić na następny raz :)
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
Klimatyzacja mi nie działa ;(
Klimatyzacja
klimatyzacja
Klimatyzacja
Klimatyzacja
Klimatyzacja
Klimatyzacja