DEV Community: Kai

5 Reasons Why You Should Never, Ever Write Tests

Kai — Mon, 30 Aug 2021 11:57:33 +0000

This post was originally published at kais.blog.

As a software developer, there is one topic that always leads to controversial discussions. Should one write tests or not? While there are always questionable experts who argue FOR writing tests, I have the definitive answer. Don't.

Many terrible things happen once you start testing your code. So I prepared a small, incomplete list to show you why you should never, ever, write tests:

You would start to question your code

What audacity. If you wrote tests, which of course you won't, your code would be questioned. Does it work as expected? Of course it does. Besides, there's no point in catching catastrophic bugs early, after all, they only ever happen in someone else's projects.

Your code would be clearly defined and well designed

You're not an art student, are you? Then what do you care about design? If you ever test parts of your code, you would be forced to clearly define what the code is responsible for. So you would focus on what is essential. With that you take away the possibility to sneak in code that nobody needs and nobody uses.

You would have to write less code

Testing can lead you to write less code. After all, you only ever implement so far that the tests pass. And less code means fewer lines of code. Who can brag about having worked on gigantic projects when there aren't that many lines of code? Besides, we're still in the 2000s, somehow, and we're billed on the basis of lines of code (LOC). Never reduce the lines of code. Ever.

You would save countless hours that you could normally waste on debugging or maintenance

This point is really critical. If, strangely enough, you are not paid by lines of code, then at least by the hour. With testing you would save many hours. How awful is the idea that you suddenly have time for other things and on top of that the certainty that the code behaves as expected. Scary.

You would enable others to understand your code and collaborate with you

I don't really need to write that much about it. Why would you even want to do that? With tests, your code is suddenly documented and much easier to refactor. Not good. If you are no longer the only one who can work on a project, then you will definitely be replaced immediately.

Final Thoughts

There you have it. My list of reasons why you should definitely not write tests. In summary, tests have only drawbacks and you should definitely follow me on Twitter if you want to learn even more about how to avoid being a good software developer.

If you want to convince other software developers why they shouldn't write tests, feel free to share this post with them.

Seriously though, write tests.

This post was originally published at kais.blog.

The Difference Between i++ and ++i (Postfix vs. Prefix)

Kai — Wed, 24 Feb 2021 14:37:35 +0000

This post was originally published at kais.blog.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

JavaScript (and many other languages) support the postfix and the prefix increment operator (++). You have probably seen and used it before.

Often it's used like this:

i++;

In this case it's almost equivalent to:

i = i + 1;

But, what do you think? Is there a difference between

let i = 3;
const j = i++;

and

let i = 3;
const j = ++i;

...

Well, yes. The first example uses the postfix increment operator (i++). The second example uses the prefix increment operator (++i). At first, it seems like there's no difference. However, it's important to understand what is going on here:

The postfix increment operator increments the value and returns the value before the increment.

The prefix increment operator increments the value and returns the value after the increment.

Let's take a look at our two examples again:

// postfix increment

let i = 3;
const j = i++;

console.log({ i, j }); // { i: 4, j: 3 }

// prefix increment

let i = 3;
const j = ++i;

console.log({ i, j }); // { i: 4, j: 4 }

Spotted the difference? The value of j differs. Therefore, it is important to know this small difference between postfix and prefix.

By the way, the same applies to the postfix decrement and prefix decrement operator (--). The only difference is, that instead of incrementing we are decrementing the value.

That's all there is to say. I hope I made the difference a bit clearer. See you soon!

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

This post was originally published at kais.blog.

How to Generate a Secure Random Number in Node.js

Kai — Wed, 17 Feb 2021 14:31:45 +0000

This post was originally published at kais.blog.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

While you are working on your JavaScript apps, the moment will come when you need a secure random number. Generating it has been quite tricky in the past. Some people use Math.random whenever the need for a random number arises. Please don't do this if there is any chance for an attacker.

If you are generating random numbers for security reasons (e.g. verification codes), you should use a cryptographically secure random number. Fortunately, the crypto module has been extended in recent Node.js versions. So, now there's an easy way to do it in JavaScript.

Prerequisites

Node.js (v14.10.0+ / v12.19.0+)

Generate a Secure Random Number Between `min` and `max` in JavaScript

Without further ado, let's generate our secure random number. First, import the crypto module:

const crypto = require("crypto");

Now, you have access to the randomInt function. randomInt takes up to three arguments.

Probably, you want to generate a random number in a given range. Therefore, you can specify the minimum (min) and maximum (max). Note that the minimum is inclusive and the maximum is exclusive. So, if you want to generate a number between 0 and 999,999 you'll have to pass 0 and 1000000.

// Synchronous
const n = crypto.randomInt(0, 1000000);
console.log(n);

