
The
[Sustainability Web Design Community Group](https://www.w3.org/community/sustyweb/)
announced the
[Web Sustainability Guidelines](https://www.w3.org/blog/2023/introducing-web-sustainability-guidelines/).
It’s all about _“how to design and implement digital products and services that
put people and the planet first.”_

> This guideline provides best practices and recommendations for reducing the
> environmental impact of web development and design, such as minimizing data
> transfer, optimizing images, using green hosting, and more.

The climate crisis is a real threat, and it’s fantastic that people exist who
care to share their ideas on **how to reduce the impact of our industry**. If
you’ve thought the internet is not a part of the problem, think again.

We are responsible for _“2-5% of global emissions, more than the aviation
industry”._ I want to quote some actions from the
[Web Sustainability Guidelines](https://w3c.github.io/sustyweb/) you can take
immediately to participate in this.

- Minify Your HTML, CSS, And JavaScript
- Avoid Code Duplication
- EnsureYour Solutions Are Accessible
- Use HTML Elements Correctly
- Choose A SustainableHosting Provider
- Optimize Browser Caching
- Be Mindful Of Duplicate Data.

These are just a few suggestions tailored to a **more environmental friendly
web**. The list is long, and I’m sure everybody will find something they can
apply there. The key takeaway I get from this is **anything you already do to
improve the accessibility of your website and the loading performance is also
good for the environment**.

If you’re interested in sustainable web design, check out
[https://sustainablewebdesign.org/](https://sustainablewebdesign.org/), listed
as the **Implementation** of the Web Sustainability Guidelines.


The Sustainability Web Design Community Group announced the Web Sustainability Guidelines. It’s all about “how to design and implement digital products and services that put people and the planet first.”

Web Sustainability Guidelines


You may have already heard that a new
[View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
has been developed and will soon be available in all major browsers.

View Transitions help the user to stay in **context** when switching between
pages or states. For example, the user might click a link to another page, and
some elements might be animated to make the transition smoother and make it feel
less like a hard switch between the two pages.

It’s what makes most native apps **superior** in that case and looking so cool
and smooth. SwiftUI has had this kind of technology for years.

I have planned a whole blog post about the new View Transitions API as an
in-depth tutorial, but I will wait until every major browser supports them
(looking at you, Firefox), and we can use it in production.

Nevertheless, I’d like to discuss them briefly because
[Astro released a new major version (3.0)](https://astro.build/blog/astro-3)
last week. Part of this new release is enabling developers to use view
transitions inside Astro. That makes them the **first web framework to support
the View Transitions API**.

They offer these four different ways:

- **Morph** persistent elements from one page to another
- **Fade** content on and off the page for a less jarring navigation effect
- **Slide** content on and off the page for a bit more personality
- **Persist** common UI across pages, with or without a refresh

It’s straightforward to implement and use. You just have to import and add the
view transitions routing component on the page you want to use them.

```jsx
---
import { ViewTransitions } from 'astro/dist/components/view-transitions.js'
---

<h1>My Page</h1>
<ViewTransitions />
<div transition:name="fade">
  <p>Some content</p>
</div>
```

Astro will **automatically** create default page animations based on the
similarities between the old and the new pages. That’s all!

You can also identify the corresponding view transition element yourself. For
example, I wanted a view transition on the image in a blog post overview page
and on the image on the individual blog post.

So first, you view the list of blog posts, and when clicking on a specific blog
post, a view transition should happen on that image.

To achieve that, you only need to add the same `transition:name` value on both
image elements. It’s like magic!

If you want to see view transitions live in Astro, check out the
[Spotify clone built by Igor](https://github.com/igorm84/spotify-astro-transitions).
You have to make sure to use Chrome for that.

I’m curious how we’ll take advantage of this new possibility and if it will
change how it feels to browse the web.

## Sources

- [Astro 3](https://astro.build/blog/astro-3)
- [View Transitions](https://docs.astro.build/en/guides/view-transitions/)
- [Can I use view transitions](https://caniuse.com/?search=view%20transitions)
- [Spotify Astro Transitions on GitHub](https://github.com/igorm84/spotify-astro-transitions)


View Transitions will soon be available in all major browsers and Astro is the first framework to support them.

View Transitions are coming (Astro 3.0)


I have **never used** **Web Components** before. I’ve heard of them, for sure.
I’ve seen several blog posts and coding examples about how to build web
applications with them. But I never actually used code that included Web
Components.

I never considered choosing them for a new website instead of React or any other
JavaScript Framework. I always thought: they seemed to be a general approach for
building web applications so we, as developers, wouldn’t need to rely on
independent frameworks anymore. But the point where they would overtake never
came.

Ever wondered why they haven’t succeeded yet? Dave Rupert has a lot to say about
this. He wrote a blog post,
[“If Web Components are so great, why am I not using them?”](https://daverupert.com/2023/07/why-not-webcomponents/)
where he shares his opinion on **why web components haven’t taken over yet**,
and what he’d done differently if he could turn back time.

I’ll summarize his key takeaways here, but make sure you’ll check out his whole
blog post and the included links because reading his take on the topic is super
interesting.

In general, Dave says Web Components have a **marketing problem**. That’s the
biggest problem. This can be broken down into the following points:

- Web Components were designed for framework authors, not the average WordPress
  user. But Framework authors **declined** to use them because their problems
  were already solved otherwise.
- They were marketed as a **Google thing** and a bit too heavy on bashing other
  frameworks and selling Web Components as the only true thing.
- It was hard to convince others to use Web Components without the ability to
  refer to popular products built with them.
- They have been around for a few years but only became indeed **supported
  recently**.
- Their development is **slow**. If you’re waiting for a new feature for them
  available in every browser, you have to wait a couple of years.

Dave made many interesting points, which made me understand better why Web
Components are not there yet where they were supposed to be. I’m curious how
they will evolve in the future!


Have you used Web Components? I have not and I wondered why. Dave Rupert has a lot on opinions why Web Components have not succeeded yet and in this post I summarize his blog post.

Have you used Web Components?


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