{"id":9959,"date":"2022-06-09T16:32:50","date_gmt":"2022-06-09T14:32:50","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-91-safari-z-wsparciem-dla-web-push-notifications-i-angular-14\/"},"modified":"2022-09-19T13:16:27","modified_gmt":"2022-09-19T11:16:27","slug":"frontend-thursday-vol-91-safari-z-wsparciem-dla-web-push-notifications-i-angular-14","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-91-safari-z-wsparciem-dla-web-push-notifications-i-angular-14\/","title":{"rendered":"Frontend Thursday vol. 91 – Safari z wsparciem dla Web Push Notifications i Angular 14"},"content":{"rendered":"\n

1. WWDC – Safari z wsparciem dla Web Push Notifications API<\/h2>\n\n\n\n

W minionym tygodniu wraz z konferencj\u0105 WWDC zako\u0144czyli\u015bmy wiosenny sezon konferencji deweloperski. Ku mojemu zaskoczeniu, konferencja Apple przynios\u0142a ca\u0142kiem sporo nowinek ze \u015bwiata Web Developmentu (r\u00f3wnie\u017c je\u015bli chodzi o ekosystem Apple, ale o tym na pewno przeczytacie wi\u0119cej w sobotnim przegl\u0105dzie). <\/p>\n\n\n\n

Zacznijmy od bomby jak\u0105 zrzuci\u0142o Apple. Safari 16 b\u0119dzie wspiera\u0107 Web Push Notification API, a w 2023 roku podobnego wsparcia mo\u017cemy si\u0119 spodziewa\u0107 te\u017c w mobilnym Safari. Oznacza to, \u017ce jeste\u015bmy o krok bli\u017cej, aby mo\u017cliwe sta\u0142o si\u0119 zast\u0105pienie natywnych aplikacji PWA. Gdyby tylko Apple zgodzi\u0142o si\u0119 jeszcze wy\u015bwietla\u0107 u\u017cytkownikowi zach\u0119t\u0119 do instalacji PWA, albo chocia\u017c przenios\u0142o przycisk do tego s\u0142u\u017c\u0105cy w odrobin\u0119 bardziej widoczne miejsce\u2026<\/p>\n\n\n

\n
\"\"\/<\/figure><\/div>\n\n\n

Kolejn\u0105 nowo\u015bci\u0105 jest wsparcie dla Container Queries, czyli funkcjonalno\u015bci na kt\u00f3r\u0105 czeka\u0142em ju\u017c od bardzo dawna (pierwszy raz pisali\u015bmy o nich ju\u017c w Frontend Thursday vol. 38<\/a>). Container Queries pozwalaj\u0105 nam tworzy\u0107 responsywne komponenty, ale ich zachowanie uzale\u017cnione jest od wysoko\u015bci i szeroko\u015bci kontenera (dowolny element HTML), a nie ca\u0142ej strony. Dzi\u0119ki nowemu API b\u0119dziemy mogli stworzy\u0107 na przyk\u0142ad responsywny baner, kt\u00f3ry w zale\u017cno\u015bci od umiejscowienia na stronie b\u0119dzie wygl\u0105da\u0142 odrobin\u0119 inaczej. Mam nadziej\u0119, \u017ce ruch ze strony Apple zmusi do dzia\u0142ania r\u00f3wnie\u017c Google (kt\u00f3ry r\u00f3wnie\u017c zaimplementowa\u0142 t\u0119 funkcjonalno\u015b\u0107, ale do tej pory ukrywa\u0142 j\u0105 za feature flag\u0105) i Mozill\u0119. Czekam z niecierpliwo\u015bci\u0105, a\u017c Container Queries stan\u0105 si\u0119 og\u00f3lnie wspiera funkcjonalno\u015bci\u0105 – to b\u0119dzie nowy wspanialszy \u015bwiat.<\/p>\n\n\n

\n
\"\"\/<\/figure><\/div>\n\n\n
\/* when the parent container is smaller than 850px, \nremove the .links div and decrease the font size on \nthe episode time marker *\/\n@container (max-width: 850px) {\n  .links {\n    display: none;\n  }\n\n  .time {\n    font-size: 1.25rem;\n  }\n\n  \/* ... *\/\n}<\/code><\/pre>\n\n\n\n
Safari 16 to te\u017c sporo usprawnie\u0144 dla deweloper\u00f3w. Nowa wersja przegl\u0105darki od Apple dostarczy Web Inspector Extensions. Oznacza to, \u017ce tw\u00f3rcy narz\u0119dzi deweloperskich b\u0119d\u0105 mogli przygotowa\u0107 porty debugger\u00f3w do Angulara, Vue czy Reacta dla Safari. Je\u015bli jeste\u015bmy ju\u017c w temacie debugowania, to do nowego Safari trafi te\u017c Flexbox Inspector. Niestety, patrz\u0105c na dostarczone przez Apple screenshoty, nie umywa si\u0119 do tego znanego z Chrome.<\/p>\n\n\n
\n
\"\"\/<\/figure><\/div>\n\n\n
To jeszcze nie koniec nowo\u015bci, bo do Safari zmierza r\u00f3wnie\u017c wsparcie dla subgrid czy Shared Workers. Kto by si\u0119 spodziewa\u0142, \u017ce Internet Explorer naszych czas\u00f3w tak pozytywnie nas zaskoczy. Aczkolwiek mo\u017ce to by\u0107 r\u00f3wnie\u017c kwestia tego, \u017ce Safari nie jest wydawane w tzw. Release Train. Gdyby zagregowa\u0107 najwi\u0119ksze nowo\u015bci z Chrome na przestrzeni ostatniego roku, to te\u017c by\u0142oby tego sporo.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/webkit.org\/blog\/12824\/news-from-wwdc-webkit-features-in-safari-16-beta\/<\/a>
https:\/\/webkit.org\/blog\/12945\/meet-web-push\/<\/a><\/p>\n\n\n\n
2. Angular 14<\/h2>\n\n\n\n
Angularowy poci\u0105g wyda\u0144 ponownie dojecha\u0142 na stacj\u0119 z punktualno\u015bci\u0105 godn\u0105 szwajcarskiego zegarka. Co wi\u0119cej, w odr\u00f3\u017cnieniu od kilku ostatnich wyda\u0144, Angular 14 przynosi wreszcie ciekawe usprawnienia. Ba, rozwi\u0105zane zosta\u0142o kilka z najpopularniejszych Issues na GitHubie!<\/p>\n\n\n
\n
\"\"\/<\/figure><\/div>\n\n\n
Najwi\u0119ksz\u0105 nowo\u015bci\u0105 s\u0105 zapowiadane od dawna Standalone Components. Zanim przejdziemy do konkret\u00f3w, odrobina kontekstu dla tych z Was, kt\u00f3rzy z Angularem nie maj\u0105 na co dzie\u0144 do czynienia. Dependency Injection to mechanizm w Angularze, dzi\u0119ki kt\u00f3remu Angular w \u201cauto-magiczny\u201d spos\u00f3b wie jak tworzy\u0107 komponenty, serwisy czy dyrektywy. Aby Dependency Injection dzia\u0142a\u0142o poprawnie, ka\u017cdy komponent, serwis, czy dyrektywa musi by\u0107 cz\u0119\u015bci\u0105 Angularowego Modu\u0142u. Tutaj warto zatrzyma\u0107 si\u0119 na chwil\u0119 i zaznaczy\u0107, \u017ce Angularowe modu\u0142y maj\u0105 niewiele wsp\u00f3lnego z JavaScriptowymi modu\u0142ami. Te drugie pozwalaj\u0105 podzieli\u0107 aplikacj\u0119 na wiele plik\u00f3w i zarz\u0105dza\u0107 udost\u0119pnianym API. Te pierwsze maj\u0105 na celu zapewnia\u0107 konfiguracj\u0119 zale\u017cno\u015bci dla Dependency Injection.<\/p>\n\n\n\n
W ostatnich latach Angularowa spo\u0142eczno\u015b\u0107 powoli zmierza\u0142a w kierunku tworzenia osobnych modu\u0142\u00f3w dla ka\u017cdego komponentu. Jak mo\u017cecie sobie wyobrazi\u0107 generowa\u0142o to niesamowite ilo\u015bci wt\u00f3rnego kodu. Wraz z Angularem 14 b\u0119dziemy mogli wreszcie pozby\u0107 si\u0119 nadmiarowych modu\u0142\u00f3w i zast\u0105pi\u0107 je dwoma dodatkowymi parametrami w dyrektywie @Component. Oczywi\u015bcie nie oznacza to, \u017ce modu\u0142y ca\u0142kowicie znikaj\u0105 z Angulara – w wielu miejscach nadal s\u0105 one nie do zast\u0105pienia i raczej nic nie zapowiada zmiany stanu rzeczy w najbli\u017cszych miesi\u0105cach.<\/p>\n\n\n
\n
\"\"\/<\/figure><\/div>\n\n\n
Kolejn\u0105 wyczekiwan\u0105 przez spo\u0142eczno\u015b\u0107 nowo\u015bci\u0105 jest lepsze wsparcie dla typ\u00f3w w Angular Reactive Forms. Do tej pory Reactive Forms w du\u017cej mierze opiera\u0142y si\u0119 o typ `any`. To ju\u017c nie rok 2010, wi\u0119c spo\u0142eczno\u015b\u0107 od lat regularnie podnosi problem i pozostawiona bez wsparcia pr\u00f3bowa\u0142a radzi\u0107 sobie samemu. Ilo\u015b\u0107 bibliotek dodaj\u0105cych typy do Reactive Forms zdecydowanie nie przystoi zopiniowanemu frameworkowi jakim jest Angular. Na szcz\u0119\u015bcie lepiej p\u00f3\u017ano ni\u017c wcale zesp\u00f3\u0142 Angulara wys\u0142ucha\u0142 spo\u0142eczno\u015b\u0107 i doda\u0142 upragnione typy do formularzy.<\/p>\n\n\n
\n
\"\"\/<\/figure><\/div>\n\n\n
W\u015br\u00f3d nowo\u015bci znajdziemy jeszcze kilka drobnych usprawnie\u0144. Na szczeg\u00f3ln\u0105 uwag\u0119 zas\u0142uguje mo\u017cliwo\u015b\u0107 definiowania tytu\u0142\u00f3w stron w konfiguracji routingu, lepsze wiadomo\u015bci b\u0142\u0119d\u00f3w i odblokowanie dost\u0119pu do p\u00f3l oznaczonych jako `protected` w template\u2019ach.<\/p>\n\n\n\n
Angular 14 wydaje si\u0119 by\u0107 naprawd\u0119 ciekawym releasem. Trzeba jednak przyzna\u0107, \u017ce nowo\u015bci z React 18 przy\u0107miewaj\u0105 jego blask. Jasne, React 18 powstawa\u0142 prawie 3 lata, ale mimo wszystko ci\u0119\u017cko nie zauwa\u017cy\u0107, \u017ce React nieustannie stara si\u0119 wprowadza\u0107 do Frontendu nowe koncepty, podczas gdy Angular skupia si\u0119 na naprawianiu istniej\u0105cych od lat problem\u00f3w.<\/p>\n\n\n
\n
\"\"\/<\/figure><\/div>\n\n\n
PS: Je\u015bli szukacie dobrych materia\u0142\u00f3w troch\u0119 dog\u0142\u0119bniej opisuj\u0105cych nowo\u015bci Anuglara to zdecydowanie polecam t\u0119 seri\u0119 artyku\u0142\u00f3w od Netanel Basala<\/a><\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/blog.angular.io\/angular-v14-is-now-available-391a6db736af<\/a><\/p>\n\n\n\n
Bonus 1 – Microsoft Word jako silnik gier 2D? Czemu nie!<\/h2>\n\n\n\n
Wiedzieli\u015bcie, \u017ce Microsoft kilka tygodni temu doda\u0142 do swojego edytora tekstu mechanizm add-ins, dzi\u0119ki kt\u00f3remu mo\u017cemy zautomatyzowa\u0107 cz\u0119sto powtarzane czynno\u015bci. Nie musieli\u015bmy d\u0142ugo czeka\u0107, a\u017c kto\u015b pomy\u015bla\u0142 \u201cMicrosoft Word to \u015bwietny silnik do pisanie gier 2D\u201d i postanowi\u0142 wykorzysta\u0107 nowe mo\u017cliwo\u015bci, aby stworzy\u0107 prost\u0105 gr\u0119 2D. Mo\u017ce i nie jest to najpotrzebniejsza wiedza, ale przyjemnie popatrze\u0107 jak kto\u015b pr\u00f3buje wykorzysta\u0107 API stworzone w bardzo konkretnym celu do czego\u015b zupe\u0142nie innego.<\/p>\n\n\n\n
\n