The third argument is optional. You can provide a callback function. Then, the random integer is generated asynchronously:

// Asynchronous
crypto.randomInt(0, 1000000, (err, n) => {
  if (err) throw err;
  console.log(n);
});

Good! Now, n is a secure random integer between 0 and 999999. For example, this could be used as a 6-digit verification code:

const verificationCode = n.toString().padStart(6, "0");

Conclusion

The changes in recent Node.js versions made generating secure random numbers easy. So, if you are generating random numbers to use as verification codes or for a secure random shuffle, you now know how to do it.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

This post was originally published at kais.blog.

Did You Know These 14 Useful HTML Tags?

Kai — Wed, 10 Feb 2021 15:58:29 +0000

This post was originally published at kais.blog.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

HTML is a markup language. That means you are adding structure and semantics to your document by adding tags. These tags help the browser rendering and also assists machines understanding your content. Furthermore, they help in preventing accessibility issues. That's why you should take your time and add the right tags to your content.

While HTML is widely known and used, there are still a lot of uncommon yet useful HTML tags. In this post I'd like to show you some awesome HTML tags you might not know.

<abbr>: Abbreviation
<address>: Contact Address
<blockquote>: Block Quotation
<cite>: Citation
<figure> & <figcaption>: Figure with Optional Caption
<kbd>: Keyboard Input
<map>: Image Map
<noscript>: Visible If JavaScript Is Disabled
<progress>: Progress Indicator
& : Subscript & Superscript
<var>: Variable
: Word Break Opportunity

<abbr>: Abbreviation

You can use the <abbr> tag to define an abbreviation or an acronym. It helps a lot with web accessibility. In combination with the title attribute you can add a little tooltip that is shown on hovering the element.

<abbr title="Hypertext Markup Language">HTML</abbr>

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr

<address>: Contact Address

Use the <address> tag to denote contact information for a person or an organization.

<address>
  John Doe<br>
  <a href="mailto:john@example.com">john@example.com</a>
</address>

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address

<blockquote>: Block Quotation

The <blockquote> tag indicates that the section is quoted from another source. You can also use the cite attribute to add the URL for the source of the quotation.

<blockquote cite="https://alice.book">
  <p>
    It's no use going back to yesterday, because I was a different person then.
  </p>
</blockquote>

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

<cite>: Citation

The <cite> tag is mostly used in conjunction with the <blockquote> tag. It should be used to denote the title of the creative work.

<blockquote>
  <p>
    It's no use going back to yesterday, because I was a different person then.
  </p>
  <footer>
    <cite>Alice's Adventures in Wonderland</cite> by Lewis Carroll
  </footer>
</blockquote>

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite

<figure> & <figcaption>: Figure with Optional Caption

The <figure> tag lets you mark up self-contained content like a diagram or a photo. Use it in conjunction with the <figcaption> tag to define a caption for the <figure> element.

<figure>
  <img src="diagram.png" alt="Net income of households by household type">
  <figcaption>Fig.1 - Net income of households by household type</figcaption>
</figure>

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

<kbd>: Keyboard Input

With the <kbd> tag you can define keyboard input. It's usually rendered in a monospace font.

<p>
  Open the task manager by pressing <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd>
</p>

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd

<map>: Image Map

With the <map> tag you can create an image with clickable areas. You can specify how different areas of the image should link to different URLs.

For this, you'll have to add the usemap attribute to your <img> tag. Also, your map has to use multiple <area> tags to denote the different areas.

<img src="office.jpg" alt="Floor plan" usemap="#floorplan">

<map name="floorplan">
  <area shape="rect" coords="…" alt="Conference Room" href="conference-room.htm">
  <area shape="rect" coords="…" alt="Kitchen" href="kitchen.htm">
  …
</map>

Unfortunately, explaining the usage of <map> in detail is beyond the scope of this article.

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map

<noscript>: Visible If JavaScript Is Disabled

The <noscript> tag only renders its contents if the user has JavaScript disabled. For example, you could add a small note they should enable JavaScript. If they have it enabled, this note is hidden.

<noscript>
  For full functionality of this site it is necessary to enable JavaScript. Please enable JavaScript in your browser.
</noscript>

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript

<progress>: Progress Indicator

Use the <progress> tag to show a progress bar for a task. Also, remember to add a <label> tag for accessibility reasons.

<label for="file">Uploading progress</label>
<progress id="file" value="28" max="100">28%</progress>

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

& : Subscript & Superscript

The  tag defines subscript text. The contents are rendered with a lowered baseline using smaller text. This is useful e.g. for chemical formulas:

Despite its dangers, Dihydrogen monoxide (H<sub>2</sub>O) is often used.

