The problems we've run into designing amazing products have inspired us to build powerful tools, frameworks and resources that have helped us design better and faster. We've made many of these resources freely accessible to the open source community, and it's been nothing short of awe inspiring to see how millions of designers and developers use them to create amazing sites, apps and emails.
Today, we're thrilled to announce our new, open-source, native, lightweight ES6 Javascript @mention engine, Tribute!
From Frustration to Inspiration
About a year and a half ago we began combining several of our design apps into the ultimate tool for product designers, a platform called Notable.
The Code module of Notable introduced some interesting complexities because we wrap our interface around your content in an iframe. We then inject JavaScript into the page to enable interaction with our Angular application in the parent window. This allows for some very interesting ways to present feedback around a live web page, but it also creates a potential for conflict between the pages JavaScript and our own. To solve this, we needed to go native.
All of our logic inside the iframe is written in native JavaScript. In the latest Notable update, we added @mentioning support. @mentions build on one of Notable's greatest strengths, improving communication between teams, stakeholders and clients. There is no better way to pull people into conversations and keep the dialogue moving forward.
We didn't want to use standard frameworks or libraries like jQuery, Angular, Backbone, etc because we knew that our customers would be using them too. A native solution would greatly decrease the chance of conflict or breaking their pages logic.
We scoured the net for an open source, native, @mention library and came up with nothing. So we rolled up our sleeves, put our heads down, and got to work. The result of which is Tribute, and we're incredibly proud of what we've created.
Check out our Playground Page to see how it works and give it a try!