Frontend on Duma's website

`inputMode` HTML attribute

Sat, 14 Feb 2026 00:00:00 +0000

While working on a form with numeric inputs, I noticed Claude putting this attribute on them: inputMode="numeric".

Intrigued, I looked at the MDN page and it turns out the attribute exists to support different input styles, mostly related to what a smartphone will show in the keyboard tray. It can take values like tel, email, numeric and so on.

The attribute’s effect is limited to the keyboard, and it relies on the specific vendor to act on it. Nevertheless, I find it pretty useful to be able to change the keyboard between numeric and decimal depending on the value that needs to be entered in a form field.

`datalist` for range inputs

Tue, 27 Aug 2024 00:00:00 +0000

The datalist tag has surprised me at least a couple time already. While I still consider native HTML inputs as inadequate and too rigid, I admit that thanks to the datalist tag the UX can improve a bit.

Today I was how far the native range inputs are from for ElasticUI range inputs, the one I currently use. I stumbled upon the MDN Web docs page and particularly on the list attribute: it can contain the id of a datalist component and to enhance the user experience of the input. It seems the only three ways these two tags can interact are:

Mutable `shared static` attributes in Javascript

Mon, 11 Mar 2024 00:00:00 +0000

My understanding of the static keyword in JS classes has always been that it determined immutable attributes/methods that are available before not on a class instance but on the class constructor itself. Like with the Object class constrctor: it is possible to instantiate it, but some methods are available on the constructor too, like .fromEntries().

Let’s see a working example:

class MyClass {
 static attr1 = 'attr1'
 attr2 = 'attr2'

 static method1() { return 'method1' }

 method2() { return 'method2' }
}

console.group('Constructor')
console.log(MyClass.attr1)
console.log(MyClass.attr2) // <- doesn't throw, but undefined
console.log(MyClass.method1())
console.log(MyClass.method2()) // <- throws
console.groupEnd()

const instance = new MyClass()
console.group('Instance')
console.log(instance.attr1) // <- doesn't throw, but undefined
console.log(instance.attr2)
console.log(instance.method1()) // <- throws
console.log(instance.method2())
console.groupEnd()

As you can see, static method are available on the constructor only, while “normal” method only on instances. So far so good.

`:has()` pseudo-selector and current node parent

Fri, 02 Feb 2024 00:00:00 +0000

Today I was finally able to use the :has() pseudo-selector. I’ve heard about that in a superficial way through articles and comments, but I’ve never it in person.

Today at work I needed to implement a workaround, which consisted in setting some CSS rules to the parent of the current node. I’ve always thought it was impossible to achieve, but good folks updated this old question on StackOverflow, explaining how :has() could have helped.

Better viewport units for responsive design

Thu, 01 Feb 2024 00:00:00 +0000

The issue is: using 100vh as a rule to measure the whole viewport height is just faulty on mobile. Ona side note, I belive most of the times this is a bad idea, and people actually want something different, but let’s avoid this topic.

I encountered this issue again today, where one of the web apps I work on has 100vh but now has also the need to be more mobile-friendly.

Web Components innerHTML and loading time

Tue, 30 Jan 2024 00:00:00 +0000

While approaching the first lessons of Rob Eisenberg’s Web Components course, I stumpled upon a browser error that prevented every instance of a web component to run:

Failed to construct 'CustomElement': The result must not have children"

After many trials and errors, it turned out that adding the type="module" attribute fixed the issue. But why? I asked Rob directly in this tweet, and here’s his answer:

Technically, one shouldn’t alter the host attributes or children in the constructor (there’s a note on attributes but not children in the lesson; I’ll add more on that). Though, it will work in certain scenarios. Setting innerHTML in the constructor is an example of where it will work, depending on the timing.

Child rule does not mean child element

Mon, 15 Jan 2024 00:00:00 +0000

I always tought that, either in SASS or in native CSS nested selector, it was possible only to refine a selector by appending attributes of child nodes. It turns out it isn’t so.

In other words, whenever the & is used in selectors it’s possible to write body & and it’ll create a legit selector. I expected that only refinements like & .some-children-class would work.

This is a partial example to show the mechanism: the haiku is green, while I would have expected it to be blue.

Frontend on Duma's website

inputMode HTML attribute

datalist for range inputs

Mutable shared static attributes in Javascript