Screenshot z programu Obsidian, przedstawiający sieć notatek połączonych linkami, tworzącą skomplikowaną mapę myśli
Ja, tydzień temu:
"Hmm, wpadł mi do głowy ciekawy pomysł! Zapiszę go w notatniku, żeby był na potem i żeby oczyścić umysł"
Obsidian, tydzień później (notatnik okazał się niewystarczający):
Zrzut ekranu z fragmentem tekstu, w którym AI opisuje, jak zapamiętało współpracę ze mną: "Approach & patterns Hołka follows a collaborative development approach, preferring step-by-step guidance and code reviews over complete solutions. She consistently applies BEM methodology for CSS naming, uses descriptive variable names over abbreviations, and maintains TypeScript type safety throughout the project. Her workflow involves systematic code organization with proper file naming conventions, comprehensive error handling, and incremental improvements that preserve working functionality. She demonstrates strong attention to accessibility standards, testing against both WCAG and APCA requirements, and implements proper semantic HTML structure. Her problem-solving approach involves consulting external resources when needed, pragmatic decision-making when complex solutions don't achieve desired results, and maintaining security practices like not exposing sensitive environment variables in error messages."
Od kiedy na Claude.ai pojawiła się opcja wspomnień, co jakiś czas sprawdzam, co AI tam zapisuje. Częściowo z ciekawości, a częściowo – nie będę ukrywać – bo głaszcze to moje ego 😅
No ale powiedzcie szczerze, czy gdybyście wy zobaczyli taką opinię na wasz temat, nie zrobiłoby się wam miło? 🤓
Zrzut ekranu z VS Code z paletą barw. Paleta składa się z kolorów neutralnych (odcienie szarości), niebieskich, pomarańczowych i zielonych.
Treść na #headlessJoanna jako-tako ogarnięta, pora przejść do najprzyjemniejszej części projektu, czyli stylowania! 💖
Paleta barw będzie w #OKLCH 🎨
Przy niektórych kolorach mocno się nakombinowałam, by kontrasty tła i tekstu były przynajmniej na poziomie AA w #WCAG
W #APCA wszystko jest na 100% OK 👍
Backendowy etap prac na #headlessJoanna za mną! 🚀
Pora przejść do części najtrudniejszej i zarazem najnudniejszej, czyli… uzupełniania treści na stronie 🪶
W końcu opisanie kim jestem, w sposób przystępny i atrakcyjny, bez przesadnej skromności lub popadania w samozachwyt, to nie lada wyzwanie! 🤓
Nadszedł czas, by w końcu w #headlessJoanna naprawdę połączyć ze sobą @wordpress.org i @astro.build ! 🚀
Wyszła z tego nieco dłuższa historia, więc opublikowałam ją w serwisach, które pozwalają, na większą ilość znaków w poście:
www.linkedin.com/posts/joanna...
www.facebook.com/JoannaHolyHo...
Rzut ekranu z dodatkowymi opcjami bloku Gutenberg w WordPress: Widoczność bloku, ARIA Hidden (tak/nie), ARIA Label, ARIA Labbelled by, ARIA Described by, ARIA Role (ten ostatni, z dopiskiem „UWAŻAJ! Używaj tylko, jeśli semantyczny HTML nie wystrczy”)
Okazało się, że widoczność nie wystarczy, rozszerzyłam modyfikację o dodatkowe opcje 😅
Bloki „widoczne, po wybraniu" użyję np. w skip-linkach (kliknij, by pominąć). Też będą niewidoczne, ale wyświetlą się, gdy wybierze się je podczas nawigacji z użyciem klawiatury (focus-visible) ⌨️
Mam nadzieję, że to ułatwi obsługę #headlessJoanna osobom, które nie używają myszy komputerowej 🖱️
Ustawienia modyfikacji „Widoczność bloku”. Rozwijana lista z trzema opcjami: „Widoczny”, „Ukryty” i „Widoczny, po wybraniu”
Czas przy #headlessJoanna mija mi na ulepszaniu #WordPress 🚀
Jedną z modyfikacji jest opcja wyboru widoczności bloku, co pomoże w tworzeniu strony zgodnej ze standardami dostępności #WCAG
Ukryte bloki dostaną klasę #visually-hidden – będą niewidoczne wizualnie, ale dostępne dla czytników ekranu 👁️🗨️
Kontenery DDEV nie dogadywały się ze sobą 😿
Astro „widział” zwykłe REST API, ale szyfrowanego już nie.
Spędziłam cały weekend, ponad 14 godzin, próbując rozwiązać ten problem 😣
W końcu poddałam się, postawiłam WordPress na zwykłym serwerze i tu na szczęście wszystko działa bez problemu, uff! 😐
Po miesiącu testowania #ChatGPT-5 w planie PLUS, wróciłam do płatnego Claude.ai
Bo gdy w grę wchodzi pisanie kodu – Claude wygrywa zarówno jakością odpowiedzi, jak i wygodą użytkowania. A na dodatek, przez ten miesiąc, kiedy go nie używałam, dodali masę nowości, więc powrót jest tym bardziej – WOW!
Zrzut ekranu pokazujący zawartość znacznika <head> w kodzie HTML strony. W górnej części ASCII-art z napisem „Joanna Hołka Hołka” oraz adresami joannaholy.pl i dyrdymaly.pl. W kodzie widoczne m.in. meta tagi description, author, generator, a także tytuł strony, favicon i link kanoniczny
Zrzut ekranu przedstawiający sekcję meta tagów Open Graph i Twitter Card w kodzie HTML strony. Widoczne dane: języki pl_PL i en_GB, tytuł strony, opis zajawki, adres URL i obrazek podlinkowany z backendu WordPressa. Sekcja Twittera zawiera analogiczne dane
Zrzut ekranu przedstawiający fragment danych strukturalnych w formacie JSON-LD zgodnych ze schema.org. Zawiera trzy obiekty: Person, Website i WebPage
Z pomocą AI udało mi się przerobić tradycyjny fetch na Live Collections z @astro.build 🚀
#headlessJoanna ma więc już head z danymi pobranymi z backend 🛜
Następnym krokiem będzie pobranie fragmentów szablonu @wordpress.org, wyczyszczenie ich ze śmieciowego kodu Gutenberga i wyświetlenie na frontend 💻
Tu mogłabym zakończyć zabawę z fetch na #headlessJoanna, ale odkryłam, że @astro.build ma Live Content Collections, które teoretycznie lepiej obsługują dane „z zewnątrz”.
A ponieważ mam nieograniczoną ilość czasu na eksperymentowanie – następnym krokiem jest przetestowanie, jak to działa w praktyce!
Frontend #headlessJoanna pobiera już dane z WordPressa 📡
Wprowadziłam kilka zabezpieczeń, dzięki którym na stronie powinno wyświetlić się cokolwiek, nawet jeśli komunikacja z backendem zawiedzie. Jeśli nie treść strony, to przynajmniej nazwa witryny. A jak nie, to zastępczy tekst z pliku 👀
Jednak nie miałam racji – kiedy dyskusja z GPT-5 się wydłuża, desktopowy klient też zaczyna zamulać. I w odróżnieniu od tego webowego, nie można go odświeżyć F5 :(
Ciekawy film @t3.gg o tym, że #GPT-5 rozczarowuje, bo winny może nie być model, tylko klient, którego używamy. Przetestowałam i rzeczywiście coś w tym jest – w przeglądarce GPT-5 potrafi się zawiesić. Zainstalowałam desktop app na Window i na razie wszystko chodzi płynnie.
youtu.be/SOxmiupQm7w?...
Rzut ekranu pokazujący kolorowy instalator Astro w konsoli
Zamiast Next.js na frontend #headlessJoanna użyję @astro.build
Ma pozytywne opinie, dobre benchmarki, a instalator wygląda pięknie 😍
Jednak co najważniejsze — po pierwszych testach widzę, że to jest prawdopodobnie dokładnie taki framework, jakiego potrzebowałam! 🚀
Lubię edytor Gutenberga, ale nie akceptuję śmieci, które robi na froncie. Dlatego tworzę #headlessJoanna
Zaczęłam pisać w Next.js i tu zaskoczenie — on też wypluwa śmieci w kodzie!!! 🤮
Oj, nie tak miało być! Muszę poszukać innego frameworka, który zwróci ładny HTML 🤩
W końcu 'Code is poetry!' 📜
Rzut ekranu pokazujący zajawkę WordPress z dodanym mechanizmem ograniczania liczby znaków do 150. Treść zajawki: Taką zajawkę można dodać także na statycznych stronach. Dzięki ograniczeniu liczby znaków powinna spełniać standardy większości social mediów :)
Chcę w WP #headlessJoanna ograniczyć ilość wtyczek, najlepiej do zera 👌
Pierwszy do eliminacji: plugin do SEO 🔍
OpenGraph i inne? Wystarczy zajawka i wyróżniony obrazek z WP. Schema też mogę napisać samodzielnie 🤓
PS. Napisałam skrypt ograniczający liczbę znaków w zajawce, żeby była zgodna z SEO 📄
Wstępnie skonfigurowałam motyw FSE w WordPressie.
Po co, skoro frontend #headlessJoanna będzie gdzieś indziej?
1. Chcę, żeby treść w Gutenbergu choć trochę wyglądała, jak na froncie
2. Motyw ma lekko zmienić wygląd wp-admin
3. Liczę na to, że style z theme.json da się potem wykorzystać na froncie
Środowisko DEV #headlessJoanna używa WSL i DDEV.
Mam dwa kontenery: jeden na backend, drugi na frontend – ustawione tak, by Next.js miał dostęp do REST API WordPressa.
AI pomogło w konfiguracji, testowe połączenie działa. Mam nadzieję, że w przyszłości przesył danych będzie szedł równie gładko!
Obsługa #headlessJoanna na Codeberg – pierwsza klasa!
Owszem, nie ma tu tylu opcji co na GitHub i GitLab, ale mi ta prostota odpowiada.
Brakuje mi tylko klienta desktopowego. Co prawda, Codeberg dobrze dogaduje się z apką GitHub, ale wolałabym natywne rozwiązanie, które obsługuje więcej funkcji.
Na Codeberg po raz pierwszy korzystam z mechanizmu issues 📋
Fajnie się to sprawdza przy planowaniu rzeczy do zrobienia na #headlessJoanna i potem robieniu na ich podstawie branchy ✅
Dobre repo to podstawa! 🌌
Ponieważ staram się zastępować amerykańskie rozwiązania ich europejskimi odpowiednikami, #headlessJoanna nie trafiła ani na GitHuba, ani na GitLaba, tylko na Codeberga 🏔️
W dwóch częściach: jedno repo na wordpressowy backend i drugie na frontend w Next.js
Humorystyczny obrazek ilustrujący tag Headless Joanna. Bezgłowy skafander kosmiczny trzymający pod pachą hełm z głową w środku, druga ręka pokazuje kciuk w górę. W tle rozgwieżdżone niebo z przelatującą kometą. Obraz wygenerowany przez AI
Od dłuższego czasu tu nie pisałam, pora to zmienić! 🚀
Zaczęłam tworzyć nową wersję mojej strony internetowej (Headless WordPress + Next.js) ☄️
Myślę, że to dobre miejsce, by dzielić się postępami mojej pracy. Wpisy na ten temat będę tagować #headlessJoanna
Zagłosowanie! ❎
#wybory #wyboryprezydenckie #wybory2025 #wyboryprezydenckie2025
Did someone just hijack one of the Doctor’s domains?! 😱
tardis.doctor
#DoctorWho #notaprilsfool
Zrobiłam prywatne Wayback Machine, czyli archiwum z poprzednimi wersjami mojej strony ⌛
stara.joannaholy.pl
👉Zachęcam do kliknięcia w przycisk „Więcej o archiwizacji” na pomarańczowym banerze – znajdziesz tam kilka ciekawostek o każdej, zarchiwizowanej stronie
#oldwebsite #oldHTML #WaybackMachine
Z drugiej strony, gdy ważniejsza od doskonałego odwzorowania projektu graficznego jest czytelność i responsywność strony – CH wydaje mi się być ciekawym rozwiązaniem, lepszym od REM.
Polecam (stary, ale ciągle aktualny) film, który @kevinpowell.co zrobił na ten temat:
youtu.be/dgbFtMBOMlA
Raczej nie widzę sensu stosowania CH przy tworzeniu stron na podstawie projektów graficznych, gdzie font-family i szerokości bloków tekstowych są na sztywno zdefiniowane, a wszystko ma być pixel-perfect.
Z tego, co czytałam, inni też odradzają używanie tej jednostki, np.:
medium.com/@meyerweb/wh...
Rzut ekranu pokazuący kodu CSS: :root { --max-box-width: 58ch; }
W #CSS istnieje jednostka, CH, gdzie 1ch, to szerokość znaku zero.
Przetestowałam i CH świetnie nadaje się do określania szerokości, ale chyba tylko w sytuacji, gdy:
a) font-family może się zmieniać,
b) zależy nam na czytelności tekstu (typografowie zalecają, żeby wiersz miał 50-75 znaków)