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 browser-sync gulp gulp-sass gulp-sourcemaps gulp-postcss postcss sass autoprefixer cssnano webpack webpack-stream

Material-Theme
$ npm link material-components-web @babel/core @babel/preset-env babel-loader autoprefixer css-loader sass sass-loader extract-loader file-loader postcss-loader path webpack webpack-cli webpack-dev-server

FSE-Theme
$ npm link autoprefixer css-loader sass sass-loader extract-loader file-loader postcss-loader path webpack webpack-cli webpack-dev-server

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

React WP-API boilerplate

Our latest boilerplate has been published on Github. This is a great starting point for developers who need to create a headless WordPress Single Page Application.

WP-API ReactJS Boilerplate

Please note that you need to have a deeper knowledge of WordPress, NPM, Javascript/ReactJS and Bootstrap in order to be able to use this boilerplate.

Go to the GitHub repository, download the boilerplate and follow the instructions.

The Source Code is licensed under GPLv2 and has been published on GitHub.

A simple setup tutorial can be found in the Readme of the repository.

#boilerplate, #development, #headless-cms, #reactjs, #wp-api

WordPress “Gutenberg” blocks boilerplate

The code base we are using to develop custom Gutenberg blocks has been made available to the public.

Blocks Boilerplate

If you are a WordPress Developer you can use this boilerplate as a basis for creating and integrating blocks in a theme.

Go to the GitHub repository, download the boilerplate and follow the instructions.

The Source Code is licensed under GPLv2 and has been published on GitHub.

#gutenberg, #blocks, #theme

#boilerplate, #development