Cornerstone's carousel didn't work for my client's design, and so I built a custom hero component that I've included on several custom page templates. To allow the client to manually update images, I've set the hero images to use the {{cdn}} handlebars helper to pull images down from WebDAV.
E.g. background-image: url('{{cdn "webdav:img/home-hero.jpg"}}');
The issue we're running into now, is that, because the CDN caches asset files for the site on the server, when my client updates home-hero.jpg through WebDAV, the server has no way of knowing, and so it continues to serve the old version of home-hero.jpg.
Is there a way for my client to force re-caching of assets, or to bypass it altogether? I've attempted to use the imbypass parameter (webdav:img/home-hero.jpg?imgbypass=on), but this apparently just serves the unoptimized, but already cached, image.
One solution would be to append a random query string to the image src URL to prevent caching. If you're developing on a Stencil theme, the easiest way to accomplish this would be to use the {{moment}} helper to generate a date string so you can be sure you're getting a unique value each time.
<img src="/content/home-hero.jpg?{{moment}}"/>
will render as:
<img src="/content/home-hero.jpg?2018-08-23T00:00:00-05:00">
More info on using query strings to prevent caching: https://css-tricks.com/strategies-for-cache-busting-css/
Related
When I build my VueJs application, it automatically imports the app.js and chunk-vendor.js files with the preload attribute. This is great as it speeds up the page load time of my application.
I've looked at #vue/preload-webpack-plugin and I can see that I can preload specific webchunks or assets. This has the effect of preloading those files on all routes.
The thing I would really like to do is preload webchunks based on the initial route that is loaded (the first route the user visits).
Lets say I have two routes; home and accounts. Both of these routes are lazy loaded. When a user opens /home as their first page, I would like to preload the js and css webchunks related to the homepage. If the user initially opens the /accounts page, I would like to preload the webchunks related to the accounts page.
Its not possible to use wildcards in preload statements, so I know I can't do this statically.
Any ideas of how this could work? Has anyone heard of such a project being suggested elsewhere?
EDIT: Something I tried as an experiment was injecting preload headers into my index.html file using the beforeRouteEnter method. Whilst I could see the preload header in my DOM, I found that browsers did not observe the header in time, so the image I was experimenting with was not pre-loaded. In any case, this wouldn't have worked for a dynamically named file, but useful to know.
With SSR it is possible and framework like Nuxt does it automatically, because it builds separate html file for each route. So this html can be "tailored" for this specific route and include/preload all the code route needs...
Without SSR it much harder. #vue/preload-webpack-plugin works by injecting preload links into the index.html at build time and since there is only one index.html for a whole app, you can't make it route dependent (with this plugin). So what Vue CLI does is prefetching all the async chunks by default (clearly preferring speed over bandwidth usage)
I can imagine a solution in the form of Webpack plugin, which replaces preload-webpack-plugin and instead of generating preload/prefetch links at build time just generates some inline script with the map of "route name => chunk name" (some well defined naming convention would be needed) that would inject the links dynamically to the DOM base on the current URL. But even with my "googling skills" I wasn't able to find anything like that...
I have been creating application in React Native. The goal of the application is to have content that can be changed without updating the app. I understand that the two best solutions are either Firebase or some other API call at every application start to get new content. Now I would just like to know if there are any recommended way to style content beside my three current solutions:
Styling content with markdown and then parsing it in application
Styling content with html and then parsing it in application
Or having a standard content object so that all the content is packed the same way and then showing right text/media on correct place with correct style
I am open to any other styling solutions for content and would like to know what is the best way. I also already have a server responding to API call that returns new content, the biggest problem is styling.
I have a bigger webpage and it would take days to add the loading=lazy attribute to all img tags on my site. Is it useful to use something like $('img'). attr('loading', 'lazy') (does this work?) to the site, or will it just make the site more slower?
It doesn‘t necessarly have the expected effect - if you‘re adding the attributes via JavaScript, the page itself has already been parsed by the browser and their preloading scripts as well and all of those images would be been put to the download queue, as if the attribute wouldn‘t have existed on them.
So I would heavily recommend to add those attributes within the source code itself already.
I'm optimizing the loading times in a web app and I don't know what's the problem. Firebug's Net panel is showing time holes between requests.
Can someone explain me this chart?
The gap between the requests can have two reasons:
Time needed to parse the requested page
When you request a URL, the browser needs to parse the returned contents to check whether they contain URLs to other ressources like JavaScripts, CSS files, images, etc. Subsequently requested ressources need to be parsed, too. So e.g. CSS files can contain references to images. Though the contents of the CSS file first need to be parsed to get those URLs.
Dynamically requested ressources
Using JavaScript resources can be requested asynchronously. These requests can be triggered e.g. through AJAX or by dynamically inserting DOM nodes like <img src="xyz.png" alt=""> into the page.
I found this tool(https://code.google.com/p/svg-edit/) very useful, but there is any reference for this project allow to integrate properly in your applicatione instead of simply add it to an iframe?
For example i want to retrieve the svg code for save it in a variables or something like this
It's possible but might be a little tricky to strip out the required resources and load them in your own application while making sure that there aren't any conflicts. This is actually something I plan on doing for one of my own projects.
Do you need to do this though? You can talk to the iframe from your application pretty easily. For example, to get the SVG content you would use this (assuming you only have 1 iframe on the page) ->
var svgedit = window.frames[0];
svgedit.svgCanvas.svgCanvasToString();