Sharing Assets Offline and Online

[Galeodan]

I have several websites and I want them to share common assets - For now, at least a global css file. As this must be a common challenge, I anticipate there will be several different ways to achieve the end as well as several different opinions as to which is the best strategy. 

My preference would be to have some mechanism setup to "clone-link" the css files in 2 separate projects, so that changes in one file are imposed on the other. Then I would still be able to work in the confines of a single project at a time. 

An alternative, I can envisage, would be to have seperate projects \ websites link to a common css file which is served by one of the projects. Working offline, I know I can link an HTML files to a css file anywhere on the harddrive. But that would mean linking an HTML file to a css file that is outside the project folder and once the project is posted online, that outside link would be useless. I'm expect there is a smart, i.e. automated, way to change the css-link (or whatever) to a specific web-address, (such as one of my sites) in the process of uploading. For example: when working offline, I can have the HTML files in mysite2 link to D:\Webs\mysite1\global.css.  Then, once posted, the links change to www.mysite1\global.css.  I imagine this can be achieved quite neatly with a js script, but I am only just getting into jas and, as yet, don't know where to start.

All help and opinions much appreciated. Just please don't mention Bootstrap (I have a peverse need to do it my way). 🙂

[Nancy OShea]

Put your common assets on a CDN (content delivery network) such as Amazon S3 Buckets.  And reference them with absolute URLs.

Why you should use Content Delivery Networks:

https://www.fastly.com/blog/why-you-should-use-content-delivery-network

[Galeodan]

Appreciate the suggestion, Nancy. It would be easy enough to serve the css files on one of my websites (they are not heavy). My question relates to how I would work on the files offline and then have them link by absolute URL when posted. 

[Nancy OShea]

Nothing works offline unless you package the whole enchilada (HTML files, scripts, images, media and all other dependencies) into a single  compressed folder and ship it to the recipient.  

Recipient will need to unzip the folder and files at their end for offline viewing in their browser.

[BenPleysier]

Reading Nancy's reply makes me think of containerised solutions.

Have a look at https://docs.docker.com/engine/swarm/configs/

[BenPleysier]

Create a separate site in Dreamweaver for the common features.The link to the common files for development will need to be different to production.

I think that Nancy's suggestion of using Amazon S3 Buckets., is an excellent suggestion. Down the track you may want to share a Database or you may want to serve your images in their correct format for different devices. All this will be possible with S3.

[Galeodan]

Create a separate site in Dreamweaver for the common features.The link to the common files for development will need to be different to production.

By @BenPleysier

Thanks Ben. That looks like a good solution to the challenge of maintaining assets shared betweeen websites. DW Preview (F12) doesn't seem to like it, I suppose because the referenced css file is outside the current project. And I expect the DW file-cache will not function either. But that's not a big loss 🙂 

Now I just need a practical (i.e. minimum and reliable effort) way to edit all the HTML links to css and other resources, at the time of posting, when they are in another project. The css file itself will also need editing if it calls images from another folder for hero backgrounds etc.

[Galeodan]

Put your common assets on a CDN (content delivery network) such as Amazon S3 Buckets.  And reference them with absolute URLs.

Why you should use Content Delivery Networks:

https://www.fastly.com/blog/why-you-should-use-content-delivery-network

By @Nancy OShea

Thanks, Nancy. This has been suggested to me before (probably by yourself). I see the benefit and will pursue it at some in the nearish future.

Meanwhile, my immediate concern, and question, was how to work on the development of the various sites, before posting them online, and how to change the links so they still work online. From my original message: "For example: when working offline, I can have the HTML files in mysite2 link to D:\Webs\mysite1\global.css.  Then, once posted, the links change to www.mysite1\global.css. "

I speculated that this post-time editing process might be automated by javascript, in the head-region, that would recognize that the file was now online and would change the link from, for example:

href="D:\Webs\mysite1\global.css"... (when offline)

to...

href="http://www.mysite1/global.css"... (when online)

From your later suggestion (that the only way is to zip the whole enchilada) I deduce that you do not think this can be done and I will have to edit every header before posting. 

[osgood_]

You could link a javascript file at the end of each of the pages which you want to 'share' the css stylesheet, just before the closing </body> tag:

<script src="online_offline_css.js"></script>

Then create the file 'online_offline_css.js' and insert the below in it:

