Visual Studio Code has many great features out-of-the-box, and supports a large community of extensions to add enhanced functionality.

Stack Overflow survey image showing VSCode's popularity (73.71% of respondents use it)

Using extensions can expand VSCode's available features and tools. With a majority of tools in one place, it allows for less context switching which has been shown to kill productivity.

I have tested out over 40 different extensions in the last year and refined a curated list of my favorites. These extensions boosted my productivity as a software engineer. I want to share this list with you to boost your productivity, too.

This list is designed to be language-agnostic with an emphasis on productivity. If you're interested in exploring my recommended extensions to customize the style of your editor, you can find more details in this article.

VSCode Extensions We'll Cover:

• Better Comments

• Bookmarks

• Code Spell Checker

• CodeSnap

• CodiumAI

• Error Lens

• Git History

• GitLens

• GitHub Copilot

• Icons Themes

• Indent Rainbow

• Live Share

• Multiple Cursor Case Preserve

• Path Intellisense

• Peacock

• Prettier

• Project Manager

• Tabnine

• TODO Highlight

• Todo Tree

In this article, I will cover all of these extensions in greater detail and advise on how they can elevate your levels of efficiency as a developer.

Better Comments

Better Comments helps you strengthen the comments in code. Code comments are beneficial for readability, and providing explanations or context for future reference. Leaving good code comments can save others and yourself time in the future.

Supported features include the ability to categorize the annotations from alerts, writing queries, making a TODO list, and showing highlights. There is an extensive list of supported languages.

Lines of code that are commented out are styled to be dark gray with a text strikethrough, emphasizing their exclusion and signaling that they should be removed.

Styled code comments with Better Comments.

Bookmarks

Bookmarks allows you to bookmark positions in your code. These lines are noted with a blue bookmark icon. Bookmarks can be organized and named to allow for quick reference.

All of the bookmarks can be found in a dedicated sidebar section. This is a great tool to improve navigation, and to help you spend lest time searching for references.

Bookmarks displayed in blue with a bookmark icon next to the line number.

Code Spell Checker

Code Spell Checker lives up to its name. It provides a basic spell checker to find and fix spelling errors throughout your codebase. Misspelled words are indicated with a squiggly underline. It is available in many languages.

This is one of my personal favorite extensions. I have caught and fixed so many typos thanks to this one.

This image displays how Spell Checker detects and corrects spelling errors.

CodeSnap

CodeSnap is used to snap a screenshots of code. It can come in handy for sharing code snippets with ease.

To snap a shot of your code, use (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for CodeSnap. Then select the area of your code to screenshot, adjust the width, and click the shutter button. You can also take a snapshot by selecting code, right clicking, and selecting CodeSnap.

There are websites that can do this, however, having these tools right in your editor allows for less context switching to boost productivity.

Sample React code snippet created with CodeSnap.

CodiumAI

CodiumAI is a free AI-powered code toolkit. It supports features like code autocompletion, chat, enhanced search, and suggestions.

AI has become a major player in improved developer productivity. Imagine spending half the time writing tests, allowing you to spend more time on other crucial, creative tasks.

When it comes to testing, CodiumAI excels. It can analyze code and generate meaningful tests and comprehensive test suites.

CodiumAI generating a test suite based on a section of Python code.

This is a relatively new extension and that has been rapidly gaining popularity. Languages supported are Python, JavaScript, TypeScript, Java, Go, and others.

CodiumAI's autocomplete functionality used to create functions based on natural language prompts.

Error Lens

Error Lens improves highlighting of errors, warnings, and other language diagnostics. This is a great debugging and error-prevention tool to have.

Errors will not go unnoticed with this extension. Error and warnings are made prominent by highlighting the entire line, along with the related message printed inline.

Error Lens identifying an error, notifying that there is a missing semicolon and a syntax error.

Spend less time sourcing errors, as clicking on an an annotation routes you directly to the corresponding line of code.

There is support for multiple languages which makes it a valuable for developers working in projects in different languages. You can also configure the appearance and behavior of errors and warnings.

Git History

Git History is an extremely useful extension for version control with Git (the extension has 10 million installs, so it's clear that it's popular). This extension allows you to explore the detailed history of your Git repository directly from the VSCode interface. You can view file history, git log, and perform comparisons.

It provides an interactive and visual representation of commit logs, branches, and file changes over time. This extension provides a more accessible and uncomplicated experience working on version-controlled projects.

Git History is being used here to create a tag on a specific commit.

GitLens

GitLens is the most robust Git tool, with so many features bundled into one extension. It has a strong open-source community, and it continues to have active support with frequent updates.

With GitLens, you can gain powerful insights into your repositories directly in VSCode. Annotations are integrated throughout the editor, displaying tons of Git information.

One of the most useful features of GitLens is the blame annotation. This allows you to see who wrote the code, and how long ago.

GitLens traces the line of code to a commit created 4 years ago from the user (You).

Another feature that I have found to be handy is the interactive rebase editor. This provides a nice user experience when performing rebases.

GitLens' example of an interactive rebase. Commits can be picked, edited, dropped, squashed, and more.

GitHub Copilot

GitHub Copilot has gained a ton of traction over the last two years. This product has revolutionized the coding experience by leveraging advanced AI capabilities. It not only assists with completing code snippets but also acts as an AI pair programming copilot, offering intelligent suggestions for entire lines or blocks of code.

The strength of GitHub Copilot lies in its integration with OpenAI, tapping into a vast repository of open-source code to provide contextually relevant and practical suggestions. This not only accelerates coding speed but also serves as a valuable learning tool, exposing you to diverse coding patterns and best practices.

This is not a free tool. A subscription can run you $10 per month as an individual, or it can be purchased for teams at a discounted rate. If you'd like to try out GitHub Copilot, there is currently a 30-day trail offer.

GitHub Copilot using intelligent autocomplete on a function.

There are also some free alternatives which you can read more about here (and I talk about Tabnine below as well).

Icon Themes

While VSCode includes default icons, incorporating icon packs provides an excellent means to boost productivity and infuse a visually appealing aesthetic into the editor.

Icon packs provide a more extensive and visually recognizable set of icons compared to the defaults. This can make it easier for visual distinction between file types and folders. It can build intuitive recognition and reduce the cognitive load when navigating through files.

There are plenty of options when it comes to choosing an icon pack. Three popular choices are the Material Theme Icons, vscode-icons, and file-icons.

I find that a good set of icons improves the overall readability of the file explorer. I enjoy the added benefits of the upgraded visual experience.

Side-by-side comparison of my editor with the vscode-icons (left) and Material Icon Theme (right) enabled. There are icons for file types and folders that indicate what they contain.

Indent Rainbow

Indent Rainbow is a colorful extension that you can use to make indentation comprehensible, aiding in maintaining well-organized and properly indented code.

Each indent is marked with a different color, alternating between 4 different colors. The colorful representation of the structure is not only useful but also visually appealing. This extension is particularly useful for languages that rely heavily on indentation such as YAML or Python.

If you aren't fond of the default set of colors, you can configure your own!

A side-by-side comparison of two styles from Indent Rainbow. The one on the left shows the lines of the indent in vibrant color and the other shows the entire indention in a muted tone.

Live Share

Live Share is a collaborative development extension, enabling real-time sharing.

The Live Share header in the extension marketplace. There are 15 million installs.

This extension helps you facilitate productive teamwork. Unlike traditional pair programming sessions, Live Share lets you work together while retaining your own editor preferences. Each person has their own cursor, and you can follow each others' cursors around the codebase.

With Live Share, there is no need to clone repositories or encounter conflicts when working off of a shared branch. Context is immediately gained from the environment when entering a session.

Multiple Cursor Case Preserve

The Multiple Cursor Case Preserve extension is a productivity-boosting tool that aids in rapid code editing.

I have personally experienced the frustration when targeting multiple variable names throughout a file for renaming, and inadvertently overriding casing when making a change.

Targeting multiple variables with the same word but different casing, and updating them all from 'element' to 'node' with the casing remaining in tact.

Tip: Multi-Line Editing in VSCode

Take advantage of these Mac keyboard shortcuts for multi-line editing:

• Cmd + D: Quickly select a word and press it again to extend the selection to sequential occurrences.

• Alt + Shift + Up/Down: Create multiple cursors above or below your cursor. Use Cmd + Right/Left to navigate each cursor to the line end or start, and Cmd + Left/Right to reach the start or end of a word.

• Alt + Up/Down: Move the current line up or down. Combine with Shift + Up/Down to select and move multiple lines simultaneously, streamlining your code editing process.

By preserving the case, it streamlines the editing process by reducing the manual effort required to fix casing.

Path Intellisense

Path Intellisense is a file path productivity tool. It has intelligent auto-completion that dynamically suggests file paths and directory names as you type. It can minimize errors due to incomplete or wrong file paths.

Path Intellisense used to auto-complete a link element's 'href' attribute with a style.css file.

It is compatible with a variety of programming languages. But if you are using npm, the npm Intellisense plugin is recommended specifically.

Peacock

Peacock is a personal favorite of mine, as I love to add more color to my editor. Not only does it outline your editor in color, but it also allows you to configure specific colors for each workspace which is very beneficial when context switching.

Peacock comes with a range of preselected colors, while also allowing for user-defined custom colors.

A stack of editors from Peacock showing the various default color options. The color is applied to the sidebar and bottom section in the editor window.

Prettier

Prettier is a widely embraced code formatting tool with over 40 million installations. It provides you with a shared solution to improve code readability.

This opinionated code formatter enforces consistent style throughout a codebase. With support for various programming languages, Prettier automatically analyzes and formats code according to a set of standardized rules, this eliminates debates over coding style and enhancing collaboration.

Prettier's integration with "format on save" in VSCode vastly increases productivity by automatically applying formatting, preventing any time spent on manual formatting concerns.

You've probably already heard about Prettier, nonetheless it's important to mention as one of the top extensions to have.

Project Manager

Project Manager is a simple tool to set projects (aka Favorites) and access them. It includes a dedicated side bar section to manage all of your projects in one place.

This is great tool when you have a lot of projects to manage and need to frequently switch between them. It comes with a set of handy features like the ability to further organize projects by tags.

Project Manager's example of how to create a tag by selecting 'Edit Tags', choosing from the previously created tags, and where to view them under Favorites.

Tabnine

Tabnine is an free AI coding assistant. It can help to increase your productivity by providing real-time code completions.

Beyond basic code completion, it takes in the context and offers further relevant suggestions. This can be particularly useful when working in intricate codebases demanding extensive code exploration.

Tabnine's example of autocompletion. The autocomplete is used to quickly create Python and TypeScript code.

Tabnine supports many programming languages. Adaptive learning is used to adjust to the developer's coding style over time. There is an added focus on privacy, as code is never stored or shared.

As I mentioned above, Tabnine is often compared to as a GitHub Copilot alternative, and worth trying out at no cost. Keep an eye out on this one as they add new competitive features.

Support for this extension is strong with continual updates. Chat functionality is soon to come, allowing you to ask questions and generate anything from code to documentation.

Example from Tabnine of how the new AI chat functionality will look. The user asks for a weather API and Tabnine responds with several examples.

TODO Highlight

Never forget another to-do with TODO Highlight. It emphasizes TODOs and other annotations with a colorful highlight.

It is common to encounter a TODO or FIXME relic of the past in a codebase that has been around for awhile. These can be hard to remember to remove. TODO Highlight is here to help remind you to not leave a trail.

Wether your theme is light or dark, TODO Highlight will put a spotlight on annotations.

Some JavaScript code with a TODO highlighted in yellow along with a FIXME highlighted in pink.

Todo Tree

Todo Tree offers a quick and organized solution to uncover annotations. It searches your workspace for TODO and other annotations and organizes them in a file tree.

It occupies a specific section in the side activity bar. Clicking on each TODO opens the related file, where the TODO is highlighted for immediate attention.

The TODO Tree sidebar section with a selected to-do of 'TODO Fix this!'. In the code to the right, the 'TODO' is highlighted with a bright purple color.

Summary

VSCode stands out for its expansive extension ecosystem, making it a go-to choice for developers. Having thoroughly tested an array of popular extensions, I've carefully curated this list of my top recommendations.

This list is a great place to start from and build on. I highly encourage you to implement routine trial periods with new extensions. Delve into other extensions through the Visual Studio Code extension search.

Recognizing the importance of minimizing cognitive load for sustained focus, each extension on this list is chosen with the goal of reducing unnecessary mental burdens like context switching. Make VSCode become your main hub of development needs, and you an improved focus mode along with other benefits.

I hope these recommendations allow you to optimize your workflow, minimize distractions, and ultimately boost your productivity!

The at() method takes an integer value and returns the item at that index. The value can be either a positive or negative integer. Negative integers count back from the last item in the array.

Syntax of the at() Method

Here's the syntax – it's pretty simple:

arr.at(index)

How JavaScript's at() Method Works

How does this method work, you might ask? The at() method takes a single parameter, which is the index of the element to be accessed.

The index should be a positive or negative integer value. Negative integers will count backward from the last item in the array, and positive integers will count forward from the start of the array.

For example, given the following array:

const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];

