DEV Community: Thomas Scharke

JetBrains' AI Assistant

Thomas Scharke — Thu, 30 Nov 2023 16:17:55 +0000

Since a few days, I have had the pleasure of working (and playing 😉) with JetBrains'

AI Assistant 💫

And I'd like to share my initial impressions and experiences with you.

Participation

Firstly, JetBrains' AI Assistant is currently in the Beta phase. To use the AI Assistant, you need a JetBrains account and must sign up for the waiting list.

I was fortunate 🍀 and got approved, so now I can participate in the Beta Phase of the AI Assistant.

To understand the registration process, how the AI Assistant looks within an IntelliJ product, its functionalities, and how it's applied within the product, you can read JetBrains' detailed and excellent documentation.

Usage

I mainly use the AI Assistant in my editor and thus directly on the code. This works through the so-called Context Actions. That means, with a keyboard shortcut at the corresponding code location, I can use these Context
Actions. These include the (new) point AI Actions with the following sub-points:

Write documentation
Explain Code
Suggest refactoring
Find problems in code
New chat using selection

I'd like to delve into the two AI Actions: Write documentation and Find problems in code and share my impressions with you as I've extensively used these features.

Note

There is also the option to access Context Actions through a light bulb 💡 using a trackpad/mouse. However, while programming, I prefer not to switch my input method. Therefore, I exclusively use keyboard shortcuts 😉.

AI Actions

Within Context Actions, I can select AI Actions and choose the Sub-AI Action Write documentation, which I'll now discuss.

Write documentation

Let's start with a spoiler, and I'll keep it short - I'm excited! 🥳

Please note that I'm in the context of my code, and the AI Assistant unfolds its strength here. If I use this AI Action on variables, functions and Functional-Components (React), the AI Assistant generates a comment or a complete and valid JSDoc "inline" - that is, above or at the variable, function, or Functional-Component. This includes descriptions of arguments/parameters, return values, and correct typing.

It's fascinating and saves me a lot of typing. 😎

I won't hide that it's helpful if variables, functions, etc., already have good and descriptive names. Also, using TypeScript helps for more concrete typing.

What do I appreciate about it?

That with this AI Action, the AI Assistant truly lives up to its name by enriching the code with comments and complete JSDoc. The initial results are already fitting. The AI Assistant remains prosaic, technical and almost beautifully concise about what it is/what it does. I can always adjust and change comments and JSDocs myself. Occasionally, I've done that to loosen up the sobriety a bit 😉—but that's my personal style.

Caveat

When "generating" documentation for Functional-Components, I've experienced a few times that I triggered the AI Action, but nothing happened 🤷‍ I'll attribute that to the Beta phase. 😃

It also happened that I had a different expectation 🤔. For example, I built a Functional-Component that only returns JSX and contains a kind of instruction in text form within </p>'s. Then I used this AI Action and hoped that the AI Assistant would provide me with fancy documentation. I had no idea how and what to write myself, but "Hey - that's what I have the AI Assistant for." 🤣 And what was the result? Of course, a valid JSDoc—no question. But the AI Assistant took the name of the Functional-Component only and summarised (once again) what I had written within the </p>'s 😮.

Mhhh… that wasn't what I expected. 😢

Conclusion

Yet I'm excited. Because I had no idea why and how I wanted to enrich the Functional-Component with documentation. And I also had no idea how I would describe it myself. I was probably waiting a bit for a miracle 💫? 🤔🤣

But the AI Assistant neutrally described and summarised what it finds—no more and no less.

Honestly, I couldn't have done it better myself. 🤣

And let me be honest: If I want to enrich something "nonsensical" with documentation, then it remains nonsensical. Regardless of whether I do it as a human or use the AI Assistant 🤣

Another AI Action that I use very frequently and is also within Context Actions is: Find problems in code.

Find problems in code

As the name suggests, the goal here is to find potential problems in the code by the AI Assistant or to let the AI Assistant detect them. And I think the latter describes it best. Because the AI Assistant actually acts like a peer, examining the code and sharing its "findings" with you.

Unlike the AI Action Write documentation, the analysis and "exchange" don't take place in the editor and thus on/in the code. Nor is any code changed or added. Instead, this AI Action switches to another IDE window, which is open in addition to the code editor.

It's important to note that this AI Action takes the complete code (from which the AI Action was triggered) copy-and-paste and simultaneously instructs the AI Assistant to look for potential problems in the code.

In other words: I could do this manually by starting a new conversation with the AI Assistant, manually copying and pasting the code, and simultaneously asking it to find potential problems in the code.

I find it successful that syntax highlighting is retained, and the AI Assistant also recognises the corresponding language and displays it to me.

And then it starts… 🎉

Here we go…

The code is analysed by the AI Assistant, and it immediately shares its "findings." It analyzes the code from top to bottom, describing the possible problems line by line (if any are found).

It describes, in text form, the identified reasons for the potential problem and also presents a solution as a code snippet.

Here, too, the AI Assistant remains prosaic, technical, and above all transparent. Through its description, I can understand its "thought processes" (can you call it that in an AI? 🤔). I always feel left in the clear and interpret its description as suggestions or ideas.

At no point did it feel like the AI Assistant was imposing anything on me or even wanting to be "right" 👍.

Exchange with the AI Assistant

Once its analysis is complete, the AI Assistant waits for me with a so-called User Prompt. In this, I can now engage in the "exchange" 😎

Since the potential problems are numbered, I can easily refer to the mentioned problems within the User Prompt without adding or duplicating long texts or code.

I shaped my "exchange" with the AI Assistant as if I were sitting across from a human peer. That is, I asked questions and had detailed explanations of analyses.

Transparency

It became clear to me that the AI Assistant really only "sees" the code I entered into the AI Action. Or rather, it only "sees" the code with which the conversation was started. That is, the AI Assistant does not use an AST and cannot analyse functions from other modules or other referenced modules (in the code).

If the AI Assistant comes across, for example, a function call that is not present in the code, its analysis and statement about it remain transparent. It mentions this and points out that no analysis of this function can be made because it has no insight. 😎

I'm torn here: In some situations, it would be nice if the AI Assistant could look "deeper" and thus analyse all referenced modules as well. And yet, I'm excited that this doesn't happen! 👏

