
If you wanted to integrate a popover on a website before, you had to reach out
to a **third-party package** in the past because they made it easy to customize
things like positioning and enhancing functionality. This may soon be a tale of
the past!

[The popover API](https://hidde.blog/popover-semantics/) with the popover
attribute was introduced recently and is available in Chromium 114. By using
this new popover API, it will be **easier to integrate popovers into websites**.
It brings all the needed functionality and satisfies all the **accessibility
concerns**. And all of that without using any JavaScript.

To make use of the new popover API, three basic things are required:

- the popover attribute on the element containing the popover
- an id on the element containing the popover
- the element which opens the popover needs to have a popovertarget attribute
  with the value of the popover’s id

```html
<button popovertarget="popover">Open popover</button>

<div
  popover
  id="popover"
>
  <p>Popover content</p>
</div>
```

Implementing such a popover is **accessible by default** because the popover and
its trigger are **connected semantically**. Furthermore, closing the popover
with the ESC key is built-in, making it easy for keyboard users to dismiss it.

In addition to that, the new popover has a **light-dismiss functionality**. If
you click anywhere outside the popover, it will close and return focus. If you
open the popover, the next keyboard tab will stop inside the popover, so **focus
management is handled by default**.

Another great advantage of it is that the popover will always appear on a
separate level above the rest of the page, so there is **no need for manual
z-index handling**.

That’s such a great addition, I can’t wait until it’s stable in all modern
browsers and we can use it! It’s a big step into easier and faster ways to build
websites and improve accessibility by default.

It’s important to note that the new popover attribute **will only add behavior,
not semantics**. Popovers have no default role, and you’re supposed to add your
own semantics to it! Hidde de Vries wrote an
[excellent post about different semantics](https://hidde.blog/popover-semantics/)
that could make sense for popover-behaved elements. He takes a closer look at
menus, dialogs, and listboxes.

### Sources

- [Introducing the popover API by Una Kravets](https://developer.chrome.com/blog/introducing-popover-api/)
- [Popover semantics by Hidde de Vries](https://hidde.blog/popover-semantics/)


The popover API is a new HTML attribute that makes it easy to integrate popovers into websites without the need for JavaScript.

The popover API


Filling forms can be an **annoying and painful user experience**, especially if
you're on mobile. If you've ever tried to fill a long form on your phone and the
inputs weren't set up correctly, you know what I'm talking about.

The wrong keyboard opens, and you have to switch to special characters or
numbers all the time.

But this can be made so much easier and user-friendly with some simple steps.
Using the right input type value for the input is the first and, in most cases,
the only step you need to take.

For example, `<input type="email" />` will open up the right virtual keyboard on
mobile. The same goes for `type="url"`, `type="tel"` or `type="number"`.

But there are more attributes you can offer to make the user experience even
better.

Big thanks to Jeremy for teaching me about these attributes in this great
article
[Three attributes for better web forms](https://adactio.com/journal/19842?skin=default).

### inputmode

Inputmode is an attribute that can tell the browser to show a **specific virtual
keyboard**. This is redundant if you've already set the type to
`email, tel, url` or `search`.

But if you have an Input with the type text and you want to tell your users to
enter numbers there, `inputmode="numeric"` is super helpful. You can even
enclose the input by using `pattern="[0-9]*"`.

The other possible values for `inputmode` are
`text, numeric, decimal, search, email, tel` and `url`.

To learn more about it, check out the
[MDN documentation for inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).

### enterkeyhint

As explained above, the inputmode provides help to show the correct virtual
keyboard, whereas the `enterkeyhint` attribute provides help to specify what is
shown on the enter key on a virtual keyboard.

The possible values are `enter, done, go, next, previous, search, send`. This is
helpful in tailoring the user experience to the specific input. For Contact
forms, it's usually `send`, and for search forms, it's `search`.

Checkout the full documentation for
[enterkeyhint on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).

### autocomplete

The autocomplete attribute is my favorite one. It doesn't specify the virtual
keyboard, like the previous attributes. Instead, it tells the browser that there
are values that could be used to pre-fill the Inputs.

This is such a great feature because it makes filling Forms a way more pleasant
experience.

There are several categories with different values you can use. For the `name`
category you can use
`given-name, additional-name, family-name, nickname, honorific-prefix, honorific-suffix`
and `username`. If you don't need to break it down into different parts, you can
use `name` itself.

The same goes for `tel` and `address`. Check out the available attributes on the
[MDN documentation of `autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).

That's it; these are three awesome attributes you can use to make your forms
more user-friendly. I made a CodePen to showcase all the attributes explained in
this post. Check it out:

<CodePen
  id="wvEGPWK"
  title="Input Attributes for better Forms"
/>


Filling Forms on website can be an unnecessary pain. Recently I've learned about some simple steps to make Forms more user friendly.

Input Attributes for better Forms



Today I learned that there exists something like the <a href="https://worlds-highest-website.com/" target="_blank">&#8599; worlds highest website</a>.

It's exactly 18.94 kilometers high, wow! You can scroll it for ages. I'm not sure how long it takes to scroll to the bottom. 

The most interesting fact to me is, how fast you can get to the bottom by using a standard anchor tag with an id link to a div at the bottom. It happens in just a blink of an eye. 

The website consists of just one HTML container with pure CSS styling and has a height of 2840 em. What a great idea, I would have never thought of trying to build the highest website. 

It's also interesting to see that Firefox starts shrinking the main container as soon as the website gets higher than 18.939583 kilometers.

Today I learned about the worlds highest website

Worlds highest website


Today I learned that there is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API" target="_blank">HTML Sanitizer API &#8599;</a>.

It takes untrusted strings of HTML and sanitizes them to enable a safe insertion
into the DOM.

This is pretty cool as sanitizing strings on the client side previously had to
be done by using a third party module or writing your own functionality for
that.

Every web developer should at least know a little bit about web-security. The
term of XSS, also known as <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting" target="_blank">cross-site scripting &#8599;</a>
is one of the most common security issues on the web.

This new Sanitizer API can deal with XSS without any extra configuration.

You just initialize a new Sanitizer object and pass it the untrusted HTML
string.

```js
const sanitizer = new Sanitizer()
const untrustedHTML = '<script>alert("XSS")</script>'
const sanitized = sanitizer.sanitizeFor('div', untrustedHTML)
```

It's important to add that this is still an experimental technology. Which means
it's not available in most modern browsern. You have to set the `experimental`
flag to `true` to use it.

But still it's great to see that standard browser APIs like this will become
available in the future.


Today I learned, that there is a new HTML Sanitizer API which makes it easy to sanitize HTML to prevent cross-site-scripting.

HTML Sanitizer API


Writing good alt text is hard. I get it. But not having any alt text is the
worst you can do. It's still one of the most common accessibility issues on the
web.

In this [blog post](https://jakearchibald.com/2021/great-alt-text/) Jake
Archibald explains how to write great alt text.

The key take aways for great alt text are:

- the context matters
- describing the emotion is important
- not to be afraid of trying

Check out the blog post of Jake, to get better at writing alt texts. I
especially liked one sentence of him at the end:

> "[...] if you're trying to do the right thing, you're almost certainly
> improving the experience for real people."

I think that sums it up perfectly. Now go, write your alt texts!


In this post, I'll show how to write great alt text, according to Jake Archibald.

How to write great alt text


The web is **not accessible**. That’s not new, that’s not what I learned today.
But the amount of accessibility errors did surprise me.

The [WebAIM report](https://webaim.org/projects/million/) states over **50
million errors** in the top one million websites.

Today I learned that all of these errors are **the most basic accessibility
issue**, you can fix so easy:

- low text contrast,
- missing alternative text,
- empty links and buttons,
- missing form labels and missing languages.

Hidde wrote a fantastic blog post about it:
https://hidde.blog/common-a11y-issues/


Most common accessibility issues


In a project I worked on recently someone mentioned it would be cool to have
some **confetti** after a **form submission**. I loved this idea and after a
quick research I discovered
[canvas-confetti](https://www.npmjs.com/package/canvas-confetti).

Really cool and easy to use plugin to implement some confetti to celebrate!

If you're working with React, there is even a
[React component](https://www.npmjs.com/package/react-canvas-confetti) for this
library.

Here's a small example, where you can see it in action:
[fireworks](https://codesandbox.io/s/fireworks-fn-react-canvas-confetti-w594u?file=/src/App.js).