To access the first element in the array (remember that arrays in JS are zero-indexed), you can do this:

const color = rainbow.at(0); // red

To access the last element in the array, you'd do this:

const lastColor = rainbow.at(-1); // purple

In the example above, the -1 index is treated as an index relative to the end of the array, and will point to the last element in the array.

What is relative indexing?

Relative indexing is a technique used to index elements or values by their position in relation to a reference point or another element.

Rather than relying on fixed numerical indices that assign specific positions to elements, relative indexing enables you to indicate positions based on the relationship with other elements, adapting dynamically. Relative indexing has become a much easier solution with at().

Example Use Case

Arrays are used to store collections of data. Developers often need to retrieve specific elements from an array to use their values to display information. When processing data, you might want to modify, transform, or perform calculations on specific data points in an array.

Let's consider a real-world example where the at() method could be useful. Imagine you are building a weather app that displays the forecast for the upcoming week. You have an array containing the weekly temperatures:

const temperatureForecast = [70, 71, 75, 80, 77, 88, 90];

The first item in the array is the temperature for today and it's followed by the next 6 days. You want to display the upcoming temperature for tomorrow. To access the temperature for tomorrow, you'd want to get the value at an index of 1.

Here's how you can use at() to access the temperature:

const temperatureForecast = [70, 71, 75, 80, 77, 88, 90];

const tomorrowsTemperature = temperatureForecast.at(1);

console.log(`The high for tomorrow is ${tomorrowsTemperature}°F.`); 
// The high for tomorrow is 71°F.

When presenting data to users, there are many scenarios where you want to display the most recent or latest item from an array. This is common in news feeds, chat applications, or activity logs.

Try it out:

I encourage you to play around with this method to learn by doing. I've created a CodePen playground. Change the values in the array and the values passed into at() , try to see if you can guess the result:

Problems the at() Method Solves

Prior to its introduction, to access array elements by their index, you had to perform manual calculations.

It has been a common practice to use an array's length property to calculate the number of items in the array, and then to subtract from the length to target an index. For example, to access the last element of an array, you can use array[array.length - 1].

slice() vs the length property vs at()

Let's look at a comparison between three different methods that let us access items in an array. Notice the amount of code required for each, the readability of the code, and the complexity between the methods.

const animals = ["panda", "zebra", "penguin"];

// with slice()
const animal = animals.slice(-2, -1); // 'zebra'

// with the length property
const animal = animals[animals.length - 2]; // 'zebra'

// with at()
const animal = animals.at(-2); // 'zebra'

Using the at() method, accessing the last element of an array is as simple as array.at(-1) . This method provides a far more readable and intuitive solution.

Readability is enhanced with at() method's syntax, because it's intention is well described with the word "at". For example, array.at(0) can be read as "the array at the index of zero".

In contrast, an alternative like array.slice(0, 1) lacks the same clarity. Improved readability reduces cognitive load and makes code easier to understand at a glance.

