i am having trouble with heroku messing up my image formatting. i don't get any image problems in my localhost development.
so if you visit novulty.herokuapp.com/services and scroll to the 'our results' section, you'll see that some of the logos are wrongly formatted. if you keep refreshing the page, you'll see different logos get wrongly formatted. i am really not sure what the case is.
i've tried precompiling my assets (rake assets:precompile) but that doesn't seem to be do the trick. next, i thought it was an issue of loading my javascript later as opposed to earlier in the file, but if i load it in the beginning (in the <head>) the javascript doesn't even work... so i am very confused.
feel free to take a look at my code at https://github.com/sambaek/novulty
could anyone help me? thanks!
UPDATE:
this problem is happening on localhost. a lot less often though. i wonder if it's a javascript/css issue or rails/heroku one?
It's likely your issue has to do with running in Production versus Development, and the order in which your assets are being read. In development, the order works, but in Production, where your css and javascript is likely all concatenated into single files, you might be overriding classes and having other conflicts.
To test this theory, just run locally your app in production. I don't do this often, but the commands are likely
RAILS_ENV=production rake assets:precomiple
RAILS_ENV=production rails s
Assuming that you'll see the same errors, you might next figuring out if its your CSS or javascript. Inspect your images and make sure the classes and attributes are as you expect. Check for overwritten classes.
Lastly, if still an issue, I'd focus on your javascript. Remember that if you put it into multiple js files, they'll all be combined into 'application.js', assuming you are using the default setup. If you have a developer mode on your browser (I use Chrome), check the javascript inspector to see for any errors.
Related
I've been having this issue for awhile now, first describe here. After upgrading to Webpack 4, it seemed like the issue resolved itself, but it doesn't seem to be the case.
The issue here, is that after deploy, when the chunks get updated, the server is not aware of it? It's quite hard to reproduce this issue and I never were able to do it on demand. But sometimes, if I have the page hanging, the browser will try to grab, what I assume, cached versions of webpack chunks for css and js. But as those are outdated now, I end up with this and a empty website:
Reloading the page, sometimes having to do a force reload, is the only way to fix this, as browser redownload the correct chunks. I'd love to get some pointers to resolve this, as I've never managed to find anything written on this and how to fix this. I am planning to either drop chunks all together or provide an inline JS that will ask to reload the page if it detects any of these 404s... which is not ideal way to do this.
You can find my webpack configuration in the link above. I am deploying this to Heroku, my app is Rails 5.1, with Vue.js 2
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
I spent a couple hours trying to find an issue that gave me any clues to solve my issues, but couldn't find anything relevant.
I am working on some SEO for a website (I'm no SEO specialist, am currently taking some courses and reading lots of articles on it), and one thing that I found out was the "Fetch and Render" as Google on Google Search Console.
However the website, which has loads of AngularJS (1.5.x) components, was just rendered the header, which I implied meant that the js didn't load properly and the Angular components couldn't been initialized.
Since, I then found out (can't confirm) that Google Search Console used PhantomJS to render the pages, so I decided to give it a try on my local environment.
We use Webpack to bundle all js files together, and it works as expected both on local and production environments, however it appears that PhantomJS has some problems when trying to render the bundled files.
Every module a page tries to bootstrap throws an error when running PhantomJS:
[$injector:nomod] Module '(moduleName)' is not available! You either
misspelled the module name or forgot to load it. If registering a
module ensure that you specify the dependencies as the second
argument.
But as I said, all browsers correctly loads all modules, apparently there is no error on the modules declaration, all imports are in order, everything should work as expected. Except it doesn't.
If you think an excerpt of the script could bring some light to the matter, I'll include when required, as the code is a bit sensitive, there is a lot of it (couldn't think about a bit that could be helpful), and since it works correctly almost everywhere it doesn't seem to me to be the issue, but I could definitely be wrong.
I'm sorry, I hate to post questions without code, but I'm a bit overwhelmed by this one.
Has anyone faced a similar issue?
Any help would be much appreciated.
Kind regards.
We're having a strange problem that we can't seem to find a cause for. What seems to happen is the javascript and css bundles no longer load on the page.
When we initially navigate to the page everything seems to be working fine. After two page refreshes the page loads without any css and the javascript files are loaded incorrectly. Navigating to the javascript file in the browswer shows it loaded like this:
‹������ì}{·Ñàÿú°£÷È)JNÚk„ö#[ÊEï9–Î’›·§ªéŠ\I›P\–»´¬Ôêg¿™Á¯,vIÊŽÓ÷ëéÓ˜`�ƒù…Áöç6ÔçêYQTe5OgêÍ—ý/ûPÝ«ªš
¶·/³êÜ–õGÅu‚µŸ³Ûy~yU©/v?Þ‚ÿû£:¹É«*›÷ÔÁtÔÇJ/òQ6-³±ZLÇÙ\ýpp¢–5¯®ço»º9/·]Ûç“â|û:-Ôö‹ƒçû/÷±ËíüBu«ÛYV\¨ŸÿÏ"›ßªáp¨:ý"ŸfãN¢þ¹¡Tu5/nÔ4»Qûóy1ïvÜÔþÚ)Õ¦oÒãÑ<ŸUjžýc‘ϳÒ#ë$w.ÓQ•SÕÝÔð:‹2SÐ>Uoà÷›t®ÞdóëÕfÿbÚÿù Î&yÕí¨Nrºsfõ®R8ö®i…ê[õ…úÿÃÂ9}Œ¾NÔ»wŠ×‚é=ªÁ§¯ù§/°åãDõþ“w3zÜÿºÿXsuË›Íiðww]]-ùfccûsÄûù„7PðÿÓ2Gä÷.
b•JÜþ¦SÒt¶?ómKlò!Gøñ‰ýƒ
ŸöÍRš†ÛÛêùñ±:yµûòøàäàð¥:~}ttø
fq|U,*øßÀ®ÃÍÍMÿº€YNó_ç4«DCx/D7L¿˜ûÓq×Ò6n¼l{n\Œ×Ù´êæYZeû“u;¯#µ®Á0ûo ÎËôH~h�õcvþK^¸îÔ#un‚oжÓ3õ(~e•áêûÁf¬æ¡¬G5Tñ–UаÞU¼ÓS¼€ÚÅyNajŸF書é"Ê&ý²ºd§ØàL=�"qÔ×TÀ ªÅ|ªþ© ÇAªigÜñA™¶éÈ#{¼p”W4Ú<ûJu•êÿÔ×¼EÓŽ¡-Ø—ýt’½½NG£ô†¨kT–[b{k¦›]/&°ú§CODÝñbžâ¿8ýŒÒÉ$£j86÷y“誺ÊKú´ÙÅ&}#7PUÐë#{Õ|‘©»DôužŽ~ƒÂ¸t³ú‚Γ>ìÅËËlÞÝì—‹Ù¬˜W}Æ
a ƒá2«Nòëöc×Âï)7SŽ}3BðfWŒ#O2ÒÍBì=½ 4âXƒÄô¶a#fHpôe£<ôÔ±wžOÇ'p–TÓ„ívg“ì×y¥ÚWét
The entire page is like that.
My best guess is that somehow the files are being compressing twice and the browser is only decompressing once. I don't understand why on initial page load everything is working correctly.
Notes
We've tried setting debug = true and debug = false in the config, which has not seemed to work.
Our dev and local environments seem to work fine but prod and staging environments do not work.
The web config files are identical between environments except for connection strings.
It would be great if someone could help us out. Even better if it's just something easy and stupid to fix.
Thanks in advance
So I got something working, it appeared that somehow one of the javascript bundles had duplicated (kind of a weird process as we have internal nuget packages containing bundles along with the web application also containing budles...). I'm not sure why this was causing the strangeness in the files being delivered, but once I removed the duplicated bundle it appears there is no longer an issue.
Multiple sites reference combining JavaScript and CSS files to improve web page performance, including examples of using ANT build scripts to concatenate the files prior to deployment.
I've search, and haven't found any information how to automate updating references to those files in HTML and other documents. I am looking to avoid hacking together something error prone, and want to learn from others who have automated builds in the past.
Are there automated tools in the wild to complete this task that I'm not seeing? Are there recommended processes to update the script and link tags in HTML? Can these solutions be integrated with ANT or similar build tools?
There sure is and it's a smart thing to do.
I found a PHP solution, don't know it that's okay for you, but if it isn't you can still read it's source (it's not difficult) and learn a lot. The solution works like this:
Rewrite your requests like this: from css/main.css and css/skin.css to css/main.css,skin.css (of course you can put many more).
Use apache's mod_rewrite to redirect this request to a script (in our case combine.php), that will combine all files to a single one.
The script combines all the files and sends the combined file. Then it saves it to a cache folder.
Next time around it checks if there is an up-to-date version of the cache and serves that one. If the latest file modification time has changed, it discards the cache.
The solution works great and it even makes use of HTTP cache headers and spits out an [ETags], which you should do anyway.
You are correct this is a great way to speed up page loading. It will even work in conjunction with a CDN, which the other poster recommended.
Here is a small script that will pack multiple files in to one for deployment. It supports both JS and CSS, and will even "minify" them by removing whitespace, etc. Just hook this in to your build and deploy scripts.
juicer: http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool
What even better, it will follow JS and CSS import statements, so you only need to point your HTML files to the loader file and it will work in both development and production. (Assuming you replace the loader file with the combined file on deployment.)
There are others, including some run-time solutions. But it sounds like you have a build process in place anyway.
As far as HTML updating, if you still need it, since automated deployments are very popular in the Ruby world, and you may find some standalone utilities to help even for non-ruby projects. (As above) Methinks this would be best handled by your own project's template language, though. (With a static resource revision id, or such.)
Good luck, and let us know what you find.
I think what you really want is a CDN Content Delivery Network.
Read about it here
http://developer.yahoo.com/performance/rules.html
http://en.wikipedia.org/wiki/Content_delivery_network