Tag: astro

Co nauczyłem się w marcu (i połowie lutego)

Ale ten czas leci. Myślałem, że od ostatniego wpisu minął równy miesiąc, a jednak nie: poprzednie podsumowanie czego nowego się nauczyłem robiłem dokładnie 15 lutego.

Uznajmy, że 28 marca to już koniec miesiąca, więc mogę zrobić kolejne podsumowanie. Spojler alert: tym razem nowości jest mniej.

Wykorzystałem Astro

Jak wcześniej wspominałem, że polubiłem Astro, to od tamtej pory przeniosłem stronę Gajówka Pasieki na ten system. Jak widać to jest niewiarygodnie prosta strona (i powstała w jeden wieczór gdy przy piwie stwierdziliśmy z kolegą, że taka strona musi powstać), gdzie na WordPressie był zainstalowany gotowy motyw, dodane trzy podstrony i przez lata nic innego tam się nie pojawiało. WordPress jest do tego absolutnie zbędny i tylko sprawiał problem, bo raz, że trzeba go było co chwila aktualizować, a dwa generowanie w kółko tych samych trzech widoków przez PHP to marnotrawstwo zasobów. To powinno być statyczne i jest statyczne (i wyświetla się dwa razy szybciej, choć całość jest teraz hostowana na darmowym GitHub Pages)

Coolify

A wiecie, że od 12 lat jestem posiadaczem serwera dedykowanego, z którego właściwie nie korzystam? Nie VPS tylko prawdziwy metalowy rack siedzi sobie w szafie w serwerowni we Francji i ma 500 GB przestrzeni, z której właściwie nie korzystam. Raz na jakiś czas coś instaluje i potem to kasuje.

Mam go tak długo, bo jest głupio tani. Gdy serwery dedykowane potrafią kosztować ponad tysiąc złotych za miesiąc, to ja za niego płacę coś około 25 złotych miesięcznie. To jest Kimsufi od OVH i tyle właśnie one kosztują w najtańszych wersjach. Są wolne, ale w takiej cenie idealne do nauki administrowania zdalnym serwerem.

Są wolne, ale dobre pod strony statyczne. Postanowiłem więc podejść do tego jako do miejsca na moje przyszłe strony w Astro więc dość naturalnie zainteresowałem się Coolify. To taki odpowiednik open source Netlify, gdzie masz panel w przeglądarce do tworzenia różnych instancji serwerów i uruchomionych tam usług (WordPressa też można).

Działa to tak na 4+. UI mogłoby być miejscami lepsze, czasem składanie wszystkich klocków (repozytoriów gita, zasobów do deployu, zarządzanie kluczami SSH) nie jest intuicyjne i zdarza się, że muszę jakąś instancję zabić i zacząć od nowa. Ostatecznie mam tam już dwie działające “próbki” czegoś tam.

Programiści Google to tacy sami ludzie jak my

…i im też zdarzają się fuckupy i to takie że ho. Wiecie, że stworzyli oni nowe Places API, wyłączyli stare Places API i nie zauważyli, że te stare wciąż jest wymagane gdy używasz go w połączeniu JavaScript Maps API (a właściwie każdy kto dodaje mapę na stronę używa takiego połączenia)?

To było tak niesamowite doświadczenie, że miałem totalny mindfuck, gdy klienci zaczęli nam to w pracy zgłaszać. Że nasza wtyczka, która wyświetla mapy zaczęła źle działać. No googlowych forach inni programiści zaczęli to zgłaszać Googlowi a ich programiści bardzo pokrętnie zaczęli tłumaczyć, by używać już tylko nowego Places API. Że może to takie trochę z zaskoczenia zmiana, ale sorry i tak trzeba. Co więcej widząc, że nowe API ma błędy na szybko je łatali i kazali używać API w wersji z kanału alpha.

Jako, że naszej wtyczki używa tak pi razy oko kilkaset tysięcy ludzi, musiałem to wszystko na szybko przepisywać na nowe API. I była to bardzo dziwna droga i doświadczenie: co chwila trafiałem na jakąś niekonsekwencję, nieporozumienia w komunikacji między Places API, a Maps JavaScript API, a do tego jeszcze Geocoding API, które musiałem łatać po omacku na poziomie naszej wtyczki (gdy to absolutnie leżało po stronie domeny Googla). Im dalej, tym więcej rzeczy nie działało.

Na szczęście trwało to tylko dla mnie kilka dni, po których odkryłem, że jak gdyby nigdy nic stare API wróciło. Ktoś tam jednak zauważył, że to jest katastrofa.

