Hej
Nadszedł kolejny czwartek, a wraz z nim kolejny Frontend Thursday ♂️ Dziś mamy dla was garść nowości (przegląd propoosali z TC39 meeting, Firefox porzuca wsparcie PWA i start organizacji Open Web Docs) i historię optymalizacji samego gtihuba ! Łapcie gorącą kawę ☕️ i zapraszamy do lektury .
1. Updates from 80th TC39 meeting
W zeszłym tygodniu odbył się TC39 meeting, czyli zebranie JavaScriptowej starszyzny, która debatuje nad nowymi funkcjonalnościami języka (jeśli nie śledziliście naszych poprzednich edycji to tutaj znajdziecie świetny podcast opowiadających o szczegółach działania TC39) . W związku z tym dzisiejszą edycję zaczniemy od przejścia przez garści funkcjonalności, które były tam omawiane. Istnieje spore prawdopodobieństwo, że część z nich nigdy nie dostanie ostatecznej akceptacji, ale nie powinno to przeszkodzić Wam w pochwaleniu się nabytą bezużyteczną wiedzą na najbliższej zespołowej kawie ☕️.
Zacznijmy od funkcjonalności, która dotarła to 4. etapu i jest najbliższa finalizacji. formatRange ma być rozszerzeniem Intl.DateTimeFormat, pozwalającym na odpowiednie formatowanie przedziału czasowego w zależności od języka i konfiguracji. Temat na pozór wydaje się błahy, ale jeśli dobrze się w niego zagłębić to okaże się, że bez wsparcia zewnętrznej biblioteki się nie obejdzie, a większość programistycznej braci zaciągała do takich zadań kobyły takie jak moment.js (spoczywaj w pokoju ).
let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0));
// > 'Wed, 10 Jan 2007 10:00:00 GMT'
// > 'Wed, 10 Jan 2007 11:00:00 GMT'
// > 'Sat, 20 Jan 2007 10:00:00 GMT'
let fmt1 = new Intl.DateTimeFormat("en", {
year: '2-digit',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric'
});
console.log(fmt1.format(date1));
console.log(fmt1.formatRange(date1, date2));
console.log(fmt1.formatRange(date1, date3));
// > '1/10/07, 10:00 AM'
// > '1/10/07, 10:00 - 11:00 AM'
// > '1/10/07, 10:00 AM - 1/20/07, 10:00 AM'
Propozycja API do formatowania przedziałów czasowych
Jeśli chodzi o etap 3. to znalazły się tutaj dwie ciekawe funkcjonalności. Pierwsza z nich to JSON modules, które mają umożliwić importowanie plików JSON bezpośrednio z JavaScriptu (opcja świetnie znana choćby z CommonJS i require()) . Druga, to dodanie interfejsu pozwalającego na sprawdzenie, czy obiekt posiada prywatne pole lub metodę. Co interesujące, do tej pory było to już możliwe przez sprytne wykorzystanie try-catch, ale nowa implementacja jest zdecydowanie czytelniejsza.
import json from "./foo.json" assert { type: "json" };
import("foo.json", { assert: { type: "json" } });
Propozycja formatu importowania plików JSON. Warto zwrócić uwagę, że format zostawia furtkę do importowania również innych formatów plików w przyszłości
class C {
#brand;
#method() {}
get #getter() {}
static isC(obj) {
return #brand in obj && #method in obj && #getter in obj;
}
}
Propozycja API sprawdzającego obecność prywatnych pól i metod w obiekcie
Omawianych funkcjonalności na etapie pierwszym i drugim było całkiem sporo, więc ja skupię się tylko na dwóch, które bardziej mnie zainteresowały (jeśli jesteście zainteresowani pełną listą tematów jaka była poruszana, to odsyłam Was tutaj). Na etapie 2. znajdują się aż dwie propozycje API umożliwiające pobranie informacji o systemie czasowym, jakim posługuje się użytkownik (np. który dzień tygodnia jest tu uznawany za pierwszy). Oprócz tego do etapu pierwszego trafił nowy syntax `async do`, który umożliwi definiowanie asynchronicznego kodu, bez potrzeby opakowywania go w funkcję.
// at the top level of a script
async do {
await readFile('in.txt');
let query = await ask('???');
// etc
}
Propozycja API umożliwiającego asynchroniczność bez opakowywanie kodu w funkcję
Źródła:
https://dev.to/hemanth/updates-from-80th-tc39-meeting-2nho
https://github.com/tc39/proposal-intl-DateTimeFormat-formatRange
https://github.com/tc39/proposal-json-modules
https://github.com/tc39/proposal-private-fields-in-in
https://github.com/tc39/proposal-intl-locale-inf
https://github.com/tc39/proposal-async-do-expressions
Zainstaluj teraz i czytaj tylko dobre teksty!
2. Firefox drops PWA support on desktop
Jeszcze kilka tygodni temu przyszłość desktopowych aplikacji PWA rysowała się w kolorowych barwach. Na ostatnim Chrome Dev Summit Google ogłosiło kilka ciekawych API, a aplikacje PWA zaczęły pojawiać się w Play Store na Chromebookach. Niestety w tym tygodniu dotarły do nas smutne wieści z obozu innej przeglądarki: Firefox porzuca pracę nad wsparciem dla desktopowego PWA i jedyną przeglądarką z jego wsparciem pozostaje Chrome (oraz inne przeglądarki bazujące na Chromium).
Jakie jest moje zdanie na ten temat? PWA na szczęście nie znikną z urządzeń mobilnych, gdzie zdają się mieć najwięcej sensu. Jeśli nie korzystacie z Firefoxa, to warto podkreślić fakt, że do tej pory PWA na komputerach i tak nie było wspierane, więc użytkownicy nie stracą obecnej funkcjonalności. Osobiście po cichu liczę na to, że popularność PWA na komputerach w końcu zacznie rosnąć – co by nie było Chrome to prawie 65% całego rynku. JavaScript już dawno udowodnił, że nadaje się do tworzenia świetnych aplikacji (patrz. VSCode, Figma, Slack), a możliwość instalacji z pominięciem sklepów czy ręcznego pobierania plików, to tylko wygoda dla użytkowników końcowych.
Na deser ciekawostka: w zeszłym tygodniu YouTubue dodał wsparcie dla PWA. Niby nic wielkiego, a cieszy.
Źródła:
https://bugzilla.mozilla.org/show_bug.cgi?id=1682593#c8
3. Making Githubs new homepage fast and performant
W zeszłym tygodniu dzieliłem się z Wami historią SmashingMag i ich walką z optymalizacją portalu. Natomiast w tym tygodniu mam dla Was historię optymalizacji samego Githuba! Artykuł jest jedną z pięciu części serii o restrukturyzacji portalu (z poprzedniej edycji można było dowiedzieć się między innymi o tym, że globus na głównej stronie portalu nie jest statycznym zasobem, ale na bieżąco odświeża dane). Ta odsłona skupia się na drobnych optymalizacjach strony głównej, które pozwoliły i znacząco polepszyły wynik Web Core Vital.
Chciałem przygotować tu dla Was krótkie TLDR, ale artykuł jest na tyle lekki i zwięzły, że zainteresowanych odsyłam bezpośrednio do niego. Niezainteresowanych spróbuję przekonać podrzucając drobny sneak peak najciekawszej moim zdaniem optymalizacji. Aby otrzymać przezroczystość obrazka PNG, zachowując standard kompresji podobny do JPG, możemy zastosować WebP (90% wsparcia przeglądarek), albo połączyć 2 obrazki w SVG i jeden wykorzystać jako maskę.
Źródła:
https://github.blog/2021-01-29-making-githubs-new-homepage-fast-and-performant/
4. Open Web Docs
Kilka tygodni temu sieć obiegła informacja o redukcji etatów w zespole odpowiedzialnym za MDN Web Docs – dokumentacji z którą na pewnym etapie miał do czynienia chyba każdy deweloper. Wszystkim, którzy o oryginalnej sytuacji nie słyszeli śpieszę z wyjaśnieniem, że redukcja spowodowana była ciężką sytuacją finansową Mozilli, redukcją kosztów i docelowym skupieniu się na tworzeniu nowych produktów, takich jak VPN.
Świat nienawidzi jednak próżni, więc lekko ponad tydzień temu światło dzienne ujrzało Open Web Docs. Nie dajcie się zmylić pozorom bo nie jest to kolejna innowacyjna biblioteka do generowania czy tworzenia dokumentacji, a organizacja, która za zadanie wzięła sobie wspieranie otwartych dokumentacji weba (w tym wspomnianego wcześniej MDN Web Docs). Open Web Docs do tej pory otrzymało już spory zastrzyk gotówki, bo oprócz indywidualnych deweloperów, finansowo wsparły ją Google i Microsoft, wpłacając po 250 tysięcy dolarów. Pozostaje tylko trzymać kciuki za dalsze wsparcie od największych graczy i czekać na rezultaty pracy (w końcu dobrej dokumentacji nigdy za wiele).
Źródła:
https://opencollective.com/open-web-docs#category-ABOUT
Na sam koniec mam dla Was bonus, który absolutnie skradł moje serce : CSSowa biblioteka w stylu NES-a . Co powiedzielibyście na Keep Up w takim stylu ??
Jeśli chcesz otrzymywać tego typu treści spersonalizowane pod Ciebie, pobierz Vived!
