Danny Engelman 🌷🏍️🛥️

The power of Undefined Custom Elements (standard available since 2016 yes! 2016) WITHOUT using ANY JavaScript What valid HTML do you want to write creating a *rotating* Solar System? Original DIV soup: learning-axis.com/snippets/5343/ No JavaScript! Web Component: jsfiddle.net/WebComponent...

7 years past, the NDA has expired… Maybe Web Components get such a bad rap because they're too often presented as ordinary, boring code. This is how we introduced our very first Web Component in our internal project *Orbit*: <star-rating> ⭐⭐⭐⭐⭐ It still shines. www.youtube.com/watch?v=ROcj...

It has been some time since Rich and Ryan published their "𝘐 𝘭𝘰𝘷𝘦 𝘞𝘦𝘣 𝘊𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵𝘴" posts. Another "Web Components Failed!" popped up on DEV.to yesterday. My longish comment turned into a post dev.to/dannyengelma...

5 months later... Better model... or is it? ChatGPT is back to the old answer: 𝙏𝙝𝙚 8-𝙡𝙚𝙩𝙩𝙚𝙧 𝙬𝙤𝙧𝙙 𝙞𝙨 𝘾𝙃𝙀𝘾𝙆𝙈𝘼𝙏𝙀 sigh... that's NINE letters, you idiot

FYI In Chrome 152 there is a custom-element pill available in DEV-tools Elements If it is a *defined* Custom Element/Web Component a click takes you to the JavaScript source code For a *undefined* Custom Element the pill is still displayed but nothing happens FireFox did this since 2018 Safari?

85 years ago today, Ed Roberts was born Ed who? The guy whose Altair 8800 ignited the PC revolution 𝙞𝙣 1975 I wanted to explain Web Components with <𝙩𝙤𝙜𝙜𝙡𝙚-𝙨𝙬𝙞𝙩𝙘𝙝> 𝙖𝙣𝙙 <𝙙𝙞𝙨𝙥𝙡𝙖𝙮-𝙗𝙞𝙩> Then Claude built the whole damn Altair I only tweaked it… 𝙖 𝙗𝙞𝙩 𝙤𝙧 𝙗𝙮𝙩𝙚.. or more the-altair-8800.github.io

www.youtube.com/watch?v=KKoa... She is good, and only getter better

The AI I grew up with in the late '70s: www.youtube.com/watch?v=NmjP...

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

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...

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

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...

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...

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 &lt;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

I love semantic HTML

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...

In which Web Component can you disable shadowDOM with 2 keystrokes? #webcomponents

𝙄𝙩𝙨 35+𝘾 / 95+𝙁 𝙝𝙚𝙧𝙚 𝙞𝙣 𝘼𝙢𝙨𝙩𝙚𝙧𝙙𝙖𝙢 𝙄 𝙖𝙢 𝙤𝙣𝙡𝙮 𝙪𝙨𝙞𝙣𝙜 𝙨𝙝𝙖𝙙𝙤𝙬𝘿𝙊𝙈 𝙩𝙤𝙙𝙖𝙮 😎

Its only slightly more code... which I trained GitHub CoPilot to create, so I am hardly using more keystrokes than a library.

my entry for the StackOverflow "cipher" Challenge is online "𝘞𝘩𝘢𝘵 𝘭𝘦𝘵𝘵𝘦𝘳 𝘪𝘴 𝘥𝘪𝘴𝘱𝘭𝘢𝘺𝘦𝘥 𝘰𝘯 𝘵𝘩𝘪𝘴 𝘣𝘰𝘢𝘳𝘥?" ChatGPT can decipher a simple one, not the 'complex' ones humans can decipher. 100% Vanilla Web Components build on top a <chess-board> I wrote in 2020 stackoverflow-challenges.github.io/cipher/

<fit-text> Web Component jsfiddle.net/WebComponent... fit-text.github.io kizu.dev/fit-to-width... Cool CSS #webcomponents

No need to write Web Components like: 𝙨𝙪𝙥𝙚𝙧(); 𝙩𝙝𝙞𝙨.𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({𝙢𝙤𝙙𝙚: '𝙤𝙥𝙚𝙣'}); 𝙩𝙝𝙞𝙨.𝙨𝙝𝙖𝙙𝙤𝙬𝙍𝙤𝙤𝙩.𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = `` you can write: 𝙨𝙪𝙥𝙚𝙧() .𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({𝙢𝙤𝙙𝙚: '𝙤𝙥𝙚𝙣'}) .𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = `` #webcomponents