JavaScript Best Practices

[jonathanbossenger]

Details

• Content type (Online Workshop, Lesson, Course, Tutorial, or Lesson Plan): Lesson
• Content title: JavaScript Best Practices
• Topic description: Details on how to make use of built in JavaScript libraries, best practices to follow when writing JavaScript, and whether or not you should use jQuery.
• Audience (User, Developer, Designer, Contributor, etc.):Developer
• Experience Level (Beginner, Intermediate, Advanced, Any):Intermediate

Learning Objectives

• Explain how to make use of any JavaScript libraries bundled with WordPress
• Describe why theme developers should use these bundled libraries
• Identify common JavaScript best practices when writing JavaScript
• Determine whether jQuery is needed for theme development
• Describe ways to implement and use jQuery safely, if it is needed.

Related Resources and Other Notes

• https://developer.wordpress.org/themes/advanced-topics/javascript-best-practices/

Automation Code

//lesson

[github-actions]

Lesson Development Checklist

• Gather any relevant links to Support, Docs, or related material
• Description and Objectives finalized
• Lesson created and announced to the team for review
• Lesson reviewed
• Lesson video submitted and published to WPTV
• Lesson created on Learn.WordPress.org
• Lesson video published to YouTube
• Lesson on Learn.WordPress.org updated with YouTube video
• Lesson published to Learn.WordPress.org

[jonathanbossenger]

Script: https://github.com/jonathanbossenger/wp-content/blob/main/theme-developer-learning-pathway/07-advanced-theme-development/03-javascript-best-practices.md

[jonathanbossenger]

Video for review:

03-JavaScript.best.practices.mp4

[vagelisp]

Nicely done.
I loved the "You might not need jQuery" reference.

[jonathanbossenger]

I loved the "You might not need jQuery" reference.

I enjoyed adding it as much as you enjoyed seeing it 😀 jQuery still has a special place in my heart, but I do appreciate that I don't need it anymore.

[rosswintle]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations are easy to follow.
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• Sound quality is consistent throughout the video.
• Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

Leave an additional comment below with feedback. You can also share what you liked about this Tutorial.

Nice. Great stuff. Only minor comments on the slides, though one of them should really be fixed up. (Yes, I AM the grammar police!! 👮‍♂️ )

• [Optional] Slide at 0:38 - "Should you use jQuery" is a question and therefore worthy of a question mark.
• [Optional] The slide used throughout with the specific list of tactics has inconsistent capitalisation ("Lint", "Loading")
• [Must-fix] The second bullet on the jQuery slide (4:39) has something wrong in it: "jQuery is often no longer necessary to use jQuery for many common tasks"
• [Optional] I suspect you won't change this, but I spotted that some of the URLs in the jQuery $.ajax example (at 5:03) are missing part of the path

[jonathanbossenger]

Thanks @rosswintle

Yes, I AM the grammar police!! 👮‍♂️
😄 never apologise for picking up these issues, I appreciate the thoroughness.

I suspect you won't change this, but I spotted that some of the URLs in the jQuery $.ajax example (at 5:03) are missing part of the path

Ironically, this one bugs me personally more than any of the other bugs you reported.

[jonathanbossenger]

Updated video:

03-JavaScript.best.practices.mp4

[jonathanbossenger]

https://wordpress.tv/2024/05/24/using-javascript-during-theme-development/

[jonathanbossenger]

https://youtu.be/pWCjts2mnxA

[jonathanbossenger]

https://learn.wordpress.org/lesson/javascript-in-themes/