Develop Reference

Building an web app to run inside other apps through a JS code-snippet

I was given the task to develop sliders/pop-ups for customers of the company I work for. This works a bit like chatbots (ie. Intercom). The user sees a small bubble on the bottom-right corner, clicks on it and it shows some information from our (Rails) app.
What's the best way to create a javascript code to share with those clients? Should I add my code to a public js file and send those clients a script targeting my app? (like the example below?)
<script src='https://www.myapp.com/script.js'></script>
I've tried to do so, but it looks like the script doesn't link to my CSS files, so styles are broken. So I am not sure if it's the best way to go.

You're using the right approach.
To fix your missing CSS you could adjust your script to add the required CSS references to the head of the page.
let externalCssLink = document.createElement('link')
externalCssLink.rel = 'stylesheet'
externalCssLink.href = 'https://some-external-domain.com/some-css.css'
document.head.appendChild(externalCssLink)

Embedding a Square Appointments script into a Wordpress site - it's rendering fullscreen in the preview pane, so I can't edit other content. Thoughts?

Square up provides a couple different ways to add appointment booking to an external website. I am working with a Wordpress site with Elementor using the Astra theme, and I've attempted to create a shortcode with the following snippet. What happens is that the Square appointments takes up the entire preview pane of the editor, so I can't edit the rest of the page, or even access the shortcode/remove it.
<!-- Start Square Appointments Embed Code --><script src='linkhere'></script><!-- End Square Appointments Embed Code -->
I was able to get the calendar on WordPress by just adding the URL source in an iframe, like below, but the problem is it doesn't show up on mobile (at least on Google Chrome). On desktop, a static height is needed to display properly.
<iframe
height="1800px" src="linkhere">
</iframe>
What all can I do to address these problems? I need this embedded, but I need to be able to continue making changes to the web page in the editor. I tried templating it, but it will still render, even in a template. I tried using CSS to fix the width/height, no success. :-(
Please help me!

Amp Javascript adds ineligible tags to the page

I am using gatsby js to build my static amp page and you can see the final html output in the search console. You can see that the generated html passes amp validation. That test passes because I copy and pasted the generated html.
However the website fails because on page load the official amp script <script async src="https://cdn.ampproject.org/v0.js"></script> adds ineligible tags. If I remove the script, the html stays the same. There are other scripts but I am 99% sure it's ^ one because I tried removing them one by one.
The script adds things like amp-version i-amphtml-sizer in the css and changes other things on the page. I am not sure why it would add these tags because v0.js is recommended by amp.
You can see the failing page here.
https://search.google.com/test/amp?id=aClwacaTtbw5q7-Dm3glPg&skip_amp_follow=true
If someone can point me to the original amp v0.js I will be truly grateful. The CDN version is uglified+transpiled and it's really hard to debug my issue.

This was caused by amp cache. I had to follow this guide to invalidate the cache for all my amp pages.
https://developers.google.com/amp/cache/update-cache.

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.

Social-feed - API

I am begining to work with API's and am trying to get a working example of the Social-Feed API (https://github.com/pavelk2/social-feed) on a template HTML.
I have installed bower as instructed in the Github.
I have the dependency scripts loading in just before the closing body tag, A div container for the social feed script and the social feed script within that div.
I am unsure as to why the API is not working. here is a link to the code I am using: https://codeshare.io/5DAwel
Thanks

I think you have to put those links to the scripts into the 'head /head' area of your side.
Compare your source code with the source of the demo page: https://pavelk2.github.io/social-feed-example/