NPM Resource Changed ? ? Pending

User tests: Successful: Unsuccessful:

avatar dgrammatiko
dgrammatiko
4 Oct 2020

Pull Request for Issue joomla/cassiopeia#129 .

Some facts on Google Fonts

  • They probably exist in the user's cache so they're super fast
    This is utterly wrong for 2 reasons: A. Assumptions are really bad when it comes to render blocking elements B. Since the revealing of Spectre and Meltdown vulnerabilities all browsers run every site in isolation, so there are no global cache that the fonts could benefit from.

  • CDNs are fast
    Yes and no. If you observe their own performance in isolation yes their fast but if you're adding them in the loop of a website you have to account the extra DNS resolving, the extra connection, etc

  • You can mitigate this with preconnect and prefetch
    To a degree but not completely. Unfortunately there are 2 different domains, one for the css file and another for the actual fonts. So even with prefetch and preconnect the problem is not resolved (decreasing the time, but not eliminating it)

  • We can tolerate this performance degradation in favour of DX
    Actually this PR is meant to be a proof that you can have your cake and eat it. Keep the DX high with a nice simple widget that will localise the google fonts, so also the end users don't have to pay the high tax of blank screen

Performance audit

For those not in the loop of auditing sites for performance, here's a simple explanation of what we try to mitigate here:
Goto https://www.webpagetest.org/easy.php enter joomla.org and click on the 2 checkboxes. Await for the results or check them here: https://www.webpagetest.org/result/201003_Di3P_561f21bbe231da8eea0547d2be0de7c9/2/details/#waterfall_view_step1

The CSS CDN for the google font takes over 1 sec to d/l the 0.5kb of the data. (that file needs to be parsed as well)
Screenshot 2020-10-04 at 01 23 19

The CDN for the actual fonts takes around 1.5sec to d/l the font
Screenshot 2020-10-04 at 01 23 51

