Cinnamon.js takes some of the pain out of naming things. It's a script that allows users to find links, images, and other elements by their synonyms, using the browser's built-in Find function.
To see it in action, search this page for "Twitter", "Spice", "Email", or "Contact".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus orci ut mi laoreet rhoncus. Pellentesque congue urna tincidunt tortor rhoncus dapibus. Duis faucibus dolor a sem ultrices at facilisis risus cursus. Cras vel euismod nisl. Ut vitae risus et libero sagittis ultrices et vitae ligula. Aliquam at turpis id diam placerat consequat at vitae est. Aenean tellus magna, lacinia vitae facilisis facilisis, egestas ut sapien. Follow me at @thomashpark. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tincidunt dapibus dui luctus rhoncus. Nam sagittis egestas blandit. Nulla imperdiet tincidunt enim, a tempus sapien volutpat a. Maecenas sed elit ipsum, ut tristique odio. Suspendisse potenti.
Photo by kobiz7Etiam et elit enim, quis semper metus. Nunc sodales posuere turpis, viverra vestibulum lectus vehicula sed. Nulla quis augue nec nibh varius pharetra adipiscing non felis. Etiam lobortis vestibulum luctus. Cras non felis enim, id gravida libero. Vivamus vulputate nisi at tellus pulvinar faucibus sodales mi feugiat. Reach me here. Proin id est ut quam dictum venenatis ac non risus. Ut porttitor mattis odio vel elementum. Aliquam molestie lorem nec diam pharetra et malesuada diam condimentum. Cras feugiat pulvinar sollicitudin. Etiam id diam fermentum quam varius laoreet. Quisque nibh nunc, ullamcorper et bibendum at, ultrices et lorem. Cras vitae euismod felis. Donec lectus libero, ornare eget luctus nec, dictum et sapien. Proin viverra justo ac augue pellentesque aliquet.
To add to your page, include cinnamon.js. Then wrap your element of choice (such as in span
tags) and give the data-cinnamon
attribute a comma-separated list of terms. If you wrap an image, its alt text will also be used, as in the example above.
Here's an example:
<span data-cinnamon="azure,cerulean,cobalt">blue</span>
More information is available in this blog post.