as promised, you can now extend builtins DOM elements with nonchalance and without needing at all the customElements global registry.
In fact, no polyfill is even needed and all modern browsers will just work.
Production size? 226 bytes up to 655 bytes!
Follow
@webreflection@mastodon.social 
@WebReflection
Web, Mobile, IoT: all JS things since 00's - opinions are my own ™
@webreflection@mastodon.social 🍥’s Tweets
How the Web Works: Understanding the Architecture of the Web: javascript.plainenglish.io/the-inside-sto #Web #HowInternetWorks #WebDevelopment #Protocol #WebArchitecture
1
2
to compare apples to apples I ended up proposing an alternative solutions that reasons well with JS prototypal inheritance nature, doesn't leak even secrets on foreign, non class related, objects 😱, and it performs as well if not better as lazy accessors!
1
Show this thread
I've prepared an ECMAScript meme for the incoming future if things don't change around current stage 4 class fields.
They said "it depends what you expect from the field in the constructor" or "if you need to do stuff with *subclasses* don't use fields"!
es.discourse.group/t/js-class-fie
2
4
6
Show this thread
it's "stage 4" they say ... "it's done" they say ... well change stages logic as 4 is when everyone starts using new features and concerns like this should be addressed 🤷
TL;DR OOP in JS like this requires a book a part because everyone else can "eff" off already 😢
1
Show this thread
I mean ... "even" PHP got this part of OOP right ... I've loved JS since about ever but this is a huge breaking of any fundamental principle around OOP and I'd be rather off the language if the future is so not-bright 🤮
1
1
Show this thread
in case it's still not clear what's the issue with class fields, please explain to me like I am 5 what the hell is going on here:
es.discourse.group/t/js-class-fie
2
2
Show this thread
a TC39 concerned post has been written!
go there to understand, beside events listeners, why class fields as specified right now are *not* good for developers out there (you included!)
2
2
5
Show this thread
21% knew it, 100% of participants should also read this!
thanks for participating 🙏
4
3
Show this thread
15 minutes left to answer this!
Quote Tweet
Back to OOP basics ... (I had a moment today!)
class A {
constructor() {
console.log(this.sub); // ?
}
}
class B extends A {
sub = 'B';
}
class C extends B {
get sub() { return 'C' }
}
const b = new B; // ?
b.sub; // ?
const c = new C; // ?
c.sub; // ?
Show this poll
1
1
JS Class fields potentially harmful (but TS class fields too)
5
11
30
Show this thread
probably no need to wait extra time as most people doesn't know or got it wrong, while others maybe cheated 😜
if you want to understand what happens and why class fields can be dangerous/problematic read this 👋
Quote Tweet
JS Class fields potentially harmful (but TS class fields too)
webreflection.medium.com/js-class-field
Show this thread
Show this thread
JS Class fields potentially harmful (but TS class fields too)
5
11
30
Show this thread
this is a reminder that for structuredClone there is this polyfill that does much more, allowing serialization that can be stored in any DB too 😉
I am not sure why core-js or Babel didn't consider it but if you know, let me know 👋
1
3
forgot to mention I've created an export that brings automatically Custom Elements lifecycle callbacks to any extend, when needed/desired ... and because the registries share nothing, one can have 2 of them, with or without CE features 😉
codepen.io/WebReflection/
1
Show this thread
Back to OOP basics ... (I had a moment today!)
class A {
constructor() {
console.log(this.sub); // ?
}
}
class B extends A {
sub = 'B';
}
class C extends B {
get sub() { return 'C' }
}
const b = new B; // ?
b.sub; // ?
const c = new C; // ?
c.sub; // ?
- B, B, C, C25.4%
- undefined, B, C, B21.1%
- undefined, B, C, C24.6%
- I don't even28.9%
114 votesFinal results
5
3
9
Show this thread
Back to OOP basics ... (I had a moment today!)
class A {
constructor() {
console.log(this.sub); // ?
}
}
class B extends A {
sub = 'B';
}
class C extends B {
get sub() { return 'C' }
}
const b = new B; // ?
b.sub; // ?
const c = new C; // ?
c.sub; // ?
- B, B, C, C25.4%
- undefined, B, C, B21.1%
- undefined, B, C, C24.6%
- I don't even28.9%
114 votesFinal results
5
3
9
Show this thread
"yeah *but* ... what about Custom Elements lifecycle events?" ... I can hear already this question in the air but "there's a module for that" on npm too (I made it ages ago 😇)
you can extend builtin with nonchalance and have Custom Elements behavior 🥳
3
1
8
Show this thread
I fully respect that developer intent and effort and yet I feel responsible for both of us wasting more time than needed ...
Lesson learned: next time I'll think twice before asking for a PR ... prioritization over wasted time looks like a better way forward in general.
2
4
Show this thread
latest LinkeDOM issue + PR was a good example from a developer that already went through the repo before ... the PR changed 16 files instead of 3 (2 better changes + test coverage).
I've spent more time to review the PR and discuss the Issue than fixing it myself right away 😅
1
3
Show this thread
what I've noticed over many years of OSS projects and contribution is that small projects receive PRs without related issues (also annoying) while bigger projects always start from an issue and rarely get the outsourced contribution, as that can take forever if not your code/repo
1
1
Show this thread
imho, the reason "PR welcome" doesn't often work is directly related to the size and complexity of the project.
Reading all gotchas behind a bug or a feature request can take pretty long time (specially to do the PR right).
Maybe we should lower our expectations when we ask that.
1
3
8
Show this thread
As I've exported the crawled and normalized data from MDN through the proxied-html-constrcutor module, I've thought: "why not showing such data to anyone interested?" ... and here it is:
1
1
5
combined with custom-function/factory, be ready for a new way to deal with custom builtin extends that don't even need a globally shared registry to work 😉
5
Show this thread
The DOM is missing a way to relate a tag name to its constructor, consequentially missing a way to also know all tag names possibly available on the DOM.
I've used manual / hacky ways to map HTML.A to HTMLAnchorElement + all others but it ends here 🥳
5
4
13
Show this thread
in which I've accidentally discovered a way to never encounter again the infamous "Illegal constructor" issue too 🔥🔥🔥
2
2
4
Show this thread
📣 I don't know if I'll ever use this module but somebody had to publish it: custom-function allows you to extend Function as class without needing code evaluation and enabling any sort of OOP magic around functions!
3
3
10
Show this thread
“no particular style groups could be attributed as a good style.” … we need robots to end debates, don’t we? 😅
Quote Tweet
Automated
Exploring the impact of code style in identifying good programmers (2022) arxiv.org/abs/2206.10891
new Set methods available as ungap polyfill:
github.com/ungap/set-meth
proposal that's being implemented soon here:
1
1
4
builtin-exend and the hell not supporting these bring to the Web ... bloated, slower, less accessibility friendly, do you still believe WebKit position on this is justified by Liskov substitution, when all the odds are against not supporting it?
1
2
Element.prototype.reorderChildren(attributeName) is being discussed *and* it could be used to have a native diffing engine:
12
while everyone seems to be OK with Rust .unwrap(), mostly nobody seems to welcome .valueOf() in JS.
Here where it's handy:
* signals, to implicitly "cast" for math or string opertaions
* proxies, as convention to return the wrapped value, when desired
* Object(primitive)
🦄
1
5
Here's Campsite's dark mode buttons. Light perception is key to beautiful borders and shadows. It involves many small details, but put together, can result in some really nice UI. Lastly, some real world code for ya to play with...
9
68
478
Show this thread
Once upon a time, Firefox implemented an Object.prototype. watch/unwatch ... those pages now state accessors or Proxies are a better way to do so, so I've brought watch/unwatch back via Proxy (which seems legit) 😇
Meet proxy-pants/watcher
4
P.S. to me ... I've found astonishing I've used HTTP Web Archive service to grab my old code from a "not mine anymore" domain and managed to reproduce this 15 years later without changing a single char in the code: this is the Web Standards feature I've been standing for till now
1
12
Show this thread
this demo is from 15+ years ago so for complains around code style or HTML practice please use your WC flush button ... or ... help me making this a modern JS go-to library to use for this very demanded and recurrent issue to solve 😇
1
1
Show this thread
What is A* (AStar) algorithm useful for?
You can check Wikipedia for technical details or this demo that shows how A* (path finder) solves in a 2D space steps to take from A to Z accordingly to its constraints 👍
webreflection.github.io/a-star/test/se
5
1
8
Show this thread
I mean, Dear , looking for a job usually happens in difficult times and not privileged constraints; it's not a tool to pay for, especially in desperate times ... recruiters and companies should pay for Premium but not people feeding your DB for free. Thanks for listening
3
Show this thread
worth clarifying: the reason is *not* that `thing` in this example is the same, the reason is that templates literals passed to tags are always the same, equally with function('same-string') always receive the same 'same-string' reference ... never cache templates tags ever 👋
1
Show this thread