Creating website specific CSS / JS files

Feature Request
1

For the optimal user experience and SEO, website speed is an important factor.
Pinegrow Pro is ideal for creating clutter-free code for websites but leaves behind large css / js files.
On simple websites the Purify plugin is fine but on dynamic or data-driven sites it misses so much as to be useless.
A nice feature for Pinegrow would be to copy the bootstrap classes and selectors to a site css file as they are used - so the bootstrap css file could be dumped when the project is finished. Same goes for jQuery and BS js files.
I have tried making a list of all selectors as I use them and them copying them to site.css but make one error and it can take ages to figure out what’s missing

2

Hi Michel,

That’s a very time consuming methode you are using!

For best SEO practices you are better of using a build system for Bootstrap. It integrates perfect in Pinegrow. (read the stuff about browser sync etc. Add using "localhost" as a testing server to accommodate a working preview - #37 by mxs ) by @Emmanuel But that’s just part of it!
Build tools ¡ Bootstrap v4.6
Customize bootstrap 4 (sass) w/ gulp | by Pure Danger | Medium tutorial!

That way you can choose from the beginning what to use and what not. It can always be changed when ever you want and you have full control over the CSS and JavaScript. You save bandwidth from the beginning. Every part of Bootstrap has it’s own CSS and JavaScript. Its all written in separate files and all you have to do is point out to your build system what file you want represented in the main file. You can download the developers version on the Bootstrap website.

The SASS part can be done in Pinegrow by clicking Page > “Customize and update Bootstrap theme” after opening a Bootstrap 4 project.

But I wonder do you use images with <picture> and <srcset> and jpg with webp fallback in your websites, because then we are really talking about saving MB’s instead of some KB’s for a couple of text files. When you are still using only one image for all devices you have to consider the use of <picture> and <srcset> and webp!

Then a important question to ask is: Do I need a dynamic website (WordPress etc.), because 9 out of 10 we don’t need that as well! There is a static Pinegrow CMS for clients that want to edit their own website.

You say the Purify plugin doesn’t function on large sites (you have the paid version!?). I hope you contacted Bob about it to figure out what the problem is and to update the plugin. It’s a smart guy and you only have to explain the exact problem to him so he is able to fix the problem.

Regards,

David

1 Like
3

Thank You David
Very useful guidence - I guess I need to update my knowledge base.
I might be a bit obsessive about speed (my latest website homepage (https://taunton-town.uk) loads in 300ms) but although I use Pinegrow, I’ve hand coded most of of my previous work.
I tried using Wordpress but found its bloated approach un-necessary.
However, I do use PHP and MySQL and ‘Taunton Town’ is an example of that.
The Purify plugin doesn’t work to well with php because it can’t see ‘PHP includes’.
Thanks for your guidence - much appreciated

4

Yes that’s a real problem in Pinegrow! I use PHP includes for almost every site I make because of multi language parts of the website. What I do now is make the global design in Pinegrow and then when I start making pages I switch back to Sublime Text 3 to work in PHP and watch it in MAMP.

At the moment I’m creating a build system for Bootstrap 5 and when it’s ready I will publish it on this forum.

A other website speed tip is this modern approach to Ajax from my friend Arvind Gupta:

This week we tested Pinegrow Interactions Animations and made it work in Ajaxify.

www.4nf.org Ajaxify it works perfect with PHP.and I’m involved in the testing of the scripts.

How it works is so simple:

Include the Ajaxify script somewhere at the bottom (jQuery not needed):
<script src= "https://cdn.jsdelivr.net/gh/arvgta/ajaxify@8.1.0/ajaxify.min.js" ></script>

Underneath this:
let myAjaxify = new Ajaxify({elements: '#main-content, #navbar-stay, #footer-stay', selector: '#navbar-stay a, #footer-stay a', verbosity: 2, scrolltop: true, requestDelay: 50, pluginon:true, alwayshints: ""});

Wrap the parts that are declared in the proper wrapper:
#navbar-stay = your complete navigation (php include no problem)
<div id="#navbar-stay">
Your Navigation
</div>.
#main-content = your content part of the website
<div id="#main-content">
Your content
</div>.
#footer-stay = your footer (php include no problem)
<div id="#footer-stay">
Your footer
</div>.
Be sure to wrap it in the include not outside. When you use a include for a part of the website.
To test it you have to be on a server or local server.

If you need help, you can always ask on this forum.

Regards,

David

1 Like
5

@mxs,
While the Purify plugin is suffering from my general resistance to typescript (throwing a typeError that I’m fixing right now from the latest NW.js update) it handles PHP files just fine. For example, if you have a simple footer.php file:

<?php
echo "<p class='dark-bkg happy-text'>Copyright &copy; 2020-" . date("Y") . " mysite.com</p>";
?>

The resulting css output will have both the ‘dark-bkg’ and ‘happy-text’ rulesets. I’d be happy to test at any of your files for proper detection.
Note: I’ll be pushing an updated version that doesn’t error out when minifying/prefixing tomorrow morning. Likely won’t work with options on the newest update of Pinegrow.
Bob

6

@RobM Thanks for responding.
The website I tried Purify on was https://taunton-town.uk
This is a new directory and contains a number of PHP scripts to test the queries.
Additionally, these scripts provide an element of dynamic meta descriptions.
I’ll give it another try in a while - working on another project at the moment.