Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added if statement and replaced jQuery with Vanilla JS #76

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

PlanB007
Copy link

@PlanB007 PlanB007 commented Oct 2, 2018

As you can see by my commits I've added an if statement on one of your files. For WP this is a best practices pieces of code, you can find all the extra info on Google. For the jQuery, you used there was some very easy Vanilla JS which is, in this case, better than jQuery (check out youmightnotneedjquery.com ) always keep libs and frameworks as low as possible.

… have this snippet on all the php files. It's up to you if you want that. Pro tip: it's safer
Copy link
Member

@pablinos pablinos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this @PlanB007! Removing the dependency on jQuery is a great improvement. Just a few comments on how we might be able to improve things further.

'clip': 'rect(1px, 1px, 1px, 1px)',
'position': 'absolute'
} );
document.querySelector( '.site-title, .site-description' ).style.clip = 'auto';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where we're changing multiple styles at the same time it may be preferrable to use the Object.assign syntax. For example:

Object.assign( document.querySelector( '.site-title, .site-description' ).style, 
	{
		'clip': 'rect(1px, 1px, 1px, 1px)',
		'position': 'absolute''
	} );

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you mean there are multiple .site-title and .site-description you can use Object.assign. I haven't used it before, always could solve it easy with just document.querySelector.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are multiple statements that start document.querySelector( '.site-title, .site-description' ).style to change more than one property of the element's style. Using Object.assign like this would mean that document.querySelector is only called once.

$( '.site-title a, .site-description' ).css( {
'color': to
} );
document.querySelector( '.site-title, .site-description' ).style.clip = 'auto';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again Object.assign syntax could simplify this. There's also a whitespace issue here, it looks like spaces and not tabs at the start of the line.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There maybe went something wrong with the indent/whitespace there, although it seems weird since it doesn't happen al the time.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its definitely spaces used instead of tabs

@@ -1,4 +1,4 @@
<?php
<?php if( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's often a good idea to use this check in themes and plugin files that are running code that access globals like $_GET and $_POST. That isn't the case here and so the check is probably unnecessary. If we were to add it then it should be a separate change in a new PR.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree this is unnecessary here but doesn't hurt either. What does hurt is my OCD because it's before the file comment :p

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it should be a separate change in a new PR.

💯

} )( jQuery );
});
});
})( jQuery );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we've removed the dependency in jQuery we can remove it as a parameter. Alternatively, we can probably remove the closure altogether, which would simplify things further.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was marked resolved... looks like "jQuery" is still here? Also the $ parameter up top.

'color': to
} );
document.querySelector( '.site-title, .site-description' ).style.clip = 'auto';
document.querySelector( '.site-title, .site-description' ).style.position = 'relative';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spaces here too

$( '.site-title a' ).text( to );
} );
} );
document.querySelector( '.site-title a' ).textContent( to );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is invalid since textContent is not a function.

Suggested change
document.querySelector( '.site-title a' ).textContent( to );
document.querySelector( '.site-title a' ).textContent = to;

$( '.site-description' ).text( to );
} );
} );
document.querySelector( '.site-description' ).textContent( to );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
document.querySelector( '.site-description' ).textContent( to );
document.querySelector( '.site-description' ).textContent = to;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants