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: ๐™„๐™› ... ๐™ฉ๐™๐™š๐™ฃ ... ๐™š๐™ก๐™จ๐™š ...

I am building a Web Components course This is lesson #1 ๐™€๐™ก๐™š๐™ข๐™š๐™ฃ๐™ฉ๐™–๐™ง๐™ฎ ๐™’๐™š๐™— ๐˜พ๐™ค๐™ข๐™ฅ๐™ค๐™ฃ๐™š๐™ฃ๐™ฉ๐™จ ๐™†๐™ฃ๐™ค๐™ฌ๐™ก๐™š๐™™๐™œ๐™š ๐™›๐™ง๐™ค๐™ข ๐™ฎ๐™ค๐™ช๐™ง ๐˜ฟ๐™š๐™ซ ๐˜พ๐™ค๐™ฃ๐™จ๐™ค๐™ก๐™š ๐˜ฅ๐˜ฐ๐˜ค๐˜ถ๐˜ฎ๐˜ฆ๐˜ฏ๐˜ต.๐˜ฃ๐˜ฐ๐˜ฅ๐˜บ.๐˜ช๐˜ฏ๐˜ฏ๐˜ฆ๐˜ณ๐˜๐˜›๐˜”๐˜“ = "<๐˜ฎ๐˜บ-๐˜ฆ๐˜ญ๐˜ฆ๐˜ฎ๐˜ฆ๐˜ฏ๐˜ต/><๐˜ข๐˜ฏ๐˜ฐ๐˜ต๐˜ฉ๐˜ฆ๐˜ณ๐˜ฆ๐˜ญ๐˜ฆ๐˜ฎ๐˜ฆ๐˜ฏ๐˜ต/>"; $("๐˜ฎ๐˜บ-๐˜ฆ๐˜ญ๐˜ฆ๐˜ฎ๐˜ฆ๐˜ฏ๐˜ต").๐˜ค๐˜ฐ๐˜ฏ๐˜ด๐˜ต๐˜ณ๐˜ถ๐˜ค๐˜ต๐˜ฐ๐˜ณ.๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ $("๐˜ข๐˜ฏ๐˜ฐ๐˜ต๐˜ฉ๐˜ฆ๐˜ณ๐˜ฆ๐˜ญ๐˜ฆ๐˜ฎ๐˜ฆ๐˜ฏ๐˜ต").๐˜ค๐˜ฐ๐˜ฏ๐˜ด๐˜ต๐˜ณ๐˜ถ๐˜ค๐˜ต๐˜ฐ๐˜ณ.๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ #nojavascript #webcomponents #nomoredivsoup

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

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

shadowDOM is older than React But us mortal Web Component developers couldn't use it till years later ๐™จ๐™ž๐™ฃ๐™˜๐™š ๐™ฌ๐™๐™š๐™ฃ ๐™™๐™ค๐™š๐™จ ๐™ช๐™จ๐™š๐™ง-๐™–๐™œ๐™š๐™ฃ๐™ฉ ๐™จ๐™๐™–๐™™๐™ค๐™ฌ๐™๐™ค๐™ค๐™ฉ ๐™š๐™ญ๐™ž๐™จ๐™ฉ ๐™ž๐™ฃ ๐™ฉ๐™๐™š ๐™—๐™ง๐™ค๐™ฌ๐™จ๐™š๐™ง๐™จ? #webcomponents

Screenshot of ChatGPT answer for: ๐™จ๐™ž๐™ฃ๐™˜๐™š ๐™ฌ๐™๐™š๐™ฃ ๐™™๐™ค๐™š๐™จ ๐™ช๐™จ๐™š๐™ง-๐™–๐™œ๐™š๐™ฃ๐™ฉ ๐™จ๐™๐™–๐™™๐™ค๐™ฌ๐™๐™ค๐™ค๐™ฉ ๐™š๐™ญ๐™ž๐™จ๐™ฉ ๐™ž๐™ฃ ๐™ฉ๐™๐™š ๐™—๐™ง๐™ค๐™ฌ๐™จ๐™š๐™ง๐™จ?
WebKit implemented shadowDOM (behind a browser flag) in 2012

๐˜ฟ๐™ค๐™ฃ'๐™ฉ ๐™จ๐™๐™ค๐™ค๐™ฉ ๐™ฎ๐™ค๐™ช๐™ง๐™จ๐™š๐™ก๐™› ๐™ž๐™ฃ ๐™ฉ๐™๐™š ๐™›๐™ค๐™ค๐™ฉ ๐™–๐™ฃ๐™™ ๐™—๐™ก๐™–๐™ข๐™š ๐™ฉ๐™๐™š ๐™œ๐™ช๐™ฃ! OP: "๐˜ธ๐˜ฆ๐˜ฃ ๐˜ค๐˜ฐ๐˜ฎ๐˜ฑ๐˜ฐ๐˜ฏ๐˜ฆ๐˜ฏ๐˜ต๐˜ด ๐˜ช๐˜ฏ๐˜ด๐˜ต๐˜ข๐˜ฏ๐˜ต๐˜ช๐˜ข๐˜ต๐˜ฆ ๐˜ช๐˜ฏ ๐˜ต๐˜ฉ๐˜ฆ ๐˜ฐ๐˜ณ๐˜ฅ๐˜ฆ๐˜ณ ๐˜ต๐˜ฉ๐˜ฆ๐˜ช๐˜ณ ๐˜ฅ๐˜ฆ๐˜ง๐˜ช๐˜ฏ๐˜ฆ() ๐˜ฎ๐˜ฆ๐˜ต๐˜ฉ๐˜ฐ๐˜ฅ๐˜ด ๐˜ข๐˜ณ๐˜ฆ ๐˜ค๐˜ข๐˜ญ๐˜ญ๐˜ฆ๐˜ฅ ๐˜ช๐˜ฏ ๐˜‘๐˜ข๐˜ท๐˜ข๐˜š๐˜ค๐˜ณ๐˜ช๐˜ฑ๐˜ต. ๐˜›๐˜ฉ๐˜ฆ ๐˜๐˜›๐˜”๐˜“ ๐˜ฐ๐˜ณ๐˜ฅ๐˜ฆ๐˜ณ ๐˜ฅ๐˜ฐ๐˜ฆ๐˜ด๐˜ฏโ€™๐˜ต ๐˜ฎ๐˜ข๐˜ต๐˜ต๐˜ฆ๐˜ณ" NO! WCs defined *BEFORE* DOM is parsed execute in DOM order WCs defined *AFTER* DOM is parsed execute in define() order

Pseudo code demonstrating Web Components defined *BEFORE* or *AFTER* DOM is parsed. *BEFORE* executes in DOM order, *AFTER* executes 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

Screen shot showing the 5 types of HTML Elements:
HTMLDivElement (standar HTML element)
HTMLUnknowElement
HTMLElement - UNdefined Custom Element
HTMLElement - Defined Named Custom Element
HTMLElement - Defined Unnamed Custom Element

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

&lt;tag-name&gt;&lt;/tag-name&gt; ANY tagname with a dash is a valid...

dev.to