We Keep Coding

Can minifying JS cause issues with embedding external JS into my website? If so, how do I work around this?

I am currently building our company's website using WordPress and have run into some issues embedding a snippet of html which points to a menu of sorts and renders that menu as a widget on our website (snippet below):
<div id="leafly-menu">
</div>
<div style="text-align:center;">
Visit our profile on <a href="https://www.leafly.com/dispensary-
info/happy-hemp">Leafly</a>
</div>
<script
src="https://www.leafly.com/public/global/js/dispensarymana
ger/embed.js">
</script>
<script>
var pymParent = pym.Parent('leafly-menu',
'https://www.leafly.com/embed/menu2/happy-hemp', {});
</script>
This worked for a while. When visiting the website as anyone normally would, the menu rendered and operated as it should have. However, since then I've had more time to build a more fleshed-out website/design and now this snippet no longer works. This snippet of HTML is the snippet of HTML provided by Leafly and thus I have no control over the actual JS or HTML of the snippet myself nor do I have access to change any parameters about how my website is fetching the JS file from their end.
Here's a breakdown of some of the more notworthy things being used to build the website:
CMS: WordPress
Noteworthy Plugins: Elementor PRO (Page builder) | Premium Addons PRO (Elementor
extension)
Performance Plugins: WP Rocket (Caching & Performance) | Imagify (WP Rocket
Extension/Media File Compression) | Cloudflare (CDN; *Cache policy is integrated
with and controlled by WP Rocket)
The only true changes that I've made to the website outside of aesthetics is attempting to pay mind to optimization and performance. In lieu of that, I opted to purchase WP Rocket; a plug-in for WordPress sites which helps with controlling cache policies among a list of other offered features. It was around this time that I noticed that the snippet stopped working.
Keeping in mind that WP Rocket integrates with and controls the cache policy of my Cloudflare CDN, WP Rocket also allows the ability to minify JS, HTML, and CSS. In doing some research, I opted to use the following features of WP Rocket:
HTML Minification
Combine Google Fonts
CSS Minification
JS Minification (excluding any JS at this path:
www.leafly.com/public/global/js/dispensarymanager/embed.js)
Defer JS
Safemode for JQuery
Cache Preloading (Preloads automatically every 24hrs)
Now, I've tried everything I thought to personally check for myself. In my cache policy, I've excluded anything and everything coming from "leafly.com/", I've tried whitelisting "leafly.com/" in my Cloudflare firewall rules & exceptions. I've tried restructuring the HTML in the snippet provided by Leafly; etc. Anything I could think of that might cause issues rendering the JS of the Leafly embed, I tried to disable. Still, no cigar.
So then that leads to me asking:
what would cause an HTML embed from a 3rd party-- which was once
working, to all of the sudden stop working/rendering correctly?
would minifying my JS or CSS cause or be the source of this issue?
Guys (and gals), I'm drawing a blank here. I just can't figure the damn thing out and would love some suggestions regarding troubleshooting and solutions.
Here is how the HTML is served to the end-user when visiting the site in the area where the menu should be located.
<div class="elementor-element elementor-element-9bb0fdd elementor-widget
elementor-widget-global elementor-global-1233 elementor-widget-html"
data-id="9bb0fdd" data-element_type="widget" data-
widget_type="html.default">
<div class="elementor-widget-container">
<div id="leafly-menu">
<div style="text-align:center;">
Visit our profile on
<a href="https://www.leafly.com/dispensary-
info/happy-hemp">
Leafly
</a>
</div>
<script src=
"//www.leafly.com/public/global/js/
dispensarymanager/embed.js" defer="">
</script>
<script>
var pymParent = pym.Parent('leafly-menu',
'https://www.leafly.com/embed/menu2/happy-
hemp', {});
</script>
</div>
</div>
</div>
Here is a link comparing what it should render out to look like vs. what it truly renders out to be now:
What it should render to be: https://imgur.com/0w1OKyY
How it actually renders: https://imgur.com/VJw72yU
Here is a link to the global JS file as provided by Leafly:
https://www.leafly.com/public/global/js/dispensarymanager/embed.js
The only hint I've been able to glean is through inspecting the div container on the webpage itself; in which toward the bottom of the dev console I get a yellow triangle with an exclamation point-- which reads:
JQMIGRATE: Migrate is installed, version 1.4.1 content.min.js:2
[Deprecation] Element.createShadowRoot is deprecated and will be
removed in M73, around March 2019. Please use Element.attachShadow
instead. See https://www.chromestatus.com/features/4507242028072960
for more details.
If anyone has any ideas of the best way to troubleshoot or fix this issue, please help a brother out:P
Thanks!

Angular Web Architecture using nested components and hiding them using ng-hide

I am developing an application using Angular 1.X.
There is a component that is used across three pages.
I have several nested components into a main component. However there are two components that will only show on one page. I am currently ng-if(ing them) and was wondering if this is a bad option.
<!-- Component 1 -->
<div class="wrapper">
<div ng-if="showChildren">
<component2> </component2>
</div>
<!-- more code goes here -->
<div ng-if="showChildren">
<component3> </component3>
</div>
</div>
On the required page I would add in the controller
<component1 showChildren="true"></component1>
The code works, it gives no errors on page or in console.
Even though there might be other solutions for this, is there anything about this that is actually bad design/implementation?

This is mostly a matter of preference, as there's nothing inherently wrong with your solution.
Just a couple suggestions though:
If you are hiding all the children of the div.wrapper, why not apply the ng-show to the wrapper itself?
Since it seems that the value of showChildren won't change, why not use ng-if instead, and simplify the DOM? ng-show still generates the hidden DOM elements and uses styling to hide them, while ng-if will simply not generate them.

How to manage a singlepage Chrome App with multiple views (or sections)

I´m starting to develop a Chrome App just to test it.
It seems that this kind of applications (desktop app at the end) must be developped with the single-page concept in mind.
But my application consists of three pages or "sections": One to control a web-cam, another to watch a streaming and the last to control a videoconference.
I´ve been reading and coding a bit within the Chrome Platform developing center, and just could find basic tutorials with one .html page.
So, my question is: What is the best way to load different .html pages (because i need to show different UI sections) in a Chrome App? I´ve seen that Google uses AngularJS to implement an MVC pattern, but i don´t know how to change from one view to another (thinking of views as .html pages) in that scenario (because i´ve never used AngularJS).
Thanks!

Is there a specific reason you need multiple HTML pages? It's pretty straightforward to do something like this:
<html>
<body>
<div id="tab_1">Section One</div>
<div id="tab_2">Section Two</div>
<div id="tab_3">Section Three</div>
</body>
</html>
and then show/hide each div according to which part of your app you want to show. CSS frameworks like Bootstrap are designed to work well this this kind of approach, turning the set of divs into a pane with a left nav, or a content area with a tab strip, all of which match the needs of a typical app UI.

<a href> does not make phone numbers clickable in web page

I want that the phone number in my web page should be click able. I have application which has two web pages both containing numbers. In both of them I have used <a> tag for numbers to make them call able. It works fine in one of my web page, but is not working in the other page. I am not able to find the root cause for it.
I am considering that use of different elements on the two web pages must be causing this issue. Please any kind of help is most welcome.
I have tried every solution that has been listed here for such a question. But I'm not able to still find the root cause or find a solution for my problem.

try this
Call

You need to use either “tel:” or “tel://”
for example:
<!-- Embedded within normal page text -->
<p>If you'd like to talk, Call Me!</p>
<!-- Linking a custom image -->
<img src="phone.png" alt="Call Now!" />
<!-- Cross-platform compatible (Android + iPhone) -->
+1 (555) 555-5555
Refer this for more info:
http://mobile.tutsplus.com/tutorials/mobile-web-apps/phone-number-links/
Hope this helps!

Simple ajaxify, without hash or hashbang urls

I'm taking a course in webdesign. I and a lot of the other students are really interested in ajaxifying our work. Our teacher is only into design and HTML - so he can't help.
I hope I use the right term - otherwise please correct me. By ajaxifying, I mean having my webpage only update certain parts when navigating.
For example, let's say I have a webpage consisting of 3 subpages:
1: index.html
<!DOCTYPE html><html><head><title> Welcome! </title></head>
<body>
<div id="Content"> Welcome, dear visitor... take a look around! </div>
<div id="Menu">
<ul>
<li><b> Home </b></li>
<li> Projects </li>
<li> Contact </li>
</ul>
</div>
<div id="Footer"> Email and mediaplayer </div>
</body></html>
2: projects.html
<!DOCTYPE html><html><head><title> Projects </title></head>
<body>
<div id="Content"> All my projects are shown here! </div>
<div id="Menu">
<ul>
<li> Home </li>
<li><b> Projects </b></li>
<li> Contact </li>
</ul>
</div>
<div id="Footer"> Email and mediaplayer </div>
</body></html>
3: contact.html
<!DOCTYPE html><html><head><title> Contact </title></head>
<body>
<div id="Content"> Contact info! </div>
<div id="Menu">
<ul>
<li> Home </li>
<li> Projects </li>
<li><b> Contact </b></li>
</ul>
</div>
<div id="Footer"> Email and mediaplayer </div>
</body></html>
When using the links:
Only the Content-div should be reloaded.
The Menu should update which menu-point is active (here shown with bold-tags). If that's too complex a reload of the menu could work.
The Footer should not be reloaded at all.
The title should be updated.
The url should be updated.
I would really like the urls to be clean. That is: NOT /#projects.html or /#/projects.html, but just straight-up /projects.html or /projects
Working bookmarking and back-button are crucial.
Is this possible at all? I would be forever insanely thankful to anyone helping me here! :-D
I've tried out (and hacked around with) jQuery Address and History plugins, the History.js and a 'gist' to it. Couldn't get any of it to work. I've trawled and trawled stack overflow and google, but can't seem to find anyone explaining these things or having a simple solution.
A solution aiming at modern webbrowsers would be fine. If the IE guys and the no javascripts guys just gets the simple html-version, that would be cool - but it's not absolutely necessary.
Please help - any help would be very, very appreciated! Thanx! :-)