let stylesheet = document.getElementById('globalCss');
let status = "online";
status === "online" ? stylesheet.setAttribute('href', 'http://www.mysite1/global.css') : stylesheet.setAttribute('href', 'D:\Webs\mysite1\global.css');

And in your pages just add a link to a stylesheet with an id of globalCss:

<link rel="stylesheet" href="" id="globalCss">

when you are offline just open the 'online_offline_css.js' file and change status to "offline"

let status = "offline";

Is that want you want to do?

I've never tried to link to a css file 'locally' outside of the root folder but I guess its only like linking to a remote online content delivery network but locally, you've obviously tested it and it works?

[Galeodan]

Thanks Osgood I haven't tried it yet, but it looks like it should work. I will need to do something similar in the css file to change links to background images etc., but I'm not sure a js solution is feasible as it is in the HTML file. But it's not a big deal to simply duplicate the linked resources in both websites and use relative URL's - They don't take much much space and at least they are static (unchanging).

I was hoping js would be able to poll the server and determine whether the site was being served online or offline and do the change automatically. Can you put in a test so that if it's not being served on my harddrive, it should go ahead and make the change? I was thinking maybe it tries to make the link D:/webs/..../global.css, or looks for some marker file that only exists on the harddrive, and if that fails, switch the link to the absolute URL: www.mysite1 (that has the css file) / .../global.css. Wishful thinking?

Offline, I have tried linking to css outside the current project and it works OK. DW Preview doesn't work and I assume it won't track changes outside the working project. But I don't use it much anyway.

[osgood_ · Accepted solution]

I was hoping js would be able to poll the server and determine whether the site was being served online or offline and do the change automatically.

By @Galeodan

You can check some text which is included in the webpages url. Like online http or https will be included in the url, offline that wont be included UNLESS you are working with a local server, in which case 'localhost' will be included in the url, so you could use that to determine which css file to serve.

//get url of current page

const url = window.location.href;

// reference the pages stylesheet
let stylesheet = document.getElementById('globalCss');

//check if url contains text i.e, http or localhost and serve css file based on result
url.includes('http') ? stylesheet.setAttribute('href', 'http://www.mysite1/global.css') : stylesheet.setAttribute('href', 'D:\Webs\mysite1\global.css');

See if that would work for what you need.

[Galeodan]

Hi Osgood - We are definitely on the right path here. I have put the following in a test HTML file:

        <!-- ----------------------------------- LINK TO BE SET BY JS -->
        <link rel="stylesheet" href="" id="globalCss" />

        <!-- ----------------------------------- SCRIPT TO SET THE LINK -->

        <script>
            //get url of current page
            const url = window.location.href;
            // reference the pages stylesheet
            let stylesheet = document.getElementById("globalCss");
            //check if url contains text i.e, http or localhost and serve css file based on result
            url.includes("http")
                ? stylesheet.setAttribute(
                      "href",
                      "http://www.helenavista.com/css/global.css"
                  )
                : stylesheet.setAttribute(
                      "href",
                      "d:/webs/global/css/global.css"
                  );
        </script>

I am posting the test file to www.gosolargalapagos.com to test the linkage. I am linking, online, to www.helenavista.com which is one of my websites, which uses the global.css file. If I run the test-file locally the head contains....

<link rel="stylesheet" href="d:/webs/global/css/global.css" id="globalCss">

If I post it and run it online the link shows as:

<link rel="stylesheet" href="http://www.helenavista.com/css/global.css" id="globalCss">

That is what I am aiming for and it appears to be working - sort of. The test-file worksa 100% offline but online it seems to be picking up an old version of the  global.css file, even though I have cleared cache on the browser. Perhaps I need to do something on the server side to purge old versions? 

[Galeodan]

Very odd - I posted a couple of messages explaining that I had found errors in my file placements and now have it working 100%. Those posts have disaooeared since.

[Galeodan]

OK - Got the missing posts now - They got posted somewhere not at the end of the thread. So this message just to confirm that I have the process working now (after making some pretty basic blunders):

HTML pages now uses an external script to change the css link to a central asset folder on the HD, when offline, and to an absolute URL pointing to another domain when online. If I change the asset locations, offline or online, all I have to do is edit the common js script.

This is just what I was looking for as I am prone to lose track of which css file I am using and where it is - And then making sure the correct file is posted to the corresponding domain. I put that down to frequent interruptions (this is not my day-job) and advancing senility. 🙂 

Thanks again Osgood.