Additionally, adopting the at() method aligns well with other array methods like map() and filter(), fostering a cohesive and functional programming-oriented coding style throughout your code.

The at() method mitigates risk by providing a straightforward way to access elements. With at(), it is less likely to make indexing mistakes or off-by-one errors that commonly arise when working with numerical indices. The method's clear syntax reduces the likelihood of introducing bugs related to index manipulation.

The at() method performs bounds checking automatically, meaning it ensures that the index is within the valid range for the array. The length method does not offer any bounds checking. With bounds checking if an out-of-range index is provided, the method will return undefined without throwing an error.

Performing manual checks with length tend to be error-prone, and more difficult to debug. While manual indexing allows you to access elements, it requires a longer code sequence to do so.

The need to calculate indices, perform subtraction, and handle edge cases adds extra characters and complexity to your code. This approach can introduce subtle errors can be challenging to identify and fix.

For accessing a single element, using .slice() introduces unnecessary complexity. The method requires specifying both the start and end indices, which is inconvenient when you only need one element.

The use of array.slice() is best for scenarios where you want to retrieve a range of elements. If you only need a single element, using array indexing directly is more efficient.

While slice() and length have their uses, the at() method provides a compelling solution for array element access.

Browser Support for at()

Because this method is new, it is not supported by all browsers just yet. Currently, it is supported by all major browsers like Chrome, FireFox, and Safari. It is not yet supported by Edge, or Internet Explorer (r.i.p).

Keep in mind, you can use a polyfill to handle browsers without this capability. Due to the support from major browsers already, it shouldn't be long until full support is available.

Summary

The addition of at() is a valuable asset to JavaScript's set of Array methods. It allows for a simple and straightforward way to access array elements using an index value.

With at(), you can provide a positive or negative integer value to retrieve an element in an array, counting forward or backward respectively. It is supported by all major browsers such as Chrome, Firefox, and Safari.

Give this new method a whirl and share your thoughts. Happy coding!

In this article, we'll explore the differences between the two along with their history and best practices.

Syntax

• The single colon : refers to pseudo-classes
• The double colon :: refers to pseudo-elements

Pseudo-Classes vs Pseudo-Elements

Pseudo-,pseudo%2D,names%20of%20isomers%20(pseudoephedrine).) itself means false, unreal, or fake. The prefix pseudo-, is used to reference classes or elements that are not "real". Not real in this context means not a DOM (Document Object Model) element, but instead a virtual element created for styling purposes.

To form a better definition, let's discuss the difference between pseudo-classes and pseudo-elements in greater detail.

What are Pseudo-Classes in CSS?

Pseudo-classes (:) are primarily used to style an element that's under various states. When referring to state, this includes the condition or user behavior, for example hover, active, focus, or disabled. States generally involve user interaction.

For example, we can target all links to have a text color of lavender when the user hovers over the link.

a:hover {
  color: lavender;
}

Inspect the Chrome DevTools and you will find other examples of state. Here you can also test out and debug applied styles based on the state (and the related pseudo-class used) by toggling them on and off.

There are over 50 types of pseudo-classes, so I highly suggest looking over all of the possibilities.

Test out the code example below, inspect the pseudo-classes, and try to add a new one.

Functional Pseudo-Classes

Another variation of the pseudo-class type is the functional pseudo-class. These function calls take in a parameter of a selector-list to match elements.

Unlike other types of pseudo-classes that target static state such as hover, these can dynamically target events and user interactions.

:is()
/* The matches-any pseudo-class matches any element that matches any of
the selectors in the list provided. */

:not()
/* The negation, or matches-none, pseudo-class represents any element 
that is not represented by its argument. */

:where()
/* The specificity-adjustment pseudo-class matches any element that
matches any of the selectors in the list provided without adding any 
specificity weight. */

:has()
/* The relational pseudo-class represents an element if any of the 
relative selectors match when anchored against the attached element. */

What are Pseudo-Elements in CSS?

Pseudo-elements (::) are used to style specified parts of an element. They can be used to target the first letter or first line. Or they can be used to insert content before or after the element.

It's worth getting familiar with this index of pseudo-elements to learn more about the available keywords.

As an example, to create a large first letter of a paragraph, you can do that using first-letter like this:

p::first-letter {
  font-size: 9em;
}

Another common example of a pseudo-element is to use ::before or ::after to insert content before or after the targeted element.

Test out the code example below to see how you can use ::before and ::after to create lines before and after a text element.

The Difference between : and :: in CSS

As a takeaway, remember that there is a key difference between a single and double colon. Most importantly that : refers to pseudo-classes and :: refers to pseudo-elements.

History of the ::

Historically, there was only a single colon : to both define pseudo-classes and pseudo-elements. The :: notation was introduced with CSS3 as a way to differentiate the two.

Pseudo-elements and pseudo-classes are related concepts that provide different ways to style an element. As a result, the slight variation in syntax between them is logical.

Using only the single colon syntax is not recommended for both, as it has become deprecated. Browsers will still accept : for both currently, for backwards compatibility reasons. Since it's possible to encounter either syntax, understanding the historical context around this is beneficial.

Best Practices for using : vs ::

The best practice when choosing which colon syntax to use is to stick with current standards of CSS3. Following these standards will improve the maintainability of your codebase, so it's helpful to keep and enforce guidelines around this for your codebase.

It will also help to future-proof your CSS. As we discussed, browsers currently accept the single colon syntax for both, but that may not always be the case. By using the double-colon syntax for pseudo-elements, you can help prevent errors and bugs in the future as CSS continues to change and evolve.

The syntax distinction between the two offers readability improvements. This clarifies what you are targeting, and is helpful when dealing with intricate selectors that involve multiple pseudo-elements and pseudo-classes together.

Wrapping Up

Understanding the difference between a pseudo-class and a pseudo-element is essential for writing maintainable CSS. Pseudo-classes are used to target state. Pseudo-elements are used to target specific parts of an element.

I hope this article helped to understand the differences between pseudo-classes and pseudo-elements, along with the history, and best practices when using them.

Happy styling!

If you want to learn more about CSS, you can find me on Twitter.

Dependencies can become outdated over time due to bug fixes, new features, and other updates. The more project dependencies you have, the harder it is to keep up with these updates.

Outdated packages can pose a threat to security and can have negative effects on performance. Up-to-date packages prevent vulnerabilities. This means that periodic dependency checks and updates are important.

How to Keep Dependencies Up-To-Date

Now, you could go through each individual package in package.json one by one to change the version and run npm install <package>@latest to get the latest version. But this isn't going to be the most efficient method.

Imagine if you had 20 or more packages that could use a version bump. Instead, you should develop a workflow to periodically check for new versions before the number of outdated dependencies grows and it becomes increasingly harder to upgrade.

Here's a workflow that helps me stay on top of updates: first, discover which packages need to be updated and how far behind the versions are. Next, choose to update packages individually or together in a batch. Always test out the updates to ensure breaking changes haven't occurred.

I prefer to perform major version updates individually. With major updates, you're likely to encounter breaking changes. It's much easier to undo or address code changes in relation to one package compared to many.

In this article, I will go over methods to inspect and upgrade dependencies in detail.

How to Use the npm outdated Command

npm outdated

This command will check every installed dependency and compare the current version with the latest version in the npm registry. It is printed out into a table outlining available versions.

It is built into npm so there are no additional packages required to download. npm outdated is a good place to start for an overview of the number of dependency updates required.

• Current is the current version installed.
• Wanted is the max version of the package according the semver range.
• Latest is the version of the package tagged as latest in the npm registry.

With this method, to install updates for every package, you just need to run:

npm update

Keep in mind that with npm update it will never update to a major breaking-changes version. It updates the dependencies in package.json and package-lock.json. It will use the "wanted" version.

To obtain the "latest" version append @latestto individual installs, for example npm install react@latest.

How to Use npm-check-updates

For an advanced and customizable upgrading experience, I'd recommend npm-check-updates. This package can do everything npm outdated and npm upgrade can do with some added customization options. It does require a package installation, however.

