Sol Republic Shadow Wireless Headphones. Absolute Shit!

I’ve been using Sol Republic Shadow Wireless headphones for two and a half years now.

When I started with them they were great. Good battery life. Good sound. Good microphone. Rugged.

Now…

The microphone is shit – people tell me I sound like I’m talking through a long tube or I’m under water. And the earphones keep dying.

I’m on my 6th set and after just 2 months this one is fucked as well. My right earphone just stopped.

I buy my headphones from JB Hi-Fi and they come with a warranty. I even get the extended warranty. Which is a waste of money really because no set has survived the standard warranty yet.

So I’m going to get my replacement under warranty and that’s it. When the next one dies or I run out of warranty I’m changing brands.

It’s a shame because originally the Shadow was the perfect headphone for me. But given how much I use them reliability is more important than brand loyalty.

Sample of Static Header, Static Sidebar, Scrolling Content (CSS)

I’m working on what seems like a basic web layout: a static page header (stays in place when scrolling), static side menu (also stays in place) and the main column of content scrolls.

There’s a Codepen below that is “in progress” and shows it working. Bear in mind it’s not responsible yet – you need a screen >1024px wide. I’ll keep working on it to create a responsive option, so check back soon.

Something I want to point out is CSS frameworks can help with this situation. And they can hinder. I’ve taken to using the Bulma utility CSS framework lately and it’s great. But using its built in container/grid system I think (TBC) seems to be working against me. I also find myself needing to override the resets to un-reset certain typography decisions.

Sometimes it’s better to just do it yourself.

View the source code at https://codepen.io/jsnelders/pen/WNQrRbo.

See the Pen
Static Header, Static Sidebar, Scrolling Content
by Jason (@jsnelders)
on CodePen.

When people you respect start acting like dicks

There’s someone in my professional community I’ve listened to and respected for many years now.

I’ve consumed almost all their content. I listen to everything they have to say. I’ve engaged with them online. And I’ve even spent money on them.

But lately I’ve noticed a creeping from the shadows: they’re starting to act like a bit of a dick.

I’ve notice a bit of… how do I describe it – I think arrogance and hypocrisy are the words I’m looking for.

It’s nothing overt. More in they way they speak. What was once a consistent positive attitude and refusal to engage (at least publicly) with negative behaviour is now starting to turn. Where, on one topic they tell people “if you don’t like it, just ignore it”, on another topic they’re engaging in a fight they should just ignore.

While it’s not intolerable, it is a turnoff. To the point where every time I’ve wanted to engage with them online over the last few weeks I’ve decided against it, because I’m envisaging a hard-stop negative response from them rather than opportunity for a discussion.

And this is not good for the person, because they are their brand. They earn their living because of who they are – co ntinua leading authority in their domain.

And while they continue to be an authority, if long-time loyal “fans” (see Kevin Kelly) like me start turning away (perhaps even becoming vocal about their disappointment and affecting future listeners) then the authority will dilute their brand by turning away the people who matter most.

Sure, they won’t go out of business. But what was once the equivalent of Nike with a strong ambassador like Michael Jordan will become just another mall shoe store, selling a utility we all need but having none of the passionate following of something special.

I continue to listen to this authority figure. For now. But with me their reputation is already diminished. And if their attitude continues to aggravate me I have no problems tuning them out of my life (has they have themselves advised in the past). Life is too short for aggravation and there’s always someone else I can turn to for advice.

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.