Conveniently there is also a tag for superscript. The contents of the  tag are rendered with a raised baseline using smaller text. For example, you can use this for mathematical expressions:

a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup

<var>: Variable

Use the <var> tag to describe a variable in programming or in a mathematical expression.

Given the width <var>w</var> and the height <var>h</var> you can calculate the area of the rectangle.

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var

: Word Break Opportunity

The  tag specifies a position within text where a line-break would be allowed. So, you can allow to break a (very) long word into multiple lines.

Dampf<wbr>schiff<wbr>fahrt

The example shows adding word break opportunities to a long german word.

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

Conclusion

HTML has a lot of useful tags. Instead of using <div> and  for everything, try adding more semantics to your documents. Your site will become more friendly towards machines and humans.

Did you know all of these tags? Please consider sharing this list with your friends and colleagues if it was interesting for you.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

This post was originally published at kais.blog.

How to Install Node.js and npm on Windows or macOS

Kai — Mon, 18 Jan 2021 10:48:53 +0000

This post was originally published at kais.blog.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

Installing Node.js and npm on Windows or macOS is an easy task. Learn how to do it within a few minutes.

What are Node.js and npm?

Node.js is a JavaScript runtime that allows you to execute programs written in JavaScript. With Node.js JavaScript is not restricted to the browser anymore. In fact, by using Node.js you can create web, mobile and desktop apps. It's awesome! You should give it a try!

npm (originally short for Node Package Manager) is a command-line-utility that's included with your Node.js installation. It acts as a package manager for JavaScript. With npm you can download so-called packages from a package registry (most of the time - the npm registry). These packages are provided by other developers and help you develop your applications. You can also publish your own packages and thus, share your code and take part in the community.

How to Install Node.js and npm

Step 1: Download and Run the Node.js Installer

First, you have to download the installer. Navigate to:

https://nodejs.org/en/download/

Click the Windows Installer or macOS Installer button. This starts downloading the latest, recommended Node.js version for Windows / macOS. Once the installer has finished downloading, you are ready to run it. So, browse to the location where you have saved the file and run the installer.

The installer will guide you through the steps. You can leave it with the defaults. When the installer has finished the installation, you are ready to use Node.js. Let's verify that everything works as intended in the next step.

Step 2: Verify Your Node.js Installation

After running the installer for Node.js, you should have access to the node and the npm command-line-utilities. Let's try it! Open the Windows Command Prompt / Windows PowerShell or Terminal (macOS). Enter the following:

node -v

Now, you should see the current Node.js version installed on your system. Let's try the same for npm:

npm -v

This should show you the current npm version on your system. If everything works, you are ready to create your first simple Node.js program. If you see an error, try restarting your computer. Then, try again.

Step 3: Create Your First Node.js Program

Now that you have successfully installed Node.js and npm on your computer, you are ready to create your first Node.js program. Launch a text editor of your choice. Write the following line of JavaScript into a new file:

console.log("Hello, world!");

Now, save that file and name it hello.js. Open your Windows Command Prompt / PowerShell or Terminal (macOS). Use it to navigate to the place where you've saved the file. Then, type in the following:

node hello.js

You should see Hello, world!. Nice! You've successfully created your first Node.js program. As you can see, you've executed JavaScript on your computer. Well, there's far too much to show you now. Just let me tell you something - learning Node.js is a valuable skill. You can create web, mobile and desktop apps with it. Even games!

Have fun learning! See you around!

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

This post was originally published at kais.blog.

JavaScript Is Everywhere

Kai — Mon, 11 Jan 2021 14:16:01 +0000

This post was originally published at kais.blog.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

One of the major reasons why you should learn JavaScript in 2021 is its omnipresence. You can find JavaScript everywhere. Conversly, this means that learning JavaScript is a valuable skill regardless of what you want to develop.

With JavaScript, you can…

🌐 …create websites / web apps and browser extensions. Check!
🖥️ …create desktop apps. Check!
📱 …create mobile apps. Check!
🎮 …create games. Check!

This leaves nothing to be desired. In this post I'll show you awesome JavaScript frameworks, libraries and tools for the different use-cases. The only limit is your imagination. Also, you'll find examples of possible applications. So, if you wonder whether JavaScript is good enough - take a look at the examples.

🌐 Frontend Development

Frameworks / Libraries

Examples

Virtually every website uses JavaScript. I think that should give enough examples of the possible applications. Also, these frontend frameworks and libraries are used for the interfaces in desktop / mobile apps and games as well.

🌐 Backend Development

Runtimes

Node.js
Deno

Frameworks / Libraries

Examples

🖥️ Desktop Development

Frameworks / Libraries

Examples

📱 Mobile Development

Frameworks / Libraries

Examples

🎮 Game Development

Frameworks / Libraries

Examples

