0.2 - 2% of users have no JavaScript !!!!!!!! Less than 26% of internet users understand English User Language Distribution: English: 25.9% Chinese: 19.4% Spanish: 7.9% Arabic: 5.2% Should I focus on a no-JavaScript Web Component or translate my Web Component to other languages? #webcomponents
Danny Engelman ๐ท๐๏ธ๐ฅ๏ธ
@engelman.nl
I do modern Web Component Development with technologies supported by **all** WHATWG partners (Apple, Google, Microsoft & Mozilla) ๐จ๐ปโ๐ปTRS-80 Scriptkiddie '79+ ๐ Computer Science '87 - '92 โค๏ธ Online since 1990 yes! 1990 I started with Email and Gopher
I can program: 70s Assembly ๐ค๐ฎ๐ฑ ๐ข๐น, ๐ฃ๐น ๐ซ๐ญ ๐๐ฆ๐ด๐ด ๐ฎ๐ฐ๐ท ๐ธ๐ฐ๐ณ๐ฅ [๐],1 ๐ซ๐ฎ๐ฑ ๐๐ฐ๐ต๐ฉ ๐๐ฆ๐ด๐ด: ๐ฎ๐ฐ๐ท ๐ธ๐ฐ๐ณ๐ฅ [๐],-1 80s BASIC ๐๐ ... ๐๐๐๐ ... ๐๐๐๐ ... 90s C [๐ต๐บ๐ฑ๐ฆ] ๐ณ๐ฆ๐ด๐ถ๐ญ๐ต = (...) ? ... : ...; 00s JavaScript ๐ช๐ง (...) { ... } ๐ฆ๐ญ๐ด๐ฆ { ... } Natural Language Programming: ๐๐ ... ๐ฉ๐๐๐ฃ ... ๐๐ก๐จ๐ ...
ChatGPT 5.5 is the first AI to decypher the 8 letter word. Older versions could never "think" outside of the box and kept "thinking" chessboard only. ChatGPT 5.5 (extra high setting) now "sees" the pixels, still took SEVEN minutes! What is the 8 letter word? Humans can solve this in minutes
Youtubers half my age try to sell me courses how to Analyse for and Design AI systems Should I tell them they do not have to create their own stories or slides?? The implementation Technology has changed, the core SA/SD process hardly has, since my first Computer Science class 40 years ago
I am building a Web Components course This is lesson #1 ๐๐ก๐๐ข๐๐ฃ๐ฉ๐๐ง๐ฎ ๐๐๐ ๐พ๐ค๐ข๐ฅ๐ค๐ฃ๐๐ฃ๐ฉ๐จ ๐๐ฃ๐ค๐ฌ๐ก๐๐๐๐ ๐๐ง๐ค๐ข ๐ฎ๐ค๐ช๐ง ๐ฟ๐๐ซ ๐พ๐ค๐ฃ๐จ๐ค๐ก๐ ๐ฅ๐ฐ๐ค๐ถ๐ฎ๐ฆ๐ฏ๐ต.๐ฃ๐ฐ๐ฅ๐บ.๐ช๐ฏ๐ฏ๐ฆ๐ณ๐๐๐๐ = "<๐ฎ๐บ-๐ฆ๐ญ๐ฆ๐ฎ๐ฆ๐ฏ๐ต/><๐ข๐ฏ๐ฐ๐ต๐ฉ๐ฆ๐ณ๐ฆ๐ญ๐ฆ๐ฎ๐ฆ๐ฏ๐ต/>"; $("๐ฎ๐บ-๐ฆ๐ญ๐ฆ๐ฎ๐ฆ๐ฏ๐ต").๐ค๐ฐ๐ฏ๐ด๐ต๐ณ๐ถ๐ค๐ต๐ฐ๐ณ.๐ฏ๐ข๐ฎ๐ฆ $("๐ข๐ฏ๐ฐ๐ต๐ฉ๐ฆ๐ณ๐ฆ๐ญ๐ฆ๐ฎ๐ฆ๐ฏ๐ต").๐ค๐ฐ๐ฏ๐ด๐ต๐ณ๐ถ๐ค๐ต๐ฐ๐ณ.๐ฏ๐ข๐ฎ๐ฆ #nojavascript #webcomponents #nomoredivsoup
I showed them HyperLinks, they said it had no Images Showed them Images, ... couldn't be styled ... CSS, ... wasn't interactive JavaScript ... different in all browsers jQuery wasn't native code Web Components; Apple doesn't support Customized BuiltIns and now they complain about LLMs
Pie-day Pie-meister <๐ฅ๐๐-๐๐๐๐ง๐ฉ> <๐จ๐ก๐๐๐ ๐จ๐๐ฏ๐="90" ๐จ๐ฉ๐ง๐ค๐ ๐="๐๐ง๐๐๐ฃ">๐๐๐๐</๐จ๐ก๐๐๐> <๐จ๐ก๐๐๐ ๐จ๐๐ฏ๐="1" ๐จ๐ฉ๐ง๐ค๐ ๐="๐ง๐๐">๐ ๐๐ซ๐๐๐๐ง๐๐ฅ๐ฉ</๐จ๐ก๐๐๐> <๐จ๐ก๐๐๐ ๐จ๐๐ฏ๐="9" ๐จ๐ฉ๐ง๐ค๐ ๐="๐๐ก๐ช๐">๐พ๐๐</๐จ๐ก๐๐๐> </๐ฅ๐๐-๐๐๐๐ง๐ฉ> dev.to/dannyengelma...
What Web technologies are required to draw a Pie Chart in 2021? (spoiler alert: a standard Web Component will do) ๐ฅง
Using Web Components to draw Pie Charts with semantic HTML
dev.to
I was a programmer code writes itself now painting became my hobby
flagmeister.github.io Syria has a new flag... I hadn't updated this Web Component since 2020 So glad I am not using any Framework or BaseClass its just Native JavaScript. No update hell whatsoever Edit - Save - Commit - DONE in minutes
FlagMeister.github.io
FlagMeister 250+ SVG Flags in one 32KB Custom Element/Web Component
flagmeister.github.io
Some people still don't get shadowDOM. The main reason shadowDOM exists is on the other side of the boundary!! For many moons now all complex tags like <video> are created with Web Components technology. Not (only) to keep us mortal developers OUT, but (mainly) to keep styles IN #webcomponents
For the woke people who think every gender, race and mental state has a right to live; but state Web Components shadomDOM should die shadow-style.github.io #webcomponents
One 3 line AI prompt created: shadow-style.github.io too lazy to enter a second prompt, I was only exploring content for my Web Component course
LOL "decode this cypher word, each letter on a chessboard" GPT5 said: CHECKMATE (WTF 9 letters) GPT5.1 said PAWNSTAR (great answer, but wrong) GPT5.2 said: CONFUSED (also a great answer) Will GPT666 get it right?
shadowDOM is older than React But us mortal Web Component developers couldn't use it till years later ๐จ๐๐ฃ๐๐ ๐ฌ๐๐๐ฃ ๐๐ค๐๐จ ๐ช๐จ๐๐ง-๐๐๐๐ฃ๐ฉ ๐จ๐๐๐๐ค๐ฌ๐๐ค๐ค๐ฉ ๐๐ญ๐๐จ๐ฉ ๐๐ฃ ๐ฉ๐๐ ๐๐ง๐ค๐ฌ๐จ๐๐ง๐จ? #webcomponents
september 25th 2025, a young man's superintelligent AI system tells him that he must go on a date or face certain suicide from loneliness. It's a tall order for a guy who hasn't left his apartment in 42 days and is more than happy to stay at home with technology. www.youtube.com/watch?v=NZ8G...
Sci-Fi Short Film โA Date in 2025" | DUST
YouTube video by DUST
youtube.com
What word is spelled? ChatGPT thought for 7 minutes and 17 seconds, and said: ๐๐ผ๐๐๐๐๐ผ๐ Wrong word, because AI is great at logic, but can't think... What word do you see?
Dear AI, You were trained on blog-posts that do not show the chaining of super in: super().attachShadow({mode:"open"}) That does not make your statement below right. super() DOES return the this scope
AI is trainend on "old" code It has no clue what can be done in modern browsers dashed-html.github.io
My StackOverflow challenge entry, built with Chessboard Web Components stackoverflow-challenges.github.io/cipher/index... Became the simplest LLM quality tester GPT5:
Am I wrong? I think we all have been using Custom Elements not to its full extend You can use Custom Elements/Web Components? (which extend from HTMLElement) *Without* using any JavaScript! Am I wrong? dev.to/dannyengelma...
Not a DIV inside/in sight/site
<tag-name></tag-name> ANY tagname with a dash is a valid...
dev.to
Are you defining your UI Web Components *before* DOM is parsed? Or are you fighting FOUCs because you defined your UI Web Components (too) late *after* DOM was parsed (using defer, import module or readystate/DOMContentLoaded)
What color is the Web Component background? โน๏ธ Error, super() must come first in the constructor โน๏ธ Red, ::part styles parts inside shadowDOM โน๏ธ Not Red, ::part in the host container can style parts โน๏ธ Not Green, the Web Component is 0 height Multiple answers possible jsfiddle.net/WebComponent...
Had some fun turning a String into an SVG, creating an animated PacMan. The <sprite-meister> Web Component reads a Template Literal String, processes variables AND functions (pulse, ease and rotate) then creats ONE SVG with 24 frames. All client-side. jsfiddle.net/WebComponent... PacMan code:
๐ฟ๐ค๐ฃ'๐ฉ ๐จ๐๐ค๐ค๐ฉ ๐ฎ๐ค๐ช๐ง๐จ๐๐ก๐ ๐๐ฃ ๐ฉ๐๐ ๐๐ค๐ค๐ฉ ๐๐ฃ๐ ๐๐ก๐๐ข๐ ๐ฉ๐๐ ๐๐ช๐ฃ! OP: "๐ธ๐ฆ๐ฃ ๐ค๐ฐ๐ฎ๐ฑ๐ฐ๐ฏ๐ฆ๐ฏ๐ต๐ด ๐ช๐ฏ๐ด๐ต๐ข๐ฏ๐ต๐ช๐ข๐ต๐ฆ ๐ช๐ฏ ๐ต๐ฉ๐ฆ ๐ฐ๐ณ๐ฅ๐ฆ๐ณ ๐ต๐ฉ๐ฆ๐ช๐ณ ๐ฅ๐ฆ๐ง๐ช๐ฏ๐ฆ() ๐ฎ๐ฆ๐ต๐ฉ๐ฐ๐ฅ๐ด ๐ข๐ณ๐ฆ ๐ค๐ข๐ญ๐ญ๐ฆ๐ฅ ๐ช๐ฏ ๐๐ข๐ท๐ข๐๐ค๐ณ๐ช๐ฑ๐ต. ๐๐ฉ๐ฆ ๐๐๐๐ ๐ฐ๐ณ๐ฅ๐ฆ๐ณ ๐ฅ๐ฐ๐ฆ๐ด๐ฏโ๐ต ๐ฎ๐ข๐ต๐ต๐ฆ๐ณ" NO! WCs defined *BEFORE* DOM is parsed execute in DOM order WCs defined *AFTER* DOM is parsed execute in define() order
There are THREE types of "Custom Elements" NOT using any Web Components core technology: โ Custom Elements API โ Templates โ shadowDOM then creating a HTML tag, by only typing <๐ฉ๐๐-๐ฃ๐๐ข๐>...</๐ฉ๐๐-๐ฃ๐๐ข๐> Have I then created a "Web Component" โ๏ธ You tell me... dev.to/dannyengelma... #webcomponents
Since its impossible to edit BlueSky posts, and they are <sent-and-forgotten> posts anyway, I made my post a blogpost. #webcomponents / Web Components ๐๐ค๐ฉ ๐ ๐ฟ๐๐ ๐๐ฃ๐จ๐๐๐/๐๐ฃ ๐จ๐๐๐๐ฉ/๐จ๐๐ฉ๐ dev.to/dannyengelma...
Not a DIV inside/in sight/site
<tag-name></tag-name> ANY tagname with a dash is a valid...
dev.to
Still writing DIV-soup? ANY tagname with a dash becomes a valid HTMLElement, NOT HTMLUnknownElement as some gurus claim. That means you can replace ALL DIVs with semantic HTML. Absolutely NO JavaScript required, only HTML and CSS! Should we call them "Web Components"? You tell me #webcomponents