My goal is to help you feel more comfortable opening up any JS file you come across in the WordPress world.
- Photo Credit: https://www.pokemon.com/us/pokedex/Vanillite
- Code Example: https://github.com/WordPress/WordPress/blob/master/wp-includes/js/wp-list-revisions.js.
- Used For: Everything. In particular, WordPress core tries to avoid JS frameworks in any frontend code. Plugin and theme developers have been moving toward using Vanilla JS vs libraries like jQuery.
- Identifying Features: window, document, getElementById, addEventListener (most libraries and frameworks have shortcuts for these).
- Photo Credit: https://www.pokemon.com/us/pokedex/Minun
- Code Example: https://github.com/WordPress/WordPress/blob/master/wp-includes/js/dist/notices.min.js
- Used For: Reducing the bandwidth of network requests. WordPress will also try to combine JS into a single file unless you have the SCRIPT_DEBUG constant set to true.
- Identifying Features: .min.js extension. Lack of spaces and returns. eval() function.
- Learn More: https://wordpress.org/support/article/debugging-in-wordpress/
- Photo Credit: https://www.pokemon.com/us/pokedex/Tangela
- Code Example: Actual Malware.
- Used For: Breaking into your admin dashboard. Inserting spam links into your posts.
- Identifying Features: Code that is inserted inline into PHP and HTML files are usually not minimized. If you see an eval() like this in a .php file, especially if it is out of place or the same code in multiple files, it is usually malware. Use scanners.
- Learn More: https://sucuri.net/
- Photo Credit: https://www.pokemon.com/us/pokedex/Baltoy
- Code is From: https://github.com/strangerstudios/paid-memberships-pro/blob/master/includes/profile.php
- Used For: jQuery made it easier to do DOM manipulation like this, toggling the display of fields based on other fields. Also made AJAX easier at the time.
- Identifying Features: jQuery or $, CSS selectors, .show(), .hide(), .ajax().
- Learn More: https://jquery.com/
- Photo Credit: https://www.pokemon.com/us/pokedex/Claydol
- Code Example: https://github.com/bwawwp/bwawwp/blob/master/chapter-09/example-08.js
- Learn More: https://codex.wordpress.org/AJAX_in_Plugins
- Photo Credit: https://www.pokemon.com/us/pokedex/Alakazam
- Code is From: https://github.com/WordPress/gutenberg/blob/master/packages/npm-package-json-lint-config/package.json
- Identifying Features: Curly brackets. Square brackets. Name-value pairs. .json, .config file extensions.
- Learn More: https://www.json.org/
Inline vs JS files
- Photo Credit: https://www.pokemon.com/us/pokedex/Rotom
- Code is From: https://github.com/strangerstudios/paid-memberships-pro/blob/master/includes/profile.php (Same example as the jQuery slide.)
- Photo Credit: https://www.pokemon.com/us/pokedex/Sigilyph
- Code is From: https://github.com/strangerstudios/paid-memberships-pro/blob/dev/package.json
- Used For: Node Package Manager. It’s like the .org plugin repository, but for NodeJS modules.
- Identifying Features: package.json, package-lock.json, node_modules directory.
- Learn More: https://www.npmjs.com/, https://wordpress.org/gutenberg/handbook/designers-developers/developers/packages/packages-npm-package-json-lint-config/
ES5 vs ES6 vs ESNext
- Photo Credit: https://www.pokemon.com/us/pokedex/Porygon
- Code is From: https://gist.github.com/Shelob9/252011dff617b0fb9239865c6a045a37#file-4-js
- Identifying Features: asynx, fetch, await, promise
- Photo Credit: https://www.pokemon.com/us/pokedex/Ditto
- Code is From: https://github.com/strangerstudios/paid-memberships-pro/blob/dev/.babelrc
- Used For: Compiling ESNext/etc code for cross-browser support.
- Identifying Features: .babelrc file
- Learn More: https://babeljs.io/docs/en/
- Photo Credit: https://www.pokemon.com/us/pokedex/Blastoise
- Code is From: https://github.com/WordPress/WordPress/blob/master/wp-includes/js/dist/notices.js
- Used For: Bundling dev code into build code. Monitors code changes to apply things like Babel to JS, compile SASS into CSS, and minify JS and CSS.
- Identifying Features: /******/ in js output. index.js, webpack.config.js
- Learn More: https://webpack.js.org/
- Photo Credit: https://www.pokemon.com/us/pokedex/Pikachu
- Code is From: https://github.com/CalderaWP/Caldera-Forms/blob/master/clients/privacy/components/FieldGroup.js
- Learn More: https://reactjs.org/, https://webdevstudios.com/2019/01/03/headless-wordpress-with-react-and-nextjs-1/
- Photo Credit: https://www.pokemon.com/us/pokedex/Crustle
- Code is From: https://github.com/ideadude/wp-minimal-block-example/blob/master/block.js
- Used For: The new block editor in WordPress (and elsewhere).
- Identifying Features: block.js, index.js, edit.js inside a /blocks/ or /blabla-block/ folder. window.wp.blocks, or wp.blocks
- Learn More: https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type/