What you want is possible, but not quite easy to do.
As already mentioned, the HTML5 History API makes it possible, but you will need a good knowledge of javascript. Displaying more or less static pages isn't exactly what it's intended for, but the sake of learning, let's think about how it could be done.
You might probably want to use a framework like backbone that already comes with a router so that you don't have to write your own abstractions.
The basic idea behind a client side router is that you have an easy way of defining what URL triggers what javascript function similar to this:
var routes = {
"index": "open_index",
"projects": "open_projects",
"contact": "open_contact"
}
var open_index = function(){
// Do the logic that has to be done
// to open the index page
}
...
Note that the code is only there to illustrate the idea, it doesn't conform to any actual framework or library.
Anyway, every time that one of these routes is triggered you need to take care of basically taking apart the entire page and replacing everything with the desired content.
Now you have basically two choices for that. Either you fetch HTML from the server and just plug it in, or you only fetch the actual data in JSON and use client side templating.
What does that mean? Well, right now you use static HTML pages. They do have a basic structure that is shared by all the pages, namely the separation in 'Content', 'Menu' and 'Footer', however, since this is not a web application but a web site, the content of the 'Content' probably does not follow a structure that represents some kind of structured data.
An example for it representing structured data would be a phone directory. You always have a list of 'First name', 'Last name' , 'Phone number' and this is primarily what defines the page. The way it looks is not what the page is about.
The entire content of the page can be defined by an array like this:
var people = [
{ "firstName" : "John", "lastName" : "Doe", "number": "+12-2322132"},
{ "firstName" : "Dick", "lastName" : "Dobson", "number": "+12-656533"},
...
]
and rendered client side using a simple template like for example:
<ul class="phone_book">
{{#each people}}
<li>{{firstName}} {{lastName}} - {{number}}</li>
{{/each}}
</ul>
to generate the needed HTML. (That was handlebars by the way)
Using a framework, you can easily set it up for the script to update the information display automatically upon updating the data - for example by using AJAX.
In your case however, it is most likely that the way the page looks is what it is about. You need one image here and one image there and a bit of text inbetween, and all of this changes with every single page. You need HTML.
That's the reason why what you want isn't exactly what you would use the History API and AJAX for. It is primarily intended for complex web applications that need to spread several pages with their own urls that can also potentially capture the state of the application so that linking to a specific part of a javascript heavy web application becomes possible. Loading static websites works just fine without using AJAX and the History API.
Let's ignore this right now and just continue anyway.
Let's try and see what the open_index function needs to work.
var open_index = function(){
// 1. Fade out the old content and remove it
// 2. Request the new html content from the server
// 3. Mark the new active link in the navigation
// 4. Add the content to the DOM
// 5. Fade in the new content
}
All of this you can easily do with jQuery. You'll have no trouble finding an explanation for how to do this.
Now you are almost there. The only remaining thing to take care of is to make sure that you intercept the click events for your navigation so that you can use the History API and it won't just load the static page from the beginning.
For a simple use such as this, not a whole lot more is needed structure wise.
I'll say it again. This is complete overkill for your purpose and you should not be using it for that other than for learning purposes. If you don't use a library that abstracts away the History API a bit, the code will become a lot more complex.
I hope this helped giving you an idea of what you are dealing with.