[Zac Gordon]

Hi Folks!

This is strange and thank you for bringing it to my attention. I’m looking into the problem.

Quick question: when you go to the direct link for the course and login are you able to access the content?

https://javascriptforwp.com/parts/gutenburg-development/

Thanks!!!

[Zac Gordon]

Hey Tim!

I just fixed this and am contacting Wistia. Not sure what the problem is, but ping me if you see this again. Some of these I have already fixed and then they seem to have broken again..

[Zac Gordon]

Oh no! Just fixed!

Please let me know if you see any other of these. Apparently another video did this as well..

Should hopefully be good now!

[Zac Gordon]

Hi Tim,

Yes! I am currently working on Parts 1 – Advanced JS and VanillaPress V2

After that I will do two more Part 2 sections – Authentication and Customizing/Extending the WP API 🙂

[Zac Gordon]

Hey Justin,

Just updated the file for that lesson, thanks for pointing this out!

Thanks,
Zac

[Zac Gordon]

Hey Kurt, thanks for sharing this!

[Zac Gordon]

Hey Kat!

If I understand correctly, yes, you can stringify JSON in one file then parse it in another.

Hope that helps!

[Zac Gordon]

Hey Jonathan, thanks for sharing!

[Zac Gordon]

Hey David,

I know we talked in the video call, did you get this solved? Wanna post up the solution?

Cheers!
Zac

[Zac Gordon]

Hi Belinda!

You want to look into ARIA w JavaScript. There are a few little things you can add to make single page app designs accessible for screen readers that can also work for what you’re referencing.

We will cover this in Advanced JS Topics, but here is a quick primer:

Single Page Apps – ARIA live content regions – https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
Basic Show Hide – ARIA hidden – https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/

Hope that helps!

[Zac Gordon]

Thanks for the corrections and points Justin!!!

[Zac Gordon]

Thanks Kat!

Just updated it 🙂

[Zac Gordon]

Hey Kurt, Part 2.1 on API is finishing up release now and then 2.8 will start rolling out. You should get some emails with updates on content release!

[Zac Gordon]

Great response here Christina!

Yes, in order to get what you’re looking for, you setup would setup a loop like this:

for( let person of people ) {

  console.log( person.name );

}

[Zac Gordon]

Hey Kurt!

Glad you worked it out! Unfortunately I don’t have a Windows machine to test this one so will not be able to help much on tooling differences between Mac and PC.

Happy to help research solutions though with you if this comes up again.

If you wouldn’t mind posting up the solution you found it may be helpful for others as well.

Thanks!
Zac

[Zac Gordon]

Sorry for the delay on this!

Since dispatching allows you to execute events and trigger their event listeners, that statement you quoted is just reminding you that you should attach the dispatch to the same element you attached the event listener to.

Is that what you were asking?

[Zac Gordon]

Hey Bruno!

Good question 🙂

My goal in this section is to show you both. Later one you will see function references used more than expressions.

However, you will often see expressions used because they are “easier” to write right where you add the event listener.

el.addEventListener( 'click', function( event ) { 
  event.preventDefault();
  console.log( 'Clicked );   
}, false );

jQuery .click and such things often encourage this approach.

$( 'a' ).click( function() {
  event.preventDefault();
  console.log( 'Clicked' );
}); 

The downside to using function expressions with an event handler is that you can’t easily remove that event handler because it has no name to reference it. You would not necessarily need to always do this, but it is one con.

Another larger issue is that it is more common to separate your function declarations and assignments from the event listener. This allows for cleaner and better organized code.

el.addEventListener( 'click', clickFunc, false);

// Function separated
function clickFunc( event ) { 
  event.preventDefault();
  console.log( 'Clicked );   
}

// Ability to remove the function because its named
el.removeEventListener( 'click', clickFunc, false);

Was that what you meant?

Or did you mean this:

var myFunc = function() {
};

versus this?

function myFunc() {
};

[Zac Gordon]

If you want to use bubbling then you would need an event listener on the target with the third parameter set to true. In the examples you can see we play around with attaching both bubbling and capturing events.

[Zac Gordon]

It always starts at the window level. But if you don’t have an event listener on the window you won’t notice it.

In our example we have a listener attached to the parent element so that is where it ‘starts’ for us because that is the highest element in the tree we have a listener attached to.

However, you could attach a listener to any element higher in that chain and have the same effect.

Hope that explains it? Let me know if it’s still unclear.

So happy to hear you’re enjoying the course!!!!!

[Zac Gordon]

That is correct. The third parameter ‘useCapture’ determines whether or not the capturing phase is used.

el.addEventListener( 'click', theFunc, false); // Uses Bubbling
el.addEventListener( 'click', theFunc, true); // Uses Capturing

It’s also helpful to know that if you don’t pass a third parameter is will use false by default and leverage bubbling.

This can be a tricky topic, but hope that helps!!!

[Zac Gordon]

Actually,

this.id

is shorthand for

this.getAttribute( 'id' )

documentGetElementById( ‘X’ ) will select an element on the page with an ID assigned of ‘X’. Once you get that value, .id would give you the value X.

So something like this:

var el = document.getElementById( 'content' ); 

console.log( el.id ); // Prints 'content'

Hope that helps! Good question 🙂

[Zac Gordon]

GREAT Question!

This is due to the magic that browsers, or the engines they use, bring to the table.

Chrome, for example, automatically makes the event object available for you to use with the name ‘events’ in a function hooked up to an event this way.

Firefox on the other hand does it a little differently and makes it available as the first value in an arguments array that it passes to functions hooked to events. So you could do this for Firefox:

var myFunc = function() {
   eventObj = arguments[0];
}

element.onclick = myFunc;

For this reason you may sometimes see some code like this checking to see which approach is being taken and assigning that to a variable called events. This will work for Chrome or Firefox (and most other browsers).

var myFunc = function() {
   eventObj = arguments[0] || events;
}

element.onclick = myFunc;

The most common solution though is just to assign whatever is being automatically passed into your function with the name ‘events.’ You can do that this way:

var myFunc = function( event ) {
  console.log( event );
}

element.onclick = myFunc;

This way whether ‘events’ is passed or ‘arguments[0]’ it is still made available as events.

So folks prefer naming it ‘e’ to avoid confusing it with the native name something like Chrome would use.

var myFunc = function( e ) {
  console.log( e );
}

element.onclick = myFunc;

Hope that explains things a little better!!!

[Zac Gordon]

Thank you Alexandra! You caught a bug. Originally I had named some of these things differently then went back after completing everything and tried to catch all the fixes. Just re-uploaded fixed files that should work now!!!

[Zac Gordon]

Okay, I think I figured out why this is happening.

If you were working with the files from the last video then moved on to this video it will still use the local store from the last lesson, which does not have a settings section of the json data.

So, if you clear out that local store and reload the page it should work.

Let me know if that doesn’t solve the problem..

[Zac Gordon]

This should work:

editor.updateContent = function( event ) {

  event.preventDefault();
  model.updateContent( editor.currentContent );

};

Some folks like to do this:

editor.updateContent = function( e ) {

  e.preventDefault();
  model.updateContent( editor.currentContent );

};

I will go back when I have some time and update some of the early event stuff to talk more about cross browser support and reasons for this.

[Author]

Posts