coding, graphics, web design, web development

More Coding as Cooking

Four years ago, I published a post on computational thinking entitled, Like to cook? You’ll love JavaScript.

Photo: Chefs at Work by Michael Browning on Unsplash
Chefs at Work (Photo by Michael Browning on Unsplash)

Accordingly, I was tickled to see another web developer (Linton Ye) applying a JavaScript-as-cooking metaphor: What Is Redux: A Designer’s Guide:

Imagine there’s a chef living in each component. Fetching data from servers is like sourcing all the ingredients needed to prepare dishes.

These little chefs are easy to imagine: Ye’s article includes some tasteful illustrations of the little chefs running around. State management in Redux can be pretty dry, and the chef metaphor makes this abstract concept more digestible.

As icing on the cake, Ye also serves up his take on the “real power of Redux,” i.e., the predictability it brings to application development through its rules for data and its use of pure functions.

— Edward

P.S. I was hoping to extend this culinary metaphor even further, having noticed that Redux middleware follows a currying pattern (as illustrated by this code sample from the Udacity Nanodegree Course on React and Redux by Tyler McGinnis):

const logger = (store) => (next) => (action) => {
// ...

Alas, “currying” is named after Haskell Curry, a mathematician, not the curry spice blend.

graphics, social media


As an ancillary offering to web development, I produce assets for web sites, apps and social media pages.

Here is my latest creation — a video to promote the Black Bottom Biscuit band’s upcoming return to Lone Star BBQ & Mercantile near Santee, South Carolina:

Word from the agencies is that these videos are all the rage right now, which makes sense — there is so much content on social media that it takes some visual excitement, especially animated graphics or video, to stand out from all the standard text out there.

If your next project would benefit from an animated gif or video, let’s talk about what I could bring to your team.

coding, web design, web development

Pace of Change

Has any other career field seen as much change as web development — especially the kind of open-source front-end web development the cool kids are doing?

Many of the in-demand tools, such as Angular, didn’t even exist a few years ago. (And it’s still changing — in the time it took to type that sentence, Angular was made obsolete by Angular 2.)

So what does this mean for front-end web developers like me?

It means an absolute ****-ton of new stuff to learn.

In this video, at 8’49”, one of the Digital Ocean folks, Joel Califa, presents an abridged list of some of these things:

As he mentions, the list really is much longer — what about Ionic, Cordova, JasmineJade, SASS (not the old syntax, but the new one)/LESS, TypeScript, etc., etc., etc.?

It also means a kind of identity crisis. I’ve considered myself to be one of the rare, hybrid, “purple unicorn” web designer-developer types he described in the first part of the video.  In 2009, I went to Midlands Tech to study both coding (Java, SQLJavaScript, HTML, CSS) and the Adobe Creative Suite Tools (PhotoShop, DreamWeaver, Flash, etc.). . . . Yep, Flash.

. . . . However, since then I have worked for two years in a LAMP shop and then another two in an enterprise .NET shop.  I’ve coded and deployed a native Android app, and have configured my own Linux VPSs from scratch.  My interests lately have been in exploring full-stack web development using Mongo, Angular 2 (and React), Express, and Node – the so-called “MEAN” and “MERN” stacks. . . .

. . . . So am I still a “front-end” web developer?  My web certificate was in “web design”, but am I really a “designer” anymore?

Thankfully, he does give some solid steps for prioritizing a learning path and saving some sanity (apologies for the potty mouth).

There comes a point, too, where one has to not worry about titles and labels. . . .  (Years ago, I tried to explain/sell myself as someone with the “T-shaped” skill set mentioned in the video, and no recruiter or hiring manager had any idea what I was talking about.)

. . . .But, rather, just get to the business of building elegant, useful digital things that live on the Internet. . . .

web development

Measuring My Blog’s Emotional Tone with IBM Watson

[Original post, from 2015-12-09:]

I developed a WordPress plugin that shows the emotional tone of blog posts using the “experimental” IBM Watson Tone Analyzer API.

My plugin extracts the contents of a blog post and sends it to the IBM Watson Tone Analyzer API, which returns scores for several attributes, including the three attributes of emotional tone that IBM has found to be most salient, viz. cheerfulness, negativity and anger.

According to IBM:

  • Cheerfulness refers to positive emotions such as joy, optimism, contentment, inspiration, and happiness.
  • Negative emotions include feelings of fear, disgust, despair, guilt, rejection, and humiliation.
  • Anger is a type of negative feeling with strong intensity such as annoyance, hostility, aggression, hurt, frustration and rage.

Finally, the plugin pulls these scores from the API response body and displays a simple bar graph.

The cognitive science behind their analysis is a bit beyond me.  It appears to look for emotitone of post bar chart (using IBM Watson)onally loaded words. For example, if you put the word “lousy” in your post, it will bump the negativity and anger scores way up… (Note how the word “lousy” in this post results in high “negativity” and “anger” scores in the bar chart. )

This product has interesting implications. I’m guessing someone in advertising somewhere is doing A/B testing on copy to see if more “cheerful” ads sell more widgets….

For Further Reading

Rama Akkiraju, IBM Watson Tone Analyzer – new service now available, (July 16, 2015).

Update: The State of My Emotional-Tone-Measuring WordPress Plug-In

[Update of 2016-02-26:]

IBM updated the API used by my plugin in February, which broke my implementation of it.

(Such is the nature of using random, free, experimental APIs….)

From “Experimental” to “Beta”

Their Tone Analyzer API has been promoted from “Experimental” status to “Beta”.  The new version adds some significant enhancements.

This WP plugin project was a proof-of-concept done for giggles. No client; no budget.

I consider the concept to be proven and have moved on to the next adventure.


coding, graphics, mobile, ui, web design, web development

Winning Hackcess to Justice (NC)

It was a pleasure to meet Raleigh attorney Caroline DiMaio this weekend and to advance her vision of an app to help inform migrant workers of their legal rights.

Our creation placed first out of five entries at the Raleigh edition of Hackcess to Justice, a hackathon presented by the ABA Journal and the N.C. Bar Association.  The competition was held at Campbell Law School and sponsored by Citrix ShareFile, Lawyers Mutual, and Poyner Spruill, LLP.

(It’s kind of a small world: I learned of this hackathon from Matthew Wilcut, a legal-aid attorney (and developer!) I met at a Startup Weekend competition in Greensboro a few years ago.)

Press Coverage

“App to aid migrant workers wins 3rd Hackcess to Justice hackathon” (ABA Journal)

“Code of law: ‘Hackathon’ gives birth to ideas for bridging the justice gap” (N.C. Lawyers’ Weekly) (Subscription Required)

Official Contest Site

Learn more about the competition, including the esteemed panel of judges, the judging criteria, and other entries at the official site:

Hackess to Justice (NC) on Devpost

(As a developer with a long history in and around the legal profession, I was impressed by each of the other entries – I could see any of them in production!)


We developed our entry using rapid prototyping techniques and the Bootstrap JavaScript/CSS framework.

Screencap of NC Farmworkers' App (Interactive Prototype)
Screencap of NC Farmworkers’ App (Interactive Prototype)

graphics, social media

The Great South Carolina Flood of 2015

It’s not every day that your home state gets flooded by a 1,000-year storm.

When Hurricane Joaquin and a few other systems converged to dump 3 or 4 months of rain on South Carolina in one weekend, the images of flood damage started pouring in. I would repost these on social media, mostly to let folks outside of SC (including old friends and classmates who were from there) know that something really serious was happening in the home state. After doing this a dozen times, I decided to organize the photos on a map:

SC Flood Map
Map of Images from Social Media Concerning the South Carolina Flood of 2015

I started the map mostly for my own benefit, but then made it public, figuring others might like to see it, and many did:

USA Metro Areas Viewing the SC Flood Map
MSAs Visiting My Flood Map

I continued to add links to the map.  After adding 100 or so of these images (and videos) , a few things jumped out at me:

1. Most of the Coastal Areas Flooded Badly

Charleston flooding is not news (because it happens so often), but the difference is how much of the coast was flooded — a huge swath of coastal area – the Charleston/Summerville area, Georgetown, Conway, Myrtle Beach — even up into Calabash and other North Carolina towns. (The southern coast, around Hilton Head Island, was spared.)  If this and nothing else happened, we’d have a major news story on our hands.

2. The Areas in and around Columbia Flooded Badly

Flooding was especially striking around the series of lakes just west of I-77. The lakes overflowed, and many dams failed. Look at the map at the houses (mansions, even) around Lake Katherine, Forest Acres, Arcadia Lakes, and in the King’s Grant neighborhood. I later saw photos of the interiors of some of these houses — living rooms with at least five feet of standing water.

Dramatic photos appeared from south of these lakes, where their water flows through Gill’s Creek — the intersection of where Rosewood Drive ends and Devine St. turns into Garner’s Ferry Rd. (An intersection, I’ve traversed thousands of times.) A pet store flooded, resulting in the loss of several small animals (thankfully, at least the dogs and cats were evacuated.) A building with an income tax service was completely demolished.

The canal downtown gave way, which severely impacted the system’s clean water supply.

The damage extended west into Lexington County. The Old Mill dam, near downtown gave way. Across the county, Saluda Shoals Park was completely submerged.

People were rescued from floodwaters by attorneys and even by the cross of Jesus.

3. Areas East of Columbia, All the Way into the Pee Dee, Flooded Badly.

A common scene on my virtual tour of the devastation was where a creek had completely washed out a roadBridges were wrecked everywhere.

Big Rig Stuck on Bridge
Big Rig Stuck on Bridge

If the town had a lake, it typically would be surrounded by city blocks of (rushing, then standing) water, such as near Swan Lake in Sumter.

(I’m still learning about other areas in the state: For example, I just learned that Newberry County has closed 30 bridges because of the storm.)

As of tonight, I’ve added 288 pushpins, each with a link to an image or video from a public news or social-media source. I spent most of my life in SC, and still visit regularly, so most of those images represent somewhere I have visited, especially in Columbia, Sumter, and Charleston. Putting this map together served as quite the bittersweet virtual homecoming virtual tour… I still have trouble digesting how widespread the damage is. This ranks near Hurricane Hugo, especially in some of the more severely affected areas.

The Aftermath

Many were spared significant flood damage; however, many lost a lot. Several died in the flooding, so their friends and families are in mourning. Others had their houses flooded, and they are sorting through what’s left of their water-soaked possessions.

An army of police, fire, EMS, National Guard, Coast Guard, and utility company folks; civil engineering types; and others have been out in the weather making order out of this chaos.  The government types have been governing, and the media – local and national – have been telling the story (albeit we’re not the national lead story anymore).

The organized charities are kicking into gear, and many others are volunteering and finding ways to help out. People are trucking water into Columbia. Benefit concerts are being organized.

South Carolinians are a resilient bunch: “while they breathe, they hope….”

coding, web development

Closures in JavaScript, a Quick Primer

“To page authors coming from a traditional OO (object oriented) or procedural programming background, closures are often an odd concept to grasp, whereas to those with a functional programming background, they’re a familiar and cozy concept.”

Bibeault and Katz at 428-29.
Chapter on Closures in JavaScript Ninja Book

Definitions of “Closures”

Q.: Just what is a “closure”? Is it a function? A scope? An object?

A.: Yes.

“A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created.”

Closures have also been called

“the scope created when a function is declared that allows the function to access and manipulate variables that are external to that function. Put another way, closures allow a function to access all the variables, as well as other functions, that are in scope when the function itself is declared.”

Resig and Bibeault at 90.

Put yet another way, a “closure is a Function instance coupled with the local variables from its environment that are necessary for its execution.”

Bibeault and Katz at 429.

“A function declaration and its environment form a closure allowing the function, when later invoked, to access those local variables that become part of the closure.”

Bibeault and Katz at 431.

In most languages,
“when a function is declared, it has the ability to reference any variables that are in its scope at the point of declaration. . . . With closures, these variables are carried along with the function even after the point of declaration has gone out of scope, closing the declaration.”

Bibeault and Katz at 429.

“In other words, the function defined in the closure ‘remembers’ the environment in which it was created.” MDN. This is one of the “good parts” of JavaScript: With nested functions, “inner functions get access to the parameters and variables of the functions they are defined within (with the exception of this and arguments). Crockford at 37.


A popular closure answer on Stack Overflow shows the following example syntax:

function foo(x) {
    var tmp = 3;
    function bar(y) {
        console.log(x + y + (++tmp)); 
        /* will log 16 */

“This will always alert 16, because bar can access the x which was defined as an argument to foo, and it can also access tmp from foo.

That is a closure. . . . Simply accessing variables outside of your immediate lexical scope creates a closure.”

Note that the above example features an inner function and an outer function – when you see nested functions, it should trigger thoughts of closures.

Implications for Development

“While scores of page authors get along writing on-page scripts without understanding the benefits of closures, the use of closures can not only help us reduce the amount and complexity of the script necessary to add advanced features to our pages, they allow us to do things that would simply not be possible, or would be too complex to be feasible, without them.”

Resig and Bibeault at 89.

In other words they have an “ability to drastically simplify complex operations.” Id.

For example, “the ability for callback functions to reference the local variables in effect when they were declared is an essential tool for writing effective JavaScript.” Bibeault and Katz at 429.

Emulation of “Private” Methods through the Module Pattern

In JavaScript, methods cannot be declared “private,” meaning that they can only be called by other methods in the same class. However, this can be emulated in JavaScript, especially by using the module pattern. See MDN and Ben Cherry, “Module Pattern in Depth”. Also see Angus Kroll, “Function Delarations v. Function Expressions”.

Cautionary Notes

It is possible to inadvertently create closures in JavaScript as they can be created without explicit syntax (unlike in other languages). Bibeault and Katz at 430. This can cause issues.

Memory Leaks

“It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.” MDN. For example, “circular references can lead to memory leaks. A classic example of this is the creation of DOM elements that refer back to closure variables, preventing those variables from being reclaimed.” Bibeault and Katz at 430; also see IBM.

Creating Closures within Loops

Also, see MDN for an example of possible problems when closures are created within loops.


The Berlin Wall

Berlin Wall at RTP


Have you ever stumbled upon something that took your breath away?

I was at the Research Triangle Park to help a start-up with some UX/UI consulting yesterday, and I saw this in the lobby of their incubator — a piece of THE Berlin Wall….

…it took me back to memories of Reagan and Gorbachev … And imaginings of what it could have been like for the brave East Germans who tried to scale that wall. Risking (& sometimes losing) their lives for FREEDOM!

I take my freedom so for granted! I am so blessed and lucky to be able to do interesting work in a free and fun place like the Raleigh-Durham area.