Why script-tags are placed at the bottom of the page in Prosilver?

Discuss requests for comments/changes posted in the Issue Tracker for the development of phpBB's style.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB or modifying styles of released phpBB versions. If you need support for phpBB please visit the Support Forums on phpbb.com.

If you have questions regarding creating styles please post in Styles Support & Discussion to receive proper guidance from our staff and community.
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by hanakin »

Look there is countless debate on this all over the web, and even more documentation out there as to why/when you should opt for the footer/header. The fact of the matter is that it is done for page rendering/performance reasons.

https://stackoverflow.com/a/2105394
https://stackoverflow.com/a/1221187

If you have an issue with what you are trying to achieve based on placing them where they are do to the reasons I have linked then please ask and we will do our best to help you properly handle it. The fact of the matter still remains that there should be no downside to placing it in the footer. If you see one then pls report it and we will fix it the correct way.

Caveat: there is a lot of things that change daily with tech and most of it is adopted far too quickly. Its is not always recommended to do this in the case such as phpBB where you have a lot of novice individuals building and working with the front-end of the application. It is safer to take your time and adopt things slowly and in a well thought-out manner as to not hinder or cause undo strain on some average joe who wants to add something to there site. This however does sometimes mean we may indirectly cause strain on developers, but the fact is developers by nature are engineers and can adapt more readily than "Joe" ;)
Donations welcome via Paypal Image

Sectoid
Registered User
Posts: 15
Joined: Wed Sep 13, 2017 1:41 pm

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by Sectoid »

DavidIQ wrote: Wed Sep 13, 2017 10:56 pm So you haven't actually run into this issue developing an extension or doing something with phpBB?
As long as jQuery is at the bottom I can't do what I want to do. That's why I'd like to see jQuery in the <head> in the next version of the Prosilver.
DavidIQ wrote: Wed Sep 13, 2017 10:56 pm The way jQuery is loaded in prosilver has not changed in over 6 years, that's pre-3.1.0-Alpha. The pros and the cons were weighed here:
viewtopic.php?f=84&t=41199
Thanks for the tip, I read the topic. The reasoning to put jQuery to the footer was almost solely the small/neglible performance gain with random users. I can understand the logic on some sites but not on forums. Today we have CDNs and much more mobile device usage so I would go usability first, performance second. In the end, as long as the page is served in decent time, nobody cares how fast the page was actually loaded.

Sectoid
Registered User
Posts: 15
Joined: Wed Sep 13, 2017 1:41 pm

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by Sectoid »

hanakin wrote: Wed Sep 13, 2017 11:01 pm Look there is countless debate on this all over the web, and even more documentation out there as to why/when you should opt for the footer/header. The fact of the matter is that it is done for page rendering/performance reasons.

https://stackoverflow.com/a/2105394
https://stackoverflow.com/a/1221187
If the performance for random users is the most important thing then you should put jQuery to the footer. I'm questioning is it really that important in forum software.
hanakin wrote: Wed Sep 13, 2017 11:01 pm If you have an issue with what you are trying to achieve based on placing them where they are do to the reasons I have linked then please ask and we will do our best to help you properly handle it. The fact of the matter still remains that there should be no downside to placing it in the footer. If you see one then pls report it and we will fix it the correct way.
I want to change the body tag class name before user sees anything. And I want a user to be able to use the page's AJAX functionality before the DOM is loaded completely.
hanakin wrote: Wed Sep 13, 2017 11:01 pm Caveat: there is a lot of things that change daily with tech and most of it is adopted far too quickly. Its is not always recommended to do this in the case such as phpBB where you have a lot of novice individuals building and working with the front-end of the application. It is safer to take your time and adopt things slowly and in a well thought-out manner as to not hinder or cause undo strain on some average joe who wants to add something to there site. This however does sometimes mean we may indirectly cause strain on developers, but the fact is developers by nature are engineers and can adapt more readily than "Joe" ;)
Agree. It's also a question of how to get along with limited resources. For some reason everybody should swap to html5, ipv6 etc. even though only a few can give good enough reasons WHY the change should be made. This footer script thing belongs to the same category. If you write to the stackoverflow that "scripts should be in the footer" you get 200 votes even though you don't give any good reasons why to do so.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by hanakin »

what are you using the change in class name for? and what do you mean by use the pages ajax? the page has no ajax? :shock:

if adding ajax or interactive functionality is what you are after than jquery is really not the best choice. not to mention adding ajax to phpbb is rather difficult as we do not have an api to interface with. This makes any kind of ajax extremely hacky unless its only to handle functionality outside of phpbb.

In any case I would still point you towards something like vueJS for handling any of this as you have two binding and massive performance gains over jquery https://vuejs.org/, https://laracasts.com/series/learn-vue- ... episodes/1 in which its still a standard practice to include this in the footer.
Donations welcome via Paypal Image

Sectoid
Registered User
Posts: 15
Joined: Wed Sep 13, 2017 1:41 pm

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by Sectoid »

hanakin wrote: Thu Sep 14, 2017 2:04 am what are you using the change in class name for? and what do you mean by use the pages ajax? the page has no ajax? :shock:
viewforum.php already has AJAX functionality: "Mark topics read" but I'm going to extend this much more.