Because that's exactly what makes it feel so transparent to me; the AI Assistant analyses what I show - nothing more.
😎

And now?

The "exchange" with the AI Assistant takes place exclusively through the User Prompt and thus in text form. I can enter free text and also write or copy-and-paste Code. Similar to User Prompts of other AIs, I can embed the code in backticks (`). The User Prompt of the AI Assistant even recognises when I write or copy-and-paste code, embeds it automatically, and formats it at the same time.

As a user, I also have the two "quick functions" available for the code snippets from the analysis…

Copy to Clipboard and
Insert Snippet at Caret

Conclusion

I've already expressed my personal conclusion, and I stick to it

🥳🥳🥳 I AM EXCITED 🥳🥳🥳

The AI Assistant integrates wonderfully into the IDE. I have the freedom to choose whether I want to use it or not at any time. And when using it, JetBrains remains true to itself by embedding it in the Context Actions, making the use seamless, setting the context, and allowing me to act via the familiar keyboard shortcuts.

I currently enjoy engaging in the "exchange" with the AI Assistant. I'm happy to update my article from time to time to share my experiences with you.

I'm also interested, in your opinion…

Have you already used the JetBrains AI Assistant?
What are your experiences with it?
Do you have comparisons with other AI systems?

Wishes for JetBrains

Despite all my enthusiasm, there are wishes I would like to convey to JetBrains:

It would be nice to be able to interrupt or "stop" the responses of the AI Assistant. Because it often happens that send is pressed too quickly in the User Prompt, even though information or code is not yet fully entered 🤷‍
- It also happens that I would like to interrupt the AI Assistant if, after its initial runs, it becomes clear to me that I'm going in the "wrong" direction or that what I've written has already inspired me - so I don't need any further "output" from the AI Assistant.
For the code snippets, I wish for an additional functionality that precisely takes the snippet to my real code location where the AI Assistant found the potential problem. So an Integrate Snippet.

Credits

Photo by Alexander Sinn on Unsplash

Nullish coalescing operator - explained

Thomas Scharke — Mon, 29 Mar 2021 12:40:08 +0000

The Nullish coalescing operator is a new and additional JavaScript operator that has been available since June 2020 with ECMAScript 2020 (ES2020) of the programming language.

In addition to the well-known binary logical operators && (AND) and || (OR), it is the third operator non-binary and has the notation ??.

It's always used when I want to explicitly check whether the value of a variable is available to use or, if the value is not available, to continue working with another value.

Here is the "classic" for me: Once with an if block, then in a "simplified" notation with the OR operator and last but not least in the notation with the new Nullish coalescing operator.

// Long version
let secondValue = "DEFAULT_VALUE";
if (firstValue !== null && firstValue !== undefined && firstValue !== "") {
  secondValue = firstValue;
}

// Shorthand with OR-Operator
secondValue = firstValue || "DEFAULT_VALUE";

// With Nullish-Operator
secondValue = firstValue ?? "DEFAULT_VALUE";

The first simplification, with the OR operator, works in most cases, but does not cover the case of working with boolean values.

But let's go through it step by step and see why the variants with the OR-operator work and then switch to the usually "better" Nullish coalescing operator.

OR-Operator

The binary logical operator (Binary Logical Operator) || (OR) is defined as follows:

{expression left side} || {expression right side}

I.e. if the expression on the left side delivers the value false the expression on the right side is interpreted, otherwise the expression on the left side is interpreted.

For our "simplification" from above...

let secondValue = firstValue || "DEFAULT_VALUE";

It means that if the variable firstValue returns the value true, this value is returned (and in this case assigned to the variable secondValue). However, if the variable firstValue returns false, the value of the right side is assigned to the variable secondValue - in my case the value DEFAULT_VALUE.

Step by step

Let's go through my example above step by step and see what I mean by...

The first simplification, with the OR operator, works in most cases, but does not cover the case of working with boolean values.

and how the Nullish coalescing operator helps us here.

To do this, I put my example into a function and then execute it:

function doSomethingAmazing(firstValue) {
  let secondValue = "DEFAULT_VALUE";
  if (firstValue !== null && firstValue !== undefined && firstValue !== "") {
    // Do somthing greate
    secondValue = firstValue;
  }

  return secondValue;
}

doSomethingAmazing(1); // 1 ✅
doSomethingAmazing(42); // 42 ✅
doSomethingAmazing(null); // DEFAULT_VALUE ✅
doSomethingAmazing(""); // DEFAULT_VALUE ✅
doSomethingAmazing(/* No value means `undefined` as value */);
// DEFAULT_VALUE ✅
doSomethingAmazing(true); // true ✅
doSomethingAmazing(false); // false ✅

🥳 Everything works fine and the code also works with boolean values. 🥳

Reflexively, I feel like "simplifying" this code and using the possibilities of JavaScript for myself. Because I can determine that a value exists with an if (firstValue), which leads to this version of my code:

function doSomethingAmazing(firstValue) {
  let secondValue = "DEFAULT_VALUE";
  if (firstValue) {
    secondValue = firstValue;
  }

  return secondValue;
}

doSomethingAmazing(1); // 1 ✅
doSomethingAmazing(42); // 42 ✅
doSomethingAmazing(null); // DEFAULT_VALUE ✅
doSomethingAmazing(""); // DEFAULT_VALUE ✅
doSomethingAmazing(/* No value means `undefined` as value */);
// DEFAULT_VALUE ✅
doSomethingAmazing(true); // true ✅
doSomethingAmazing(false); // DEFAULT_VALUE ❌ 😮

😮 Oops...When I pass a false to the function I get back the value DEFAULT_VALUE and not the value false as expected 🤔

I go one step further and "simplify" my code again; and this time I use the OR operator:

function doSomethingAmazing(firstValue) {
  // Executes the right operand ("DEFAULT_VALUE")
  // only if the left operand (firstValue) is falsy

  // This one-liner is also called short-circuiting operator 😃
  let secondValue = firstValue || "DEFAULT_VALUE";

  return secondValue;
}

doSomethingAmazing(1); // 1 ✅
doSomethingAmazing(42); // 42 ✅
doSomethingAmazing(null); // DEFAULT_VALUE ✅
doSomethingAmazing(""); // DEFAULT_VALUE ✅
doSomethingAmazing(/* No value means `undefined` as value */);
// DEFAULT_VALUE ✅
doSomethingAmazing(true); // true ✅
doSomethingAmazing(false); // DEFAULT_VALUE ❌ 😮

I find the last "simplification" of my code even better. It takes away the if block and makes the code easier to read.

But both "simplifications" lead to the same unexpected result when I call the function with the value false.

What have I broken? 🤔

I haven't broken anything. I merely used, in both simplifications, the functionality of JavaScript that assumes that a value must be false (false) - that is, falsy. In the concrete case, with my if block and the OR operator, I check whether the value firstValue is false and then use the value DEFAULT_VALUE.

When is a value "falsy"

In JavaScript, a value is (false) or falsy if it is null, undefined, 0 or false.

And since this is the way it is in JavaScript, I have also changed the behaviour of my implementation with my "simplification" of the code 🤷.

Call the last two code examples with 0 (Zero):

doSomethingAmazing(0);

Again, I want the value 0 (Zero) to be returned, but I get - logically - the value DEFAULT_VALUE 🤷

Let's get back to the actual implementation with the following expression in the if block:

firstValue !== null && firstValue !== undefined && firstValue !== "")

From this derives my requirement that I want to check whether a value is nullish and not whether a value is falsy, as I have (unwittingly) done through my "simplifications".

What does nullish mean

With nullish it's meant that an expression must have the values null or undefined, only then it is nullish.

And exactly this is and was what I wanted to have with my first implementation and have implemented.

Can I not now "simplify" my introductory example? Do I have to manually query all nullish values in JavaScript myself?

😱😱😱 N O O O O 😱😱😱

The new one - Nullish coalescing operator (`??`)

This is where the new one comes into play - the third logical operator in JavaScript.

Ladies and gentlemen the Nullish coalescing operator 🚀🚀🚀, which is written in JavaScript as ?? and is defined as follows:

{expression left side} ?? {expression right side}

This operator behaves similarly to the OR operator, but with the crucial difference...

It checks if the expression on the left side is "nullish".

And not, as with the OR operator, whether the expression is false.

A few examples of the Nullish coalescing operator:

1 ?? "DEFAULT VALUE"; // Result is: 1 ✅
42 ?? "DEFAULT VALUE"; // Result is: 42 ✅
null ?? "DEFAULT VALUE"; // Result is: DEFAULT VALUE ✅
undefined ?? "DEFAULT VALUE"; // Result is: DEFAULT VALUE ✅
true ?? "DEFAULT VALUE"; // Result is: true ✅
false ?? "DEFAULT VALUE"; // Result is: false ✅
0 ?? "DEFAULT VALUE"; // Result is: 0 ✅
"" ?? "DEFAULT VALUE"; // Result is: "" ❓

And with this knowledge, I can also "simplify" my code example again - like this...

function doSomethingAmazing(firstValue) {
  // Executes the right operand ("DEFAULT_VALUE")
  // only if the left operand (firstValue) is nullish
  let secondValue = firstValue ?? "DEFAULT_VALUE";

  return secondValue;
}

doSomethingAmazing(1); // 1 ✅
doSomethingAmazing(42); // 42 ✅
doSomethingAmazing(null); // DEFAULT_VALUE ✅
doSomethingAmazing(/* No value means `undefined` as value */);
// DEFAULT_VALUE ✅
doSomethingAmazing(true); // true ✅
doSomethingAmazing(false); // false ✅
doSomethingAmazing(""); // "" ❓

I have one more...

In my examples with the Nullish coalescing operator you will have noticed that calling my "simplified" functions with an empty string ("") does not result in DEFAULT_VALUE being returned.

This is not relevant to the way my example works, but I don't want to hide from you why this happens.

The answer is obvious: The nullish coalescing operator (??) checks whether a value is nullish, i.e. whether it's null or undefined. And an empty string ("") is an empty string in JavaScript and thus neither null nor undefined - but falsy 🤣

Another example

Let's go one step further and work with boolean values like true and false this time. Let's say, in the context of a configuration that should give a sign of life exactly when we are online and assumes that we are (always) online (by default):

function doSomethingAmazingWithAConfiguration({ online }) {
  // We use the OR operator
  let sendKeepAlive = online || true;

  return sendKeepAlive;
}

// We say explicit that we're online
doSomethingAmazingWithAConfiguration({ online: true }); // true ✅

// We use the default-state
doSomethingAmazingWithAConfiguration({}); // true ✅

// We say explicit that we're offline ⚠️
doSomethingAmazingWithAConfiguration({ online: false }); // true ❌ 😮

At this point in the text I have now reckoned with the false return value of the last call to the function, but it is not what I wanted.

I want the return value of the function to give me false when we're offline, i.e. when we set the key online in the passed object to false ({ online: false }).

The known problem

From what I've learned, this wrong result of my function call makes sense. Because online || true has the following values with the last call: false || true.

And if the left side of the OR operator returns false the value of the expression on the right side is used (the value of the left side is falsy) - in our case true 🤷.

The code works exactly as written, but not as expected.

Possible solutions

For my function that expects a configuration object, I could work with Destructuring and define a default value:

function doSomethingAmazingWithAConfiguration({ online } = { online: false }) {
  return online;
}

Or, instead of a configuration object, I use a boolean and check it with the strict inequality operator (!==):

function doSomethingAmazingWithAConfiguration({ online }) {
  let sendKeepAlive = online !== false;

  return sendKeepAlive;
}

But in this article the Nullish coalescing operator is the star 🤩 and for my configuration function also a solution:

function doSomethingAmazingWithAConfiguration({ online }) {
  // We use the Nullish coalescing operator
  let sendKeepAlive = online ?? true;

  return sendKeepAlive;
}

// We say explicit that we're online
doSomethingAmazingWithAConfiguration({ online: true }); // true ✅

// We use the default-state
doSomethingAmazingWithAConfiguration({}); // true ✅

// We say explicit that we're offline
doSomethingAmazingWithAConfiguration({ online: false }); // false ✅

Note

The first version of this article I wrote in my native language because there is a very active German JavaScript Community of which I am a part and which I would like to give something back to 🙇
Or to say it with the hashtag of my trainer buddy WebDave: #CommunityRocks and in this case #GermanJavaScriptCommunityRocksToo 😉🚀😎

Nullish coalescing operator - Erklärt 🇩🇪 (german only)

Thomas Scharke — Mon, 29 Mar 2021 10:31:34 +0000

Der Nullish coalescing operator ist ein neuer und zusätzlicher JavaScript-Operator, der seit Juni 2020 mit ECMAScript 2020 (ES2020) der Programmiersprache zur Verfügung steht.

Er ist neben den (vielleicht) bekannten binären logischen Operatoren (Binary Logical Operators) && (UND) und || (ODER) der dritte nicht binäre Operator und hat die Schreibweise ??.

Zum Einsatz kommt er immer dann, wenn ich explizit prüfen möchte ob der Wert einer Variable vorliegt um diesen zu nutzen oder, wenn der Wert nicht vorliegt, mit einem anderen Wert weiter zu arbeiten.

Hier für mich der "Klassiker": Einmal mit einem if-Block, dann in einer "vereinfachten" Schreibweise mit dem ODER-Operator und zu guter letzt in der Schreibweise mit dem neuen Nullish coalescing operator.

// Long version
let secondValue = "DEFAULT_VALUE";
if (firstValue !== null && firstValue !== undefined && firstValue !== "") {
  secondValue = firstValue;
}

// Shorthand with OR-Operator
secondValue = firstValue || "DEFAULT_VALUE";

// With Nullish-Operator
secondValue = firstValue ?? "DEFAULT_VALUE";

Die erste Vereinfachung, mit dem ODER-Operator, funktioniert in den meisten Fällen, deckt jedoch nicht den Fall ab mit bool‘schen Werten zu arbeiten.

Doch gehen wir es Schritt für Schritt durch und schauen erstmal warum die Varianten mit dem ODER-Operator funktioniert um dann auf den meist "besseren" Nullish coalescing operator auszuweichen.

ODER-Operator

Der binäre logische Operator (Binary Logical Operator) || (ODER) ist wie folgt definiert:

{Ausdruck linke Seite} || {Ausdruck rechte Seite}

D.h. liefert der Ausdruck auf der linken Seite den Wert false wird der Ausdruck auf der rechten Seite interpretiert, ansonsten wird der Ausdruck der linken Seite interpretiert.

Für unsere "Vereinfachung" von oben…

let secondValue = firstValue || "DEFAULT_VALUE";

bedeutet es, dass wenn die Variable firstValue den Wert true liefert, wird dieser Wert zurückgegeben (und in diesem Fall der Variablen secondValue zugewiesen). Liefert die Variable firstValue allerdings false wird der Wert der rechten Seite der Variable secondValue zugewiesen - in meinem Fall also der Wert DEFAULT_VALUE.

Schritt für Schritt

Gehen wir mein obiges Beispiel Schritt für Schritt durch und schauen was ich meine mit…

Die erste Vereinfachung, mit dem ODER-Operator, funktioniert in den meisten Fällen, deckt jedoch nicht den Fall ab mit bool‘schen Werten zu arbeiten.

und wie uns der Nullish coalescing operator hier hilft.

Dazu packe ich mein Beispiel in eine Funktion und führe diese anschließend aus:

function doSomethingAmazing(firstValue) {
  let secondValue = "DEFAULT_VALUE";
  if (firstValue !== null && firstValue !== undefined && firstValue !== "") {
    // Do somthing greate
    secondValue = firstValue;
  }

  return secondValue;
}

doSomethingAmazing(1); // 1 ✅
doSomethingAmazing(42); // 42 ✅
doSomethingAmazing(null); // DEFAULT_VALUE ✅
doSomethingAmazing(""); // DEFAULT_VALUE ✅
doSomethingAmazing(/* No value means `undefined` as value */);
// DEFAULT_VALUE ✅
doSomethingAmazing(true); // true ✅
doSomethingAmazing(false); // false ✅

🥳 Alles wunderbar und der Code funktioniert auch mit bool'schen Werten. 🥳

Reflexartig setzt bei mir das Gefühl ein diesen Code zu "vereinfachen" und die Möglichkeiten von JavaScript für mich zu nutzen. Denn dass ein Wert vorhanden ist kann ich mit einem if (firstValue) ermitteln, was zu dieser Version meines Codes führt:

function doSomethingAmazing(firstValue) {
  let secondValue = "DEFAULT_VALUE";
  if (firstValue) {
    secondValue = firstValue;
  }

  return secondValue;
}

doSomethingAmazing(1); // 1 ✅
doSomethingAmazing(42); // 42 ✅
doSomethingAmazing(null); // DEFAULT_VALUE ✅
doSomethingAmazing(""); // DEFAULT_VALUE ✅
doSomethingAmazing(/* No value means `undefined` as value */);
// DEFAULT_VALUE ✅
doSomethingAmazing(true); // true ✅
doSomethingAmazing(false); // DEFAULT_VALUE ❌ 😮

😮 Upps…Wenn ich ein false an die Funktion übergebe erhalte ich den Wert DEFAULT_VALUE zurück und nicht wie erwartet den Wert false 🤔

Ich gehe noch einen Schritt weiter und "vereinfachen" meinen Code noch einmal; und dieses mal nutze ich den ODER-Operator:

function doSomethingAmazing(firstValue) {
  // Executes the right operand ("DEFAULT_VALUE")
  // only if the left operand (firstValue) is falsy

  // Dieser Einzeiler wird auch short-circuiting operator genannt 😃
  let secondValue = firstValue || "DEFAULT_VALUE";

  return secondValue;
}

doSomethingAmazing(1); // 1 ✅
doSomethingAmazing(42); // 42 ✅
doSomethingAmazing(null); // DEFAULT_VALUE ✅
doSomethingAmazing(""); // DEFAULT_VALUE ✅
doSomethingAmazing(/* No value means `undefined` as value */);
// DEFAULT_VALUE ✅
doSomethingAmazing(true); // true ✅
doSomethingAmazing(false); // DEFAULT_VALUE ❌ 😮

Die letzte "Vereinfachung" meines Codes finde ich noch besser. Diese nimmt mir den if-Block und macht den Code einfacher zu lesen und übersichtlicher.

Doch beide "Vereinfachung" führen zu dem selben unerwarteten Ergebnis, wenn ich die Funktion mit dem Wert false aufrufe.

Was habe ich kaputt gemacht? 🤔

Ich habe nichts wirklich kaputt gemacht. Ich habe lediglich, in beiden Vereinfachungen, Funktionalität von JavaScript genutzt die davon ausgeht dass ein Wert falsch (false) sein muss - also falsy ist. Im konkret Fall, mit meinem if-Block und dem ODER-Operator, prüfe ich ob der Wert firstValue falsch ist um dann den Wert DEFAULT_VALUE zu nutzen.

Wann ist ein Wert "falsy"

In JavaScript ist ein Wert genau dann falsch (false) oder falsy wenn dieser null, undefined, 0 oder false ist.

Und da dieses in JavaScript nunmal so ist, habe ich mit meiner "Vereinfachung" des Codes auch gleich das Verhalten meiner Implementierung verändert 🤷‍

Rufe doch die letzten beiden Codebeispiele mal mit 0 (Zero) auf:

doSomethingAmazing(0);

Auch hier möchte ich dass mir der Wert 0 (Zero) zurückgegeben wird, doch ich erhalte - logischerweise - den Wert DEFAULT_VALUE 🤷‍

Doch kommen wir zurück zur eigentlich Implementierung mit folgendem Ausdruck im if-Block:

firstValue !== null && firstValue !== undefined && firstValue !== "")

Daraus leitet sich meine Anforderung ab dass ich prüfen möchte ob ein Wert nullish ist und nicht ob ein Wert falsy ist, wie ich es durch meine "Vereinfachungen" (unwissentlich) gemacht habe.

Was heisst nullish

Mit nullish ist gemeint dass ein Ausdruck die Werte null oder undefined haben muss, nur dann ist er nullish.

Und genau dieses ist und war es, was ich mit meiner ersten Implementierung haben wollte und umgesetzt habe.

Kann ich jetzt meine einleitendes Beipiels nicht "vereinfachen"? Muss ich, von Hand, alle nullish-Werte in JavaScript selber abfragen?

😱😱😱 N E I N 😱😱😱

Der Neue - Nullish coalescing operator (`??`)

Hier kommt der Neue ins Spiel - der dritten logische Operatoren in JavaScript.

Meine Damen und Herren der Nullish coalescing operator 🚀🚀🚀, der in JavaScript als ?? geschrieben wird und wie folgt definiert ist:

{Ausdruck linke Seite} ?? {Ausdruck rechte Seite}

Dieser Operator verhält sich ähnlich wie der ODER-Operator, doch mit dem entscheidenden Unterschied…

Es wird geprüft ob der Ausdruck auf der linken Seite "nullish" ist.

Und nicht wie beim ODER-Operator, ob der Ausdruck false ist.

Ein paar Beispiele zum Nullish coalescing operator:

1 ?? "DEFAULT VALUE"; // Result is: 1 ✅
42 ?? "DEFAULT VALUE"; // Result is: 42 ✅
null ?? "DEFAULT VALUE"; // Result is: DEFAULT VALUE ✅
undefined ?? "DEFAULT VALUE"; // Result is: DEFAULT VALUE ✅
true ?? "DEFAULT VALUE"; // Result is: true ✅
false ?? "DEFAULT VALUE"; // Result is: false ✅
0 ?? "DEFAULT VALUE"; // Result is: 0 ✅
"" ?? "DEFAULT VALUE"; // Result is: "" ❓

Und mit diesem Wissen kann ich mein Codebeispiel auch wieder "vereinfachen" - und zwar so…

function doSomethingAmazing(firstValue) {
  // Executes the right operand ("DEFAULT_VALUE")
  // only if the left operand (firstValue) is nullish
  let secondValue = firstValue ?? "DEFAULT_VALUE";

  return secondValue;
}

doSomethingAmazing(1); // 1 ✅
doSomethingAmazing(42); // 42 ✅
doSomethingAmazing(null); // DEFAULT_VALUE ✅
doSomethingAmazing(/* No value means `undefined` as value */);
// DEFAULT_VALUE ✅
doSomethingAmazing(true); // true ✅
doSomethingAmazing(false); // false ✅
doSomethingAmazing(""); // "" ❓

Einen habe ich noch…

Bei meinen Beispielen mit dem Nullish coalescing operator wird Euch aufgefallen sein, dass der Aufruf meiner "vereinfachten" Funktionen mit einem leeren String ("") nicht dazu führt das mir DEFAULT_VALUE zurückgegeben wird.

Das ist für die Funktionsweise meines Beispiels nicht relevant, doch ich möchte Euch nicht verschweigen warum es dazu kommt.

Die Antwort liegt eigentlich klar vor uns: Der Nullish coalescing operator (??) prüft ob ein Wert nullish ist, also null oder undefined ist. Und ein leerer String ("") ist in JavaScript ein leerer String und damit weder null noch undefined - aber falsy 🤣

Ein weiteres Beispiel

Gehen wir noch einen Schritt weiter und wollen dieses mal tatsächlich mit bool‘schen Werten wie true und false arbeiten. Sagen wir, im Rahmen einer Konfiguration die genau dann einen Lebenszeichen von sich geben soll wenn wir online sind und voraussetzt dass wir (immer) online sind (per default):

function doSomethingAmazingWithAConfiguration({ online }) {
  // We use the OR operator
  let sendKeepAlive = online || true;

  return sendKeepAlive;
}

// We say explicit that we're online
doSomethingAmazingWithAConfiguration({ online: true }); // true ✅

// We use the default-state
doSomethingAmazingWithAConfiguration({}); // true ✅

// We say explicit that we're offline ⚠️
doSomethingAmazingWithAConfiguration({ online: false }); // true ❌ 😮

An dieser Stelle des Textes habe ich jetzt mit dem "falschen" Rückgabewert des letzten Aufrufes der Funktion gerechnet, doch es ist nicht das was ich wollte.

Ich möchte das der Rückgabewert der Funktion mir false liefert, wenn wir offline sind, also wenn wir im übergebenem Objekt den key online auf false setzen ({ online: false }).

Das bekannte Problem

Mit dem gelernten macht dieses falsche Ergebnis meines Funktionsaufrufes Sinn. Denn online || true hat mit dem letzten Aufruf folgende Werte: false || true.

Und wenn die linke Seite des ODER-Operators false liefert wird der Wert des Ausdrucks auf der rechten Seite genutzt (der Wert der linken Seite ist falsy) - in unserem Fall true 🤷‍.

Der Code funktioniert genau wie geschrieben, doch nicht wie erwartet.

Mögliche Lösungen

Für meine Funktion, die ein Konfigurationsobjekt erwartet, könnte ich mit Destructuring arbeiten und einen Defaultwert definieren:

function doSomethingAmazingWithAConfiguration({ online } = { online: false }) {
  return online;
}

Oder ich nutze, statt eines Konfigurationsobjekts, ein boolean und prüfe diese mit dem strict inequality operator (!==):

function doSomethingAmazingWithAConfiguration({ online }) {
  let sendKeepAlive = online !== false;

  return sendKeepAlive;
}

Doch in diesem Artikel ist der Nullish coalescing operator der Star 🤩 und für meine Konfigurationsfunktion auch eine Lösung:

function doSomethingAmazingWithAConfiguration({ online }) {
  // We use the Nullish coalescing operator
  let sendKeepAlive = online ?? true;

  return sendKeepAlive;
}

// We say explicit that we're online
doSomethingAmazingWithAConfiguration({ online: true }); // true ✅

// We use the default-state
doSomethingAmazingWithAConfiguration({}); // true ✅

// We say explicit that we're offline
doSomethingAmazingWithAConfiguration({ online: false }); // false ✅

Anmerkung

Diesen Artikel habe ich bewusst in meiner Muttersprache (Deutsch) verfasst, da es eine sehr aktive deutsche JavaScript-Community (u.a. hier) gibt von der ich ein Teil bin und der ich hiermit etwas zurück geben möchte 🙇‍♂️

Oder um es mit mit dem Hashtag meines Trainer-Buddies WebDave zu sagen: #CommunityRocks und in diesem Fall #GermanJavaScriptCommunityRocksToo 😉🚀😎

If you want to read this article in English, you are in the right place here

No fear of Videoconferencing

Thomas Scharke — Sun, 15 Mar 2020 16:32:50 +0000

I'm used to being in an active exchange with my customers, partners, team members, etc.

As a #RemoteWork 'er I rely on video communication with different tools like Zoom, Skype, Slack, Spreed.me, Google Hangouts, Microsoft Teams and what they are all called 🤷

And this sentence already contains the decisive and important point: Video! - in video communication.

My point is that the visual and thus the seeing and being seen is important and should be used. Like in a normal meeting in the coffee kitchen or a meeting room.

Because information is transmitted via the spoken word (7%) and body language, body expression (55%), etc. (1)

But very often I experience a certain shy of this direct communication and especially a shy of turning on one's camera during communication - of showing oneself and being seen. No matter whether it is a planned meeting or a spontaneous "let's talk about it for a moment".

This means that essential information is lost and it also feels very boring, unsocial and isolated to talk to a photo or a dark screen.

Sure, there is also the possibility to communicate only textually; but the direct communication is not to be underestimated - and turning on your camera certainly not 😉And there's hardly any "excuse" to refrain from this (tools and the hardware are available).

Therefore...

Uses every opportunity for a direct conversation, whether it is with a single person or a group of people.
Always turn on your camera.
Request to turn on the camera from/to your call-partner.
Make sure that you're well recognizable (light, the position of the camera).
Don't worry about your appearance (if you aren't applying as a face model 🤣 )
Prepare the sound and your camera before a conversation. Briefly check in the settings if everything works, if you're recognizable, etc. This takes less than 1 minute 😉

And like everything else in life, it gets easier the more we do it!

Having the direct conversation, whether it's just for a minute or, say, a full pairing session, is priceless. It conveys the spoken words and body language, body expression (even if it is only a camera shot) and creates a connection - a connection with/to your counterpart. It strengthens the relationship, the trust and brings us closer together.

And as with any conversation, things can be talked about directly and any "misunderstandings" can be quickly identified and cleared up/resolved. Because we not only hear what someone says, we also see the other person and communicate at eye level (visually seen).

So...use the direct conversation and switch on your camera - ALWAYS!

Sources

(1) Body language (German only 🤷‍♂️)
Photo by Erik Mclean on Unsplash

Home-Office, Remote-Work,… What!?! A definition of terms

Thomas Scharke — Sun, 05 Jan 2020 18:02:02 +0000

Prologue

Today (09th of April) it feels like the whole world talks about Home-Office and Remote-Work. Some people practice it nowadays, others (like me 😉) practice it for years.

With my personal mindset and some learnings, readings and experiences, today is a good time to update this article and bring in some of the learnings and refresh the structure.

And the main questions, that are often brought to, are the questions of the concepts. What is behind these terms?

In this article, I would like to write down the terms I know and define them how I understand and use them.

Statement

Before today's situation (#COVID-19) you could read a lot of Remote-Work, Digital Nomads and New Work, etc. And gladly paired with the statement: Remote-Work is the future.

One more thing in advance, because I will never tire of repeating it and that in 2020 it makes more sense than ever before:

Remote-Work is not the future, it is the present (1)

Concepts and Definitions
Terms
- Telecommuting / Telework / Telearbeit
- Home-Office
- Remote-Work
- Distributed-Work
- Remote-Teams
- Digital Nomads
Footnotes

Concepts and Definitions

In general, the terms refer to working independently of location and time. It can be one, the other or both; it is, therefore an or or an and.

Furthermore, certain criteria must be met to be able to work anywhere in the world and at any time (e.g. internet, equipment, time zones, mindset, tools, etc.)

Above my definitions is the term New Work, which represents a model developed by Frithjof Bergmann. More precisely, Wikipedia...

In the years between 1976 to 1979, he undertook trips to the former countries of the Eastern bloc and began to question capitalism and communism. In this time he introduces his concept of New Work.

For me, the following terms are therefore aspects that contribute to a New Work but are not specified in it and therefore are not must be.

Note: Sometimes there're country-specific peculiarities/differences. The characteristics I mark with a flag (e.g. 🇩🇪) and list them there.

Terms

Telecommuting / Telework / Telearbeit

In 1973, Jack Nilles (Rocket scientist with the US Air Force) described the concept of working independently of location for the first time. Jack spent a lot of time in traffic jams and wondered if there could be other forms of "work" or better "working together".

With these ideas, he spends a lot of time of research and all this ends in these definitions taken from Wikipedia.

[..]The term means [..] a work arrangement in which employees do not commute or travel to a central place of work, such as an office [..].

Others words for it are telecommuting, telework, teleworking, working from home (WFH), mobile work, remote work, and flexible workplace.

Nowadays I would say it's the definition we know as Home-Office because it is location-independence only.

🇩🇪 The word "Telework" was translated in Germany 1-to-1 to Telearbeit.
🇩🇪 So "Telearbeit" is a term that I know from Germany only.
🇩🇪 The exclusively German Wikipedia says about it: "The term Telearbeit refers to forms of work in which employees perform all or part of their work outside the employer's premises.". This refers to the actual Home-Office.
🇩🇪 This term is used in certain "circles" in Germany as a devaluation because here the mentioned topics are only slowly gaining ground. Conscientious people also use the word Telearbeit to point out that the mindset of the other person - charmingly put - is lagging behind the times (that I never used 😉 I will describe it for completeness).

Home-Office

The workplace including the infrastructure is at home. In general, it is location-independent and not time-independent.
It's not time-independent working, because the person has to keep to the official office hours to be reachable e.g.

There are two models for location-independence:

I). The home address is contractually regulated - then it is not location-independent.
II). The home address is not contractually regulated and it is my own decision to work at home, although I could go somewhere else at any time - then it is location-independent.

We're different in Germany, so we have some specials 🤦‍♂️

🇩🇪 The word "Home-Office" was translated to "Remote-Work" because 🤷‍♂️I've no clue; it sounds cool or the most Germany thought that "Home-Office" isn't an English word? 🤔🤷‍♂️
🇩🇪 If an employer allows and defines this term in the employment contract, the employer is responsible for the working-situation and working-equipment (e.g. desk, chair, lamp, monitors, keyboards, etc.) and the corresponding conditions of the "Employment Protection Act" (in german: Arbeitsplatzschutzgesetz)

Remote-Work

Remote-Work is not Home-Office. It extends the term Home-Office by the factor of time-independence. This means that in Remote Work a person works location-independent and time-independent.

🇩🇪 The term is also often used when the employment type "self-employed" is added to the two factors of location- and time-independent work.

In current discussions, this term implies that regardless of the type of employment, an office or Headquarter (HQ) is available. This means that working independently of location is an "option" that can be used. However, if there is no office or similar, then location-independent is no longer an option and we would have to speak of Distributed Work.

Distributed-Work

This means that people work independently of location AND time AND distributed. It extends the term Remote-Work by the factor of distribution.

This term is currently being used more and more often since more and more companies are implicitly distributed. These companies have no offices, Headquarters (HQ) or other premises, and do not want them.

Matt Mullenweg talks about it in his podcast Distributed and Canva has also presented it in her blog post Challenging hq privilege. The term and its distinction from Remote-Work are currently under active discussion. 😃

To be honest, until a couple of weeks before, I use the terms Remote-Work and Distributed-Work synonymously. Nowadays I use the term Distributed-Work only, because Remote-Work becomes the new Home-Office and so Distributed-Work should become the new Remote-Work 😆

Remote-Teams

More than two people (a team) who practice Remote-Work, i.e. work location AND time-independent.

Most remote teams I hear about are in permanent employment. Only rarely do I hear of teams consisting of only self-employed or even of permanent employees and self-employed.

Digital Nomads

A Digital Nomad practices Remote-Work and extends this by the factor of non-sedentary lifestyle or puts this factor in the foreground.

Nomads are people who lead a non-sedentary lifestyle. This means that they are people who emphasize the two aspects of travel and frequent changes of location. Nomads do not have a permanent home. They stay where they want and as long as they want.
Digital because they meet the above criteria and work in a digital profession.

Footnotes

Cover Image by Hans-Peter Gauster on Unsplash
(1) I didn't invent this statement. I've adopted it because I find it coherent and appropriate. Unfortunately, I can't find the author anymore. If someone knows more, please leave me a comment 😉

What are ways to convey language- and framework-properties in a better way in teams?

Thomas Scharke — Sun, 29 Dec 2019 16:16:30 +0000

In some projects I always come across the following question, which is asked in the same way or differently:

How often do you meet developers who deal with your languages, architectures and frameworks?

After asking some questions these points come up:

Developers copy & paste something together until it just works.
Making changes or even putting parts into another context is not possible.
No thought was given to language-/framework-properties.

This leads to a situation in the projects where it becomes difficult to find your way around and work "properly" because side effects are possible and cannot be estimated 🕳️

For me, this is the question behind it:

What are ways to convey how to do it right/better and to arouse the interest and enthusiasm of the team members.

To be quite frank, I'm familiar with these situations and sometimes I'm doing it by myself 😞🤦‍♂️ This means that there're situations where a certain "pressure" arises to find a quick solution. So that I fall back on an answer from Stack-Overflow e.g. without having to follow it up afterwards. By this, I mean that I don't always sit down afterwards and look at the solution in detail to…

learn how it works and
to grow on it, to do it better from now on.

If this is repeated often enough, it leads to an unhealthy "culture" in the team or even in the company and has long-term economic consequences (e.g. the effort to implement new features increases, maintenance and updates becomes difficult, even impossible).

Can be counteracted this?

My answer is: Yes, it can! I would go even further and emphasize that it have to do so starting immediately.

How can be counteracted this?

Start with yourself 🤳: Start - from now on - doing it differently and better yourself.
Pair/Mob-Programming 👨‍👩‍👧‍👦: It's incredibly motivating to work on features or bugfixes together with someone else. Everyone involved learns and knowledge is passed on. In my opinion, it should be taken care that partners fit together humanly and have different levels of knowledge also. This means that everyone should have different experiences; be it in terms of language, technology, frameworks, code history or other areas of a project.
Pull Request 🔄: If Pull Request (PRs) are done with defined rules or even a ductus, then this can work "miracles". If PR's are reviewed in a constructive, friendly and benevolent manner, then this contributes to knowledge transfer and transparency. PR's should not be seen as an evaluation of the work. Rather, they should serve to push forward jointly defined guidelines and to recognize where things are repeatedly going in an unhealthy direction. It's therefore crucial that reviewers are "carefully selected" and that reviews are seen as important (e.g. there must be time for them). PR's have to be seen as a save-place where things are going in a good direction. By identifying what is missing or that something does not correspond to what was agreed upon. PR's are bidirectional.
Lightning Talks/Demos 📽️: Besides demos, in which the newest features are presented, there should be regular lightning talks in which everyone introduces to others and shows what new architectures or language-/framework-properties are available (in short and on/with code). Or what is often noticed (e.g. through the reviews) and should be done differently. At the end of the talk, the team should then commit to it and incorporate what they have learned into the current development. Just to make it clear: It's not about a big presentation, more consciously about something small, concise and crisp. Quasi presentations from developers for developers.
The pathfinder rule 📐: Clean code can be used in general and often it helps to apply only this one rule. So, leave the part of the code you're working on better than you found it. Means, that while you're working on a feature or bugfix, clean up at the same time. Refactor the code, update the code around it to the "latest" (agreed upon state) the team has committed to. I think it's important that you only refer to the part you're working on. This gives the entire project an iterative improvement and renewal. Do not change/adapt everything and it's also clear that there will be parts of code that will not be touched.

With all these points I'm not concerned with dogmatism. It's about starting with it and being the pioneer - the one who makes it better from now on - to lead by example.
To ensure that these things are taken seriously because they cause economic damage in the long term. In my experience, team members will quickly follow and critics will always be there anyway.

Do you know this from your own experience? How do you see that? What're your approaches to communicate how to make it right/better?

Cover Image by Rick Mason on Unsplash

Why I choose the title "Software Artist"

Thomas Scharke — Sun, 10 Nov 2019 18:16:59 +0000

I'm now other 15 years in the IT business and most of my time I'm actively sitting in front of a keyboard and writing code. Some times I do it on my own and more alone but mostly I do this with other peoples regardless of whether in the same room or remotely. And I do more…

In my carrier, I already had so many titles starting from "developer" over "application developer", "software developer" towards to "software designer" and it ends in "software developer" and all of this with attachments for the corresponding technologies like #Java, #JavaScript, #TypeScript, etc. (e.g. "JavaScript Software Developer") and you can get even more creative in it and make something like "Typescript and React-Native Software Mobile App Developer" - you got the picture 😉

And if you're working together with a team or being part of a team and feels responsible for the people, the working environment, the code the quality of code and the results or better the products someone thinks you're a "leader". And to share this information they found it a solid idea to put this information in addition to your job title. And so it ends up in "Lead Developer, "Lead Software Developer", "Lead React-Native Software Developer for Mobile Apps" and so on.

And here you may already see the confusion for me and for others. Does someone else realize what I'm doing? Do I explain good enough what I'm doing? Do teammates, recruiter or new customers locate me with this? Does it justice to what I do?

Ok, it's kind of engineering and so I'm a kind of a software engineer. But there's more in it…

With these points in my head, I stumble about the article Don’t be a Software Engineer, be a Software Artist from Jeremy Song in the last year. And during the reading me tought: Wow 😮 this describes exactly my confusion and brings a solution for me too 🙏.

Jeremy describes in his article the following requirements for a software engineer:

knowing how to write code and test code,

knowing how to identify business problems, collect user requirements, design a project and release it,

and anything in software engineer’s job description.

And he comes to the conclusion:

Usually, there is no requirement of writing easy-to-understand code, or designing a project that is easy-to-use.

Spontaneously I asked myself the questions, what's about understanding the customers, the products, the teams, the organisational parts and all the social think besides the technical parts?

Jeremy answers it with

Software artists can surely build software with highest standards. But being a software artist is more than just being an excellent software engineer who can write good code and design good architectures. Being an artist in software industry requires you to:

understand your customers and

be a teacher and an influencer.

This describes exactly what I'm doing, what I'm feeling and what I would like to expand further in the future.

With this in mind, I decided to call myself a Software Artist.

Does this answer my previous questions? Let's think about it…

Does someone else realize what I'm doing?
Do I explain good enough what I'm doing?
Do teammates, recruiter or new customers locate me with this?
Does it justice to what I do?

To be honest, the last question is answered this yes, only.

Teammates, recruiter or new customers cannot find me if they following the searching path like "JavaScript", "React Native", "Teamlead of whatever" or so. I explained not more precisely what I'm doing as before and at the moment no more realize what I'm doing except that it has anything to do with software.

In the end, I've achieved the following for me:

I justice what I do and it's more than building software and writing code.
The title is a good icebreaker to get into a conversation with.
The title sounds very cool - I think 😆😆 and
with my subtitle Passionate implementer of ideas it describes exactly what I'm doing, what I ❤️ to do, what I stand for and what you can expect from me thought beyond technologies.

What do you call yourself? What kind of values is behind it for you? What do you think? Are there other Software Artist out there?

Cover-Image/Photo by Ari He on Unsplash

DEV Community: Thomas Scharke

JetBrains' AI Assistant

Participation

Usage

Note

AI Actions

Write documentation

What do I appreciate about it?

Caveat

Conclusion

Find problems in code

Here we go…

Exchange with the AI Assistant

Transparency

And now?

Conclusion

Wishes for JetBrains

Credits

Nullish coalescing operator - explained

OR-Operator

Step by step

When is a value "falsy"

What does nullish mean

The new one - Nullish coalescing operator (??)

I have one more...

Another example

The known problem

Possible solutions

Note

Nullish coalescing operator - Erklärt 🇩🇪 (german only)

ODER-Operator

Schritt für Schritt

Wann ist ein Wert "falsy"

Was heisst nullish

Der Neue - Nullish coalescing operator (??)

Einen habe ich noch…

Ein weiteres Beispiel

Das bekannte Problem

Mögliche Lösungen

Anmerkung

No fear of Videoconferencing

Sources

Home-Office, Remote-Work,… What!?! A definition of terms

Prologue

Statement

Table of Contents

Concepts and Definitions

Terms

Telecommuting / Telework / Telearbeit

Home-Office

Remote-Work

Distributed-Work

Remote-Teams

Digital Nomads

Footnotes

What are ways to convey language- and framework-properties in a better way in teams?

Can be counteracted this?

How can be counteracted this?

Why I choose the title "Software Artist"

The new one - Nullish coalescing operator (`??`)

Der Neue - Nullish coalescing operator (`??`)