Conclusion

There you have it. If anyone ever tells you again, that JavaScript can't be used here or there - think twice. They might be right, but that's almost never true. Some applications require something else than JavaScript. Though, for your typical use-case (like Netflix or PayPal, lol), JavaScript is good enough.

However, let me add that even these big companies probably have a more diverse tech stack. JavaScript is a puzzle piece that let's you move fast and focus on the bigger picture. If you need something else, you probably know it and choose accordingly.

Have you tried creating something with JavaScript yet? Share your experience with us in the comments below.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

This post was originally published at kais.blog.

7 Tips for Clean Code in JavaScript You Should Know

Kai — Tue, 05 Jan 2021 22:00:51 +0000

This post was originally published at kais.blog.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

As a developer, you'll spend much more time reading code than writing it. That's why it's important to write code that's quick to grasp and easy to maintain. In this post, I want to introduce you to 7 tips that will help you create a clean and robust codebase.

Please note that these are opinionated guidelines. Some of you may not agree with me. In general, these tips will not be universal. Also, this list is not exhaustive at all.

1. Use meaningful names

There are only two hard things in Computer Science: cache invalidation and naming things.
-- Phil Karlton

Yeah, naming things is hard. However, meaningless names will trigger chaos in the long run. Whenever you have to choose a name - be it for a variable, a class, a function or anything else - please use meaningful names. The name should tell you the purpose and context.

❌ Bad

function su(e, pw) {
  const u = new U(e, pw);
  // What the §*{$ is this?
}

✔️ Good

function signup(email, password) {
  const user = new User(email, password);
  // Ah, now I understand!
}

2. Replace magic numbers with constants

What is a magic number? A magic number is a hard coded numeric value. It's an anti-pattern and obscures the developer's intent. Thus, it should be replaced with a constant that describes its purpose. See, you can instantly apply your knowledge from the first tip.

❌ Bad

for (let i = 0; i < 52; i++) {
  // ...um, why again do we use `52` here?
}

✔️ Good

const DECK_SIZE = 52;

for (let i = 0; i < DECK_SIZE; i++) {
  // It's about a deck of playing cards.
}

Here, you may ask why i = 0 is okay. Well, I'd count this as acceptable use. The intent here is clear - using i and initializing it with 0 is widely known among developers.

3. Do not use boolean flags to determine behavior

Often, you encounter a function that has two very similar behaviors. To switch between those, you might be tempted to simply add a boolean flag. However, this makes your code less readable and harder to understand. Try to split the function into two functions without the flag instead.

❌ Bad

function loadSchema(schema, sync = false) {
  //
}

// One eternity later…

loadSchema("…", true);
// Wait, what is `true` here? Sync? Async? 
// Something else? I'm so forgetful.

✔️ Good

function loadSchema(schema) {
  //
}

function loadSchemaSync(schema) {
  //
}

// One eternity later…

loadSchemaSync("…");
// Ah, it's the synchronous variant.

4. Reduce nesting in your code

Nesting makes code harder to read and especially harder to understand. With some simple tricks you can reduce nesting to a minimum.

❌ Bad

async function handle(request) {
  if (request.user) {
    if (request.user.can("CREATE_POST")) {
      // Wow, this is deep.
      // Handle request here.
    } else {
      // User is not authorized.
      return new Response({ status: 403 });
    }
  } else {
    // User is not authenticated.
    return new Response({ status: 401 });
  }
}

✔️ Good

async function handle(request) {
  if (!request.user) {
    // User is not authenticated.
    return new Response({ status: 401 });
  }

  if (!request.user.can("CREATE_POST")) {
    // User is not authorized.
    return new Response({ status: 403 });
  }

  // We can safely assume the user
  // is authenticated and authorized.
  // Handle request here.
}

5. Make use of newer language features

JavaScript is constantly changing. This brings you awesome new features that can improve your codebase. You can use destructuring, classes, the async-await syntax, the numeric separator and much more. My favorites are probably the spread-Operator (...), the optional-chaining operator (?.) and nullish-coalescing (??).

❌ Bad

// Assigning a default value should be easier...
const port = typeof config.port !== "undefined" ? config.port : 3000;

// Did I mess up? It's nine zeros, right?
const oneBillion = 1000000000;

// Deep properties and nesting...urghs
if (user.team) {
  if (user.team.subscription) {
    if (user.team.subscription.invoices) {
      //
    }
  }
}

✔️ Good

// Let's use nullish-coalescing (`??`).
const port = config.port ?? 3000;

// The numeric separator makes it easy to tell.
const oneBillion = 1_000_000_000;

// Here, we can use optional-chaining.
if (user.team?.subscription?.invoices) {
  //
}

