Leaderboard

To clarify and gently push back on this, prefers-reduced-motion isn't just for people who may have a preference for no animation. Personally I'm fine with animations. It's an accessibility feature that allows people who may be affected by animations (e.g. vestibular disorders) to send a signal to websites from their OS or browser. It's good practice to check for that and respect it, when possible, especially if they're non-critical animations.

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/

I've built this over and over in several of my modules (RockDevTools for Livereload, RockCalendar for creating events). Always a lot of work. Always a lot of boilerplate code. Always a lot of issues to fix. I think it's time to bring SSE (Server Sent Events) to everybody. Simple example (Empty Trash): Client-Side: // create stream const stream = ProcessWire.Sse.stream( 'ssedemo-empty-trash', (event) => { const textarea = document.querySelector('textarea[name="empty-trash-status"]'); try { let json = JSON.parse(event.data); stream.prepend(textarea, json.message, 100); } catch (error) { stream.prepend(textarea, event.data); } } ); // update progress bar const progressBar = document.querySelector('#empty-trash-progress'); stream.onProgress((progress) => { progressBar.value = progress.percent; }); // click on start button document.querySelector('#empty-trash').addEventListener( 'click', (e) => { e.preventDefault(); stream.start(); }); // click on stop button document.querySelector('#stop-empty-trash').addEventListener( 'click', (e) => { e.preventDefault(); stream.stop(); }); Server-Side: public function __construct() { parent::__construct(); /** @var Sse $sse */ $sse = wire()->modules->get('Sse'); $sse->addStream('ssedemo-empty-trash', $this, 'emptyTrash'); } public function emptyTrash(Sse $sse, Iterator $iterator) { $user = wire()->user; if (!$user->isSuperuser()) die('no access'); $selector = [ 'parent' => wire()->config->trashPageID, 'include' => 'all', ]; // first run if ($iterator->num === 1) { $iterator->max = wire()->pages->count($selector); } // trash one page at a time $p = wire()->pages->get($selector); if ($p->id) $p->delete(true); else { $sse->send('No more pages to delete'); return $sse->stop(); } // send message and progress info $sse->send( $iterator->num . '/' . $iterator->max . ': deleted ' . $p->name, $iterator ); // no sleep to instantly run next iteration $sse->sleep = 0; } Code + Readme: https://github.com/baumrock/SSE/tree/dev What do you think? Would be nice if you could test it in your environments and let me know if you find any issues!

@ryan - the demo site (still linked from the new site) is still showing that .htaccess needs updating error (has been for a very long time) and running an old version of PW and the old theme. All fields and templates need to either have an icon or no icon - it looks messy with the alignment in those dropdowns when there is a mix. Maybe minor, but these details are what makes a project look professional or sloppy.

Thanks @ryan The subtle nuance of "text-wrap: pretty" is that you won't see it. It stops block elements having an orphan word on its own line at the end of eg a paragraph - jarring if it happens but smooth reading when it doesn't regardless of screen size. Still really need to see the font-size addressed. It's making my eyes bleed on my wide screen with font-size: 14vw 🙏

I think everyone here knows that and just wants to help improve the site for new users. On the download page I noticed Softaculous: Here, especially with regard to new users, the text could be updated. However, in my opinion, the demo available there is a problem that is more likely to deter new users than get them excited about ProcessWire: No one new to Processwire can figure out the backend or anything else from this demo.

Unfortunately, IMHO the only animation that conveys anything is maybe the one for "Total control over the design". The rest just don't provide any meaning to me. In general animations on websites don't engage me, they distract me from learning what I am there to learn. But maybe I am in the minority, which is fine :)

A few suggestions on what is a great new theme: Similar to @adrian, I have an issue with font size on larger screens. I have a wide screen and the site smacked me in the face when I visited this morning. Recommend adding css something like: :is(header, main, footer) { width: min(80%, 100ch); margin-inline: auto; } or adding a class to the header, main and footer components. The text was far too big to read and much of the important above the fold content fell below the the fold. Same for every other page I visited. In additon, use CSS to clamp the font-size to a min, preferred, max size rather than a fixed 14vw. https://developer.mozilla.org/en-US/docs/Web/CSS/clamp Absolutely agree with @gRegor about reduced motion. This should be in the CSS, eg: /* Remove all animations and transitions for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } Add CSS "text-wrap: balance" to headings and "text-wrap: pretty;" to long content, eg paragraphs, list items, blockquotes, etc. It has good support on modern browsers and makes a difference in appearance and readability. https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap Keep up the good work

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.

Love the new look! Congrats! A couple small things with Javascript disabled: the sections down the page like "Total control over the design" don't show anything in place of those animations. It would be nice to have some static image fallback in that case. Also in the ProcessWire Weekly subscribe prompt at the bottom, the caret on the button does not appear when JS is off, so it just looks like a form input with a circle next to it.

@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.