To get started, install the npm-check-updates package globally:

npm install -g npm-check-updates

Then, run ncu to display packages to upgrade. Similar to npm outdated it will not apply any changes.

ncu
Checking package.json
[====================] 12/12 100%

 @testing-library/user-event    ^13.5.0  →  ^14.2.1
 @types/jest                    ^27.5.2  →  ^28.1.4
 @types/node                  ^16.11.42  →  ^18.0.1

Run ncu -u to upgrade package.json

To upgrade dependencies, you just need to run:

ncu --upgrade

// or 
ncu -u

Resource: npm-check-updates

• Red = major
• Cyan = minor
• Green = patch

This updates dependencies in only the package.json file and will select the latest version even if it includes a breaking change. With this method, npm install is not run automatically so be sure to run that afterward to update package-lock.json.

To choose your preferred version type, run ncu --target [patch, minor, latest, newest, greatest].

How to Use Interactive Mode with npm-check-updates

ncu --interactive

// or 
ncu -i

Interactive mode allows you to select specific packages to update. By default, all packages are selected.

Navigate down through each package and use space to deselect, and enter when you are ready to upgrade all of the selected packages.

Resource: npm-check-updates

There are several ways to elevate the interactive npm-check-updates experience.

ncu --interactive --format group

This command groups and organizes packages into major, minor and patch releases.

Resource: npm-check-updates

npm-check-updates provides other useful tools such as doctor mode which installs upgrades and runs tests to check for breaking changes.

I highly suggest taking a look at the documentation overall to learn more about all this package has to offer. The project is well-maintained along with a climbing weekly download rate of ~294,467 at the time of writing this article.

Summary

Getting in the habit of regularly updating your dependencies will help your apps' security and performance.

Both npm outdated and npm-check-updates are useful tools to check for packages that could use a version bump.

I suggest trying both of these out to see which provides a better developer experience.

I hope these methods help along the path of updating!

This article provides an overview of truthy and falsy values and how to convert values into booleans in JavaScript.

JavaScript Truthy and Falsy Values Cheatsheet

Boolean(false);         // false
Boolean(undefined);     // false
Boolean(null);          // false
Boolean('');            // false
Boolean(NaN);           // false
Boolean(0);             // false
Boolean(-0);            // false
Boolean(0n);            // false

Boolean(true);          // true
Boolean('hi');          // true
Boolean(1);             // true
Boolean([]);            // true
Boolean([0]);           // true
Boolean([1]);           // true
Boolean({});            // true
Boolean({ a: 1 });      // true

It's best to start by first understanding which values are interpreted as truthy or falsy by JavaScript. It's also important to understand implicit coercion compared to explicit coercion.

Implicit coercion is initiated by the JavaScript engine and happens automatically. Explicit coercion is performed by manually converting values, and JavaScript provides built in methods to handle this.

The !! Operator

!!value

You may already be familiar with ! as the logical NOT operator. When using two in succession (!!), the first ! coerces the value to a boolean and inverts it. For example !true would result in false. The second ! reverses the previous inverted value, resulting in the true boolean value.

This is generally a preferred method, as it has better performance. A potential con to this method is a loss in readability, mainly if other developers are unfamiliar with how this operator works.

const value = "truthy string"
!!value // true

Here is an example breaking this down into steps:

const value = "truthy string";

!value; // false
!!value; // true

Below is a list of example output with the !! operator.

// Falsy Values

!!'' // false
!!false // false
!!null // false
!!undefined // false
!!0 // false
!!NaN // false


// Truthy Values

!![] // true
!!"false" // true
!!true // true
!!1 // true
!!{} // true

The Boolean() Function

Boolean(value)

Boolean() is a global function that converts the value it's passed into a boolean.

You shouldn't use this with the new keyword (new Boolean) as this creates an instance of a Boolean that has a type of object. Below is an example of the correct use of this function.

const value = "truthy string"
Boolean(value) // true

TL;DR

There are two methods to cast a value to a boolean in JavaScript.

1. !!

!!value

2. Boolean()

Boolean(value)

const finalThoughts = "I really enjoyed writing this article. Thanks for reading!"

!!finalThoughts // true
Boolean(finalThoughts) // true

I find that personalizing my IDE helps me enjoy the time I spend using it more. I want to share that same spark of joy with you all, and have been searching for and testing out the best extensions to download. And many of these will help you be more productive.

This article goes beyond theming extensions, so I suggest picking out a theme first. Or try out my current favorite theme, Dracula Refined.

Indent Rainbow

Indent Rainbow is a great tool to add color and productivity to your setup. It can also help serve as an alignment check for your indentation. Each indentation is given an alternating rainbow color.

Indent Rainbow

Bonus: Indent Rainbow Palettes

Want custom colors in your Indent Rainbow? Check out Indent Rainbow Palettes by Evondev.

After installing Indent Rainbow, install this extension and follow the outlined steps to select a new gradient palette.

Indent Palettes1

Indent Palettes2

Bracket Pair Colorizer

This will add rainbow colors to brackets, and matching brackets will have the same color. This extension has saved me a number of times when looking for a missing or extra bracket.

The Bracket Pair Colorizer is another popular extension with over 4 million installs.

Depreciation Notice for 2022

This extension has recently become depreciated. This is because of upgrades to VSCode allowing for a bracket pair colorization setting. This can be toggled on with "editor.bracketPairColorization.enabled": true in your user settings.

The improved performance of this feature makes it a better choice, but if you'd prefer to not edit your user settings, I'd suggest looking for extensions that handle this for you such as Bracket Pair Colorizer or Rainbow Brackets.

Colorize

Colorize visualizes color variables by highlighting them with their color value. This is a handy timesaver for translating hex codes and variable names.

Photo Credit: Colorize

Peacock

Peacock provides optional window colors. It is great for managing multiple workspaces. It can be easy to forget which workspace you are in when jumping between similar windows, but not with the bright colors provided by Peacock. You can even customize workspace colors.

Photo Credit: Peacock

VSCode Icons

Adding icons can help when navigating through your folders. VSCode Icons has an extensive library of icons matching a variety of file types.

For example, you can easily see if you are selecting a TypeScript file or a JavaScript file based on the icon. It also adds an extra touch of color and detail to folder structures.

Photo Credit: vscode-icons

TODO Highlight

TODO Highlight will customize your list of TODO comments and make them pop with color. It can be easy to overlook commented out code, but not with this extension, as it is difficult to overlook text that is bright orange.

TODO and FIXME are built in keywords. You'll have the option to customize the color of these and add additional keywords.

Photo Credit: TODO Highlight

TL;DR

Here is a condensed list of the extensions mentioned in this article.

• Indent Rainbow
• Bracket Pair Colorizer
• Colorize
• Peacock
• VSCode Icons
• TODO Highlight
• Dracula Refined Theme

I hope these extensions will bring a rainbow of colors to your VSCode, too.

This question comes from designers and developers alike. So, I figured it was time to write about it to create awareness and demystify the role.

This article will help you understand what a UX Engineer is, what their duties are, the required skillset, and it may even convince you to be come one yourself.

What Does User Experience Mean?

Before we jump into the role of UX Engineer, let's take a brief moment to define User Experience.

Most people are familiar with UI, which refers to the user interface. The user interface is most commonly the screen in which user is interacting with, for example a website or application.

UX relates to the all encompassing experiences the end user has while using a product or service, UI included.

The significance of UX is undeniable. In The User Experience Team of One, author Leah Buley notes,

“UX is a force for good. In an increasingly technological world, designing products with real people in mind helps us make sure that technology integrates in our lives in a human way. It’s a voice of reason, arguing that products and technology can support and even enrich our fundamental humanity.”

Who are UX Engineers?

A UX Engineer (UXE) is the bridge between design and development.

Icon credit: Noun Project

Engineers

UXE's are engineers first, with a working knowledge of design. Front end development skills are a prerequisite. A UXE cares deeply about the user experience and is heavily involved in impacting it.

