Frontend

Hoe los je het probleem van overbodige gegevensaanvragen aan de clientzijde, wanneer de gegevens al via SSR op de server zijn geladen?

Hoe optimaliseer je het laden van afbeeldingen in kaarten die zichtbaar zijn in de viewport? Hoe los je het race condition probleem op bij snel wisselen van inhoud (bijvoorbeeld YouTube Shorts)?

Je noemde Docker, CI/CD, GitHub Actions, GitLab — kun je uitleggen wat je precies deed, welke pipelines, wat er in de containers was?

Wat werd er gebruikt voor het werken met meerdimensionale formulieren, voor validatie, welke problemen werden er ondervonden, hoe werden ze getest?

Hoe werkt lijstvirtualisatie? Hoe wordt dit technisch gerealiseerd via JavaScript?

Hoe kun je gegevens op de server cachen om de laadtijd voor gebruikers te versnellen?

Met welke frameworks of tools werk je? Gebruik je AI-tools in je werk?

#React-aanmeldformulier 1. Leg uit hoe StateProvider werkt, deel je gedachten met de interviewer. 2. Bekijk /src/api/mock, leg uit hoe het werkt. 3. Controleer de kleur van de SubmitButton en corrigeer deze. 4. Implementeer client-side formuliervalidatie in de Signup-component. (\*) Houd rekening met taak nummer 9. Regels: - Gebruikersnaam, E-mail, Wachtwoord en Herhaal Wachtwoord velden moeten minimaal 6 tekens lang zijn; - Wachtwoord moet overeenkomen met Herhaal Wachtwoord; - Validatie moet worden uitgevoerd bij het klikken op de "SignUp" knop; - Velden met ongeldige waarden moeten worden gemarkeerd (props error en helperText); 6. API-respons kan een fout bevatten die aan de gebruiker naast het overeenkomstige veld moet worden weergegeven. 7. Zorg ervoor dat de UserName-component de nieuwe gebruikersnaam weergeeft na een succesvolle verzending. 8. Implementeer de nieuwe SignupSuccess-component. Het moet in plaats van het registratieformulier worden weergegeven. 9. Implementeer server-side validatie voor de juiste velden. --- Code uit 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( `Gebruikersnaam "${userName}" is al in gebruik. Probeer een andere.` ) ); } }, 500); }); }, }; export default api; ```

Implementeer de TypeScript-typisering voor de functie customMap, die een array van elk type en een transformatiefunctie accepteert die een ander type retourneert. De transformatiefunctie moet drie argumenten accepteren (zoals de callback in Array.map).

Implementeer server-side validatie voor de bijbehorende velden.

Er is een speler op de pagina. Het moet zo worden gedaan dat wanneer op stop wordt gedrukt op één tabblad, de afspelen ook stopt op een ander tabblad. Hoe zou je de communicatie tussen de tabbladen implementeren?

We hebben een heel grote frontend in een monorepo, waar veel verschillende teams tegelijkertijd aan werken. We kunnen niet overstappen op micro-frontend. Hoe kunnen we de risico's minimaliseren dat verschillende teams elkaars werk beïnvloeden?

Maak het STOP-teken (een rode cirkel met een witte band en een dubbele rand) met slechts één div en CSS (pseudo-elementen toegestaan).

Implementeer de functie promiseWithResolver (uitgestelde belofte), die een object retourneert met de velden resolve en promise.

Hoe werden releases geleverd, getest, hoe vaak werden ze uitgebracht?

#React aanmeldingsformulier 1. Leg uit hoe StateProvider werkt, deel je gedachten met de interviewer. 2. Bekijk /src/api/mock, leg uit hoe het werkt. 3. Controleer de kleur van SubmitButton en corrigeer deze. 4. Implementeer clientformuliervalidatie in de Signup-component. (* ) Houd rekening met taaknummer 9. Regels: - Gebruikersnaam, E-mail, Wachtwoord, Herhaal wachtwoord velden moeten minimaal 6 tekens lang zijn; - Wachtwoord moet overeenkomen met Herhaal wachtwoord; - Validatie moet worden uitgevoerd bij het klikken op de "Aanmelden" knop; - Velden met ongeldige waarden moeten worden gemarkeerd (error en helperText props); 6. API-respons kan een fout bevatten die aan de gebruiker moet worden weergegeven in de buurt van het overeenkomstige veld. 7. Zorg ervoor dat de UserName-component de nieuwe gebruikersnaam weergeeft na een succesvolle verzending. 8. Implementeer de nieuwe SignupSuccess-component. Het moet in plaats van het aanmeldformulier worden weergegeven. 9. Implementeer servervalidatie voor de juiste velden.

Hoe leer je eigenlijk iets nieuws over programmeren en wat is het laatste dat je is bijgebleven?

Hoe werden bestanden in de chat uitgewisseld — gewoon met een POST-verzoek of waren er grote bestanden?

Wat doe je meestal als je voelt dat de ontwikkeling gaande is en je een beetje achterloopt op de deadlines? Er is een releasedatum, maar je begrijpt dat je de taak niet op tijd af krijgt.

Heb je ooit met Lighthouse gewerkt? Stel dat je de taak krijgt om de FCP (First Contentful Paint) metric te verbeteren. Welke ideeën komen in je op?