New ProcessWire build for The Teaching Machine

[protro]

Greetings PW forum,

I have completed a revamp of the artist collective The Teaching Machine's website, which was once built on Cargo Collective, then Wordpress, and is now using ProcessWire with the Rockfrontend Module, Duplicator Module, and the Latte template engine (among some others).

The site codebase can be found here. (I don't understand why GitHub thinks it's 99% CSS … that will be for another day).

The site menu is right-justified, with a simple navigation and dark-mode toggle. Individual project pages can contain galleries (also right-justified), media embeds, and will display similar items in the same category as well as site-wide items. A Zones page displays overarching categories, and randomly selects new projects each time the page is visited. The Home page displays the latest projects in descending chronological order.

The Teaching Machine is an independent arts laboratory devising strategies for amalgamated practices within the cinematic imaginary, musical zeitgeist, and networked hyperstructures. Founded by hypermedia artist Strangeloop in 2011, with members in Los Angeles, Barcelona, and Singapore.

 

[protro]

If anyone can offer suggestions on how to fix for FOUC (flash of unstyled content) … especially with regards to font-family, I would be grateful. Feels like I've been running in circles trying to overcome that in PW. 🕳️

[ngrmm]

@protro you could try to avoid FOUC by loading you oswald.css earlier or even one step durther and inlining the webfont css part into your head part

[bernhard]

Hey @protro congrats that's a great site!! Really beautiful design and absolutely awesome to also see the code and it looks great as well 🙂 

When I read the readme I was confused about how you structured the site (with sections folder inside the layouts folder), but that readme is not showing what you actually did 🙂 

---

In custom.less you have this

Quote

// no longer advised to use @import method

Could you please elaborate on that?

---

Also you are using css variables, which I'd also like to see in UIkit and I was thinking about creating a less file with hooks and overrides that provides that in a reusable way. What do you think?

---

In ready.php you have this:

//  webp image support
 if($page->template != 'admin') {
    $wire->addHookAfter('Pageimage::url', function($event) {
      static $n = 0;
      if(++$n === 1) $event->return = $event->object->webp()->url();
      $n--;
    });
  }

I'm not sure I understand what this is doing? First I thought it's a clever feature to always request webp on the frontend! But what is the $n for? Isn't it always resetting itself to 0 and on the next call it will again be incremented and if(1 === 1) will again return the webp?

---

And I have a special request via PM 😄 

[protro]

Thank you @bernhard I appreciate it especially coming from you. Rockfrontend/Latte have been indispensable tools!

So the @import in the main custom.less was brought-in from a previous PW codebase I used … I was trying to load fonts locally instead of from external Google Fonts references and it must be there because I remebmer some discussion of that here in the PW forums, but honestly I can't specifically recall why I decided on that. My thinking was that @import was an outdated way of achieving this?

CSS variables are used to control the dark-mode/light-mode functionality. I'm interested in what you have in mind for any CSS variables in future Rockfrontend releases.

The webp function in ready.php is coming from a ProcessWire documentation post @ryan made about serving webp … specifically under Strategy 2. I'm still unclear exactly what it's doing except that this snippet seemed to be recommended.

Good catch pointing out the inaccuracies in README, I will fix those in the next commit. And thank you again for kind feedback on the site itself!

[protro]

3 hours ago, ngrmm said:

@protro you could try to avoid FOUC by loading you oswald.css earlier or even one step durther and inlining the webfont css part into your head part

Thanks @ngrmm I tried moving oswald.css above the other styles … but it didn't seem to have any effect. I wonder if it's trying to load too many fonts at once.

$rockfrontend->styles()
->add("/site/templates/styles/oswald.css")
->add("/site/templates/uikit/src/less/uikit.theme.less")
->add("/site/templates/styles/custom.less")
->addDefaultFolders()
;

 

[ngrmm]

@protro I'm not familiar with rockfrontend. As you can see in a browser console your final code loads several files (uikit.min.js, uikit-icons.min.js, main.js, main.css) before loading your oswald.css file with the @font-face rules. The browser reads your oswald.css file and then sends a request to download webfonts.

