Improving the user experience with password entry

Sometimes deploying a forms based registration / login solution for SharePoint, or anything else, makes me somewhat weary. Specifically, creating the system that enforces, for sometimes tens or hundreds of thousands of people, the mundane action of having to add a password no less than twice after panning ones brain for a username when registering for an account just seems so old schoolish and tedious…

Adding a bit of colour, literally, here is a good thing. Not to much, not too little and you can add the equivalent of a breath of fresh air. One great tool for this job is Chroma-Hash.

Chroma-Hash is a jQuery plugin that aims to offer a better password input experience with a standard password field replaces the entered characters with “●” characters. The problem is “we never know if we made a typo or not until the form is submitted & a reply is received from the server”. Chroma-Hash, “converts the values entered” into a colored visualization.

A user filling the password field can easily recognize that if the colors are the usual equivalents of the password or not. And, anyone who sees the colors won’t have any idea what the actual password is.

The script can also be used to visualize password confirmations (password & confirm password fields).

A detailed info on the method & security concerns can be found at thedeveloper’s related post.

Euler’s identity: a mental segue

Working with code as a creator, configuror (is this really a word?), or troubleshooter has rewards and costs. One of the rewards is seeing / discovering crisp and novel logical patterns used to translate business processes from physical to digital.
Recently I was discussing with somebody how best to present large amounts of somewhat abstract data related to individuals with a goal of ‘perceiving’ subject matter experts in as fluid a fashion as possible. (Clearly I struggled with this sentence.) Musing for a few days on the topic I started to visualize a way to map each persons data points onto a sphere and what the values of those data points could, and should, do to the sphere and its surroundings. Then I remembered something I had not thought or heard anybody mention in a long long time. Euler’s identity.
Euler’s identity is not something most people think or even know about. Considered by many to be exceptionally remarkable for its mathematical beauty. It is often mentioned as the literal pinnacle of mathematical elegance and beauty. And it looks like this:
e^{i pi} + 1 = 0,!
It comprises of three basic arithmetic operations that occur exactly once each:
  • addition
  • multiplication
  • exponentiation.
The identity also links five fundamental mathematical constants:
  • The number 0.
  • The number 1.
  • The number ”π”, which is ubiquitous in trigonometry, geometry of Euclidean space, and mathematical analysis (π ≈ 3.14159).
  • The number ”e”, the base of natural logarithms, which also occurs widely in mathematical analysis (e ≈ 2.71828).
  • The number ”i”, imaginary unit of the complex numbers, which contain the roots of all nonconstant polynomials and lead to deeper insight into many operators, such as integration.

So what does that mean? Euler’s formula demonstrates, albeit for still not terribly clearly known reasons, that there is an intrinsic connection between complex exponential functions and trigonometric transformations.

So… what does that really mean? Sometimes other people put it best. “The true beauty of Euler’s Identity comes from the fact that, while the true nature of several of these constants continues to remain a mystery to mathematicians (though it is clear that they possess many real-world manifestations), within the confines of this equation they all work together in such a way that they interlock like pieces of a mathematical jigsaw puzzle, the end result of which has the mathematical traveler ending up right back where he began – at the journey’s origin.
If it does not ‘make sense’ don’t worry. The mathematician Carl Friedrich Gauss supposedly said that if this formula was not immediately apparent to a student upon being shown it, that student would never become a first-class mathematician. Few people are. I know I’m not. But that still does not help if you cannot “see” it, so here’s a picture. A moving one that hopefully will act to shed some light on what Euler’s identity tells us. (I got the picture and the text below straight from Wikipedia.)

The exponential function ez can be defined as the limit of(1 + z/N)N, as N approaches infinity, and thus e is the limit of (1 + iπ/N)N. In this animation N takes various increasing values from 1 to 100. The computation of (1 + iπ/N)N is displayed as the combined effect of N repeated multiplications in the complex plane, with the final point being the actual value of (1 + iπ/N)N. It can be seen that as N gets larger (1 + iπ/N)N approaches a limit of −1.

If you’re still not sure what it is, Midnight tutor has a good video here:

