Buildfire - Issue Loading Plugin in Previewer - javascript

For some reason, trying to load my plugin in the previewer does not work. It begins to load with a white screen and little loading animation, but after about 2 seconds, sometimes quicker, the load seems to stop. his is characterized by the loading animation going away, leaving only a pure white screen.
When hooking it up to the debugger and loading the plugin again I can see warnings in the console that say "Pending rest calls taking too long. Stopping spinner." From this it seems that some type of request is being made to retrieve something on load of the plugin and it is obviously hanging.
I'm not sure how that interaction or case is taken care of internally in the previewer. when I check the network logs, I don't see any of the files required for the plugin even being requested. The only files that are requested are analytics files.
Moreover, I tried loading another plugin like the places the plugin. It seems to exhibit similar behavior when it has no data. The only difference is that it will actually load a view, and then immediately switch it out for a blank white view. I checked the debugger network tab for that too and it shows various GET requests for templates stuck in a state of "Pending." In this case however the warning about pending requests taking too long is not shown.
My plugin that I am trying to load has been stripped of all external calls to data sources. This means that the only files being loaded should be the ones packaged in the zip folder when I uploaded it. I'm not sure how to fix what seems to be a request error for the previewer.

I'm not able to reproduce the issues that you are seeing with the places plugin. Do you have the latest version of the SDK?
Does this issue occur for you for all plugins, or just certain plugins? What other plugins do you see it in, in addition to places and your custom plugin?
It might help if you can share the code of you custom plugin, too.
One last thing ... what App ID are you using in the plugin tester?

Related

Accessing local files for a client-side only website, to be distributed as a HTML-download the user opens with a browser

Due to the safety rules of the same-origin policy (SOP), i am unable to load certain local files when opening an index HTML-file directly with a browser. Using a "live-server"-plugin works fine, as all the files in that case are "on the same server". I need to distribute the website as a client-side only app - A folder and html file to be opened with your browser. Solutions to the problem always seem to require setting up a server. Is there any way to avoid that, and keep everything on the client?
I am making a mathematics e-book, that i want to distribute as a website people can download. I want it to be client-only and a download, since if it were to become popular, then i wouldn't be able to afford running the server (as i would be studying at that time). I have chosen html and javascript over EPUB, as they are much more powerful, and allow for tons of interactivity (and much more efficient development).
So far i have a browser.html file, that loads individual pages with JQuery .load(). This browser.html file has both html, and javascript. The CSS is in an external file. The individual pages have many pictures, that are also stored locally on the server. As the pages are contained in subfolders, the picture URL's go out into their parent folder, and into the assets folder, like: ../../../Assets/Chapter1/Talopgaver og intuition/Misc\F\solsystem.png. I use custom-elements (shadow-DOM) to handle various complex aspects such as questions, answers, along with certain other things too. Other than JQuery, i also make use of Math-Jax, and a "polymer" library that helps with cross-browser support of custom-elements. All the pages in a certain chapter are loaded in the start, and then put into a array (this makes it fast to scroll through pages as you often do in books). They (as strings) are each modified slightly to automate certain tedious parts of development.
I have tried to open the browser.html file on chrome, firefox, internet-explorer, and edge. They all load the html that browser.html inherently contains (properly styled even), but none of them load any external pages. Interestingly, one of the images used in the browser.html file still works (i would think that would be a local file too, not?). If have tried turning off calls to ajax or external CSS, but nothing changed. I have searched for other people with similair problems, but all the answers just reccomended setting up a server.
When loading the page with a live-server plugin, the result looks something like this:
browser.html page opened with "live-server" visual studio code plugin by Dey, Ritwick
When opening the browser.html page directly using chrome, it looks like this:
browser.html page opened directly with chrome
The error i get (after having removed an ajax .get() call) isn't particularily descriptive: simply "Failed to load resource: net::ERR_FILE_NOT_FOUND" from "platform.js:1". Even if turn off the call to start loading pages, it gives me excaclty the same error messages.
Looking at the network reports, with live server it looks very ordinary. without it's pretty weird. It says it takes hours to load browser.html, even though that clearly isn't the case. It fails loading platform.js, after using 22 seconds trying. The networks report looks a bit more healthy when turning off the call to load pages. It gives up loading platform.js faster (8 seconds), yet still supposedly takes hours to load browser.html.
Though it shouldn't ultimately be neccesary, i have linked the entire browser.html document below, along with an example of a page it might load (the example in the first picture above).
browser.html. Too big for a stackexchange code-block embed
Page in previous picture (page 37)
Any help is appreciated!
EDIT: Main problem seems to be the loading of pages using JQuery.load(). Even on a simple testing website that operation is just not possible without running on a server.

