Tag: react

Od miesiąca przybyły mi 3 nowe strony, żadna na WordPressie

Ale bez obaw. Ani WordPress nie umiera, ani ja nie wycofuje się z pracy z nim. Jeśli potrzebujesz eksperta od niego, wal jak w dym.

Po prostu eksploruje inne możliwości uruchamiania stron, tak by i w ich kwestii stać się ekspertem.

No to lecimy z listą:

Is Ai Risk? Tester Twojego CV

https://www.isairisk.com

Idea jest bardzo prosta: przeciągasz drag&drop swoje obecne CV i jest ono automatycznie analizowane, by odpowiedzieć na pytanie, jak duże jest ryzyko, że zostaniesz zastąpiony przez sztuczną inteligencję.

Ale, żeby nie było tak strasznie, jeśli takie ryzyko istnieje, dostajesz też od razu porady jak to ryzyko zmniejszyć: czego brakuje w Twoim CV, co się douczyć, albo jak inaczej zrobić drift twojej kariery w obszary mniej narażone na zastąpienie przez automat.

Powodami technicznymi do stworzenia strony była chęć pokazania jak sobie radzę z AI, oraz chęć stworzenia strony na React z server side rendering. Analiza CV odbywa się tam właśnie automatycznie za pomocą jednego z modeli LLM od OpenAI. Trochę trwało, zanim dopieściłem wszystko, by odpowiedź miała sens i nie była ogólnym bełkotem “już po tobie” byle by coś odpowiedzieć.

Jest jeszcze problem z niektórymi CV w PDF, szczególnie eksportowanymi z Canvy czy MS Word, bo biblioteki do ekstrakcji tekstu z nich nie widzą pełnej treści. W takim wypadku ręcznie przekształćcie je na .txt i wczytajcie jeszcze raz.

Powodem terapeutycznym był fakt, że wygląda na to, że jestem jednym z tych, którzy właśnie przez AI stracili pracę 😐 WPForms w jakimś stopniu zastępuje obecnie pracowników sztuczną inteligencją (napiszę o tym więcej może w osobnym wpisie, ale dajcie znać w komentarzach czy chcecie w ogóle o tym czytać).

Śmiało wchodźcie i bawcie się. Korzystanie jest na razie darmowe, ja waszych CV nie będę widział.

Neuronowa.pl – blog o sztucznej inteligencji

https://neuronowa.pl

Najnowsza strona sprzed tygodnia, ale jak już jesteśmy w temacie AI, to wrzucam teraz. Dobrze mnie pewnie część z Was zna z blogowania o WordPressie i blogować tam będę dalej. Ale jako że zainteresowania się zmieniają, potrzebowałem przestrzeni, gdzie będę mógł blogować o AI.

Co więcej, zauważyłem jak wiele osób ma problem, aby w ogóle zacząć korzystać z najzwyklejszych czatów AI. Gdy ja pływam w tym jak ryba w wodzie (umiem nawet stworzyć własny model AI przez fine tunning czy transformersy, już nie wspominając, że wiem jak użyć AI na wszelkie sposoby inne niż okienko ChatGPT czy Claude) w rozmowach słyszę, że ktoś się zapisał na kurs AI, gdzie uczą go jak założyć konto i jak napisać pytanie w okienku czata. Jeśli potrzebujecie takich podstaw, to takie porady też tam znajdziecie. Ale będę też pisał tutoriale, z których dowiecie się co to transfomers (w kontekście AI) i jak się nim robi model skrojony pod potrzeby Twojej firmy.

(A jak nie chcesz czekać, a potrzebujesz takich rozwiązań czy podobnych już teraz, pisz śmiało)

Technicznie jest tam AstroJS, które jak już może zauważyliście z poprzednich wpisów, lubię i używam od niemal roku.

Kolibia.pl – moja strona firmowa

https://kolibia.pl

Zauważyliście powyżej, jak nachalnie próbuję się sprzedać jako developer WordPress i AI? 😉 Choć mam tę domenę od dawna (bo tak nazywa się moja firma) to przyszła pora by ubrać szewca w buty i uruchomić tam stronę-wizytówkę z moją ofertą.

Po przeczołganiu się zebraniu doświadczenia w pracy z WordPressem w dwóch ogromnych korporacjach z tego uniwersum wracam do pracy na swoje. Mam mnóstwo pozytywnej energii i choć praca bezpośrednio z klientami lata temu szła mi dobrze, z dystansu widzę, co mogłem robić lepiej. I serio: w korporacjach zdobyłem taką perspektywę na wiele aspektów, rozwinąłem umiejętności techniczne ale i miękkie, że teraz może być tylko lepiej.

Technicznie, to też jest AstroJS.

Dlaczego nie WordPress?

Jak już wspomniałem, bo chciałem sprawdzić się na innych polach. Ale też by pokazać sobie i światu, że choć WordPress to kombajn do wszystkiego, czasem lepiej użyć narzędzi skrojonych na miarę potrzeb.

Żadna z powyższych stron nie wymaga systemu zarządzania treścią, a tym właśnie przede wszystkim jest WordPress: CMSem. Na IsAiRisk nie ma kompletnie żadnej treści. Na Kolibia.pl treść jest, ale nie muszę ją zarządzać: napisałem raz i jest. Oczywiście będę czasem coś zmieniał i cyzelował, ale to nadal nie wymaga, by przy każdej Waszej wizycie uruchamiał się cały silnik wydobywania tej treści z bazy danych i zmieniania jej w ładnie poukładany HTML.

Neuronowa.pl to klasyczny blog więc treści tam przybywa każdego dnia, ale też chciałem sprawdzić, jak mi pójdzie dodawanie jej bez systemu CMS w tle. I idzie bardzo ładnie: wpisy pisze sobie na moim komputerze w plikach .md, a całość magicznie generuje się na serwerze gdy tylko zrobię push zmian do repozytorium na serwerze Github. To brzmi dość technicznie i takie w rzeczywistości jest, ale poświęcam swoją wygodę dla szybkości stron.

Bo na tym polega wartość dodana na tych trzech stronach: szybkość. Wchodząc na każdą z nich wysyłany jest do Was statyczny, dawno temu zapisany jako zwykły plik kod HTML. Serwer się nie męczy, nie zużywa prądu, klimat sie nie ociepla, kwiatki pachną, wróble ćwierkają…

Jeśli jesteś na wpół techniczny, mogę zrobić ci i taką stronę. Klientom zwykłym nadal będę wdrażał WordPressy bo tak jak napisałem: odpowiednie narzędzie do odpowiednich zastosowań. I WP właśnie jest odpowiedni gdy konieczna jest też wygoda właściciela strony (a i z niego można serwować strony statycznie).

2

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