DEV Community: Jesse M. Holmes

Who is using Nx?

Jesse M. Holmes — Fri, 14 Jan 2022 15:39:48 +0000

I'm using Nx with React and Nest to build an application for work, and I love it. Are you doing anything interesting with Nx?

Dependency Injection

Jesse M. Holmes — Mon, 23 Aug 2021 12:53:51 +0000

Morgan's Flowers

Morgan owns a flower shop, and it is important that they take delivery of new stock each day so that they can continue to supply their customers.

Without Dependency Injection

Ashley pulls into the loading dock in a truck filled with fresh flowers. Morgan accepts the delivery and says, "Thanks, Ashley! I will see you tomorrow!"

Morgan has decided to include Ashley as a valuable part of her system. What happens if Ashley doesn't deliver the flowers tomorrow? What if Ashley changes jobs, gets fired, or just isn't as reliable as Morgan expected? Because Ashley is built into Morgan's business system, Morgan is stuck. To make a change for their business, they are going to have to rebuild the entire supply chain again, interview other drivers, change delivery methods, adjust schedules, etc. Do you see the problem here?

With Dependency Injection

Ashley pulls into the loading dock in a truck filled with fresh flowers. Morgan accepts the delivery and says, "Thanks!" Morgan doesn't know Ashley, and they don't care if Ashley is driving the truck tomorrow. Morgan is only interested in taking delivery of the flowers, not who delivers them. In fact, if Morgan is dissatisfied with the delivery service, they can order the same flowers from a new delivery service.

Did you find this analogy helpful?

I'd like to write a series of posts like this one that I can refer back to when teaching. There is no code included in this example. Is that an issue? Is there a topic you'd like to tackle in this manner? Let me know!

Playlists and albums I've been listening to while I code, 2021 edition

Jesse M. Holmes — Mon, 31 May 2021 02:19:51 +0000

I plan to grow this list over the next couple of weeks. Enjoy!

Playlists

I need a personal laptop

Jesse M. Holmes — Fri, 21 May 2021 13:16:11 +0000

If you were going to buy a laptop for development, were operating system agnostic, and only required the machine to be fast and have the ability to virtualize, what would you look for? I've considered a late-model mac just so I can get into Swift (I'm not totally convinced about Swift on Windows yet), but I could just get a mini instead.

I've worked with two machines in the past that I loved, a $3,000 Dell XPS 15 9550 and a $2,000 HP EliteBook G5 with half the RAM of the Dell. Both ran very smoothly.

TIA!

Sorting Strings in JavaScript with localCompare

Jesse M. Holmes — Wed, 18 Nov 2020 15:08:20 +0000

Take this list of strings:

let names = ['Lyra', 'Iorek', 'pantalaimon', 'Asriel', 'Serafina']

We want to sort it alphabetically. Naturally, we can check the MDN for Array.prototype.sort(), and we find that names.sort() will do the job pain-free.

A week after you've submitted your work, a ticket is opened and assigned to you: Users are complaining that their names aren't in the correct order

After taking a look, you see that Lee has submitted his name in lowercase. Of course he did.

let names = ['Lyra', 'Iorek', 'pantalaimon', 'Asriel', 'Serafina', 'lee']
console.log(names.sort())
// Result ['Asriel', 'Iorek', 'Lyra', 'Serafina', 'lee', 'pantalaimon']

As you can see, users with lowercase names are sorted at the end. They're in order by themselves, but Product may not get your sense of humor when you explain it to them.

The reason lower case names are at the end has to do with their ASCII values. If you check the chart, you'll see that lowercase letters have larger numerical ASCII values. Time to google javascript sort strings ignore case

Now we've been introduced to a new method, localeCompare. This method is packed with options that are available in all modern browsers. Check the usage chart at the bottom of the MDN page—some mobile browsers don't have full support for the options.

Here's the finished sort:

