Hey, I was going through the javascript tutorial and I found a small typo. 🔎

The typo can be found in this page in the following directory:

• Asynchronous javascript
  • Choosing the right approach
    • requestAnimationFrame()

The typo is in the following line:

You should, if at all possible, use this instead of setInterval()/recursive setTimeout(), unless you need a specific rate frame.

The word rate frame needs to be corrected to framerate. In all other places, framerate is used, this place alone needs to be corrected.

I'd be glad to do this change and I wanted to do a pull request on it, however, the explanation files cannot be found in this repo. It contains the code for the tutorials. 💻

It is a small typo but I still thought of letting you know! 😅

On the previous sessions (HTML and CSS), Active Learning was followed by a clear interactive feature. In CSS, it's not that clear (see just before this link).

It took me a while to figure that "the above example" or "in our example" was about the previous images. At first sight, I assumed it was a load error. This new approach both breaks the clear standard adopted so far and the interactivity.

A solution would be linking the image.

According to the marking guide one should wrap both addresses at the top each in an <address> element.
https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-finished/marking-guide.md
Isn't that wrong? In MDN it states:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address

According to this, wrapping the second address (Miss Eileen Dover) in an <address> element is definitely wrong.
I'm not sure about the first address (Dr. Eleanor Gaye), but I think it's okay, because it's the author of the letter.

Hi,

This commit fb60ed9#diff-0eab77173ff17cb7ef2c478598ec7739L9 removed all the HTML and made this course confusing:
https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Basics

@chrisdavidmills should we revert your commit?

Cheers

Hello,
I am not able to run the example for third-party API as posted https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube.

The error i received from Chrome is 'Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').'

I did get a key from Google using the instructions on index.html. I have tried to debug, the error seems to come from gapi.client.load. Please help.

Cheers,
Hannah

The map isn't showing correctly. It seems like the API key has limited requests.

https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html

https://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html

HI,
I tried reproducing your work but the browser throws the Not-a-function error on line 14 in the Javascript file learning-area/javascript/building-blocks/gallery/main.js
I wish how it could be worked around. Am using firefox 60.0.1 on linux

mentions the link http://html5shiv.googlecode.com/svn/trunk/html5.js, but it's 404.

Typo on line 43, should be "second".

when I right-click on the video and select show controls. Clicking on video plays it, but it doesn't remove class hidden.
Why is that?

Thanks for the IndexedDB example. Very helpful.

A minor suggestion: the database and object store are both called notes. In Chrome DevTools this creates a situation where you see the same word to describe different things.

Not sure if it's more obvious in Firefox DevTools.

For instructional purposes it might be more clear if the DB was called notesDB and the OS was called notesOS.

I am learning javascript, and here: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions

If you read down a little bit, it says "This effectively gives the variable a name; you can also assign the function to be the value of multiple variables, for example:" shouldn't it instead say "This effectively gives the function a name; you can also assign the function to be the value of multiple variables, for example:"

Hello there,

Im confused about the following code: planets-data.html wich is presented in the html tables asssesstment.
When i try to validate the code directly copied from your repository in https://validator.w3.org i got the following errors occur:

Error: A table row was 12 columns wide and exceeded the column count established using column markup (3).

I tryed to search about this topic on google, but I cant find proper solution. Another thing i noticed is, if i remove the "colgroup" tag at all the code seems to be validating fine with no errors. Why is this happening? Please help me understand it.

I was studying loops on https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code and they say you can exit a loop with break but if I remove the break statement on the code, the code works just the same. So what's the purpose of brek in the example?

"Finished for now...
So that's it for building the example — you got to the end, well done! Try your final code out, or play with our finished version here. If you can't get the example to work, check it against the source code."

No javascript is included in the source code. Just, an "Add your Javascript here".

Should the "check it against the source code" include the following:

In line 27 if I'm making it's value empty it is not working,
Something like this ('' => ' ')

input.value = ''; => input.value = " "; //this statement show's can't find if I left space in-between " "

In the eg code line 27 with space in-between (" ") and run the code, in input field 2nd try error occurs all the time

Is the CSS declaration "flex: 200px;" missing from the CSS code at the Wrapping section of the Flexbox lecture? It is mentioned on the content and the CSS doesn't seem to work properly without it.

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page

Hello, I am learning javascript via various places, one being MDN. They link here to the can-script.js file and there I see there is a bit of a scope issue which has thrown me off a bit.

When putting code like this in a file and running it, this script wide variable products is actually never assigned to outside of the fetch call, therefore it is completely unnecessary to declare it here. This leads to confusion because when trying to use this variable again after the initialise() function, it is undefined.

