npm “global” packages

If you manage multiple themes with similar npm dependencies you should install npm packages globally and link them in your theme directories. First of all this saves a lot of disk space. But it also disburdens the upgrade process of development frameworks and toolkits that are used across projects.

1. Install packages globally by adding the “-g” flag:
$ npm install -g package_1 package_2 package_3 package_4 etc.

2. Link the packages in your local theme directory/directories:

Bootstrap-Theme
$ npm link bootstrap @popperjs/core ...

Material-Theme
$ npm link material-components-web ...

FSE-Theme
$ npm link autoprefixer css-loader sass sass-loader ...

Happy Coding!

#development, #npm, #tip

GitHub Gists

Find useful WordPress related code snippets in our new GitHub Gists repo:

https://gist.github.com/them-es

#development, #tip

Goodbye jQuery…

We’ve removed jQuery as a frontend dependency from our Starter Themes.
Please note that jQuery is still needed in the WordPress dashboard (backend) and will be loaded there automatically!

jQuery has been very useful for a while but modern web standards browser support has improved a lot and most JS frameworks started to drop any external dependencies in favor of plain/vanilla JS.

Reducing the loading time of web applications and minimizing HTTP requests is one of the main goals of many developers. And since jQuery is an external library which needs to be downloaded first, avoiding it (if possible) makes a lot of sense.

If your code still depends on jQuery you can activate it in functions.php by adding array( 'jquery' ) in the wp_enqueue_script function where main.js is referenced (See: https://github.com/them-es/themes-starter-bootstrap/blob/v2/functions.php#L480).

Further reading:
https://developer.wordpress.org/reference/functions/wp_enqueue_script
http://youmightnotneedjquery.com
https://medium.com/@trombino.marco/you-might-not-need-jquery-a-2018-performance-case-study-aa6531d0b0c3
https://developer.mozilla.org/en-US/docs/Web/JavaScript

#jquery, #js, #vanillajs

#development, #tip