Zurb, i creatori di Foundation, hanno una reputazione per la costruzione di strumenti robusti che gli sviluppatori web amano. Creano soluzioni efficaci perché iniziano a risolvere i problemi che incontrano loro stessi.

engine called Ora sono tornati con un nuovissimo motore open source ES6 JavaScript @mention chiamato Tribute.js .

is a user interface technique for addressing someone directly. @mention è una tecnica di interfaccia utente per indirizzare direttamente qualcuno. someone, they are tagged into a conversation. Quando fai @mention a qualcuno, vengono taggati in una conversazione. was first popularized by social media sites like Twitter, but you'll find it making its way into all manner of applications thanks to adoption by startups like Slack. Il @mention è stato inizialmente diffuso dai siti di social media come Twitter, ma lo troverai in tutte le modalità grazie all'adozione di startup come Slack.

Nel 2014 Zurb ha iniziato a fondere molte delle loro app di design in un'unica piattaforma chiamata Notevole . system, but failing to find a reliable 3rd party option, they decided to build their own. Avevano bisogno di un sistema @mention , ma non riuscendo a trovare un'opzione affidabile di terze parti, decisero di crearne uno proprio. Il risultato è Tribute.js.

Tribute.js è una soluzione nativa JavaScript, il che significa che evita di affidarsi a plugin o script di terze parti. Evitando librerie come jQuery, Angular e così via, Zurb ha diminuito le possibilità di conflitti che sorgono tra Tribute.js e gli script che vengono eseguiti insieme ad esso; che rende Tribute.js uno strumento altamente utilizzabile che può essere implementato in modo coerente in una moltitudine di applicazioni diverse, indipendentemente dalle altre dipendenze che potresti scegliere di utilizzare.

Come funziona tribute.js

Tribute.js è davvero semplice da implementare. Per prima cosa, importa CSS e JS di Tribute.js:

: Successivamente, hai bisogno di un elemento nel tuo markup che visualizzi un @mention :

Infine, inizializza Tribute con una serie di oggetti che rappresentano i tuoi utenti e quindi aggiungi Tribute all'elemento della pagina:

Quando un utente digita un simbolo @, verrà presentato con un elenco di nomi utente in base alla proprietà chiave , quando ne selezionano uno, verrà inserita la proprietà del valore corrispondente.

Puoi scarica Tribute gratuitamente da Github, o installa tramite npm, e troverai una lista completa di opzioni nella documentazione.

Immagine in primo piano, conversazioni via Steve McClanahan .