Frontend

Υλοποιήστε ένα νέο συστατικό SignupSuccess. Θα πρέπει να εμφανίζεται αντί της φόρμας εγγραφής μετά από μια επιτυχημένη εγγραφή.

Πες λίγα για τον εαυτό σου, τι σε ενδιαφέρει στον προγραμματισμό, την τελευταία σου εμπειρία, ίσως έχεις κάνει δύσκολα πράγματα.

Ξέρεις τι είναι η μετρική FCP (First Contentful Paint); Ας υποθέσουμε ότι έχουμε μια εφαρμογή React — ένα κοινωνικό δίκτυο με server-side rendering, και υπάρχει ένα πρόβλημα: όταν ένας χρήστης μπαίνει απευθείας σε ένα προφίλ, η λευκή οθόνη παραμένει για πολύ καιρό. Μπορείς να περιγράψεις τα στάδια — τι συμβαίνει από τη στιγμή που ο χρήστης πατάει Enter μέχρι να εμφανιστεί το πρώτο περιεχόμενο;

Σου άρεσε να δουλεύεις με το Redux ως διαχειριστή κατάστασης για πολύπλοκες φόρμες;

Πώς λειτουργεί η προσωρινή αποθήκευση πόρων στον browser — πώς καταλαβαίνει ο browser αν πρέπει να τα πάρει από την cache ή να τα φορτώσει ξανά, και πώς διαχειρίζεται αυτό; Ποιοι είναι οι τρόποι caching, συμπεριλαμβανομένου του Service Worker;

Πώς θα υλοποιούσες την προσωρινή αποθήκευση στην πλευρά του πελάτη;

console.log(1) setTimeout(() => { console.log(2) }, 10) setTimeout(() => { Promise.resolve().then(() => console.log(3)) }, 0); setTimeout(() => { console.log(4) }, 0); new Promise((_, reject) => { console.log(5) reject(6) console.log(7) }).then(() => console.log(8)) .catch(() => console.log(9)) .then(() => console.log(10)) .catch(() => console.log(11)) .then(() => console.log(12)) .then(console.log) .finally(() => console.log(13)) console.log(14)

Πρόσθετη πολυπλοκότητα στην εργασία με memoize: να κάνει τη συνάρτηση memoize να λαμβάνει ως δεύτερο όρισμα τον χρόνο ζωής της μνήμης cache σε χιλιοστά του δευτερολέπτου, μετά τον οποίο η cache ακυρώνεται.

Υπάρχει κώδικας — πρέπει να καταλάβεις τι κάνει, να κάνεις ανασκόπηση κώδικα: ποια είναι τα προβλήματα και τι μπορεί να βελτιωθεί.

Έχετε ακούσει για το helper Promise.withResolvers που εμφανίστηκε πρόσφατα στη JavaScript; Πρέπει να γράψετε το αντίστοιχό του αντί της δεύτερης γραμμής.

Πώς σου φαίνεται η μεθοδολογία FSD (Feature-Sliced Design);

Μπορείς να αναφέρεις μερικά πλεονεκτήματα και μειονεκτήματα του Redux;

Στη σελίδα υπάρχει μια λίστα με 5000 προϊόντα, η σελίδα κολλάει πολύ. Η επιχείρηση ζητάει να κάνεις κάτι γι' αυτό. Τι προτείνεις;

Τι συμβαίνει αν βάλετε το χαρακτηριστικό async σε ένα script στο head; Ποια είναι η διαφορά μεταξύ async και defer;

Στη σελίδα φίλων και στον messenger εμφανίζεται παρόμοια πληροφορία για τους χρήστες. Υπάρχουν δύο επιλογές: να αποθηκεύσετε τους χρήστες σε τοπικά slices κάθε λειτουργίας ή σε ένα παγκόσμιο store. Ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα ενός παγκόσμιου store σε αυτήν την περίπτωση;

Πες μας για προηγούμενες δουλειές — τι ενδιαφέροντα έκανες;

Πώς μπορεί κανείς να πάρει δεδομένα από ένα slice άλλης λειτουργικότητας (π.χ., το slice των χρηστών) στη σελίδα ενός συγκεκριμένου χρήστη, χωρίς να παραβιάζει τα όρια μεταξύ των modules και χωρίς να κάνει περιττά αιτήματα;

Ποιες εναλλακτικές του Redux γνωρίζεις και γιατί δεν έχουν τα πλεονεκτήματά του; Γιατί το Redux δοκιμάζεται καλά και τα contexts όχι;

#React εγγραφή φόρμα 1. Εξήγησε πώς λειτουργεί το StateProvider, μοιράσου τις σκέψεις σου με τον συνεντευξιαστή. 2. Ρίξε μια ματιά στο /src/api/mock, εξήγησε πώς λειτουργεί. 3. Έλεγξε το χρώμα του SubmitButton και διόρθωσέ το. 4. Υλοποίησε την επικύρωση της φόρμας πελάτη στο συστατικό Signup. (\*\*) Θυμήσου την εργασία αριθμός 9. Κανόνες: - Τα πεδία Username, Email, Password και Repeat Password πρέπει να έχουν τουλάχιστον 6 χαρακτήρες; - Το Password πρέπει να ταιριάζει με το Repeat Password; - Η επικύρωση πρέπει να γίνεται όταν κάνεις κλικ στο "Sign Up"; - Τα πεδία με μη έγκυρες τιμές πρέπει να σημειώνονται (props error και helperText); 6. Η απάντηση API μπορεί να έχει σφάλμα που πρέπει να εμφανίζεται στον χρήστη κοντά στο αντίστοιχο πεδίο. 7. Βεβαιώσου ότι το συστατικό UserName εμφανίζει το νέο όνομα χρήστη μετά από επιτυχημένη υποβολή. 8. Υλοποίησε το νέο συστατικό SignupSuccess. Θα πρέπει να εμφανίζεται αντί της φόρμας εγγραφής. 9. Υλοποίησε την επικύρωση διακομιστή για τα κατάλληλα πεδία.

Μπορείς να μιλήσεις σύντομα για την τελευταία σου εμπειρία και τι περιμένεις από μια νέα δουλειά, τι αναζητάς σε μια νέα θέση;