"Developers write the code and build the systems that make the experience real. That moment when a flat concept on a page becomes a working, functioning, interactive thing is like making life. It’s incredibly rewarding. It also enables them to see and understand how it will feel and function for the enduser." – The User Experience Team of One

Designers

UXEs can be particularly useful in conceptualization stages of design. They are able to help designers understand what is feasible and how much engineering effort it may take to achieve.

Some UXE's will contribute prototypes, wireframes, and design mockups. The amount of true design work can vary from company to company.

It is common for a UX Engineer to be working within a Design System. For example, my role at D2iQ includes maintaining a design system and component library.

Advocates

A UXE will need to have empathy for both sides and be able to advocate for design or development. They may be required to push back on either side as an advocate. This is the reason they are considered the bridge between design and development.

A UXE may even need to advocate for UX itself within their organization, to create awareness and to build support for their work. This can be achieved through setting up a peer-to-peer learning community, lunch and learn meetings, and other methods to share and educate others.

You may find varying definitions of what a UX Engineer means. The lines are often blurred between UI Engineer, UX Engineer, and Design Technologist. Much of the role can depend on the company and what are the needs they want to fill with that role.

You may thrive as a UXE if you enjoy:

• Front end engineering
• Styling with CSS specifically
• Design thinking
• Occasionally flexing some design skills
• Participating in UX Research
• Working with Design Systems
• Creative leeway

We'll dive deeper on the skills required as a UXE which may clarify what exactly it entails.

Confusion within the Front End

I wanted to make a note on the confusion between UI Engineer, UX Engineer and Front End Engineer. These are often assumed to be the same role. That may or may not be the case, depending on what is in the job description. However, there are some notable differences.

UI Engineer is the most similar to a Front End Engineer. They're not entirely the same historically, but the line between the two has become blurry. They will work on the technical side of building the user interface. Working on the UI can easily start to bleed into UX topics as they are tightly coupled, which may be where the confusion arises.

On the other hand, a UX Engineer is the more design forward of the two. A UXE is a technical role that is intrinsically involved in the user's experience. They would be the one to consider "how is the user interacting with this button?", "how can I make it absolutely clear what this button does", and "how can I provider the user a better experience when using this button?"

On the other hand, a UI Engineer would generally ask themselves how to best match the design to engineer an efficient button.

This is of course glossing over the depths that each role can go into. UI Engineers can become more involved in UX if they take a conscious efforts to impact it.

The job description of UX Engineer might align more with what you would see under Design Technologist or Design System Engineer.

Overall, the term Front End can cover a broad range of individually complex topics and skillsets, which is why we are starting to see the need to define more specific roles within Front End. UX Engineer is among the more recent positions to become defined based on this.

Required Skills for a User Experience Engineer

There are many skills that a UXE may possess that aren't limited to Front End development and design. Again, much of the role can be dictated by the company’s definition of the role and responsibilities.

Below are some of the key skills that would be most commonly applicable and helpful to have.

Technical Skills

Front End Development. This includes knowledge of HTML, CSS and JavaScript. You should also know popular JavaScript libraries such as React. This could additionally include testing, debugging, build tools, and dependency managers.

CSS Specialists. It is important to note that the role requires in-depth knowledge of CSS. This could entail CSS architecture or working with preprocessors like Sass and Less. It's beneficial to have experience with CSS-in-JS libraries such as Styled Components and Emotion.

UI/UX Design. This may be a mix of design related skills from prototyping to UX Principles to wire-framing. UXE’s may produce low-fidelity or high-fidelity design mockups. It is helpful to have experience with design tools such as Figma, Sketch, or InVision. Design systems could also be lumped into this category. It's valuable to understand the benefit of design systems, and knowing how to enforce the design standards in the UI.

Storybook. Storybook is a tool to help engineers build, test, and display UI components. Working with Storybook will require additional niche technical know-how specific to this tool. There is a likelihood that if you are working with a design system and component library, the documentation is utilizing Storybook.

Accessibility. To excel in this role, you need to understand accessibility guidelines. Caring for users means inclusive design. Products should not limit the type of user. Products should account for all users. Having technical skills to test and improve the accessibility of applications will be extremely beneficial.

Responsive Design. Designers may only be able to mock up several screen size views such as mobile, tablet, and desktop. You'll be implementing those designs. There are gaps between each screen size mock which will require technical and decision making skills and for a seamless transition. These are the types of problems you will encounter and they impact the user experience.

Less Technical Skills

Empathy. This is a crucial skill for a UXE. They need to understand users in order to improve their experience. This includes having a passion for understanding how people think. Caring deeply about the impact you can have on user experiences will take you far in this field.

Communication and Collaboration. UXEs are required to do a lot of cross-functional communication. They can speak with users, designers, developers, product owners, and stakeholders. They are held responsible for translations between design and engineering teams. There is a likelihood of contributing to documentation which uses written communication skills. This could include documenting style guides, components, or guides for users.

Creativity. It may seem obvious that this would be a great skill to have based on the design factor of the role. UXE's have the opportunity to find creative solutions especially when design and development need to meet in the middle.

User Experience Principles and Theories. Understanding the psychological aspect of UX will come in handy when making design decisions. Learning psychological heuristics is essential. The Laws of UX site is a great overview of these.

Summary

As design and engineering processes mature, there is a need for roles like UX Engineer, UX Researcher, UI/UX Designer, UI Engineer, and more, each with their own set of advanced skills.

By collaborating, these roles are able to come together to create top-notch experiences for users. The need for many of these roles has been increasing in recent years, especially with the recognization of the importance of design systems within organizations.

UX Engineers fill a void that can be beneficial to the handoff between design and development. We will continue to see an increasing amount of UX Engineering roles surface as the significance of this role becomes further recognized.

I love the blend of skills that I am able to use daily as a UXE. If you are a creative individual who wants to work closer with design teams this may be the perfect role for you too.

If you would like to learn more about working as a UX Engineer, feel free to reach out on Twitter.

In CSS, you can use the isolation property to create a new stacking context. Here's what that looks like:

.container-for-new-stacking-context {
  isolation: isolate;
}

The default value for isolation is auto, which is a bit more nuanced as a stacking context can be created – but it depends on the properties of the element and if they require it.

You can also set the value to inherit, initial, revert, or unset.

Using isolation: isolate; is a definitive way to create a new stacking context.

What is the Stacking Context?

In CSS, the stacking context quite literally allows for HTML elements to be stacked with their starting position based upon a base element that provides context.

Elements are placed along an imaginary matrix with a x-axis and y-axis. There is also a z-axis, in which element can be placed in front of or behind each other. The z-index property is commonly used to place elements along the z-axis.

Keep in mind that when the root HTML element is rendered, it comes along with a root/global stacking context.

There are many ways to create stacking contexts within the global stacking context. One common way is to use position: relative with z-index.

Using position: sticky or fixed works, but will take elements outside of the flow layout and require additional properties for desired placement.

You can also use transform, clip-path, or filter to facilitate stacking. To see all the ways the stacking context can be formed, read more on MDN Web Docs.

Stacking contexts can contain subsequent inner stacking contexts, and continue on to nest further. That may be a bit too Inception-like to conceptualize, so let's get down to why this is useful.

The Z-Index Black Hole

Using z-index can be hard to maintain. You have to be really cautious about where you are using it and what values you are supplying to it.

Design systems can help to solve issues related to this. Creating a set of reusable values and documenting in what cases they should be used can be really helpful. For example, setting aside your highest variable values for modals and other items that will always take over the entire page.

But most of the time we're really just trying to have our style appear the way we want it to. Which can mean prescribing arbitrary z-index values and continuing to bump up those values until they work.

I've encountered the infamous z-index: 999999; many times. Tracking down these random values and creating new order can become arduous. This can lead to issues that are hard to debug.

The higher numbers you begin to use, the deeper and deeper you can go into the black hole and the harder it is to get back out of it later on.

Keep It Simple with Isolation Instead

Setting the isolation property to isolate is a simple one-liner that can create a new stacking context without reaching for z-index to place elements in front of each other.

You can use isolation on statically-position elements and it will not affect children elements. It's a great way to create an isolated base for containing children elements within. The isolation property is also widely supported.

