Leaderboard

This week I’m thrilled to report that we have a new website online. The site was designed by @jploch and @diogo of KONKAT Studio in Hamburg Germany. Here's a short announcement post about it— https://processwire.com/blog/posts/processwire-website-redesign/

Dear all, congrats to the redesigned website. Was a big surprise today and first thought, hey what happened to my browser bookmarks, it‘s not PW. But that shock only took a second then I realized it‘s my CMS of choice, just with a new fresh layout. Great work from my point of view. Just browse and read the new content now. Love it.

Congrats on the launch @ryan and @jploch 🤝 @diogo for the design. I think it’s a great update! Two small things I noticed regarding the cards: This has to do with the width of .uk-card-body being 100% combined with a padding. I saw you added a max-width but it would be best to use "box-sizing: border-box" instead, so the padding is included within the 100% width. Also re:cards, I noticed there was some js to allow to click anywhere on a card to open its link. A nice css trick I learned is to use ::before on the <a> tag to "cover" its parent. In your case you could use this css: .uk-card .uk-card-body a::before { content: ""; position: absolute; inset: 0; } This way the <a> covers the card and makes the whole card clickable: (btw some external link are not working, e.g. Processwire Weekly, there seems to be a slash wrongly added at the beginning of the href)

OK - code examples first, just because they caught my eye immediately: It's missing the closing ")" and I also think it would look cleaner on one line: <!-- Render simple breadcrumb nav --> <ul class="breadcrumbs"> <?= $page->parents->each( '<li><a href="{url}">{title}</a>' ?> </ul> ie: <!-- Render simple breadcrumb nav --> <ul class="breadcrumbs"> <?= $page->parents->each('<li><a href="{url}">{title}</a>') ?> </ul> This won't work because of $p->url in double quotes like that without extra single quotes for href. // Render primary navigation foreach($pages->get("/")->children as $p) { echo "<a href="$p->url">$p->title</a> "; } Missing the semi-colon at the end of the second line: // Find and list tall buildings $buildings = $pages->get("/buildings/"); $skyscrapers = $buildings->find("height>1000") echo $skyscrapers->each("<li>{height}: {title}");

Gotta admit I feel really strongly about this also. This is my quick hack to find some visual peace on the homepage :) // Remove all divs whose ID ends with "-animation" document.querySelectorAll('div[id$="-animation"]').forEach(el => el.remove()); // Remove empty uk-width elements document.querySelectorAll('[class*="uk-width-"]').forEach(el => { if (!el.textContent.trim()) { el.remove(); } }); // Change all uk-width elements to full-width document.querySelectorAll('[class*="uk-width-"]').forEach(el => { el.className = el.className .split(/\s+/) .map(cls => cls.startsWith('uk-width-') ? 'uk-width-1-1' : cls) .join(' '); }); // Halve font size of all h1 and h2 elements document.querySelectorAll('h1, h2').forEach(el => { const style = window.getComputedStyle(el); const currentSize = parseFloat(style.fontSize); el.style.fontSize = (currentSize / 2) + 'px'; }); // Remove max-width on .pw-highly-scalable p elements document.querySelectorAll('.pw-highly-scalable p').forEach(el => { el.style.maxWidth = 'none'; });

Is there any way to adjust the font size to personal preferences? I'm finding headings way too big on my screen resulting in unnecessary scrolling to read anything. The animated heading at the top bring back not particularly fond memories of the <blink></blink> tag. I suspect it may be mobile first, but if I'm accessing the site it's for documentation, and I'm not going to do that on a phone. One of the things I've loved about ProcessWire is it's fairly well documented, but if I have to do extra scrolling every time I want to reference docs because everything is so much bigger, that's not helpful. I realise other people may like the new design, and I don't want to impose my preferences on others, but honestly I can't say I'm comfortable with the new presentation. Sorry, I know lots of work has gone into this. It's why I'm asking, following the ProcessWire philosophy of allowing total flexibility, whether actual site visitors themselves can have some option to select default font sizing, so those who like it big can keep it that way, but those who'd like it smaller can have something more to their liking.

This is the css you want to counter when hovering .uk-card > .uk-card-body > a 🧐

@monollonom It looks like that width:100%; on the uk-card-body is something I added last minute for some reason, I don't know why. I removed it and it seems to correct that issue that was appearing for "other modules by author" list. Hopefully I didn't break something else by removing it. 🙂 I tried the CSS trick you mentioned (very cool!), but I'll have to return to it when I've got more time. For whatever reason, it added an underline to the text and no amount of text-decoration: none !important; seemed to be able to cancel it. @adrian Thanks, code examples fixed. I'll return to the image thing, I may have to cancel that rule for images in the modules directory.

This border is making transparent PNGs look weird. Not sure how many are on the site itself, but there are plenty on 3rd party module pages that are impacted by this. #content-body p>a>img, #content-body p>img { border: 1px solid #999; border-radius: 10px; }

Btw, the old site can be accessed just by appending ?oldsite=1 to any URL (temporarily, anyway).

@adrian Either is fine, but to start, right here is good.

Just an FYI - the TracyExceptions panel will list all these and let you load them up much more easily.

RockDaemon simplifies running long-running background tasks (daemons) with automatic lifecycle management. Ideal for tasks like PDF generation, email processing, or data synchronization that need to run continuously via cron jobs. Why RockDaemon? Running long-running tasks in PHP can be challenging: Preventing multiple instances from running simultaneously Manual restart capabilities Automatic restart after deployments Signal handling and graceful shutdown Debug output control Command-line argument parsing Hosting environment compatibility RockDaemon solves these problems with a simple, cron-based approach. Example <?php // pdf-daemon.php namespace ProcessWire; use RockDaemon\Daemon; require_once __DIR__ . '/public/index.php'; $rockdaemon = wire()->modules->get('RockDaemon'); $daemon = $rockdaemon->new('pdf-daemon'); $daemon ->run(function (Daemon $daemon) { // get a newspaper page that has the "createPdf" checkbox enabled $p = wire()->pages->get([ 'template' => 'newspaper', 'createPdf' => 1, ]); if (!$p->id) return $daemon->echo('Nothing to do'); $timer = Debug::startTimer(); $p->createPdf(); $ms = Debug::stopTimer($timer) * 1000; $daemon->log( message: "created PDF for $p in {$ms}ms", logname: "pdf-create", pruneDays: 30, ); $daemon->run(); }); Docs + Download: baumrock.com/RockDaemon Showcase in PW Weekly: https://weekly.pw/issue/590/

Just to understand better: For your use case, is there any specific reason not to use: fetch() to load the config from an API, or $config->js() or $config->jsConfig() to hydrate your JS from the backend, or inline JS as config in the <head>?