DEV Community: harleybl

The Joy of UX: User Experience and Interactive Design for Developers

harleybl — Mon, 13 Jul 2020 14:48:01 +0000

I recently finished the book "The Joy of UX: User Experience and Interactive Design for Developers" by David Platt. I recommend it to anyone looking to make better software. You can buy it at Amazon, or if you have an O'Reilly learning account, you can read it "for free."

When a lot of people hear design (myself included), their first thought is about the look and feel of the front end. Things like which typefaces and color schemes I should use to make the front end easy on the eyes. While that is important for having a polished and professional-looking product, that is not the subject of this book.

The main idea I got from the book is that developers are not the primary users of the systems that we create (unless you are building an IDE or dev tools). The experience of using our software suffers due to our bias as developers. Improving the experience helps our apps get out of the way of our customers and let them accomplish their goals. Doing so makes them happier, and in turn, helps our bottom line.

In the book, David lays out the main principles of good user experience and backs them up with concrete examples from real websites and systems to make the principles relatable. I am not going to re-hash all the tenets and tidbits from the book, but here are the ones that stuck with me:

Start with reasonable defaults
Don't make your users think or do your work
Lead the witness

If this topic interests you, I also recommend the work the UX Design for Developers course on LinkedIn learning by Billy Hollis.

If you have a resource for this topic that you recommend, please share it below.

A Ray Tracing Anecdote

harleybl — Tue, 12 May 2020 16:11:29 +0000

Overview

I was reading an article about the next generation of Playstation and Xbox consoles. Each of them will support real-time Ray tracing. Wikipedia defines Ray Tracing as "a rendering technique for generating an image by tracing the path of light as pixels in an image plane and simulating the effects of its encounters with virtual objects."

In 3D computer graphics, ray tracing is a technique for modeling light transport for use in a wide variety of rendering algorithms for generating digital images.

View on Wikipedia

.
I am excited to see this development because I believe it will bring a significant improvement in the visual quality of the games and VR experiences of the near future.

Here is an excellent example of the difference in visual quality using Minecraft. The Ray-traced version on the left:

You can watch the full video here: https://www.youtube.com/watch?v=nXoLY9lF-NI

Back to the Past

However, this story isn't about the near future, and it starts in the distant past. Gather 'round the campfire kids, because Grandpa is off his meds and is about to spin a yarn about life back in the late 90s.

The year was 1998, and I was hired out of college to write graphics software for a financial news television station. My group was responsible for writing the software that rendered the scrolling ticker, news stories, and graphs on the television screen.

The head of the whole division had recently seen Toy Story and remarked that he wanted intraday 3D graphs to be of the same quality. My boss decided that this would be a good project for me as the new guy since it was off the critical path of the main software the group was responsible for producing. I rolled up my sleeves and got to work.

The "Architecture"

What ensued was a Rube-Goldberg machine of epic proportions to act as a prototype to create these 3D intraday graphs. Here was how the application worked:

A PERL script would read an XML configuration file that contained the graph definition
The Perl script requested the market data from an API and write that to a text file.
It would then launch Maya, load up a template scene with some Mel scripting language that knew how to read the market data file, and create the 3d models for the graph and place them in the correct part of the scene.
The script would send the scene file to a rendering farm running Renderman nodes to render the frames of the scene to a configured shared directory.
Once Renderman generated all the frames, the script would launch another program to combine the frames into an AVI file for display on television.

I also created a front end in Perl and Tck/TL to edit the configuration and so an operator could monitor the progress of the application.

The render farm consisted of every spare Silicon Graphics machine I could find and install Renderman on with the temporary license the company had given us to test the software. I used additional capacity on all the DEV and UAT machines, which gave me a modest farm of 10-15 machines.

The work-horse of the render farm was the SGI Indigo 2 in all it's glory here:

The main problem with this setup was the time it took to render. My small farm was able to deliver 10-15 seconds of footage in 15-20 minutes. This was not fast enough for doing intraday financial graphs. I demonstrated the final product to the department head, and he was impressed with the final product. He asked what it would take to bring the render time down. I did some calculations and estimated that we would need about $100,000 just in Renderman licenses, and probably another $100,000 in hardware to get the time down to five minutes. Needless to say, that was the end of the project.

Conclusion

