Jump to content

RockFrontend 🔥🚀 The Powerful Toolbox for ProcessWire Frontend Development

bernhard

By bernhard,
in RockFrontend

 Share

Recommended Posts

maetmar Full Member

maetmar

Posted
Posted

Hi @bernhard,

I realized that RockFrontend is adding "<div edit=title hidden>title</div>" before the closing body tag, because of line 260 in RockFrontend.module.php (faketag)

Is this used for Alfred? And if yes, is there a way to only output this if Alfred is actually used?

Thanks for checking

Link to comment
Share on other sites
Stefanowitsch Sr. Member

Stefanowitsch

Posted
Posted
On 1/26/2023 at 1:58 PM, bernhard said:

v2.19.0 comes with a new handy javascript snippet that can help, for example, to create to-top-links that slide in after a certain scroll position:

If you have ideas for improvement let me know!

@bernhard can you take a look?

When using the minify function of RockFrontend the "defer" attribute gets lost. So the script will never fire. 

A workaround for me was to wrap the script into a JS "DOMContentLoaded" Function.

Link to comment
Share on other sites
Stefanowitsch Sr. Member

Stefanowitsch

Posted
Posted
18 minutes ago, bernhard said:

@Stefanowitsch thx for the report. Could you please provide a step by step instruction what you did so that I can try to reproduce the issue?

I included the script in my head like this: 

<? $rockfrontend->scripts()
  ->add($config->urls->templates . 'scripts/uikit/uikit.min.js')
  ->add($config->urls->templates . 'scripts/uikit/uikit-icons.min.js')
  ->add("/site/modules/RockFrontend/scripts/rf-scrollclass.js", "defer")
  ->minify(!$config->debug);
?>

When minify is set to "true" this is rendered in the <head> section ("defer" missing):

image.png.d24a43b0c779ca71ec679c2e01686524.png

  • Thanks 1
Link to comment
Share on other sites
Stefanowitsch Sr. Member

Stefanowitsch

Posted
Posted

@bernhard I made a little tweak to the rf-scrollclass script. Okay it was not me directly. Instead I asked a certain AI if it is possible to alter the script... just for scientific purposes of course ?

I want to add multiple rf-scrollclass attributes to one DOM element: 

<header class="rf-scrollclass" rf-scrollclass="scrolled@20 scrolledmobile@15">

Now the class "scrolledmobile" gets added at 15px, the "scrolled" class gets added at 20px - all on the same element.

This gives me the ability to use css media queries for some responsive tweaking of the position of my fixed navbar (for example!) 

header {
  position: absolute;
  top: 40px;
  width: 100%;
  z-index: 100;

  @media @min-m {

    &.scrolled {
      top: 20px;
      position: fixed;
    }

  }

  @media @max-s {
    top: 30px;

    &.scrolledmobile {
        top: 15px;
        position: fixed;
    }
  }

}

Long story short, here's the updated script: 

(function () {
  let scrollElements = document.querySelectorAll("[rf-scrollclass]");
  for (i = 0; i < scrollElements.length; i++) {
    let el = scrollElements[i];
    let attrs = el.getAttribute("rf-scrollclass").split(" ");
    for (j = 0; j < attrs.length; j++) {
      let parts = attrs[j].split("@");
      if (parts.length != 2) return;
      let cls = parts[0];
      let y = parts[1] * 1;
      window.addEventListener("scroll", function () {
        scrollpos = window.scrollY;
        if (scrollpos >= y) el.classList.add(cls);
        else el.classList.remove(cls);
      });
    }
  }
})();

 

  • Like 1
Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted
On 3/17/2023 at 5:02 PM, Stefanowitsch said: 
<header class="rf-scrollclass" rf-scrollclass="scrolled@20 scrolledmobile@15">

Hey @Stefanowitsch thx, I've pushed that update to v2.33.0 ? 

Not sure if it's intentional, but you don't need the class "rf-scrollclass" on your <header>, you only need the attribute.

Also I've been thinking if something like this would make sense: rf-scrollclass="show@300-800" ? But I can't think of a scenario where I'd really need that?! The feature was only developed for to-top scrollbuttons that appear when scrolled down for a certain amount. Not sure if it could be helpful for anything else?

  • Thanks 1
Link to comment
Share on other sites
eydun Sr. Member

eydun

Posted
Posted

I would love to use this module on one of my website, which is unfortunately still running PHP 7.4.

I can see that minimum requirement is PHP ver. 8. I guess this is because of Latte 3.

Will I be able to tweak the module to use Latte 2 and PHP 7.4, or will I be hit by an avalanche of challenges?

 

Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

Hey @eydun

39 minutes ago, eydun said:

I can see that minimum requirement is PHP ver. 8. I guess this is because of Latte 3.

The module uses PHP8 syntax/features on several spots. All my modules do, as PHP7.4 is end of life and updating should be very easy.

40 minutes ago, eydun said:

Will I be able to tweak the module to use Latte 2 and PHP 7.4, or will I be hit by an avalanche of challenges?

There will definitely be some challenges. Most likely a lot more than upgrading your site to PHP8.1 or 8.2 which would be the best thing to do anyhow ? 

  • Like 2
Link to comment
Share on other sites
  • 1 month later...
protro Full Member

protro

Posted
Posted

How can I safely update the UIkit version? Do I re-install uikit profile in the Rockfrontend module and then that repopulates the Download UIkit dropdown menu? My issue is that I updated Rockfrontend fine but the versions of UIkit available to me are stuck at 3.16.15 as the latest version.

Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

It depends on which version you are using. Older versions of rockfrontend downloaded uikit to /site/templates/uikit-3.X.X whereas newer versions download it to /site/templates/uikit

