ProcessWire Weekly #425

In the processwire.com blog this week: debugging tools built into ProcessWire

In this week's blog post, labeled Debugging tools built into ProcessWire, Ryan provides an in-depth introduction into the debugging and development oriented tools bundled with ProcessWire right out of the box.

The post covers debug mode, debug timers, database query logging, debugging markup regions, debugging the admin, ProcessWire's own debug backtrace, and various logging methods available. And on top of all that there's also a list of features made available once the advanced mode has been enabled.

Here's a list of all the topics covered in the post:

• ProcessWire’s debug mode
• Using debug timers
• Database query logging
• Debugging markup regions
• Debugging in the admin
• Debugging page paths and URLs
• Using ProcessWire backtrace
• Debugging PageArray values
• Logging tools for debugging
• Runtime notifications for debugging
• Advanced mode

As Ryan also goes on to mention, these are the tools that don't require any third party additions, paid or otherwise. That being said, a list of debugging and development tools for ProcessWire wouldn't be complete without mentioning two modules that take things even further: Tracy Debugger and ProfilerPro. Definitely check those two out as well in case you're serious about debugging (and profiling the performance of) your site(s).

There are no new core updates for this week, but be sure to check out the weekly blog post for more details about aforementioned built-in debugging tools — there's quite a lot of stuff there, so it's more than likely you'll learn at least a few new tricks!

New module: Minify Page Render

Minify Page Render is a brand new third party module by Timo Hausmann. In a nutshell this module grabs rendered page content, runs it through a regex based minifying step, and replaces rendered page content with the minified version. This, in turn, can be used to both optimize page load times by slightly decreasing the amount of transmitted data, and to clean up the rendered markup.

The approach taken by this module is based on a minifying function shared via a Stack Overflow post, which attempts to avoid any issues with code or markup breaking due to the minification process. That being said, this module is still considered a beta version, so you should definitely test things out before applying it on a production site.

Another thing to note is that while the minification process can indeed decrease the amount of transmitted data, it does this with slight expense of server rendering time. Preferably this module should always be coupled with some type of caching to make sure that the minifying process itself doesn't unnecessarily slow down requests.

If you'd like to give this module a try, you can install it via the built-in module installer in the ProcessWire admin, or clone or download it from the Minify Page Render GitHub repository. If you have any questions or require additional assistance, feel free to stop by at the Minify Page Render support forum thread.

Big thanks to Timo for developing this module and sharing it with us!

Site of the week: FishAct 2048

Our latest site of the week is called FishAct 2048. This is a campaign site for the NGO FishAct — a conservation movement of volunteers from Europe with the aim of preserving healthy oceans full of life.

FishAct is a German non-governmental organization and registered charity run by volunteers and funded exclusively by donations. They train and send volunteers to document and expose illegal fishing activities, organize campaigns, and raise awareness of global issues affecting our oceans and putting fish under the threat of extinction.

The FishAct logo is based on the gloomy prediction by Canadian scientist, that under a business as usual scenario all fish stocks will be depleted by 2048.

— FishAct 2048

The FishAct 2048 website is a co-project where the design and concept are by Mutabor Design GmbH, and programming by Neue Rituale. The site has been online for a while already, so it's not a brand new one by any means — but from where we stand it's still quite a treat in terms of sheer visual impact, the quality of the implementation, and of course the weight and importance of the content.

Taking a quick peek under the hood, the main attraction of this site — the countdown page — is built upon the Three.js JavaScript 3D framework, and WebGL. The front-end doesn't seem to utilize any front-end framework, but rather custom built markup and styles authored following BEM methodology. As for ProcessWire modules, there are none visible that we could instantly recognize, so your guess is as good as ours.

You can read more about this site, and particularly the animated effects and how they were implemented, from the Neue Rituale case story for FishAct 2048. Another FishAct 2048 case story is from Mutabor and focuses on the branding aspect of the project.

Our congratulations to the folks at FishAct E.v. for this brilliant website, and thanks to both Neue Rituale and Mutabor for sharing their case stories — truly great work from everyone involved in this project!

Stay tuned for our next issue

That's all for the 425th issue of ProcessWire Weekly. We'll be back with more news, updates, and content Saturday, 9th of July. 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!