validation confusion

[Pavel]

Hi,

please see https://validator.w3.org/nu/?doc=https://forallthetime.com/BI-R/location.html

i am not sure how to fix this 🙁

i dont even know what this means!

help me out with the proper code and an explanation 🙂

thanks!

 

[cbreemer]

Hi,

please see https://validator.w3.org/nu/?doc=https://forallthetime.com/BI-R/location.html

i am not sure how to fix this 🙁

i dont even know what this means!

The message is clear enough ! You have an extremely long URL which is broken up by two linefeeds. You cannot just split lines like that, HTML does not expect a linefeed in the middle of a string. If you really want to hard code such an URL (I have my doubts about it) put it on one line, or else
construct the string in JS, where you can use multiple lines, and then assign it to the element.

It's good that you use the validator 👍🏻 You also need to think a little bit about what it says though 😉

 

[Pavel]

The message is clear enough ! You have an extremely long URL which is broken up by two linefeeds. You cannot just split lines like that, HTML does not expect a linefeed in the middle of a string. If you really want to hard code such an URL (I have my doubts about it) put it on one line, or else
construct the string in JS, where you can use multiple lines, and then assign it to the element.

It's good that you use the validator 👍🏻 You also need to think a little bit about what it says though 😉

thanks!

i got this URL from Google Maps, as you can see on the top

unfortunately i know VERY little JS

If you really want to hard code such an URL (I have my doubts about it) put it on one line,

ok, what would that look like? how do i make that work?

how about giving me the code AND i can take away from this expereince your remarks above 🙂

out of curiousity, what hapens if i leave the error in the code.. not remove it or fix it.. just leave it?

help, please

THANK YOU!

 

[cbreemer]

unfortunately i know VERY little JS

So you keep saying. Why not work on it ? You can hardly be a web developer without knowing your way around JS.

ok, what would that look like? how do i make that work?

how about giving me the code AND i can take away from this expereince your remarks above 🙂

<-- Instead of specifying "src", give the iframe an "id" so you can access it programmatically -->
 <iframe id="foobar" width="300" height="150" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

// Construct multiline string using backquotes
const src =`https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3214.452269796085!2d-75.
81674272361101!3d36.325587194308675!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89a
52ed10c85b64d%3A0xcceffc4fcf0d0a15!2sOrions%20Way%2C%20Corolla%2C%20NC%2027927!5e0!3m2!1sen
!2sus!4v1709002116691!5m2!1sen!2sus`

// Assign string to the "src" attribute of the element with id "foobar"
foobar.src = src;

out of curiousity, what hapens if i leave the error in the code.. not remove it or fix it.. just leave it?

Most probably it will not work. Or maybe it will, despite the error. But in my humble opinion, not fixing errors is just about the worst habit a developer can have. Don't even think about it.

 

[Pavel]

You can hardly be a web developer without knowing your way around JS.

good advice! i would love to learn JS🙂

we have already discussed learning dev tools

tell me, what should i prioitize?

where is my time best spent?

thanks!

do i owe you a $0.25 now 🙂

 

[cbreemer]

Don't consider them separate learning paths. When you work with JS you will meet the Console, and you should invoke the debugger to step through your code. When you work with HTML and CSS you should use the DOM inspector, for example to check is an element has the styles you think it should. When you are curious about what goes on between you and the web server, used the Network tab to see all the requests.
DevTools should be your friend in all you do.

 

[Pavel]

great, THANKS!

Don't consider them separate learning paths

good thing to know!

When you work with JS you will meet the Console, and you should invoke the debugger to step through your code.

please tell me how the debugger works.... maybe a (very) simple example


wish me luck 🙂

a final thought. i am ALMOST finished with that project you helped me with so i will wrap that up soon

lets both be patient

your above HTML and JavaScript code maybe the final piece of the puzzle 🙂

ok... JS here i come!!

thanks again!!

 

[cbreemer]

please tell me how the debugger works.... maybe a (very) simple example

That is not so easily told. And it's a bit like asking "please tell me how to drive a car". You just need to get up and DO it.

Just search around and pick a beginner's tutorial like this one that looks useful.

 

[Pavel]

WOW!

that looks great!

thanks!


off topic, I have worked as a professional juggler... i have even been published!

You just need to get up and DO it.

is accurate for juggling too 🙂

 

[cbreemer]

Good. So now you can juggle these breakpoints and watches 🤪

 

[Pavel]

So you keep saying. Why not work on it ? You can hardly be a web developer without knowing your way around JS.

<-- Instead of specifying "src", give the iframe an "id" so you can access it programmatically -->
 <iframe id="foobar" width="300" height="150" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

// Construct multiline string using backquotes
const src =`https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3214.452269796085!2d-75.
81674272361101!3d36.325587194308675!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89a
52ed10c85b64d%3A0xcceffc4fcf0d0a15!2sOrions%20Way%2C%20Corolla%2C%20NC%2027927!5e0!3m2!1sen
!2sus!4v1709002116691!5m2!1sen!2sus`

// Assign string to the "src" attribute of the element with id "foobar"
foobar.src = src;

Most probably it will not work. Or maybe it will, despite the error. But in my humble opinion, not fixing errors is just about the worst habit a developer can have. Don't even think about it.

BINGO!

your code worked and i am validated!

THANK YOU!

 

[tomliv]

BINGO!

your code worked and i am validated!

THANK YOU!

Interesting. I am very curious as to why the iframe url could not just be left on one line in the html.

 

[cbreemer]

Interesting. I am very curious as to why the iframe url could not just be left on one line in the html.

Indeed. Perhaps it was pasted in several steps, (inadvertently) adding a linefeed with each step. Quite weird that you should have to reassemble the URL in Javascript 🤔

 

[tomliv]

Indeed. Perhaps it was pasted in several steps, (inadvertently) adding a linefeed with each step. Quite weird that you should have to reassemble the URL in Javascript 🤔

Your solution is handy when access to the html (or where ever the url is) is not possible.