{"id":10190,"date":"2021-01-28T12:00:00","date_gmt":"2021-01-28T11:00:00","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-22\/"},"modified":"2022-09-19T13:16:46","modified_gmt":"2022-09-19T11:16:46","slug":"frontend-thursday-22","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-22\/","title":{"rendered":"Frontend Thursday vol. 22"},"content":{"rendered":"

Hej
W zesz\u0142ym tygodniu widzieli\u015bmy si\u0119 po raz pierwszy w nowym miejscu, a w tym tygodniu widzimy si\u0119 po raz pierwszy w nowym dniu. Witam Was wi\u0119c w pierwszym Frontendowym Czwartku i \u017cycz\u0119 mi\u0142ej lektury .<\/p>\n

1. How We Improved SmashingMag Performance <\/h2>\n

W sieci mo\u017cemy znale\u017a\u0107 ca\u0142\u0105 mas\u0119 artyku\u0142\u00f3w i prezentacji na temat optymalizacji aplikacji Angularowych, Reactowych czy napisanych w Vue. Tym, co \u0142\u0105czy wszystkie te materia\u0142y (a przynajmniej wi\u0119kszo\u015b\u0107 z nich), jest nastawienie na stron\u0119 teoretyczn\u0105 problemu. Lista 10 naj\u0142atwiejszych optymalizacji mo\u017ce co prawda przyda\u0107 si\u0119 od czasu do czasu, ale nie pomo\u017ce nam ona zdiagnozowa\u0107 w\u0105skich garde\u0142 w du\u017cej i z\u0142o\u017conej aplikacji.<\/p>\n

Na podstawie naszych obserwacji dotycz\u0105cych materia\u0142\u00f3w w Keep Up\u2019ie (serdecznie zapraszamy ) wiemy, \u017ce najbardziej interesuj\u0105 Was prawdziwe historie, z jakimi mierz\u0105 si\u0119 deweloperzy. Z tego te\u017c powodu dzi\u015b chcemy podzieli\u0107 si\u0119 z Wam tym, co tygryski lubi\u0105 najbardziej, czyli histori\u0105 ludzi stoj\u0105cych za portalem SmashingMag i ich pr\u00f3b\u0105 optymalizacji strony. Od razu ostrzegam jednak, \u017ce oryginalny materia\u0142 to spora koby\u0142a i raczej nie nadaj\u0119 si\u0119 do przegl\u0105dni\u0119cia na jednej przerwie kawowej. Nie ma jednak si\u0119 co dziwi\u0107: z\u0142o\u017cony i trudny temat musia\u0142 zaowocowa\u0107 d\u0142ugim tekstem.<\/p>\n

Historia SmashingMag zaczyna si\u0119 tak samo, jak historia wi\u0119kszo\u015bci aplikacji: od czystego, szybkiego kodu i wszystkich mo\u017cliwych metryk \u015bwiec\u0105cych si\u0119 na zielono . Dalsza cz\u0119\u015b\u0107 historii r\u00f3wnie\u017c jest standardowa: pojawiaj\u0105 si\u0119 nowe wymagania i funkcjonalno\u015bci, a metryki powoli zmieniaj\u0105 kolor najpierw na \u017c\u00f3\u0142ty , a nast\u0119pnie czerwony . Deweloper, kt\u00f3ry nigdy nie prze\u017cy\u0142 tej historii niech pierwszy rzuci kamieniem.<\/p>\n

Autor Frontendowego Czwartku w momencie publikacji materia\u0142u<\/figcaption><\/figure>\n

Kiedy stajemy przed przeci\u0119tnymi wynikami w Lighthouse, cz\u0119sto mo\u017cemy poczu\u0107 si\u0119 zagubieni. Google co prawda sugeruje nam, co mo\u017cemy usprawni\u0107, ale nie zawsze s\u0105 to sugestie dobrze identyfikuj\u0105ce przyczyn\u0119 naszych problem\u00f3w. Programi\u015bci ze SmashingMag zacz\u0119li swoj\u0105 analiz\u0119 nie tylko od dok\u0142adnego przygl\u0105dania si\u0119 raportom Lighthouse i Webpack Bundle Analyzer, ale te\u017c od nagrania jak \u0142aduj\u0105 si\u0119 poszczeg\u00f3lne strony i dok\u0142adnego przygl\u0105dania si\u0119 temu procesowi w zwolnionym tempie. Do stworzonych w ten spos\u00f3b nagra\u0144 autorzy artyku\u0142u wracaj\u0105 kilkakrotnie, bo w po\u0142\u0105czeniu z analiz\u0105 czasu zu\u017cycia procesora pozwalaj\u0105 im one lepiej zrozumie\u0107, co w\u0142a\u015bciwie si\u0119 dzieje.<\/p>\n

Po zdiagnozowaniu b\u0142\u0119d\u00f3w przychodzi czas na eliminacj\u0119 w\u0105skich garde\u0142 i zazwyczaj na papierze jest to prostsze ni\u017c w rzeczywisto\u015bci. W przypadku SmashingMag kluczowe okaza\u0142o si\u0119 zoptymalizowanie CSS-\u00f3w (ciekawostka: portal najpierw \u0142aduje wszystkie style potrzebne do wyrenderowania pierwszego tysi\u0105ca pikseli wysoko\u015bci, a nast\u0119pnie do\u0142adowywuje ca\u0142\u0105 reszt\u0119), uporz\u0105dkowanie kolejno\u015bci \u0142adowania skrypt\u00f3w, ograniczenie rerender\u00f3w i wydzielenie cz\u0119\u015bci komponent\u00f3w z g\u0142\u00f3wnego bundla. <\/p>\n

2. Angular v11.1 released<\/h2>\n

W tym tygodniu release mia\u0142 Angular w wersji 11.1. Deweloperzy nadal pod\u0105\u017caj\u0105 za wyznaczon\u0105 road map\u0105 i skupiaj\u0105 si\u0119 g\u0142\u00f3wnie na naprawie bug\u00f3w i usprawnianiu \u015brodowiska deweloperskiego. To, co najbardziej rzuci\u0142o mi si\u0119 w oczy to naprawa kilku b\u0142\u0119d\u00f3w wyst\u0119puj\u0105cych na starszych przegl\u0105darkach, naprawa jednej z luk bezpiecze\u0144stwa jaka wyst\u0119powa\u0142a przy korzystaniu z Server Side Renderingu, czy szereg nowych funkcjonalno\u015bci Language Servera. Prawdopodobnie straci\u0142em ju\u017c uwag\u0119 wi\u0119kszo\u015bci z Was, wi\u0119c nie b\u0119d\u0119 dalej przynudza\u0142 i wszystkich zainteresowanych dok\u0142adn\u0105 list\u0105 zmian odsy\u0142am do Githubowego changelogu<\/a>.<\/p>\n

Troch\u0119 obok wydania nowej wersji, w Angularze zawita\u0142a lepsza obs\u0142uga b\u0142\u0119d\u00f3w. Od teraz b\u0142\u0119dy posiada\u0107 b\u0119d\u0105 unikalny error code, kt\u00f3ry pozwoli \u0142atwiej odr\u00f3\u017cni\u0107 b\u0142\u0119dy Angulara od b\u0142\u0119d\u00f3w TypeScriptu czy przegl\u0105darki. Opr\u00f3cz tego na podstawie error code b\u0119dziemy w stanie odr\u00f3\u017cni\u0107 b\u0142\u0105d kompilatora od b\u0142\u0119d\u00f3w runtime i przyporz\u0105dkowa\u0107 je do jednej z 8 g\u0142\u00f3wnych kategorii (np. Change Detection, Dependency Injection, Styling).<\/p>\n

Nowy schemat b\u0142\u0119d\u00f3w w Angularze<\/figcaption><\/figure>\n

Error Codes to nie jedyna zmiana, je\u015bli chodzi o lepszy developer experience jak\u0105 powitali\u015bmy w minionym tygodniu. Tw\u00f3rcy Angulara zgodnie z obietnic\u0105 z pocz\u0105tku roku pracuj\u0105 nad lepsz\u0105 dokumentacj\u0105 i w\u0142a\u015bnie trafi\u0142a do niej strona dedykowana najpopularniejszym b\u0142\u0119dom. Na samej dokumentacji jednak si\u0119 nie sko\u0144czy\u0142o, bo cz\u0119\u015b\u0107 z b\u0142\u0119d\u00f3w okraszona zosta\u0142a tutorialami dotycz\u0105cymi ich debugowania przygotowanymi przez Fireship.io. Je\u015bli ludzie stoj\u0105cy za dokumentacj\u0105 Angulara z podobn\u0105 pieczo\u0142owito\u015bci\u0105 podejd\u0105 tak\u017ce do pozosta\u0142ych obszar\u00f3w, to by\u0107 mo\u017ce wkr\u00f3tce Angular zyska miano najlepiej udokumentowanego frontendowego frameworku.<\/p>\n

Ja widz\u0105c, \u017ce jeden z fajniejszych youtuber\u00f3w b\u0119dzie wsp\u00f3\u0142tworzy\u0107 dokumentacj\u0119 Angulara<\/figcaption><\/figure>\n

3. Firefox 85 Cracks Down on Supercookies <\/h2>\n

Ka\u017cdy, kto kiedykolwiek postanowi\u0142 przegl\u0105dn\u0105\u0107. jakie dane zbiera na jego temat Google czy Facebook (albo chocia\u017c raz mia\u0142 dost\u0119p do narz\u0119dzi takich jak Google Analytics), wie ile informacji potrafi\u0105 zbiera\u0107 o nas r\u00f3\u017cne portale. W ostatnich latach sporo si\u0119 zmieni\u0142o i praktyki bezpiecze\u0144stwa przegl\u0105darek mocno ograniczy\u0142y mo\u017cliwo\u015b\u0107 \u015bledzenia interakcji u\u017cytkownika, je\u015bli ten sobie tego nie \u017cyczy. Tw\u00f3rcy oprogramowania \u015bledz\u0105cego nie stali jednak w miejscu i na ka\u017cde zabezpieczenie znajdowali luk\u0119. Nasze ciasteczka zosta\u0142y zablokowane? Nic straconego, mo\u017cemy zakodowa\u0107 ciasteczka w postaci obrazka na stronie wykorzysta\u0107 cache przegl\u0105darki. Takie praktyki tw\u00f3rcy Firefoxa nazywaj\u0105 Supercookies, bo s\u0105 one trudne w wychwyceniu i blokowaniu. Najnowsza wersja Firefoxa obiecuje wyeliminowa\u0107 Supercookies kosztem spadku wydajno\u015bci w najgorszym wypadku o 2%. Czy ukr\u00f3ci to mo\u017cliwo\u015bci tracker\u00f3w? Czas poka\u017ce, bo tw\u00f3rcy takiego oprogramowania to naprawd\u0119 kreatywni ludzie.<\/p>\n

Tw\u00f3rcy tracker\u00f3w po wypuszczeniu Firefox 85<\/figcaption><\/figure>\n

4. IPFS in Brave <\/h2>\n

O tym, \u017ce Brave dosta\u0142 natywne wsparcie dla IPFS (InterPlanetary File System) informowali\u015bmy was ju\u017c w Craftsmanship Saturday<\/a>, dlatego zainteresowanych pog\u0142\u0119bieniem tematu odsy\u0142am w\u0142a\u015bnie tam. Ja tymczasem chcia\u0142bym zwr\u00f3ci\u0107 Wasz\u0105 uwag\u0119 na to, co ta nowinka oznacza dla wszystkich Frontend Developer\u00f3w. Wraz z popularyzacj\u0105 IPFS mo\u017cliwe staje si\u0119 hostowanie swojej strony\/aplikacji w zdecentralizowanej sieci. Co wi\u0119cej taki hosting jest darmowy i mo\u017cecie zacz\u0105\u0107 z niego korzysta\u0107 ju\u017c dzisiaj! Je\u015bli jeste\u015bcie zainteresowani to odsy\u0142am Was do tego tutoriala<\/a>.<\/p>\n

Dlaczego uwa\u017cam, \u017ce zdecentralizowany hosting powinien Was zainteresowa\u0107? Ostatnie wydarzenia dotycz\u0105ce bana Trumpa w social mediach czy AWS wyrzucaj\u0105cy ze swoich serwer\u00f3w Pacela ponownie nakr\u0119ci\u0142y dyskusj\u0119 na temat cenzury w sieci. Najlepsz\u0105 odpowiedzi\u0105 na te problemy wydaje si\u0119 koncepcja Web 3.0 (w kt\u00f3r\u0105 wpisuje si\u0119 w\u0142a\u015bnie IPFS) i by\u0107 mo\u017ce warto wskoczy\u0107 do tego poci\u0105gu zanim ten na dobre nabierze rozp\u0119du.<\/p>\n

Deweloper wrzucaj\u0105cy swoj\u0105 aplikacj\u0119 do mi\u0119dzyplantarnego systemu plik\u00f3w<\/figcaption><\/figure>\n
\n

Mamy nadzieje, \u017ce si\u0119 podoba\u0142o i do zobaczenia za tydzie\u0144! \u26a1\ufe0f<\/p>\n

Je\u015bli chcesz otrzymywa\u0107 tego typu tre\u015bci spersonalizowane pod Ciebie, pobierz Vived!<\/p>\n