Αυτό το 500 bytes Javascript μπορεί να προβλέψει τις κινήσεις των δρομολογητών του χρήστη

Μπορείτε να κάνετε κάποια πραγματικά δροσερά πράγματα με το JavaScript και ο κώδικας ανοιχτού κώδικα κάνει ακόμα πιο εύκολη την εργασία.

Προνομιούχο είναι μια από τις πιο cool βιβλιοθήκες που έχω δει και είναι χτισμένη με μόνο 500 bytes JavaScript. Με αυτό το πρόσθετο, μπορείτε να εντοπίσετε πού κινείται το ποντίκι του χρήστη και να προβλέψετε σε ποιο στοιχείο κατευθύνονται.

Αυτό μπορεί να ακούγεται σαν μια περίπλοκη ιδέα, αλλά είναι αρκετά εύκολο να εφαρμοστεί. Για να μην αναφέρω αυτό προσφέρει ένα τόνος της ευκαιρίας για τους προγραμματιστές να δημιουργήσουν κάποια πραγματικά δροσερά αποτελέσματα όπως προ-hover animations ή δυναμικά εφέ διάταξης.

Ξεκινάτε από στοχεύοντας ένα στοιχείο στη σελίδα και καθορίζοντας τον τρόπο εμφάνισής του όταν ο χρήστης κινείται προς αυτό το στοιχείο.

Όλοι οι υπολογισμοί γίνονται στο backend με τη βιβλιοθήκη Premonish, οπότε δεν χρειάζεται να ανησυχείτε για τα μαθηματικά ή τη λογική πίσω από αυτό.

Αντ 'αυτού, ψάχνετε έναν τρόπο να χειριστείτε την πρόβλεψη με βάση την αξιοπιστία της συμπεριφοράς του χρήστη. Όλα αυτά μεταβιβάζονται σε JavaScript, ώστε να μπορείτε να γράψετε τις δικές σας λειτουργίες χειριστείτε τις συμπεριφορές των χρηστών.

Εδώ είναι ένα παράδειγμα απόσπασμα από το demo Premonish:

 premonish.onIntent ((el, confidence) => // el είναι το αναμενόμενο στοιχείο DOM // η εμπιστοσύνη είναι ένα σκορ από το 0-1 για το πόσο σίγουροι είμαστε σε αυτήν την πρόβλεψη. 

ο onIntent () η μέθοδος ψήνεται σε Premonish και ονομάζεται κάθε φορά που η βιβλιοθήκη παρατηρεί ένας χρήστης που κινείται προς κάποιο στοιχείο.

Μπορείτε επίσης να χρησιμοποιήσετε μια άλλη μέθοδο, onMouseMove (), που τρέχει κάθε φορά το ο δρομέας αλλάζει τις θέσεις Χ / Υ στην οθόνη. Με αυτόν τον τρόπο μπορείτε να δείτε πώς ο Premonish υπολογίζει τις πιθανότητες του χρήστη να δώσει πρόθεση.

Μπορείτε να βρείτε μια δέσμη πληροφοριών στο κύριο GitHub repo το οποίο περιλαμβάνει απλά αποσπάσματα κώδικα για να ξεκινήσετε. Η αρχικοποίηση απαιτεί μόνο μια σειρά επιλογέων ή στοιχεία DOM που θα πρέπει να στοχοθετηθούν.

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

Ελέγξτε το ζωντανή επίδειξη να δούμε πώς όλα αυτά δουλεύουν και να δουν ένα “λειτουργία εντοπισμού σφαλμάτων” όπου μπορείτε να παρακολουθήσετε πώς λειτουργεί ο αλγόριθμος πρόβλεψης σε πραγματικό χρόνο.

Μπορείτε επίσης να μοιραστείτε τις σκέψεις σας και να ευχαριστήσετε τον δημιουργό Matthew Conlen στον Twitter @mathisonian του.