<Body> classname (or rather <html> classname) is needed if I want to hide or change some html-elements. For example, a mobile user finds my site with google. He has 640*480 resolution so I want to hide some elements from viewtopic.php like miniprofile and desktop ads and make some links bigger etc. I could also do font resizing, change brightness etc. with client-side scripting only.
hanakin wrote: Thu Sep 14, 2017 2:04 am if adding ajax or interactive functionality is what you are after than jquery is really not the best choice. not to mention adding ajax to phpbb is rather difficult as we do not have an api to interface with. This makes any kind of ajax extremely hacky unless its only to handle functionality outside of phpbb.
But don't you believe this will change in the future?
hanakin wrote: Thu Sep 14, 2017 2:04 am In any case I would still point you towards something like vueJS for handling any of this as you have two binding and massive performance gains over jquery https://vuejs.org/, https://laracasts.com/series/learn-vue- ... episodes/1 in which its still a standard practice to include this in the footer.
Thanks for the tip but it's not worth the trouble. In the end, we are talking about very small details here. I just thought when opening this topic that it would be a trivial choice to move jQuery to the <head>.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by hanakin »

Sectoid wrote: Thu Sep 14, 2017 9:04 am viewforum.php already has AJAX functionality: "Mark topics read" but I'm going to extend this much more.
ok yes, but thats hacky ajax and its oneway. It only writes to the DB and tricks the user by changing the interface via js. It not two-way which is a much cleaner way of performing things and safer as well.
Sectoid wrote: Thu Sep 14, 2017 9:04 am <Body> classname (or rather <html> classname) is needed if I want to hide or change some html-elements. For example, a mobile user finds my site with google. He has 640*480 resolution so I want to hide some elements from viewtopic.php like miniprofile and desktop ads and make some links bigger etc. I could also do font resizing, change brightness etc. with client-side scripting only.
so js browser detection? There are far better services that already exsist for this you may look into those first. definitely not a jquery thing though
Sectoid wrote: Thu Sep 14, 2017 9:04 am
hanakin wrote: Thu Sep 14, 2017 2:04 am if adding ajax or interactive functionality is what you are after than jquery is really not the best choice. not to mention adding ajax to phpbb is rather difficult as we do not have an api to interface with. This makes any kind of ajax extremely hacky unless its only to handle functionality outside of phpbb.
But don't you believe this will change in the future?
eventually we will have an api and in the case its more preferable to use something like vuejs/angular ;)

in any case there are far more instances where placing it in the head is problematic than not so as a standard we start with the foot and only break out of this if absolutely necessary. That is the philosophy we follow.
Donations welcome via Paypal Image

Sectoid
Registered User
Posts: 15
Joined: Wed Sep 13, 2017 1:41 pm

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by Sectoid »

hanakin wrote: Thu Sep 14, 2017 10:39 am ok yes, but thats hacky ajax and its oneway. It only writes to the DB and tricks the user by changing the interface via js. It not two-way which is a much cleaner way of performing things and safer as well.
memberlist.php livesearch seems to be two way.
hanakin wrote: Thu Sep 14, 2017 10:39 am so js browser detection? There are far better services that already exsist for this you may look into those first. definitely not a jquery thing though
Any reason why it's not a jQuery thing? We have jQuery on every page but I should still use another framework? Waste of resources I would say.
hanakin wrote: Thu Sep 14, 2017 10:39 am in any case there are far more instances where placing it in the head is problematic than not so as a standard we start with the foot and only break out of this if absolutely necessary. That is the philosophy we follow.
Please give me at least one concrete example why it's problematic. I have had jQuery in <head> in other CMSs as long as I can remember and never had any problems.

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1903
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by DavidIQ »

I don't understand your theorized mobile example. We already have a responsive style which adapts to screen size all without the use of JavaScript. Doing a non-JS solution sounds like a much better and cleaner approach to me.
Image

Sectoid
Registered User
Posts: 15
Joined: Wed Sep 13, 2017 1:41 pm

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by Sectoid »

DavidIQ wrote: Thu Sep 14, 2017 12:40 pm I don't understand your theorized mobile example. We already have a responsive style which adapts to screen size all without the use of JavaScript. Doing a non-JS solution sounds like a much better and cleaner approach to me.
Bad example from me! By hiding I actually meant collapsible elements. For example to hide everything above a topic title, hide miniprofile etc. User could see hidden content if he wanted.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by hanakin »

Sectoid wrote: Thu Sep 14, 2017 11:09 am
hanakin wrote: Thu Sep 14, 2017 10:39 am in any case there are far more instances where placing it in the head is problematic than not so as a standard we start with the foot and only break out of this if absolutely necessary. That is the philosophy we follow.
Please give me at least one concrete example why it's problematic. I have had jQuery in <head> in other CMSs as long as I can remember and never had any problems.
because you have no idea the skill level of the individual making the customization and weather they understand the difference between sync/async and the fact that the dom needs to be built before you can interact with it. It is safer to put it in the footer as you do not have to plan for any of this.

have a look at the source of https://www.facebook.com/ crap ton of js on the head all async and on the bottom, they use the best of both...we can not ensure this to the average forum admin
Donations welcome via Paypal Image

Post Reply