Just as a reminder, here's the syntax for that:

.container-for-new-stacking-context {
  isolation: isolate;
}

To Sum Up:

Setting isolation: isolate; will create a new stacking context for children elements when applied to a top-level element.

If you found this article helpful, feel free to reach out on Twitter @ui_natalie. Happy stacking!

Resources

• MDN Web Docs - Isolation
• MDN Web Docs - The Stacking Context
• What The Heck, z-index??

The optional chaining operator ?. takes the reference to its left and checks if it is undefined or null. If the reference is either of these nullish values, the checks will stop and return undefined. Otherwise, the chain of access checks will continue down the happy path to the final value.

// An empty person object with missing optional location information
const person = {}

// The following will equate to undefined instead of an error
const currentAddress = person.location?.address

Optional chaining was introduced in ES2020. According to TC39 it is currently at stage 4 of the proposal process and is prepared for inclusion in the final ECMAScript standard. This means that you can use it, but note that older browsers may still require polyfill usage.

Optional chaining is a useful feature that can help you write cleaner code. Now let's learn how we can use it.

Optional Chaining Syntax

In this article, I will mostly be covering how to access object properties. But you can also use optional chaining as a check on functions.

Here are all of the use cases for optional chaining:

obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call

Source: MDN Web Docs

Example:

const value = obj?.propOne?.propTwo?.propThree?.lastProp;

In the code snippet above, we are checking if obj is null or undefined, then propOne, then propTwo, and so on. Optional chaining lives up to its name. In the chain of object property access we can check that each value is not undefined or null.

This check can be extremely useful when accessing deeply nested object values. It has been a highly anticipated feature and it keeps you from having to do numerous null checks. It also means you don't need to use temporary variables to store checked values, for example:

const neighborhood = city.nashville && city.nashvile.eastnashville;

Here we can check that nashville is a property within city before attempting to access the inner neighborhood property of eastnashville. We can convert the above to use optional chaining, like so:

const neighborhood = city?.nashville?.eastnashville;

Optional chaining simplifies this expression.

Error Handling with Optional Chaining

Optional chaining is particularly useful when working with API data. If you're not sure whether an optional property exists, you can reach for optional chaining.

A Word of Caution

Don't use optional chaining at every opportunity. This could result in silencing errors by having undefined potentially returned in many places.

It's also important to remember that the check will stop and "short-circuit" the moment it encounters a nullish value. Consider this for the subsequent properties in the chain and what will occur if they are not able to be reached.

It's best to use this check when you know that something may not have a value, such as an optional property. If a required value has a nullish check on, it may be silenced with undefined returned instead of returning an error to alert of this issue.

Optional Chaining + Nullish Coalescing

Optional chaining pairs well with nullish coalescing ?? to provide fallback values.

const data = obj?.prop ?? "fallback string";

const data = obj?.prop?.func() ?? fallbackFunc();

If the item to the left of ?? is nullish, the item to the right will be returned.

We know that if any ?. check equates to a nullish value within the chain, it will return undefined. So we can use our nullish coalescing to respond to the undefined outcome and set an explicit fallback value.

const meal = menu.breakfast?.waffles ?? "No Waffles Found."

Wrapping Up

Optional chaining is a handy recent feature of JavaScript that lets you check for nullish values while accessing property values. You can also use it with the ?. operator.

I hope this article has helped to introduce or clarify optional chaining. Happy coding!

Margin collapse occurs when vertically adjacent margins of block-level elements collide to share a general margin space. The size of this shared space is dictated by the larger number margin.

You can visualize this as an arm wrestling match, where the larger margin will take over and win.

It is important to clarify what it means to be the larger number.

If a margin of 70px collides with a margin of 90px, the 90px margin will win. If a margin of -70px collides with a margin of -90px, -90px will win.

Although a negative number is technically a smaller value on a mathematical scale than a positive number, with margin collapse instead it is helpful to remember that a higher numerical value will hold the higher significance.

Collapsing is relevant regardless of the unit of measurement such as pixels, rem, em, or percentages. These units can be calculated against each other even with mixed use.

In various scenarios this interaction can become problematic. For example, if you are creating a reusable component that is expected to have a set consistent margin space surrounding it, regardless of placement.

Inconsistencies may occur depending on, where that component is placed as the margin may interact with another. Fortunately, there are precautions we can take to avoid this.

Margin collapse can cause unexpected behaviors in your layout. You'll likely see applied spacing that doesn't seem to match up with what you expect.

Instead of trying to increase margins by adding extra pixels until the spacing is correct, you can learn the inner workings of the margin property so you can recognize when collapsing can occur.

Margin Collapse Code Example

<div class="one">Block-Level Element One</div>
<div class="two">Block-level Element Two</div>

div.one {
    margin-bottom: 30px;
}

div.two {
    margin-top: 100px;
}

Negative Margins

Negative margin values are also susceptible to margin collapse. They work as positive margins do, where the greater number will take over.

The result of a -30px margin and a -100px collision will result in a margin space of -100px.

Mixing Negative and Positive margins

When a negative and a positive margin interact, the pixels will be added together, cancelling each other out. Here is where some math will factor in.

For example, a margin of -30px and a margin of 10px will result in a shared margin space of -20px. Alternatively, a margin of 10px and a margin of -1opx will result in no margin spacing (-10 + 10 = 0)!

How to Recognize Margin Collapse

There are different scenarios when margins can collapse. Review the comparisons below to gain a better grasp on when margin collapse can happen.

Margin Collapse

• Elements are block-level, such as div or p
• Vertical margins will collapse
• Collapse will only occur in Flow Layout, which is the default layout mode
• An "invisible" element like a <br/> will not stop margin collapse

No Margin Collapse

• Horizontal sibling elements will not collapse
• No margin collapse in Flex, Grid, or Positioned Layout
• Margin collapse can stack and create a domino effect of siblings effecting each other
• A <hr/> element between vertical siblings can prevent collapsing

How to Inspect your Margins

The Inspect feature in your browser is a great tool to get a visual on your margins, padding, and other aspects of the Box Model. This will help you to see if margins are shared.

The Box Model

How to Avoid Margin Collapse

First, remember that margins should preferably be used to increase the distance between sibling elements, not to create spacing between a child and a parent. If you need to increase space within the Flow layout, reach first for padding if possible.

Also, consider the layout mode when adding a margin. Take note of which layout mode you are in and watch out for margin collapse whenever in normal Flow Layout.

To add spacing between siblings and avoid margin collapse altogether, consider using Flexbox or Grid and utilizing their gap functionalities.

You can also consider using a component library aligned with the spacing guidelines of a particular design system. Or you can use an open-source library that has already resolved margin collapse issues. You can also setup a system of design for you team where you can use consistent margin and padding throughout your UI.

Finally, try to develop a sense for when margin collapse is occurring. Now that you are more aware of this behavior, you will start to notice it more frequently.

Use your trusty browser inspector tools when your margin collapse radar is activated. If you find it, remove it to prevent repeated use of the style as it may be reused and cause issues in the future.

Resources on Margin Collapse

If you'd like to do a deeper dive on margin collapse, I highly suggest reading The Rules of Margin Collapse by Josh W. Comeau.

I also recommend his comprehensive course CSS for JavaScript Developers if you'd like to fill in any gaps in your CSS knowledge and learn more about topics such as this.

Summary

Margin collapse may be a CSS behavior that you have previously experienced and didn't yet had a definition for, or you might not have had all the tools available to avoid it.

This tricky aspect of the margin property can often go overlooked and wreak havoc through expected behaviors. Understanding these effects can help to improve your UI and reduce the number of bugs in your CSS.

Happy coding!

You might feel uncertainty when encountering the Git commit message, unsure how to properly summarize the changes you've made and why you've made them. But the earlier in your career you can develop good committing habits, the better.

Have you ever wondered how you can improve your Git commit messages? This guide outlines steps to elevate your commit messages that you can start implementing today.

This article assumes you already understand basic Git workflow. If not, I suggest reading through the Git Handbook.

