Ciekawy odcinek. Przydaloby się więcej konkretów. Np dłuższy odcinek gdzie badana jest duża strona jednej z bardzo znanych firm, gdzie są różne komponenty, ponadto ładują się zewnętrzne usługi spowalniające strone i moze cos jeszcze dla utrudnienia. W filmie mozna by bylo pokazac dobre praktyki, jak podchodzic, czym zbierac gdzie zapisywac, zestawiac te dane, jak interpretować wyniki itp... cos w rodzaju weź ticket z jiry na przetestowanie konkretnegp pagea i jak sie do tego zabrac od A (wziecie ticketa) do Z (zaprezentowanie wynikow klientowi). Z zasady wyobrażam sobie, że tego typu testy może nie są wymagane non stop, może bardziej jak wykryto przez użytkowników, że strona za wolno działa, z uwagi na duże niezadowolenie leci hejt, polecialo kilka ticketow w Jirze na optymalizacje, wiec dla mnie logicznym stepem jest zebranie metryk przed rozpoczeciem optymalizacji i nastepnie po zakonczeniu optymalizacji, gdzie powinnismy miec wynik ogolny jak strona dzialal wczesniej a jak dziala teraz i jak poszczegolne improvmenty poprawily performance konkretnych elementow na stronie.
Mam prośbę do Kacpra, żeby przy następnym nagraniu starał się unikać powtarzania "ok", "yhy". Odwraca to uwagę od tego co mówi gość. A tak poza tym, to świetny materiał. Dzięki
Czy macie zautomatyzowane w jakiś sposób mierzenie wydajności strony (np. co godzinę odpala się automat, który mierzy wydajność i zgłasza ostrzeżenie, jeżeli został przekroczony próg)?
Dokładnie tak, przydaje się to szczególnie od momentu w którym już nie tylko my robimy zmiany na stronie. W przypadku kodu zazwyczaj przy każdej zmianie odpalane są sprawdzenia korzystające z Lighthouse CI. Dodatkowo, wiele stron zbiera dane wydajnościowe od użytkowników (tak jak robi to Chrome) i wysyła do siebie, żeby mieć wgląd w nie szybciej niż po 28 dniach, ale tutaj wyzwaniem jest właśnie cała infrastruktura potrzebna do przechowywania i wizualizacji tych danych. Alternatywą są płatne rozwiązania jak na przykład SpeedCurve, który potrafi odpalać testy naszej strony co np. kilka godzin i wysyłać alerty że coś się pogorszyło.
Witam nagrywacie super merytoryczne i uczące filmy oglądam was od dłuższego czasu i prośba od widza mogli byście nagrać film jak zrobić na stronie internetowej -w pełni działającą i zapisującą rejestrację konta użytkownika na napisanej stronie - i w pełni działające logowanie do tego konta też na tej stronie Z góry dziękuje strasznym problemem mi to sprawia i nie wiem jak do tego podejść jeszcze raz dziękuję za pomoc.
Fajny materiał. Przydatna by była też rozmowa z kimś od bezpieczeństwa aplikacji. Coś w rodzaju checklisty elementów niezbędnych do sprawdzenia w każdej nowej aplikacji oraz listy elementów, o których developerzy często zapominają (lub nie wiedzą) przed wypuszczeniem na PROD.
Z tymi rozdzielczościami to się coś zagmatwało. 1. ajfony od 10 (X) czyli od 5 lat mają PPI na poziomi 450~460.. flagowce android np SG s22 ma 420 PPI. tak więc różnica w drugą stronę, ale pomijalna. 2. Wspomina to Autor, z rozdzielczości smartfonów wynika, że trzeba dawać obrazki ponad 1100 px na szerokość.. czyli jak w małym desktopie... i tu przydaje się właśnie picture zamiast img by smartfonom dac dobrą rozdzielczość, ale bez przesady.. np ~800 px ... no ale trzeba wdrażać picture z podziałem na urządzenia klienckie.
Osobom poszukującym rozwiązania dla problemu zbyt dużych plików CSS polecam "Tailwind CSS", który generuje ultra małe pliki wynikowe bazując wyłącznie na używanych przez nas klasach CSS. To zgoła odmienne podejście w porównaniu do Bootstrap'a, który zawsze dołącza nam całą swoją kolekcję klas. Jest to związane z tym, że Bootstrap nie bierze pod uwagę tego czego faktycznie używamy, a Tailwind analizuje nasz kod HTML (oraz JS!).
@@JZP Frontendowe frameworki typu react, vue, angular są teraz wymagane na rynku pracy, one niektóre rzeczy związane z performance zazwyczaj robią za programiste, ale niektóre rzeczy są do obsłużenia przez niego i w tym temacie chciałbym się dowiedzieć czegoś więcej np. jak Vite kompiluje bundle, jak można to usprawnic, czy warto uzywac serwer side renderingu przy malej stronie itd
Macie jakieś pytania do Mateusza? Wpisujcie w komentarzach!
Ciekawy odcinek. Przydaloby się więcej konkretów. Np dłuższy odcinek gdzie badana jest duża strona jednej z bardzo znanych firm, gdzie są różne komponenty, ponadto ładują się zewnętrzne usługi spowalniające strone i moze cos jeszcze dla utrudnienia. W filmie mozna by bylo pokazac dobre praktyki, jak podchodzic, czym zbierac gdzie zapisywac, zestawiac te dane, jak interpretować wyniki itp... cos w rodzaju weź ticket z jiry na przetestowanie konkretnegp pagea i jak sie do tego zabrac od A (wziecie ticketa) do Z (zaprezentowanie wynikow klientowi). Z zasady wyobrażam sobie, że tego typu testy może nie są wymagane non stop, może bardziej jak wykryto przez użytkowników, że strona za wolno działa, z uwagi na duże niezadowolenie leci hejt, polecialo kilka ticketow w Jirze na optymalizacje, wiec dla mnie logicznym stepem jest zebranie metryk przed rozpoczeciem optymalizacji i nastepnie po zakonczeniu optymalizacji, gdzie powinnismy miec wynik ogolny jak strona dzialal wczesniej a jak dziala teraz i jak poszczegolne improvmenty poprawily performance konkretnych elementow na stronie.
Bardzo dużo przydatnych i ciekawych informacji, brawo chłopaki dziękuję za materiał
Mam prośbę do Kacpra, żeby przy następnym nagraniu starał się unikać powtarzania "ok", "yhy". Odwraca to uwagę od tego co mówi gość. A tak poza tym, to świetny materiał. Dzięki
yhy, ok, tak zrobię! Dzięki za feedback ;)
Przydatny odc, dzięki
Czy macie zautomatyzowane w jakiś sposób mierzenie wydajności strony (np. co godzinę odpala się automat, który mierzy wydajność i zgłasza ostrzeżenie, jeżeli został przekroczony próg)?
Dokładnie tak, przydaje się to szczególnie od momentu w którym już nie tylko my robimy zmiany na stronie. W przypadku kodu zazwyczaj przy każdej zmianie odpalane są sprawdzenia korzystające z Lighthouse CI. Dodatkowo, wiele stron zbiera dane wydajnościowe od użytkowników (tak jak robi to Chrome) i wysyła do siebie, żeby mieć wgląd w nie szybciej niż po 28 dniach, ale tutaj wyzwaniem jest właśnie cała infrastruktura potrzebna do przechowywania i wizualizacji tych danych. Alternatywą są płatne rozwiązania jak na przykład SpeedCurve, który potrafi odpalać testy naszej strony co np. kilka godzin i wysyłać alerty że coś się pogorszyło.
@@krzksz5677 Dzięki!!!
chcemy więcej odcinków o wydajności!
Witam nagrywacie super merytoryczne i uczące filmy oglądam was od dłuższego czasu i prośba od widza mogli byście nagrać film jak zrobić na stronie internetowej
-w pełni działającą i zapisującą rejestrację konta użytkownika na napisanej stronie
- i w pełni działające logowanie do tego konta też na tej stronie
Z góry dziękuje strasznym problemem mi to sprawia i nie wiem jak do tego podejść jeszcze raz dziękuję za pomoc.
Kolega dał dość ciekawy temat też próbowałem i dość miernie mi to wyszło 🙄 Liczę na wasz film chłopaki może się dowiem co zrobiłem źle😆 👍
Lightbox i JQuery można ładować dynamicznie dopiero po klknięciu w zdjęcie gdy chcemy je powiększyć.
Fajny materiał.
Przydatna by była też rozmowa z kimś od bezpieczeństwa aplikacji.
Coś w rodzaju checklisty elementów niezbędnych do sprawdzenia w każdej nowej aplikacji oraz listy elementów, o których developerzy często zapominają (lub nie wiedzą) przed wypuszczeniem na PROD.
owasp top 10
Z tymi rozdzielczościami to się coś zagmatwało. 1. ajfony od 10 (X) czyli od 5 lat mają PPI na poziomi 450~460.. flagowce android np SG s22 ma 420 PPI. tak więc różnica w drugą stronę, ale pomijalna. 2. Wspomina to Autor, z rozdzielczości smartfonów wynika, że trzeba dawać obrazki ponad 1100 px na szerokość.. czyli jak w małym desktopie... i tu przydaje się właśnie picture zamiast img by smartfonom dac dobrą rozdzielczość, ale bez przesady.. np ~800 px ... no ale trzeba wdrażać picture z podziałem na urządzenia klienckie.
mega
Ja przejść od ciągłego oglądania tutoriali do ćwiczeń i praktyki kodowania? Trochę utknęłam 😅
Kozak jak zawsze 😍
Osobom poszukującym rozwiązania dla problemu zbyt dużych plików CSS polecam "Tailwind CSS", który generuje ultra małe pliki wynikowe bazując wyłącznie na używanych przez nas klasach CSS. To zgoła odmienne podejście w porównaniu do Bootstrap'a, który zawsze dołącza nam całą swoją kolekcję klas. Jest to związane z tym, że Bootstrap nie bierze pod uwagę tego czego faktycznie używamy, a Tailwind analizuje nasz kod HTML (oraz JS!).
Osobiście zaskoczyło mnie to z fontami xD
Performance przy uzywaniu frameworkow, nikt przeciez juz nie pisze stron w czystym html i css
?
@@JZP Frontendowe frameworki typu react, vue, angular są teraz wymagane na rynku pracy, one niektóre rzeczy związane z performance zazwyczaj robią za programiste, ale niektóre rzeczy są do obsłużenia przez niego i w tym temacie chciałbym się dowiedzieć czegoś więcej np. jak Vite kompiluje bundle, jak można to usprawnic, czy warto uzywac serwer side renderingu przy malej stronie itd
bardzo dobry temat. Dzięki za poruszenie
PS. mikrofon dobrze zbiera stukanie w biurko :-(
W przyszłości powstrzymajcie się z waleniem rękami o blat bo mikrofon to wszystko zbiera.
Robiliśmy to specjalnie, już nie będziemy