Note that you cannot use optional-chaining on a non-existent root object. So if user could be undefined, we'd have to check with something like typeof user !== "undefined" first.

6. Make your code easy to refactor

Refactoring is the restructuring of your code without changing the observable behavior. To make this easy, you should consider writing automated tests. Therefore, you can use testing frameworks like Jest. If you are using automated tests you can verify that your code is behaving like you'd expect.

Then, you are ready for refactoring. You can change your code however you want. As long as your tests are passing, everything is fine. This should enable you to be confident about your codebase. No more fear that you are accidentally breaking something.

Unfortunately, setting up a testing framework like Jest is beyond the scope of this article. If you want, I can create a post about testing (and refactoring) your JavaScript code.

7. Use ESLint

This is the final tip of this post. Use this awesome tool called ESLint. It's free and easy to use and surely will improve your codebase. It detects and fixes common problems. Also, you can install useful presets and plugins to detect even more and reformat your code according to a style guide.

I use ESLint with plugins for standard and prettier. Besides, if I'm working with Vue, I'll add eslint-plugin-vue. Unfortunately, explaining the installation and configuration of ESLint is also beyond the scope of this article. Tell me, if you'd like to hear more about this.

Bonus: Consider using TypeScript

If you've read any of my posts in the past, you might know that I'm using TypeScript, a superset of JavaScript. It's basically JavaScript on steroids and helps you writing more robust and maintainable code. If you are still undecided, take a look at these 6 Reasons Why You Should Learn TypeScript in 2021 .

Conclusion

There's so much more you can do to create a clean and maintainable codebase. With my post, you should have a overview about small things you can do to improve your code. In the future, I'll publish more content to make you a better programmer.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

This post was originally published at kais.blog.

6 Reasons Why You Should Learn TypeScript in 2021

Kai — Sat, 02 Jan 2021 15:07:46 +0000

This post was originally published at kais.blog.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

Woah, please wait a second. You are expecting 6 reasons why you should learn TypeScript in 2021. But, did I mention that TypeScript is basically just JavaScript on steroids? So, before reading this post, you should take a look at 7 Reasons Why You Should Learn JavaScript in 2021. If you already know about JavaScript, just keep on reading.

TypeScript is JavaScript on steroids

Yeah, I've said it again. But it's true. TypeScript is a superset of JavaScript. This basically means it's a layer on top of JavaScript that adds many awesome features. So, if you know JavaScript or you'd like to learn it - you can transfer this knowledge to TypeScript. And vice versa. More or less every reason about why you should learn JavaScript in 2021, applies to TypeScript as well.

TypeScript is loved by developers

Looking at StackOverflow's Developer Survey 2020, you'll find that TypeScript is #2 of the most loved programming languages. The awesome syntax combined with JavaScript's huge ecosystem contributes to this. But, many things people hate about JavaScript don't apply to TypeScript. That makes for a really enjoyable developer experience.

TypeScript helps avoid painful bugs

JavaScript is sometimes quirky. With TypeScript's type checking system, many bugs (or features?!) are avoidable. Countless errors have occurred because you were expecting a number but a string was passed. If you are using TypeScript, this is a thing of the past. TypeScript's type system is one of the most advanced type systems you'll ever come across. And with the usage of utility types you can go even further.

TypeScript needs less code

TypeScript's language features are awesome. You'll need less code to achieve the same or even better results. The type system lets you remove many type guard clauses in your code. Also, TypeScript adds many cool features such as optional chaining (?.) and nullish coalescing (??) before they are generally available. This means you can write the JavaScript of tomorrow today.

TypeScript makes the switch easier

If you are coming from a traditional developer education, you probably have learned C# or Java. At least, those two are the dominating languages here in Germany's education system. Nevertheless, if your background involved more statically-typed languages, you'll feel much better using TypeScript instead of JavaScript. In my opinion, it felt even better than using C# and Java.

TypeScript is completely optional

Everything in TypeScript is optional. You can still write dynamically-typed code if you want to. You don't have to use interfaces, the typing system or some other awesome new language feature. Yet, those features are always available at your fingertips. Maybe some part should be statically-typed, some other part should be dynamically-typed. With TypeScript, you can. Besides, the configuration file allows you to tell the compiler how it should behave. In the end, it's still JavaScript.

Conclusion

TypeScript's popularity is on the rise. It takes the good parts of JavaScript and adds some awesome sprinkles on top. So, if you are learning a new programming language in 2021, why not try TypeScript? It might be overwhelming at first, but it's worth it in the long run. And remember, each reason why you should learn JavaScript in 2021 also applies to TypeScript.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

This post was originally published at kais.blog.

Cover Background Image by @joshuaearle (unsplash.com)

7 Reasons Why You Should Learn JavaScript in 2021

Kai — Sat, 02 Jan 2021 15:07:19 +0000