It is also important to note that you should follow your team's conventions first and foremost. These tips are based on suggestions based upon research and general consensus from the community. But by the end of this article you may have some implementations to suggest that may help your team's workflow.

I think git enters a whole other realm the moment you start working in teams -- there are so many cool different flows and ways that people can commit code, share code, and add code to your repo open-source or closed-source-wise. — Scott Tolinski, Syntax.fm.

Why should you write better commit messages?

I challenge you to open up a personal project or any repository for that matter and run git log to view a list of old commit messages. The vast majority of us who have run through tutorials or made quick fixes will say "Yep... I have absolutely no idea what I meant by 'Fix style' 6 months ago."

Perhaps you have encountered code in a professional environment where you had no idea what it was doing or meant for. You've been left in the dark without code comments or a traceable history, and even wondering "what are the odds this will break everything if I remove this line?"

Back to the Future

By writing good commits, you are simply future-proofing yourself. You could save yourself and/or coworkers hours of digging around while troubleshooting by providing that helpful description.

The extra time it takes to write a thoughtful commit message as a letter to your potential future self is extremely worthwhile. On large scale projects, documentation is imperative for maintenance.

Collaboration and communication are of utmost importance within engineering teams. The Git commit message is a prime example of this. I highly suggest setting up a convention for commit messages on your team if you do not already have one in place.

The Anatomy of a Commit Message

Basic:

git commit -m <message>

Detailed:

git commit -m <title> -m <description>

5 Steps to Write Better Commit Messages

Let's summarize the suggested guidelines:

1. Capitalization and Punctuation: Capitalize the first word and do not end in punctuation. If using Conventional Commits, remember to use all lowercase.
2. Mood: Use imperative mood in the subject line. Example – Add fix for dark mode toggle state. Imperative mood gives the tone you are giving an order or request.
3. Type of Commit: Specify the type of commit. It is recommended and can be even more beneficial to have a consistent set of words to describe your changes. Example: Bugfix, Update, Refactor, Bump, and so on. See the section on Conventional Commits below for additional information.
4. Length: The first line should ideally be no longer than 50 characters, and the body should be restricted to 72 characters.
5. Content: Be direct, try to eliminate filler words and phrases in these sentences (examples: though, maybe, I think, kind of). Think like a journalist.

How to Find Your Inner Journalist

I never quite thought my Journalism minor would benefit my future career as a Software Engineer, but here we are!

Journalists and writers ask themselves questions to ensure their article is detailed, straightforward, and answers all of the reader's questions.

When writing an article they look to answer who, what, where, when, why and how. For committing purposes, it is most important to answer the what and why for our commit messages.

To come up with thoughtful commits, consider the following:

• Why have I made these changes?
• What effect have my changes made?
• Why was the change needed?
• What are the changes in reference to?

Assume the reader does not understand what the commit is addressing. They may not have access to the story addressing the detailed background of the change.

Don't expect the code to be self-explanatory. This is similar to the point above.

It might seem obvious to you, the programmer, if you're updating something like CSS styles since it is visual. You may have intimate knowledge on why these changes were needed at the time, but it's unlikely you will recall why you did that hundreds of pull requests later.

Make it clear why that change was made, and note if it may be crucial for the functionality or not.

See the differences below:

1. git commit -m 'Add margin'
2. git commit -m 'Add margin to nav items to prevent them from overlapping the logo'

It is clear which of these would be more useful to future readers.

Pretend you're writing an important newsworthy article. Give the headline that will sum up what happened and what is important. Then, provide further details in the body in an organized fashion.

In filmmaking, it is often quoted "show, don't tell" using visuals as the communication medium compared to a verbal explanation of what is happening.

In our case, "tell, don't [just] show" – though we have some visuals at our disposal such as the browser, most of the specifics come from reading the physical code.

If you're a VSCode user, download the Git Blame extension. This is a prime example of when useful commit messages are helpful to future developers.

This plugin will list the person who made the change, the date of the changes, as well as the commit message commented inline.

Imagine how useful this could be in troubleshooting a bug or back-tracing changes made. Other honorable mentions to see Git historical information are Git History and GitLens.

Conventional Commits

Now that we've covered basic commit structure of a good commit message, I'd like to introduce Conventional Commits to help provide some detail on creating solid commit messages.

At D2iQ, we use Conventional Commit which is a great practice among engineering teams. Conventional Commit is a formatting convention that provides a set of rules to formulate a consistent commit message structure like so:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

The commit type can include the following:

• feat – a new feature is introduced with the changes
• fix – a bug fix has occurred
• chore – changes that do not relate to a fix or feature and don't modify src or test files (for example updating dependencies)
• refactor – refactored code that neither fixes a bug nor adds a feature
• docs – updates to documentation such as a the README or other markdown files
• style – changes that do not affect the meaning of the code, likely related to code formatting such as white-space, missing semi-colons, and so on.
• test – including new or correcting previous tests
• perf – performance improvements
• ci – continuous integration related
• build – changes that affect the build system or external dependencies
• revert – reverts a previous commit

The commit type subject line should be all lowercase with a character limit to encourage succinct descriptions.

The optional commit body should be used to provide further detail that cannot fit within the character limitations of the subject line description.

It is also a good location to utilize BREAKING CHANGE: <description> to note the reason for a breaking change within the commit.

The footer is also optional. We use the footer to link the JIRA story that would be closed with these changes for example: Closes D2IQ-<JIRA #> .

Full Conventional Commit Example

fix: fix foo to enable bar

This fixes the broken behavior of the component by doing xyz. 

BREAKING CHANGE
Before this fix foo wasn't enabled at all, behavior changes from <old> to <new>

Closes D2IQ-12345

To ensure that these committing conventions remain consistent across developers, commit message linting can be configured before changes are able to be pushed up. Commitizen is a great tool to enforce standards, sync up semantic versioning, along with other helpful features.

To aid in adoption of these conventions, it's helpful to include guidelines for commits in a contributing or README markdown file within your projects.

Conventional Commit works particularly well with semantic versioning (learn more at SemVer.org) where commit types can update the appropriate version to release. You can also read more about Conventional Commits here.

Commit Message Comparisons

Review the following messages and see how many of the suggested guidelines they check off in each category.

Good

• feat: improve performance with lazy load implementation for images
• chore: update npm dependency to latest version
• Fix bug preventing users from submitting the subscribe form
• Update incorrect client phone number within footer body per client request

Bad

• fixed bug on landing page
• Changed style
• oops
• I think I fixed it this time?
• empty commit messages

Conclusion

Writing good commit messages is an extremely beneficial skill to develop, and it helps you communicate and collaborate with your team. Commits serve as an archive of changes. They can become an ancient manuscript to help us decipher the past, and make reasoned decisions in the future.

There is an existing set of agreed-upon standards we can follow, but as long as your team agrees upon a convention that is descriptive with future readers in mind, there will undoubtedly be long-term benefits.

In this article, we've learned some tactics to level up our commit messages. How do you think these techniques can improve your commits?

I hope you've learned something new, thanks for reading!

Connect with me on Twitter @ui_natalie.

This article will provide you a deeper understanding of what empathy is and how to better integrate it into software development.

What is a soft skill?

Soft skills are non-technical abilities such as communication, logical thinking, problem solving, teamwork, and empathy. These emotional intelligence skills are valuable as a Software Engineer.

It is very hard to learn and unlearn skills such as these. You cannot necessarily read a book or watch a tutorial and immediately have improved communication skills. Some of these skills are innate. They are built over the years and take time and practice to develop.

Soft skills can play an important role within the hiring process. The good news is that you can work to further develop these skills.

What is empathy and why is it so important?

“Empathy is seeing with the eyes of another, listening with the ears of another and feeling with the heart of another.” – Alfred Adler

Empathy is a deeply human emotion. In the sci-fi novel, Do Androids Dream of Electric Sheep? empathy is the main detectable trait between androids and humans.

Empathy lies at the heart of emotional intelligence. It has the ability facilitate our awareness of our personal emotions, handling interpersonal relationships and creating stronger bonds (Source).

Empathy vs. Sympathy

