Hej 馃憢
W zesz艂ym tygodniu widzieli艣my si臋 po raz pierwszy w nowym miejscu, a w tym tygodniu widzimy si臋 po raz pierwszy w nowym dniu. Witam Was wi臋c w pierwszym Frontendowym Czwartku 馃帀 i 偶ycz臋 mi艂ej lektury 馃.

1. How We Improved SmashingMag Performance 馃殌

W sieci mo偶emy znale藕膰 ca艂膮 mas臋 artyku艂贸w i prezentacji na temat optymalizacji aplikacji Angularowych, Reactowych czy napisanych w Vue. Tym, co 艂膮czy wszystkie te materia艂y (a przynajmniej wi臋kszo艣膰 z nich), jest nastawienie na stron臋 teoretyczn膮 problemu. Lista 10 naj艂atwiejszych optymalizacji mo偶e co prawda przyda膰 si臋 od czasu do czasu, ale nie pomo偶e nam ona zdiagnozowa膰 w膮skich garde艂 w du偶ej i z艂o偶onej aplikacji.

Na podstawie naszych obserwacji dotycz膮cych materia艂贸w w Keep Up鈥檌e (serdecznie zapraszamy 馃槈) wiemy, 偶e najbardziej interesuj膮 Was prawdziwe historie, z jakimi mierz膮 si臋 deweloperzy. Z tego te偶 powodu dzi艣 chcemy podzieli膰 si臋 z Wam tym, co tygryski lubi膮 najbardziej, czyli histori膮 ludzi stoj膮cych za portalem SmashingMag i ich pr贸b膮 optymalizacji strony. Od razu ostrzegam jednak, 偶e oryginalny materia艂 to spora koby艂a i raczej nie nadaj臋 si臋 do przegl膮dni臋cia na jednej przerwie kawowej. Nie ma jednak si臋 co dziwi膰: z艂o偶ony i trudny temat musia艂 zaowocowa膰 d艂ugim tekstem.

Historia SmashingMag zaczyna si臋 tak samo, jak historia wi臋kszo艣ci aplikacji: od czystego, szybkiego kodu i wszystkich mo偶liwych metryk 艣wiec膮cych si臋 na zielono 馃煝. Dalsza cz臋艣膰 historii r贸wnie偶 jest standardowa: pojawiaj膮 si臋 nowe wymagania i funkcjonalno艣ci, a metryki powoli zmieniaj膮 kolor najpierw na 偶贸艂ty 馃煛, a nast臋pnie czerwony 馃敶. Deweloper, kt贸ry nigdy nie prze偶y艂 tej historii niech pierwszy rzuci kamieniem.

Autor Frontendowego Czwartku w momencie publikacji materia艂u

Kiedy stajemy przed przeci臋tnymi wynikami w Lighthouse, cz臋sto mo偶emy poczu膰 si臋 zagubieni. Google co prawda sugeruje nam, co mo偶emy usprawni膰, ale nie zawsze s膮 to sugestie dobrze identyfikuj膮ce przyczyn臋 naszych problem贸w. Programi艣ci ze SmashingMag zacz臋li swoj膮 analiz臋 nie tylko od dok艂adnego przygl膮dania si臋 raportom Lighthouse i Webpack Bundle Analyzer, ale te偶 od nagrania jak 艂aduj膮 si臋 poszczeg贸lne strony i dok艂adnego przygl膮dania si臋 temu procesowi w zwolnionym tempie. Do stworzonych w ten spos贸b nagra艅 autorzy artyku艂u wracaj膮 kilkakrotnie, bo w po艂膮czeniu z analiz膮 czasu zu偶ycia procesora pozwalaj膮 im one lepiej zrozumie膰, co w艂a艣ciwie si臋 dzieje.

