ProcessWire Weekly #585

Latest core updates: ProcessWire 3.0.251

In his latest weekly update at the support forum Ryan provides a brief run-down on what's new in ProcessWire 3.0.251, our latest development release. Here's a brief summary of what's new in this version:

• Several updates were made to the new admin theme style by Konkat studio. These include fixes, Uikit compatibility updates, and new settings for enabling bold style for repeater, file, and image titles, converting page list actions to buttons, and modifying the highlight behaviour of admin inputs.
• The CSS variables used in the admin theme are now prefixed with -pw (e.g. -pw-main-color) for enhanced compatibility and consistency. If you have already built your own style based on these variables, or used them in a module, you need to update your code to refer to the new variable names.
• CSS and JavaScript files belonging to the new admin theme style now use version string parameters. This should alleviate any potential browser level caching issues for our styles going forward.
• The selector engine now handles words longer than 80 characters more gracefully in word matching selectors, i.e. those with "~" in them. Previously a very long word would've been completely discarded, but as of 3.0.251 it gets truncated to the maximum allowed length (80 characters) instead.
• Process modules now support the use of icons in their headlines. This can be achieved by adding <icon-name> to the headline, where 'name' is a FontAwesome icon supported by the admin.
• The Sanitizer::wordsArray() method now provides additional option "truncate", which makes it truncate (rather than remove) words that exceed the maxWordLength setting. This option is disabled by default.
• The WireRandom core class now provides a new method WireRandom::string(), which can be used for generating random strings from provided characters. See WireRandom class in the dev branch for more details.

As you can see, this is a pretty hefty release, containing both fixes and feature updates. The Konkat admin theme style in particular is starting to look quite solid by now, and a lot of the community feedback we've heard has been taken into consideration in one form or another, but as always: please let us know if you get a chance to try it out and do notice anything quirky; the sooner we catch any outstanding issues the better.

That's all for our core updates for this week. For more details, be sure to also check out the latest weekly update from Ryan at the support forum. Thanks!

Introducing the JavaScriptHooks module

JavaScriptHooks is a newly released module by Bernhard Baumrock. It is also a module built with a bigger goal in mind, as it essentially serves as a proposal for a core level, built-in JavaScript hooks system for ProcessWire. We'll share some examples in a bit, but first things first: the "why".

JavaScript hooks in a nutshell

As Bernhard explains in the pull request for the core, the general idea of this project is to implement a hooks system very similar to our current PHP hooks, but for JavaScript, so that developers would be able to hook before or after hookable JavaScript methods in the core — or in any third party modules supporting this. There is a bit more to it as well, so be sure to check out the why section in the module's README file.

As for "how", without going too deep into the actual implementation within the module itself, the idea is to make things every bit as single as they are for our PHP hooks. This is, after all, a system that has proven it's worth over and over again, and also one that most ProcessWire developers are already quite familiar with.

Here's a stripped down example adapted from the JavaScriptHooks project:

<script>
class Modal {
    ___show() {
        alert('Hello World')
    }
}

document.addEventListener('click', (event) => {
    if (!event.target.closest('.modal')) return
    ProcessWire.wire(new Modal).show()
})
</script>

That right there is all that you need to implement a hookable JavaScript method: add those familiar three underscores, and "wire" your object. Once that part is out of the way, hooking into a hookable method also looks quite familiar to those familiar with our existing PHP hook system:

<script>
ProcessWire.addHookBefore('Modal::show', (event) => {
    // replace original behaviour with one of our own
    event.replace = true
    alert('Hello Hooks')
})
</script>

Without JavaScript Hooks this would be quite difficult, unless the implementation has some sort support for it — and that right there is exactly what this project bring to the table: a consistent, standardized, and familiar way to implement JavaScript hooks.

Where and when would this be useful?

One example of the type of situation where this feature might be helpful was provided by Bernhard in the GitHub, speaking of the core datepicker feature:

[...] but what if we wanted to not only translate the datepicker but also modify its behaviour? For example lets say we wanted to add a callback that prevents selecting certain dates. How would we add this to the translation system? Thats just adding three underscores to a method with my PR.

While third party modules and core features can and do already support customization in various formats, that's just the thing: what we need is a shared way to handle this. One that doesn't change from module to module, or feature to feature.

Does it need to be a core feature?

In my opinion this is a very good question, and also one that Bernhard explains quite well in his PR:

If it is in the core, then the core will use it and so can any other JS based module.

In other words: adding this feature to the core would mean that we could start building on top of it simply by refactoring the core features that would benefit from it most, one by one. Module authors could also start using it right away, without the need to install a separate module. Simply put JavaScript hooks would be useful even if they don't end up in the core, but that would solidify it as our standard solution, which would be huge.

To sum it up...

Whether or not Bernhard's hooks proposal ends up in the core, it is a very promising project, so be sure to check it. If you like the idea, you can go give the pull request a thumbs-up. If you don't like it, or think there is a better approach, we'll all ears about that as well. Let us know what you think.

If you'd like to see JavaScript hooks in action, you can clone or download the module from the JavaScriptHooks GitHub repository. The module provides an easy way to test hooks, so if this sounds at all like something that you'd be interested in, give it a try!

Site of the week: BMX Hall of Fame Germany

Our latest site of the week is BMX Hall of Fame Germany — a non-profit project that aims to document the history of the BMX sport in Germany, while simultaneously celebrating the heroes of the sport. The site features, among other things, an events calendar and a searchable index of old German BMX magazines.

Whether racers, freestylers, pioneers, veterans or in the general category Special: In the German BMX Hall of Fame we want to honour the people who have made an outstanding contribution to the BMX sport in Germany.

— The BMX Hall of Fame manifesto

The website of BMX Hall of Fame Germany was created by Thomas Fritscher, with graphic and logo design from Andreas "Elle" Gillmeister. The site features a simple yet nice looking design, with the bulk of the content consisting of profiles for key figures of the sport and a chronicle covering the history of the sport all the way from 1974 to 1993. There are also general info pages about the project, the jury responsible for selecting hall of fame members, and more.

As for behind the scenes details, the front-end of this site appears to be a combination of Tailwind utility-first CSS framework, and interactive features provided by Alpine.js JavaScript framework, along with a few other smaller dependencies. When it comes to non-core or third-party ProcessWire modules, there is just one that we could spot: the cookie consent solution PrivacyWire.

Our congratulations to the team behind this project for a very neatly put together website, and big thanks for dedicating their time and effort towards sharing their knowledge about the sport of BMX with the rest of us!

Stay tuned for our next issue

That's it for the 585th issue of ProcessWire Weekly. We'll be back with more news, updates, and content Saturday, 2nd of August. As always, ProcessWire newsletter subscribers will get our updates a few days later.

Thanks for staying with us, once again. Hope you've had a great and productive week, and don't forget to check out the ProcessWire forums for more interesting topics. Until next week, happy hacking with ProcessWire!