Either declare it inside the fetch and remove from the beginning of the file or show an example where fetch assigns to a variable outside its scope.

As the website has Server-side website programming section but this repo doesn't have its code.

As title.
Reproduce link: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods

Hi,
I have been studying simple-fetch.html and simple-fetch-chained.html examples in JS - asynchronous - promises section. They are very good tutorial, thank you.

However, I have discovered that there is an issue with the fetch() method. When the code runs, it returns the following message in the console. (Note: I save my html and jpg files on my desktop.)

Fetch API cannot load file:///Users/apple/Desktop/coffee.jpg. URL scheme must be "http" or "https" for CORS request.

It seems like we must use an image that is stored online, otherwise it won't work. I have tried to use fetch("https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg") and it is blocked and failed.

My workaround is to use a pseudo image URL (eg. https://picsum.photos/200/300) from https://picsum.photos.

Just want to point this out, cheers.

Hi there,
I'm not sure whether it's the correct section to ask what I'm going to ask in (if not, please let me know and delete this message).
I'm having a look at this HTML file —> learning-area/html/multimedia-and-embedding/responsive-images/responsive.html
and I can't get my head around my browser behaviour (I'm using Mozilla Firefox). I'm using the Web Developer tool and what I'm seeing is that when I change my screen's resolution width to 320px or less what I get is that my browser chooses the 480px image and as soon as I set my screen's resolution width wider than 320px (for example 321px) my browser goes straight for the 800px. The 320px image is not used at all. Why is my browser doing this instead of choosing the right images?

Thanks in advance for your reply

Fabio

Hi there,

I'm new for html and studying responsive.html this topic.
On firefox, I can clearly see the results on Network Inspector that browser would download different-width jpg files when I set different viewport width. With the same source code, however, I can't see the same results on Google Chrome, even disable the cache.
Is there something I don't recognize or Do I misunderstand the content?

Thanks a lot!!

Luke

Hi All
Since I am new in this topic and like I can’t automatically play a video with sound because Autoplay policy of modern browsers rulers, I was looking for some solution for this one.
I read that I can easily solve this issue by forcing a user interaction before you start to playback the video( for example adding a black background with a Click to play button) for it, Could you help me and give the code to do it in my own html file?
Thanks for your time
Best Regards
Alejandro Castan

I am following the instructions for Inheritance in JavaScript. When I add the line:

Teacher.prototype = Object.create(Person.prototype);

to my code and attempt to validate using Object.getOwnPropertyNames(Teacher.prototype) I do not see the functions listed on the prototype. Furthermore, when I attempt to run Person.prototype.greeting() or Teacher.prototype.greeting() I get an error referencing this on line 84.

Cannot read property 'first' of undefined
at Object.Person.greeting (oojs-class-inheritance-start.html:84)
at :1:18

This also happens when I try the same with the finished version of this code.

It appears to be a scoping issue but I am too new to javascript just yet to analyze what is going wrong.

Thanks.

After walking through the HTML Table Basics Article and learning how to style using HTML <col> and colgroup> elements I could not get my styles to show up by placing them in .

After visiting Stack Overflow it seems they're not supported and the current recommendation is to use CSS classes, however redundant that is.

Am I missing something?

Hello everyone,

Context :

• Applying the guide Video and audio content from MDN web docs
• Example videos from this GitHub project:
  rabbit320.mp4
  rabbit320.webm
• Browser version : Firefox 72.0.1 (64 bit)

Issue :

• When applying the guide, I get this error for both format (mp4 and webm) from the Firefox Console Inspector :
  Error Code: NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006) Details: static MP4Metadata::ResultAndByteBuffer __cdecl mozilla::MP4Metadata::Metadata(mozilla::ByteStream *): Cannot parse metadata

Workaround :

• Get the videos from the live example

Assumption :

• The video files from this project are obsolete for Firefox 72.0.1 (64 bit)

Possible resolution :

• Update the videos from this project with those in the live example

Thanks in advance and have a nice day !
Valsaa

As of January 1 2019, Mozilla requires that all GitHub projects include this CODE_OF_CONDUCT.md file in the project root. The file has two parts:

1. Required Text - All text under the headings Community Participation Guidelines and How to Report, are required, and should not be altered.
2. Optional Text - The Project Specific Etiquette heading provides a space to speak more specifically about ways people can work effectively and inclusively together. Some examples of those can be found on the Firefox Debugger project, and Common Voice. (The optional part is commented out in the raw template file, and will not be visible until you modify and uncomment that part.)

If you have any questions about this file, or Code of Conduct policies and procedures, please see Mozilla-GitHub-Standards or email [email protected].

(Message COC001)

