Polski frontend i backend newsletter @ typeofweb.com × michalczukm.xyz #20

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.

Jared PalmerVercel

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…

ClariityGitHub

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!