Mam super wiadomość!! 🔥

Dzięki wsparciu Guillermo Raucha (CEO Vercel) i Patricka Collisona (CEO Stripe), nasz projekt Your Next Store otrzymał finansowanie!

W związku z tym, udostępniamy Wam kod ultra-szybkiego i nowoczesnego storefrontu w Next.js, nad którym pracowaliśmy od dłuższego czasu, na licencji AGPL na GitHubie.

Mamy nadzieję, że dzięki temu Your Next Store zyska jeszcze większą popularność i przyczyni się do promowania dobrych praktyki w tworzeniu wydajnych aplikacji internetowych.

Tutaj kod storefrontu na GitHubie: https://github.com/yournextstore/yournextstore
Będzie nam miło, jeśli dacie nam ⭐️ gwiazdkę.

Razem z Jakubem (zaiste) jesteśmy wdzięczni za Wasze wsparcie, oglądanie live'ów i liczne dyskusje na Discordzie. To dawało nam motywację do pracy i pchało nas do przodu. Dzięki!

Michał Miszczyszyn i Jakub „zaiste” Neander

E-commerce bez backendu? Czy to możliwe❓ Well, yes, but actually, no. Chciałbym Was serdecznie zaprosić na wyjątkowy techniczny live o budowaniu aplikacji e-commerce w Next oraz o zmianach w Next.js 15.

Ostatnie tygodnie spędzieliśmy pracując nad Your Next Store: sklepem internetowym, który stawia na szybkość i User Experience i nie wymaga żadnego innego backendu poza Stripe. Jak to?

🔹 Transakcje? Stripe.
🔹 Produkty? Stripe.
🔹 Metody wysyłki? Stripe.

I tak dalej… Naszym celem jest, aby wszystko było tak proste, jak to tylko możliwe, ale nie prostsze.

Jestem bardzo szczęśliwy i dumny, że mogę zaprosić Was na nasz oficjalny launch 28 maja o 17:00. Robimy LIVE, na którym opowiemy, jak działa YNS i jak go zbudowaliśmy. Będzie również sesja Q&A na temat Next.js 15, e-commerce i Your Next Store bez ograniczeń czasowych.

LIVE będzie prowadzony po angielsku.

Link do Live: https://lu.ma/yns-launch

Do zobaczenia we wtorek o 17:00!
Michał Miszczyszyn i Jakub „zaiste” Neander

Siema!

Poniżej to ja podczas próby napisania newslettera we wtorek wieczorem. Jak widzicie - nie udało się, zostałem pokonany przez grawitację.

Zatem z 1 dniową obsuwą zapraszam was na kolejne wydanie newslettera gdzie piszę o tym jak server-driven UI wraca na tapet, kolejni bad-actors chcą dobrać się do naszych danych przez npm supply chain ataki a szaleni ludzie uruchamiają JS w Pythonie. Enjoy!

🧑‍💻 Michał Michalczuk | michalczukm.xyz

Kolejny npm supply chain atak prze Lazarus Group

Social engineering campaign targeting tech employees spreading through npm malware - Socket

The Lazarus Group launched a sophisticated social engineering campaign targeting developers in the cryptocurrency and cybersecurity sectors, using compromised accounts and malware-laden NPM packages.

Socket

Ostatnio pisałem o serii artykułów “State Of Npm 2023” popełnionych przez Sandworm z którego wynikało że ok 500 000 nowych pakietów to spam.

Spam to jedno. Część z nich to złośliwy kod, który chce się dobrać do waszych danych. Nihil novi, ale schemat ataku grupy Lazarus odkryty przez badaczy jest błyskotliwy (niech będzie - złowieszczo błyszczący). A opis znajdziecie na blogu Socket.

Targetem byli badacze bezpieczeństwa, oraz ludzie pracujący z krypto i blockchainem.

A jak to wyglądało.

1. Socjotechnika

Klasyczek. Atakujący podszywali się pod rekruterów, badaczy security, lub developerów szukających pomocy lub chcących pomóc przy projektach.

Kontaktowali się przez GitHub, LinkedIn, Slack czy Telegram a celem było zaproszenie do pracy nad projektem na GitHub’ie, który zawierał w zależnościach pakiety npm z malware.

2. Uruchomienie kodu

Gdy cel pobrał repo i zainstalował zależności podczas uruchomienia projektu złośliwe pakiety działały w tandemie.

Pierwsza z zależności pobierała token potrzebny do uruchomienia drugiej. Dobrym przykładem jest pakiet tslib-reac

Następnie ta sama paczka (lub inna w zależności od schematu) odczytywała zapisany wcześniej token i z jego pomocą pobierała skrypt i wykonywała go.

Makao i po makale.

Artykuł wymienia 24 pakiety npm które brały udział w atakach. Najbardziej urzekła mnie paczka snykaudit-helper, która podszywa się pod kod pracujący z narzędziem security jakim jest snyk 🥲

Przy okazji Socket dostał ostatnio $20M finansowania serii A od Andreessen Horowitz. Brawo oni!

Server-driven UI, znowu czuje się jak w 2010

Sending UI over APIs

Server-generated UIs are transforming traditional UI development by sending layouts via APIs. Benefit from immediate bug fixes, faster iteration, and personalized user experiences. Learn from Instagram’s Yaser Alkayale and get practical insights for your projects.

Builder.ioYoav Ganbar

Zawsze jak słyszę hasło server-driven UI mam przed oczami bardziej deklaratywną wersję Vaadin 😀 To chyba PTSD, chociaż sam miałem okazję pracować z takimi rozwiązaniami również w JS i działało to bardzo rozsądnie.

Ale ale, o co chodzi. Server-driven UI to dynamiczny sposób sterowania UI, który dostaje użytkownik dosłownie z poziomu back-end’u.

💻 Klient dostaje obiekt JSON z drzewem komponentów do zbudowania i wyświetlenia. Brzmi jak mieszanie odpowiedzialności i zbędne budowanie complexity w aplikacjach webowych, ale zanim z krzykiem zamkniecie ten newsletter pomyślcie o zastosowaniu tego w aplikacjach mobilnych. Wykorzystuje to między innymi Instagram, Lyft, Airbnb czy Allegro (mają własny rendering tool MBox, pozdrawiam!)

Aplikacje mobilne mają o wiele dłuższy release cycle niż klienci web, ponieważ użytkownik musi pobrać naszą aktualizację z AppStore/PlayStore/InnyStore.

I krytyczny bug który uniemożliwia zarabianie lub użytkowanie naszej aplikacji musi grzecznie poczekać na to aż user zaktualizuję aplikacje. W między czasie może zdążyć ją odinstalować z “co to za 💩” na ustach.

Wprowadzając takie rozwiązania jak server-driven UI skracamy ten loop do minimum, bo klient dostaje na bierząco kształt UI do wyświetlenia.

🛣️ Nie jest to lekka droga. Poza zmianą mental modelu wytwarzania aplikacji i rozwiązania tego technicznie mamy jeszcze guidelines sklepów z aplikacjami które musimy spełniać które nie przepadają za takimi dynamicznymi rozwiązaniami podczas audytów.

W artykule znajdziecie więcej szczegółów oraz live z inżynierem Instagram (wł. Meta), który opowiada jak oni to robią.

Odszyfrowując payload React Server Components

Devtools for React Server Components

Visualising RSC streaming

alvar.dev

Poprzedni wpis o server-driven UI to idealny wstęp do tego newsa. Jeśli mieliście okazję korzystać już z RSC (React Server Components) i zaglądaliście w zakładkę network aby sprawdzić czy wasz komponent został poprawnie ze-streamowany do klienta to mogła was uderzyć hmm … niska czytelność “wire format”.

Jeśli otworzycie DevToolsy i network na podlinkowanym blogu → przenawigujcie na inną stronę a dostaniecie stream komponentu jak poniżej.

Alternatywnie tutaj możecie się pobawić innym przykładem - demo na Stackblitz.

Jak narazie brak toolingu który wspomógłby nam w debugowaniu i optymalizacji RSC nie pomaga. Ale Alvar Lagerlöf stworzył

RSC Parser

Generated by create next app

i pracuje nad rozszerzeniem do chroma, które oszczędzi nam copy-paste i zwiększy DX pracy z RSC ❤️

Trzymam kciuki! W artykule znajdziecie więcej szczegółów o tym jak autor odszyfrował “wire format”.

Przed Next13 Masters

Before Party przed NEXT 13 MASTERS

Zajmij swoje miejsce! Do zobaczenia niebawem!

Michał Miszczyszyn i Jakuba "Zaiste" Neander w ramach startu NEXT13 MASTERS odpalają kolejne live.

Nie jeden, nie dwa, a trzy (to brzmi cheesy, ale wiecie o co chodzi 😀 )

• 17 SIERPNIA | 20:00-21:30 - Zoptymalizuj wydajność, popraw SEO i zwiększ konwersję
• 22 SIERPNIA | 20:00-21:30 - Dlaczego Next.js wyprzedza swoją epokę? 5 najważniejszych różnic między Next.js 13 a innymi narzędziami
• 29 SIERPNIA | 20:00-21:30 - Czego nauczyliśmy się przez 10+ lat jako full stack developerzy?

Na wszystkie wydarzenia możecie zapisać się na stronie. Do zobaczenia!

Omijanie blokad anti-debugging

Evading JavaScript Anti-Debugging Techniques

Debuggers serve as invaluable tools that empower developers to halt code execution and thoroughly analyze its behavior at any given moment. By utilizing debuggers, developers can efficiently identify and resolve issues within their code, making it an indispensable part of their toolkit.

veritas

Jeśli mieliście kiedyś okazję debugować w przeglądarce kod 3rd party, do którego nie macie dostępu wiecie jak wspaniała to zabawa.

Być może próbowaliście robić reverse engineering [which is potential illegal 💩] i wpadliście na zabezpieczenia przeciwko debuggowaniu jak ciągłe zatrzymywanie się na debugger;

Dlaczego do ominięcia tego autor zbudował customową wersję Firefox’a 😮 - szczegóły w tekście.

PythonMonkey 🐍 ❤️ 🐵

PythonMonkey: JavaScript/WASM Interop in Python using SpiderMonkey Bindings

Announcing PythonMonkey’s alpha release — use Python code in JavaScript and vice versa with ease and virtually no performance loss!

MediumWill Pringle

🌴 Kącik egzotyczny na dzisiaj.

PythonMonkey to kolejne podejście (w artykule znajdziecie pokrewne projekty) na stworzenie interop’u pomiędzy Python’em a JavaScript.

Zatem możemy uruchomić kod JavaScript w Python’ie

async def someAsyncStuff():
    two_sec_promise = pythonmonkey.eval("""
        new Promise((resolve, reject) => {
            setTimeout(resolve, 2000);
        });
    """)

    print("before calling the 2 second timer")
    await two_sec_promise
    print("two seconds have now passed")

To rozwiązanie jest unikatowe z paru powodów:

• Działamy w event-loop, mamy mikrotaski więc można używać Promises w kodzie JS ❤️
• Wykorzystuje SpiderMonkey, silnik JS od Mozilla
• Z pythona można odpalić kod kod w WebAssembly wykonywany z SpiderMonkey (i to jeszcze z Promises!)