[osgood_]

Thanks again Osgood.

By @Galeodan

Ok, no problem. I'm pleased you have something working as you would like it to. Thanks for coming back and letting us know.

[Galeodan]

I have noticed a couple of interesting things as I progress with this project. 

It seems that if the css file is being set by javascript, each page flashes up an unstyled version before it loads the styled version. It does not seem to make any difference if the external script-file is called at the top of the page (in the head) or at the bottom (before </body>) - Or if the script is in the page itself. It is more noticeable offline than online. Perhaps the offline files are cashed more efficiently ( I am using Chrome). 

FireFox does not work offline. It displays the online pages OK but it does not use the local css file even though when I inspect the output the JS has set the path to the local css file correctly. It works OK online

MS Edge behaves much the same as Chrome - Offline and Online

None of the above arer major problems, however, MS Explorer does not work offline OR online. So my scheme, as it stands is not going to work for anyone using Explorer!

Any ideas? Other than outlawing Explorer 🙂

[osgood_]

I would not worry about Explorer, thats a dead browser.

As for the flash of unstyled content maybe you need a loading layer, which hides the content until the css file has had a chance to take effect.

Not 100% sure of the way forward as l rarely swap out the css file so have not encountered the issue. 

[Galeodan]

I would not worry about Explorer, thats a dead browser.

As for the flash of unstyled content maybe you need a loading layer, which hides the content until the css file has had a chance to take effect.

Not 100% sure of the way forward as l rarely swap out the css file so have not encountered the issue. 

By @osgood_

Thanks for  that suggestion. After a brief review of loader "how to's" I realize I have a few questions about that process. So I will opena new thread, rather than extend this thread which already has an Answer. 

Thanks for the confirmation re: Explorer. It doesn't even load my other sites which are not swapping out the css. Although the destination I am promoting (Galapagos) is on a lot of bucket-lists, I notice that our clients are neither that old, nor tech-illiterate. Chances are they are not using Explorer anyway. However, a lot of them do use Apple laptops & phones. But I'm a bit concerned that the newest PC Safari doesn't show any of my sites properly. FlexBox, for starters, doesn't work in the non-swapped sites and nothing works on the swapped-site. I don't know about Safari on Mac. The only Mac I have is a 2008 Macbook running OS 10.10.5 and it shows everything OK except "sticky" (and maybe a couple of other things I have not noticed). Like the loading-page, I think I should open up a new topic.

Thanks again,

Sean

[osgood_]

However, a lot of them do use Apple laptops & phones. But I'm a bit concerned that the newest PC Safari doesn't show any of my sites properly. FlexBox, for starters, doesn't work in the non-swapped sites and nothing works on the swapped-site. I don't know about Safari on Mac. The only Mac I have is a 2008 Macbook running OS 10.10.5 and it shows everything OK except "sticky" (and maybe a couple of other things I have not noticed). Like the loading-page, I think I should open up a new topic.

Thanks again,

Sean

By @Galeodan

I gave up on Safari for Mac sometime ago because every new version they bought out you needed to update your OS for it to work. That killed it stone dead, in my opinion. I'm currently using a very old Mac OS (I never update my OS until I get a new Mac, probably once every 6/7 years) and the last versions of Firefox and Chrome for the OS Im using work as they should when showing Flexbox and the more advanced Css Grid.

Flexbox has 98% global browser supported so again I wouldnt worry too much about a small minority who might still be using a 10 year old browser. The newest version of Safari for PC should have no issues with Flexbox, although as I dont use a PC thats difficult to confirm.

[Nancy OShea]

I'm a bit concerned that the newest PC Safari doesn't show any of my sites properly.

=========

@Galeodan,

Safari for Windows???!!  What year is this?  That's been dead for I don't know how long.  I can't even remember thet last time I saw it.

https://support.apple.com/downloads/safari

Stop sweating the small stuff.  Focus on what's important. 

Can I Use website will tell you all you need to know. 98% of all users have devices that support Flexbox Layout Module.  https://caniuse.com/flexbox

[Galeodan]

Definitely got the message re: Safari for Windows. It's been years since I tried it and when I downloaded the "latest" version the other day, I had no idea the "latest" was c. 2012! My old Macbook uses a 2017 version and it seems to do everything OK, except that my "sticky" menu doesn't stick. I added a -webkit-sticky to the css and even that one seems to be working OK now. Thanks for the CanIUse link.