Jump to content

Text-reveal animation for RockFrontend?

bernhard

By bernhard,
in RockFrontend

 Share

Recommended Posts

bernhard Hero Member

bernhard

Posted
Posted

@heldercervantes shared a very cool project lately that has a neat text-reveal animation. I was wondering if it could make sense to add these effects to RockFrontend.

Now I have two questions:

  1. Do you think it makes sense to add these to RockFrontend? As @Stefanowitsch was asking how it is done and is also using RockFrontend we'd at least be 3 users 😄 
  2. What about the technical part? What would be the best way of adding such scripts to RockFrontend?

The problem that I see here is that adding everything to a global RockFrontend.js file will bloat that file over time.

On the other hand having a single .js file for very small features will maybe result in many many JS files loaded in the document's <head>

Or would you just use NPM or something to load all needed scripts? Or would it maybe be possible to load js snippets on demand via JS itself? What about the pro's and con's of every approach? I'm not so much into frontend development and I'm mostly using UIkit so I just include one file and have (almost) everything that I need. So maybe that's totally basic questions, or maybe it's something that can't be done "right", I don't know?

Thx for your help in advance 🙂 

Link to comment
Share on other sites
Stefanowitsch Sr. Member

Stefanowitsch

Posted
Posted

For me personally I see RockFrontend as a tool for development. Not a frontend framework. 

The main reasons why I am using RockFrontend are:

- Auto Refresh
- Make use of the rfGrow Feature for fluid font sizes
& Handling Assets:
- Auto compile LESS to CSS
- Minify CSS and JS Files

I know that there are already some JS-Snippets included (like rf-scrollclass) but I it's too tempting to start in including more and more Frontend Framework features. I personally use only a fraction of what RockFrontend offers and it's hard keeping track because new features arrive continuously 🙂 

If more and more frontend framework features will be included at some point in the future you have to decide wether RockFrontend will evolve into it's own frontend framework, shipping scripts and styles for everyday usages.

  • Like 4
Link to comment
Share on other sites
wbmnfktr Hero Member

wbmnfktr

Posted
Posted

I didn't work on pure PW projects lately but I think that RockFrontend could be The Tool-Belt for PW Frontend Devs one day. 

Features like the ones @Stefanowitsch mentioned are the reason I use and like it.

