
URL validation is super important because it checks if a URL follows a proper URL syntax and is not malicious.
Nowadays URL-based vulnerabilities are very common and can be used to steal user data or redirect users to malicious websites.

Server Side Request Forgery (SSRF) is the main keyword on this topic. I won't go into too much details on this here, if you want to learn more about it, I recommend reading this definition: <a href="https://owasp.org/www-community/attacks/Server_Side_Request_Forgery" target="_blank">Server Side Request Forgery &#8599; </a>.

It's basically about attackers modifiying URLs so that they can access server data.

One way to prevent this is to do proper URL validation and this article by Mannan Tirmizi teached me so much about it: <a href="https://snyk.io/blog/secure-javascript-url-validation/" target="_blank">Secure JavaScript URL validation &#8599; </a>.

They suggest to use the `new URL()`constructor because it's one of the easiest ways to validate URLs. It throws an error if the URL is invalid and you can access the URL's properties like `protocol`, `hostname`, `port` and `pathname`.

Another way to validate URLs is to use regex. Altough they advice against it, because it's not as easy to use and an error-prone approach.

The great thing about the `new URL()` constructor is that is also works in Node.js and not only in the browser. So you can use it in your backend as well.

So if you're thinking about a great way to do URL validation with JavaScript check out the article by Mannan and the `new URL()` constructor <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/URL">here &#8599; </a>.

Today I learned about a secure way to validate URLs in JavaScript

Secure JavaScript URL validation


JavaScript provides us a ton of useful array methods. One of them is the
`.sort()` method, which as the name says sorts an array.

This is useful, if you want to sort a list in alphabetical order for example.
What I didn't knew about the `.sort()` method was that it modifies the original
array! As the
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" target="_blank">mdn
docs &#8599;</a> put it:

> The sort() method sorts the elements of an array in place and **returns the
> reference to the same array**, now sorted.

What does that mean? Let's see an example. Imagine you have a component that
renders a list of items and also has a select to filter items. The select should
be sorted alphabetically, but the list of items should not be sorted.

```js
const items = [
  { name: 'Spaghetti aglia olio', kitchen: 'italian' },
  { name: 'Bami Goreng', kitchen: 'vietnamnese' },
  { name: 'Pad Thai', kitchen: 'thai' },
]

const FavoriteFood = ({ items }) => {
  const sortedItems = items.sort((a, b) => {
    if (a.kitchen < b.kitchen) return -1
    if (a.kitchen > b.kitchen) return 1
    return 0
  })

  return (
    <>
      <select>
        {sortedItems.map((item) => (
          <option key={item.name}>{item.name}</option>
        ))}
      </select>

      <section>
        {items.map((item) => (
          <article key={item.name}>
            {item.kitchen} - {item.name}
          </article>
        ))}
      </section>
    </>
  )
}
```

What do you think happens here? Our intention is, to show the list of foods
sorted alphabetically in the dropdown, but not sorted below. But that's not what
is happening here:

![a screenshot of the example app with a select and a list of items](/images/screenshot-of-food-list.webp)

As I said before, the `sort()` method modifies the original array. This means
whenever you apply the sorting on the items array, the reference is also sorted.
That's why our list of items below the dropdown is also sorted.

To fix this, there is an easy solution. Create a copy of the array you want to
sort and sort that copy.

Do ✅

```js
const FavoriteFood = ({ items }) => {
  const sortedItems = [...items].sort((a, b) => {
    if (a.kitchen < b.kitchen) return -1
    if (a.kitchen > b.kitchen) return 1
    return 0
  })

  return (
    <>
      <select>
        {sortedItems.map((item) => (
          <option key={item.name}>{item.name}</option>
        ))}
      </select>

      <section>
        {items.map((item) => (
          <article key={item.name}>
            {item.kitchen} - {item.name}
          </article>
        ))}
      </section>
    </>
  )
}
```

Here our items array is copied by using the`spread operator`. This makes sure we
only have sorted items in our select, but not in our list below. Hope this helps
you, to prevent bugs in the future!


Today I learned, that when using the JavaScript sort() function on an array, it does not return a new array, but rather modifies the original one.

Array Sort modifies the original array


Third-Party JavaScript is one of the number one things that slows down modern
websites. And it's often hard to improve as you are unable to change the code
itself, because you know, it's not yours, it's from a third party.

Milica shares great ways to improve the loading of third-party JS in this <a href="https://web.dev/efficiently-load-third-party-javascript/" target="_blank">article &#8599;</a>.

