Frontend

Jak rozwiązać problem nadmiarowych żądań danych na kliencie, gdy dane zostały już załadowane na serwerze przez SSR?

Jak zoptymalizować ładowanie obrazów na kartach widocznych w viewport? Jak rozwiązać problem warunku wyścigu podczas szybkiego przełączania treści (np. YouTube Shorts)?

Czym posługiwano się do pracy z wielowymiarowymi formularzami — do walidacji, z jakimi problemami się spotykano, jak je testowano?

Wspomniałeś Docker, CI/CD, GitHub Actions, GitLab — czy możesz wyjaśnić, co dokładnie robiłeś, jakie pipeline, co było w kontenerach?

Z jakimi frameworkami lub narzędziami pracujesz? Czy używasz narzędzi AI w swojej pracy?

# Formularz rejestracji React 1. Wyjaśnij, jak działa StateProvider, podziel się swoimi przemyśleniami z rozmówcą. 2. Spójrz na /src/api/mock, wyjaśnij, jak to działa. 3. Sprawdź kolor przycisku SubmitButton i napraw go. 4. Zaimplementuj walidację formularza po stronie klienta w komponencie Signup. (\*) Pamiętaj o zadaniu numer 9. Zasady: - Pola Nazwa użytkownika, Email, Hasło i Powtórz hasło powinny mieć co najmniej 6 znaków; - Hasło musi się zgadzać z Powtórz hasło; - Walidacja powinna być wykonana po kliknięciu przycisku "SignUp"; - Pola z nieprawidłowymi wartościami powinny być oznaczone (props error i helperText); 6. Odpowiedź API może zawierać błąd, który powinien być wyświetlany użytkownikowi w pobliżu odpowiedniego pola. 7. Upewnij się, że komponent UserName wyświetla nową nazwę użytkownika po pomyślnym przesłaniu. 8. Zaimplementuj nowy komponent SignupSuccess. Powinien być wyświetlany zamiast formularza rejestracji. 9. Zaimplementuj walidację serwera dla odpowiednich pól. --- Kod z mock.ts: ```typescript const fakeResponse = (userName) => ({ code: 200, user: { id: 42, userName, }, }); let a = 0; const api = { '/signup': function (userName: string, email: string, password: string) { a++; return new Promise((resolve, reject) => { setTimeout(() => { if (a % 2 === 0) { return resolve(fakeResponse(userName)); } else { return reject( new Error( `Nazwa użytkownika "${userName}" jest już zajęta. Spróbuj inną.` ) ); } }, 500); }); }, }; export default api; ```

Zaimplementuj walidację po stronie serwera dla odpowiednich pól.

Jak można buforować dane na serwerze, aby przyspieszyć ładowanie użytkowników?

Na stronie jest odtwarzacz. Należy tak zrobić, aby po naciśnięciu stop na jednej karcie, odtwarzanie zatrzymywało się również na innej karcie. Jak byś zaimplementował komunikację między kartami?

Jak działa wirtualizacja listy? Jak to jest technicznie realizowane za pomocą JavaScript?

Zaimplementuj typowanie TypeScript dla funkcji customMap, która przyjmuje tablicę dowolnego typu i funkcję transformującą zwracającą inny typ. Funkcja transformująca powinna przyjmować trzy argumenty (jak callback w Array.map).

Zaimplementuj funkcję promiseWithResolver (odroczone obietnice), która zwraca obiekt z polami resolve i promise.

Jak dostarczano wersje, jak były testowane, jak często wychodziły?

Jak dowiadujesz się czegoś nowego o programowaniu i co ostatnio zapadło ci w pamięć?

Mamy bardzo duży front w monorepo, nad którym pracuje wiele różnych zespołów jednocześnie. Nie możemy przejść na mikro-frontendy. Jak zminimalizować ryzyko, że różne zespoły będą wpływać na pracę innych?

Stwórz znak STOP (czerwone koło z białą paskiem i podwójną obwódką) używając tylko jednego div i CSS (dozwolone pseudo-elementy).

Co zwykle robisz, gdy czujesz, że prace nad rozwojem trwają, a ty trochę się spóźniłeś z terminami? Jest data premiery, ale rozumiesz, że nie zdążysz dokończyć zadania na czas.

#Formularz rejestracji React 1. Wyjaśnij, jak działa StateProvider, podziel się swoimi przemyśleniami z rozmówcą. 2. Spójrz na /src/api/mock, wyjaśnij, jak to działa. 3. Sprawdź kolor SubmitButton i napraw go. 4. Zaimplementuj walidację formularza klienta w komponencie Signup. (* ) Pamiętaj o numerze zadania 9. Zasady: - Pola Nazwa użytkownika, Email, Hasło, Powtórz hasło powinny mieć co najmniej 6 znaków; - Hasło powinno pasować do Powtórz hasło; - Walidacja powinna być wykonana po kliknięciu przycisku "Zarejestruj się"; - Pola z nieprawidłowymi wartościami powinny być oznaczone (props error i helperText); 6. Odpowiedź API może zawierać błąd, który powinien być wyświetlany użytkownikowi w pobliżu odpowiedniego pola. 7. Upewnij się, że komponent UserName renderuje nową nazwę użytkownika po pomyślnym przesłaniu. 8. Zaimplementuj nowy komponent SignupSuccess. Powinien być wyświetlany zamiast formularza rejestracji. 9. Zaimplementuj walidację serwera dla odpowiednich pól.

Jak wymieniano pliki na czacie — czy to było tylko przez żądanie POST, czy też były duże pliki?

const customMap = (array, transform) => { // coś jak array.map(transform); }; const stringResults = customMap([1, 2, 3], item => item.toString()); const lengths = customMap(["cześć", "świat"], item => item.length);