We Keep Coding

Minified CSS selectors not matching rendered HTML IDs in Vue App

A colleague is testing a new release of our Vue application and ran into an issue that is not reproducible on my end. I'm trying to figure out if its a problem with the build process itself or something I'm missing about how Vue generates its HTML output - basically if we made some change that is causing this or if its some environment issue on his side.
The problem was initially that the CSS didn't look correct, after doing some inspecting I noticed that it wasn't being applied to certain classes because the generated HTML and minified CSS class IDs do not match.
For example, the minified CSS has...
.message-bubble[data-v-72703b4a]
But the HTML page is being generated on the website renders this...
<div data-v-7822f308" tabindex="0" class="message-bubble">
Any insight as to where to start looking for a root cause would be very helpful. For just a bit more information, the application is Vue 2.6 and we are using the vue/cli-service to do the builds with a vue.config.json to handle the build rules.

React -- remove dom elements created by an external CDN

I am building a portfolio to show work I have created. It includes some small projects from FreeCodeCamp that are built according to test specs. I would like to include the tests so that someone looking at the code can see the tests.
When you embed the cdn script in your index.html file in a react app hosted anywhere, they work fine (even though React doesn't want outside forces manipulating the DOM). This will install a hamburger menu that can be exploded and you can choose which tests you would like to run. Note that this hamburger is always displayed.
However, I don't want to always have this hamburger menu because some of what I want to display is how the page is styled. I am trying to wait and insert the script tag until a button is pressed.
I can successfully display and remove the hamburger menu if I hit the add then remove buttons in order, but I know that I am doing this wrong when it comes to React design. This is obvious by the fact that if you hit add to dom button 2 times in a row, then it won't be removed. Also, I can run the test suite the first time. But if remove the hamburger and add it back and try to run the tests, there are errors in the console.
My question is: how can you properly add/remove a cdn script element (which will automatically add a dom element (hamburger), in a proper "React" design? I am thinking that solution lies with useEffect, useRef, or useState, but I am to "green" in React and when I research I still can't design a solution that works.
I put the code in a sandbox. To recreate the problem, just click the show the hamburger button, then hide the hamburger button, then show again and try to run the tests. Or click show several times in a row.
Any tips on how to fix this would be appreciated. This problem way exceeds my little experience.
Link to Code Sandbox

So I figured this out myself. In React, To safely make an element loaded into the DOM via external CDN appear and disappear was as simple as CSS.
I just added the item to the DOM with the CDN script tag. Then I could change either display:none or visibility: hidden.
The trick was loading the CDN script in first, then hiding it.
I was encountering a problem because I was trying the faulty approach of adding the CDN script tag, and removing, and adding again.

How to reference a JavaScript library in Haxe

I was reading about fluid dynamics and came across this awesome project. After building it, I noticed that the little option menu that appears in the demo is not showing.
So, as I am completely new to Haxe, I thought that adding the little GUI options panel would be a great little challenge in an attempt to familiarise myself with Haxe. However, I have fallen at the first hurdle as I am getting the following error whilst trying to build the GUI that sits on top of the fluid experiment as shown in the demo:
Uncaught ReferenceError: dat is not defined
Inside the projects route directory, I have an src folder, then Main.hx; inside Main.hx at the bottom of the init() function, I am doing the following:
import dat.GUI;
function init():Void {
//other unrelated code goes here
var gui = new dat.GUI({autoPlace: true});
//particle count
var particleCountGUI = gui.add(particles, 'count').name('Particle Count').listen();
}
When I run the program, the console prints the error mentioned.
Things I have done:
Inside project.flow in the route directory, I have made reference to dat in the build dependencies (and downloaded dat.gui of course).
I have even tried using other frameworks to build the GUI, but I keep getting errors in the console log even if the build is successful. I did have luck getting a panel added, but rather than sitting on top of the fluid experiment, it pushed the whole thing down so there was a space between the panel and the fluid experiment.
Ideally, I want to recreate the options panel shown in the demo, but make it a scrollable list instead. However, I need to understand why I am having issues with dat first!

The simplest solution I can think of is to add this to init() (assuming the .js is located in the project root):
haxe.macro.Compiler.includeFile("dat.gui.min.js");
includeFile() is a macro that directly embeds the file into the .js generated by Haxe (by default at the top of the file). That's enough to make the UI show up for me:
The alternative would be to add a <script> tag to the index.html file as documented here. I'm not familiar enough with the flow build tool to know that's done in this case, but you'd have to find a way to:
modify the index.html template to include the <script> tag
make it copy the min.js to the bin/web directory.
So yeah, includeFile() definitely seems like the more convenient option. :)

Using JavaScript Plugins with Angular 4

I'm trying to use the Bootstrap 3 Datepicker plugin (http://eonasdan.github.io/bootstrap-datetimepicker/) with Angular 4.0.
I've included the necessary JS and CSS (and a custom JS script calling the plugin) in my angular-cli.json file and the script loads great on the first page that I open but stops working as soon as I route to another component.
I figure that I need a way to call $('.datetime-picker').datetimepicker() every time I route to the new component. How would I do that?

this is a different solution try using primeNg google it.

Applying a dependency with javascript to Angular 2 such as bootstrap, foundation or jquery

creating this Angular 2 project I am trying to add other dependencies to the global project that incorporate js files and css files.
The css files work fine... but the javascript files seem to not to apply correctly at all.
I am attempting to do this in the root index.html file.
In the dom everything appears to be correct and there are no warning, errors or conflicts which leads me to believe it is an injection issue.
Interestingly if I apply the html to the index.html everything works fine... but adding it to any component makes it useless.
There is something I am probably doing wrong.

You need to bootstrap your external libraries' code when the component bootstraps.
For example, if you are using the bootstrap collapse on some menu items in a component, you need to call $(class).collapse() in the ngOnInit of that component( or anywhere else in the lifecycle of the component ).