6 min read

Polski frontend i backend newsletter @ typeofweb.com #17

Popsuty Axios, martwy useEvent, 10 lat TypeScripta
Popsuty Axios, martwy useEvent, 10 lat TypeScripta

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:

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

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 [email protected].

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.

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 ...

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 –

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

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!

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).

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...

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!

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 [email protected] lub typeofweb.com/wspolpraca. Dokładną ofertę znajdziesz na podstronie Reklama.