Hello guys, I made the messenger. Is there any mistake in this? Also, please comment.

Question

This is the messenger

https://sololearn.com/compiler-playground/W7GDMuFc8d4V/?ref=app

Answer 1

hey i really love it !

Answer 2

Hey, love your messenger's style!

Although when I try to run your app I get a TypeError in the console.

I noticed that you are trying to add an event listener to your input field, but the input field is null as the JS is running BEFORE the HTML il rendered.

Normally, you would use the defer attribute on the script tag that imports the JS, but since Sololearn doesn't let you do that I would recommend you wrap your code in a DOMContentLoaded event listener. This will ensure that your JS will run after your HTML has been rendered.

Let me know if you need help fixing it ❤️

Answer 3

First of all, thank you, Lorenzo. I appreciate your help. And yes, how do I solve the error?

Answer 4

Bob_Li

I'm not a JS framework apologist, I'm not even a best practice apologist, that's just what you want to believe to validate your rubbish.

From your first stack overflow link's best answer:

"Both work exactly the same, but the custom tag design is aligned with the Custom Elements spec..."
I'll link the official HTML docs for custom elements
https://html.spec.whatwg.org/multipage/custom-elements.html
Also:
https://www.webcomponents.org/specs#:~:text=The%20Custom%20Elements%20specification,-This%20section%20applies&text=Following%20the%20Custom%20Elements%20spec,be%20defined%20by%20the%20author.

The keyword you are missing here is DEFINED.

You need to DEFINE a custom tag so that the browser knows that it's a custom tag and not malformed HTML (that is when you use a non-existing HTML tag like you advocate for 😉).

Answer 5

Maybe it’s fixed now. I have added the JavaScript that I had written. Thank you Dear all friends. Also, I mentioned everyone’s name in the JavaScript comments. We will help each other in the future and make the world better.

Answer 6

Yes, if I need any assistance in the future, I’ll be sure to request it.

Answer 7

I've made a simple bugfix of your code:

https://sololearn.com/compiler-playground/WNT4i3CEH8da/?ref=app

The other user recommends the use of custom tags, you can do that but personally I'm not the greatest fan of Web components, plus it's kind of a simple project I wouldn't go as far as to use them.

Either way, let me know if you need anything!

Answer 8

Bob_Li Yes, but you NEED to use JS to define the custom elements you're using. For two reasons:

the first one: custom elements (that is Web Components) are bad for SEO if they are replacing semantic HTML tags , so they need to be used with caution, and always with ARIA labels.

the second one: the browser switches to quirks mode to ignore the fact that you are using undefined elements. The fact that it tolerates undefined tags does not mean you should use them, especially since, again, a page that uses non-existing, non-defined tags will be downvoted by search engines.

In short, Web Components are the only valid way to use custom tags.

Answer 9

You did a great job

Answer 10

Bob_Li You are wrong on so many ways.

SEO is not irrelevant, although there has been a significant shift not all your visitors can come from targeted advertising, if you want to be indexed by Google you will have to have pretty good Lighthouse scores. Not only that, but SEO requirements overlap with screen reader requirements.
But that is not the question at hand...

Web Components are the product of an API that allows developers to create their own custom elements either from scratch or inheriting from an already existing element and if required add custom functionality.

What you call "custom tags", are just a byproduct of browsers not outright breaking web pages when they see something that doesn't make sense. They are bad practice, make other developers confused on what is happening in your code (by making code less readable), may not work on older browser and may break functionality for SEO and most importantly screen readers.

Answer 11

Bob_Li

This has nothing do with whether or not it's a leisure project, using undefined custom elements is bad practice. On the other hand I suggest you give a read to the relevant MDN documentation on the matter:
https://developer.mozilla.org/en-US/docs/Web/API/Web_components

Answer 12

hi

Answer 13

찬에라
OMG thank you so much!
Let me know if you ever want a code review, a code challenge or just a talk!
Cheers!

Answer 14

Thank you jacob dhempsy Love from korea