The index.html file (provided via a link to the zip file on github) already has a pretty good summary attribute, but the assessment guide says it doesn't.

I am following https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Setting_up_Node_and_npm step by step. I have overcome most problems, seemingly down to the way NPM has been installed on my W10 machine, but I am stuck on the error "TypeError: gulp.task is not a function". I can't tell if this is because i have made a mistake somewhere or if i am calling an out of date / deprecated function on a newer version of npm. Is it possible to get a copy of a working sample for the full gulpfil.js please? Mine is attached.
gulpfile.js.txt

There is 3 if statements, the first if statement will override the two next following if sentences:

if(daySelect.value === "") {
  daySelect.value = previousDay - 1;
}

if(daySelect.value === "") {
  daySelect.value = previousDay - 2;
}

if(daySelect.value === "") {
  daySelect.value = previousDay - 3;
}

Github link (Line 149:):
https://github.com/mdn/learning-area/blob/master/html/forms/datetime-local-picker-fallback/index.html

Mozillas official site (last example - Line 70:):
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#JavaScript

To me, it looks like a error, what is the correct version?

Thanks :-)

In https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia#Accessible_audio_and_video_controls it is stated that video/audio native controls aren't keyboard accessible, which might've been true in the early ears after browsers implementing these elements. But I don't think that's the case today, the controls are keyboard accessible in Chrome, and certainly other browsers. However I'm not sure about the accessible names of the controls as I didn't use a screen reader to test it.

the given pattern also matches "|anana" or "|herry".
correction is "[bB]" in place of "[b|B]"

See http://stackoverflow.com/questions/43785607/inheritance-of-properties-through-passing-constructor-parameters
In general it is a good practise not to perform side effects (random) in constructors, but let the caller who creates the object do this.

var dogs = ["Thunder" , "Billy" , "Jonter" , "Lomber" , "Steward"];
var info = "The names of my dogs are: ";
var i =0;
while(i < dogs.length){
if(i === dogs.length -1){
console.log(info += " and " + dogs[i] + ".");
}
else{
console.log(info += dogs[i] + ",");
}
i++;
}

Above is the code i have and for some reason it does not print

The names of my dogs are: Thunder,Billy etc

instead it prints in this format

The names of my dogs are Thunder,
The names of my dogs are Thunder,Billy,
The names of my dogs are Thunder,Billy,Jonter,
The names of my dogs are Thunder,Billy,Jonter,Lomber,
The names of my dogs are Thunder,Billy,Jonter,Lomber and Steward.

i don't see what i have done wrong,maybe someone can help me,i'm not finding help anywhere else
link to the lesson :https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html

Everywhere hummus is meant, the word humous is used instead. Webster doesn't know that one. Just sayin'. Also on https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals there is an image of this page with no structure that will also need to be fixed since it says humous.

When completing the number-guessing-game code along, I've managed to replicate the js code in the html template provided, exactly as it's directed. I've even compared the completed html doc in the same js directory and it's a match (except for the //comments I've added).

Somehow, I still get this error:

here is the code line:
guessSubmit.addEventListener('click', checkGuess);

Any idea what the issue could mean? I'm a very early-stage beginner so please bare with me!

Thank you!

1. https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_zebra_striped_info_list
2. https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph

For example, when I click the "Open in Codepen" button included in the first link, it shows

It is not expected. I expect it puts text in HTML/CSS Input into Codepen's editor.

In the last example of How to structure an HTML form, the description describes an <input> element of type date for the CC expiration date. It mentions how this input type will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers.

But the code example has only a plain text input element. This is confusing.

I'm not sure if this is the correct place to report this; please let me know if so. Thanks

Hello!

Learning with MDN involves to download files like examples or starter code from the learning area's repository. Instead of doing this one by one, I wanted to clone the entire repository and just browse it locally. This is not for contributions purpose. Is it allowed and if so, do I need to fork the repo first ?

Thanks you.

both nytimes/index.html and nytimes/nytimes_start.html are using var instead of const or let.
I have created a local branch with fixes and tested.
Also 2 vars submitBtn and playNav aren't used so I commented them out.
Can I push them to the repository?

为什么这儿点击delete按钮，remove(listItem)删除的就是的当前delete按钮所在的li标签了呢？

add a folder to show the use of classes and id in css selectors

I want to help keep the website up to date and inform you that the given solution is not correct for the given instructions above:
https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form#frame_A_payment_form

I didn't see this anything about animations in CSS guides. How about adding it there? I can create a pull request if maintainers of this repo agree with the idea.

P.S. Thank you for the wonderful work you have done. It has been very helpful.

don't show 300w of image.

run as google

chrome--版本 57.0.2987.133 (64-bit).