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’ie (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.
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.
Zainstaluj teraz i czytaj tylko dobre teksty!
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).
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.
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.
Zainstaluj teraz i czytaj tylko dobre teksty!
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.
Mamy nadzieje, że się podobało i do zobaczenia za tydzień! ⚡️
Jeśli chcesz otrzymywać tego typu treści spersonalizowane pod Ciebie, pobierz Vived!