Poza uruchamianiem JS w Pythonie, możemy też uruchomić kod Python w JS. PythonMonkey przychodzi z PMJS który to umożliwia.

const { getStringLength } = require('./my-python-module');

function printStringLength(s) {
  console.log(`String: "${s}" has a length of ${getStringLength(s)}`);
}

module.exports = { printStringLength, };

Jakie mamy zastosowania? You name it - oba środowiska mają swoje unikatowe zalety oraz ekosystem pakietów który może nam pomóc.

Autorzy wskazują jeszcze inny case - jeśli chcemy aby nasze rozwiązało działało zarówno w Pythonie jak i JS (SDK, biblioteka, etc) zamiast tworzyć adaptery lub implementować to samo rozwiązanie w wielu językach możemy wykorzystać PythonMonkey i napisać binding.

🌴 Koniec kącika egzotycznego na dzisiaj.

CFP na 4Developers Gdańsk do 14.08

Gdańsk 2023

Prawdziwy Festiwal języków programowania. Konferencja służy wymianie wiedzy i doświadczeń z różnych dziedzin IT. Tu spotykają się eksperci oraz amatorzy.

4Developers

Wydłużyliśmy o tydzień termin CFP na gdańską edycje 4Developers.

Ja (Michał Michalczuk) wraz z Bartkiem Cytrowskim opiekujemy się ścieżką JavaScript, nie krępujcie się i nawrzucajcie nam … tematów 😎 Więcej - o tym kogo szukamy na stronie.

Oraz wpadajcie na konferencje! Do zobaczenia 👋

dnt - Deno to Node transform

dnt — the easiest way to publish a hybrid npm module for ESM and CommonJS

How to write your module with modern tooling and transform it with `dnt` to support CommonJS, ESM, browsers, Deno, Node.js, TypeScript, and more.

Deno Blog

Aby opublikować pakiet na npm który będzie szeroko używany powinien być opublikowany jako ESM, CommonJS, z typami TypeScript, działać w Node.js, Deno i przeglądarce (jeśli zasadne).

Dodaje to 👷‍♂️ pracy i złożoności do procesu budowania.

Deno możemy wydało dnt który zrobi za nas tą robotę jeśli napiszemy kod w… Deno. To kolejna cegiełka do zwiększenia adopcji Deno przez możliwość połączenia go z ekosystemem Node.js i npm.

react-tweet = 16kb bez layout shift

Introducing React Tweet – Vercel

Embed tweets into your React application without sacrificing performance.

VercelVercel

Embeddowanie tweetów (chyba wciąż się tak nazywają 🤔) na stronie wiązało się z pobraniem ~550kb JavaScript’u w iframe który ładujemy na stronę. Dodatkowo dostawaliśmy layout shift, który nie poprawiał wrażenia. Sprawdźcie na https://publish.twitter.com.

Vercel wydał react-tweet, który rozwiązuje te problemy dostarczając własne komponenty UI do wyświetlenia treści oraz fetchuje zawartość tweeta bez logowania się do ich API.

Aby pobrać treść tweeta korzystają z CDN twittera - https://github.com/vercel/react-tweet/blob/main/packages/react-tweet/src/api/get-tweet.ts

Doceniam to obejście 🙂

Tailwind connect

Tailwind Connect 2023: Recap of our first in-person event - Tailwind CSS

Last month, over 200 people got together in my hometown of Cambridge, Ontario to hang out, talk shop, and get a peek behind the curtain at some of the new stuff we’ve been working on.

Tailwind CSS

W lipcu Tailwind zorganizował pierwsze spotkanie in-person, które miało być małym meetupem a wyszło z tego spotkanie na 200 osób i poziom realizacji którego nie powstydziła by się poważna konferencja. Tak wyszło.

Jak na “ot taki meetup” padło tam sporo konkretnych ogłoszeń.

• Oxide to nowy silnik Tailwind CSS, który wykorzystuje Lightning CSS - all-in-one parser/bundler/minifikator w Rust’cie stworzony i wykorzystywany w Parcel’u. Oxide ma wyjść w Tailwind v3.4 i poza uproszczeniem konfiguracji ma przynieść skrócenie czasu budowania projektu o 50%
• Catalyst to zestaw komponentów React, który chce się porozpychać na rynku bibliotek komponentów. Jego przewagą ma być pełna komponowalność

Spotkanie otwiera keynote Adama Watchman’a, który opowiada jak Tailwind z małego projektu urósł do rozwiązania które zjadło rynek i aktualnie ma 25M pobrań miesięcznie 😲

Generator palet kolorów do Tailwind

Tailwind CSS Color Generator | UI Colors

Generate, edit, save and share Tailwind CSS color shades based on a given hexcode or HSL color.

UI Colors

Pozostając w temacie Tailwind’a. Małe i przydatne narzędzie do wygenerowania palet kolorów.

To tyle na dzisiaj, do przeczytania za 2 tygodnie 👋

Stopka

Podobało się? Nie podobało się? Daj mi znać. Jeśli coś z wrzuconych tu materiałów Ci się przydało, to daj lajka, udostępniaj, albo po prostu powiedz znajomym. Chętnie przyjmuję też wszelkie sugestie. Dzięki!

Siema!

Dzisiaj piszę do was prosto z mojego terenowego wakacyjnego biura, więc z okazji wakejków - będzie krócej ale dalej treściwie!

Dzisiaj trochę danych do refleksji o tym gdzie jedzie npm, Prisma 5.0, TypeChat oraz parę truizmów o TypeScript 😉

🧑‍💻 Michał Michalczuk | michalczukm.xyz

Quo vadis rejestrze npm?

State Of Npm 2023: Top Old And New Packages

This article is part of the State Of Npm 2023 series. In this series, the Sandworm team delves deep into the current state of npm, unearthing fascinating statistics and unveiling intriguing facts about the registry. In the vast landscape of software…

SandwormGabi Dobocan

Sandworm tworzy serie artykułów “State Of Npm 2023”. Chodzi tutaj o dane w rejestrze pakietów npm, nie o aplikację kliencką.

Tydzień temu ukazał się drugi post z tej serii - o topce nowych oraz starych pakietów.

Ciekawe jest to, że na ok 3.4M pakietów ponad 1/3 (1.34M) jest młodsza niż rok. Czy zaczeliśmy publikować w 2023 na potęgę na npm? Niestety jest gorzej - ponad 0.5M z tych paczek zostało sklasyfikowanych jako spam. Więcej o tym jak npm jest zalewany SEO spamem znajdziecie w innym artykule od sandworm.

Z innej beczki okazuje się że używałem wszystkich 20 pakietów opisanych w punkcie Most Popular Old Packages, gdzie old=stworzone przed 2014r. 🦕

Ciekawszym jest pierwsza publikacja z serii, która przytacza poza ilością pakietów, też dane o ilości wersji i częstotliwości publikowania. Oraz rozmiarze samego rejestru npm - 24.17TB.

State Of Npm 2023: The Overview

This article is part of the State Of Npm 2023 series. In this series, the Sandworm team delves deep into the current state of npm, unearthing fascinating statistics and unveiling intriguing facts about the registry. In the vast landscape of software…

SandwormGabi Dobocan

Widać tu wyraźnie mocny problem ze spamem jaki wybuchł w tym roku.

Jak zaimplementować własny serwer GraphQL? – NEXT 13 MASTERS

W ramach wprawki przed kursem o Next.js 13, Michał wraz z Zaiste budowali na żywo serwer GraphQL. Całość jest już dostępna na YouTube. Na koniec - aby nie uciekło, jest też sesja Q&A.

Więcej o kursie znajdziecie na next13masters.pl

5 niewygodnych prawd clickbaitów o TypeScript

5 Inconvenient Truths about TypeScript

I’m writing books about TypeScript and I do workshops and trainings online and in-house. Every time I meet a new group of developers there are some TypeScript facts that they need to be confronted with:

fettblog.eu

No dobra, to nie jest aż taki clickbait, ale lata po wszystkich newsletterach od paru dni więc zaoszczędzę wam 6 minut i wymienie te 5 prawd.

1. TypeScript nie uchroni cię przed JavaScriptem - to przecież nadzbiór JS z cały jego bagażem
2. TypeScript dodaje złożoności - nie tylko na poziomie kodu, ale także konfiguracji i narzędzi
3. TypeScript nie jest type-safe - zwłaszcza jak macie do czynienia z operacjami IO, bo nie macie walidacji danych out-of-the-box
4. TypeScript przychodzi w wielu “smakach” - możemy pisać funkcyjnie, z użyciem klas, dekoratorów, używając feature’ów których niema w JS (jak enumy czy klasy abstrakcyjne), tsx etc.
5. Dalej warto go używać! A jak 😎

Z powyższym się zgadzam, to samo ale w większej wierszówce w linku.

element() dostępny w Firefox

A Firefox-only minimap | Stefan Judis Web Development

A quick explanation on how the Firefox-only map is built using the `element()` CSS function.

Stefan Judis Web Development

That was unexpected! Firefox wspiera eksperymentalną funkcję CSS element(), za pomocą której możemy wygenerować <image> na podstawie ... innych elementów strony. Na przykłąd wyświetlić minimapę.

Polecam uruchomić ten przykład - oraz dokumentację z MDN właśnie w Firefox.

Prisma v5 - szybciej szybciej!

Prisma 5: Faster by Default

Prisma 5.0.0 introduces new changes that make it significantly faster. These changes especially improve the experience using Prisma in serverless environments.

PrismaAlex Ruheniruheni_alex

Po tym jak ostatnio w Prisma v4.16 dostaliśmy PrismaExtensions w wersji produkcyjnej, w tym miesiącu wyszła Prisma 5!

W tej wersji postawiono głównie na performance (to niezamierzony lejtmotyw tego wydania newslettera 😅).

Przyspieszono zarówno warm jak i cold start (ważne zwłaszcza w środowisku serverless), mocno pomógł tutaj ich protokół którym komunikuje się PrismaClient z Prisma (silnikiem zapytań).

Dotychczas było to protokół w styli GraphQL, teraz wydali nowy o nazwie jsonProtocol. Więcej info o tym dlaczego jsonProtocol hula szybciej - nie widziałem… ale też za mocno nie szukałem 😅

Poza tym - zmieniły się minimalne wymagane wersje Node.js, TypeScript etc. Pełny change log znajdziecie tutaj.

Jak React 18 przyspieszył?

How React 18 Improves Application Performance – Vercel

Learn how React 18’s concurrent features like Transitions, Suspense, and React Server Components improve application performance.

VercelLydia Hallie

A raczej - dlaczego przyspieszył? W tekście znajdziecie deep dive o tym co zmienił React 18 jeśli chodzi o performance.

• Concurrent React - Zamiast całej operacji renderingu (przed fazą commit) wpakowanej w jednego long-taska teraz mamy wiele małych tasków które mogą być pauzowane i wznawiane gdy wpadną akcje o wyższym priorytecie. Na przykład - interakcje użytkownika. Wszystko to dzieje się w tle, nie musicie zmieniać waszego kodu.
• Transitions API - możliwość oznaczenia operacji jako operacja “transition” (przejścia??), która będzie wymagała wizualnej zmiany. Chodzi ofc o useTransition
• React Server Components
• Suspense

To w żołnierskich bullet-pointach. Polecam usiąść z kawą do całego artykułu ☕️

