I am building a new project using angularjs and PHP(codeigniter).
I am facing an issue with the content or changes I make on both client-and serverside, but the changes are not being reflected.
Does this have something to do with the cache?
The browser uses template caching, which should be cleared upon making changes to templates. See this question. You can do the following to make your life easier when developing:
Reload the page with clearing cache each time you need to update your app
Yet a more convenient way is to:
Disable cache in developer tools
E.g. for Chrome
CTRL+SHIF+J and on the network tab check 'Disable Cache'
Yet may be better still to:
Remove template cache in your application
This is done via $templateCache.remove()
More info on preventing template caching
Try this if you are also having issue with Angular default change detection mechanism. In my case, in my ionic4 Project default change mechanism of Angular was somewhat not working properly so I triggered it manually.
constructor(private ref: ChangeDetectorRef) {
ref.detach();
setInterval(() => {
this.ref.detectChanges();
}, 500);
}
Related
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 upgrading a huge angular 1 project from 1.3.x to 1.6.x because we require some patches in the latest version. After updating it seems that the entire application has slowed dramatically. I have been looking through the migration documentation but is there anything that could be causing major slow downs? Any bad code or gotchas that would cause this? I am having issues just with visual changes such as ng-show and ng-hide being slow and twitchy.
This is the CPU profile before upgrade:
This is the CPU profile after upgrade:
Thank you!
EDIT:
Let me give a little more context. I have a feeling this has to do with the digest cycle. For example, I a navbar where an icon will hide and another will show on hover.
Here is what it looks like in angular 1.3
Here is what it looks like in angular 1.6
I am getting a forced reflow performance warning after the update. Also this (recalculate style) is directed from angular-animate s computeCssStyles function (or at least that is the line of code it's directing me towards). I am also not calling any of $animate in my code. Is this just a product of the angular digest method? Also is there anything that I am missing from the migration docs about possible changes to digest?
Code example:
showDropdown is changed from false to true on hover and visa versa.
<i> ng-show="! showDropdown" </i><i> ng-show="showDropdown" </i>
EDIT:
Short term fix as I am not using animate anywhere in my code but it seems to be firing as per the newer angular digest method. I just disabled animations as a partial short term fix.
$animate.enabled(false);
Managing memory is difficult in JavaScript. Here are few best practices to improve the performance in terms of loading pages and freeing memory.
Removing Detached Node manually - Work on to remove detached object.
var myNode = document.getElementById("bodyPanel");
if(myNode !== null){
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
}
On every page switch, call destroy inside Angularjs controller. Also javaScript object Reference to null
$scope.$on("$destroy",function() {
$window.off("resize.Viewport");
});
Create Angular js Service to keep important data in memory to avoid fetching from HTML5 storage system.
As mentioned in comment, use ng-if instead of ng-show.
I am developing phonegap application using backbone Js. To enable the back button functionality i am using Backbone.history.start();.
For one scenario, I want to clear all the application history and invalidating the back button feature.
It would be great if anyone will answer.
Thanks in advance.
Checking the Backbone source code I see it's possible to disable Backbone.history with Backbone.history.stop(); so this may give you the expected behaviour.
// Disable Backbone.history, perhaps temporarily. Not useful in a real app,
// but possibly useful for unit testing Routers.
stop: function() {
Backbone.$(window).off('popstate', this.checkUrl).off('hashchange', this.checkUrl);
clearInterval(this._checkUrlInterval);
History.started = false;
},
I'm learning how to use EmberJS by doing the introductory tutorial form the "Getting started" page. However, when I get to the "Accepting edits" part, I have a bug:
Uncaught Error: Attempted to handle event `willCommit` on <Todos.Todo:ember304:3> while in state root.loaded.updated.inFlight.
The call to Todos.TodoController.acceptChanges() seems to be triggering that error. The part I'm referring about is this one:
http://emberjs.com/guides/getting-started/accepting-edits/
After reading up on model lifecycle in Ember - http://emberjs.com/guides/models/model-lifecycle/#toc_in-flight - I still don't get why this bug appears.
One work-around is to save the model each time it changes (so every time the value of the <input> changes. Which works fine but would probably perform poorly with a HTTP API (as opposed to fixtures).
Could this be due to BC breaking changes in the ember-data lib?
What else could cause this?
Versions of libraries I've used:
jQuery: 2.0.3
Handlebars 1.0.0
EmberJS: 1.0.0 RC7
Ember Data: v0.13-102-g6bdebe7
After reading up on model lifecycle in Ember - http://emberjs.com/guides/models/model-lifecycle/#toc_in-flight - I still don't get why this bug appears.
This is not a bug, the in-flight section say's it all:
A record that is in-flight is a dirty record that has been given to the adapter to save the changes made locally. Once the server has acknowledged that the changes have been saved successfully, the record will become clean.
This means that you are trying to change the record while a previously change made it dirty and a possibly call to this.get('store').save() is still in the doings e.g. waiting for the server to respond. During this time frame you can't make changes to that same record without getting the error.
So a solution could be to not trigger this.get('store').save() after a character of the textbox has changed but rather on focus out for example, or even with a explicit button to save the record which you could disable until your server acknowledges it's change, this would not make a request for every character to the server resulting in sluggish performance due to some latency. Hope this makes sense.
Hope it helps.
I had this same issue with the Getting Started guide. I solved it by checking if the model was currently saving in acceptChanges:
acceptChanges: function() {
var model = this.get('model')
if (model.get('isSaving')) { return }
this.set('isEditing', false)
model.save()
}
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