I skimmed my repos and counted 56 new Web Components in 2023
And I only blogged about one in 2023. (but it did get me my first hate response in 33 years on the Net)
To make friends and get followers, I maybe should have whined more on X about nuking shadowDOM and the incorrect naming of (HTML) Web Components.
Instead, I keep myself busy answering web components questions on StackOverflow
Of those 56 Web Components many are unfinished, proprietary, or too simple.
7 are (maybe) worth to blog about. But there is hardly time left in 2023
So here goes, 7 Web Components, without much explanation, a peek at the HTML Page Source will get you started.
All sources are in the single file element.js in every repo.
They are all Unlicensed source code, so do whatever you want with them. (read: I won't respond to issues)
Have a good Web Component 2024
<event-count>
This one does have some decent documentation, I was probably already working on the next Web Component and forgot to blog about this one.
(The HTML file declares 3 more simple Web Components)
Site: https://event-count.github.io/
Repo: https://github.com/event-count/event-count.github.io
<count-up>
It does work, but documentation sucks. The component counts up numbers (duh) when they become visible in the viewport.
When you open the site zoom the document to the maximum, then slowly scroll down to see the counting numbers
I never took the time to publish it in its own repo.
Site: https://scroll-number.github.io/
Repo: https://github.com/scroll-number/scroll-number.github.io
<lorem-ipsum>
I wrote this for the <count-up> site above, to quickly write some paragraphs of Lorum Ipsum text.
Site: https://lo-sum.github.io/
Repo: https://github.com/lo-sum/lo-sum.github.io
<leaflet-map>
Google Maps now requires registration/a key to display markers on a webpage.
A quickie to use (still free) LeafLet.
Site: https://leaflet-map.github.io/
Repo: https://github.com/leaflet-map/leaflet-map.github.io
<fit-text>
Another one with decent documentation.
The more you use it, the more you question why this is not a CSS setting.
It now requires 21 lines of JavaScript.
Site: https://fit-text.github.io/
Repo: https://github.com/fit-text/fit-text.github.io
<cylinder-toggle>
Too simple?
Just a quick copy-paste from a CodePen site to show a Web Component can be created in 5 minutes
Site: https://cylinder-toggle.github.io/
Repo: https://github.com/cylinder-toggle/cylinder-toggle.github.io
<exec-code>
No comment 😇
Site: https://exec-code.github.io/
Repo: https://github.com/exec-code/exec-code.github.io
Top comments (0)