[Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The next feature release of phpBB 3 will be 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.1. If you need support for phpBB 3.1 please visit the 3.1.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 826
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by hanakin » Thu May 29, 2014 4:45 am

I would say that providing documentation and a development version of the files is fine enough. just my opinion

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 670
Joined: Mon Mar 08, 2010 9:18 am

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by VSE » Thu May 29, 2014 5:11 am

brunoais wrote:It's as hanakin says. No git involved and oyu may not use the system() (or equivalent) function of php.
Then you edit the LESS/SASS files, and compile and minify them yourself.

The point is that phpBB should ship with the LESS/SASS files, the unminified and the minified scripts. Of course the minified compiled CSS will be what is linked to in the HTML, but the other scripts are there for developers... As a style author you should use the LESS/SASS, but you could also stick to the regular unminified CSS too... Just make sure your new CSS is compiled/minified, etc when distributed to the world, whether you use online tools, do it yourself, or whatever.
Has an irascible disposition.

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by brunoais » Thu May 29, 2014 9:29 am

Why not have phpBB do it himself?

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 826
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by hanakin » Thu May 29, 2014 3:29 pm

because we just add bloat where it ought not be. by including it as VSE has stated and providing documentation in the wiki for how to utilize it we are forcing style authors to venture into a cleaner way of working which is with the less files. Besides they can always add their own tweak file after the minify if they are that inept or lazy.

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by brunoais » Fri May 30, 2014 8:15 am

When there's errors in the CSS, the browser only reports them in the "compiled" CSS. How do you expect the style author to relate the different lines?
If it is constantly minified, how can the line number be useful when debugging and when checking for inconsistencies?
If someone like me finds an error in his version, there's no "unminified" version available. Are you forcing me to download another "full version" just to test and reproduce the error? I'd rather just flip the value of a constant and try again to gather as much material as possible. Having to download a "sister" version, clone the DB, install it, etc... Is a HUGE pain. Don't forget that I'd have to repeat the steps to get the error so I need first to reproduce the error multiple times until I pinpoint the issue to report it. If I don't do it in a clone of the original one, I can easily end up killing my live version.

Besides, if I just want to make some small adjustments to prosilver, for example, why do I have to make a complete development environment? Why not just go to the .css (or .less/.sass) file and make the changes? Compiling all this takes some time but it is only made once and I may easily just access the main pages that require that waiting to solve that waiting problem.

Don't you think like it is now is much more easy to deal with than having pre-"compiled" styles directly with phpBB? Don't forget that what you are mentioning is equivalent as dispatching phpBB with the styles pre-compiled (like they are in the cache directory).

We don't need a whole lot.

Edit:
My solution is as follows (high level view):
Add a new constant (Let's call it... "MINIMIZE_ASSETS", just for the sake of example).
For all files in the styles directory:
(Options, depends on below) For all file names that end with "-less" or ".sass" delete the files with the same name except the extension is ".css" (E.g. if "a.less", delete "a.css"; if "b.sass", delete "b.css")
If name ends with ".less":
Process it with the phpless engine

If name ends with
Process it with the phpsass engine

From the processing of those 2, all .less and all .sass should be producing a corresponding .css file (in case of files with the same name exist, overriding or appending should be done (requires deliberating)).
Then something is ran to join all imports into a single file. The LESS or the SASS compiler should suffice (I'm open for alternatives).
Then if MINIMIZE_ASSETS is not true, also order LESS (or SASS) to minimize the .css.

Now, for the .js. if MINIMIZE_ASSETS is not true, just pass it through google's closure compiler (with SIMPLE_OPTIMIZATIONS) with the open source JSShrink as a backup and I think it's good enough.

Do the following only if MINIMIZE_ASSETS is not true:
After having both minimized, time to gzip.
To gzip, just use file_get_contents() to read the relevant files, pass it through http://www.php.net/manual/en/function.gzencode.php and then save again in an appropriate place. Personally, I'd save it in a cache directory (not the actual cache directory as that one may not be accessed using the browser).

And it's done.
What's the difficulty of doing those steps? Is phpBB made in such that that this is impractical?
Last edited by brunoais on Fri May 30, 2014 9:02 am, edited 2 times in total.

User avatar
PayBas
Registered User
Posts: 305
Joined: Tue Jul 29, 2008 6:08 pm
Contact:

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by PayBas » Fri May 30, 2014 8:37 am

brunoais wrote:When there's errors in the CSS, the browser only reports them in the "compiled" CSS. How do you expect the style author to relate the different lines?
If it is constantly minified, how can the line number be useful when debugging and when checking for inconsistencies?
If someone like me finds an error in his version, there's no "unminified" version available. Are you forcing me to download another "full version" just to test and reproduce the error? I'd rather just flip the value of a constant and try again to gather as much material as possible. Having to download a "sister" version, clone the DB, install it, etc... Is a HUGE pain. Don't forget that I'd have to repeat the steps to get the error so I need first to reproduce the error multiple times until I pinpoint the issue to report it. If I don't do it in a clone of the original one, I can easily end up killing my live version.

Besides, if I just want to make some small adjustments to prosilver, for example, why do I have to make a complete development environment? Why not just go to the .css (or .less/.sass) file and make the changes? Compiling all this takes some time but it is only made once and I may easily just access the main pages that require that waiting to solve that waiting problem.

Don't you think like it is now is much more easy to deal with than having pre-"compiled" styles directly with phpBB? Don't forget that what you are mentioning is equivalent as dispatching phpBB with the styles pre-compiled (like they are in the cache directory).
I tend to agree with this. Ideally phpBB and every style should ship uncompressed, but have a Gulp instruction file included. When a page is requested for the first time, the resources should be processed and served from the /cache dir, just like Twig templates.

This will ensure greater maintainability. The only downside is that the very first page request will take longer.

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by brunoais » Fri May 30, 2014 9:06 am

PayBas wrote: This will ensure greater maintainability. The only downside is that the very first page request will take longer.
Yep. But I consider that negligible because it's the person that changed it who will probably be the first one to encounter such situation. Besides, just findign something that would look a "bit better" (for example, just changing a color) does not require a full develop environment. Just go to the .css (or .less or .sass) file, change it, purge cache and done. If under development, just edit the file and phpBB can pick up the change and adapt (there's already an option in the ACP to activate that).

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 826
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by hanakin » Fri May 30, 2014 9:42 am

As I said before I'm fine with it being automated as long as it's not intrusive and It runs via gulp rather than the methods that you outline as their are not always adequate and consistent.

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by brunoais » Fri May 30, 2014 10:13 am

hanakin wrote:As I said before I'm fine with it being automated as long as it's not intrusive and It runs via gulp
Then... The whole processing is made on the browser?
You need something that executes javascript in order to use gulp. What would you use to process javascript?
BTW, that reminds me, how does people run gulp? Do you download nodeJs (or something like that) just to run it?
hanakin wrote:rather than the methods that you outline as their are not always adequate and consistent.
What do you mean? They seem quite reliable to me. Besides, minimization is not urgent matter, if it fails, just move on. The gzip process can deal with that. It won't be as small but that's not a real issue. We already deliver all assets unminimized.

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 826
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by hanakin » Fri May 30, 2014 10:24 am

It's run through NodeJS yes.

As per how it's better it provides better optimization options for the minification, and the less compiling that the ones you elude to which are extremely useful.

I'm fine with yours I guess if I can opt out of it for my own way

Post Reply