Po zdiagnozowaniu b艂臋d贸w przychodzi czas na eliminacj臋 w膮skich garde艂 i zazwyczaj na papierze jest to prostsze ni偶 w rzeczywisto艣ci. W przypadku SmashingMag kluczowe okaza艂o si臋 zoptymalizowanie CSS-贸w (ciekawostka: portal najpierw 艂aduje wszystkie style potrzebne do wyrenderowania pierwszego tysi膮ca pikseli wysoko艣ci, a nast臋pnie do艂adowywuje ca艂膮 reszt臋), uporz膮dkowanie kolejno艣ci 艂adowania skrypt贸w, ograniczenie rerender贸w i wydzielenie cz臋艣ci komponent贸w z g艂贸wnego bundla.

How We Improved SmashingMag Performance 鈥 Smashing Magazine
In this article, we鈥檒l take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we鈥檝e made, and some of the unexpected changes that helped boost鈥

2. Angular v11.1 released

W tym tygodniu release mia艂 Angular w wersji 11.1. Deweloperzy nadal pod膮偶aj膮 za wyznaczon膮 road map膮 i skupiaj膮 si臋 g艂贸wnie na naprawie bug贸w i usprawnianiu 艣rodowiska deweloperskiego. To, co najbardziej rzuci艂o mi si臋 w oczy to naprawa kilku b艂臋d贸w wyst臋puj膮cych na starszych przegl膮darkach, naprawa jednej z luk bezpiecze艅stwa jaka wyst臋powa艂a przy korzystaniu z Server Side Renderingu, czy szereg nowych funkcjonalno艣ci Language Servera. Prawdopodobnie straci艂em ju偶 uwag臋 wi臋kszo艣ci z Was, wi臋c nie b臋d臋 dalej przynudza艂 i wszystkich zainteresowanych dok艂adn膮 list膮 zmian odsy艂am do Githubowego changelogu.

Troch臋 obok wydania nowej wersji, w Angularze zawita艂a lepsza obs艂uga b艂臋d贸w. Od teraz b艂臋dy posiada膰 b臋d膮 unikalny error code, kt贸ry pozwoli 艂atwiej odr贸偶ni膰 b艂臋dy Angulara od b艂臋d贸w TypeScriptu czy przegl膮darki. Opr贸cz tego na podstawie error code b臋dziemy w stanie odr贸偶ni膰 b艂膮d kompilatora od b艂臋d贸w runtime i przyporz膮dkowa膰 je do jednej z 8 g艂贸wnych kategorii (np. Change Detection, Dependency Injection, Styling).

Nowy schemat b艂臋d贸w w Angularze

Error Codes to nie jedyna zmiana, je艣li chodzi o lepszy developer experience jak膮 powitali艣my w minionym tygodniu. Tw贸rcy Angulara zgodnie z obietnic膮 z pocz膮tku roku pracuj膮 nad lepsz膮 dokumentacj膮 i w艂a艣nie trafi艂a do niej strona dedykowana najpopularniejszym b艂臋dom. Na samej dokumentacji jednak si臋 nie sko艅czy艂o, bo cz臋艣膰 z b艂臋d贸w okraszona zosta艂a tutorialami dotycz膮cymi ich debugowania przygotowanymi przez Fireship.io. Je艣li ludzie stoj膮cy za dokumentacj膮 Angulara z podobn膮 pieczo艂owito艣ci膮 podejd膮 tak偶e do pozosta艂ych obszar贸w, to by膰 mo偶e wkr贸tce Angular zyska miano najlepiej udokumentowanego frontendowego frameworku.

Ja widz膮c, 偶e jeden z fajniejszych youtuber贸w b臋dzie wsp贸艂tworzy膰 dokumentacj臋 Angulara
angular/angular
One framework. Mobile & desktop. Contribute to angular/angular development by creating an account on GitHub.
Angular Debugging Guides
The best part of coding is when something works on the first try. The next best thing is knowing how to debug errors when things don鈥檛 work the first time. As we鈥檝e shared on our roadmap, one of our鈥

3. Firefox 85 Cracks Down on Supercookies 馃崻