She specifies two ways to deal with third-party JS. The first one is: if you're
able to and it doesn't add value, get rid of it, which seems to be the obvious
one. The second one describes the optimization of the loading process.

Therefore she explains several techniques which make use of modern JS and
improve the loading process of third-party JS drastically.

I learned a lot by following along with Milica's article and could improve my
own loading process of third-party JS.


Today I learned, how to efficiently load third-party JavaScript and share it on this post

Efficiently load third-party JavaScript


Today I learned about the `Set` object. It lets you store **unique** values of
any type, whether primitive values or oject references.

It's like a regular object, a collection of values. But the main difference is
that a value in a `Set` may only **occur once**.

So if you have to manage unique data, `Set` objects are they right thing for
you!

Here is a quick example:

```javascript
const names = ['Sabrina', 'Tereza', 'Tom', 'Paul', 'Sabrina', 'Tom']
const nameSet = new Set(names)

console.log(nameSet) // ['Sabrina', 'Tereza', 'Tom', 'Paul']
```

If you turn any data structure into a Set, it automatically filters out the
duplicates. I find this really useful.

The same goes for when you want to add a value, which is already present in your
Set.

```javascript
const names = ['Sabrina', 'Tereza', 'Tom', 'Paul']
const nameSet = new Set(names)

nameSet.add('Sabrina')

console.log(nameSet) // ['Sabrina', 'Tereza', 'Tom', 'Paul']
```

The Set prevents that values are added, which are already part of the object.

There is a lot more cool stuff you can do with sets, check out the
[Set Object mdn page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set).


The Set Object


