Develop Reference

Images are showing when I'm viewing the page with live server but when I'm opening the html file in the browser are not showing

I made a website in vscode with the live server extension. The images that I added are working in live server but when I'm opening the file separately they are not.
This is how I linked the images
src="/images/winter.png"

Use relative path src="~/images/winter.png" or src="./images/winter.png"
If you want to open the file separately use from the server:-
src="http:www.domainname.com/images/winter.png"
Please let me know if you have any questions. Thank you

How can a [pde-processing] file work with [html-webpage]

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.

djangobyexample book - jquery bookmarklet not working at all

I'm working through Django By Example and in one chapter a jQuery bookmarklet is built within a Django app so that a user can easily save jpg images from a website into their user profile area within the Django app.
The tutorial does give exact instructions on what to do which I have followed and although I have managed to get the bookmarklet button to appear in my bookmarks bar in Chrome, nothing happens when I click it when browsing a webpage with jpg images.
This is my local Django dashboard where the bookmarklet button is added to the bookmarks bar and this part works fine
and this is how it must look like when clicked on the bookmarklet, this is the part where nothing happens for me when I clicked on bookmarklet.
(how to solve this?)
These are the relevant js files
https://github.com/davejonesbkk/bookmarks/blob/master/images/templates/bookmarklet_launcher.js
https://github.com/davejonesbkk/bookmarks/blob/master/images/static/js/bookmarklet.js
I believe the JavaScript launcher is unable to load the JavaScript files or the JS launcher itself is not getting loaded.
The JavaScript launcher is getting called through a Django template tag "include" inside the anchor tag.
this is the link:
https://github.com/davejonesbkk/bookmarks/blob/master/account/templates/account/dashboard.html
I tried debugging it through CTRL+SHIFT+I console where trouble showed that "include" tag not working properly.

Your include tag is split over two lines:
images from other websites → <a href="javascript:{% include
"bookmarklet_launcher.js" %}" class="button">Bookmark it</a><p>
Django does not support multiple line tags. Change it to:
images from other websites → Bookmark it<p>

I have faced the similar error while going through the book.
The bookmark button is not functioning,when i debugged it through chrome debugger,i could able to see errors at js level.I have made two changes to resolve these errors.
1.Error message: net::ERR_ABORTED
Action step:
In the book its mentioned that to place bookmarklet.js in images application directory,but in bookmarklet_launcher.js the source is refered to below path
http://127.0.0.1:8000/static/js/bookmarklet.js?r=
So place bookmarklet.js in /static/js/ directory inside images application(if folder structure not available create it).
2.Error message: net::ERR_ABORTED
There is one more file that should be placed which is bookmarklet.css which is being refereed at below line in bookmarklet.js.
href: static_url + 'css/bookmarklet.css?r=' + Math.floor(Math.random()*99999999999999999999)
Action step:
create a file bookmarklet.css inside /static/css/ directory and place the css code.Refer below link for css code:
Git Hub link for css code reference
1.After the above steps,restart the development server.
2.Drag the bookmark it button to create a bookmark in browser.
3.Open any website that is HTTP(not https) and click on bookmark it(The one which is bookmarked in browser not bookmark it button).
4.The below pop up appears

the problem is that template doesn't exist so try t do the following
**
1. make sure your include code in same line
2. make sure same name of the template exist on your project director /images/templates/file_name.js.
3. or go to setting and add your templates directory to templates.
4. if it load but no images views don't forget that you only accept jpeg and jpg images only
** so you can try another sites like wikipedia **

I was able to solve this by making sure that the url from ngrok tunnel in the bookmarklet.js and bookmarklet_luncher.js starts with https not http
Instead of this http://127.0.0.1:8000/static/js/bookmarklet.js?r= it should rather be
https://127.0.0.1:8000/static/js/bookmarklet.js?r=

After 4 hours of doing everything... googling, deleting code, and rewriting code...
Only had to hit Ctrl+C to stop server and re-run server .
Just take a break and come back to fix it :)
Mine works same as instructed in the book – no changes, no nothing.
Only restarted the server.

ChartJs doesn't work on a local downloaded page of Circular Gauge chart example

I've downloaded the following page:
http://chartjs.devexpress.com/Demos/VizGallery/#chart/circulargaugesbasicelementspaletteforranges
But when I open the local html shows a blank page. My idea was changing the example acording to my needs. Does anyone know how to make the local page works?

That demo is accessible in ZIP packages which you can download from ChartJS site
You can open corresponding file
DevExpressChartJS-13.2.7.zip\Demos\VizGallery\demos\Circular Gauges\Basic Elements\Palette for Ranges.html
And modify it.
You also can mofify code directly on page which you linked using online code editor (but you won't be able to save results)

Is there a way to embed Github hosted javascript in a script tag?

I've had someone submit a pull request for a Javascript library I've got hosted on Github. I'd like to test it in jsfiddle, but I'd like to keep my fiddle script window clean by NOT Copy/Pasting the entire library.
Is there a way to link to the file hosted on Github, and have it served as Application/Javascript?
Basically I want to wire up a very simple fiddle, and add the file hosted on Github as a resource under the "Add Resources" tab.

First, the "raw" URL of the file on GitHub. To get this, click on the file you want, then click the "Raw" button.
Then, on jsFiddle on the left, click "Add Resources". Paste the URL in the box and, click the plus sign.
Now jsFiddle will use your JS file from GitHub.