Windows + Chrome... Not sure what input I could offer... it's like the entire application is rendered three times... scrollbar on the right... I didn't interact much, so unsure if it's from the start or each interaction. It is a bit of an odd behavior... the models for all three seem to be the same as changes in one change the others.
Coll... didn't dig in as I don't have time. Advice below.
These *should* be SVG based with minimal JS and not using any heavy libraries... none of this should add more than a couple kb to your payload. So evaluate what you're using.
I've seen a lot of poor practice in terms of using shared UI libraries, many include far more than they ever should.
Should add a note that for..of over strings will give you surrogate pairs and is the most reliable means of doing so for Unicode sets.
// will only print one line for the pair.
for (const c of '\uD83D\uDE00') {
console.log('-', c);
}
This is a pretty good demonstration of the pattern. I will say that in practice, I would prefer to simply use bare object syntax over the use of new with constructor functions. When I do use constructors, I'd now prefer the class syntax.
class Employee {
constructor(type, name) {
this.type = type;
this.name = name;
}
}
class Developer extends Employee {
constructor(name) {
base("Developer", name);
}
}
class Tester extends Employee {
constructor(name) {
base("Developer", name);
}
}
class EmployeeFactory {
static types = [
Developer,
Tester,
}
create(type, name, ...options) {
const TypedEmployee = EmployeeFactory.types[type];
return TypedEmployee && new TypedEmployee(name, ...options);
}
}
I did put type before name above, as imho it should be first as this will work better with a spread operator.
The size of this library could be problematic... I'm unsure of the dependency on @babel/core as this should not be relying on that level of translation for a shared component library.
I'm not the one who down-voted, all the same, still would be cautious in its' use. Would be better to publish the mjs modules directly instead of translating, or only transforming those specific features needed for this module in its' output.
It is also missing a LICENSE file in the project, even though MIT is marked in the package.json.
missing `label > input[type=checkbox] + span` and related for styling checkbox and radio input... by practice, I will wrap them in a label, and separate the text for the label next to the input element.
<label>
<input type="checkbox ...>
<span>text</span>
</label>
This way you can use the checked, etc and hide the input control and insert a custom graphic or character before the span to stylize the control itself and the text, where the label wrapping will capture mouse clicks or spacebar activation and toggle the input itself.
Should add a note that for..of over strings will give you surrogate pairs and is the most reliable means of doing so for Unicode sets. // will only print one line for the pair. for (const c of '\uD83D\uDE00') { console.log('-', c); }This is a pretty good demonstration of the pattern. I will say that in practice, I would prefer to simply use bare object syntax over the use of new with constructor functions. When I do use constructors, I'd now prefer the class syntax. class Employee { constructor(type, name) { this.type = type; this.name = name; } } class Developer extends Employee { constructor(name) { base("Developer", name); } } class Tester extends Employee { constructor(name) { base("Developer", name); } } class EmployeeFactory { static types = [ Developer, Tester, } create(type, name, ...options) { const TypedEmployee = EmployeeFactory.types[type]; return TypedEmployee && new TypedEmployee(name, ...options); } } I did put type before name above, as imho it should be first as this will work better with a spread operator.missing `label > input[type=checkbox] + span` and related for styling checkbox and radio input... by practice, I will wrap them in a label, and separate the text for the label next to the input element. <label> <input type="checkbox ...> <span>text</span> </label> This way you can use the checked, etc and hide the input control and insert a custom graphic or character before the span to stylize the control itself and the text, where the label wrapping will capture mouse clicks or spacebar activation and toggle the input itself.