Ale nadal nie wierzę, że tak wielkie korpo, które uczy innych jak dbać o jakość kodu, pokrywać wszystko testami itd nie tylko przegapiło, że ich nowe API źle działa, to było tak pewne swojego, że stare zwyczajnie z dnia na dzień wyłączyli (a raczej ukryli). To był dla mnie spory dysonans poznawczy.

Claude CLI

Rozwiązując powyższy problem, próbowałem użyć Claude CLI. Ostatecznie poległ (a właściwie przewidział przyszłość: w pewnym momencie z uporem maniaka podawał rozwiązania w starszej wersji API) ale samo oglądanie jak pracuje robiło przyjemne i imponujące wrażenie. Podałem mu prompt w konsoli, by obniżyć koszt podpowiedziałem w jakim katalogu mam kod, podałem linki do forów gdzie inni opisywali ten sam problem.

Mielił, myślał, zaglądał pod linki i zaczął podawać rozwiązania od razu zmieniając mój kod. Oczywiście to nie działało i mówiłem mu jakie tym razem mam błędy w konsoli, nawet podałem mu link do mojej strony na localhoscie mając nadzieję, że może będzie umiał sam zauważyć błąd.

I tu było najlepsze: gdy zorientował się, że to jest localhost, sam zaczął pisać sample strony zawierające kod JS jaki chce mi zaproponować, umieszczać na moim serwerze i uruchamiać na nim automatyczne testy sprawdzające czy to co chce zaproponować będzie działać. Po kilku takich próbach właśnie zauważył, że nic nie działa i to wtedy stwierdził, że jedyne co możemy zrobić to używać stare API.

Sprytna bestia, nawet jak nie zna rozwiązania.

1

Co ostatnio się nauczyłem

Przyszło mi do głowy, że mogę sobie podsumować co się ostatnio nauczyłem, i to też właśnie robię.

Że LLM fine-tuning nie zawsze jest konieczny

W pracy mamy swój własny język programowania (nieduży, do specyficznego zadania), wygląda trochę jak pseudocode i jako, że jest do specyficznego zadania, zawiera niewielką grupę instrukcji jak if/else, operacje matematyczne i kilka tym podobnych.

