I was flipping through my Evernotes this morning and found this little passage that I’d saved from the Google Material Design documentation. Yes, I quote technical documentation. In terms of UI design, and as far as technical documentation goes, the resonance of this one is almost biblical to me.
The most basic use of animation is in transitions, but an app can truly delight a user when animation is used in ways beyond the obvious. A menu icon that becomes an arrow or playback controls that smoothly change from one to the other serve dual functions: to inform the user and to imbue your app with a moment of wonder and a sense of superb craftsmanship. Users do notice such small details.
Recently, I stumbled upon a little library called SVG Morpheus that implements the delightful details transition by morphing between SVG icons. You can view a live demo here.
Usage seems pretty simple.
- Simply add the svg-morpheus.js script to your website/application.
- Add an icon set SVG to the HTML file where you want to show the morphing icon.
- Create a SVG Morpheus instance for the icon set by calling new SVGMorpheus(element), where element is an Object/IFrame/Inline SVG element containing the icon set and can be a DOM element or a CSS query selector.
Something like this, for example:
var myIcons = new SVGMorpheus(‘#myIconSet’);
Check it out!
I don’t think I was older than seven when I saw my first dead body, but they’d been common in my imagination up to that day.
I saw them mostly around water – on the banks of creeks, half buried in mud, and with all the color drowned from their eyes. I saw them in piles of garbage – a severed part protruding accidentally from a suspicious trash bag. If they’d been sitting out long enough, they most certainly were surrounded by flies. Sometimes, they even had determined columns of ants lapping up the last of the salty water from the edges of their eyelids or from the corners of the their gaping mouths. This was all my big sister’s fault.
To me, usability methods seem like sandpaper. If you are making a chair, the sandpaper can make it smoother. If you are making a table, the sandpaper can also make it smoother. But no amount of sanding can turn a table into a chair. Yet I see thousands of well-intentioned people diligently sanding away at their tables with usability methods, trying to make chairs.
I’ll introduce you to seven of the key benefits now so you can know why you might go with TypeScript and where it might lead you.
Perhaps more important than the standards and technologies behind linked data is the very idea of linked data itself – the fundamental concept. As Tim Berners-Lee put it,
“The Semantic Web isn’t just about putting data on the web. It is about making links, so that a person or machine can explore the web of data. With linked data, when you have some of it, you can find other, related, data.”
If you’ve deleted a component or content item from IBM Web Content Manager and you need to get it back, don’t freak out. There is hope. Providing the item has not been purged, here’s how you can get it back.
With the new Web Developer Toolkit for IBM Digital Experience you can automatically download all the components and presentation templates in a WCM library where you can access them quickly and easily in your favorite editor. You can also push updated files back onto the server with the click of a button or even watch for changes and have them pushed back to the server automatically. The tool also offer features for syncing theme and script portlet files.
We tried the tool today on a couple of WCM libraries and seems to work pretty great.
The following slide deck provides more information:
Web Developer Toolkit for IBM DX Overview Slides
You can download it from GitHub here:
Download Web Developer Toolkit for IBM Digital Experience.
This toolkit is available as unsupported open source. IBM expects to enhance and expand this toolkit over the next months with additional features. You can use the Digital Experience Forum for any questions about the toolkit, and you can use the GitHub project “Issues” area to report any problems you encounter.