This holiday season, you'll be able to buy a game console for ~$400 that will do 60 times a second what took minutes and considerably more money to do in minutes, 20+ years ago.

Question: Is this a terrible idea?

harleybl — Thu, 30 Apr 2020 03:32:10 +0000

I have a bunch of utility functions in typescript for doing various things. I find that I often want to check if an array has any elements in it, but I am not sure if that array is undefined or null. I wind up with blocks similar to this in my code:

if (!someArray || someArray.length == 0) {
   doNothing();
} else {
   doSomething();
}

My first instinct was to write this method.

export function any<T>(arr: T[]): boolean {
    if (!arr) return false;
    return arr.length > 0;
}

The original code block becomes this, which I find more readable:

if (any(someArray)) {
   doSomething();
} else {
   doNothing();
}

I chose 'any' because I spend a lot of time in c# land and it roughly matches the LINQ method enumerable.Any(). However, using a reserved word for a function name seemed like a bad idea. Is it a bad idea?
Even if the transpiler allows it, maybe it is even less readable since any is the "I don't know what type this is" type.

In this instance, I chose to rename the function to atLeastOne which is a little more descriptive and doesn't clash with a reserved word, but I am still wondering if it was a bad idea.

FIX Master Is Awesome

harleybl — Thu, 26 Mar 2020 17:09:27 +0000

The Problem

The Financial Information Exchange protocol (https://www.fixtrading.org/) is a communication format that defines how financial institutions communicate transactions to one another. It is a text-based format where each message consists of a bunch of numbered tags as keys and their corresponding values. An equal sign separates tags and values. The 0x01 (SOH) character separates the tag/value pairs.

For example, the simplest message that you will send or receive is a heart-beat message. The HeartBeat is a periodic message that each side sends to let the other side know that your application is still around and in a good state.
Here is an example Heart Beat:

8=FIX.4.2|9=74|35=0|34=4846459|49=MySystem|52=20200325-15:00:16.455|56=TargetSystem|10=195|%

I've replaced the SOH characters with pipes so you can see them.

As you can see, this format was created to be compact over the wire, but not necessarily easy to interpret by people. Programs use a Data Dictionary that defines what the tags mean. When troubleshooting FIX connectors, you are often having to look at large files containing thousands of these messages, against data dictionaries which have hundreds of tags defined.

The Solution

While troubleshooting why my application failed to process some messages, I thought there has to be a better way to look at these FIX logs. I was thinking of writing a VSCode plug-in to parse these types of log files and print them in a human-readable format. It turns out that a man named Gary Huges beat me to the punch. This VSCode plug-in already exists, and it is called FIX master.
You can find it here: https://marketplace.visualstudio.com/items?itemName=geh-fixmaster.fixmaster or by searching for "FIX Master" in the Visual Studio Code Extension Marketplace.

This plug-in will pretty print your FIX messages and do the required dictionary lookup. For example, the plug-in will turn the example heart-beat above to this:

Heart-beat
{
 BeginString    (8) FIX.4.2
  BodyLength    (9) 74
     MsgType   (35) 0 - Heartbeat
   MsgSeqNum   (34) 4846459
SenderCompID   (49) MySystem
 SendingTime   (52) 20200325-15:00:16.455
TargetCompID   (56) TargetSystem
    CheckSum   (10) 195
}

If you do any work with FIX Protocol messages, I encourage you to check out this excellent plug-in. If you like it be sure to leave a review in the Marketplace and Star the project on Github.

Diff GIT stash versus working directory in Visual Studio 2019

harleybl — Tue, 03 Mar 2020 16:19:02 +0000

Have you previously stashed some code using git stash and want to see what applying it would do to your workspace?

I had this happen today and my first thought was to reach for "git stash show -p" on the command line. While this is a useful command for a small stash it is not that easy to see the changes in a pretty side by side manner.

The project I am working on is a C# project and I am already using Visual Studio 2019 for the project so I was wondering if there was a way that the tool could help me. Sure enough, the Visual Studio team has already thought of this.

To view a stash within Visual Studio, follow these steps:

Open the Team Explorer
Go to the Changes View within Team Explorer.
Double click on the Stash in the stashes section (below Changes)

This will open up the stash details and allow you to see the files contained in the stash. To see the differences of a specific file in the stash, double click that file to see the difference between the stash and your workspace.

I found this useful, hopefully others will find it useful as well.