proto - meta meta manager wersji

proto - A multi-language toolchain manager | moonrepo

Lightspeed toolchain manager for programming languages and their dependency managers.

moon

Meta manager wersji. Pozwala na zarządzanie wersjami node.js, npm, bun, deno, yarn, pnpm, deno, go, rust.

Poza używaniem go lokalnie proto można też wpiąć w GitHub Action - dostarczają gotową akcje do użycia.

Czyżby bye bye 👋 nvm?

TypeChat - otypuj odpowiedzi z ChatGPT

Introducing TypeChat - TypeChat

TypeChat

Nie tylko chat GPT - ogólnie z modeli LLM.

typechat został stworzony przez Microsoft, konkretnie przez twórców TypeScript, i rozwiązuje problem którego nie byłem świadomy że mam 😅

Konkretnie - rozmawiając z chatem dostajemy odpowiedzi w formie języka naturalnego który jest ciężki w programowalnej analizie. Możemy poprosić chat o przekazanie tego np. w formie JSON’a, ale odbywa się to przez podobieństwo - przekazujemy przykładowy obiekt a chat szyje na żywo odpowiedź.

A gdyby tak … przekazać mu typy w TS/scheme, którymi ma być opisana odpowiedź.

Dokładnie to robi TypeChat.

Koniecznie przejrzyjcie też przykłady, one dopiero pokazują jak przydatne może być to narzędzie! Mój faworyt (pokazujący możliwości) to aplikacja transformująca opis słowny dodania wpisu do kalendarza na obiekt stworzony według schemy.

Projekt Frontend

Witaj w Projekcie Frontend

Frontend ArchitectureMój kanał na YouTubie

Darmowy ebook na temat architektury frontendu – polecam!
Michał Miszczyszyn

I blame him 😛

Sam zdążyłem przejrzeć ebooka - przyjemnie, w prosty sposób opisuje czym są boundaries, jak dzielić projekt na warstwy, jak podzielić nasz projekt frontendowy (również w podejściu bardziej DDD).

Można czytać 🙂

Co zrobić gdy nie lubisz ORM’ów?

GitHub - kristiandupont/kanel: Generate Typescript types from Postgres

Generate Typescript types from Postgres. Contribute to kristiandupont/kanel development by creating an account on GitHub.

GitHubkristiandupont

Jeśli nie macie zamiaru używać w waszym projekcie ORM’a (Prismy, Sequelize, TypeORM etc.) ale wciąż chcecie mieć first-class experience jeśli chodzi o typowanie danych - kanel może być częścią waszego rozwiązania.

To narzędzie pozwoli wam wygenerować typy TypeScript dla schemy istniejącej bazy Postgres.

Możecie uzupełnić go o type-safe SQL query builder, wykorzystujący mocno mechanizm Template Literal types - czyli

Kysely | Kysely

Kysely

To tyle na dzisiaj. Wracam do urlopowania się. Do przeczytania za 2 tygodnie 👋

Stopka

Podobało się? Nie podobało się? Daj mi znać. Jeśli coś z wrzuconych tu materiałów Ci się przydało, to daj lajka, udostępniaj, albo po prostu powiedz znajomym. Chętnie przyjmuję też wszelkie sugestie, poprostu odpisz na tego maila. Dzięki!

Siema!

Dwa tygodnie minęły od poprzedniego wydania, to idealna okazja aby powitać was w ten środowy poranek garścią newsów!

Dzisiaj będzie o boksowaniu się z CommonJS i o tym że źle używamy SVG. Także o tym że dorobiliśmy się kolejnego sposobu ataku z wykorzystaniem npm - Manifest Confusion. Jakie usługi przestały być darmowe a jakie frameworki wydały nowe major release z szaloną ilością featureów = 0. Business as usual.

Poniżej znajdziecie 12 newsów z ostatnich 2ch tygodni z moim komentarzem i opisem.

🧑‍💻 Michał Michalczuk | michalczukm.xyz

Pożegnaj się z SVG-in-JS

Breaking Up with SVG-in-JS in 2023

Technical deep-dive on why you shouldn’t have SVGs in your JS bundle and better techniques for JSX usage.

kurtextremJacob ‘kurtextrem’ Groß

I to jest serio dobra rada. Okazuje się, że jest spora szansa, że wasze pliki .svg lądują w … waszym bundlu .js.

Co za tym idzie - przeglądarka przed wykonaniem kodu .js musi go sparsować i skompilować. Razem z waszymi kilometrami znaków opisujących .svg.

Jeśli używacie .svg w taki sposób

// App.jsx
import HeartIcon from "./HeartIcon.svg";
const App = () => <HeartIcon fill="red" />

To bundler przerobi to na komponent reactowy który zawiera cały plik .svg

// HeartIcon.svg after svgr (simplified and before JSX transformation) - ⚠️️ don't copy this.
export default props => (
  <svg viewBox="0 0 300 300" {...props}>{/* ⬅️ note the props spread */}
    <g><path d="M0 200 v-200 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0z" /></g>
  </svg>
);

Czy sam napisałem dużo kodu który dodaje .svg do wynikowego bundla .js ? Winny jak cholera!

W artykule znajdziecie wiele strategii jak osadzić ten kod w HTML albo poprawnie pobrać go jako cache’owalny zasób, w zależności od tego jak krytyczny jest to obrazek.

Play with MDN

Introducing the MDN Playground: Bring your code to life! | MDN Blog

MDN is launching a code Playground. Users can prototype ideas and expand all live samples into an interactive experience.

MDN Web DocsFlorian Dieminger

MDN dorobił się własnego playgroundu. Zanim ktoś rzuci 🗿 kamieniem z napisem “dlaczego nie użyli istniejącego rozwiązania jak jsfiddle, Codepen, CodeSandbox, Stackblitz (wklej swój ulubiony)” - warto rzucić okiem na artykuł.

Teraz przykłady na MDN będą nie dość, że interaktywne - to będzie można od razu je zmodyfikować i sprawdzić działanie nie ruszając się z strony dokumentacji.

Dokumentacja powoli powoli będzie migrować do wykorzystania interaktywnych przykładów, narazie wybrane artykuły dostały ten feature.

Co ciekawe - rozważano użycie monaco, edytora użytego w VSCode, ale finalnie twórcy wybrali CodeMirror, który ma być lżejszą alternatywą dla monaco.

Ok, przeczytane. Teraz można rzucić kamieniem.

Trochę historii Node.js

Wydaliśmy nowy “Z Archiwum IT” o historii Node.js. Pierwsze wydanie było w 2009 więc uznaliśmy że kwalifikuje się już do naszego przekopywania archiwaliów 😉

Gdzie nas słuchać?

📹 YouTube, 🎙️Spotify, 🎙️Apple Podcasts

Podcast robimy wspólnie z Just Join IT. Pozdr!

Dawno nie było nowej wersji TypeScript - TypeScript 5.2 beta

Announcing TypeScript 5.2 Beta - TypeScript

Today we are excited to announce the availability of TypeScript 5.2 Beta. To get started using the beta, you can get it through NuGet, or through npm with the following command: npm install -D typescript@beta Here’s a quick list of what’s new in TypeScript 5.2!

TypeScriptDaniel Rosenwasser

🌟 Gwiazdą tego odcinka jest using.

Nie jest to feature TypeScript, a proposal do EcmaScript w stage’u 3, którego możemy już używać w TS.

TypeScrip implementuje nowe funkcjonalności które są jeszcze jako proposale jeśli osiągneły 3 etap, więc tutaj wszystko się zgadza.

A co to właściwie jest? Znane nam dobrze z innych języków destruktory, czy też defer. Czyli możliwość dodania logiki która wykona się podczas zniszczenia obiektu lub podczas jakiegoś “hooka”. W wypadku JS - na zamknięciu zakresu.

Brzmi przydatnie jeśli macie do posprzątania zasoby lub handlery do zwolenienia - do plików, do bazy etc. Możemy dodać zarówno synchroniczny jak i asynchroniczny destruktor. Aby dodać pieprzu - musicie wykorzystać globalnie zdefiniowany symbol aby to obsłużyć.

Tutaj więcej przykładów u Matta Pocock’a.

import { open } from "node:fs/promises";
const getFileHandle = async (path: string) => {
  const filehandle = await open(path, "r");
  return {
    filehandle,
    [Symbol.asyncDispose]: async () => {
      await filehandle.close();
    },
  };
};
{
  await using file = await getFileHandle("thefile.txt");
  // Do stuff with file.filehandle
} // Automatically disposed!

Mam mocny flashback z C#, ale widzę tutaj parę zastosowań - zwłaszcza przykłady operujące na fs czy z połączeniem do bazy do mnie przemawiają. Podoba mi się to bardziej niż try-finally rozsiane po całym kodzie, ale prawdopodobnie nie wykorzystam jej szybko w produkcyjnym kodzie.

Osoby nie będące na bierząco z tym co się dzieje w galopującym światku JS, właśnie wywracają oczami gdy próbujecie im wytłumaczyć różnicę deklaracji zmiennej przez var vs let vs const vs using.

Co więcej w tym wydaniu TS?

Zieranie metadanych w nowej implementacji dekoratorów (Java developerzy lubią to). Dostajemy kolejny potężny mechanizm do dekoratorów, polecam przejrzeć przykład z serializacją w artykule.

Pozostałe rzeczy to głównie stabilizacja i poprawki.

Nie używajcie więcej CommonJS! Albo używajcie!

🦖Deno: Nie używajcie więcej CommonJS!
🥯 Bun: Hold my bear - tu macie wsparcie dla CommonJS

Browser wars - było.
Framework wars - było.
Teraz czas na runtime wars!

Deno pisze o tym dlaczego CommonJS jest złe, i z czego historycznie wynikało. Oraz jaki bagaż za sobą ciągnie.

CommonJS is hurting JavaScript

How CommonJS became Node’s module system, ESM solved modules for the browser, and why supporting both slows down the JavaScript ecosystem.

Deno Blog

W tym samym czase Bun mówi - trzymajcie wsparcie dla CommonJS. Wiemy że nigdzie się nie wybiera!

CommonJS is not going away | Bun Blog

CommonJS is here to stay, and that’s okay. Better tooling will solve today’s developer experience issues.

Bun Blog

Co ciekawe - muszę się zgodzić z obydwoma artykułami 😀

ES2023 zatwierdzone, ale my o ważnych rzeczach

JavaScript built-in: Array: toSorted | Can I use... Support tables for HTML5, CSS3, etc

Can I use... Support tables for HTML5, CSS3, etc

Możecie przejść przez cały dokument od TC39, ja wrzucę to co mnie najbardziej cieszy w nowym standardzie - nowe metody w Array.prototype :heavybreathing:

Czyli toSorted, toReversed, toSpliced iwith które zwracają kopię tablicy ❤️ zamiast mutować obiekt - jak to wiele operacji na Array ma w zwyczaju. W końcu!

Co więcej - wszystkie główne przeglądarki już wspierają te metody!
🦊 FireFox dołączył do imprezy.

Factory Factory Factory

Factory factory factory

Explaining what’s wrong with modern software development by allegory.

Taki mały rancik na modern development pipeline (lub “współczesną rurę rozwojową” jeśli ktoś woli). Zapraszam do przeczytania 🙂

Dlaczego obchodzi nas zawartość manifestu npm?

