∃Web Features

This is a list of features I allow myself to use in my websites and ECMAScript libraries in order to cover the most Internet users.

Methodology

My rule of thumb is that 90% of Internet users should be able to open and browse a website I've made and/or use a library I've created. In ideal circumstances, this number could be as high as 95%. Anything above 95% is hard to achieve, as there is still a substantial user base of dead and old browsers (such as Internet Explorer).

Here are some reference numbers (data as of 2023-01-31):

  • Browserslist's `default` setting cover 89% of the users

    • I have used a "looser defaults" previously (defined as > 0.5%, last 3 versions, Firefox ESR, not dead), but it proved to be quite unnecessary as it's only 0.01% better than defaults

    • a modification of defaults that covers 90% would be > 0.3%, last 3 versions, Firefox ESR, not dead

    • Browserslist will show a warning if the config covers less than 80% of people in a single country

  • 97.5% of the world supports CSS Flexbox

  • 95.3 % of the world supports CSS Grid

  • 94.5 % of the world supports ES Modules

  • 94.29% of the world supports for ... of loops

Features

  • Use ES Modules. I am not a fan of excessive ECMAScript on the websites. If your app can't live without it (i.e. is highly interactive), use ES Modules and ask people to use a newer browser. If your app is a news website or a blog, don't use JS at all. As such, I deprecate IIFE in newer projects of mine.

  • Use Flexbox. I'll be honest with you, I still have not yet comprehended CSS Grid. I am way quicker doing interfaces with Flexbox. CSS Grid is not on the map for me now, especially while it's under 90% support in some countries.

  • Use for ... of loops. It's the pinnacle of loops in ECMAScript: easy to write, allows break and continue and works with NodeList and HTMLCollection elements (unlike forEach())

  • Think about not using a bundler. For small libraries (especially those that are dependency-less), is there really a use in a bundler? Just provide the ECMAScript file with the code, no need to minify (it'll break tree-shaking) or transpile.

See Also