Angular 2 – Format currency

In Angular 2, to format a currency, use the currency pipe on a number as shown below:

<tr *ngFor="#item of data">
     <td><a href="#">{{item.invoiceNo}}</a></td>
     <td>{{item.invoiceDate}}</td>
     <td>{{item.invoiceStatus}}</td>
     <td class="right aligned">{{item.invoiceTotal | currency:'USD':true:'1.2-2'}}</td>
</tr>
  • The first parameter, 'USD', of the pipe is an ISO currency code (e.g. ‘USD’,’EUR’, etc.)
  • The second parameter, true, is an optional boolean to specifify whether or not you want to render the currency symbol (‘$’, ‘€’); default is false
  • The third parameter,'1.2-2', also optional, specifies how to format the number, using the same formatting rules as apply to the number pipe.

Note, however, that the currency pipe relies on the Internationalization API, which is not available in all browsers. See current browser support for Internationalization API.

Here’s a visual example of what the example shown above renders when used on a decimal number:

angularFormatCurrencyExample

Angular 2 – Index of item within ngFor loop

In Angular 2, to get the index (or the iteration number) of the current item, add a second part to the ngFor expression (after a semi-colon) as shown below:

<tr *ngFor="#item of data; #ndx = index">
     <td>{{ndx+1}}</td>
     <td>{{item.po}}</td>
     <td>{{item.serviceType}}</td>
     <td>{{item.validStart}}</td>
     ...
</tr>

Notice that I’m adding 1 to the output expression ({{ndx+1}}) because the index is zero-based. The data table row example shown above renders as follows:

ngFor loop index rendered

You are a global thermonuclear war – waiting to happen

E=mc2

Energy (E) equals mass (m) times the velocity of light (c), squared. Einstein’s equation. What does it mean? It means, as I understand, that energy and matter are one in the same; they are transferable. In particular, it means that the amount of energy contained in matter, or to make matter, is pretty freagin’ intense. Imagine, the amount of mass in a single atom, times the velocity of light (2.9979 × 1010 centimeters per second), squared… a really big number. Not that the details matter, but then… think of all the gazillion atoms that make up YOU.

H-Bomb1

Somebody has calculated the approximate energy in all the atoms that make up YOU to be the equivalent, if released, of thirty hydrogen bombs.

Something to think about when you’re feeling small – that within you alone, there exists such power.

It begs the question…

What are you going to do about it?

Story structure diagram

Recently, I created a story structure diagram to help me visualize and plan as I work on my novel. There are plenty of story structure diagrams on the Web, but I wanted a version in Adobe Illustrator so that I could use layers to overlay my own elements (character arcs, major events, and what-not).

Story Structure Diagram

Click to Enlarge

In case it’s useful to someone else, I’ve provided the Adobe Illustrator file in a zip archive. Click the button below to download it.

Download Story Structure Diagram v1.ai.zip

Although this is pretty standard for story structure, I’ve based it primarily on my study of the book, Structuring Your Novel: Essential Keys for Writing an Outstanding Story, by K.M. Weiland. She also has an excellent blog called Helping Writers Become Better Authors where you can find a treasure trove of tips on writing.

What is the MEAN stack?

A particular combination of development tools, used together, is known as “a stack”. Often, a given set of tools (the stack) are so commonly used together that the set gets branded by the development community – typically, in the form of an acronym. A popular stack that you may be familiar with, for example, is the LAMP stack (Linux, Apache, MySQL, PHP/Python/Perl). Here’s a new one that you may have been hearing more of lately: MEAN. The MEAN stack is comprised of the following:

  • MongoDB: a database engine used to store the data.
  • Express.js: a server-side framework for building web applications, similar to ASP.NET MVC or Rails.
  • Angular: a front-end framework for building web applications
  • Node.js: a server-side Javascript runtime environment

What’s your favorite stack? If it’s not already popular in the community, can you invent a jazzy acronym for it? Who knows? It just might stick.

Meet the real Watson – part one

IBM Watson LogoIBM has made a big bet on Watson and the cognitive era. Curiosity has been mounting. We’ve all know Watson as a Jeopardy champion. Now he’s the friendly cog in a support group hosted by Carrie Fisher. Beyond all the marketing, fun and games, executives want to know:

Who is the real Watson? What can he do for me and my company…today?

For example, a client sent me very brief email recently.

“Have you met Watson?” she asked. “What do you think?”

As a long-time student and proponent of the Semantic Web, I’ve kept a close, but skeptical eye on Watson. Just recently, I finally got the chance to meet him face-to-interface on IBM Bluemix. In what will probably amount to a series of posts, I’ll provide a summary of what I’ve learned and what I think.

Bottom line: Watson is real and ready to serve.

One of the quickest and easiest ways for you to get personally acquainted with Watson is on IBM Bluemix where a host of Watson services are available now, so we’ll start this series there. Bluemix is IBM’s cloud platform for building, running, and managing applications and services. Bluemix starts you up in a trial mode, which gives you some elbow room to hack around before incurring fees, but you don’t even need an account to explore many of the Watson services. From the Bluemix Catalog, you can look under Services > Watson to find the available services. You can then click on each service icon to view more information and find a link to the documentation. Many of the documentation pages link to a demo, which allows you to try the service using a ready-made example. This is a great way to get a quick idea of what’s capable and to get those creative juices flowing. In this post, I’m going to try to save you a little time by giving you a concise summary of each of the available Watson services, along with some relevant links.

Quick and simple caching with Apache Commons JCS™

With over forty reusable Java components, the Apache Commons project is a gold mine of time-tested and time-saving tools. If you’re a smart developer, you’ve studied the inventory, scanned the API’s, and set a mental flag for each available component. I actually did that once and felt rather proud of myself at the time, but I guess I forgot most of it. Google is still surprising me with interesting stuff from the Commons. Here’s a good one I recently found, for example: Commons JCS™ – a distributed Java caching system.

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.