The massive bug at the heart of the npm ecosystem

An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more

vlt /vōlt/

Podczas publikowania pakietu do rejestru npm nie dzieje się magia - tool CLI npm wysyła żądanie HTTP PUT z manifestem waszej paczki oraz spakowanym pakietem (w formie tarball).

Skoro idzie tam żądanie HTTP to możemy je zrobić ręcznie … i wysłać manifest który nie pokrywa się z tym co znajduje się w naszym pacakge.json zapakowanym w tarball 🫢

Ten typ ataku został nazwany Manifest Confusion.

I tutaj zaczyna się robić ciekawie - bo tak zmodyfikowany manifest może nie wskazywać żadnych dependencies czy skryptów uruchamianych np podczas install, natomiast będą one w kodzie wykonawczym w tarball. I zostaną wykonane 😨

W konsekwencji otwieramy sobie drogę do wykonania ataków których nie wykryje większość tooli do audytu, ponieważ operują one na manifest paczki a nie na package.json z opublikowanego tarball'a.

(tutaj kudos dla socket.dev który wykrywa Manifest Confusion, tutaj przykład)

Pikanterii dodaje fakt, że npm jest świadomy tego zachowania i zagrożeń, ale unika tematu. Działa to w taki sposób od lat, więc zmiana mogła by zepsuć kawałek internetu w bardzo unikatowy sposób.

Ze tak zacytuję klasyka

Z rzeczy w temacie, które warto polecić

• np, czyli narzędzie CLI od Sindre Sorhus’a ułatwiające opublikowanie pakietu.
• NodeSecure CLI, narzędzie do wizualizacji drzewa zależności pakietów. Przydatne jeśli chcecie prześledzić jakieś transient dependencies

Railway przestaje być darmowe

Introducing the $5 Plan

The story of how and why we decided to introduce new plans and pricing.

Railway Blog

Jeśli korzystaliście z bardzo hojnego darmowego offeringu Railway - PaaS który dostarcza wam infrastrukturę do zdeployowania waszego rozwiązania, to musicie wyciągnąć $5 miesięcznie z kieszeni.

Usługa wprowadza plan Hobby za $5 miesięcznie jako minimalny.

Darmowy hosting przyciągał wielu “bad-actors” wykorzystujących ich platformę do kopania krypto, agregatorów torrentów etc. Wyeliminowanie i ogarnianie ich było zbyt kosztowne, więc zdecydowali że aby pójść dalej muszą uciąć darmowy offering.

Nie jestem zdziwiony tą decyzją. Aby móc dowozić nowe rzeczy, potrzebujesz wyciągnąć ludzi z pracy która nie przynosi ci korzyści - jak walka z nadużyciami twojego darmowego planu.

Plan Hobby ma być mocno hojny, więc to dobrze zainwestowane $5 🙂

Co ciekawe - Heroku rok temu w Sierpniu podjeło podobną dezycję o wycofaniu darmowego planu. Problem był ten sam - za dużo inwestowali o odsiewanie “bad-actors” darmowego planu.

Ember 5.0

Ember 5.0 Released

EmberJS 5.0 embodies the commitment to stability and reliability that developers have come to expect from the Ember ecosystem. The Ember team has worked hard to remove all the deprecations and make…

Ember.js BlogJen Weber

Tak to tutaj zostawię. Wersja 5.0 to wydanie raczej stabilizujące i przygotowujące grunt pod nowy lśniący Ember Polaris - który zapowiedziano w 2021 roku.

Mam flashback z poprzedniej edycji newslettera gdy opisywałem wydanie Svelte v4.0.

shadcn/ui - komponenty bez tworzenia zależności

shadcn/ui

Beautifully designed components built with Radix UI and Tailwind CSS.

shadcn/uishadcn

O nie nie. To nie jest biblioteka komponentów, shadcn/ui nie znajdziesz w rejestrze npm.

To są komponenty które możesz wrzucić bezpośrednio do swojego kodu.

Idea jest podobna idea jak TailwindUI - nie dodajesz zależności do twojego projektu, o którą musisz potem dbać, aktualizować i jesteś ogarniony w modyfikacjach do publicznego API.

Zamiast tego - kopiujesz kod komponentu który cię interesuje i umieszczasz go w swoim projekcie.

Jest twój. Możesz go modyfikować i psuć do woli.

Parę ciekawostek

• shadcn/ui jest oparte o Radix.
• Kent C Dodds używa jej teraz budując Epic Web Dev
• Dostajemy wbudowany AI generator komponentów (news o AI odhaczony)

React JAM

React Jam

Build a game in 10 days using React, learn and win prizes!

Kenney Creator of Kenney.nl

React JAM czyli 10 dniowy (tak) hackaton pisania gier w React zaczyna się za 8 dni. Będzie trwał 20-30.07.2023

Motyw przewodni tej edycji zostanie ogłoszony 20.07 - na stronie możecie się zapisać na event 🙂 Dajcie znać co stwożyliście!

To tyle na dzisiaj, do przeczytania za 2 tygodnie 👋

Stopka

Podobało się? Nie podobało się? Daj mi znać. Jeśli coś z wrzuconych tu materiałów Ci się przydało, to daj lajka, udostępniaj, albo po prostu powiedz znajomym. Chętnie przyjmuję też wszelkie sugestie, poprostu odpisz na tego maila. Dzięki!

Witajcie w naszym najnowszym newsletterze Polski frontend i backend! Nawet najmniej spostrzegawcze osoby zauważą, że autorem tego wydania jest nie kto inny, a znany i lubiany Michał Michalczuk, którego możecie kojarzyć choćby ze Śniadania z Programowaniem. Miejmy nadzieję, że Michał zagości tu na dłużej, a częstotliwość wysyłania newslettera się zwiększy 🙃 – tyle słowem wstępu ode mnie – Michała Miszczyszyna – oddaję głos drugiemu Michałowi.

Przygotowaliśmy dla Was zbiór nowości z JavaScriptowego światka. Dowiecie się, jak Vercel wkracza w świat sztucznej inteligencji, jak grać w szachy w Reakcie, co wprowadza Svelte 4, czym jest DevPod… a to tylko część tematów, które czekają na was w tym wydaniu!

Newsy

Vercel idzie w AI, czyli Vercel AI SDK

Introducing the Vercel AI SDK – Vercel

An interoperable, streaming-enabled, edge-ready software development kit for AI apps built with React and Svelte.

VercelJared Palmer

Ale Vercel robi to inaczej - bo dostarcza nam adaptery do pracy z różnymi modelami językowymi jak OpenAI czy Hugging Face, dzięki którym możemy szybko stworzyć chat gadający z nimi.

🪄npm install ai i jedziemy. Minimalny kod do aplikacji chat’a to ok 50 linijek w aplikacji opartej o Next.js.

Co więcej - pod koniec kwietnia Vercel odpalił sdk.vercel.ai interaktywny prompt playground gdzie można porównywać działanie 20 modeli LLMs

Teraz doszła tam opcja chat oparta właśnie na Vercel AI SDK. Mówiłem o tym że Vercel AI SDK to projekt Open Source? Tak jest!
Najbardziej zagadkowe jest to, że nazwa ai była jeszcze wolna w rejestrze npm 🤔

Komponent React do grania … w szachy

GitHub - Clariity/react-chessboard: The React Chessboard Library used at ChessOpenings.co.uk. Inspired and adapted from the unmaintained Chessboard.jsx.

The React Chessboard Library used at ChessOpenings.co.uk. Inspired and adapted from the unmaintained Chessboard.jsx. - GitHub - Clariity/react-chessboard: The React Chessboard Library used at Chess…

GitHubClariity

Nikt nie pytał, wszyscy chcieli.
chessopenings.co.uk wrzuciło swoja planszę do szachów (jeśli obraziłem właśnie jakiś purystów szachowych to 🤷), która jest gotowym do użycia komponentem Reactowym. Przy okazji pokazują jak połączyć to z chess.js i zagrać. Bardzo szanuję, że mają storybooka w którym można to przetestować.

Svelte turns v.4!

Announcing Svelte 4

Updated performance, developer experience, and site

Tak. To jest news który wyskakuje z każdego newslettera. Nie będziemy tacy i też go wrzucamy.

Po 3 latach od wydaniu wersji 3, przychodzi 4! Niby prosta matematyka i semantic versioning, ale wszyscy pamiętamy wydanie @angular/core v2 a po nim od razu v4. Bez zabawy w półśrodki.

Jeśli spodziewaliście się po Svelte 4 kaskady nowości to nie tym razem. To raczej maintenance major update, gdzie głównie dostaliśmy:

• mniej zależności svelte. Było 61 paczek, jest 16. Szanuję.
• sama paczka svelte waży o 75% mniej. Było 10.6MB, jest 2.8MB. I tak przepada w czarnej dziurze node_modules, ale warte odnotowania!
• lepsze wsparcie dla IDE - teraz przejście do metody z svelte przekieruje nas do źródeł, a nie do typów w .d.ts
• minimalna wersja Node.js – 16.x

Możecie polecieć z npx svelte-migrate@latest svelte-4 aby odpalić migrator z v3.

A kiedy wjedzie główne danie? Svelte 4 czyści i przygotowuje grunt pod Svelte 5, który ma wprowadzić nowe rzeczy.
Jakie rzeczy? Pozwólcie, że zacytuję pełną roadmapę wersji 5.

DevPod - Codespaces, ale OpenSource

DevPod - Open Source Dev-Environments-As-Code

DevPod is infrastructure-independent and client-only, which makes it incredibly easy to get started with. Codespaces but open-source, client-only and unopinionated. Works with any infra, any progamming language, any IDE, etc.

Open Source Dev-Environments-As-Code

Jeśli podobnie jak my z przyjemnością oglądaliście jak GitHub wydaje Codespaces tylko po to aby nigdy ich nie użyć to macie jeszcze jedną okazję aby zmierzyć się z narzędziem do przygotowywania zunifikowanego środowiska developerskiego.

Devpod to Open Source’owa alternatywa, która jest klientem pozwalającym nam łączyć się do kontenerów.

Z dostępnych providerów mamy docker (po prostu podłącz kontener), Kubernetes, AWS, Google Cloud, Azure, DigitalOcean. Możemy tez podłączyć się gołębiem pocztowym… tj. po prostu po SSH.

Działa z VSCode i IDE od JetBrains. U mnie działa 😛

State of CSS 2023 ruszyło

State of CSS 2023

Take the State of CSS survey

Here we go again! Kolejna odsłona ankiety State of CSS właśnie ruszyła. Do 15 lipca możecie ją uzupełnić aby pokazać jak my jako community widzimy zmiany w CSS. I czy w ogóle je widzimy 😂

Dobrym bajerem w tegorocznym wydaniu jest opcja dodania feature’a o który jesteśmy pytani do “reading list” aby po wypełnieniu na spokojnie sobie o nim poczytać.

Wstawcie ☕ i siadajcie, czeka was 12 sekcji po kilka pytań.

Paginowanie z async generatorami

How to consume a paginated API using JavaScript async generators

Generators can be powerful tools for efficient data processing. But things get a bit tricky when we add asynchronous calls into the mix. Asynchronous generators, however, come to the rescue by handling scenarios involving promises. They come in handy for a variety of real-world scenarios. And one of…

