Frontend

Πώς βελτιστοποιείται η φόρτωση εικόνων στις κάρτες που είναι ορατές στο viewport; Πώς λύνεται το πρόβλημα της συνθήκης race κατά την ταχεία εναλλαγή περιεχομένου (π.χ., YouTube Shorts);

Αν είχες απόλυτη ελευθερία, ποια θα ήταν η ιδανική μορφή που θα έκανες; Ποιες προσεγγίσεις, τεχνολογίες και μεθόδους θα χρησιμοποιούσες (επικύρωση, διαχείριση σφαλμάτων, UX, DX);

Τι χρησιμοποιήθηκε για την εργασία με πολυδιάστατες φόρμες — για επαλήθευση, ποια προβλήματα συναντήθηκαν, πώς δοκιμάστηκαν;

Με ποια frameworks ή εργαλεία εργάζεσαι; Χρησιμοποιείς εργαλεία AI στη δουλειά σου;

Υπάρχει ένας παίκτης στη σελίδα. Πρέπει να γίνει έτσι ώστε όταν πατάς διακοπή σε μια καρτέλα, η αναπαραγωγή να σταματά και σε άλλη καρτέλα. Πώς θα υλοποιούσες την επικοινωνία μεταξύ των καρτελών;

Πώς μπορείτε να αποθηκεύσετε δεδομένα στην κρυφή μνήμη του διακομιστή για να επιταχύνετε τη φόρτωση των χρηστών;

#React φόρμα εγγραφής 1. Εξηγήστε πώς λειτουργεί το StateProvider, μοιραστείτε τις σκέψεις σας με τον συνεντευξιαστή. 2. Ρίξτε μια ματιά στο /src/api/mock, εξηγήστε πώς λειτουργεί. 3. Ελέγξτε το χρώμα του SubmitButton και διορθώστε το. 4. Υλοποιήστε την επικύρωση της φόρμας πελάτη στο συστατικό Signup. (\*) Θυμηθείτε την εργασία αριθμός 9. Κανόνες: - Τα πεδία Όνομα χρήστη, Email, Κωδικός και Επανάληψη Κωδικού πρέπει να έχουν τουλάχιστον 6 χαρακτήρες; - Ο Κωδικός πρέπει να ταιριάζει με την Επανάληψη Κωδικού; - Η επικύρωση πρέπει να γίνεται κατά το πάτημα του κουμπιού "SignUp"; - Τα πεδία με μη έγκυρες τιμές πρέπει να σημειώνονται (props error και helperText); 6. Η απάντηση API μπορεί να έχει ένα σφάλμα που πρέπει να εμφανίζεται στον χρήστη κοντά στο αντίστοιχο πεδίο. 7. Βεβαιωθείτε ότι το συστατικό UserName εμφανίζει το νέο όνομα χρήστη μετά από επιτυχημένη υποβολή. 8. Υλοποιήστε το νέο συστατικό SignupSuccess. Θα πρέπει να εμφανίζεται αντί της φόρμας εγγραφής. 9. Υλοποιήστε την επικύρωση διακομιστή για τα κατάλληλα πεδία. --- Κώδικας από 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( `Το όνομα χρήστη "${userName}" είναι ήδη taken. Παρακαλώ δοκιμάστε ένα άλλο.` ) ); } }, 500); }); }, }; export default api; ```

Πώς λειτουργεί η εικονικοποίηση λίστας; Πώς υλοποιείται τεχνικά μέσω JavaScript;

Πώς μαθαίνεις γενικά κάτι νέο για τον προγραμματισμό και τι σου έχει μείνει τελευταίο;

Υλοποιήστε τον διακομιστή επικύρωσης για τα αντίστοιχα πεδία.

Υλοποιήστε τη λειτουργία promiseWithResolver (αναβαλλόμενη υπόσχεση), η οποία επιστρέφει ένα αντικείμενο με τα πεδία resolve και promise.

Αναφέρατε Docker, CI/CD, GitHub Actions, GitLab — μπορείτε να εξηγήσετε ακριβώς τι κάνατε, ποια pipelines, τι υπήρχε στα containers;

Εφαρμόστε τον τύπο TypeScript για τη λειτουργία customMap, η οποία δέχεται έναν πίνακα οποιουδήποτε τύπου και μια λειτουργία μετασχηματισμού που επιστρέφει έναν άλλο τύπο. Η λειτουργία μετασχηματισμού πρέπει να δέχεται τρία επιχειρήματα (όπως το callback στο Array.map).

Έχουμε ένα πολύ μεγάλο frontend σε ένα monorepo, στο οποίο εργάζονται ταυτόχρονα πολλές διαφορετικές ομάδες. Δεν μπορούμε να μεταβούμε σε micro-frontend. Πώς μπορούμε να ελαχιστοποιήσουμε τους κινδύνους ότι διαφορετικές ομάδες θα επηρεάσουν η μία την εργασία της άλλης;

Πώς παραδίδονταν οι εκδόσεις, πώς δοκιμάζονταν, πόσο συχνά κυκλοφορούσαν;

Τι κάνεις συνήθως αν νιώθεις ότι η ανάπτυξη βρίσκεται σε εξέλιξη και είσαι λίγο πίσω από τις προθεσμίες; Υπάρχει μια ημερομηνία κυκλοφορίας, αλλά καταλαβαίνεις ότι δεν θα προλάβεις να ολοκληρώσεις την εργασία.

Πώς ανταλλάσσονταν τα αρχεία στο chat — απλώς με ένα αίτημα POST ή υπήρχαν μεγάλα αρχεία;

Δημιουργήστε το σήμα STOP (κόκκινος κύκλος με λευκή λωρίδα και διπλό περίγραμμα) χρησιμοποιώντας μόνο ένα div και CSS (επιτρέπονται τα ψευδο-στοιχεία).

const customMap = (array, transform) => { // κάτι σαν array.map(transform); }; const stringResults = customMap([1, 2, 3], item => item.toString()); const lengths = customMap(["γεια", "κόσμος"], item => item.length);

Δείτε αυτό το κομμάτι κώδικα — κατανοήστε τι κάνει και γράψτε ένα απλό παράδειγμα χρήσης. Υπάρχει επίσης ένας παρόμοιος βοηθός στο lodash.