This post was originally published at kais.blog.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

It's the start of a new year. Many new year's resolutions are broken already. Nevertheless, have you ever thought about learning a new programming language in the new year? Why not start today? Here, I'll give you 7 reasons why you should start learning JavaScript in 2021!

JavaScript is the most popular language

According to StackOverflow's Developer Survey 2020, JavaScript is the most commonly used programming language among developers. And that's for the eighth year in a row. Its popularity is even higher if you only look at professional developers.

JavaScript's ecosystem is huge

The popularity results in tons of tutorials and libraries. I mean it. With npm you have the largest package registry in the world - available at your fingertips. Also, millions of developers use JavaScript every day. And many of them aren't silent. You'll find a gigantic amount of tutorials in this mysterious thing called Internet.

JavaScript is omnipresent

You are interested in backend, frontend or fullstack development? You want to create a web, desktop or mobile application? Or you dream of becoming a game developer? Everything is possible with JavaScript nowadays. Also, if you've ever heard of serverless functions - for those you can use JavaScript, too.

JavaScript is the language of browsers

I hear you WebAssembly (WASM). JavaScript is not the only one. However, JavaScript is here to stay and WASM won't change this in the near future. If you are working on anything web-related there's (more or less) no way around JavaScript. You can create your backend in C# or Java, but if you are working in the frontend you'll probably have to face JavaScript.

JavaScript is fast and efficient

Ever heard of Netflix or PayPal? Those two companies and a lot of other big and small names made the switch to JavaScript (Node.js). They found their web apps to be significantly faster and cheaper. Also, they took less time to develop and need less maintenance overall. A win-win situation.

JavaScript is easy and fun to learn

Okay, that point is a bit more opinionated. However, with so many available tutorials, ebooks and interactive playgrounds, learning JavaScript is a fun endeavour. It's really easy to get started.

JavaScript is constantly evolving

For some, this may be a negative. I find this very positive. JavaScript is constantly changing (for the better, in my opinion). New features and constructs are added regularly. With the rise of Babel and TypeScript you can use language features that aren't generally available yet. How cool is that!

Conclusion

Learning JavaScript in 2021 is a no-brainer. If you want to kickstart your developer career, JavaScript is worth a look. For some specific use-cases, other programming languages are ahead. However, you can always transfer your knowledge later to a certain extent. So, my recommendation for this year is: Learn JavaScript!

Well, actually, my language of choice is TypeScript. It's a superset of JavaScript. Think of it as a layer on top of JavaScript adding many awesome features to the language. If I've sparked your interest, check out these 6 Reasons Why You Should Learn TypeScript in 2021

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

This post was originally published at kais.blog.

Cover Background Image by @grakozy (unsplash.com)

How to Check For Undefined in JavaScript / TypeScript

Kai — Fri, 01 Jan 2021 13:21:50 +0000

This post was originally published at kais.blog.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

The correct way to check if something is undefined in JavaScript / TypeScript: Use the typeof operator! It returns a string showing the type of the unevaluated operand.

Let’s say you have an object user that looks like this:

const user = {
  email: "kai@example.com",
}

If you use the typeof operator on the email and id property, you'll get this:

console.log(typeof user.email); // "string"
console.log(typeof user.id); // "undefined"

Thus, to check for an undefined property you can combine an if-statement and the typeof operator:

if (typeof user.id === "undefined") {
  //
}

Easy! Yet, there are other ways to check for undefined. However, those are sometimes quirky and will throw a ReferenceError. So, I suggest that you always use the typeof operator if you are checking for undefined.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

This post was originally published at kais.blog.

npm displays badge for built-in TypeScript declarations

Kai — Tue, 22 Dec 2020 11:12:18 +0000

Good news for my fellow TypeScript developers!

Since the 16th of December, npm displays a small TS badge for packages with bundled TypeScript declarations:

