{"id":10186,"date":"2021-02-04T09:15:00","date_gmt":"2021-02-04T08:15:00","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-23\/"},"modified":"2022-09-19T13:16:46","modified_gmt":"2022-09-19T11:16:46","slug":"frontend-thursday-vol-23","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-23\/","title":{"rendered":"Frontend Thursday vol. 23"},"content":{"rendered":"

Hej \u00a0
Nadszed\u0142 kolejny czwartek, a wraz z nim kolejny Frontend Thursday \u200d\u2642\ufe0f Dzi\u015b mamy dla was gar\u015b\u0107 nowo\u015bci (przegl\u0105d propoosali z TC39 meeting, Firefox porzuca wsparcie PWA i start organizacji Open Web Docs) i histori\u0119 optymalizacji samego gtihuba ! \u0141apcie gor\u0105c\u0105 kaw\u0119 \u2615\ufe0f i zapraszamy do lektury .<\/p>\n

1. Updates from 80th TC39 meeting <\/h1>\n

W zesz\u0142ym tygodniu odby\u0142 si\u0119 TC39 meeting, czyli zebranie JavaScriptowej starszyzny, kt\u00f3ra debatuje nad nowymi funkcjonalno\u015bciami j\u0119zyka (je\u015bli nie \u015bledzili\u015bcie naszych poprzednich edycji to tutaj<\/a> znajdziecie \u015bwietny podcast opowiadaj\u0105cych o szczeg\u00f3\u0142ach dzia\u0142ania TC39) . W zwi\u0105zku z tym dzisiejsz\u0105 edycj\u0119 zaczniemy od przej\u015bcia przez gar\u015bci funkcjonalno\u015bci, kt\u00f3re by\u0142y tam omawiane. Istnieje spore prawdopodobie\u0144stwo, \u017ce cz\u0119\u015b\u0107 z nich nigdy nie dostanie ostatecznej akceptacji, ale nie powinno to przeszkodzi\u0107 Wam w pochwaleniu si\u0119 nabyt\u0105 bezu\u017cyteczn\u0105 wiedz\u0105 na najbli\u017cszej zespo\u0142owej kawie \u2615\ufe0f.<\/p>\n

Zebranie JavaScfiptowej starszyzny, czyli TC39 meeting – koloryzowane<\/figcaption><\/figure>\n

Zacznijmy od funkcjonalno\u015bci, kt\u00f3ra dotar\u0142a to 4. etapu i jest najbli\u017csza finalizacji. formatRange ma by\u0107 rozszerzeniem Intl.DateTimeFormat, pozwalaj\u0105cym na odpowiednie formatowanie przedzia\u0142u czasowego w zale\u017cno\u015bci od j\u0119zyka i konfiguracji. Temat na poz\u00f3r wydaje si\u0119 b\u0142ahy, ale je\u015bli dobrze si\u0119 w niego zag\u0142\u0119bi\u0107 to oka\u017ce si\u0119, \u017ce bez wsparcia zewn\u0119trznej biblioteki si\u0119 nie obejdzie, a wi\u0119kszo\u015b\u0107 programistycznej braci zaci\u0105ga\u0142a do takich zada\u0144 koby\u0142y takie jak moment.js (spoczywaj w pokoju ).<\/p>\n

<\/p>\n

let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));\nlet date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));\nlet date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0));\n\/\/ > 'Wed, 10 Jan 2007 10:00:00 GMT'\n\/\/ > 'Wed, 10 Jan 2007 11:00:00 GMT'\n\/\/ > 'Sat, 20 Jan 2007 10:00:00 GMT'\nlet fmt1 = new Intl.DateTimeFormat("en", {\n    year: '2-digit',\n    month: 'numeric',\n    day: 'numeric',\n    hour: 'numeric',\n    minute: 'numeric'\n});\nconsole.log(fmt1.format(date1));\nconsole.log(fmt1.formatRange(date1, date2));\nconsole.log(fmt1.formatRange(date1, date3));\n\/\/ > '1\/10\/07, 10:00 AM'\n\/\/ > '1\/10\/07, 10:00 - 11:00 AM'\n\/\/ > '1\/10\/07, 10:00 AM - 1\/20\/07, 10:00 AM'\n<\/code><\/pre>\n
Propozycja API do formatowania przedzia\u0142\u00f3w czasowych<\/em><\/p>\n
<\/p>\n
Je\u015bli chodzi o etap 3. to znalaz\u0142y si\u0119 tutaj dwie ciekawe funkcjonalno\u015bci. Pierwsza z nich to JSON modules, kt\u00f3re maj\u0105 umo\u017cliwi\u0107 importowanie plik\u00f3w JSON bezpo\u015brednio z JavaScriptu (opcja \u015bwietnie znana cho\u0107by z CommonJS i require()) . Druga, to dodanie interfejsu pozwalaj\u0105cego na sprawdzenie, czy obiekt posiada prywatne pole lub metod\u0119. Co interesuj\u0105ce, do tej pory by\u0142o to ju\u017c mo\u017cliwe przez sprytne wykorzystanie try-catch, ale nowa implementacja jest zdecydowanie czytelniejsza.<\/p>\n
<\/p>\n
import json from ".\/foo.json" assert { type: "json" };\nimport("foo.json", { assert: { type: "json" } });\n<\/code><\/pre>\n
Propozycja formatu importowania plik\u00f3w JSON. Warto zwr\u00f3ci\u0107 uwag\u0119, \u017ce format zostawia furtk\u0119 do importowania r\u00f3wnie\u017c innych format\u00f3w plik\u00f3w w przysz\u0142o\u015bci<\/em><\/p>\n
<\/p>\n
class C {\n  #brand;\n  #method() {}\n  get #getter() {}\n  static isC(obj) {\n    return #brand in obj && #method in obj && #getter in obj;\n  }\n}\n<\/code><\/pre>\n
Propozycja API sprawdzaj\u0105cego obecno\u015b\u0107 prywatnych p\u00f3l i metod w obiekcie<\/em><\/p>\n
<\/p>\n
Omawianych funkcjonalno\u015bci na etapie pierwszym i drugim by\u0142o ca\u0142kiem sporo, wi\u0119c ja skupi\u0119 si\u0119 tylko na dw\u00f3ch, kt\u00f3re bardziej mnie zainteresowa\u0142y (je\u015bli jeste\u015bcie zainteresowani pe\u0142n\u0105 list\u0105 temat\u00f3w jaka by\u0142a poruszana, to odsy\u0142am Was tutaj<\/a>). Na etapie 2. \u00a0znajduj\u0105 si\u0119 a\u017c dwie propozycje API umo\u017cliwiaj\u0105ce pobranie informacji o systemie czasowym, jakim pos\u0142uguje si\u0119 u\u017cytkownik (np. kt\u00f3ry dzie\u0144 tygodnia jest tu uznawany za pierwszy). Opr\u00f3cz tego do etapu pierwszego trafi\u0142 nowy syntax `async do`, kt\u00f3ry umo\u017cliwi definiowanie asynchronicznego kodu, bez potrzeby opakowywania go w funkcj\u0119. <\/p>\n
<\/p>\n
\/\/ at the top level of a script\nasync do {\n  await readFile('in.txt');\n  let query = await ask('???');\n  \/\/ etc\n}\n<\/code><\/pre>\n
Propozycja API umo\u017cliwiaj\u0105cego asynchroniczno\u015b\u0107 bez opakowywanie kodu w funkcj\u0119<\/em><\/p>\n
<\/p>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/dev.to\/hemanth\/updates-from-80th-tc39-meeting-2nho<\/a>
https:\/\/github.com\/tc39\/proposal-intl-DateTimeFormat-formatRange<\/a>
https:\/\/github.com\/tc39\/proposal-json-modules<\/a>
https:\/\/github.com\/tc39\/proposal-private-fields-in-in<\/a>
https:\/\/github.com\/tc39\/proposal-intl-locale-inf<\/a>
https:\/\/github.com\/tc39\/proposal-async-do-expressions<\/a><\/p>\n
2. Firefox drops PWA support on desktop <\/h1>\n
Jeszcze kilka tygodni temu przysz\u0142o\u015b\u0107 desktopowych aplikacji PWA rysowa\u0142a si\u0119 w kolorowych barwach. Na ostatnim Chrome Dev Summit Google og\u0142osi\u0142o kilka ciekawych API, a aplikacje PWA zacz\u0119\u0142y pojawia\u0107 si\u0119 w Play Store na Chromebookach. Niestety w tym tygodniu dotar\u0142y do nas smutne wie\u015bci z obozu innej przegl\u0105darki: Firefox porzuca prac\u0119 nad wsparciem dla desktopowego PWA i jedyn\u0105 przegl\u0105dark\u0105 z jego wsparciem pozostaje Chrome (oraz inne przegl\u0105darki bazuj\u0105ce na Chromium).<\/p>\n
Jakie jest moje zdanie na ten temat? PWA na szcz\u0119\u015bcie nie znikn\u0105 z urz\u0105dze\u0144 mobilnych, gdzie zdaj\u0105 si\u0119 mie\u0107 najwi\u0119cej sensu. Je\u015bli nie korzystacie z Firefoxa, to warto podkre\u015bli\u0107 fakt, \u017ce do tej pory PWA na komputerach i tak nie by\u0142o wspierane, wi\u0119c u\u017cytkownicy nie strac\u0105 obecnej funkcjonalno\u015bci. Osobi\u015bcie po cichu licz\u0119 na to, \u017ce popularno\u015b\u0107 PWA na komputerach w ko\u0144cu zacznie rosn\u0105\u0107 – co by nie by\u0142o Chrome to prawie 65% ca\u0142ego rynku. JavaScript ju\u017c dawno udowodni\u0142, \u017ce nadaje si\u0119 do tworzenia \u015bwietnych aplikacji (patrz. VSCode, Figma, Slack), a mo\u017cliwo\u015b\u0107 instalacji z pomini\u0119ciem sklep\u00f3w czy r\u0119cznego pobierania plik\u00f3w, to tylko wygoda dla u\u017cytkownik\u00f3w ko\u0144cowych.<\/p>\n
Na deser ciekawostka: w zesz\u0142ym tygodniu YouTubue doda\u0142 wsparcie dla PWA. Niby nic wielkiego, a cieszy.<\/p>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1682593#c8<\/a><\/p>\n
3. Making Githubs new homepage fast and performant <\/h1>\n
W zesz\u0142ym tygodniu dzieli\u0142em si\u0119 z Wami histori\u0105 SmashingMag i ich walk\u0105 z optymalizacj\u0105 portalu. Natomiast w tym tygodniu mam dla Was histori\u0119 optymalizacji samego Githuba! Artyku\u0142 jest jedn\u0105 z pi\u0119ciu cz\u0119\u015bci serii o restrukturyzacji portalu (z poprzedniej edycji mo\u017cna by\u0142o dowiedzie\u0107 si\u0119 mi\u0119dzy innymi o tym, \u017ce globus na g\u0142\u00f3wnej stronie portalu nie jest statycznym zasobem, ale na bie\u017c\u0105co od\u015bwie\u017ca dane). Ta ods\u0142ona skupia si\u0119 na drobnych optymalizacjach strony g\u0142\u00f3wnej, kt\u00f3re pozwoli\u0142y i znacz\u0105co polepszy\u0142y wynik Web Core Vital.<\/p>\n
Chcia\u0142em przygotowa\u0107 tu dla Was kr\u00f3tkie TLDR, ale artyku\u0142 jest na tyle lekki i zwi\u0119z\u0142y, \u017ce zainteresowanych odsy\u0142am bezpo\u015brednio do niego. Niezainteresowanych spr\u00f3buj\u0119 przekona\u0107 podrzucaj\u0105c drobny sneak peak najciekawszej moim zdaniem optymalizacji. Aby otrzyma\u0107 przezroczysto\u015b\u0107 obrazka PNG, zachowuj\u0105c standard kompresji podobny do JPG, mo\u017cemy zastosowa\u0107 WebP (90% wsparcia przegl\u0105darek), albo po\u0142\u0105czy\u0107 2 obrazki w SVG i jeden wykorzysta\u0107 jako mask\u0119.<\/p>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/github.blog\/2021-01-29-making-githubs-new-homepage-fast-and-performant\/<\/a><\/p>\n
4. Open Web Docs <\/h1>\n
Kilka tygodni temu sie\u0107 obieg\u0142a informacja o redukcji etat\u00f3w w zespole odpowiedzialnym za MDN Web Docs – dokumentacji z kt\u00f3r\u0105 na pewnym etapie mia\u0142 do czynienia chyba ka\u017cdy deweloper. Wszystkim, kt\u00f3rzy o oryginalnej sytuacji nie s\u0142yszeli \u015bpiesz\u0119 z wyja\u015bnieniem, \u017ce redukcja spowodowana by\u0142a ci\u0119\u017ck\u0105 sytuacj\u0105 finansow\u0105 Mozilli, redukcj\u0105 koszt\u00f3w i docelowym skupieniu si\u0119 na tworzeniu nowych produkt\u00f3w, takich jak VPN.<\/p>\n
\u015awiat nienawidzi jednak pr\u00f3\u017cni, wi\u0119c lekko ponad tydzie\u0144 temu \u015bwiat\u0142o dzienne ujrza\u0142o Open Web Docs. Nie dajcie si\u0119 zmyli\u0107 pozorom bo nie jest to kolejna innowacyjna biblioteka do generowania czy tworzenia dokumentacji, a organizacja, kt\u00f3ra za zadanie wzi\u0119\u0142a sobie wspieranie otwartych dokumentacji weba (w tym wspomnianego wcze\u015bniej MDN Web Docs). Open Web Docs do tej pory otrzyma\u0142o ju\u017c spory zastrzyk got\u00f3wki, bo opr\u00f3cz indywidualnych deweloper\u00f3w, finansowo wspar\u0142y j\u0105 Google i Microsoft, wp\u0142acaj\u0105c po 250 tysi\u0119cy dolar\u00f3w. Pozostaje tylko trzyma\u0107 kciuki za dalsze wsparcie od najwi\u0119kszych graczy i czeka\u0107 na rezultaty pracy (w ko\u0144cu dobrej dokumentacji nigdy za wiele).<\/p>\n
Microsoft dotuj\u0105cy Open Web Docs – autor nieznany<\/figcaption><\/figure>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/opencollective.com\/open-web-docs#category-ABOUT<\/a><\/p>\n
\n
Na sam koniec mam dla Was bonus, kt\u00f3ry absolutnie skrad\u0142 moje serce : CSSowa biblioteka w stylu NES-a<\/a> . Co powiedzieliby\u015bcie na Keep Up w takim stylu ?? <\/p>\n
<\/figure>\n
\n
Je\u015bli chcesz otrzymywa\u0107 tego typu tre\u015bci spersonalizowane pod Ciebie, pobierz Vived!<\/p>\n