It is vital to distinguish between sympathy and empathy. Sympathy can arise in the form of feeling bad for someone else's situation – “Sorry for your loss.” Empathy is sincerely visualizing yourself in the shoes of the person who has lost something.

"Empathy is a choice and it's a vulnerable choice. Because in order to connect with you, I have to connect with something in myself that knows that feeling." – Dr. Brené Brown

One of my first gigs out of university was in a Customer Service role for a health insurance provider. We were required to go through a training program before speaking with members over the phone.

I distinctly remember the emphasis they put on understanding empathy and how it is not the same as sympathy. They pulled up YouTube and put on an animated short with audio from a talk by Brené Brown.

This video has stuck with me and helps me remember the importance of empathy.

In the video, Dr. Brown mentions the four qualities of empathy outlined by nursing scholar Teresa Wiseman:

1. Perspective taking, the ability to see the world as others do
2. Staying out of judgement in these perspectives
3. Recognizing the emotions in others and relating
4. Communicating with that emotional understanding

How to apply empathy as a Software Engineer

Empathy for Users

Having empathy for users can take many forms. Empathy can come in to play when thinking about what your users' needs and wants are. Jumping into their perspective can give you an entirely new outlook.

Accessibility requirements are essential and require a good amount of empathy in a similar fashion. Any type of user should be able to use your application.

Envision yourself navigating and operating a website only able to use limited keys such as tab, spacebar, and enter. Users with visual impairments that are unable to use the keyboard and mouse can use screen readers to audibly navigate through web pages. Test out your site with a screen reader to shine a new light on this perspective.

The best way to ensure that your application is accessibility-friendly is to be compliant with the standards set by Web Content Accessibility Guidelines (WCAG) along with Section 508. Study the guidelines, become familiar with the requirements, and implement them into your code.

Now imagine seeing the world as a color deficiency individual. You may be unable to decipher an error messages from a success message if you are red/green color deficient. This falls under Level AA 3.3.3 - Error Suggestions, and there are a wide array of situations to consider under this criterion alone.

To rate the accessibility (also known as a11y) levels of your website or app, run it through an audit by Lighthouse. The audit utilizes the a11y guidelines for testing and displays a rating out of 100. It provides direct feedback regarding what you can change to improve your score. Additionally, there are scores for "Best Practices", "SEO", and "Performance".

UX/UI Designers are no strangers to using an empathetic skill set. UX Researcher is a role almost entirely based on this idea. Designers remind themselves who they are creating for.

Creating Personas is a great way to put yourself in the place of users. Personas are boiled down versions of users, including their behaviors, needs, and learned experiences. Personas are created by collecting data from users and summing up correlated traits.

According to Interaction Design Foundation,

"Collecting insights about the social and cultural backgrounds of the users, their psychological traits, their feelings of frustration, and their goals will help you develop a broad knowledge of the users."

This all may seem front end-oriented, but empathy can be applicable for back end engineers as well. Envision how you’d like your data to be stored, how secure you would like that information to be. What information would you like saved to save yourself precious time in the future (or what would cost you lots of time, in case of a security breach)?

It all comes back to imagining yourself in the place of others. Actors must be exceptional at empathizing! What better way to serve your users than to imagine yourself as them.

Empathy for Teammates

Teamwork and empathy go hand in hand. Strong relationships can be built upon a foundation of listening and understanding, without passing judgement.

Having an understanding of what your teammates are feeling can facilitate supporting each other and grow together as a team. Allow teammates to vent to you with the understanding that you are not necessarily here to fix the situation but that you can listen (without judgement).

Use emotional empathy to absorb and mirror the feelings others are going through. Imagine a teammate being strongly reprimanded for a mistake they made. What emotions would you be feeling if that were you instead?

Having this emotional comprehension will allow you to better communicate with them. It may be the very support they need at that time. Emotional empathy can move you to lend a helping hand.

Empathy can become your superpower when dealing with difficult interpersonal situations with coworkers. Try to observe different perspectives and why someone may be acting out of anger, fear, or sadness.

Perspective taking (using cognitive empathy) is a wonderful method to navigate contentious situations in the workplace.

Imagine your coworker has been working extremely hard the past few years to get a promotion, only to find out after their review that they received neither a raise nor promotion. You could use cognitive empathy to take the perspective of your coworker to recognize how disappointing that may feel if it were you.

Empathy is speaking to others how you'd like to be spoken to. It requires mindfulness. Think of empathy as a tool the next time you encounter a difficult situation at work, but also in your day-to-day conversations.

"Between stimulus and response there is a space. In that space is our power to choose our response" – Viktor E. Frankl

Empathy for Future Engineers

There are many ways we can display compassion toward future engineers when they have to interact with code we’ve written.

Many engineers have found themselves in legacy projects, entering a brand-new codebase, or even looking back at an old personal project and they feel a sense of logical bewilderment. More so if there was nothing left behind to explain some of the complexities and logical decisions that were made.

If you could put yourself in the shoes of that future engineer looking at your code, what would you want to see left behind?

The best way to implement this is to write readable code. You can do this by limiting abstractions, avoiding complex logic, and using clear naming conventions.

Do your best to break things down and organize your files. There are plenty of great tips to help you write cleaner code in Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin.

Documentation is also a kindness to future readers. Whether that is crafting an informative README file or writing how-to's. Leaving useful comments in your code and detailed commit messages can also be helpful. Most of us can’t recall changes we committed months ago ourselves.

Leaving behind a trail of textual breadcrumbs can make the life of the next person who stumbles across it that much easier – and that person might even be you!

Empathy for Clients

Empathy can help you connect with your clients and assist in delivering the best product to them. Communication comes largely into play here, which goes beyond words involving your tone, body language, and delivery.

You can use empathy to fully visualize the brand and comprehend what the client themselves may be facing on their end. It can be a useful tool to convince others of your point of view if you can first understand theirs.

Utilize cognitive and emotional empathy when dealing with difficult situations with clients. Picture why they might be upset to have their product delayed, frustrated users or monetary loss.

Have curiosity when working with clients. Go above and beyond to learn more about the client. If you come from a place of curiosity, it will iterate your interest and a deeper understanding of the product.

Use your best listening skills when speaking with the client. Don't miss the details and your client will feel heard, appreciated and more satisfaction with the product.

Empathy for Leadership

Some of the finest leaders are the ones who remember what it was like to work their way up from the bottom or who can foresee themselves in other positions. Empathetic leaders establish strong connections with the individuals under their direction.

The best managers I have had in the past have displayed a concern for what I was feeling and what I may need.

Empathy means understanding impostor syndrome and checking in on the mental wellness of your employees. It's much easier to open up to someone who you feel 'gets it'. When you feel understood and respected, you’re more inclined to work hard and give back a mutual level of respect.

Leaders should have a strong level of emotional intelligence. Who wouldn't want a manager that seems approachable, self-aware, nonjudgemental, and understanding?

Emotional intelligence can be developed with conscious efforts. Being able to describe your own emotions will give you the ability to better resonate with what others are feeling.

Instead of saying "I'm feeling anxiety", go deeper. Anxiety is not quite an emotion, so what does it actually feel like? The heart of the emotion may really feel like sadness, shame, guilt, frustration, or embarrassment. Practice self awareness and labeling the emotions you are feeling. This is not isolated to those in leadership, it goes for everyone.

Cultivating empathy can give you the power to help motivate those around you.

"Empathy does not require that we have been through the same thing as another person, simply that we meet them where they are now." – Andy Puddicombe, former Buddhist monk and Headspace co-founder

Summary

One of the best skills you can develop as an engineer is empathy. You can work on this skill by trying to establish an unbiased point of view in all communications.

Practice shifting your perspectives and observe the changes in your interactions. Improving this soft skill will be a catalyst for positive change at and outside of work.

I hope this article has provided insights on situations where you can start integrating more empathy into your day-to-day routines.

Thank you for reading!

I am a writer passionate about programming, user interface engineering and design. Find me on Twitter and LinkedIn.

_Cover Photo by Josh Calabrese on Unsplash_