In case you were wondering. No, it did not help solve the original business need. But it did help to continue to keep alive the awareness that everyday people I work with produce clever, and sometimes stunning, solutions with logical blocks. It’s like working with artists who craft in ether.

UI Dragging : Dragdealer JS

Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.

The script is pretty flexible with options like:

  • working horizontally or vertically
  • defining the initial positions of the slider (x/y)
  • setting the number of steps for the slider
  • snapping to the steps
  • and much more.

Dragdelaer JS has callbacks on both release and move events which makes any type of interactions possible.

Data Visualization: Earthquakes

Visualization of data is a topic I have a more than passing interest in. It’s a fundamental part of my daily routine as I help people understand what they have and show them new methods and tools with which they can discern patterns that may be hidden.
Sometimes I find things that are interesting or just well done. Such as this earthquake data from the USGS. Looking at the image below you can see data points (location) with value (seismic strength) and recency (date/time) clearly and concisely.

AeroWindow 2.0 – Cool Windows 7 style modal popups

AeroWindow is a jQuery plugin for creating Windows 7-like aero style modal pop-ups complete with the minimize, zoom, maximize and close functions. There can be multiple pop-ups in one page where the active one is highlighted visually. All on the screen can be resized, drag’n dropped and maximized with double-clicks.

Quick Website Sketching With Paper Browser

Paper Browser is a set of PDF files that look like a browser which can be used for sketching easily once they are printed.

There are 2 different sets:

  • Quick sketch: proportionally scaled to 1024×768px and subdivided into width sections (800, 960, 1024)
  • Browser sketch: canvas is 1024×768px minus the height of the browser toolbar and status bar with 32*32px grids.

They both come with landscape and portrait versions.

It’s a different type of Flash…

Sencha (previously known as Ext JS) has released Sencha Touch, a HTML5 Mobile Application Framework. which allows you to develop web applications that look and feel native on Apple iOS and Google Android touchscreen devices.
It makes use of HTML5 for delivering audio/video or localStorage and CSS3 for maximum styling like rounded corners, background gradients, and shadows.
The code created is resolution independent. It uses a method which allows developers to change the overall scale of their interfaces on the fly with no pixellation.

Sencha Touch has a powerful animation system that makes flexible animations between screens and views possible.

Slide, pop, and fade animations are included with the library, each with a robust set of options to change attributes like direction and masking style.
And, as they are created with CSS, building custom animations is a joy.

Also, it includes a set of common icons for using them in toolbars and tab bars.

Compatibility: Apple iOS and Google Android

How to Eat a Pomegranate Without Going B@tsh!t

This is something that routinely irks me. And you too if you eat these singularly awesome pieces of fruit! The solution is unbelievably simple.

  1. Look for the roundest, deepest red pomegranates you can find.
  2. Rinse it in water, as usual, and cut an X in the top down to about halfway down the fruit.
  3. Set the pomegranate in a large bowl of water, and using your thumbs pry the peel apart from the center of the X outward.
  4. Keeping the fuit submerged, use your fingertips to gently brush away the seeds from the white membrane. These seeds will sink to the bottom of the bowl and the resulting empty membrane will float.
  5. Strain and enjoy!

Charting Data: Keeping it simple.

I see a lot on charting data in SharePoint, and out.

In my opinion it boils down to three things

  1. what have you got
  2. how did you get it
  3. how are you going to show it

The first two are data related and require some questions.

  • Is it flat data that can “just be charted”?
  • If not, what needs to be done?
  • Is it interactive?
  • If it is, in what way?
  • etc

The third can get complicated as it can delve into what one can only call, the aesthetics of the situation. Some people love pie charts with garish colours. Others simply cannot understand radar charts. One product that works very nicely, has lots of options, and has a nice cost at $0 under the GPL, is Visifire.

Visifire is a set of open source data visualization controls – powered by Microsoft® Silverlight™ & WPF. It is a multi-targeting control which can be used in both WPF & Silverlight applications. Using the same API, charts in both Silverlight & WPF environments can be created within minutes. Visifire can also be embedded in any webpage as a standalone Silverlight App. Visifire is independent of server side technology. It can be used with

  • ASP.Net
  • PHP
  • JSP
  • ColdFusion
  • Ruby on Rails
  • Simple HTML
  • Etc.