This is to make it easy for me to provide profiles - then I can simply include /site/templates/uikit and it will always work no matter which version the user downloaded.

And it will also help with updates. Just delete /site/templates/uikit and then download the latest version via RockFrontend's config screen.

I've also just pushed an update that flushes the cache for the dropdown. So if you happen to see an outdated version of the dropdown just do a modules refresh and it should grab the latest versions from github properly.

If all that does not work you can simply download uikit from github and replace /site/templates/uikit manually.

PS: All updates are in the DEV branch at the moment: https://github.com/baumrock/RockFrontend/tree/dev

Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

Just released v2.40.0 with some nice updates ? https://github.com/baumrock/RockFrontend/releases/tag/v2.40.0

I started to adopt a new workflow, because I often heard that "it's hard to keep track". That's why from now on I'll push updates to the dev branch and then merge them to main from time to time.

The topbar now shows the current page's template, which is handy:

y8yscln.png

 

Link to comment
Share on other sites
protro Full Member

protro

Posted
Posted

I seem to be running into an issue where woff2 fonts that I have manually added to site/templates/webfonts directory are triggering livereload in an endless loop every second. I tried setting the livereload config to have a longer interval, e.g. '2', but this seemed to stop livereload from registering changes entirely. 

$config->livereload = ['interval' => 2];

The Livereload logs shows (at random) one of several woff2 files repeatedly.

1409279752_ScreenShot2023-05-04at1_00_59PM.thumb.png.df1649e37f6758cd9e9d8467350abda5.png

Is there something I am missing with regard to adding fonts? Should I exclude the webfonts directory from livereload, and if so, what is the proper syntax for doing so using the 'exclude' parameter ?

Thanks @bernhard

Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

Hey @protro that's strange - why should it find the woff file as changed file if it didn't change?

Though you can customize livereload to your needs like this: 

$config->livereload = [
  // interval to watch for changes
  'interval' => 1, // 1s = default

  // user defined include paths
  'include' => [
    '.*/foo/bar',
  ],

  // you can reset default include paths
  'includeDefaults' => [],

  // user defined exclude regexes
  'exclude' => [
    '.*/site/my-ignored-folder',
  ],

  // you can reset default excludes
  'excludeDefaults' => [],
];

livereload.png?t=1683207904

I might exclude /site/assets entirely one day ...

  • Like 2
Link to comment
Share on other sites
  • 4 weeks later...
  • 4 weeks later...
protro Full Member

protro

Posted
Posted

I seem to be having a recurring FOUC (Flash of Unstyled Content) issue when developing with ProcessWire, Rockfrontend, and UIKit 3, and I'm not sure what the best approach is. I am using the `uk-animation-fade` and on my local MAMP development environment with Chrome and Brave I am getting flashes of the content before the markup properly fades in.

Any help, advice, or methodologies are greatly appreciated.

Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

Do you include the uikit js file with the defer attribute? I think doing that can lead to a behaviour that you describe. So I'd try including the uikit js script in the head so it get's loaded before the content and that should hopefully avoid FOUC. That has of course the drawback that the site need longer to load.

I can't say wether one way or the other is preferable but that's what I'd suggest to exactly identify the problem and then look for the best solution for your case.

  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
bernhard Hero Member

bernhard

Posted
  • Author
Posted

Monthly update: RockFrontend 3.2.2 is out ? 

Bug Fixes

  • RockFrontend script tag in markup when not needed (25364be)
  • add lattepanel again (had to temporarily remove it on previous release)

Features

  • add HumanDates library for better readable date ranges (1. Jan. 23 - 3. Jan. 23 ---> 1. - 3. Jan 23)
  • don't load livereload in iframes and update minification
  • only load RockFrontend.js if enabled
  • Like 2
  • Thanks 1
Link to comment
Share on other sites
cwsoft Sr. Member

cwsoft

Posted
Posted

@bernhardWish days would have 30 hours so I could use 6 for testing stuff like your RockFrontend* modules while still have enough time for family, day job and spare time :-). Thanks anyway, sometimes I will test all your modules for sure, as your Github repos are already a big inspiration from a coding perspective. 

  • Thanks 1
Link to comment
Share on other sites
protro Full Member

protro

Posted
Posted
On 6/29/2023 at 1:35 AM, bernhard said:

Do you include the uikit js file with the defer attribute? I think doing that can lead to a behaviour that you describe. So I'd try including the uikit js script in the head so it get's loaded before the content and that should hopefully avoid FOUC. That has of course the drawback that the site need longer to load.

I can't say wether one way or the other is preferable but that's what I'd suggest to exactly identify the problem and then look for the best solution for your case.

@bernhard thank you very much for suggesting the defer option as the culprit. It seems to have fixed the FOUC content flashes I was encountering. Looking forward to upgrading my existing sites to the latest Rockfrontend … I saw your note about breaking changes if I am jumping from v 2.3 -> 3.x.x. I will keep an eye out for those.

  • Like 1
Link to comment
Share on other sites
  • 4 weeks later...
bernhard Hero Member

bernhard

Posted
  • Author
Posted

v3.3.0 is out!

So many great new feature - I hope I find the time to write docs for them one day ? 

 

Bug Fixes

  • apostrophes breaking alfred() (3bcc291)
  • improve getUikitVersions in module config (5743df9)
  • remove outdated uikit profile - please use the rock profile instead! (e92f9bc)
  • wrong template path when using latte includes (f2277e7)

Features

  • add static site rendering feature (1a87bf9)
  • add view folder feature (dab548b)
  • improve topbar hidden style (959f797)
  • tweak frontend modal z-index for uikit nav (20f4362)
  • Like 1
Link to comment
Share on other sites
  • bernhard changed the title to RockFrontend 🔥🚀 The Powerful Toolbox for ProcessWire Frontend Development

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...