James SinclairJames Sinclair

Zaryzykuję tezę, że generatory w JavaScript nie są najpopularniejszym featurem tego języka. Dodam do tego, że asynchroniczne generatory też nie należą do JavaScript 101.

Głównie dlatego, że trzeba mieć dobry scenariusz w którym generatory mają sens.

James Sinclair popełnił artykuł w którym pokazuje jak można potrawersować po paginowalnym API za pomocą async generators.
Prawie mnie nabrał, że jest to wygodny sposób na rozwiązanie tego problemu.

Czy będę złośliwy jeśli napiszę, że redux-saga wciąż szuka sensu w generatorach?

Mamy jQuery w domu

Create your own personal jQuery!?

Yesterday, I shared a video of me converting some jQuery code into vanilla JS. Today, I thought it would be fun to show how you can create your own tiny jQuery-like library using the JavaScript class pattern and some modern methods. Let’s dig in! Psst! If you want to learn how to do stuff like this,…

Go Make Things

Chris Ferdinandi pokazuje jak przepisać kod jQuery na Vanilla JS - meh 🥱

Chris Ferdinandi pokazuje jak napisać jQuery opierając się o modern JavaScript - you have my attention 🤨.

Pewnie dlatego, że bardzo lubię fluent API (czyli takie gdzie możecie po . wywołać kolejną metodę w łańcuchu), ten artykuł umilił mi czas.
I dla tej wartości dodanej polecam go przeczytać.

Basecamp wylogował się z chmury

We have left the cloud

Since it took us years to get into the cloud in the first place, I originally imagined it would take us years to get out as well. But all that work to containerize our applications and prepare them for the cloud actually turned out to make it relatively easy to exit. And now, after six months of eff…

W październiku 2022 David Heinemeier Hansson (czyli DHH, twórca Ruby On Rails oraz Basecamp czy Hey, CTO 37signals) - zapowiadał, że wyciągną chmurową wtyczkę wszystkim swoim usługom.

No, nie tak brutalnie - ale ogłosili wielkie odejście od chmury na własną infrastrukturę ze względu na ogromne koszty za AWS. Opisuje, że przy przejściu na własną infrę powinni oszczędzić $1.5 miliona rocznie.

tldr; Zrobili to - w pół roku przemigrowali wszystko.

Czasem DHH potrafi zrobić burzę w szklance wody o jakieś głupoty na twitterze i się obrazić jak 5 latek ale tutaj dowiózł temat mocno 💪

Google Standard Product Lifecycle

Tak jest. Jeśli chcecie pokopać w temacie to polecam Killed by Google

Nasze tematy

Z Archiwum IT

Z Archiwum IT - to nasz nowy podcast, gdzie Michał Michalczuk wspólnie z Bartkiem Cytrowskim opowiadamy o starszych technologiach - dając kontekst dlaczego i w jakim celu powstały. OFC polane śmieszkowym sosem 🧑‍🍳

Ostatnio wyszedł 4. odcinek o Microsoft Java w latach '90 - Visual J++ i innych dziwach. W poprzednich odcinkach mówiliśmy o ewolucji formularzy HTML oraz jQuery (sounds familiar?).

Dajcie znać co sądzicie o tym formacie i o czym chcielibyście usłyszeć 😊
Łapcie nas na socialach Michał Michalczuk i mój Instagram oraz Bartosz Cytrowski.

Gdzie nas słuchać? YouTube, Spotify, Apple Podcasts
Podcast robimy wspólnie z Just Join IT. Pozdr!

Next.js 13 wywraca wszystko do góry nogami

NEXT 13 MASTER – WEBINAR

Zajmij swoje miejsce! Do zobaczenia niebawem!

Pod takim hasłem Michał Miszczyszyn i Jakub „Zaiste” Neander organizują kolejny webinar. Za nieco clickbaitowym tytułem widzimy nawet bardziej clickbaitowy nagłówek: „Co zmienia NEXT.js 13 i jak budować na nim aplikacje zarabiające miliony?”. Ale nie martwcie się! Webinar to 50 minut „mięcha” i sesja Q&A do oporu.

Widzimy się już dziś (28 czerwca) o 20:00! Obowiązują zapisy.

4Developers Gdańsk już się zbliża

Gdańsk 2023

Prawdziwy Festiwal języków programowania. Konferencja służy wymianie wiedzy i doświadczeń z różnych dziedzin IT. Tu spotykają się eksperci oraz amatorzy.

4Developers

W tym roku ja (Michał Michalczuk) razem z Bartkiem Cytrowskim jesteśmy w radzie programowej lokalnej Gdańskiej edycji 4Developers 🥳, która odbędzie się 26.09.2023 w Gdańsku. Odpowiadamy za ścieżkę JavaScript (surprise!).

Zachęcamy was gorąco abyście nas odwiedzili na scenie z swoim tematem - 📄 Call For Papers jest otwarte do 7.08.2023

Co złego to oczywiście my. Naszą rolą jest wybranie najbardziej wartościowych i interesujących tematów i nie możemy się tego doczekać!

Stopka

Podobało się? Nie podobało się? Daj mi znać. Jeśli coś z wrzuconych tu materiałów Ci się przydało, to daj lajka, udostępniaj, albo po prostu powiedz znajomym. Chętnie przyjmuję też wszelkie sugestie, poprostu odpisz na tego maila. Dzięki!

Witajcie w najnowszym newsletterze Polski Frontend i Backend! W dzisiejszym wydaniu przybliżymy Wam najnowsze trendy i rozwiązania z zakresu tworzenia stron internetowych oraz aplikacji webowych. Przedstawimy Wam również ciekawe artykuły i narzędzia, które pomogą Wam rozwijać Wasze umiejętności i skuteczniej realizować projekty. Zachęcamy do lektury i komentowania!

Tak, ten wstęp w całości napisał za mnie ChatGPT. Co Wy na to?

Frontend

NextAuth zamienia się w Auth.js!

Kojarzycie NextAuth – najpopularniejszą bibliotekę do autentykacji uwierzytelniania w Next.js? Twórcy podjęli odważną decyzję o odłączeniu się od Nexta i budowie narzędzia uniwersalnego – pod nazwą Auth.js. Na pierwszy ogień idą SvelteKit Auth oraz Solid Auth.

Announcing SvelteKit Auth: Bringing NextAuth.js to all frameworks – Vercel

SvelteKit Auth is a simple, low configuration authentication library for SvelteKit applications, with support for many popular OAuth providers.

Vercelbalazsorban44

Ezno

Pamiętacie jeszcze Ezno? To eksperymentalny parser i type-checker do TypeScripta. Myślałem, że był to jeden z typowych projektów do szuflady, o którym autor zapomniał następnego dnia po pochwaleniu się nim na Hackernews. Myliłem się. Okazuje się, że projekt jest nadal rozwijany i zyskuje kolejne featury! Warto dodać, że Ezno napisano w Rust, co gwarantuje doskonałą wydajność.

Ezno in ’23

Where is Ezno? What’s next?

Jak zbudować dostępny theme picker?

Ku przerażeniu moim i naukowców, popularyzują się aplikacje i strony internetowe, w których możliwe jest przełączenie tła na ciemne. Pomijając zgubny wpływ takiego ustawienia na nasze oczy, skoro ta chwilowa moda już zaistniała, to warto się zastanowić, w jaki sposób stworzyć taki przełącznik motywu w naszej appce, aby był on dostępny dla wszystkich (w rozumieniu A11Y).

Building an accessible theme picker with HTML, CSS and JavaScript. by Sarah L. Fossheim

In this tutorial, we’ll use HTML, CSS, and vanilla JavaScript to add an accessible theme picker component to a website.

Building an accessible theme picker with HTML, CSS and JavaScript. by Sarah L. Fossheim

Backend

Node 18.13 (LTS) i wsparcie dla mockowania w node:test

node:test to natywny wbudowany w node.js moduł pozwalający na pisanie testów. Od 18.13 dostarcza również funkcje do mockowania, a razem z node:assert pozwalają całkowicie zastąpić narzędzia typu vitest czy jest do prostych testów!

Node v18.13.0 (LTS) | Node.js

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Node.jsNode.js

Prisma 4.9.0 i zmiany…

Prisma 4.9.0 oprócz szczątkowego wsparcia dla widoków SQL, wprowadza nowość w postaci Accelerate. Accelerate jest usługą Prismy, która zastępuje Data Platform. Jest to swoisty CDN dla danych pozwalający na znacznie zmniejszenie opóźnienia w pobieraniu informacji z bazy danych. Nie ma jeszcze zbyt wielu konkretnych informacji, trzeba poczekać. Jest to już kolejna próba Prismy na monetyzację ich fantastycznego projektu…

Prisma | Introducing Accelerate in Early Access

Query up to 1000x faster on any Prisma-supported database with our new distributed cache and scalable connection pool for Serverless apps.

PrismaAndrew Carlsonandrewicarlson

Inne

Zwolnienia w branży IT

Niestety, sama TypeScriptowa biblioteka nie przynosi żadnych pieniędzy, a zespół ponad 100 osób sam się nie utrzyma… dlatego Prisma zdecydowała się zwolnić niemal 20% osób. Oczywiście nie są to ani pierwsze ani ostatnie zwolnienia w branży: Microsoft zwolnił 10000 osób, Amazon 10000, Meta 11000, a Google 12000… i to raczej dopiero początek.

Layoffs.fyi - Tech Layoff Tracker and Startup Layoff Lists

[LIVE] Tracking all tech startup layoffs — and lists of employees laid off — since COVID-19. This page is constantly being updated.

Layoffs.fyi

DevFAQ doczekało się zupełnie nowego wydania

Wiele osób może kojarzyć DevFAQ – największą bazę pytań rekrutacyjnych stworzoną przez społeczność. DevFAQ zostało niedawno całkowicie przepisane przez Kacpra Polaka i Adriana Polaka, którzy łącznie otworzyli 57 PR-ów w repozytorium! Stack: Next.js 13, Fastify, Prisma, TypeScript. Wkrótce możecie spodziewać się nowych funkcji w aplikacji…

Pytania JavaScript (JS) • DevFAQ.pl

DevFAQ.pl — największa baza pytań z programowania tworzona przez społeczność. DevFAQ.pl jest serwisem internetowym służącym do udostępniania i wymiany pytań…

DevFAQ.pl

Kurs Next.js, GraphQL, TypeScripta…

Wiele osób dopytuje, więc śpieszę poinformować: wkrótce rusza sprzedaż kolejnej edycji naszego kursu Next.js! Jesteśmy w trakcie przygotowywania nowych materiałów związanych z Next.js 13, a dostęp do kursu jest dożywotni (łącznie z przyszłymi aktualizacjami). Zostawcie maila na stronie jeśli chcecie być na bieżąco informowani i otrzymać specjalny rabat (tylko dla subskrybentów).

Kurs Next.js, React, GraphQL i TypeScripta

Praktyczny kurs Next.js, React i GraphQL z TypeScriptem – najpopularniejszych frameworków do tworzenia aplikacji internetowych!

hyperfunctor.com – szkoła programowania JavaScript, TypeScript, GraphQLHyper Functor

Stopka

