Frontend

Jak vyřešit problém nadbytečných požadavků na data na klientovi, když data již byla načtena na serveru přes SSR?

Jak optimalizovat načítání obrázků na kartách viditelných ve viewportu? Jak vyřešit problém race condition při rychlém přepínání obsahu (například YouTube Shorts)?

Zmínil jste Docker, CI/CD, GitHub Actions, GitLab — můžete objasnit, co přesně jste dělal, jaké pipeline, co bylo v kontejnerech?

Co bylo použito pro práci s vícerozměrnými formuláři — pro validaci, jaké problémy se vyskytly, jak byly testovány?

Jak funguje virtualizace seznamu? Jak je technicky realizováno pomocí JavaScriptu?

Jak lze ukládat data do mezipaměti na serveru, aby se urychlilo načítání uživatelů?

S jakými rámci nebo nástroji pracujete? Používáte ve své práci nástroje AI?

#React registrační formulář 1. Vysvětlete, jak funguje StateProvider, sdílejte své myšlenky s interviewerem. 2. Podívejte se na /src/api/mock, vysvětlete, jak to funguje. 3. Zkontrolujte barvu tlačítka SubmitButton a opravte ji. 4. Implementujte validaci formuláře na straně klienta v komponentě Signup. (\*) Mějte na paměti úkol číslo 9. Pravidla: - Pole Uživatelské jméno, Email, Heslo a Opakovat heslo by měla mít alespoň 6 znaků; - Heslo by mělo odpovídat Opakovat heslo; - Validace by měla být provedena po kliknutí na tlačítko "SignUp"; - Pole s neplatnými hodnotami by měla být označena (props error a helperText); 6. Odpověď API může obsahovat chybu, která by měla být zobrazena uživateli poblíž příslušného pole. 7. Ujistěte se, že komponenta UserName zobrazuje nové uživatelské jméno po úspěšném odeslání. 8. Implementujte nový komponent SignupSuccess. Měl by být zobrazen místo registračního formuláře. 9. Implementujte serverovou validaci pro příslušná pole. --- Kód 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( `Uživatelské jméno "${userName}" je již obsazené. Zkuste jiné.` ) ); } }, 500); }); }, }; export default api; ```

Implementujte typování TypeScript pro funkci customMap, která přijímá pole libovolného typu a transformační funkci vracející jiný typ. Transformační funkce by měla přijímat tři argumenty (jako callback v Array.map).

Implementujte serverovou validaci pro odpovídající pole.

Na stránce je přehrávač. Je třeba zajistit, aby při stisknutí tlačítka stop na jedné záložce, se přehrávání zastavilo i na jiné záložce. Jak bys realizoval komunikaci mezi záložkami?

Máme velmi velké front-end v monorepo, na kterém současně pracuje mnoho různých týmů. Nem můžeme přejít na mikro-frontendy. Jak minimalizovat riziko, že různé týmy budou ovlivňovat práci ostatních?

Vytvořte značku STOP (červený kruh s bílým pruhem a dvojitou hranou) pouze pomocí jednoho divu a CSS (pseudo-prvky jsou povoleny).

Implementujte funkci promiseWithResolver (zpožděná slib), která vrací objekt s poli resolve a promise.

Jak byly vydávány verze, jak byly testovány, jak často vycházely?

#React registrační formulář 1. Vysvětlete, jak funguje StateProvider, sdílejte své myšlenky s tazatelem. 2. Podívejte se na /src/api/mock, vysvětlete, jak to funguje. 3. Zkontrolujte barvu tlačítka SubmitButton a opravte ji. 4. Implementujte validaci formuláře klienta v komponentě Signup. (* ) Mějte na paměti číslo úkolu 9. Pravidla: - Pole Uživatelské jméno, E-mail, Heslo, Opakovat heslo by měla mít alespoň 6 znaků; - Heslo by mělo odpovídat Opakovat heslo; - Validace by měla být provedena po kliknutí na tlačítko "Zaregistrovat se"; - Pole s neplatnými hodnotami by měla být označena (props error a helperText); 6. Odpověď API může obsahovat chybu, která by měla být zobrazena uživateli v blízkosti příslušného pole. 7. Ujistěte se, že komponenta UserName zobrazuje nové uživatelské jméno po úspěšném odeslání. 8. Implementujte nový komponent SignupSuccess. Měl by být zobrazen místo registračního formuláře. 9. Implementujte serverovou validaci pro příslušná pole.

Jak vůbec zjišťuješ něco nového o programování a co ti poslední dobou utkvělo v paměti?

Jak se vyměňovaly soubory v chatu — jednoduše POST žádostí nebo byly velké soubory?

Co obvykle děláš, když cítíš, že vývoj probíhá a trochu zaostáváš za termíny? Je stanovený datum vydání, ale chápeš, že úkol nestihneš dokončit včas.

Pracoval jsi někdy s Lighthouse? Představ si, že ti byla svěřena úloha zlepšit metriku FCP (First Contentful Paint). Jaké nápady tě napadají?