What am I doing wrong with Angular js manual bootstrap process?

I am using Angular 1.7.2 in a project i'm working on. (I prefer Angular 1.x)
I am doing the bootstrap process manually (because i'm adding scripts programmatically).
But, I am having 2 issues with the manual bootstrap process.
I have to use a setTimeout, else the bootstrap never works. And my problem with this is, the more files I add to my project, the longer i have to make the timeout.
Sometimes when I load my web page or refresh the site, not all my components are loaded. If i monitor the network traffic, i can sometimes see that the html files are not retrieved at all. And there are no errors in the console or anything.
It seems to me there must be something happening in the angular.boostrap process that is failing or getting stuck, but i can't figure it out.
For my first issue, why is the setTimeout required, is there a way to not need this?
Second, why does my site not load sometimes?
Could it be related to the OS locking the files temporarily because of all the source control, anti-virus, other services running on my computer? If so, how can i tell?
I put together a test project with relevant code here on github
I previously thought this was related to the routing, but it's not (see here), But it seems not related to angular-routing after all.
Any information would be much appreciated, this is driving me mad.
Update 1:
I have the code running here on github pages.
Best chance to replicate issue is to use google chrome, enter url, open dev tools (f12), then actually load url. Sometimes, the page doesn't load completely.
I have updated the test website to better reflect my project where I add scripts dynamically.
I think i found the solution thanks to a comment by igor
I moved my app.route.js file to be loaded before any of my angular component and directives and from what I can tell this solves my problem.
I will update the linked sample project too

Javascript files not loading consistently?

We have a .net web forms application, running on iis on our own server that has show some strange behaviour in the last 24 hours.
Rollbar notified me of multiple errors all saying certain js functions/variables can't be found from a host of users - essentially breaking the app. I've come into work today, loaded the site up in chrome dev tools only to find it did not have any source file shown, and therefore no js files to load/step through (css & image files are there though).
To make matters more confusing, after refreshing the page everything is there as it should be?!
An updated build of the app was released yesterday, so I'm guessing that has something to do with it?
Honestly any speculative pointers on things we can look into to prevent it happening again would be appreciated.
If you have multiple javascript files and your code is running before its dependencies are loaded, then you get 'undefined' errors.
After page refresh the dependency files are already cached, so they load immediately, almost synchronously. That's why you dont get errors next times.
Try to disable cache in devTools and reload it a few times checking if next attempts are still working.
If that is the problem, you might consider modularizing your JavaScript code and loading it as asynchronous dependencies, for example by using browserify, webpack or even require.js. Anyways, you can find more in the subject looking for "javascript load order".

JS Injection in Wordpress

I just upgraded to WP 4.3.1 on one of my websites. After upgrade (which seemed to go with no problems at all), I noticed that the layout of my pages has changed. There is a bar across the top of my page (not the admin bar) that wasn't there before. When I inspect the element there, I see a whole bunch of new code that is not being created by any of my plugins. And I cannot find the source of this injection in any of the provided php files. I have no idea where it is coming from, but I suspect that something in the WP 4.3.1 package has been compromised, or maybe there is a callout to a site somewhere that injects this code.
Anyway, this is a BIG problem and I don't know how to fix it.
I've copied the injected injected code below. It appears in all the pages on my site, right below the tag. Interestingly it can only be seen by "inspecting element" in the browser; page source does not reveal it (I've added some line breaks to make it more readable, but this is exactly what shows up in my page.
This same problem occurs on every site where I upgrade to WP 4.3.1. I hope someone can fix this problem IMMEDIATELY!!
Clearing cache, history & cookies doesn't resolve the problem. I can't tell where this injected code is coming from. Also, Google doesn't seem to be much help in telling me anything useful about http://kfc.i.illuminationes.com/snitch, which is one of the links that is being created.
Our site was infected, this is what we did to get rid of it
Thanks to this discussion which led me to a more detailed one
Connect via ssh to the server
Check the directory structure and find out recently created / modified directories
Check recently modified files for <script>. I found many files having JavaScript inserted which would connect to external sites.
As these calls were made on each page, I checked header.php in wp-content/themes/your-theme directory. (check the ones you are not using as well as that might be infected but may not show in radar)
You might also want to check footer.php for infection.
Re check file permissions on server as per WordPress Hardening guidelines on Codex
Delete unrequired ftp accounts in FileZilla (or its equivalent)
If you use any caching, delete entire cache.
You can verify if this worked using devtools network tab.

Speed up web site loading

I am looking for the best way to speed up the load time of my js.
The problem is that I am working with a very large site that uses the jquery framework, and what's happening is because the site is also loading, facebook connect, addthis sharing, google analytics and another tracking code, the jquery is delayed a few seconds, and certain elements like the calendar just appear, and my users are complaining that things take to long.
I did a test in google chrome and the avg load time is 4s. Which is too much.
I am already doing minification, and the jquery UI/ Jquery is being loaded from google. What's the best way to approach this?
Make fewer http calls by combining images and script and css, and also use a Content Delivery Network for you static images and css might help!
You are not likely to be able to do much more about the load time of the external scripts, so what you can do is to change the order that things happen in the page so that the external scripts are loaded after you have initialised the page.
Scripts are loaded and executed in a serial manner, so if you change their order in the source code, you also change the order they are loaded.
Instead of using the ready event in jQuery, you can put your initialising code inline in the page, after all the content but before the body closing tag. That way the elements that you want to access are loaded when the script runs, and you can put external scripts below the initialising code to make them load after.
Small technical changes (such as serving the JSs from Google, minifying, etc..) will only get you so far.
Seems you simply have lots of dynamic stuff going on in your page. Have you though of an asynchronous way of building your content? One option might be to place placeholders instead of the external content, and asynchronously load it, so when all the scripts are loaded and ready, all you need to do is throw the markup into the placeholder.
This will create a better user experience, instead of the user waiting 10 seconds for the entire page, it will start loading incrementally after 2 seconds (and still fully load after 10).
In addition to Yuval's answer some options that might or might not bring you a speed gain:
the load time of external libraries is something beyond your control. Try to include them as late as possible, and better still, dynamically after the page has loaded. This way your page won't stall, if Google analytics or Facebook have another hickup.
It is not necessarily faster to load jQuery from Google. Consider putting jQuery, jQuery UI and as many of your own JS as reasonable in a single file, minify and gzip it and let the server serve the gzipped version where possible. Note here, that the gain in speed depends largely on what your users cache and where they cache it. If they already have jQuery from Google in their cache, this technique might make page load slower.
The bottomline is, that after some optimization you're out for experimenting. You must find out, what your average user has in her cache, if the page is accessed directly via deep links or if you can smuggle some JS or CSS (or even images) into her cache via a previous "landing page".
Make sure you deliver your content in gzip/deflate encrypted format. Combine multiple javascript files into 1 file, which helps to reduce the number of http requests.
P.S. Here's a test tool to check if compression is configured:
http://www.gidnetwork.com/tools/gzip-test.php

Categories