Blog

A better way to describe “on the bench” and “non-productive”

I just heard my wife, a corporate accountant, on a call with her team talking about people in the construction company she works for charging time to projects when they are non-productive (during this time of COVID-19 and working from home).

This is a similar situation to working in IT corporate consulting, where the consultants generally describe time back in head office between client projects as being on the bench. It’s a strange situation to be in – no fault of the employee but it holds a burden and shame many carry internally.

The great thing I heard my wife say was:

Let’s not use the word “non-productive”. Let’s use the word “non-recoverable“.

The words “on the bench” and “non productive” carry a negative connotation and place the focus (blame?) on the employee.

“Non-recoverable” or “non chargeable” on the other hand describe the situation just a well, better reflect it in business terms, and remove the negative inference on the employee.

It’s not like employees are ever without work to do (or things to learn).
The only difference between types of work is whether or not the business is directly charging a client for that slice of time.

[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.

I just had to deal with the following Vue generated warning:

[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.”

DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.

It related to the following line of code, where I was conditionally displaying a Font Awesome icon:

<i class="fas fa-spinner fa-spin" v-if="bookmarkMetaState == 'retrieving'"></i>

The problem, I believe, is the original <i> element ended up rendering as an <svg> element. So the error makes sense, because the the original code no longer existed.

I simply wrapped my my <i> Front Awesome icon in a <span>, and applied the v-if to the <span>. Problem solved.

 

 

 

Is data returned by JavaScript (ES6) array.filter() immutable?

Is data returned by JavaScript (ES6) array.filter() immutable? It depends.

If the original array contains “primitive” values (eg. strings, numbers and boolean) then a new array with “copies” of the values is returned in the filtered array. Changing data in the returned array will not affect the original array or its data.

If the original array contains objects then the a new array is still returned from .filter() but each element still references the object in the original array. Changing data in either the original or returned array will affect the data in both array because it’s the same piece of data being referenced by both arrays.

 

I have a Pen at https://codepen.io/jsnelders/pen/jOPeXXw demonstrating both situations.

 

See the Pen
Is data returned by JavaScript (ES6) array.filter() immutable?
by Jason (@jsnelders)
on CodePen.

Use `//@ts-check` in Visual Studio Code to Find Undeclared Variables (and save yourself hours of hunting)

Oh. My. God!

I just discovered //@ts-check in Visual Studio Code.

For all the web/JavaScript developers out there, add that comment to the top of your .js file in Visual Studio Code (that’s all you have to do).

Now, any issues in you variables (like using variables you haven’t declared) will show as an error in the IDE.

This is what I call super charging your IDE and your development.

I could have saved myself half a day’s work yesterday if I’d thought to search for “visual studio code undeclared javascript variables” beforehand. 🤦‍♂️

See: https://code.visualstudio.com/docs/nodejs/working-with-javascript#_type-checking-javascript

JavaScript (ES2015) – Handling Promises in a loop (full working example)

I’ve spent the best part of the last day and half working with a simple Promise problem in JavaScript.

The scenario I have is:

  • I have a tree structure of folders (and sub-folders) with documents in them.
  • The production scenario I’m emulating is to submit each item in the tree (both folders and documents) to an API for saving, and to receive a return object with a new ID.
  • Documents are are associated with folders via IDs (e.g. Document.FolderID = Folder.ID and Folder.ParentID = Folder.ID).
  • Each item is added to an array of data in my JavaScript app.

The heart of this problem is the asynchronous call to the API. Because I need to associate documents with folders, and sub-folders with parent folders, I need to process each folder and wait for the response to get the new ID before processing sub-items.

Old school, this was done with callback (and I still use callback to this day). But in the interest of staying “modern” I took the ES2015 Promise approach.

Another thing to factor in is the loop through folders and items in the tree. I chose the for(let i; ..; ..) approach to pluck items out of the arrays in the tree. However, you can’t just call the api within the for loop because by the time an async finishes executing and you’re ready to process the next item,. the loop could have iterated on, changed the value of the iterator (i in this example) and hence the currently item in the array.

So you need to wrap the call the API in another function to localise the scope of the variables.

At the end of processing the tree I also need to tell the calling function everything is complete. Which means tracking the completion status of all promises in the loop and notifying the caller of overall completion only once all branches are finished (using Promise.all()).

Anyway, I created a fully working Pen at https://codepen.io/jsnelders/pen/LYVJQbG to demonstrate how this works.
I suggest you pop it open in CodePen itself to see the results – open the browser console (not the CodePen Console) to view debug output.

See the Pen
JavaScript (ES2015) – Handling Promises in a loop
by Jason (@jsnelders)
on CodePen.

JavaScript (ES2015) Promise error “Uncaught (in promise) {reject message}”

Debugging asynchronous code is difficult. Even Promises can become complex.

And once again my Golden Rule of Programming rings true: “if you think something should work but it doesn’t, you probably have a spelling mistake!

 

I’m working on a simple script to test JavaScript Promises – specifically, handling Promises in loops, and dealing with functions that both handle and return promises.
I’ll post about that later when I’m done.

For now, I just spent the last hour trying to figure out why I was getting a JavaScript console error Uncaught (in promise) processItems(Folder: 1): Reject caught (the part in italics is just a message returned in a reject(“processItems(” + title + “): Reject caught”)).

 

The console looks like this:

 

And the problem code is:

executeFolder(item, parentFolder) 
{
    let promise = new Promise(function (resolve, reject) {

        _this.asyncFunction(item)
        .then((resultItem) => {
            _this.processItems(item, resultItem).then(() => {
                resolve("executeFolder.then(" + parentFolder.title + ")");
            });
        })
        .catch( (e) => {
            reject("executeFolder.cathch(" + parentFolder.title + ")");
        });
    });

    return promise;
}

 

The problem is the line in bold: _this.asyncFunction(item).

I hadn’t defined the variable _this (I’d extracted this function out of another function which did have the definition).

All I had to do was define _this and the error resolved.

 

Once gain it was a spelling error (in this case not spelling anything at all).

I stopped feeling bad about these sorts of errors long ago. I’ve learnt over the years we (as developers) get a kind of blindness or tunnel vision when working on problems like this. Between having to hold the business problem, processing logic, nested functionality and all the other bits in our head, we can easily blank out what we later think was “staring us in the face”.

That’s where a good IDE comes in that can track unused variables.
I’m using Visual Studio Code which does identify unused variables (in fact, I noticed and removed one in the project no long ago) but for some reason it failed me in this instance.

Vue.js 2.x with global store and reactive component data sync

This is a basic test to show how you can use a global object as your primary data store in Vue.js, and use a watcher to trigger a function that builds secondary data sets filtered from the primary source to update the display in the Vue instance (or component).

In this way you can share data between the Vue instance and components (via the global object) and work with the data specifically need by a component while still responding to changes in the global store (e.g. if the global data is updated via a service class or AJAX call).

If the embed below is not working then view it on CodePen at https://codepen.io/jsnelders/pen/dyoJPrw.

 

See the Pen
Vue.js with global store and component reactive sync test
by Jason (@jsnelders)
on CodePen.

 

 

Cheap and Easy “Pipe Cleaner” USB, Headphone Cord & Electronics Cable Ties

I’m a big fan of Fly With Stella on YouTube and one of the tips she’s shared in travel organising is the Nite Ize Original Gear Tie.

Which look awesome and I want them!

The only problem – I’m located in the ass end of the world (Australia) and no-one here seems to stock anything like it. I can order on Amazon, but with normal delivery it’s going to take some time to arrive.

But today I had an inspired idea – I could use Pipe Cleaners! (otherwise known as Chenille Stems).

I actually had a pack in an old craft box, so I cracked it open, got out the wire side cutters, and cut a few pipes into 4 parts (each pipe is about 1 foot/30cm in length).

This is what I ended up with.

There you have it. One pipe cleaner cable tie.

And for about AUD$2.50 for a pack of 40, I can get up to 160 cable ties and colour code until my heart is content.

Don’t tell my wife but before this inspired idea I went to Howards Storage World and bought a 6-pack of BlueLound CableLip cable thingies for $14.95. They’re good, but I already think my pipe cleaners are better.

SMaRT Code Architecture

I’ve been thinking about code architecture in consumer grade software solutions and what I believe matters most.

As a result I came up with:

SMaRT Code Architecture

Which stands for Simple. Maintainable. Readable. Testable.

 

Simple: It’s easy to find (discover), understand and trace code during debugging and or enhancements. The simplest code is no code. Not always feasible. But reducing layers and reducing decomposition can help.

Maintainable: Developers should be able to (and not scared to) fix bugs and introduce enhancements. An unmaintained system suffers from entropy and can become “toxic” within the larger ecosystem.

Readable: Code is written for people to read, not computers. Everyone should be able to easily read and understand the code you wrote yesterday – from a 1st year novice to a 20 year veteran. Fancy or shorthand code works against the next person. Use white space. Write comments to assist in understanding intent. Old school statements are still valid.

Testable: Developers need to easily test their changes. If they cannot there is a lower likelihood of changes being made, and a higher chance of errors when they are.

 

Notice I haven’t mentioned anything about patterns or practices, APIs or languages features. Those are implementation details – how you implement as opposed to what is important.

What is important is code that makes it easy for people in the future to learn and touch the system.

Example of Being Tracked Online by Advertisers

Here’s an example of being tracked around the Internet that happened to me.

Yesterday I heard a product name on a podcast. I thought I recognised it so I looked it up (it was a sports bag my wife has).

In searching for it I visited the product page of an Australian seller (“The WOD Life”). At that point I remembered I actually bought the bag for my wife from that site a few years ago.

About 2 hours later I checked my emails and waiting for me was a new promotional email from the seller.
I haven’t received correspondence from them since I bought the bag.

My guess is, thanks to tracking cookies (advertisers, Google, etc.) I was tracked onto the site, which was then identified by an marketing company running campaigns for the seller, and they decided it was a good time to email me with a reminder to by more product.

 

A few years ago I came home from work to find my place had been broken into and I’d been robbed.

I felt violated by that experience.

Being tracked and targeted online like this holds the same feeling.