Podobało się? Nie podobało się? Daj mi znać. Jeśli coś z wrzuconych tu materiałów Ci się przydało, to daj lajka, udostępniaj, albo po prostu powiedz znajomym. Chętnie przyjmuję też wszelkie sugestie. Dzięki!

Witajcie w kolejnej edycji newslettera Type of Web! Przed Wami dawka frontendowych i backendowych newsów.

Poza kategorią

Advent of Code

Ruszyła kolejna edycja Advent of Code! Co to takiego? „Kalendarz adwentowy” w postaci codziennych zadań algorytmicznych do rozwiązania w dowolnym języku programowania. Wszystko utrzymane w klimacie świątecznym 🧑‍🎄

Dołącz do tablicy punktów Type of Web z kodem 756840-8c3f18ad:

Leaderboard - Advent of Code 2022

Advent of Code 2022

Hackvent

Równocześnie odbywa się Hackvent 2022, czyli również forma „kalendarza adentowego”, ale z zadaniami polegającymi na hackowaniu i wydobywaniu informacji… Rodzima inicjatywa dzięki pl.coding.girl i mwpro.

Hackvent 2022

Programming advent calendar - solve daily tech-related tasks

Zmiany na Discordzie

Najpopularniejszy frontendowy serwer Discord zmienia się dla Was! Type of Web: Polski frontend i backend od dzisiaj wreszcie ma kanały typu forum! 🔥🔥🔥

Oznacza to, że zamiast standardowego czatu dostępne będą też klasyczne fora tematyczne – w których każda zainteresowana osoba tworzy swój własny wątek, nikt sobie nie przeszkadza i nie wchodzi w słowo. 🥳 Idealne do rozwiązywania problemów, poszukiwania pomocy, czy po prostu dyskusji na jeden konkretny temat!

Na razie dodaję tylko kilka kanałów – zachęcam do korzystania i testowania: code-review, frontend, backend, ui-ux-design, prawo-podatki-umowy, praca-oferty.

Dawajcie znać, czy czegoś brakuje, albo czy coś jest bez sensu!

Join the Type of Web: Polski frontend i backend – JavaScript, TypeScript. React, Vue, node.js… Discord Server!

Polski front-end i back-end to serwer dla programistów i programistek. | 6,289 members

Discord

Frontend

TypeScript 4.9

Ukazała się stabilna wersja TypeScripta 4.9 zawierająca operator satisfies oraz udogodnienie w postaci adnotacji accessor w klasach. Ten pierwszy jest szczególnie istotny i od wielu lat wyczekiwany przez społeczność: pozwala na jednoczesne zachowanie bezpieczeństwa typów oraz korzystanie z inferencji! Spójrzmy na szybki przykład:

type TranslationItem = { key: string; translation: string };
type TranslationDict = Record<string, TranslationItem>;
type Languages = Record<string, TranslationDict>;

// Przed 4.9
const languages1: Languages = {
  en: {
    welcomeMessage: { key: "Yo", translation: "Yo" },
  },
  pl: {
    welcomeMessage: { key: "Yo", translation: "Siema mordo" },
  },
};

languages1.lol; // whoops, czemu tu nie ma errora?

// Nowa składnia
const languages2 = {
  en: {
    welcomeMessage: { key: "Yo", translation: "Yo" },
  },
  pl: {
    welcomeMessage: { key: "Yo", translation: "Siema mordo" },
  },
} satisfies Languages;

languages2.lol; // jest error!

Inne aktualizacje

Ukazał się też Prettier 2.8 oraz typescript-eslint 5.45.0, a wspominam o nich dlatego, że aby korzystać z operatora satisfies, musicie również zaktualizować te dwie zależności. No chyba, że nie używacie ani Prettiera, ani Eslinta i piszecie kod… jak zwierzęta!

Eslint przepisywane od zera

Tak, dobrze czytasz, twórcy ESLint przepisują go zupełnie od zera. Polecam ten 3-częściowy artykuł na ich blogu oraz dyskusję na GitHubie poniżej:

ESLint’s new config system, Part 1: Background - ESLint - Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

