Frontend Developer
Buduj dostępne interfejsy, które działają na telefonie i komputerze.
Kompendium zawodu — pojęcia i zwroty
Pojęcia w pracy
- DOM
- Model dokumentu używany przez przeglądarkę. Zmiana elementu DOM może zmienić to, co użytkownik widzi lub obsługuje.
- Stan interfejsu
- Sytuacja, którą ekran pokazuje, np. ładowanie, sukces, pusty wynik albo błąd.
- Regresja
- Pogorszenie działającej wcześniej funkcji po wprowadzeniu zmiany.
Zwroty w typowych sytuacjach
- „Błąd odtwarza się na wąskim ekranie po wysłaniu formularza.”
- Zgłoszenie zawiera warunek i czynność, od których można zacząć diagnozę.
- „Po błędzie sieci zachowajmy wpisane dane i umożliwmy ponowienie.”
- Ustalasz zachowanie formularza po przerwanym zapisie.
Podstawy · Lekcja 1 z 9
Struktura dostępnej strony
Elementy HTML przekazują znaczenie. Użyj nagłówków, aby uporządkować treść.
Link służy do nawigacji, a przycisk do wykonania działania. Etykieta pola powinna wskazywać, jakiej informacji oczekujesz.
- Co zrobić najpierwZaprojektuj strukturę
- Co zrobić dalejStruktura dostępnej strony
- Jak zakończyćSprawdź odpowiedź i wyjaśnij swój wybór
Zaprojektuj strukturę
Wybierz nagłówki, etykiety i kontrolki opisujące zadanie. Zbuduj najkrótszą ścieżkę do wysłania formularza.
Ćwiczenie praktyczne
Zbuduj formularz kontaktowy z etykietą pola e-mail i przyciskiem wysłania. Przejdź cały formularz klawiszem Tab.
Sprawdź się — opcjonalne pytanie
Który element pasuje do wysłania formularza?
- Nagłówek
- Przycisk
- Ozdobny obraz
Pokaż odpowiedź i wyjaśnienie
Przycisk. Przycisk opisuje działanie i obsługuje klawiaturę bez dodatkowego kodu.
Podstawy · Lekcja 2 z 9
Model pudełkowy
Szerokość elementu obejmuje treść, padding i obramowanie zgodnie z ustawieniem box-sizing. Margines tworzy odstęp na zewnątrz. W narzędziach przeglądarki porównaj deklarowaną szerokość z wymiarem renderowanym.
- Co zrobić najpierwTreść
- Co zrobić dalejPadding i obramowanie
- Jak zakończyćOdstęp zewnętrzny
Przykład z pracy
Karta ma width: 300px, padding po 16px i ramkę po 1px. Przy content-box zajmuje 334px bez marginesu. Przy border-box treść ma 266px, a całe pudełko 300px.
Ćwiczenie praktyczne
Utwórz dwie karty z tymi ustawieniami. Sprawdź ich rzeczywiste szerokości w DevTools.
Symulacja rozmowy
Kiedy użyjesz linku, a kiedy przycisku?
Porównaj z przykładową odpowiedzią
Link prowadzi pod adres. Przycisk wywołuje działanie, np. wysyła formularz. Wybieram natywne elementy, aby przeglądarka zapewniła oczekiwane zachowanie klawiatury.
Sprawdź się — opcjonalne pytanie
Która wartość wlicza padding i obramowanie do deklarowanej szerokości?
- content-box
- border-box
- margin-box
Pokaż odpowiedź i wyjaśnienie
border-box. Border-box obejmuje treść, padding i obramowanie. Margines pozostaje poza pudełkiem.
Podstawy · Lekcja 3 z 9
Od zdarzenia do aktualizacji DOM
Oddziel odczyt danych z formularza, zmianę stanu i aktualizację widoku. Zdarzenie submit obsługuje też wysłanie przez Enter. Tekst pochodzący od użytkownika przypisz przez textContent.
- Co zrobić najpierwZdarzenie submit
- Co zrobić dalejZmiana stanu
- Jak zakończyćAktualizacja DOM
Przykład z pracy
Lista zadań dodaje element po zatwierdzeniu formularza. Puste pole zgłasza błąd. Po dodaniu wpisu stan i widoczna lista zawierają ten sam element.
Ćwiczenie praktyczne
Zbuduj listę zadań z formularzem i sprawdź działanie przy pustym wpisie oraz wprowadzaniu przez Enter.
Sprawdź się — opcjonalne pytanie
Jak wstawić zwykły tekst wpisany przez użytkownika?
- Przez innerHTML z bezpośrednim wpisem
- Przez ustawienie atrybutu style
- Przez textContent
Pokaż odpowiedź i wyjaśnienie
Przez textContent. textContent traktuje wprowadzoną wartość jako tekst, dzięki czemu znaczniki pozostają znakami.
Praca krok po kroku · Lekcja 4 z 9
Układ dopasowany do ekranu
Zacznij od jednej kolumny. Pozwól kartom zajmować dostępną szerokość i dodaj kolumny, gdy mieści się w nich czytelna treść. CSS Grid obsłuży układ, a Flexbox sprawdzi się w nawigacji i pojedynczych rzędach.
- Co zrobić najpierwSprawdź układ i wejście
- Co zrobić dalejUkład dopasowany do ekranu
- Jak zakończyćSprawdź odpowiedź i wyjaśnij swój wybór
Sprawdź układ i wejście
Przetestuj szerokości 360 i 1280 px, długą treść i obsługę samą klawiaturą. Sprawdź widoczność fokusu.
Ćwiczenie praktyczne
Ułóż sześć kart. Sprawdź stronę przy 360 i 1280 pikselach oraz z długim tytułem karty.
Sprawdź się — opcjonalne pytanie
Jak wykryjesz problem z wąskim ekranem?
- Sprawdzisz wyłącznie kolor przycisku
- Otworzysz podgląd przy maksymalnej szerokości
- Przetestujesz mały viewport i długie treści
Pokaż odpowiedź i wyjaśnienie
Przetestujesz mały viewport i długie treści. Mały viewport i długa treść ujawniają problemy z przepełnieniem.
Praca krok po kroku · Lekcja 5 z 9
Formularz z błędem przy polu
Komunikat powinien wskazywać konkretne pole i sposób poprawienia. Powiąż pomoc przez aria-describedby, a nieprawidłowe pole oznacz aria-invalid. Po nieudanej walidacji zachowaj dane wpisane poprawnie.
- Co zrobić najpierwPole
- Co zrobić dalejKomunikat z instrukcją
- Jak zakończyćPonowienie
Przykład z pracy
Użytkownik wpisał adres bez domeny. Komunikat „Podaj adres w formacie imie@example.pl” pojawia się przy polu i jest powiązany z nim w kodzie.
Ćwiczenie praktyczne
Zbuduj dwa pola i przejdź wysyłkę z jednym błędnym. Sprawdź powiązanie komunikatu w drzewie dostępności.
Sprawdź się — opcjonalne pytanie
Co najlepiej łączy treść błędu z polem?
- aria-describedby wskazujące identyfikator komunikatu
- Sam czerwony kolor ramki
- Niepowiązana informacja w stopce
Pokaż odpowiedź i wyjaśnienie
aria-describedby wskazujące identyfikator komunikatu. Powiązanie programowe udostępnia tekst komunikatu przy odczycie pola.
Praca krok po kroku · Lekcja 6 z 9
Wyszukiwanie odporne na spóźnione wyniki
Wysłanie zapytań w kolejności A i B nie gwarantuje takiej samej kolejności odpowiedzi. Anuluj nieaktualne pobieranie lub dopuszczaj aktualizację tylko dla ostatniego identyfikatora zapytania.
- Co zrobić najpierwWejście
- Co zrobić dalejOznaczenie lub anulowanie zapytania
- Jak zakończyćBieżący wynik
Przykład z pracy
Zapytanie „an” odpowiada po 700 ms, a „analityk” po 150 ms. Wynik „an” nie może zastąpić listy dla bieżącego tekstu.
Ćwiczenie praktyczne
Zasymuluj dwie odpowiedzi w odwrotnej kolejności. Udokumentuj, jak blokujesz nadpisanie wyniku.
Sprawdź się — opcjonalne pytanie
Który wynik ma prawo zaktualizować listę?
- Odpowiedź, która przyszła najpóźniej
- Wynik dla aktualnego zapytania
- Odpowiedź o większej liczbie pozycji
Pokaż odpowiedź i wyjaśnienie
Wynik dla aktualnego zapytania. Wynik musi odpowiadać wartości, którą użytkownik widzi w polu.
Trudniejsze sytuacje · Lekcja 7 z 9
Stany interfejsu po zapytaniu
Zaplanuj cztery widoki: ładowanie, dane, pusty wynik i błąd. Przy błędzie daj użytkownikowi drogę powrotu. Zablokuj ponowne wysłanie tylko na czas oczekiwania i przywróć przycisk po zakończeniu.
- Co zrobić najpierwObsłuż stany zapytania
- Co zrobić dalejStany interfejsu po zapytaniu
- Jak zakończyćSprawdź odpowiedź i wyjaśnij swój wybór
Obsłuż stany zapytania
Rozpisz stan ładowania, wynik, brak danych i błąd. Zadbaj o zachowanie wpisanych danych przy ponowieniu.
Ćwiczenie praktyczne
Dodaj wyszukiwanie do listy kart i wymuś kolejno każdy z czterech stanów.
Sprawdź się — opcjonalne pytanie
Co pokazać po nieudanym pobraniu listy?
- Komunikat i możliwość ponowienia
- Pustą listę bez wyjaśnienia
- Bezterminowy wskaźnik ładowania
Pokaż odpowiedź i wyjaśnienie
Komunikat i możliwość ponowienia. Czytelny błąd wyjaśnia stan, a przycisk ponowienia pozwala odzyskać dane.
Trudniejsze sytuacje · Lekcja 8 z 9
Diagnoza opóźnień interfejsu
Oddziel czas pobrania zasobu od czasu obliczeń i renderowania. Nagraj w DevTools konkretną interakcję, wskaż najdłuższe zdarzenie i powtórz pomiar po jednej zmianie.
- Co zrobić najpierwOdtwórz
- Co zrobić dalejZmierz
- Jak zakończyćPorównaj po zmianie
Przykład z pracy
Kliknięcie filtra działa wolno mimo szybkiego API. Profil pokazuje generowanie 5000 elementów w jednym przebiegu. Paginacja ogranicza liczbę renderowanych kart.
Ćwiczenie praktyczne
Porównaj czas filtrowania dla 50 i 5000 kart. Zapisz urządzenie, metodę, wynik oraz decyzję.
Sprawdź się — opcjonalne pytanie
Co sprawdzasz najpierw po zgłoszeniu wolnego filtra?
- Wymianę frameworka
- Liczbę kolorów interfejsu
- Pomiar konkretnej interakcji i źródła kosztu
Pokaż odpowiedź i wyjaśnienie
Pomiar konkretnej interakcji i źródła kosztu. Pomiar rozróżnia problem sieciowy, koszt pracy skryptu i renderowanie.
Trudniejsze sytuacje · Lekcja 9 z 9
Przegląd wdrożenia i plan cofnięcia
Zapisz zakres zmiany, podstawowe ścieżki i sygnały awarii. Testuj przewidywalny wynik po wdrożeniu, np. wysłanie formularza, oraz możliwość powrotu do poprzedniej wersji.
- Co zrobić najpierwTest scenariusza
- Co zrobić dalejWeryfikacja po wydaniu
- Jak zakończyćDecyzja o cofnięciu
Przykład z pracy
Nowy formularz przechodzi test na komputerze, ale przy wolnym łączu zapisuje dwa zgłoszenia. Kontrola obejmuje też podwójne kliknięcie i ponowienie po błędzie.
Ćwiczenie praktyczne
Przygotuj checklistę wydania formularza z kryterium przerwania i planem wycofania.
Sprawdź się — opcjonalne pytanie
Co najlepiej nadaje się na kryterium wycofania?
- Zgłoszenia pojawiają się podwójnie w potwierdzonym scenariuszu
- Kolor przycisku różni się na monitorach
- Nazwy plików uległy zmianie
Pokaż odpowiedź i wyjaśnienie
Zgłoszenia pojawiają się podwójnie w potwierdzonym scenariuszu. Kryterium powinno opisywać mierzalne naruszenie istotnej ścieżki.