Almost ZERO-setup just by installing the module.

  • Auto Refresh (THAT'S THE FEATURE I LOVE!)
  • Compiling CSS from whatever
  • Minifying files
  • ...

Yet there is so much other stuff I need nowadays that just don't work without additional steps.

Like TailwindCSS or AlpineJS.
I need Node.js/NPM, some scripts, and an additional workflow that runs parallel to ProcessWire/Rockfrontend all the time.

I can't give you a straight answer to your question but maybe explore the frontend-world without UIKIT, look into something like Astro (JS) and Laravel (PHP) to see how and what's working there.

Right now I'm deep into Astro and I love it - even though there is way too much JS involved for my likings.
Building frontends is almost fun again. Pulling in data is quite easy. Yet... it's not for all kinds of websites or projects, at least not for me. I still know when to switch to a full PW setup.

Link to comment
Share on other sites
heldercervantes Sr. Member

heldercervantes

Posted
Posted
20 hours ago, wbmnfktr said:

Like TailwindCSS or AlpineJS.

Love this! Makes total sense.

Although I did try to make AlpineJS part of my boilerplate and quickly gave up. Just easier for me to add a JS file and do my stuff with vanilla. Right now I just have a Vite thing, a js that imports and inits scripts from a file (like the one that Bernhard mentioned).

Effects like my text reveal thing require adding the type of ready-made JS and CSS that I tend to avoid. However if it could be part of a library of stuff a developer can browse and easily add to their project, it might be a cool idea. Alpine might help with this.

  • Like 2
Link to comment
Share on other sites
maetmar Full Member

maetmar

Posted
Posted

I would like to add my 50cents here as well. I basically agree to what @Stefanowitsch mentioned above.

I love to use RockFrontend for the following reasons: LATTE, LATTE, LATTE then AutoRefresh and thats it for me personally.

I also like to keep all my modules as much as possible to the latest version.
With RockFrontend this means, I get lots of new stuff, which might or might not affects my site (I always need to test this), but which I do not really need most of the time.

Maybe it would make sense to split the module into two parts. RockBackend and RockFrontend where RockFrontend needs to have RockBackend as a dependent module somehow?

I personally find it strange that a module which offers neatless integration with LATTE and auto compiles LESS files also provides scritps for fluid font sizes, animations, downloading fonts to local folders, etc.
I know this is just my personal preference and the way I work, and others will have a different approach here and will use many features of what the module offers.
And by no means I want to criticize Bernhard for the way he develops his module. 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites
wbmnfktr Hero Member

wbmnfktr

Posted
Posted
On 8/23/2023 at 6:53 PM, heldercervantes said:

Although I did try to make AlpineJS part of my boilerplate and quickly gave up.

I use AlpineJS all the time in ProcessWire.
See the package.json here.

In terms of AlpineJS it's almost a one-time-build unless you place all logic in an external file.
That takes minimal more effort to make it work.

This is how I use it:

package.json 

"scripts": {
    "watch": "npm-run-all --parallel watch:*",
    "build": "npm-run-all build:*",
    "watch:alpinejs": "npx esbuild site/templates/src/alpinejs.js --bundle --target=es2018 --watch --outfile=site/templates/js/alpine.dist.js",
    "build:alpinejs": "npx esbuild site/templates/src/alpinejs.js --bundle --target=es2018 --minify --outfile=site/templates/js/alpine.dist.js",
    "watch:appjs": "npx esbuild site/templates/src/app.js --target=es2018 --watch --outfile=site/templates/js/app.js",
    "build:appjs": "npx esbuild site/templates/src/app.js --target=es2018 --minify --outfile=site/templates/js/app.js"
},

src/alpinejs.js 

import Alpine from "alpinejs";
// import mask from "@alpinejs/mask";
// import intersect from "@alpinejs/intersect";
import persist from "@alpinejs/persist";
// import focus from "@alpinejs/focus";
// import collapse from "@alpinejs/collapse";
// import morph from "@alpinejs/morph";

// Alpine.plugin(mask);
// Alpine.plugin(intersect);
Alpine.plugin(persist);
// Alpine.plugin(focus);
// Alpine.plugin(collapse);
// Alpine.plugin(morph);

window.Alpine = Alpine;
Alpine.start();

src/app.js 

document.addEventListener("alpine:init", () => {
  Alpine.store("myStore", {
    list: Alpine.$persist({
      listDaysDefault: 1,
      revision: 0.1,
      startDate: "",
      endDate: "",
      items: [],
    }).as("localStorageMyStore"),

    // disable scroll on body
    scrollLocked: false,
    toggleScrollLocked() {
      // if either or overlay or category menu is active
      if (this.showOverlayMenu || this.showCategoryMenu) {
        // console.log("true");
        this.scrollLocked = true;
      } else {
        // console.log("false");
        this.scrollLocked = false;
      }
    },

    // Getter, Setter, Functions
    // https://alpinejs.dev/directives/data#methods
    // funFunction() {
    //   return value;
    // },
  });
});

// we check for updates on local storage and reload all browser showing this website
// enable when necessary
// window.addEventListener("storage", () => {
//   location.reload();
// });

_main.php 

<script defer src="/site/templates/js/alpine.dist.js?=<?php echo time(); ?>"></script>
<script src="/site/templates/js/app.js?=<?php echo time(); ?>"></script>

 

Let me know where it breaks your boilerplate setup.

Link to comment
Share on other sites
  • 1 month later...
heldercervantes Sr. Member

heldercervantes

Posted
Posted
On 8/25/2023 at 11:46 PM, wbmnfktr said:

Let me know where it breaks your boilerplate setup.

The problem isn't breaking the boilerplate, but rather breaking my habits 😅

I mean I'm so used to just making my own vanilla js and getting it doing what I want that needing to flip the switch to Alpine's way is enough to make me postpone the decision to the next project.

  • Like 1
  • Haha 1
Link to comment
Share on other sites

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