[data-theme="dark"] .logo-component { fill: #fff; } [data-theme="dark"] #logo-center { opacity: 60%; }

Complete rewrite of ESLint · Discussion #16557 · eslint/eslint

Introduction ESLint was first released in 2013, meaning it will be ten years old next year. During that time, the way people write JavaScript has changed dramatically and we have been using the inc...

GitHubeslint

Ant Design 5.0

Jeśli pracujecie choć trochę z interfejsami, to na pewno słyszeliście o Ant Design. Właśnie ukazała się stabilna wersja 5.0, a w niej masa zmian! Odświeżono design, dodano nowe komponenty, ale przede wszystkim zmianie uległo podejście do Design Token Model. Co ciekawe, Ant-Design również częściowo odchodzi od css-in-js. Trend, który łatwo było przewidzieć – społeczność wreszcie poszła po rozum do głowy.

Ant Design 5.0 is released! · Issue #38671 · ant-design/ant-design

Introduction At the end of September, we released v5 alpha version. After 2 months of adjustment, API has gradually stabilized. Thanks to the community for the valuable suggestions and contribution...

GitHubant-design

Backend

Prisma 4.7

Ukazała się wersja 4.7 Waszego ulubionego ORM-a, a w nim… nareszcie stabilne interactiveTransactions! Hejterzy, który zawsze pisali, że hurr durr prisma nie ma migracji nie będą zadowoleni. Do rozbudowanej funkcji prisma.$transaction możemy przekazać dowolną funkcję async i zostanie ona wykonana w obrębie jednej transakcji bazodanowej. Jest też wsparcie dla poziomów izolacji  (isolationLevel).

Z ciekawszych zmian: dodano wsparcie dla wielu schema w Postgresie – bardzo przydatne, np. przy pracy z Supabase, czy po prostu dobrze zaprojektowanymi bazami 🙃 Włączcie multiSchema!

Pojawił się również (jako eksperymentalny) nieco kontrowersyjny temat… umieszczania logiki biznesowej w modelach Prismy. Wygląda to fatalnie i na pewno będzie nadużywane. Nie włączajcie clientExtensions.

Release 4.7.0 · prisma/prisma

🌟 Help us spread the word about Prisma by starring the repo or tweeting about the release. 🌟HighlightsInteractive transactions are now Generally AvailableAfter an extensive Preview phase and lot...

GitHubprisma

Hyperstack

Nowy framework Node.js! Tak, to nie żart. Bazuje na konceptach znanych z Railsów, ma w sobie wszystko (od testów, przez modele, aż po CLI), wspiera TypeScripta… w teorii brzmi fajnie, ale niektóre składnie mnie odpychają. Cóż, chyba pozostanę przy swoim Hapi Fastify.

hyperstackjs · Hyperstack is a modern full-stack Node.js web framework for the pragmatic programmer

Hyperstack is a modern full-stack Node.js web framework for the pragmatic programmer

Hyperstack

Deno 1.28

Pamiętacie hasła z początków Deno? Izolacja, bezpieczeństwo i brak 1300000 syfiastych modułów z npma, a zamiast nich dobra biblioteka standardowa? NIESPODZIANKA. Deno 1.28 wspiera moduły z NPM. Hue hue hue 🤡 🤡 🤡 A pamiętacie jeszcze IO.js? Nie cytujcie mnie w poważnych artykułach, ale moim zdaniem Deno podzieli los IO.js i ostatecznie połączy się z Node.js.

Deno 1.28: Featuring 1.3 Million New Modules

Deno 1.28 ships with stabilized npm modules, auto-discovered lock file, a new subprocess API, and more

Deno Blog

Deno i Prisma

Ponadto: Deno i Prisma wreszcie ze sobą współgrają. Wymagało to nieco zmian w samej Prismie – np. dodania możliwości zapisywania wygenerowanych plików w dowolnym miejscu zamiast node_modules… ale w końcu jest! Działa również na hostingu Deno Deploy.

Deploy to Deno Deploy

Learn how to deploy a TypeScript application to Deno Deploy.

Prisma

Stopka

Podobało się? Nie podobało się? Daj mi znać. Jeśli coś z wrzuconych tu materiałów Ci się przydało, to daj lajka, udostępniaj, albo po prostu powiedz znajomym. Chętnie przyjmuję też wszelkie sugestie. Dzięki!

Siema siema albo się nie ma, to z kim widzę się na infoShare w piątek?

A teraz lecimy z kolejną dawką frontendowych i backendowych newsów:

Frontend

Axios 1.0.0 z poważnymi błędami…

Co myślicie na widok wersji "1.0.0"? Bo mi nasuwają się hasła „stabilność”, „powaga”, „dojrzałość”. Twórcy Axiosa postanowili spróbować zniszczyć te asocjacje w moim mózgu i wydali wersję 1.0.0 z LICZNYMI bardzo oczywistymi błędami i nieudokumentowanymi OGROMNYMI breaking changes. Poniższy kod nie działa w Axios 1.0.0 – zwraca 404 pomimo tego, że URL jest całkowicie poprawny. Zgadniecie dlaczego? Sprawdźcie!

import axios from 'axios';
const data = await axios.get('https://api.genderize.io?name=peter');
console.log(data);

Linka nie będzie ze względu na osoby o słabszych nerwach. Odważni niech przejrzą issues na GitHubie Axiosa… Nie róbcie sobie tego i nie aktualizujcie do axios@1.0.0.

TokenCSS

To taki nowy pomysł, który z założenia ma ułatwić tworzenie design systems. Konfigurujemy sobie kolory, wielkości, odstępy, fonty i tak dalej… w sposób bliźniaczo przypominający tailwind.conf.js. Następnie możemy tych opcji używać w naszych plikach CSS 😮 Czekajcie, łatwiej pokazać na kodzie:

.component {
  background: red.500;
  border-radius: lg;
  width: xl;
  height: md;
}

Gdzie, oczywiście, wartości lg, xl, md czy red.500 zostały wcześniej ustalone w pliku konfiguracyjnym. Zalety? Ograniczamy możliwość psucia wyglądu strony przez krnąbrnych programistów. Zakaz wychodzenia poza ustalone przez designera ramy. Moja ocena: 11/10.

GitHub - tokencss/tokencss

Contribute to tokencss/tokencss development by creating an account on GitHub.

GitHubtokencss

useEvent is dead

…jak to zdechł?! To znaczy, że tyś go kilim?! Dan Abramov ogłosił, że planowany hook useEvent nie stanie się częścią Reacta, gdyż rozwiązuje za dużo problemów na raz. Interesujące. Polyfill dla useEvent skopiowany z tego wątku na GitHubie pewnie zostanie w wielu aplikacjach już na zawsze… u mnie na pewno.

RFC: useEvent by gaearon · Pull Request #220 · reactjs/rfcs

In this RFC, we propose a useEvent Hook. It lets you define event handlers that can read the latest props/state but have always stable function identity. Event handlers defined with useEvent don’t ...

GitHubreactjs

TypeScript ma 10 lat

1. października 2012 światło dzienne ujrzała pierwsza publiczna wersja TypeScripta oznaczona numerem 0.8.0. Informacje o tym releasie znajdziecie na (nieistniejącym już dzisiaj) portalu codeplex.

Ja co prawda nie mogę się pochwalić Twittem na temat TypeScripta z 15. października 2012 jak Cassidy, ale uwierzcie mi na słowo, że warto było być early adopterem 😎 Używam TS od 9 lat, pierwszy publiczny PR w tym języku otworzyłem w grudniu 2013 i wdrażałem TypeScripta w komercyjnym projekcie dla klienta już w 2014… czas leci!

Ten Years of TypeScript

Today is TypeScript’s birthday! But this birthday is a special one – 10 years ago today, on October 1st, 2012, TypeScript was unveiled publicly for the first time. The Early Days When TypeScript first debuted, there was a lot of skepticism –

TypeScriptDaniel Rosenwasser

Frontlive na twitchu

Dzielne chłopaki z Discorda, czyli Mati i Szymon, robią regularnie czasem live streamy z procesu powstawania prawdziwej aplikacji internetowej. Jest fullstack: frontend na React (Next), backend na GraphQL, no i oczywiście TypeScript. Kodzik znajdziecie na GitHubie, a link do kanału wideo poniżej.

frontlivepl - Twitch

https://frontlive.pl/ na żywo

Twitch

Backend

Skrypty w Node.js

Dr. Axel Rauschmayer wydał książkę (dostępną online za darmo!) na temat tworzenia skryptów shell w node.js. Gorąco polecam! W książce znajdziecie między innymi informacje o tym jak działa node.js oraz event loop (niskopoziomowo), jak używać paczek npm i jak pisać kod tak, aby był przenośny między systemami i środowiskami (co jest kluczowe dla skryptów).

Shell scripting with Node.js

SafeQL: ESLint sprawdza SQL-a?!

Dobrze czytacie. SafeQL to wtyczka do ESLint pozwalająca na weryfikacje poprawności napisanego kodu SQL. Pilnuje literówek, a także typów kolumn i parametrów. Idealne do pilnowania fragmentów kodu, które z jakiegoś powodu piszemy w gołym SQL bez użycia ORM-a czy czegoś takiego. Współpracuje z Prismą, Sequelize, pg i innymi bibliotekami. Bajer!

SafeQL | SafeQL

Write SQL queries with confidence!

Get Started

Jak tworzyć paczki npm?

Dokładny przewodnik na ten temat napisał Brian Clark z zespołu Snyk. Na prostym przykładzie, Brian pokazuje jak przygotować repo, jak skonfigurować npm, jak skompilować kod TypeScripta na JS (również ESM!) i wreszcie, jak opublikować paczkę. Naprawdę przyjemnie opisane, nikomu nie powinno sprawić trudności mimo, że temat jest całkiem zaawansowany.

Best practices for creating a modern npm package | Snyk

In this tutorial, we’re going to walk step by step through creating an npm package using modern best practices (as of 2022).

SnykBrian ClarkSeptember 12, 2022

Meetupy

Gdańsk TypeScript Meetup by Escola

13. października (w czwartek) o godzinie 18:00 w Gdańsku odbędzie się meetup poświęcony TypeScriptowi. Jest on o tyle wyjątkowy, że będzie tam można spotkać mnie 😉 Pojawię się z prezentacją na temat property based testing w TypeScripcie.

Gdańsk TypeScript Meetup by Escola

Czy w pracy piszesz w TypeScript? Wstajesz i myślisz w TypeScript? Marzysz czasem o kierunku rozwoju TypeScript? Jeśli tak, to jest to spotkanie dla Ciebie. Jeśli nie, to jest to spotkanie, gdzie poznasz specjalistów TypeSc...

Gdańsk TypeScript Meetup by Escola

Wideo

LIVE CODING GraphQL Codegen: generowanie funkcji i typów – Nowoczesny Frontend

Już 06.10 o 13:30 robimy live poświęcony GraphQL i graphql-codegen.

• Jak generować gotowe funkcje i typy na podstawie schemy GraphQL?
• Jak bardzo możemy ułatwić sobie pracę?
• Jak automatycznie integrować GraphQL z Reactem albo Next.js?
• Dlaczego GraphQL jest fajny?

Live Coding prowadzą Jakub Neander (zaiste.net) i Michał Miszczyszyn (typeofweb.com).

Kurs Nowoczesny Frontend: Wkrótce koniec sprzedaży

Tylko do 7. października trwa sprzedaż trzeciej edycji kursu Nowoczesny Frontend: Next.js, React, GraphQL i TypeScript.

W Kursie Nowoczesnego Frontendu oferujemy Ci:
✅  14 tygodni intensywnej nauki (cała agenda jest tutaj)
✅  Dożywotni dostęp – możesz wrócić do materiałów bez stresu kiedy zechcesz.
✅  Przyszłe aktualizacje treści – dostaniesz materiały i poprawki z każdej kolejnej edycji.
✅  Zamkniętą grupę, pomoc i materiały – online niemal 24/7.
✅  Rozbudowane zadania domowe.
✅  Masę materiałów dodatkowych i dygresji.
✅  Satysfakcję lub zwrot pieniędzy.

Kurs Next.js, React, GraphQL i TypeScripta

Praktyczny kurs Next.js, React i GraphQL z TypeScriptem – najpopularniejszych frameworków do tworzenia aplikacji internetowych!

hyperfunctor.com – szkoła programowania JavaScript, TypeScript, GraphQLHyper Functor

Stopka

Podobało się? Nie podobało się? Daj mi znać. Jeśli coś z wrzuconych tu materiałów Ci się przydało, to daj lajka, udostępniaj, albo po prostu powiedz znajomym. Chętnie przyjmuję też wszelkie sugestie. Dzięki!

Stale poszukuję sponsorów. Chcesz, aby Twoje materiały lub ogłoszenie było tutaj promowane? Odezwij się na wspolpraca@typeofweb.com lub typeofweb.com/wspolpraca. Dokładną ofertę znajdziesz na podstronie Reklama.

Po bardzo długim urlopie od blogowania, podcastowania, youtube'owania i innych takich… powracam! Nie będę się rozwodził tu nad przyczynami tej przerwy w tworzeniu treści, bo to raczej temat na cały osobny artykuł na blogu… Nie przedłużając, teraz już widzimy się regularnie w Newsletterze i na YouTube.

Frontend

Radix 1.0.0

Ostatnio głośno jest o różnych bibliotekach UI typu headless. Co to właściwie oznacza? Ano, są to takie biblioteki, które zawierają różne elementy interfejsu (toggle, dropdown, tooltip i tak dalej…), ale nie zawierają żadnych stylów. Ich popularność rośnie pewnie za sprawą Tailwinda – szukamy gotowych komponentów, które moglibyśmy sobie sami ostylować przy pomocy klas, bez konieczności nadpisywania stylów twórców paczki…

Jednym z takich rozwiązań (i ostatnio chyba moim ulubionym) jest Radix, który właśnie stał się oficjalnie stabilny i przybito mu pieczątkę z wersją 1.0.0. Sprawdźcie!

Primitives – Radix UI

An open-source React component library for building high-quality, accessible design systems and web apps.

Niesamowite animacje borderów

Jeśli pracujecie właśnie nad swoim portfolio albo nową stroną, która ma zaskakiwać i jednocześnie zachwycać – to jest to artykuł dla Was! Coco opisuje w nim jak można efektownie animować bordery przy użyciu wyłącznie CSS-a, a efekty tego eksperymentowania są… cóż, zresztą, sami zobaczcie.

Fantastic CSS border animation

In this article we will use CSS to create a variety of wonderful border effects.

DEV Community 👩‍💻👨‍💻Coco

Qwik: kolejny framework

Nie będę udawał, że wiem o co tu chodzi. Bo nie wiem. Qwik to kolejny framework frontendowy. Bez hydracji, z automatycznym lazy-loadingiem, zoptymalizowany pod słynny edge (nie mylić z przeglądarką). Niby wiem co każde z tych pojęć oznacza, ale chyba doświadczenie nauczyło mnie sceptycyzmu. A, stoi za tym tworem Miško Hevery, czyli ten gość, który odmienił front-end 10 lat temu tworząc AngularJS, a jego idee i pomysły kopiowane są przez wszystkie popularne frameworki do dzisiaj. Czy znowu przynosi rewolucję? Dajcie mi znać.

Qwik - Framework reimagined for the edge

No hydration, auto lazy-loading, edge-optimized, and fun 🎉!

Qwik

Lexical, czyli nowy edytor od Facebooka

Tak, dobrze Ci się zdaje, Facebook już tworzył jeden edytor tekstu. Był to Draft.js, który teraz traci wsparcie i nie będzie dalej rozwijany. Umarł król, niech żyje król: Lexical. Jest to wczesny etap rozwoju, ale wygląda bardzo obiecująco. Jest to edytor, który całkowicie oddziela what od how i jest agnostyczny w stosunku do tego co jest edytowane i z jakiej składni korzystamy.

GitHub - facebook/lexical: Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance. - GitHub - facebook/lexical: Lexical is an extensible text editor framework that p...

GitHubfacebook

Backend

Alternatywy dla Heroku

Heroku ogłosiło niedawno koniec bardzo popularnej darmowej usługi hostingowej. Od teraz, wszystkie plany będą płatne, a Wasze hobbystyczne projekty będą musiały niestety powędrować gdzie indziej… Ale dokąd? No właśnie, tu opcji jest wiele, ale chciałbym skupić się na dwóch:

• Railway.app
• Fly.io

Oba to bardzo nowoczesne hostingi i oba mają bardzo hojną ofertę – tzn. dostajecie mega dużo za darmo. Obie usługi pozwalają na deploy dowolnej aplikacji (od node.js, przez Ruby aż po Pythona), wspierają Dockera, oferują bazy danych i tak dalej… czyli w zasadzie wszystko czego potrzeba.

Dodatkowo, fly.io out of the box pozwala na przeniesienie aplikacji z Heroku (bo samo Fly korzysta z tzw. buildpacków tworzonych na potrzeby Heroku!), natomiast Railway udostępnia poradnik jak zmigrować z Heroku.

Ja zdecydowałem się przenieść discordowego Bota Type Of Web na fly.io. A Ty co wybierasz?

Deno ze wsparciem npm?

Skoro przy hostingach jesteśmy, to może jeszcze nie znacie Deno: alternatywy do Node.js powołanej do życia przez jednego z twórców samego Node'a. Brzmi dumnie? Projekt absolutnie nie jest nowy (istnieje od dwóch lat), ale po ostatniej rundzie finansowania dzieje się wokół niego tak dużo, że w końcu się przełamałem i potestowałem co nieco…

Od teraz, Deno będzie – wbrew wielu wcześniejszym deklaracjom i obietnicom – miało również oficjalne wsparcie dla paczek pobieranych z npmjs. Podobno właśnie tego chce społeczność. Ale czy przypadkiem nie jest to odejście od najważniejszych wartości Deno, czyli stabilności, jakości bezpieczeństwa…? Oceńcie.

Big Changes Ahead for Deno

Learnings from our recent survey and feedback from across our community. We’ll discuss how we’re addressing this feedback and the features to expect from Deno in the coming months.

Deno Blog

pkg.land: Jak szukać alternatywnych paczek npm?

Pewnie nie raz zastanawialiście się, czy istnieją godne polecenia alternatywy do paczek z npm, z których korzystacie? Po prostu z ciekawości, dla porównania lub dlatego, że takie są wymagania SOC2… Ale jak w ogóle szukać, żeby znaleźć? Poznajcie pkg.land, czyli narzędzie (obecnie beta), które dokładnie do tego służy 🤗

pkg.land

find alternative packages on npm

find NPM alternative packages

Wideo

Jak zacząć w branży IT?

Już w najbliższy wtorek 20.09 o godzinie 13:30 robimy live z Aleksandrą Pszczołą z Bee Talents. Jak zacząć w branży IT? Jak wygląda proces rekrutacji? Jak szukać (i znaleźć) dobre firmy? Jak wygląda rynek pracy w Polsce i za granicą? Na te i wiele innych pytań odpowie Wam Aleksandra Pszczoła, CEO Bee Talents. Będzie możliwość zadawania pytań na czacie na żywo – nie przegapcie!

TypeScript 4.9 i satisfies

Razem z Jakubem „Zaiste” Neander zrobiliśmy live-coding na temat TypeScripta 4.9, nowego operatora satisfies i jego zastosowania w Next.js. Reakcje były bardzo pozytywny, więc szykujcie się na kolejne live'y tego typu! Aby ich nie przegapić – subujcie kanał 😊 Kolejny będzie poświęcony Edge API Routes.

Stopka

Podobało się? Nie podobało się? Daj mi znać. Jeśli coś z wrzuconych tu materiałów Ci się przydało, to daj lajka, udostępniaj, albo po prostu powiedz znajomym. Chętnie przyjmuję też wszelkie sugestie. Dzięki!

Stale poszukuję sponsorów. Chcesz, aby Twoje materiały lub ogłoszenie było tutaj promowane? Odezwij się na wspolpraca@typeofweb.com lub typeofweb.com/wspolpraca. Dokładną ofertę znajdziesz na podstronie Reklama.

Pamiętasz, że już dzisiaj o 18:00 czekamy na Ciebie na livie? Będziemy mówić o tym, jak budować nowoczesny frontend z Next.js i Incremental Static Regeneration, a konkretnie:

✅ Czy dynamiczne aplikacje da się implementować jako statyczne strony?

✅ Jak budować nowoczesny frontend?

✅ Czy Next.js to najlepszy wybór do tworzenia rozbudowanych frontendów?

✅ Dlaczego Incremental Static Regeneration to absolutny game changer?

👉 Czekamy na Ciebie tutaj o 18:00 👈
https://youtu.be/vt6Y3ahkgV8

Jakub to marzyciel i perfekcjonista, który zawsze ma jakieś ciekawe angegdoty ze swoich spotkań z licznymi startuperami z Doliny Krzemowej. Michał zaś to twarto stąpający po ziemii realista, który na wieść o nowych frameworkach tylko wywraca oczami. I dlatego właśnie nasz duet jest tak ciekawy, bo zawsze się kontrujemy i uzupełniamy 🔥

Nagranie z live'a prawdopodobnie będzie dostępne przez jakiś czas, ale warto być na żywo!

P.S. Będzie czas na pytania i odpowiedzi

P.S.2 Porozmawiamy też o kursie Nowoczesny Frontend, więc jeśli masz jakiekolwiek pytania to zadaj je w trakcie!

Dziś przychodzę do Ciebie z dwoma newsami w temacie Next.js, React, GraphQL, TypeScripta i wszystkiego co związane z tworzeniem nowoczesnego frontendu.

Po pierwsze: Już w ten czwartek (28. kwietnia) o 18:00 odbędzie się wyjątkowy live pod hasłem Nowoczesny Frontend: Next.js Incremental Static Regeneration. Ja, czyli Michał Miszczyszyn (Type of Web) oraz Jakub Neander (Zaiste) pojawimy się specjalnie dla Ciebie na żywo aby opowiedzieć o budowaniu współczesnych aplikacji internetowych.

Linka do dołączenia do webinaru wyślę Ci w czwartek z samego rana.

O czym w ogóle będziemy mówić? Dowiesz się:

✅ Czy dynamiczne aplikacje da się implementować jako statyczne strony?
✅ Jak budować nowoczesny frontend?
✅ Jak działa Incremental Static Regeneration?
✅ Czy Next.js to najlepszy wybór do tworzenia rozbudowanych frontendów?

Na te i wiele innych pytań odpowiemy w trakcie live'a. Będzie dyskusja, będzie też ⚠️ live coding ⚠️, więc nie może Cię zabraknąć!

Co istotne, warto pojawić się na żywo nie tylko po to, aby móc zadać nam pytanie, ale też dlatego, że nagranie z live'a będzie do obejrzenia tylko przez krótki czas… bo docelowo będzie dostępne wyłącznie dla naszych Kursantów i Kursantek!

I to jest właśnie ten news numero due, czyli: startujemy z drugą edycją kursu online Next.js, GraphQL i TypeScripta! 🎉

Wkrótce udostępnię więcej informacji, lekcję demo, (rewelacyjne) opinie kursantów pierwszej edycji, pełną ofertę oraz odpowiedzi na wszelkie pytania. Zainteresowanie jest spore, pytań od Was wiele, ale damy radę 😉

To tyle! Skupiamy się na dostarczeniu Ci maksimum merytoryki, więc bez zbędnego lania wody: widzimy się na livie w czwartek, a później na kursie Nowoczesnego Frontendu.

P.S. Wiem, że dawno nie było newslettera. To się zmieni :) Wkrótce więcej merytorycznych i ciekawych wiadomości.

