How enable MathJax functionality on Heroku - heroku

I am kinda new to both the Python language and the Heroku web interface to web-app deployment. My background is engineering, and MATLAB programming so the whole rails/web scene is new to me. But I am trying to learn the basics for an upcoming project. Towards this end, with the help of a few tutorials around the web, I have managed to successfully couple of Python/NumPy + Flask based apps:
https://matrix-spectrum.herokuapp.com/
https://plot-damped-sinusoid.herokuapp.com/
But as you can already see, in the second link, the LaTeX/MathJax mark-up is not displaying correctly. Whenever I run it on my localhost it works correctly (heroku local web), but once it is deployed that MathJax does not display.
How do I fix this? Why isn't adding:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: {
equationNumbers: { autoNumber: "AMS" },
extensions: ["AMSmath.js", "AMSsymbols.js", "autobold.js", "color.js"]
}
});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
in the header working? The closest question/answer I can find is:
https://groups.google.com/forum/#!topic/mathjax-users/Rpa_WQ6rMkE
But that is about 5 years, old and I suspect there should be more recent developments like:
https://github.com/pmq20/mathjax-rails
But I have no experience with "rails".

Those links use the HTTPS (encrypted HTTP) protocol, but modern browsers often refuse to load unencrypted content if the main connection is encrypted. This is called mixed content.
Your link to load the MathJax library hard-codes an unencrypted HTTP connection:
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
You could switch http:// for https://, but a better approach is probably to simply use //:
<script type="text/javascript"
src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
This makes your link protocol-relative; it will load using the same protocol as the page itself.
I encourage you to learn about your browser's developer tools, which are a great resource when doing web development. The console included there often reveals this type of problem.

Related

How i can translate article in codeigniter? the localization work on the app but not on thes artclles

I would like to know how I can translate the articles according to the language of the user ! the language set on the app when the user changes the language, the article must be translated also, localization is already set up in the app but not on the article! i should use an API for that or i can do it without? please tell me!
NB: I got only access via FTP so, I can install packages via composer!
please show me some example or link!
how I can use packages in Codeigniter without use composer, like download it directly from GitHub an put it in my project!
Put the following code in your website structure:
HTML Code:
<div id="google_translate_element"></div>
Javascript Code:
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
This is for your whole website will be translated, I hope it works for you.

Images disappearing when served over https