Wiosną ubiegłego roku pomyślałem, że to dobra okazja by zobaczyć czym jest fine tuning: postanowiłem zrobić czata, który w odpowiedzi na pytanie (np, “policz ile to jest 2 + zmienna1, jeśli wynik będzie większy niż zmienna2, napisz ‘za dużo'”). Jako, że żaden model językowy nie zna naszego języka, postanowiłem za pomocą fine-tuningu nauczyć nowy model i go użyć. Wtedy zadziałało.

Firmie się spodobało i dostałem zadanie by czat był dostępny dla użytkowników naszych produktów. Tyle, że miałem to zrobić bez fine-tuningu.

Już miałem pójść w embeddings i zacząłem z nimi ekseprymentować, ale znajomy podpowiedział, że ju próbował przekazać dokumentację języka – okrojoną – zwyczajnie jako system prompt.

I faktycznie: pierwsze próby dały od razu pozytywne rezultaty, a dopieszczanie system prompt daje już rezultaty niemal idealne. Do tego stopnia, że spodziewajcie się, że napiszę więcej gdy produkt będzie już na rynku.

Skille podszlifowane: OpenAi API, fine tunning, embeddings i wyczajnie prompting.

Że web components są fajne

Czat ma bazować na UI, który już mamy do czatów w innych celach dodanych tu i tam. Całe UI to jeden HTML-pseudo-element napisany jako Web Component.

Spodobało mi się to do tego stopnia (działa to i wygląda podobnie do komponentów React, Svelte czy innych, tylko, że nie wymaga niczego więcej niż czystego JS i przeglądarki), że przez kilka dni myślałem co by tu dla siebie napisać w tym API i wymyśliłem: narzędzie do wrzucania obrazków ponad swoją stronę, z designu by porównywać z tworzoną stroną czy jest taka, jak grafik sobie zażyczył.

Jak to działa możecie zobaczyć tutaj (spójrzcie w prawy dolny róg), tu jest repo jeśli chcecie sami użyć (dodajcie wtedy na stronie element <pixel-perfect> i tyle), a jeśli chcecie w postaci wtyczki do WordPressa to też oczywiście jest.

To była fajna zabawa, serio.

Skille: web components, shadow DOM, localStorage API i do tego kolejny raz użyte Github Pages.

Że takie narzędzia już są, ale to dobrze

Plugin wam nie zadziała z marszu, musicie sklonować repo i zrobić composer install. Buildów nie zrobiłem, a tym bardziej nie wrzuciłem do repo WordPressa, bo gdy pokazałem to narzędzie w firmie, powiedziano, że przypomina już istniejące dodatki do przeglądarek. Tu dla Firefoksa, a tu dla Chrome.

Tak więc wtyczki dalej nie będę rozwijał (chyba).

Ale to, że narzędzia już istnieją przyjąłem z entuzjazmem. Nawet czułem, że musi być już coś takiego, ale nie szukałem, bo głównym celem było “użyć web components w czymkolwiek i nie patrzeć się na nic”. Chciałem się nauczyć nowej technologii i już umiem.

A czemu z entuzjamem? Było to dla mnie wielkie wow, jak bardzo trafiłem z wyborami:

  • ta sama nazwa biblioteki jak istniejacych rozwiązań
  • upload obrazka (to oczywiste)
  • zmiana przezroczystości za pomocą suwaczka
  • inwersja kolorów!
  • przesuwanie obrazka po ekranie kursorem lub klawiszami strzałek (z shiftem przesuwa bardziej)
  • zapamiętywanie położenia i parametrów pomiędzy odświeżeniami strony

Moja biblioteka i dostępna rozszerzenia robią dokładnie to samo choć nie podglądałem “konkurencji”. Cieszy mnie, że zrobiłem coś, tak jak tego oczekuje rynek.

Skille: samozadowolenie.

Że można hostować WordPressa jako static page

Dla mojej wtyczki WC Price History musiałem zrobić landing page. Domenę już mam w OVH i do niej za darmo mikrohosting więc stwierdziłem, że na jedną stronę, no może kilka, wystarczy.

Zdziwiłem się, że tam nie ma bazy danych, no ale dobra: za darmo. WordPress więc nie pójdzie, więc może jakiś static page?

Jako, że z designem u mnie nie najlepiej, mimo wszystko chciałem wykorzystać jakiś gotowy motyw WordPressa i Gutenberga do budowania blokowych treści.

I się udało, tu jest strona, zupełnie statyczna, a zbudowana w WordPressie. Jak?

  • na localhost mam stronę normalną w WP
  • za pomocą Gutenberga zbudowałem jej cały wygląd, to było w sumie pierwsze użycie (bez porażek) Gutenberga nie do edycji treści a budowy całego layoutu. Nadal nie jest to idealne user experience ale już zaczynam czuć to narzędzie
  • za pomocą wtyczki Simply Static (wersji darmowej) generuję wersję statyczną
  • potem przez ftp wysyłam do OVH. Automatyczne wysyłanie jest w wersji płatnej ale udało mi się je zastąpić prostym skryptem w bash.

Skille: już mi o wiele lepiej z Gutenbergiem, statyczne strony są szybkie, bash scripting

Web components i statyczne strony zainteresowało mnie Astro.

Powyższe doświadczenia plus ten film na youtube sprawiły, że wyszedłem troszkę z WordPressa i zacząłem szukać innych ciekawych rzeczy wokół JS. W filmie można zobaczyć jak duże frameworki JS wykorzystują web components i tag <template> do streamowania danych i hydracji widoku użytkownika. Pomysłowe, sam myślałem, że to po prostu jakiś ajax.

W filmie pada stwierdzenie, że Astro to taki framework, w którym można używać Reacta, Svelte, Vue czy czego się chce do budowania komponentów (plus własne elementy Astro) i zacząłem czytać o tym więcej.

Rewelacyjny pomysł, szczególnie jeśli chcesz używać strony do nauki kolejnych frameworków. Znam już React i dość sporo wiem o Svelte (na poziomie stworzonych mini projektów). Jak stworzysz stronę w React, a chcesz się nauczyć Svelte to musisz stworzyć kolejną stronę lub przepisać poprzednią. A z Astro nie: jak masz już komponenty napisane w React, a chcesz się nauczyć Vue, po prostu piszesz kolejny moduł w Vue. I wszystko razem działa i wymienia między sobą informacje.

Astro jeszcze czeka na użycie, takie prawdziwe. Ale cała idea “static first”, wysp dynamicznych i ewentualnego SSR na koniec bardzo mi się podoba.

Skille: Astro, jak działa hydracja

To tyle z ostatniego miesiąca

To tylko ostatnie mniej więcej 40 dni, może mniej, a na pewno nie dzień w dzień. Raz na jakiś czas przychodzi mi taka maniakalna faza na poznawanie nowych rzeczy (a potem i tak kończę w WordPressie). Ale chyba każdy programista tak ma.

W komentarzach możecie mi podesłać swoje nowo nauczone rzeczy lub co jeszcze wokół tematów powyżej krąży i mógłbym poczytać. Jestem głodny 🙂

2