Version control

[JonChambers]

If I were adding the javascript and CSS files myself, I'd always refer to the version so that browsers know if the one in cache is up to date or not.

Something like:

Code: Select all

href="style.css?v=12345678"

How do I specify the version here?

[Tisaac]

If I were adding the javascript and CSS files myself, I'd always refer to the version so that browsers know if the one in cache is up to date or not.

Something like:

Code: Select all

href="style.css?v=12345678"

How do I specify the version here?

That's handled by framework (on prod, not on studio), just use the default files for these and it will work

[JonChambers]

How do I get it working on studio? I have to clear the cache on my phone whenever I want to test a new build for mobile. It’s getting tedious, especially since it clears the whole cache for all websites, just to test some new CSS.

[Tisaac]

How do I get it working on studio? I have to clear the cache on my phone whenever I want to test a new build for mobile. It’s getting tedious, especially since it clears the whole cache for all websites, just to test some new CSS.

I'm personnally using device simulator that ships with any "modern" desktop browser
Just open the dev tools/console, it's usually at the top right (Ctrl+Shift+M in firefox, called "adaptative mode").
And then I installed a plugin "reload css" that just clear the cache and reload css without reloading the full page. That works great for testing css and mobile.

[robinzig]

To be fair to the OP, I also wish BGA Studio handled this better. (And I'm glad to hear, having not yet finished a game into production, that the issue doesn't exist there - I was wondering what happens when you make a CSS change to a live game, would users have to be told to clear their cache too?)

Chrome devtools "responsive mode" is great for quick testing, but it doesn't replace testing on a real device, especially in a different browser - quite a lot of issues only come to light on real devices, not in desktop Chrome with a smaller window. And I too find it annoying to clear cache on mobile, where (as far as I know) there's no shortcut like control-F5 and you simply have to go into browser settings and do it manually.

I appreciate it's probably not easy to change now, but it annoys me that BGA studio doesn't do something like compute a hash of the contents and attach that as a query parameter, which would invalidate any cache as soon as it changes (but not otherwise) - as is fairly standard with a lot of build tools. Or even, as a shortcut, do with the CSS what it seems to do with JS (again I hope only in Studio!) of putting a timestamp in the query parameter to force the file to be fetched new each time. (Although that's still not great as it disables caching even when it doesn't need to be. And is pretty annoying when trying to put breakpoints in JS code, especially code that runs on startup - firstly the file never stays open in the "sources" tab and you have to search for it anew, and as I said for any code run before you have the chance to do that, you can't insert breakpoints in the browser, you have to do it by altering your code to add a `debugger;` statement which I find significantly annoying. But stepping through CSS isn't a thing so it would be significantly less annoying with CSS!)

I'm not trying to whine, just pointing out fairly simple ways (I hope) that the developer experience could be significantly improved.

[vurtan]

I did wonder myself lately. It seems that in Studio the JS Files get some query parameters, but not the for the CSS ( at least my current understanding).

I added in my project a custom button to reload all CSS files, to test those changes more quickly.

Just added the code to the post:

Code: Select all

<input type="button" onclick="reloadStylesheets();" value="RELOAD CSS" />
<script type="text/javascript">
function reloadStylesheets() {
	var links = document.getElementsByTagName("link"); 
	var queryString = '?reload=' + new Date().getTime();
	for (var i = 0; i < links.length;i++) { 
		var link = links[i];
		if (link.rel === "stylesheet")
		{
			var p1 = link.href.split(".css")[0];
			
			link.href = p1 + ".css?" + queryString;
		}
	}
}
</script>

[thoun]

How do I get it working on studio? I have to clear the cache on my phone whenever I want to test a new build for mobile. It’s getting tedious, especially since it clears the whole cache for all websites, just to test some new CSS.

You can visit the studio website in private mode, it will not use cache, so you don't have to clear it on your phone

[Victoria_La]

Adding reload css button also documented on this page
https://en.doc.boardgamearena.com/Practical_debugging