To samo w różnych językach

Razem z @pani.od.programowania (Java), @pogromcy_kodu (Python) @szymonpaluch (Ruby) i @michal_typofweb (TS/JS) postanowiliśmy stworzyć dla Was proste porównanie popularnych języków programowania. Na pierwszy ogień poszła prosta instrukcja warunkowa 👉 IF 👈 Jak ją napisać w TypeScripcie, a jak w Javce? Czy zapis z Pythona jest bardziej przystępny niż ten w Rubym?

Niezależnie od tego, czy dopiero zaczynasz z programowaniem, czy jesteś już przekozakiem to seria „To samo w różnych językach” będzie dla Ciebie idealnym miejscem, żeby dowiedzieć się czegoś nowego!

Śledźcie nas na bierząco na Instagramie, kolejne posty już w środę o 19:00

Frontend

Nowy projekt Netlify

Netlify przygotowuje jakiś tajny projekt. Ogłoszenie ma nastąpić 15. lutego o godzinie 19:00 czasu polskiego. W projekt zaangażowany jest Sean Grove – osoba znana wszystkim w społeczności Rescript (ReasonML), a późnie GraphQL. Czy ma to jakiś związek? Zobaczymy!

Join the product launch

A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free!

Netlify

SQLite w CSS

Jak połączyć się z bazą danych SQLite z poziomu… CSS? Okazuje się, że jest to możliwe! Wystarczy tylko szczypta magii w postaci Houdini…

Yes, I can connect to a DB in CSS

kamelåså special topics in calamity something or other

Recoil 0.6

Wyszeł Recoil w wersji 0.6, a wnim w sumie nic ciekawego dla osób korzystających ze stabilnej wersji Reacta… ale jeśli jesteś nieco bardziej żądny/a przygód, to zainstaluj sobie Reacta 18.0.0-rc.0, w którym można nieco, hmmm, poszaleć. useRecoilState_TRANSITION_SUPPORT_UNSTABLE i inne hooki o podobnej nazwie czekają na Ciebie.

Recoil 0.6 | Recoil

Recoil 0.6 introduces improved support for React 18, including concurrent rendering and transitions, along with new APIs, fixes, and optimizations.

Recoil

Angular powoli dogania konkurencję

Team Angulara niedawno wypuścił RFC dotyczące "Standalone Components", czyli pozbyciu się NgModule na rzecz po prostu, najzwyczajniej w świecie, prostych komponentów. Jest to coś co było wytykane Angularowi od samego początku jego istnienia (jeszcze w wersjach 2-alpha) i wreszcie dzisiaj, po 6 (sic!) latach, rozpoczęło się rozmyślanie nad tym jak bardziej NgModule był, jest i będzie zbędny.

Component-First Architecture with Angular and Standalone Components

Angular recently had an RFC (Request for Comments) on Standalone Components. It is an effort to make...

DEV CommunityColum Ferry

Angular News o React

Kolejnym dowodem na to jak bardzo martwa jest społeczność Angulara niech będzie fakt, że Angular News na Twitterze wrzuca informacje o… React.

Backend

async/await w Rust

Proces rozwoju Rusta jest bardzo dojrzały i przez to też nieco powolny. Ale mamy pewien istotny update na temat prac projektowych, które trwają już rok… powitajcie async/await w Rust! Oprócz funkcji oznaczanych słowem async oraz oczekiwania na ich rezultat przez await, Rust dodaje od razu różnież for await i AsyncIterator. Każda osoba zaznajomiona z JS-em będzie się czuła jak ryba w wodzie.

Async Rust in 2022 | Inside Rust Blog

Want to follow along with Rust development? Curious how you might get involved? Take a look!

Inside Rust BlogAsync Working Group

Node.js 16.14.0 (LTS)

Wyszedł node.js 16.14.0. Poza pomniejszymi zmianami, jest jedna szczególnie warta uwagi: dodanie eksperymentalnego wsparcia dla import assertions, które obecnie są w fazie 3 szkiców do ECMAScript. Node.js ukrywa na razie tę funkcję za flagą --experimental-json-modules.

Node v16.14.0 (LTS) | Node.js

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Node.jsNode.js

redis-smq

Lekka, prosta i bardzo wydajna kolejka oparta o Redisa. Dla Node.js. Niedawno wyszła wersja 6! Używacie?

GitHub - weyoss/redis-smq: A simple high-performance Redis message queue for Node.js.

A simple high-performance Redis message queue for Node.js. - GitHub - weyoss/redis-smq: A simple high-performance Redis message queue for Node.js.

GitHubweyoss

Podcast

require.pl z Olafem Sulichem z frontlive.pl

Pierwszy odcinek w formacie require().interview, czyli serii, w której prowadzący (Artur Dudek i Adam Siekierski) rozmawiają z gośćmi jak na rozmowie rekrutacyjnej – konkretnie, technicznie, precyzyjnie. Pierwszym zaproszonym został Olaf Sulich, a rozmowa dotyczyła tematu dostępności (accessibility). Warto posłuchać.

require(#32).interview - Dostępność feat. Olaf Sulich z Frontlive.pl

W tym odcinku Require Podcast rozmawialiśmy z Olafem Sulichem, autorem bloga Frontlive.pl, na temat dostępności, która jest często pomijanym, a bardzo istotnym tematem w kontekście frontendu

Require Podcast

Podcast Type of Web

Przy okazji muszę wspomnieć, że nasze rozmowy z kanału Type of Web na YouTube możecie też wysłuchać w postaci podcastu na popularnych platformach:

• Apple Podcasts
• Google Podcasts
• Spotify
• … i innych

Stopka

Podobało się? Nie podobało się? Daj mi znać. Jeśli coś z wrzuconych tu materiałów Ci się przydało, to daj lajka, udostępniaj, albo po prostu powiedz znajomym. Chętnie przyjmuję też wszelkie sugestie. Dzięki!

Stale poszukuję sponsorów. Chcesz, aby Twoje materiały lub ogłoszenie było tutaj promowane? Odezwij się na wspolpraca@typeofweb.com lub typeofweb.com/wspolpraca. Dokładną ofertę znajdziesz na podstronie Reklama.