Showing my cards; a few at least. Email me with any comments or questions.

Check out my CodePens

I've added some of my better demos, prorotyping code snippets, and interaction designs over on my CodePen.io profile.

See the Pen YouTube Video Modal by Matt Amyot (@mattamyot) on CodePen.

See the Pen Custom Radio Buttons by Matt Amyot (@mattamyot) on CodePen.

See the Pen Pickup Order, Date & Time by Matt Amyot (@mattamyot) on CodePen.


Standard underlines are boring, but serve their purpose well as the 'link' indicator on the web. I had seen a few sites and libraries attempt dressing up the standard underline, but none did it truly well... Meaning none were visually elegant, easy to edit for re-use, and easy for content editors to apply to their text content. My good friend Adam Luter was up to the challenge, and he deserves credit for helping to code and debug this idea.


This is a hyperlink

This is a hyperlink that breaks to two lines with text-wrapping

This is a hyperlink with a different color, faster underline


Try it:

Download: fancy-underline.zip

Data Visualization Challenge: Donut Chart

What do you do when the guys paying your invoice are still stuck using IE7, but also need their data visualizations to work on their shiny new retina iPads? Image-based solutions provide great visual style, but lack ideal editability. Flash won't work for iOS, and similarly the HTML5 Canvas element won't work for most versions of IE. Mission not impossible, and probably simpler than you think.

Other 3%
Nokia 9%
BlackBerry 11%
Android 31%
iPhone 46%

Raphaël.js is awesomely useful in this for executing simple interactive charts that *could* otherwise be done using animation plug-ins like Flash, but now also need to work properly on iOS devices. The Raphaël library offers a single content-entry solution for ubiquitous support.

What's more, the interactive chart above is also completely accessible and searchable. Markup for this data is actually a Table element–that should sound familiar to anyone who's ever authored pie charts in MS Excel or a similar spreadsheet application. Raphaël is able to hide the boring Table, scrape it's content, and instead generate this great looking donut chart in it's place. And the added win here, is that if a user did happen to have Javascript disabled for any reason, they'll simply see the table instead, rather than a blank box.