I am testing vue-i18n in order to implement it for my future projects. I have a separate system to handle the translations, so I got remote json files. vue-i18n have a system to fetch the locale using a promise, explainations here.
I cannot use the fetch method because my files are outside so I got cross-origin troubles. Instead I do it with vue-resource, but I don't know why, when I set a new set of locale, it doesn't update automatically. bescause the default lang is en, when I load my en locale file, it does nothing. I have to change two times the config.lang to force update.
Several things:
A jsfiddle to test > http://jsfiddle.net/t4kdoqj7/3/ uncomment line 19 to reproduce the fix
Maybe it's just due to a bad using of vue-resource
I couldn't create a vue-i18n tag...
Thank you for your help !
Ok, I just found a hack :
Set Vue.config.lang = '' before loading anything
Here the fiddle (l9) > http://jsfiddle.net/t4kdoqj7/4/
Related
I need a little help.
I am trying to pass data from a Cookie inside of GTM to a custom attribute inside of Drift.
I've tried following this documentation, but can't seem to get it to work:
https://devdocs.drift.com/docs/contact-properties
This is the code that I have tried using inside of Google Tag Manager:
drift.on('ready', function() {
drift.api.setUserAttributes({
gclid: '{{cookie - gclid}}'
})
})
I am not very familiar with coding, so I am sure there is some error on my end. Any help would be appreciated.
It's quite challenging to help without knowing what the errors are, but I'll do my best.
The issue is most likely related to either the Drift integration failing to initialize or an error related to accessing the cookie. The best way to solve your issue would be to isolate where the problem lies.
Focussing on Drift, are you sure that Drift has been initialized correctly?
According to the documentation, a custom Drift attribute will be visible in the Custom attributes tab in your contact settings.
You can test this by running the following code snippet in the browser console for the website in question and then checking the Custom attributes tab to check that the test attribute has been created.
drift.on('ready', function() {drift.api.setUserAttributes({test: 'tester',})})
Note that Drift does not initialize when running a website locally so make sure that you're testing with a site that's deployed to a server.
If the above works then we know that Drift is working as expected and the issue relates to how you're accessing the cookie so you'll want to focus on that.
In either case, if you could share your error, it would be very helpful.
I come from a React background, but I'm switching to Svelte and Sapper for my next application in order to fight the massive bundle size that comes with React these days. However, I'm having trouble initializing Svelte's store with data retrieved from localStorage.
As per the Sapper docs (https://sapper.svelte.dev/docs#Getting_started), I created my project by running npx degit "sveltejs/sapper-template#rollup" my-app from the command line. I then installed the dependencies and removed the demo code in the src folder.
I then created two files: src/routes/index.svelte and src/store/index.js.
Code for both:
src/store/index.js
import {writable} from "svelte/store";
export let userLang;
if(typeof window !== "undefined") {
userLang = writable(localStorage.getItem("lang") || "en");
} else {
userLang = writable(null);
}
src/routes/index.svelte
<script>
import {userLang} from "../store";
</script>
<p>Your Preferred Language: {$userLang}</p>
When I run the application and hit the index route, I see this:
Your Preferred Language: null
which then almost immediately updates and changes to
Your Preferred Language: en
when there is no lang item in localStorage, and changes to
Your Preferred Language: fr
After explicitly setting localStorage.setItem("lang", "fr") from the developer console and refreshing.
I know that the store is being initialized on the server first where window is undefined and then is being rehydrated on the client. So this behavior is expected.
So my question is: how can I skip the server initialization entirely? Is it possible to only set up the store on the client (where localStorage is defined) so that the user's chosen language is immediately available?
I can't default to having everything in English or any other language after the user has chosen to change their preferred language. I also can't get the user language from the browser via navigator.language on initial page load either since navigator is undefined on the server as well.
And having a flash of empty text appear before the store rehydrates would screw up the UX for my application, especially when the value of userLang is going to be used all over the place with translations.
So any strategies or hacks for this are definitely appreciated.
**** Deeper Issue ****
I would actually prefer to not have server-side rendering at all for this application, but I do need all the other excellent features that Sapper provides, like routing, prefetching, and static site building.
So I tried running npx sapper export as per the docs to generate a completely static site in an effort to remove the server from the equation, but the exact same issue still occurs, even though there is no server being used at all.
Does anyone have any advice on how to configure Sapper and turn off SSR but keep the other features?
Thank you!
**** Update ****
As per Rich Harris's answer, wrapping the markup with {#if process.browser} does the trick just fine. So I've updated the src/routes/index.sveltefile like so:
<script>
import {userLang} from "../store";
</script>
{#if process.browser}
<p>Your Preferred Language: {$userLang}</p>
{/if}
And the userLang variable is immediately set with the value from localStorage or defaults to en as I intended for this simple demo. There is no more flash of null, so it's essentially behaving like it's client-side only at this point.
I will work on fleshing out my project and see if there are any more issues I encounter. Til then, I think this solves my issue.
At present, SSR is non-optional. There's an issue open for an SPA mode — https://github.com/sveltejs/sapper/issues/383 — that would behave as you describe, we just need to get round to it.
We also plan to have built-in support for i18n in a future release: https://github.com/sveltejs/sapper/issues/576
In the meantime, you can fake it by wrapping all your markup in {#if process.browser} — anything inside won't be server rendered, but will be present as soon as JavaScript kicks in.
I am using dygraph 1.1.0 since, well... forever :-)
Now I wanted to have a look at dygraph 2.0.0 and of course expected some migration to do.
Now, the only error I actually get after simply replacing the *.js files is:
Uncaught invalid option isZoomedIgnoreProgrammaticZoom dygraph.js:4448
When I remove this option from my code, everything still seems to work.
I could not find anything about the option in the new docs, so my question in:
What happened to isZoomedIgnoreProgrammaticZoom?
That option was removed in the 2.0 release.
That option affected the behavior of the isZoomed() method. If you're not using that method, you can remove the option without changing anything. If you are, it should be possible to get whatever behavior you want by using other methods in the dygraphs API. But I'd need more specifics to help.
I am integrating I18n-js in a Rails application. The integration is working fine along with the translations.But the problem I am facing is that when the required translation is not present in a particular language , say for example I selected Afrikaans as my language then in that case the fallback method should execute showing me the translation present in the default language.But its not happening and I get the error
[missing "af.credential_requests.add" translation]
This surely means that the fallbacks method is not working.
Though I have
I18n.fallbacks = true;
in my I18n-js. Please help.
I have my default locale set to "en"
Make sure that you set I18n.defaultLocale correctly
I am bulding a webpage using xPages and I am making constant changes to script and design, this include both server and client javascript , stylesheet and image changes.
Each time I change a javascript or stylesheet I want to see my changes in the webbrowser and I also want my users to get the latest changes when they access the webpage.
I know I can use Shift-Reload, or CTRL-reload and clear my webbrowser cache. and I also know that I can change the objects expiration date, but I want a smoother and better controlled way to do this.
Looking for any kind of best practice for doing this.
Thanks
Thomas
In the xsp.properties file for the application or on the server for server wide use you can set xsp.application.forcefullrefresh=true. The xsp.properties file documentation says:
# Application refresh
# When this property is set to true, then a full application refresh is requested when
# the design of a class changes (means that all the data are discarded in scopes).
# xsp.application.forcefullrefresh=false
The new XSP Portable Command Guide says "This property was introduced in Notes/Domino 8.5.3. It is set to false by default and is particularly useful during the development phase of an XPages application."
I have not fully tested this behavior but it sounds promising. You could/should of course only set it to true WHILE you make the changes. once stable, set it back.
/Newbs
Adding to Ferry's answer and your comment;
Instead of "?dummy=randomvalue", you can use "?version=2.1". So it will be cached but when you change design, you can just increase the version.
There's a problem with this approach as some proxy servers won't cache anything with query params. Better to rename the file directly, adding date or version number to it. It will always work.
To disable caching temporarily use Fiddler2. It's easy to enable and disable in one place across any web client. As well as added benefits for the http request tracking features.
To fully disable any caching add url + '"?dummy=" + #Unique();' to every url to javascript or image files...
The way I am reading this question is that you want every change you make to appear immediately on the client's browser or client. Are you really sure you want to do this? It sounds like you are not doing any testing so any typos, bugs, crashes, etc will be passed on to your users. Sounds like a bad plan to me. I hope I am wrong and that you are using a template and pushing only your fully tested changes up to an production version instead of making the changes in the production version.
I would just put out a schedule of when changes are going to be pushed up to production and let the users reload their browser or client at that time. Either that or do it during off hours and when they next log on, they get the newest changes.
Adding to Ferry's answer and your comment;
Instead of "?dummy=randomvalue", you can use "?version=2.1". So it will be cached but when you change design, you can just increase the version.
maybe you could look at how domino can control caching of url's.
http://www.ibm.com/developerworks/lotus/library/ls-resp_head_rules/
NEwbs answer is a good one but it is useful to note that in Firefox there is a very useful plug in called "web developer" from Chris Pederick that allows you to disable the cache.
http://chrispederick.com/work/web-developer/
The other really useful one is Firebug which is just amazing - It makes any HTML work much easier
https://addons.mozilla.org/en-US/firefox/addon/firebug/
I did found another solution by putting my css and js in a theme it is easy to just rename the files.
as described here
http://goo.gl/vFTii
Why do not we use the window.location.reload()...
Which does the same like ctrl+F5
It reloads the page, which is similar to context.reloadpage