Joe Pea

@joe.trusktr.io

928 Followers 292 Following

Building 3D HTML Elements ✨ https://lume.io Solid.js infra team. https://solidjs.com Custom Elements advocate. ⚒️ Google, Meta, SpaceX, NASA, IMVU, Fed Reserve, Chipotle

A screenshot of code using the @lume/element and classy-solid libraries to add signals, memos, and effects to a "FurryDog" custom element definition class by decorating a "years" class field with @numberAttribute to make it a reactive value that has values from DOM attributes coerced into numbers and assigned to it, decorating a readonly "dogYears" class getter with @memo and having it return a derived value being the "years" field multiplied by 7, and decorating a "#log" private method with @effect and having it read and log to console the "dogYears" property which in turn causes the method to automatically rerun any time that the "dogYears" property value changes. The class also shows a `template` with markup that renders the dogYears in a div, and a `css` property with scoped styling for the elements in the template.
A screenshot of code using the classy-solid library to add signals, memos, and effects to a "Dog" class definition by decorating a "years" class field with @signal to make it a reactive value, decorating a readonly "dogYears" class getter with @memo and having it return a derived value being the "years" field multiplied by 7, and decorating a "log" method with @effect and having it read and log to console the "dogYears" property which in turn causes the method to automatically rerun any time that the "dogYears" property value changes.
<element name="my-el" export> <attribute name="foo-bar" prop="fooBar" /> <h1>Value: ${this.fooBar}</h1> <style> h1 { color: red; } </style> </element>
A profile shot of my head from the right side, in dark light, with a bright light reflecting off the profile of my face so that only the outline of the front of my face is visibly lit, with colorful light bokehs scattered across the photo in front of the profile.
Screenshot showing a news outlet headline "Trump Guts Key Aviation Safety Committee, Fires Heads Of TSA, Coast Guard", followed by the words "7 Day Later", followed by screenshot of a news anchor on CNN Live video with the headline "60 Passengers, 4 crew on board in plane collision with Blackhawk".
The statement in this answer about "using regexes for parsing a limited, known set of HTML" is very valid. Example use case: making an html tagged template string function that accepts a limited HTML syntax that can be fully parsed with regexes is completely valid. Entire successful production applications are written this way, in fact. No one wants random gibberish in their human-written HTML.
A screenshot shows that Bluesky's UI verified my domain.
I picture of 100,000 bunny characters flying all over my iPhone screen.
Custom Elements logo, Custom Elements logo, Custom Elements logo
Web Components in the toilet logo.
A screenshot of the linked article.