In total you have a 2.5 sec delay (on a real 3g connection) on top of the other render blocking stuff (namely Bootstrap and all the javascript files that AREN'T deferred)

Eliminating this delay will make EVERY Joomla site faster

Summary of Changes

The proposal basically comes in 2 parts:

  • A new Form Field with a very basic (atm) client side app (it should support setting: the font name, the sizes, italics, etc but right now it just accepts the name)

  • A PHP endpoint to store the font/css. Mind that since basically we're talking about uploading files to the server this is inherently unsafe.

I took some time to do some extra checks, namely:

  • The field will echo a timestamp which is saved in the server's state, so random XHR's won't work without form token, user privileges AND the extra timestamp.
  • The files are mime checked, for css the check will bail on php files and for font files if it doesn't meet the expected file mime
  • Client side (it's not implemented) the usage of private fields will ensure that the flow of data can not be hacked

Testing Instructions

You need to run rollup -c .rollup.config.js on the root folder to compile the js

Then goto the Atum styles and check the advanced tab you should see a new field at the end:
Screenshot 2020-10-04 at 12 50 09

Insert any Google Font name and the click on the localise it button. Check the Atum folder:
Screenshot 2020-10-04 at 12 51 40

That's all

@richard67

edbfcc1 3 Oct 2020 avatar dgrammatiko init
657b83a 4 Oct 2020 avatar dgrammatiko init
avatar dgrammatiko dgrammatiko - open - 4 Oct 2020
avatar dgrammatiko dgrammatiko - change - 4 Oct 2020
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 4 Oct 2020
Category JavaScript Administration com_templates Repository NPM Change Layout Libraries Front End Templates (site)
avatar dgrammatiko dgrammatiko - change - 4 Oct 2020
The description was changed
avatar dgrammatiko dgrammatiko - edited - 4 Oct 2020
avatar richard67
richard67 - comment - 4 Oct 2020

Just for my understanding: The tool allows to enter any font name, regardless if actually used by the template or not, and saves the files locally, but it doesn't influence which font is used by the template, right?

avatar dgrammatiko
dgrammatiko - comment - 4 Oct 2020

but it doesn't influence which font is used by the template, right?

Yes and no. So this is just a field and if the client part reach the full functionality should have a JSON value stored in the DB. https://github.com/joomla/joomla-cms/pull/30914/files#diff-3001ea626c0063d81109c9aa32830d8cR110

So we can have an object like:

{
  "google": [
    "Roboto": {
      "sizes": [100, '100i', 300, 700, 800], // 100i == 100 italics
    }
  ]
}

Also as @brianteeman posted a simple API to handle this kind of info would be a 1 liner for template devs/ designers

avatar dgrammatiko
dgrammatiko - comment - 4 Oct 2020

@brianteeman basically solving the same problem... Nice to see that there's a greater movement in this direction

avatar brianteeman
brianteeman - comment - 4 Oct 2020

That's why I posted it ;) Saw it last night

avatar HLeithner
HLeithner - comment - 4 Oct 2020

I'm really in favor for local fonts for several reasons but a google font downloader in core really?!

avatar richard67
richard67 - comment - 4 Oct 2020

Yes and no. So this is just a field and if the client part reach the full functionality should have a JSON value stored in the DB. https://github.com/joomla/joomla-cms/pull/30914/files#diff-3001ea626c0063d81109c9aa32830d8cR110

So we can have an object like:

{
  "google": [
    "Roboto": {
      "sizes": [100, '100i', 300, 700, 800], // 100i == 100 italics
    }
  ]
}

What is stored in the DB? All fonts which we ever localized? Or only the one which we localized last time? What happens if we once localized a font and then later decide not to use it anymore?

avatar richard67
richard67 - comment - 4 Oct 2020

Well, the discussion which initiated this RFC PR was started in the repository of the Cassiopeia improvement, see the link in the description.

We have implemented there a very basic way to use local font files with the restriction not to add new dependencies to external 3rd party packages.

If this restriction is dropped for implementing what is proposed here, I am ok with it.

I just wanted to mention it so readers can understand why what we have in the Casssiopeia repository does not go that far.

avatar dgrammatiko
dgrammatiko - comment - 4 Oct 2020

What is stored in the DB? All fonts which we ever localized? Or only the one which we localized last time? What happens if we once localized a font and then later decide not to use it anymore?

Well, it needs some imagination here: think instead of the single input and button a different interface where you can add/remove edit each Font and the related sizes, italics, etc. More like the https://perfectgrid.io/demo (same principle also that client app is the front end of a single form field). Check the HTML and you will connect the missing dots

What happens if we once localized a font and then later decide not to use it anymore?

Well, this is an RFC and this is one of the things that needs a solution

avatar dgrammatiko
dgrammatiko - comment - 4 Oct 2020

I'm really in favor for local fonts for several reasons but a google font downloader in core really?!

Honestly I'm fine with it if it will make all joomla sites a click faster. But then again this doesn't have to be Google specific, it's just Google fonts are the most common provider and actually this is my response to Richard on the issue in the other repo. It's nowhere near production ready or even feature complete...

avatar richard67
richard67 - comment - 4 Oct 2020

Well, this is an RFC and this is one of the things that needs a solution

@dgrammatiko Sure, and I did not want to block anything. An RFC doesn't have to be the final implementation. I just wanted to write down things which came into my mind, possible tasks or problems to handle, so it's not forgotten.

avatar HLeithner
HLeithner - comment - 4 Oct 2020

I'm really in favor for local fonts for several reasons but a google font downloader in core really?!

Honestly I'm fine with it if it will make all joomla sites a click faster. But then again this doesn't have to be Google specific, it's just Google fonts are the most common provider and actually this is my response to Richard on the issue in the other repo. It's nowhere near production ready or even feature complete...

I don't think we should make Cassiopeia or any shipped template a "framework" for templates,

We can't change the font now in backend right? so why should we allow to download any font? If people want to create a new template based on Cassiopeia then they should be able to download google fronts and add them to the template.

I'm against this pr, but I would really like to see an awesome documentation entry how to change Cassiopeia on docs. Including things like how to download google fonts to make your template faster. For example explain how https://google-webfonts-helper.herokuapp.com/ works and what's needed to move the font files (and which one) to the "new" template.

avatar richard67
richard67 - comment - 4 Oct 2020

@HLeithner The webfonts helper is not a good example because either you use it like most people and npm packages do and combine the different character sets all into one font file and so have much bigger font files than when loading from google fonts, where they are divided into separate files for the different character sets, or you pack them separately with that tool but then have to manually combine the css files into one using the "unicode-range". See joomla/cassiopeia#129 for a detailed explanation. The way proposed in this PR here does it better and results in same font files as when using Google fonts from web.

avatar HLeithner
HLeithner - comment - 4 Oct 2020

ok then explain the way to do it with this tool but don't add a font downloader to a simple template which is in every joomla installation.

avatar richard67
richard67 - comment - 4 Oct 2020

Maybe it could be decoupled from the template and become a "Font Manager" like we have a "Media Manager".

avatar dgrammatiko
dgrammatiko - comment - 4 Oct 2020

but I would really like to see an awesome documentation entry how to change Cassiopeia on docs

Let me bring few examples why this approach won't work on the Joomla context:

  • The flagship site joomla.org has more than 5 secs of blank screen on a 3g connection (much of this as a result of using Goole Fonts). I would like to see how the maintainers of this site are failing to use your approach

  • Joomla sites in the showcase suffer the sane exact problem. Here's a recent audit for all those sites: https://joomla-needed-fixes.netlify.app/data/ In sort 94% fail hard the RAIL

  • Template authors won't invest in such tools so Joomla might have to provide it for them

avatar dgrammatiko
dgrammatiko - comment - 4 Oct 2020

Maybe it could be decoupled from the template and become a "Font Manager" like we have a "Media Manager".

It's a Form Field. Use it or not up to the template author as with all the rest Form fields. Same thing as the Hue selector Field in the Atum, the field is Global...

avatar richard67
richard67 - comment - 4 Oct 2020

It's a Form Field. Use it or not up to the template author as with all the rest Form fields. Same thing as the Hue selector Field in the Atum, the field is Global...

Sure. But the process of maintaining the fonts could be de-coupled from this form field into an own UI, and the form field could just be populated with the available local fonts (or combinations of those? E.g. one may want to use font x for body and font y for headings.).

avatar HLeithner
HLeithner - comment - 4 Oct 2020

Maybe it could be decoupled from the template and become a "Font Manager" like we have a "Media Manager".

That idea is even worse.

It's a Form Field. Use it or not up to the template author as with all the rest Form fields. Same thing as the Hue selector Field in the Atum, the field is Global...

The font is part of the template creation, normally you change your template every day,week,month and your font is changed even less...

I don't see a good reason to bloat joomla more then it is already with functions that's used once in the lifetime of a joomla installation if you are lucky.

about j.org property, I'm pretty sure you can create a pull request to fix this problem.

avatar N6REJ
N6REJ - comment - 5 Oct 2020

I really like this idea. With the EU having file issues, yall know more about it then me, I can see how this would be extremely helpful. A LARGE majority of joomla users are affected by EU rules.
I can also see this being useful for those who don't use template devs. This function in one form or another is used similarly in every major template framework I know of. Only 99% of the time its not localised which this would do.
being its an extension it does ZERO harm to have it included in core.

avatar HLeithner
HLeithner - comment - 5 Oct 2020

being its an extension it does ZERO harm to have it included in core.

Actually that's not true.

  • Someone have to maintain it, if google changes anything we have to adapt
  • it introduce another punch of 3rd party extension which have to be maintained if they are compatible or introduce security issues
avatar zero-24
zero-24 - comment - 5 Oct 2020

What about shipping some comon Google fonts with the template for the user to choose from and a docs page explaining how to download new fonts?

Like we do for codemirror and the tinymce templates stuff.

avatar HLeithner
HLeithner - comment - 5 Oct 2020

Would be an option but what does the license say ?

avatar zero-24
zero-24 - comment - 5 Oct 2020

https://developers.google.com/fonts/faq

So it seems to be it is allowed to be downloaded? What kind of license do you mean? Are they special licenses for the fonts?

avatar dgrammatiko
dgrammatiko - comment - 5 Oct 2020

Would be an option but what does the license say ?

It's fine. D/l the particular fonts was my initial response to the issue, I also suggested a tool for that operation. Fwiw the front end code here is not that different than that tool, it's only GUI...

Edit: here's the proof from @jakearchibald and @surma https://youtu.be/TsTt7Tja30Q?t=922
Also a great resource on performance best practices

avatar dgrammatiko
dgrammatiko - comment - 13 Oct 2020

I think this PR has served its purpose. I've showcased how you can have a GUI interface for localising Google fonts. That was all there was supposed to be exposed here. The code could serve you as a base for any future implementations (pretty sure you will come back to this is couple of years, common patter with most of my proposals - they need their time)

avatar dgrammatiko dgrammatiko - close - 13 Oct 2020
avatar dgrammatiko dgrammatiko - change - 13 Oct 2020
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2020-10-13 17:13:24
Closed_By dgrammatiko
Labels Added: NPM Resource Changed ? ?

Add a Comment

Login with GitHub to post a comment