+ 4

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

This is the messenger https://sololearn.com/compiler-playground/W7GDMuFc8d4V/?ref=app

26th Aug 2024, 10:13 PM
Lerigeo Xingpaa
Lerigeo Xingpaa - avatar
14 Respuestas
+ 1
hey i really love it !
11th Sep 2024, 12:01 PM
Jacob Dhempsy
Jacob Dhempsy - avatar
+ 3
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 ❤️
26th Aug 2024, 10:56 PM
Lorenzo Spadoni
Lorenzo Spadoni - avatar
+ 2
First of all, thank you, Lorenzo. I appreciate your help. And yes, how do I solve the error?
27th Aug 2024, 10:04 AM
Lerigeo Xingpaa
Lerigeo Xingpaa - avatar
+ 2
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 😉).
27th Aug 2024, 11:25 PM
Lorenzo Spadoni
Lorenzo Spadoni - avatar
+ 2
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.
28th Aug 2024, 9:05 PM
Lerigeo Xingpaa
Lerigeo Xingpaa - avatar
+ 2
Yes, if I need any assistance in the future, I’ll be sure to request it.
28th Aug 2024, 9:18 PM
Lerigeo Xingpaa
Lerigeo Xingpaa - avatar
+ 1
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!
27th Aug 2024, 10:30 AM
Lorenzo Spadoni
Lorenzo Spadoni - avatar
+ 1
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.
27th Aug 2024, 1:28 PM
Lorenzo Spadoni
Lorenzo Spadoni - avatar
+ 1
You did a great job
27th Aug 2024, 2:04 PM
Oluwaseun
Oluwaseun - avatar
+ 1
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.
27th Aug 2024, 3:32 PM
Lorenzo Spadoni
Lorenzo Spadoni - avatar
+ 1
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
27th Aug 2024, 3:36 PM
Lorenzo Spadoni
Lorenzo Spadoni - avatar
+ 1
hi
28th Aug 2024, 2:44 PM
Benjamin Barnedo
+ 1
찬에라 OMG thank you so much! Let me know if you ever want a code review, a code challenge or just a talk! Cheers!
28th Aug 2024, 9:09 PM
Lorenzo Spadoni
Lorenzo Spadoni - avatar
0
Thank you jacob dhempsy Love from korea
12th Sep 2024, 12:33 PM
Lerigeo Xingpaa
Lerigeo Xingpaa - avatar