Interaktywny samouczek prowadzi Cię przez pierwszy zestaw reguł
Nowy użytkownik wtyczki dostaje teraz coś więcej niż wstęp w instrukcji — interaktywny samouczek, który podświetla kolejne elementy interfejsu i prowadzi przez utworzenie pierwszego projektu krok po kroku. Działa zarówno w panelu edycji, jak i bezpośrednio na odwiedzanej stronie, w komplecie 8 języków, z kopiowalnymi fragmentami kodu. Oto, co dostarczamy w v3.1.
Dwa silniki, jeden cel
Pod maską są dwa współpracujące moduły. Pierwszy — lib/onboarding.js — działa w panelu edycji JustZix, prowadzi przez drzewo katalog → grupa → zestaw i objaśnia ułożenie zakładek CSS / JS / Akcje. Drugi — lib/onboarding-front.js — żyje w content scripcie, więc może podświetlać elementy bezpośrednio na zwykłej stronie www. Razem pokrywają cały scenariusz: od koncepcji do działającej reguły.
Wybraliśmy wariant wizualny Glow — świecący pierścień wokół celu, bez przyciemniania strony. To różnica od typowych „spotlight" overlay-ów: nadal widzisz całą stronę i swoje treści, podświetlenie jedynie wskazuje miejsce, na którym ma się skupić uwaga.
19 kroków: „Twój pierwszy projekt"
Domyślny scenariusz prowadzi przez kompletny przykład: utworzenie katalogu (folder dla powiązanych reguł), otwarcie grupy „default", dodanie zestawu reguł z prostym CSS i JS (które naprawdę zmieniają stronę), zapięcie paska akcji oraz dodanie akcji-przełącznika z własnym kodem JS. Każdy krok ma podświetlony cel + dymek z tytułem, krótkim opisem i nawigacją „Wstecz / Dalej". Kroki interaktywne (np. „kliknij przycisk Dodaj zestaw") przechodzą dalej dopiero po wykonaniu akcji — nie da się ich „przeskoczyć" bez efektu.
Fragmenty CSS i JS pojawiające się w dymkach mają przycisk Kopiuj — wklejasz prosto do edytora bez przepisywania. Po przejściu całego scenariusza masz w drzewie kompletny, działający zestaw reguł, którego możesz później dowolnie rozwijać.
Centrum samouczków
Samouczek otwiera się automatycznie przy pierwszym uruchomieniu wtyczki — w postaci centrum samouczków (launcher), z którego wybierasz scenariusz. Później wracasz do niego z menu ustawień (Ustawienia → „Samouczek"). To samo centrum będzie hostowało kolejne scenariusze, które dodajemy w czasie — gdy pojawi się nowy, użytkownik zobaczy go w tym samym miejscu, bez szukania.
Osiem języków, bez emoji, klawisz Esc
Cały silnik i scenariusz są przetłumaczone na 8 języków (PL, EN, DE, ES, FR, IT, RU, ZH) — komplet tekstów żyje w słowniku lib/i18n.js pod kluczami onboard.*. Ikony pochodzą wyłącznie z zestawu JustZix (JZ_ICONS): celownik dla scenariusza, strzałka w dymku, ikona „Kopiuj". Żadnych emoji ani zewnętrznych krojów — interfejs spójny z resztą wtyczki.
Klawisz Esc zamyka dymek samouczka i centrum samouczków. Kliknięcie poza dymek lub przycisk zamknięcia również wychodzi z trybu. Postęp jest zapisywany w chrome.storage.local (jzOnboarding.frontCompleted) — jeśli przerwiesz w połowie, samouczek nie będzie się ponownie otwierał przy każdym restarcie.
Co dalej
Pierwszy scenariusz to dopiero początek. Centrum samouczków jest gotowe na kolejne — planujemy ścieżki dla zaawansowanych funkcji: AI Helper, okna TEMP, akcje typu slider / toggle3, panel edycji w osobnym oknie pod Ctrl+Alt+I. Daj znać przez formularz kontaktu, jaki temat chcesz zobaczyć w samouczku jako kolejny.
Zobacz też
- Wstrzykiwanie CSS i JavaScript — czym są reguły, które tworzysz w samouczku
- Okna na froncie — opis okien deweloperskich
- JustZix kontra Tampermonkey — czemu warto rozważyć migrację
Zainstaluj JustZix — pierwszy projekt zrobisz w mniej niż 15 minut.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.