Delightful details

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.

SVG-Morpheus-material-design-icons

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:

<script src=”svg-morpheus.js”></script>
var myIcons = new SVGMorpheus(‘#myIconSet’);
myIcons.to(‘icon1’);

Check it out!

My first dead body

A Boy's Wonder

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.

7 reasons why TypeScript helps you kick ass

TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

You can now count me as one of the many JavaScript developers who thinks TypeScript is kick-ass. Now, I don’t want to say that I’m old-school, but if you measure by Internet time, I’m pretty old. That means I grew up shoving JavaScript into onclick attributes years before jQuery was even a thing. It also means that lately, I’ve been feeling a lot like a toddler who just got tossed in the twelve-foot end of a swimming pool and told to swim. I’ve been paddling my ass off to keep up with all the newfangled ways that front-end development is done. Seems like there’s been a whole-scale revolution darn-near overnight – what with all the Node.js, CSS preprocessors, task runners like Gulp and all. But recently, I took a deep dive into TypeScript and I gotta say – it’s a breath of fresh air. I feel like someone just threw me a floaty.

TypeScript adds to everything that JavaScript can already do while giving you a whole new set of features that can really improve the way you work. I’ll explain why in a second, but before you go crying about yet another technology to learn, let me ease your mind. You see, TypeScript is a superset of JavaScript, which means it literally sits right on top JavaScript and, as a result you can take any existing JavaScript code and shove it in a TypeScript file (a file with a .ts extension). Assuming you weren’t drunk when you wrote the code, it’ll work. Once you get the tools in place to compile TypeScript into JavaScript, you can start writing the kind of JavaScript you’re already familiar with in TypeScript files. Then, at your own leisure, you can start learning some of the benefits of TypeScript and start sweetening your code as you go.

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.

Host your own Google web fonts

google-webfonts-helper

The quick and easy way to host a Google Web Font is to link to Google’s hosted stylesheet for the font like this:

<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

But if you want to host the font yourself, it’s a bit trickier. You can’t just download the fonts specified in the stylesheet because Google dynamically generates the stylesheet for your client browser. To ensure the right font type for the right browser, you’ll want to download all of the types available for the given font.

This link to the google-webfonts-helper provides “a hazzle-free way to self-host Google Fonts”. Check it out!

Linked Data – a thing worth doing

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.”

theNightSky

IBM Cloud Webinars

If you’re interested in IBM cloud offerings, a good source of information are the IBM Cloud Webinars. Register to attend an upcoming webinar or pick a recorded webinar from the archive. Topics include:

  • Getting Started on IBM Bluemix
  • Docker Containers
  • Web Applications
  • Internet of Things
  • Big Data & Analytics
  • Watson on Bluemix
  • API Management
  • and more…

New Web Developer Toolkit for IBM Digital Experience

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.

Web Developer Toolkit for IBM Digital Experience

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.

Better error messages from Gulp using gulp-util

Gulp is a streaming build system that can help automate and enhance your workflow. For example, at Base22, in one of our composite tasks, we use Gulp to create a directory structure, compile Less into standard CSS, copy static dependencies, minify JavaScript, compress images, run a simple HTTP server, and then watch for subsequent changes to files while we’re working. Gulp is easy to install, easy to learn, easy to configure, and I love it. But when it happens to bomb on a problem, it doesn’t always log information that you can actually make sense of. Luckily, there’s a Gulp plugin that can help you coax more troubleshooting info out of these errors.