let names = ['Lyra', 'Iorek', 'pantalaimon', 'Asriel', 'Serafina', 'lee']
console.log(names.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base'})))
// result: ['Asriel', 'Iorek', 'lee', 'Lyra', 'pantalaimon', 'Serafina']

I'll take one of everything …

Jesse M. Holmes — Thu, 29 Oct 2020 10:38:27 +0000

This morning on Things I Saw in Revenue Generating (Legacy) Code

Wait, so this modal is displaying an iframe that bootstraps the entire angularjs application, including the microfrontend container written in react, just to show a control for uploading a file? Cool, cool.

Tell me about something interesting you've seen in code recently!

There is more than one way to make your code readable

Jesse M. Holmes — Mon, 15 Jun 2020 16:53:37 +0000

Let's say you find the following code:

  useEffect(() => {
    const generateId = (acc: number, curr: string) => 
      acc += cur.charCodeAt(0)

    if (id === 0) {
      let x = profileId.split('').reduce(generateId, 0)
      setId(x % 8 + 1)
    }

  },[profileId])

What do we know about this effect?

It runs when the profileId changes and if some other id is equal to zero.
The profileId is converted from a string to a string array.
The string array is reduced using a generateId function that returns (acc += cur.charCodeAt(0)) % 8 + 1, whatever that is.

If a less experienced developer finds this in a React component, they may be confronted with a few obstacles:

How comfortable are they with .reduce()? What are acc and cum?
What is x, and why are we setting the other ID to whatever x is?
What is the intent of the effect? Why is it needed?

A more experienced developer, perhaps even the developer who wrote this code, will face similar obstacles. How can we write this code so that someone can understand what is going on right away? Here are a few attempts.

Comment your code, and use variable names that reveal their intent

Variable are things, and we should name those things well! Call them what they are! It's not an ID, it's an Avatar ID. This would be an improvement even without the comment block. I prefer to think of .reduce() as having state, explained beautifully by Joel in under 5 minutes:

04:58

Minute JavaScript - Array's reduce method

JavaScript Joel ・ Jun 8 '20 ・ 1 min read

#javascript #video

An informative comment or comment block causes no penalty to performance, and you won't lose cool points for writing one. I promise the developer reading your code would rather understand what is going on than being impressed by your one-line function.

If you are fortunate enough to be mentoring junior developers with some frequency, there is also no penalty for leveraging the community for the bits of the JavaScript developers don't touch every day.

  /**
   * Generate the avatar id
   * 
   * 1. convert licensingProfileId from string into string array
   * 2. (reducer) sum the ascii code for each character
   * 3. (reducer) mod by 8 for the 8 possible avatars
   * 4. (reducer) add 1 to generate the possible id
   *
   * Learn more about .reduce():
   * MDN: (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
   * Minute JavaScript: (https://dev.to/joelnet/minute-javascript-array-s-reduce-method-18h0)
   * 
   * .charCodeAt(0) returns the ascii code of a string character at the index passed in. 
   * In this case, item is always a single-character string.
   */
  useEffect(() => {
    const generateAvatarId = (state: number, item: string) => 
      state += item.charCodeAt(0)

    if (avatarId === 0) {
      let avatarId = licensingProfileId.split('').reduce(generateAvatarId, 0)
      setAvatarId(avatarId % 8 + 1)
    }

  },[licensingProfileId])

Shorter code isn't necessarily more readable

Remember when your math teacher would hand your assignments back covered in red ink with Show your work!! written across the top? Just me? Feel free to follow this strategy here as well. I personally wouldn't go as far as this example with transient/placeholder variables at each step.

  /**
   * Generate the avatar id
   */
  useEffect(() => {
    const generateAvatarId = (state: number, item: string) => {
      let asciiCode = item.charCodeAt(0) // Get a number from the string character
      state += asciiCode // state is the sum of the ascii codes
      return state
    }

    if (avatarId === 0) {
      // transform string to array so that we can use .reduce()
      let stringArray = licensingProfileId.split('') 
      // starting from 0, sum the ascii codes for each character in the profileId
      let asciiCodeSum = stringArray.reduce(generateAvatarId, 0)
      // There are only 8 avatars to choose from
      let selectedAvatar = asciiCodeSum % 8
      // Add 1 to assign an ID of 1–8
      let selectedAvatarId = selectedAvatar + 1
      setAvatarId(selectedAvatarId)
    }

  },[licensingProfileId])

Whatever combination of techniques you decide to use, the result will save questions and head scratching when the code has been stale for a while.

Justifying Tech Debt

Jesse M. Holmes — Tue, 19 May 2020 18:17:03 +0000

As requested, I just spelled out the business value of adding timestamps to logs. What's your story?

Who is using a PinePhone?

Jesse M. Holmes — Tue, 03 Mar 2020 16:11:28 +0000

I just paid off my iPhones. I'm used to being a few generations behind, and my relatively young iPhone X is going strong. I've been an iPhone user since the 3G, and I've never really considered making a change.

I came across something interesting on a Twitch stream last week, the PinePhone. From what I learned, it's a smart phone running on slightly dated hardware and a Linux operating system. Also, it's $119, just a few bucks shy of the $1,200 iPhone I would be upgrading to.

There are inexpensive components in the store to allow you to upgrade and configure as you like, and there is even a smart watch. I am intrigued to say the least.

So … have any of you fine people grabbed one of these? The searchbar says no one is talking about it, to say the least.

Currently I'm Thinking About Writing Currently

Jesse M. Holmes — Fri, 28 Feb 2020 13:27:12 +0000

Good morning, friends! Here's a brief message on clear and concise communication: currently, currently is one of the most overused words in our industry currently.

Tech recruiters are especially generous with this word.

Currently we are seeking a developer with 31 years of Angular experience
We are currently located in Annapolis
Currently we build software at the moment

I hope you are laughing at the third example—it's my personal favorite offender.

Consider these alternatives:

We seek a developer with 2 years of React experience, or experience in other libraries/frameworks and an interest in learning on the go.
We are in Annapolis Junction (Marylanders may get this reference)
We build software

Often currently is a placeholder word, like um. It can be used for emphasis or to imply upcoming changes, such as, "We have no openings currently." It creates a weakness where you want to be communicating in an active voice. Did you notice the subtle, bonus difference between these two sentences?

Currently we are seeking a developer
We seek a developer

Which one is more affirming, more in command?

If you don't find this advice helpful, or if you think that I'm gatekeeping, let me know in the comments.

Which algorithms are you using to build software for the web?

Jesse M. Holmes — Mon, 17 Feb 2020 15:26:57 +0000

Which algorithms are you using from your computer science days when building software for the web? How often do you utilize them in the front end?

I re-read this excellent article by Molly Struve, and these are the questions that came to mind. 🤯

Article No Longer Available

Fix This Before Commit!

Jesse M. Holmes — Fri, 17 Jan 2020 16:04:20 +0000

I saw this beauty today during a code review, and it brought a set of tools to mind:

{/* Fix this before commit  */}
{true && <Locations locationOptions={locationOptions} />}

ToDo Extensions for VS Code

There are a number of extensions that will take a comment like \\TODO: Fix this before commit and highlight it. If color coordination is your strong point, some of them allow you to customize your comment highlights according to the text so that, e.g., \\WONTFIX can be a pretentious shade of blue. Others will scan your code for such comments and compile them into a tree in your sidebar. Whatever your preference, just make sure you're utilizing a productivity tool that will catch your attention before your unfixed commit makes it to production. Hint: Writing tests aren't just a good idea—they're preventative in nature!

Obviously I am not the first to write about this:

TODO list in VSCode

Chuck ・ Aug 14 '19 ・ 2 min read

#vscode #productivity

Comment below with your favorites!