(example: https://www.npmjs.com/package/vue)

This makes it easier to know, whether the maintainer supports TypeScript and if you have to use a package from the @types repository.

Find GitHub's original announcement here: npm displays packages with bundled TypeScript declarations

11 Awesome TypeScript Utility Types You Should Know

Kai — Mon, 21 Dec 2020 13:17:35 +0000

This post was originally published at kais.blog.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

My last two posts have already shown you 14 Awesome JavaScript Array Tips You Should Know About and 10 Awesome JavaScript String Tips You Might Not Know About. However, I usually write code in TypeScript. There's also much to learn. So today, I'd like to show you 11 awesome TypeScript utility types. With these, constructing new types becomes a breeze.

Pick<Type, Keys>
Omit<Type, Keys>
Readonly<Type>
Partial<Type>
Required<Type>
Record<Keys, Type>
Parameters<Type>
ReturnType<Type>
Extract<Type, Union>
Exclude<Type, ExcludedUnion>
NonNullable<Type>

You don't have to do anything special. All utility types are globally available by default.

Pick<Type, Keys>

With Pick you can pick a set of Keys from the given Type. The example shows a signup function taking a user as first parameter. The parameter type is constructed by picking the email and password property from the User type. This way, you won't need to pass an id for signing up a new user.

interface User {
  id: string;
  email: string;
  password: string;
}

function signup(user: Pick<User, "email" | "password">): User {
  //
}

signup({
  email: "kai@example.com",
  password: "secret",
});

Omit<Type, Keys>

In contrast to Pick, you can use Omit to remove a set of Keys from your Type. The example is similar to the previous. In this case, the signup function's parameter user has all properties from the User type minus the id property.

interface User {
  id: string;
  email: string;
  password: string;
}

function signup(user: Omit<User, "id">): User {
  //
}

signup({
  email: "kai@example.com",
  password: "secret",
});

Readonly<Type>

Sometimes you want to prevent that an object's properties are reassigned. This is doable with the Readonly utility type. The constructed type will have all properties set to read-only. Thus, you can't reassign any property of that type. In the following example, we'll create a new type by using Readonly and the User type. We can't reassign the password property here, because it's read-only now.

interface User {
  id: string;
  email: string;
  password: string;
}

const user: Readonly<User> = {
  id: "d70989c8-c135-4825-a18c-a62ddf9ae1d5",
  email: "kai@example.com",
  password: "secret",
};

user.password = "correcthorsebatterystaple";

// ERROR: Cannot assign to 'password' because it is a read-only property.

Partial<Type>

Using Partial you can construct a type with all properties from Type set to optional. For example, the updateUser function allows you to update a User. The second parameter expects the fields to update. You can use Partial with the User type here, so that fields is any combination of fields from the User type.

interface User {
  id: string;
  email: string;
  password: string;
}

function updateUser(user: User, fields: Partial<User>): User {
  //
}

const user: User = {
  id: "d70989c8-c135-4825-a18c-a62ddf9ae1d5",
  email: "kai@example.com",
  password: "secret",
};

updateUser(user, { password: "correcthorsebatterystaple" });

Required<Type>

Required is the opposite of Partial. You can use it to construct a type with all properties from Type set to required. The following example has a User type with an optional avatar property. However, our variable userWithAvatar requires all properties to be present. Thus, an error occurs.

interface User {
  id: string;
  email: string;
  password: string;
  avatar?: string;
}

const userWithAvatar: Required<User> = {
  id: "d70989c8-c135-4825-a18c-a62ddf9ae1d5",
  email: "kai@example.com",
  password: "secret",
};

// ERROR: Property 'avatar' is missing in type '{ id: string; email: string; password: string; }' but required in type 'Required<User>'.

Record<Keys, Type>

With the Record utility type, you can easily construct a new type with Keys as keys and Type as values. In this example, each User has a role. We want to describe an object that groups userA and userB by their respective role. Using Record, we can tell the TypeScript compiler that the object has a strings as keys and an array of Users as values. Besides, to be more explicit, we could have used User["role"] instead of string for the keys.

interface User {
  id: string;
  email: string;
  password: string;
  role: string;
}

const userA: User = {
  id: "d70989c8-c135-4825-a18c-a62ddf9ae1d5",
  email: "kai@example.com",
  password: "secret",
  role: "administrator",
};

const userB: User = {
  id: "c0e26c7e-9787-4d56-81b4-4440759e251c",
  email: "katharina@example.com",
  password: "correcthorsebatterystaple",
  role: "moderator",
};

const usersGroupedByRole: Record<string, User[]> = {
  administrator: [userA],
  moderator: [userB],
};

Parameters<Type>

Use Parameters to extract a function's parameters. This will construct a tuple type with the parameters. Let's say you'd like to initialize a variable that holds parameters for a signup function. With the help of Parameters you can extract the signup function's parameters and create a tuple type. Then, you can use the parameters whenever you want.

interface User {
  id: string;
  email: string;
  password: string;
}

function signup(email: string, password: string): User {
  //
}

type SignupParameters = Parameters<typeof signup>;
//                    = [email: string, password: string]

const parameters: SignupParameters = ["kai@example.com", "secret"];

signup(...parameters);

ReturnType<Type>

The utility type ReturnType helps by extracting the return type of a function. Look at the following example. We want our ValidationResult type to be constructed by looking at the return type of the validate function. Here, it's pretty simple. You could have used boolean directly instead. However, sometimes it's nice to be able to extract a function's return type.

interface User {
  id: string;
  email: string;
  password: string;
}

function validate(user: User): boolean {
  //
}

type ValidationResult = ReturnType<typeof validate>;
//                    = boolean

Extract<Type, Union>

Sometimes, you'd like to extract types from an union of types. For that, you can use the Extract utility type. Every union member from Type that is assignable to the Union is kept. In the following examples, we'll have unions of strings. There, we extract a part of it for our types TypeA and TypeB. For TypeC we extract each union member that is assignable to Function.

type TypeA = Extract<"apple" | "banana" | "cherry", "apple">;
//         = "apple"

type TypeB = Extract<"apple" | "banana" | "cherry", "apple" | "banana">;
//         = "apple" | "banana"

type TypeC = Extract<string | (() => string), Function>;
//         = () => string

Exclude<Type, ExcludedUnion>

The Exclude utility type is the opposite of the Extract utility type. This time, it removes all union members from Type that are assignable to the ExcludedUnion. Similar to the previous examples, we have unions of strings here. In contrast to last time, we are removing union members instead of keeping them.

type TypeA = Exclude<"apple" | "banana" | "cherry", "apple">;
//         = "banana" | "cherry"

type TypeB = Exclude<"apple" | "banana" | "cherry", "apple" | "banana">;
//         = "cherry"

type TypeC = Exclude<string | (() => string), Function>;
//         = string

NonNullable<Type>

NonNullable works similar to the Exclude utility type. It excludes null and undefined from the given Type. Similar to the previous two examples, we construct the new types TypeA and TypeB by removing union members from a given Type. Here, null and/or undefined are removed.

type TypeA = NonNullable<"apple" | null>;
//         = "apple"

type TypeB = NonNullable<"apple" | null | undefined>;
//         = "apple"

Conclusion

This was a quick overview of some of the most useful utility types. They can be used for a wide range of things. I use them in almost every project. However, there are more utility types. Check out the official documentation to learn more! Besides, you can find even more such types. For example, the type-fest package adds many essential types to your project.

Thanks a lot for reading this post. Please consider sharing it with your friends and colleagues. See you soon!

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

This post was originally published at kais.blog.

DEV Community: Kai

5 Reasons Why You Should Never, Ever Write Tests

You would start to question your code

Your code would be clearly defined and well designed

You would have to write less code

You would save countless hours that you could normally waste on debugging or maintenance

You would enable others to understand your code and collaborate with you

Final Thoughts

The Difference Between i++ and ++i (Postfix vs. Prefix)

How to Generate a Secure Random Number in Node.js

Prerequisites

Generate a Secure Random Number Between min and max in JavaScript

Conclusion

Did You Know These 14 Useful HTML Tags?

<abbr>: Abbreviation

<address>: Contact Address

<blockquote>: Block Quotation

<cite>: Citation

<figure> & <figcaption>: Figure with Optional Caption

<kbd>: Keyboard Input

<map>: Image Map

<noscript>: Visible If JavaScript Is Disabled

<progress>: Progress Indicator

<sub> & <sup>: Subscript & Superscript

<var>: Variable

<wbr>: Word Break Opportunity

Conclusion

How to Install Node.js and npm on Windows or macOS

What are Node.js and npm?

How to Install Node.js and npm

Step 1: Download and Run the Node.js Installer

Step 2: Verify Your Node.js Installation

Step 3: Create Your First Node.js Program

JavaScript Is Everywhere

🌐 Frontend Development

Frameworks / Libraries

Examples

🌐 Backend Development

Runtimes

Frameworks / Libraries

Examples

🖥️ Desktop Development

Frameworks / Libraries

Examples

📱 Mobile Development

Frameworks / Libraries

Examples

🎮 Game Development

Frameworks / Libraries

Examples

Conclusion

7 Tips for Clean Code in JavaScript You Should Know

1. Use meaningful names

2. Replace magic numbers with constants

3. Do not use boolean flags to determine behavior

4. Reduce nesting in your code

5. Make use of newer language features

6. Make your code easy to refactor

7. Use ESLint

Bonus: Consider using TypeScript

Conclusion

6 Reasons Why You Should Learn TypeScript in 2021

TypeScript is JavaScript on steroids

TypeScript is loved by developers

TypeScript helps avoid painful bugs

TypeScript needs less code

TypeScript makes the switch easier

TypeScript is completely optional

Conclusion

7 Reasons Why You Should Learn JavaScript in 2021

JavaScript is the most popular language

JavaScript's ecosystem is huge

JavaScript is omnipresent

JavaScript is the language of browsers

JavaScript is fast and efficient

JavaScript is easy and fun to learn

JavaScript is constantly evolving

Conclusion

How to Check For Undefined in JavaScript / TypeScript

npm displays badge for built-in TypeScript declarations

Generate a Secure Random Number Between `min` and `max` in JavaScript