Danny Engelman 🌷🏍️🛥️

@engelman.nl

96 Followers 64 Following

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

Developing with AI, The Architect, Builder & Restorer in me

8 chessboards with 8 letters

System Analysis and System Design books: People half my age are trying to sell me courses how to
(System) Analyse for and Design AI systems

Should I tell them they do not have to write their own stories or slides?

The implementation technology has changed,
the SA/SD process has not
since my first Computer Science class 40 years ago.

Elementary Web Component Knowledge from yor Dev Console:

(without JavaScript) ANY <tag-name> IS an HTMLElement

UNdefined Custom Elements are great for layout and styling

Lesson #1 from WCQ - A Web Components Course

Wrapping OPs Web Component in another Web Component to prevent his connectedCallback to run, then execute code to prove there is no innerHTML (tyet) Original code is then execute with super.connectedCallback()

Screenshot of ChatGPT answer for: 𝙨𝙞𝙣𝙘𝙚 𝙬𝙝𝙚𝙣 𝙙𝙤𝙚𝙨 𝙪𝙨𝙚𝙧-𝙖𝙜𝙚𝙣𝙩 𝙨𝙝𝙖𝙙𝙤𝙬𝙍𝙤𝙤𝙩 𝙚𝙭𝙞𝙨𝙩 𝙞𝙣 𝙩𝙝𝙚 𝙗𝙧𝙤𝙬𝙨𝙚𝙧𝙨?
WebKit implemented shadowDOM (behind a browser flag) in 2012

EVERY <tag-name> WITH a dash, IS a VALID HTMLElement, thus all DIV soup can be replaced with meaningful tagnames

SpiteMeister Web Component example: using one (Template Literal) string to animate a Hamburger Icon to an Arrow

Screenshots of AI generated "DIV-soup" code and Human generated code using modern Custom Elements (supported in all browsers since Edge switched to the Chromium engine) and many moons before in all Evergreen Browsers. The only DEFINED Custom Element is the one element that creates shadowDOM, all other Custom Elements allow for CSS styling BUT DO NOT! require JavaScript!

ANY! dashed <tag-name> creates UNdefined Custom Elements (just like DSD with a <template> does) BUT VALID HTMLElements you can style with CSS