Hi Goodies i have an issue in pyscript
issue : when i paste the below pyscript code in my WordPress post as an html and press preview it just simply popups to dawnload the pyodide file instead of showing the hello world message in the code below. Please someone can clear that to me why this is happening.
thanks regards
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-script> print('Now you can!') </py-script>|
</body>
</html>
the output screenshots from the browser where i get this happening.
(1) From WordPress
this is once i write the code in real time wordpress post as an html
this is what i got once i click on preview
(2) Samething is happening in vscode live server instead of the showing the message hello world it just popup my dawnloader idm to dawnload a pyodide file.
this is the code in vscode with the live server
this is what i got once i run with the live server in vscode
i need to run a small python code in my WordPress post when someone visit my website and in that post once he requests some calculation so the python code should be responsible to do some calculations and show that to the user.
any suggestions please
From the logo on the popup messages you're getting in both cases, it looks like this is behavior caused by having [https://www.internetdownloadmanager.com/](Internet Download Manager) (IDM) installed.
When the Pyodide runtime loads, it fetches certain additional files from the web, including pyodide_py.tar (the compressed Python API files the Pyodide Python API, as well as any additional packages specified in <py-config>. If IDM is configured to interrupt fetching these necessary files, Pyodide will fail to load and/or execute.
You may be able to whitelist (allow) IDM to automatically download these files, but that's beyond my knowledge of that particular plugin.
For more discussion, here's a similar issue on the PyScript GitHub.
Related
Im using Strapi 3.6.8 and i came cross a problem i cant understand with loading the Admin panel.
the CMS status page is working perfect and the API is responding with no problem, but when i try to open the Admin panel i get blank page (white page) and in the page source ican see that there are two files that get 404 error (not found).
The files are: runtime-main.XXXXXXX.js, main.xxxxxxx.chunk.js.
The probplem is clear - the files path is wrong as you can see in the files source:
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<title>Strapi Admin</title>
</head>
<body>
<!-- The app hooks into this div -->
<div id="app"></div>
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
<script type="text/javascript" src="/undefined/cms/undefined/admin/runtime~main.1727abc3.js"></script><script type="text/javascript" src="/undefined/cms/undefined/admin/main.be8fb29b.chunk.js"></script></body>
</html>
unforthantly, i wasn;t able to figure it by myself, i tried the following:
Checked ENV files
Cleared yarn/npm lock files and node-module folder (and reinstalled)
Update packages
Build and run locally using docker (instead of just runing the server locally)
none of the things i tried is working, im sure it's something really small and stupid to fix. it worked perfeclty until somepoint, but i cant findout what was changed.
Thanks.
I have a very simple HTML5 iPhone web application that works almost perfectly; there is only one issue: between the launch image and the app homescreen, a completely white screen appears (i.e. flickers) for about one second.
I'm downloading the app to my phone from the web by using the "Add to Home Screen" button. The javascript file (functions.js) and stylesheet are both very small files.
Has anyone had this problem? Are there any ways to work around/fix it?
index.html
<!doctype html>
<html manifest="demo.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5 Application</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="apple-touch-icon-precomposed" href="Icon#2x.png" />
<link rel="apple-touch-startup-image" href="Default#2x.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="wrapper">...</div>
</body>
<script type="text/javascript" src="function.js"></script>
</html>
demo.manifest
CACHE MANIFEST
index.html
Default#2x.png
functions.js
style.css
.htaccess
AddType text/cache-manifest .manifest
EDIT #1: I have done some more research and came upon this answer:
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available.This could happen if:
You have dynamic heights based on image dimensions but you haven't
set the image dimensions in the markup or CSS.
Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
Your HTML uses inline scripts with document.write().
You have some kind of onLoad() function that reveals/modifies content.
You link to an external stylesheet.
You're using uncacheable external content or you've disabled caching.
You're using external content that's returning 404 or isn't available offline.
I have followed all the suggestions in this answer, but it does not rid my web app of the white flicker. Are there any hacks to get around this issue?
EDIT #2: I have tried using no Javascript and a stylesheet with only:
body { background-color: black }
But there is still a white flicker. Since this appears to be an issue with all web applications like this, my question is: Are there any hacks to work around this issue?
CSS selectors are pretty slow on iOS (greedy CSS reset scripts have terrible performance too).
Head initiated javascript self loading DOM-ready scripts and CSS selectors running together compound the issue further. As you have both CSS and javascript requests in the head, there is a small but appreciable delay processing the body, especially the body's background colour.
Most HTML5 frameworks are moving to deferred script loading. As a minmum you want to get the stylesheet loaded first and worry about javascript second. Try putting the css at the top and scripts at the bottom, then inlining a default background colour (not image - there's an appreciable delay on iOS 5 rendering scaled background images and CSS gradients).
You can also try the async attribute on iOS5+, but I haven't tried it myself.
Hope this helps :)
Alright, seems like a basic and annoying problem. I think the best way to tackle this would be via AJAX (Asynchronous JavaScript and XML). I'm sure you probably already know what this is, but it's just a way to basically send a request from JavaScript for a file elsewhere and then load it into the page or parse it however you wish.
A little more advanced approach
For your example, I recommend you comment out the line of CSS that has the background-image like this:
.bg-container {
/* background-image: url(img/bg.png); /* commented out */
}
Note that the second comment just makes it easier to comment and uncomment the one line while debugging your code.
Now just add a simple img tag to your body, and make the src of it an ajax loader (you can find the spinning wheel generators anywhere). From here you can write some JavaScript to load the image, get rid of the spinner, and replace it.
Two simpler approaches
This solution doesn't appeal to me, I don't think most people would like it anyways. That's why I use 'Bootloader.js' which is a little AJAX loading tool I wrote a couple of months ago to help people with these sort of problems.
It's easy to use, aside from the script include, just add this meta tag:
<meta name="bootloader" content="enabled,forms('selectorOfForms'),a('selectorOfAnchors')">
The forms and anchors is optional, if you use it, it will make all your forms and links asynchronous (not for cross-domain use yet). The forms are not easy to setup, you can read the documentation on that if you would like.
Finally, set up your body like this:
<body>
<div id="body">
<!-- All the content should go here -->
</div>
<!-- This will disappear on first ajax load -->
</body>
And there you have it, this will handle everything for you.
Final suggestion
If you don't like any of these options, or want a limited yet customizable option, I recommend you use Image LazyLoader by Mika Tuupola (included with Bootloader.js) and also available at: http://www.appelsiini.net/projects/lazyload
Tell me how it goes, and what you use! XD
This problem occurs with even simple sites.
Take this for example: it shows a website with a background of #ccc with a splashscreen of #ccc for the iphone 7.
<!doctype html>
<html style="background-color: #ccc;">
<head>
<title>iOS web app</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="iOS web app">
<meta name="viewport" content="initial-scale=1">
<link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
<h1>iOS web app</h1>
</body>
</html>
https://imgur.com/a/tGiREVM
You can see a white flicker while the app loads.
Faster loading apps feel worse, slightly epileptic, with the white flash. And if the splash screen is dark, it looks worse again.
I am using an Cordova 2.4 component Cleaver and an embedded view in my native iOS 6 application. So far I have managed to create the project structure, link the Cordova libraries and set up the Hello World app that does work providing "Device Ready" feedback.
This is all great but it loads all html from the www repository distributed inside the app itself (including all js libraries).
What I really want yo do is this:
1 - popup the cleaver component (which is nothing else than an embedded uiwebview) in my app. Easy - done.
2 - load some html content from a URL pointing to a servlet on my remote server. I have several servlets and need to be able to load each one of them separately of course.
3- have the content generated in step 2 interact with my native app via the cordova javascript libs cordova-2.4.0.js - (how do I load these if they are local to device but html was loaded from remote location).
How can I set this up ?
P.S.
I am more of Obj-C than Javascript developer :)
Here is the answer. What a joy...
excellent article on dynamic page loading in PhoneGap and Cordova
Precisely what I needed. The second part of the project was to enable native code to force the loading of external web services - I accomplished this by called stringByEvaluatingJavaScriptFromString on the Cleaver web view .
[webview stringByEvaluatingJavaScriptFromString:#"app.loadExternal('www.usatoday.com')]; is the code that works like a charm:)
Viola - I have a Cleaver view capable of loading external html content with complete two-way communication between the javascript app and the native container.
Inside your index.html file do something like this (for the point 2)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript">
function onBodyLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady(){
window.location.href = <your_remote_url>
}
}
</script>
For the point 3, your remote content should import cordova.js and the interaction (native / web) will work as if it was local content.
I have made a Webview app to load a online site in to the view.
now i want to save the css and java script files into the app assets dictionary
to save trafik and speed for the website.
But i cant load the picture from the assets dictionary.
can anyone tell me what i am doihng wrong?
mWebView.loadUrl("http://www.XXX.de/android/index.html");
here the html file on an server:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hallo</title>
</head>
<body>
<center>hans hallo</center>
<center><img src="file:////Android/data/com.news/files/weltuntergang.png" height="200" width="200"></center>
</body>
</html>
use
file:///android_asset/
to point to your assets directory
instead of
file:////Android/data/com.news/files/
probably you will need to use loadDatawithBaseurl in your webview for this to work smoothly (in my experience and guidelines recommendation)
I'm at the very early stages of writing a BlackBerry app using WebWorks. I'm aiming at mainly OS6 devices (Torch), but I need it to be compatible with OS5 for a small number of users who'll be using older devices. As far as I'm aware, WebWorks should work on OS5, however I have created a basic app with a hyperlink, and the text doesn't show on the OS5 simulator (it works fine on the OS6 simulator). All it shows is a blank screen. I've tried to just put some text on the app (i.e. not in hyperlink tags) and this doesn't show either.
HTML file as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=no" />
<title>My App</title>
<script type="text/javascript" language="jscript" src="http://localhost/PubInfo/scripts.js" />
</head>
<body>
Click to show device model.
</body>
</html>
You'll notice the only unusual thing I've done (and this is reflected in the config.xml to load the index.htm) is to reference the script file from localhost so I can amend the app without recompiling, again this works fine in OS6 so I don't think it's this that is causing the problem.
I'm developing using the WebWorks Plugin for Visual Studio on Windows 7 (x64). Apart from referencing the files from localhost, everything else is default, i.e. as it is set up when you create a new project.
Has anybody come across a similar problem, and if so what was your workaround? Any help would be appreciated.
Its because your script is not well written (completed):
Also update your meta tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
<script type="text/javascript" language="jscript"
src="http://localhost/PubInfo/scripts.js"></script>
</head>
<body>
Click to show device model.
</body>
</html>