This control can be easily used to chart data in a list.

Let me show you how…

  • Upload the Visifire files to your SharePoint document library. Specifically, copy the VisiFire.xap and .js files into the document library that will hold your web part page.
  • Add a Data View web part for the list containing the data you wish to graph to the web part page using SharePoint Designer.
  • In the Code View, replace the line in the section with the following


  1. Columns in this example are @Budget and @Actual, update these if your list is different
  2. I have replaced “<" with "< " so that the code will get presented correctly in the browser

< type="text/javascript" src="Visifire.js" mce_src="Visifire.js">< /script>
< escaping="yes">< ![CDATA[ < type="text/javascript">
var xmlString =
‘ < vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts" theme="Theme2">‘
+ ‘ < text="Revenue">‘
+ ‘ < title="Month">‘
+ ‘ < title="$ Thousands">‘
+ ‘ < name="Budget" renderas="Column" axisytype="Primary">‘
]]>< /xsl:text>
< select="/dsQueryResponse/Rows/Row">
< escaping="yes">< ![CDATA[ + ' < axislabel="">< /xsl:text>
< select="./@Title">
< escaping="yes">< ![CDATA[" YValue="]]>< /xsl:text>
< select="@Budget">
< escaping="yes">< ![CDATA["/>‘]]>< /xsl:text>
< /xsl:for-each>
< escaping="yes">
< ![CDATA[ + ' < /vc:DataSeries>‘
+ ‘ < name="Actual" renderas="Line" color="Red" axisytype="Primary">‘
]]>< /xsl:text>
< select="/dsQueryResponse/Rows/Row">
< escaping="yes">< ![CDATA[ + ' < axislabel="">< /xsl:text>
< select="./@Title">
< escaping="yes">< ![CDATA[" YValue="]]>< /xsl:text>
< select="@Actual">
< escaping="yes">< ![CDATA["/>‘]]>< /xsl:text>
< /xsl:for-each>
< escaping="yes">
< ![CDATA[ + ' < /vc:DataSeries>‘
+ ‘ < /vc:Chart>‘;
< /script>
]]>< /xsl:text>
< !-- Create the div to hold the chart and then run -->
< !-- the JavaScript code to actually show the chart. -->
< id="myChart" style="width:500px;height:300px;">
< language="javascript" type="text/javascript">
var vChart2 = new Visifire(“Visifire.xap”);
< /script> < /div>

Nmap 5 released

Network security starts with scanning because you need to know what you have so that you can identify your vulnerable points and manage the associated risk.Nmap excels in helping you enumerate your network and identify what is running. Nmap is also a key tool in the fight against Conficker and its ilk and can be used to detect an infected node on a network.

With the release of Nmap 5, the first major release since 1997?, there is a noticeable speed advantage with faster scans. Aside from the speed improvements there are the new tools such as Ncat and Nmap Scripting Engine (NSE) that make Nmap 5 a must have.

  • “The new Ncat tool aims to be your Swiss Army Knife for data transfer, redirection, and debugging,” the Nmap 5.0 release announcement states.
  • NSE is all about automating network scanning task with scripts.”Those scripts are then executed in parallel with the speed and efficiency you expect from Nmap. All existing scripts have been improved, and 32 new ones added. New scripts include a whole bunch of MSRPC/NetBIOS attacks, queries, and vulnerability probes; open proxy detection; whois and AS number lookup queries; brute force attack scripts against the SNMP and POP3 protocols; and many more.”

Other “stuff” in this version…

  • ncat (allows data transfer, redirection and debugging) – (Remember hobbit’s nc ?)
  • ndiff scan comparison
  • better performance
  • improved zenmap GUI (including a real neat feature to visually map the network you have scanned)
  • Improvement of nmap scripting engine (nse), reviewed existing scripts and added 32 new scripts.

A useful if not must have tool. It not only applies to security, but also to simple things such as trying to find that pesky administrative interface to a WSS or MOSS environment when you cannot get access to the desktop… The more you have and know the better your options as they say.