I just signed up for a cloudflare account and began forcing everything to https just to see how it worked, and to my surprise, all my images refused to work over https. now this is something I don't understand because the assets are all linked via:
HTML:
<img src="./images/image.jpg" />
CSS:
background-image: url(../images/image.jpg);
So I figured, I would change it up to use absolute urls with // instead of relative paths:
HTML:
<img src="//example.com/images/image.jpg" />
CSS:
background-image: url(//example.com/images/image.jpg);
this did not work either. so I decided to hard link to https:
HTML:
<img src="https://example.com/images/image.jpg" />
CSS:
background-image: url(https://example.com/images/image.jpg);
and again, not working. what happens is the images all buffer and as soon as they are fully downloaded and displayed,they disappear abruptly.
All of the images are available over https or http so I do not understand the issue here. Would appreciate a little insight into this and whether its a cloudflare specific issue or an issue with how I'm writing my code. Can anyone confirm that relative paths should call assets via whatever protocol is currently in use? ive not seen any issue with it in the past.
Thanks in advance
Odd problem.
Would appreciate a little insight into this and whether its a
cloudflare specific issue
In general, there should be no problem to do what you are asking, there's no CloudFlare issue
or an issue with how I'm writing my code.
Both of your code examples look good to me, the first perhaps preferable because it will work with both HTTP and HTTPS
<img src="//example.com/images/image.jpg" />
Have you
ruled out browser issues by testing with another browser?
cleared the CF cache?
tested with CF set to development mode?
ruled out any app related issues by testing https image loading on a plain HTML page?
tried changing the CF SSL Level (Flexible, Full, Strict)?
if still no joy, can you post a URL?
Good luck!
As it turns out this was a Cloud Flare issue. They have a feature called Rocket Loader, which compresses all your js files into one long minified JS file which was apparently causing one of my scripts to break, only when served over https. It has been raised as a bug with Cloud Flare support (as it is odd that it works over http but not https). This particular issue was with sss.js (Super Simple Slider) the solution supplied by Cloud Flare Support was to change my script tag for sss.js from:
<script type="text/javascript" src="js/sss.js"></script>
and adding data-cfasync="false" to the tag:
<script type="text/javascript" data-cfasync="false" src="js/sss.js"></script>
Apparently this extra bit of code makes Cloud Flare's Auto-Minifier and Rocket Loader ignore that particular file.

Why shouldn't I host my own copy of Socket.io?

With a webpage hosted locally on my system, with socket.io installed, this page can be served with socket.io.js attached:
<!doctype html>
<html>
<head>
<title>SkyOS</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
</body>
</html>
But if I want to serve this webpage from a webhost like GoDaddy, that file isn't going to be on the directory through installation.
So, that's simple. Just upload socket.io.js onto the webhost. Except one issue:
I can't find socket.io.js anywhere on the web.
So, according to the answer to this question, I shoudln't ever do that. Am I missing something here? Is socket.io not a normal javascript library like any other?
The socket.io server has got the proper client library available and will serve it from the /socket.io/socket.io.js file (depending on your settings the exact contents may vary).
In case you are not using your socket.io server as the general HTTP server simply prepend the proper host.

Google analytics doesn't work on my heroku app

I run a python web app on heroku platform,
using heroku sub domain like: example.herokuapp.com
and I add google analytics js code to my page:
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxxx-x', 'herokuapp.com');
ga('send', 'pageview');
I have insert this script over 12 hours, but when I enter my ga account admin panel, it tell me:
The Google Analytics tracking code has not been detected on your
website's home page. For Analytics to function, you or your web
administrator must add the code to each page of your website.
however, I still can see some PV on the report panel
Does the ga work or not? How can I solve this problem? If I use a top level domain could solve this problem?
Two things regarding your ga.create() call:
1) The third parameter ("herokuapp.com" in your case) is supposed to be a Javascript object, not a plain string. Did you actually mean {'cookieDomain': 'herokuapp.com'}?
2) If you did... then it should be example.herokuapp.com -- you can't set a cookie on all of herokuapp.com.
I've found that the new universal analytics is actually a little slow to kick in within the interface. The old Google analytics used to be like this and could take a day to work.
I have set up universal analytics on 6 sites now, I could see the calls being made to google but it took a day for data to show.
Have you used any debugging tools available.
For Firefox httpfox is a great tool, once installed select start and filter by 'collect' this will display analytics calls if they are working.
In chrome there are 2 good extensions, tag assistant and ga debug both by Google. Both of these can help identify implementation issues.
Hope this helps
John
Credit: https://towardsdatascience.com/advancing-to-professional-dashboard-with-python-using-dash-and-plotly-1e8e5aa4c668#cf77
Try this
import dash
app = dash.Dash(__name__)
app.index_string = """<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-131327483-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-131327483-1');
</script>
{%metas%}
<title>{%title%}</title>
{%favicon%}
{%css%}
</head>
<body>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
{%renderer%}
</footer>
</body>
</html>"""

jQuery slider not working in https URL

I have a jquery photo slider that is working great in a regular http:// URL like this:
http://tinyurl.com/cswdpbc
My problem starts when I try to access the page with https:// the slider no longer appears. I have tried to Use the Chrome tools but can't see anything out of the ordinary...can somebody take a peek and let me know what you think it could be?
HTTPS URL: http://tinyurl.com/c29585s
you are calling this: https: /wp-includes/js/comment-reply.js?ver=20090102 and it gives an SSL certificate error, try calling scripts without defining a protocol, like this:
<script type='text/javascript' src='//wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
also, you could use google's cdn to host that file for you ;)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Resources