So two things delay the webfont download. The order of your js and css files and also the chaining via the font-face rule inside a css file.
Most of the time it helps just to change the order and to set the css file at the first place.
And as I said before the fastest way would be to inline those @font-face rules.

If inlining does not help also, you could also give the browser a hint to preload webfonts like this:

 <link rel="preload" href="/site/templates/styles/whereever_your_fonts_are/webfont.woff2" as="font" type="font/woff2">

<!--
	
	or for crossorigin
	
	<link rel="preload" href="https://www.domain.com/webfont.woff2" as="font" type="font/woff2" crossorigin>
	
-->

[bernhard]

11 hours ago, protro said:

The webp function in ready.php is coming from a ProcessWire documentation post @ryan made about serving webp … specifically under Strategy 2. I'm still unclear exactly what it's doing except that this snippet seemed to be recommended.

Ahhh! Thx, now it makes sense:

Quote

The reason we have to keep that static $n variable in there is that the $image->webp->url() method actually calls the $image->url() method too, so if we didn’t have that static $n variable keeping track of recursion depth, then we’d end up with an infinite loop!

10 hours ago, protro said:

Thanks @ngrmm I tried moving oswald.css above the other styles … but it didn't seem to have any effect. I wonder if it's trying to load too many fonts at once.

$rockfrontend->styles()
->add("/site/templates/styles/oswald.css")
->add("/site/templates/uikit/src/less/uikit.theme.less")
->add("/site/templates/styles/custom.less")
->addDefaultFolders()
;

Unfortunately it's not possible to define the sort order 100% by adding styles in styles()->add(...); The reason is that if you mix file types (css + less) like you are doing that the sort order might get lost because .less-files need to be parsed before the final css can be injected into the final markup.

RockFrontend injects the scripts via hook after the page has been rendered. It injects it right before the </head> tag. The reason for this is that when using reusable components that you want to move from one project to another then I want to have the ability to inject styles and scripts right from within my component. For example a "slider.latte" component would have the ability to add this at the top:

{do $rockfrontend->scripts()->add('/foo/bar/slider.js')}

That would tell RockFrontend to add the slider.js file on every page where the slider is rendered.

If we didn't have that feature we'd always have to make sure that whenever we render the slider.latte we also add the slider.js in the main layout file (_main.php in older versions or layout.latte in newer ones).

That's the background. Now the solution 😄

You don't have to use RockFrontend's asset tools. If they help, use them, if they don't, don't. Or mix them as you need! So just use them for parsing all less files and just add the oswald.css manually in your <head>. That will make sure it gets loaded before other styles injected by RockFrontend.

[protro]

Many thanks @ngrmm for the explanation. FOUC issues are resolved. Appreciate your elaboration 🙂

Regarding @bernhard recommendation for YouTube embed consent, I have updated the website so that it includes Consenty and wrapped all YouTube embeds in a template which disables them until a user prompt to explicitly Allow YouTube Embeds has been clicked, and included a Privacy Policy page with further details. Thank you for alerting me to this GDPR-compliant practice. ⚠️

[bernhard]

Hey @protro thx for mentioning Consenty and nice to see it in action 🙂 I've checked your site again and you are still connecting to a youtube server even though consent is not given. The reason is this code:

                    <template consenty-if="!youtube-inline">
                        <div class="uk-inline">
                            <img src="https://img.youtube.com/vi/JJmsPuB1NxE/sddefault.jpg">
                            ...
                        </div>
                    </template>

This markup gets loaded if we do NOT have consent for "youtube-inline". But as you are embedding the thumbnail from the youtube url you are sending data to them without users consent. I know it's annoying... 🙂 

[protro]

@bernhard It should be fixed now. I just pushed the latest version which updates the Privacy Policy and the consenty mechanism to include Vimeo and Bandcamp. All thumbnails are now local files on the server.