Develop Reference

Inserting Html, CSS and Javascript into the console to test a new block/feature

I have been tasked with creating a new feature/block of HTML & CSS that contains some light JS for controls (think a carousel). It is working as expected but two of the requirements are that it's one block of code and it can be run in the console and display on the web page(e.g. Chrome)
I have added the CSS and JS into the html file, so one block of code, I hope is solved, I then tried to create a little function using insertAdjacentHTML to run in the console but that doesn't work as it doesn't accept anything other than pure html (no class names or tags etc)
I do not have access to the source code of the website they want to test it on, so apparently it has to be done in the console.
I also looked at extensions, to see if I can work out how they do it but not having much luck, happy if someone can recommend anyway in which I can display this new feature.
I understand why they want to do it this way as they will want to do quick demos of new features built, but still an unorthodox method imo. Happy to be told wrong.
Any help would be great.
TIA
EDIT: JS file - https://github.com/morphey-slavbard/product_slider/blob/main/main.js
HTML file - https://github.com/morphey-slavbard/product_slider/blob/main/index_2.html

Run snippet of jquery code on a specific webpage from a local module

I have a short snippet of jquery code that I use to pick and submit a specific choice in a drop-down menu on a website.
For now, I've pasted the code into the console, but I would like to set up some form of simple local module with a button, that when clicked runs the jquery code on the specific website.
I don't know much coding aside from a bit VBA, so I'm unsure what's the best way to go about this. Intuitively, I imagine that it shouldn't be that difficult of a task, but I can't quite wrap my head around how I set it up and if it's even possible to click a button in a local module that then performs an action on a webpage.
Really hoping some of you might be able to give me some guidance. Any help is appreciated!
Best regards
Magnus

Ideally, I would like to do this in VBA, but i'm unsure if it's possible to run jquery scripts from VBA. I'm using Chrome Browser by the way.

Mysterious div being appended to hyperlinks

We run a Ruby on Rails 3.2 web application that uses a standard mix of rails and jquery.
Recently, we noticed a strange div element appearing in our production code. It seems to only show up when we render views with strings that also contain hyperlinks.
Here's an example:
We have a string in our view, that we want rendered as HTML:
"Try to search <a href='/search?q=hiring'>hiring</a>"
When we render the page in production though, we get the following:
"Try to search <a href="azarvuttcexyytzq.html" id="qqqqtra" rel="file">trufarwdstrzyzdyw</div>."
We're not sure why but the following div is being appended to our link:
<div style="display: none;">trufarwdstrzyzdyw</div>
What's strange is that we don't think that the file azarvuttcexyytzq.html exists on our servers, and we also found out that "file" is not an acceptable rel value for a hyperlink's relation attribute.
So, where could the div be coming from?
One thought is that it is coming from some analytics library in our system, since we're using Google Analytics. But we can't seem to confirm that idea or rule it out.
Does anyone know of a library that causes behavior like this?
Any help or insight would be appreciated.

If there is no developer who has done this (intentionally or otherwise) by appending a div with a random hyperlink in your application, then there is a high probability that your application server, some library or a gem you are using is compromised. It would be good to do an audit of your code/server and ensure that you are using the original version of all the gems and libraries and no malicious code is otherwise included in your app code.

We had the exact same issue, although intermittently, and it was Distil networks injecting in our case. To verify we took Distil out for the site and it worked like a charm!
Although, have yet to find how to get it working with Distil, will update the answer if/when we do

We had the same issue, our application behind Distil as well as in other comments.
If you use Distil, read this:
https://help.distilnetworks.com/hc/en-us/articles/235705127-Optimizing-Honeypot-Links-for-Pages-with-Inline-JavaScript
In short: Add the following comment near the top of your page (and above the JS) to force Distil injection to happen there: </a> -–> You can also add any other custom, a unique comment which Distil could use to inject the honeypot link code into.

How do I use scrollspy on Commonmark input/preview with AngularJS without jQuery?

When I was looking for a live-preview inline Markdown editor for a project - live editing within an HTML page - I came across this one. The feature that interested me the most was scrollspy: when you scroll the input <textarea>, the preview <textarea> scrolls with it. This is very convenient, as the project in question relies on comfortable writing.
The problem I'm having is that such scrollspy uses jQuery, which I'm not comfortable with. One of my main points is to make the project as quick to load and responsive as possible, and jQuery minified increases the local machine loading time by ~100 ms - which, I imagine, translates into even more loading time online. I already have ~300 ms local loading time and if I have to increase it, I'd prefer to do so only when necessary.
Still, I find the text scrollspy feature very attractive and am looking for a way to implement it without relying on jQuery. I'm looking for the simplest and quickest, performance-wise, way to achieve that, using the tools already at my disposal.
I'm using AngularJS, Commonmark parser for Markdown, angular-commonmark.js (which allows me to parse any tag's input as Commonmark) and UI Bootstrap (a Twitter Bootstrap clone built solely with Angular).
EDIT: it turned out, during experimentation, that placing Angular-Commonmark attribute onto <textarea> outputs raw HTML to the <textarea> rather than Marked-down text (i.e., <h1>Text</h1> rather than a bold and big "Text"). I was using <div> to test the output and it worked just fine. Would that disallow me to use scrollspy (since <div>s are unscrollable)?

Use VIM omnicomplete for javascript with ctags

I am using vim/gvim for 4 months already and now I found a way to use it's strengths.
My tags file is generated very well and here is a simple row in it.
my.namespace.classname /path/to/file.js /^my.namespace.classname = function(first_arg,$/;" f
Here is an example what i need to omnicomplete:
my.namespace.cla <- omnicomplete list with all classnames in the my.namespace
The above is the key to my problem, because it looks like omnicomplete searches only namespace without including "my." in front of it. So i see other element in the omnicomplete list and not my classname at all.
However, if i type :tag my.namespace.classname for example gvim opens the correct file at the correct position.
What is wrong and how can I make it work?

I've noticed that a lot of omnicomplete is not well developed. I've used the php omnicomplete and have had to go in and tweak a lot of it to get it working correctly. I recommend you download omnicomplete for javascript. Then add it to your plugins directory. Then make edits to it until it does what you want it to do.
Sorry I couldn't be of more help - but at least you won't go answerless any longer.