Things the web can do
Tags: javascript, web, css, html
Published: 2017-11-15 09:02:47

---
title: Things the web can do
published: true
description: Sometimes I stumble upon a rarely discussed feature or watch a CSS talk that has only 451 views or I am looking for a specific feature on MDN and see some awesome JavaScript API. I love these times, it feels great to explore new things that I don't know about yet.
tags: JavaScript, web, CSS, HTML
---

Sometimes I stumble upon a rarely discussed feature or watch a CSS talk that has only 451 views or I am looking for a specific feature on MDN and see some awesome JavaScript API. I love these times, it feels great to explore new things that I don't know about yet. But at the same time I always think something like: "Why hadn't I heard of this before" or "Wow, Everyone should know this!" or both of them. 

So, that's exactly what this post is about. Awesome features that I think are less talked about:

*HTML*
- `output` tag
- `ins` tag

*CSS*
- `element()` function
- `border-radius` slash(`/`)-syntax

*JS*
- `Intl` object
- `Performance` interface

---

Let's start with...

### `Performance` interface

Yes, you read that right. The browser has a native interface that let's you do precise performance measurements. The important part is **precise**, as it let's you do measurements simply not possible with normal JS methods (like `Date.now()`). It lets you measure time to *microseconds*. Microseconds. Not Milliseconds, but a thousand of that!

You can also do all sorts of things like `marks` and `highResTimeStamp`s and gives you a better alternative to `Date.time()` with `Performance.now()`. Definitely worth a look!

[MDN documentation for the `Performance` interface](https://developer.mozilla.org/en-US/docs/Web/API/Performance)

---

### `Intl` object

Ever did a project where you had to deal with number input, or had to display a date in the right format? Well, JavaScripts `Intl` object is for you.

> The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting.

[MDN documentation for the `Intl` object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)

---

### `border-radius` slash(`/`)-syntax

Ok, so when I first saw this, I could not believe my eyes! I was using Enki to make my daily knowledge workout and then:

![Screenshot from Enki](https://thepracticaldev.s3.amazonaws.com/i/v7bg9r2coutcsy8m14hb.jpg)

You can curve the x and y axis of a corner independently. That is awesome! Why? I immediately thought about an article I read some time ago (and gladly I had bookmarked it!) about optical illusions:

![Snippet from "Optical Effects in User Interfaces (for True Nerds)" by Slava Shestopalov](https://thepracticaldev.s3.amazonaws.com/i/687qj6ovi6d01rxgy2o5.png)
(from https://medium.muz.li/optical-effects-9fca82b4cd9a)

Further down a comment wrote:
> [...] In the olden days we had to slice up corner images and use a lot of markup for rounded corners on elements, then border radius made it a lot easier, now to get optically correct rounded corners we’d have to go back to complex markup and background images.

But maybe we can use this slash-syntax to create these 'rounded' corners that also appear round! (*Edit: Sadly its not possible with the slash-syntax, but it's interesting anyway* )

[MDN on the border-radius `/`-syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)

---

### `element()` function

This is yet another awesome feature CSS has up its sleeve.

Vincent De Oliveira wrote:

> To put it simply, this function renders any part of a website as a live image. A. Live. Image! As you see a DOM element rendered right in the browser, you’ll get an image of it. Every changes to that element will be immediately seen in real-time in the image, even text selection.

Some of the possibilities that `element()` would enable are thumbnails/previews and mirror-like effects. Sadly though this CSS feature only works in Firefox and can thus not be used for production purposes. Hopefully other browser vendors will follow the early efforts from Firefox at some point in the future!

![Demo of the CSS `element()` function](https://thepracticaldev.s3.amazonaws.com/i/z6gjnfh3t25xk2lu50pq.png)

*(Credit Vincent De Oliveira)*

[Read Vincent De Oliveira's full article](https://iamvdo.me/en/blog/css-element-function)

---

### `ins` tag

The HTML `ins` tag represents something that is/was inserted into the current document.

From MDN:

> The HTML `<ins>` element represents a range of text that has been added to a document.

This is a useful tag if you are picky about your markup (as you should be!) because you can use it with an additional `cite` and/or `datetime` attribute. `cite` let's you add an URI which explains the change and `datetime` let's you add a timestamp for when the change happened.

[More on the `ins` element on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins)

---

### `output` tag

Similar to `ins`, `output` should be used for content that is the result of an equation. Nothing special, but still cool!

[More on the `output` element on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output)

---

*That's it! Thank you for reading :)*