I am developing an app using the PhoneGap/Cordova development framework. I am attempting to get the first portion of my app done, which simply outputs the time it takes for the mobile device to compute a million math functions (I'm analyzing the performance of the application). The issue is though that nothing seems to be printing out and all I have is a white screen. Here is my code:
https://github.com/messichess77/Phonegap-Processing
The specific js file that I call in the index.html is located here:
https://github.com/messichess77/Phonegap-Processing/blob/master/assets/www/processing.js
Thank you very much to anyone who can help! Sorry for being such a noob :)
Not entirely sure but it could be something along the lines of app.initalize(); not being completed before it starts your processing.js.
Instead, why don't you try something along the lines of first wrapping your processing.js into a function, for example let's say doTheMath(){...}. Then, move the processing.js file into the js/ folder just to keep the structure of files within PhoneGap.
Then, in your index.html, do something along the lines of:
<script type="text/javascript" src="js/processing.js"></script>
<script type="text/javascript">
app.initialize();
document.addEventListener("deviceready", doTheMath, false);
</script>
Also, for starters, just try a small number of calculations to make sure the app actually works, then you can adjust it to a ridiculous amount like a million. I say this because it's possible that it could just be taking forever to do those million calculations and just shows a white screen during that.
Related
I am trying to load a pde (processing) file with an html webpage so that they can work together.
In the main folder of the website there are the pde file and the processing.js library file.
I wrote this string of code in the "head":
<script type="text/javascript" src="/scripts/processing.js"></script>
Then at the end of "body" I wrote the "canvas" string:
<canvas id="your-id-here" data-processing-sources="file1.pde"></canvas>
The webpage that I am working on is really simple, there is only a text link list. When I test the index.html the webpage is displayed correctly but the pde doesn't work. I also noticed that because of the "canvas" string the last link doesn't work anymore.
The pde code is a sample copied from the Processing website, basically is drawing with the mouse just when you press the mouse button.
Thank you for your help in advice!
Make sure you're checking the developer tools for errors. Specifically, look at your JavaScript console and the networking tab.
Like you've discovered, you can use Processing.js to deploy simple Processing sketches to the web. Note that Processing.js is pretty old now, so you should only use it if you really need to. If deploying to the web is a priority, you should consider switching to P5.js.
Shameless self-promotion: here is a guide on using Processing.js to deploy a Processing sketch.
If you still can't get it working, please provide the full text of any errors you're receiving, as well as a MCVE that demonstrates exactly what you're doing.
I'm honestly confused about where to start with minimizing the load time of a website i'm building - https://projectrhea.herokuapp.com/ . Currently takes around 9 seconds to load the website which I want to try and bring down to sub 3 seconds.
I've done a diagnostic test, shown here https://www.webpagetest.org/result/171113_T2_851758db144ac117ab4e986a3798b1b5/1/details/#waterfall_view_step1 .
From what I can see there are three main reasons it would be taking awhile to load.
The first is the javascript.
I only need a small amount of it to run the site but I am very
confused about how to separate the code I need from the code I don't
need. I use it for the banner to show multiple phrases underneath the
banner that I would rather keep.
The second part is the shear amount of CSS files I'm drawing from.
I used a template to begin the site (it was a good way for me to learn
how to design the site). Now I think this has meant there is way too
many css and other files connected to this landing page.
The third part is the video file I have.
I would love to keep this
video as I just like how it fits in the site. I'll try and minimize
the file size after I have worked out the above issues.
This is my first real time trying to solve an issue like this and I would really appreciate the knowledge a more experienced coder could bring to this. Thanks!
Use following automated tools:
https://developers.google.com/speed/pagespeed/
https://gtmetrix.com/
Chrome's lighthouse
Optimize image sizes and quality. (Automated tools above provide You with the optimized images)
Place Your CSS file at the beginning of your bootstrapping file such as index.html
Compress CSS files (remove the formatting)
Place Your JS file at the bottom of the file.
Compress JS files (remove the formatting)
Trying to address the specific points raised by you.
The first is the javascript.
I only need a small amount of it to run the site but I am very
confused about how to separate the code I need from the code I don't
need. I use it for the banner to show multiple phrases underneath the
banner that I would rather keep.
Your JS files are not minified. Please make sure you are minifying your js files and order as suggested by Ante Jablan Adamović.
The second part is the shear amount of CSS files I'm drawing from.
I used a template to begin the site (it was a good way for me to learn
how to design the site). Now I think this has meant there is way too
many css and other files connected to this landing page.
You should combine and minify all the CSS files.
For minification and combining of JS and CSS you can use gulp.
https://github.com/gulpjs/gulp
The third part is the video file I have.
I would love to keep this video as I just like how it fits in the
site. I'll try and minimize the file size after I have worked out the
above issues.
I can see that you are serving some resources through S3. See if you can move your video as well to S3 and serve it through cloudfront.
Place your css imports in the top of the page and import your javascript after your html body ends.
Well for a start -
Place the css at the top, consider using a js loader to load the js once the page has loaded.
If you can obviously remove everything you don't need their are tools to do this but in reality is a tough task especially if its a template
And finally with the video get an image of the first frame, show the image not the video when the page loads.
How to make a loading image when loading HTML5 video?
The bigger your css, the longer the page takes to load. So try to reduce/minify css and try to use css in a single file. Same with JS also
Use Lazy load for images so webpage displays quickly without calling images.
Make sure server is using keep-alive as it can truly affect how your server fulfills requests.
Enable gzip compression
Minimize page redirects because it affect page speed
Enable browser caching so your browser can load the page without having to send another HTTP request to the server.
I have Google Content Experiments code which looks like this:
<script type="text/javascript">
function utmx_section(){}function utmx(){}(function(){var
k='1234566789-0',d=document,l=d.location,c=d.cookie;
if(l.search.indexOf('utm_expid='+k)>0)return;
function f(n){if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.
indexOf(';',i);return escape(c.substring(i+n.length+1,j<0?c.
length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;d.write(
'<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl':
'://www')+'.google-analytics.com/ga_exp.js?'+'utmxkey='+k+
'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().
valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"><\/sc'+'ript>')})();
</script>
<script type="text/javascript">utmx('url','A/B');</script>
I need to add it to an Angular app, but only to a single page. The problem is that it uses document.write() which makes the page go blank if added dynamically. If I add it statically to the main index.html it will load on all pages, not just the one I want. Is there a way around this? I believe it could be done with server-side rendering, but I don't have it set up right now, and doing it just for this little script seems like an overkill.
You should use content experiments api instead https://developers.google.com/analytics/solutions/experiments-client-side
But, it doesn't work well with Single Page Apps, yet...
I'm having a (simple) issue, but I have no idea how to fix it. Essentially, every tutorial I have come across for Babylon puts all of the Javascript code inside < script > tags in the main HTML page.
However, I would like to have all of my Javascript code inside a separate file. I have tried every way of loading it as I could think of, though I am a novice at Javascript (I am decent at C++, and I can see the similarities); yet I was unable to make it load. (It works fine when called from the HTML page itself).
Does anyone know what (if anything) I can do in order to be able to load my scripts from external files, and still get everything to work? Thanks in advance!
2 options:
register to the DOMContentLoaded event in your external JS file
reference your JS file with the tag at the end of the HTML page
You can find a sample in one of my tutorials here: http://blogs.msdn.com/b/davrous/archive/2014/11/18/understanding-collisions-amp-physics-by-building-a-cool-webgl-babylon-js-demo-with-oimo-js.aspx
Enjoy and thanks for using Babylon.js! :)
David
I am developing a game engine here:
http://synodins.com/apps/tank_fight
But now, for some reason, it doesn't run anymore.
I cannot initiate the Raphael module, when i run the site with mozilla web debugger, i get "Raphael is not defined".
But that doesn't make any sense because it's very clearly defined in the raphael.js module.
Also, occationally the game runs fine, like, every 20th time i try.
And there's no clear pattern to what makes it work.
I print out Hello world 1 before trying to initiate raphael, and hello world 2 after trying.
Can anybody see what the problem is?
The block of load_script calls loads the scripts asynchronously. This is why there appears to be no clear pattern.
There is no guarantee that raphael.js is loaded (and therefore, that Raphael is defined) by the time that the line:
var playing_area = Raphael(0,50,1600,1600);
is called.
You should wait until the whole document is ready before attempting to use variables defined in external scripts. Under normal circumstances, this is the onload event of the document. Various libraries like jquery also offer their own "ready" event, that you could tie to if you use them.
Is there any reason why you load the scripts in the way you do, rather than simply using markup, as below?
<script src="raphael.js"></script>
You are loading your scripts on demand - and this will speed up your initial page load. But right after that you try execute code in raphael.js - but loading of js files take some time and you have to be sure that they're loaded before you start calling functionality in them.
You may have a look at Modernizer.load() - this helps you to synchronize loading of resources and add callbacks when loading completes: http://www.modernizr.com/docs/#load
Have you tried moving 'raphael.js' to be included before anything else? It may be that Raphael is not defined at the point a script above it needs it.