Can someone help me with my frontend script issue? I need to know if this is the only way to code this script or if there are better ways

user_15420911 0
Viewed 50

I am a frontend developer working on script injection. Below is how I usually inject the script using Adobe Target but there are quite a few issues with this method:

1.Hard to debug coz my code editor is not recognizing the HTML and CSS in the JS file because my HTML and CSS are wrapped inside ' ' and + in the each line, so if you have done typo or miss something in the code like "position:reltive" in the CSS or HTML then you need to go through all the lines to find what's wrong.

2.As code grows it's hard to keep track of everything.

3.Since it's all in one JS file my code editor is useless with extension and other features(compiler) and I have to manually add ' ' each line by myself and + at the end of each line which is really annoying especially with the 1000 lines of code.

So anyone knows any better way to have HTML+CSS in a js file but yet code editor compile the code or extension for VSCode that can compile HTML + CSS inside JS to make my life a little easier? I know it's unconventional method but I'm looking for better way to do it if anyone out there doing the same thing in a better way

var style = document.createElement('style');
style.type = 'text/css';

//CSS GOES HERE //This is an example
var css = '.container-fluid {' +
    'height: 400px;' +
    'background-color: black;' +
    'position: relative;'+
    'float: right;'+
    'width: 20%;'+
    'text-align: center;'+
    'right: 230px;'+
'}' ;

if (style.styleSheet) {
    style.styleSheet.cssText = css;
    } else {
    style.appendChild(document.createTextNode(css));
    }
    var script = document.getElementsByTagName("script")[0];
    script.parentNode.insertBefore(style, script);

const anyvar =
  '<div id="container-fluid">' +
  
  //HTML CONTENT GOES HERE

  '</div>';

// INSERT HTML CONTENT USING JQuery

$(anyvar).insertAfter(".someclass");
frontend css html javascript
1 Answers

If I were you, I'd split the code up into multiple files, and use a module bundler to interpolate it into the JS. This is the technique I use for exactly this problem.

One approach is with Webpack. With the npm package raw-loader, you can start with a CSS file, say

/* styles.css */
.container-fluid {
  height: 400px;
  background-color: black;
}

Then you can import it and assign it to the .textContent of the <style> tag:

import styleTextCss from './styleText.css';

/// styleTextCss is now a string containing the entire contents
// of the above file

// ...

style.textContent = styleTextCss;

It takes a bit of setting up, but it's well worth it, especially for anything that isn't completely trivial.

(This also makes integrating a preprocessor into the development process quite easy, if you wish to go that route - it can make things more organized and less repetitive)

The same exact technique works for HTML.

Having standalone files with the proper file extensions allows for live syntax highlighting and validation.

user_95152070
Related