Ka偶dy, kto kiedykolwiek postanowi艂 przegl膮dn膮膰. jakie dane zbiera na jego temat Google czy Facebook (albo chocia偶 raz mia艂 dost臋p do narz臋dzi takich jak Google Analytics), wie ile informacji potrafi膮 zbiera膰 o nas r贸偶ne portale. W ostatnich latach sporo si臋 zmieni艂o i praktyki bezpiecze艅stwa przegl膮darek mocno ograniczy艂y mo偶liwo艣膰 艣ledzenia interakcji u偶ytkownika, je艣li ten sobie tego nie 偶yczy. Tw贸rcy oprogramowania 艣ledz膮cego nie stali jednak w miejscu i na ka偶de zabezpieczenie znajdowali luk臋. Nasze ciasteczka zosta艂y zablokowane? Nic straconego, mo偶emy zakodowa膰 ciasteczka w postaci obrazka na stronie wykorzysta膰 cache przegl膮darki. Takie praktyki tw贸rcy Firefoxa nazywaj膮 Supercookies, bo s膮 one trudne w wychwyceniu i blokowaniu. Najnowsza wersja Firefoxa obiecuje wyeliminowa膰 Supercookies kosztem spadku wydajno艣ci w najgorszym wypadku o 2%. Czy ukr贸ci to mo偶liwo艣ci tracker贸w? Czas poka偶e, bo tw贸rcy takiego oprogramowania to naprawd臋 kreatywni ludzie.

Tw贸rcy tracker贸w po wypuszczeniu Firefox 85
Firefox 85 Cracks Down on Supercookies 鈥 Mozilla Security Blog
Trackers and adtech companies have long abused browser features to follow people around the web. Since 2018, we have been dedicated to reducing the number of ways our users can ...

4. IPFS in Brave 馃

O tym, 偶e Brave dosta艂 natywne wsparcie dla IPFS (InterPlanetary File System) informowali艣my was ju偶 w Craftsmanship Saturday, dlatego zainteresowanych pog艂臋bieniem tematu odsy艂am w艂a艣nie tam. Ja tymczasem chcia艂bym zwr贸ci膰 Wasz膮 uwag臋 na to, co ta nowinka oznacza dla wszystkich Frontend Developer贸w. Wraz z popularyzacj膮 IPFS mo偶liwe staje si臋 hostowanie swojej strony/aplikacji w zdecentralizowanej sieci. Co wi臋cej taki hosting jest darmowy i mo偶ecie zacz膮膰 z niego korzysta膰 ju偶 dzisiaj! Je艣li jeste艣cie zainteresowani to odsy艂am Was do tego tutoriala.

Dlaczego uwa偶am, 偶e zdecentralizowany hosting powinien Was zainteresowa膰? Ostatnie wydarzenia dotycz膮ce bana Trumpa w social mediach czy AWS wyrzucaj膮cy ze swoich serwer贸w Pacela ponownie nakr臋ci艂y dyskusj臋 na temat cenzury w sieci. Najlepsz膮 odpowiedzi膮 na te problemy wydaje si臋 koncepcja Web 3.0 (w kt贸r膮 wpisuje si臋 w艂a艣nie IPFS) i by膰 mo偶e warto wskoczy膰 do tego poci膮gu zanim ten na dobre nabierze rozp臋du.

Deweloper wrzucaj膮cy swoj膮 aplikacj臋 do mi臋dzyplantarnego systemu plik贸w
IPFS in Brave - Native Access to the Distributed Web
A peer-to-peer hypermedia protocol to make the web faster, safer, and more open.
Host a single-page website on IPFS
Learn how to host a simple one-page website on IPFS and link up a domain name.

Mamy nadzieje, 偶e si臋 podoba艂o i do zobaczenia za tydzie艅! 鈿★笍

Je艣li chcesz otrzymywa膰 tego typu tre艣ci spersonalizowane pod Ciebie, pobierz Vived!