While
[Suspense for Data fetching](https://reactjs.org/docs/concurrent-mode-suspense.html)
is still an experimental feature in React and is not yet available in a stable
release, React 16.6 also added a `<Suspense>` component.

This `<Suspense>` component lets you specify the loading indicator in case some
components in the tree below it are not yet ready to render.

This is a super cool and easy way to add a loading state with a loading
component to your React application.

Here is a simple example:

```javascript
import * as React from 'react'
import { LoadingComponent } from './loading-component'

const ComponentWithAsyncData = React.lazy(() =>
  import('./component-with-async-data')
)

const App = () => {
  return (
    <React.Suspense fallback={<LoadingComponent />}>
      <ComponentWithAsyncData />
    </React.Suspense>
  )
}

export default App
```

While the `<ComponentWithAsyncData />` may not be ready to render yet because
it's still waiting for an API Request, React.Suspense will handle that and show
our `<LoadingComponent />` instead.

What's even cooler, is that React can also lazy load the component with the
async data by using `React.lazy`. So it's not even imported, until it's ready.
Awesome!

You rean read more about it in the
[official React docs](https://reactjs.org/docs/react-api.html#reactsuspense).

So that's what I learned today. What about you?

Just send me an [email](mailto:marco@marcoheine.com) or message me on
[twitter](https://twitter.com/home) about your learnings. I would really like to
here from you!


React Suspense Lazy Loading Components


Today I learned that the fetch API does only reject on a Network error or when
CORS is misconfigured on the server-side. This means requests which responed
with a 4xx or a 5xx status code are also treated as successful and won't be
rejected.

There is an additional _.ok_ method on the response you can check for `true`

So the best way to check, if a fetch request is actually successful, includes
checking if the promise resolved, then checking if the `response.ok` property
holds a value of true.

Here is an example which illustrates this:

```javascript
fetch(url)
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    return response.json()
  })
  .then((responseJSON) => {
    // do something with the response
  })
  .catch((error) => {
    console.error('There has been a problem with your fetch operation:', error)
  })
```

To learn more about this and the Fetch API in general, check out the
[MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Response_objects)
article about using fetch.


Fetch API response.ok


Today I ~~learned~~ forgot, that the JavaScript array method

```javascript
Array.prototype.pop()
```

mutates the original array. This caused me a lot of trouble and some nasty bugs.
So here is an example to help you to not make the same mistake!

Let's say we have an array of animals.

```javascript
const animals = ['dog', 'cat', 'bird', 'alpaca', 'whale']
```

Now we want to do something with the last element of the array, while also doing
something with all animals.

I tried it this way:

```javascript
const lastAnimal = animals.pop()
```

What would you expect animals and lastAnimal are referencing now? Take your time
and think about it. Don't look!

```javascript
console.log(animals) // ['dog', 'cat', 'bird', 'alpaca']
console.log(lastAnimal) // whale
```

Oh no! The `pop()` method also changed our original array animals and kicked the
last element out of it. That's not what we wanted!

A better way to do this is to copy the original array with the spread operator
and work on the copy from that on. This prevents mutating the original array.

```javascript
const colors = ['green', 'blue', 'yellow', 'pink']
const copyOfColors = [...colors] // ['green', 'blue', 'yellow', 'pink']
const lastColor = copyOfColors.pop() // 'pink'
```

So copying arrays first, when you need to work with them is always a good idea.
Hope this helps you!


JavaScript Array Mutation


If you have worked with Promises in JavaScript, you know that Promises returned
by functions must be handled appropriatly.

Unhandled Promises can cause unexpected behavior. For example they can resolve
when you don't expext it.

So the best way to deal with Promises is to return them from functions that
start them and then handle them.

To enforce this behaviour and prevent unhandled promises, you can use this
tslint rule:
[no-floating-promises](https://palantir.github.io/tslint/rules/no-floating-promises/)

I find it really helpful and it can reveal a lot of bad code and potential
non-determistic behaviour.


No floating promises


The optional chaining operator can now be used in production! Hurray! 🥳If you
have no idea what this is, here is an example for you:

Let's say we have an object about a person.

```javascript
const person = {
  name: 'Maria',
  age: '36 years',
  dog: {
    name: 'Hugo',
  },
}
```

If we wanted to get the dog's name, we had to do this:

```javascript
const nameOfDog = person.dog.name
```

If the dogs name wasn't defined, this would throw an error 👎🏻 Not cool.

To prevent the type error, we had to do this:

```javascript
const nameOfDog = person && person.dog && person.dog.name
```

Uff wow that's a lot of **logical and** there. Image having an object nested
even deeper. Would become really long eventually.

Optional chaining operator to the resuce!

```javascript
const nameOfDog = person?.dog?.name
```

That's a lot shorter and better to read, if you ask me. It works the same as the
dot operator, but instead of throwing an error when a property is nullish, it
short-circuits with a return value of undefined.

Really helpful while exploring the content of an object, which might have some
optional properties.

You can learn more about it here:
[optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)


Optional Chaining


When I started learning NodeJS and researched a lot on this topic, I stumbled
across this video from
[Philip Roberts](https://twitter.com/philip_roberts?lang=en):

[![What the heck is the event loop anyway?](https://img.youtube.com/vi/8aGhZQkoFbQ/0.jpg)](https://www.youtube.com/watch?v=8aGhZQkoFbQ)

I already watched it years ago but did not remember everything. Especially in
the context of learning NodeJS but also when you're learning JavaScript in
general this is one of the best videos teaching a topic about the language ever.

I rewatched it and learned a ton about the **JS event loop** and **asynchronous
programming**. So good!


What the heck is the event loop anyway?


Tim Kadlec did an in depth analysis of the most common JavaScript frameworks
right now and their performance.

It&apos;s totally worth the read because he analyzed a lot of data, got some
interesting insights and conclusions. His final claim is:

> What is clear: right now, if you’re using a framework to build your site,
> you’re making a trade-off in terms of initial performance—even in the best of
> scenarios.

But the article is of course not about blindly bashing the current JavaScript
framework spectrum. It is more about analyzing current problemes and showing
ways to solve them. Very important and well researched article.

Check it out here:
https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/


The cost of JavaScript frameworks


ECMAScript 2020 was released recently which a brings a lot of cool new features
into the JavaScript language.

My favourites from the new release are

- **dynamic imports**,
- **Optional Chaining**
- and the **Nullish coalescing Operator**.

Check the link at the bottom which lists all new features and has links with
explanations of them.

Learn more: https://2ality.com/2019/12/ecmascript-2020.html


ECMAScript 2020


[Axios](https://github.com/axios/axios) is a npm package which makes
`http requests` easier. At the time axios came out, making http requests in the
browser was not really fun and axios made the life of a lot of developers
easier.

Since then a lot of things changed. A native
[fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) API is now
available. Kent C. Dodds wrote a blogpost why you might not need axios anymore
and can replace it easily with fetch.

Check it out:
https://kentcdodds.com/blog/replace-axios-with-a-simple-custom-fetch-wrapper


Replace axios with fetch


Kitty Giraudel wrote on his blog about how N26 is delivering a JavaScript and a
non JavaScript experience. I could find a lot of interesting insights about how
they managed to do that.

Learn more: https://kittygiraudel.com/2020/01/20/n26-and-lack-of-javascript/


Today I learned