It has been three busy summer months. I bring you my list of the things I’ve learned over this period.

1. Variable fonts
2. Native JavaScript methods to manipulate text nodes
3. Capture the change of contenteditable element
4. The formation of element’s inner border-radius
5. SVG elements have an extra space below
6. Global variable of id attribute
7. New JavaScript feature - optional chaining
8. Duplicate selector with CSS
9. Javascript in operator
10. JavaScript native string method endsWidth

Variable Fonts

It is a technology which allows an Open Type variable font to store multiple fonts within a single file. This technology was introduced by Microsoft, Google, Apple, and Adobe.

The cool thing about these fonts, that the way these fonts looks can be controlled with the help of CSS. A font-variation-settings property must be used in order to control the parameters of the font.

Usefull resources on variable fonts:

• Variable Fonts
• MDN font-variation-settings
• Google’s Introduction to variable fonts on the web
• Introducing OpenType Variable Fonts on Medium

Native JavaScript methods to manipulate text nodes

The normalize() method will merge element’s text nodes into one node.

const text = document.createElement("p")

text.appendChild(document.createTextNode("Hello "))
text.appendChild(document.createTextNode("World!"))

// text.childNodes.length === 2
// text.childNodes[0].textContent === "Hello "
// text.childNodes[1].textContent === "World"

text.normalize();

// text.childNodes.length === 1
// text.childNodes[0].textContent === "Hello World!"

The wholeText() method on the other hand “returns the full text of all Text nodes logically adjacent to the node”.

const text = document.createElement("p")

text.appendChild(document.createTextNode("Hello "))
text.appendChild(document.createTextNode("World!"))

text.childNodes[0].wholeText // "Hello World!"

// text.childNodes.length === 2
// text.childNodes[0].textContent === "Hello "
// text.childNodes[1].textContent === "World"

Capture the change of contenteditable element

To do so an "input" event is used on a contenteditable element.

<p class="text" contenteditable>Hello World!</p>

const text = document.querySelector('.text')

text.addEventListener('input', updateValue)

function updateValue(e) {
  console.log(e.target.value)
}

The formation of element’s inner border-radius

The element’s inner border-radius is formed by the following formula:

the outer border radius minus the corresponding border thickness

I actually wrote an article on how to adjust element inner border radius thanks to that discovery.

SVG elements have an extra space below

I was having an issue with SVG element inside a <div>. The SVG had a small space below thus a <div> wasn’t wrapping it tightly.

This is because inline-block elements (like <svg> and <img>) sit on the text baseline. The extra space is the space left to accommodate character descenders (the tail on ‘y’, ‘g’ etc).

I’ve found a solution with a sprinkle of CSS.

<div>
  <svg style="display: block;">
    ...
  </svg>
</div>

Global variable of id attribute

Setting id on an html element creates a global variable. Might be useful for quick prototyping and access in the browser console.

may also cause a bug and headache (name clash)

<div id="helloWorld">Hello World!</div>

window.helloWorld
// <div id="helloWorld">Hello World!</div>

New JavaScript feature - optional chaining

Optional chaining allows developers to reference object properties which may or may not exist without trigger an error.
—David Walsh

So instead of using long conditionals with logical AND (&&) operator:

const car = {
  name: "Audi",
  model: "A6",
  parts: {
    wheels: 4,
    doors: 2
  }
}

if (car && car.parts && car.parts.wheels) {
  // ...
}

You can go like so:

const wheels = car?.parts?.wheels

Duplicate selector with CSS

This is actually one of suggestions on MDN docs to avoid using !important:

duplicate simple selectors to increase specificity when you have nothing more to specify.
—MDN

#myId#myId span { color: yellow; }
.myClass.myClass span { color: orange; }

Javascript in operator

A clear and simple way to check if the property exists in an object.

The in operator returns true if the specified property is in the specified object or its prototype chain. —MDN

So instead of using hasOwnProperty() method or chaining you can go:

const car = {
  name: "Audi",
  model: "A6",
  parts: {
    wheels: 4,
    doors: 2
  }
}

console.log("parts" in car);
// true

if ("parts" in car) {
  // ...
}

JavaScript native string method endsWidth

A cool native way to check if the given string is the last set of characters in the specified string.

determines whether a string ends with the characters of a specified string, returning true or false as appropriate. —MDN

const text = "Hello World"

console.log(text.endsWith("World"))
// true

const text2 = "Hello World!"

console.log(text2.endsWith("World"))
// false