Experiments

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.

Fancy-Underline

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.

Demos:

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

Notes:

• The animated underline can be applied to a class, ID, or the all links on the page – you control it
• This solution is Javascript based, but if paired with a class for execution it will degrade gracefully
• There are no extra server-calls made for background images to make this solution work. An image is used, but Adam had the great idea to include the image as data rather than a linked file.

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.

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.