We Keep Coding

How to load error trackers from script tag?

I'm working on small .js which is going to be embedded on multiple websites, it will be loaded in a classic way - via script tag: <script src="myscript.js"></script> in sites body tag. I cannot add any more scripts to those sites.
I would like to track errors with error tracker such as Sentry, Rollup or HoneyBadger. However, all of them require being loaded with another script tag, most preferred before everything else.
Note: Those services need to load before everything else to catch errors property.
As I cannot add another script tag in the site's code, I need to execute their code inside my script, but before my actual script code.
I tried taking the content of HoneyBadger javascript library and putting it directly inside my file - it worked, however, I feel like it's terrible practice, as their code is written with modern browsers in mind, and mine supports older ones.
Is there any good way in my situation to load their .js externally?

I don't think that would work because of the way honeybadger.js v0.5 parses the script tag to get those attributes--it looks for the script tag in the dom when it's loaded.
Also, we've moved away from using the data- attributes in honeybadger.js v1.0, which was just released. In that version, you must use Honeybadger.configure to set your API key. Take a look at the new docs here:
https://docs.honeybadger.io/lib/javascript/integration/browser.html
I'd recommend going with v1.0, and using Honeybadger.configure for the configuration.

How to duplicate HTML templates with different contents (text, picture)

I am making a website where I am going to use the same template for a lot of the same pages, only the text and picture needs to be changed. The only thing that is different from the different pages are the different sports, so I have a jumbotron picture that I want to change, as well as the text about the sport itself. I am wondering if there is any smart ways of doing this instead of making a .html file for every page?

Some file-hosting services allow for a base HTML template, but usually, you will need to create a HTML file for every page on a site. If you use Adobe Muse, for example, it will output the code with the least amount of white-space and with the most efficient size possible. But it will still output multiple HTML pages.
TLDR: You will need to make a HTML document for each page on your site, usually.

Yes, there is a way.
Don't use css in that page itself. Create another page containing only css codes and name it as "css.css" and place the file in same folder in which the html file is present.
Then use external link for css. Insert the code given below in the head part of the html document.
<link rel="stylesheet" type="text/css" href="css.css">

consider to use some templates instead of using plain html.
if you are doing server-side rendering then there are a lot of frameworks you can use for each language.Just google popular framework for the backend language you are using.
For frontend side you can use some Single page application framework for example angular, react, vue or something like handlebars. check them and pick one

How do I include global styles/javascript in HTML files displayed as dialogs?

I am developing a Google App Script project that will be used right from within a Google Sheet, with HTML files as dialogs. My project will be a mix of .gs files as well as HTML files for data entry, etc. I am trying to use the methodology explained here:
https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript
to create global JavaScript and CSS modules that I can include in my HTML files rather than cutting and pasting inline code all over the place. This will be mainly useful for the data-saving routines which capture form data, serialize it, then save it to Sheets via the methodology outlined here (and many other places): http://railsrescue.com/blog/2015-05-28-step-by-step-setup-to-send-form-data-to-google-sheets/.
The problem I am having is with trying to call the "include" statement from my HTML files, namely, lines like:
<?!= include('JavaScript'); ?>
It doesn't work when I create a menu on the spreadsheet to display my HTML file as a dialog -- the text of the include line just shows up as literal output on the dialog, and code does not appear to be getting included (not in scope).
I know the Google example is primarily for pages delpoyed via a web app, but I'd like to use my HTML files as dialogs right inside the spreadsheet (e.g. from a menu or sidebar) -- that feels nice and tidy to me. But if I can't get includes to work, my code base is going to be a nightmare and it will be really, really hard to standardize CSS across the whole app. I don't want to be cutting and pasting all the time.
So, what is the secret behind this <?! tag, and why won't it work in my HTML files when they are called as dialogs? It is clear those lines are different from the get-go (maybe not in a bad way, but they don't work), as the Google Scripting console displays those lines oddly, as depicted in the screenshot below:

Please try adding:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
More information can be found in Adding Style Sheets.

Figured it out. I was not properly understanding the way the HTML was being served up as a dialog. I was using this behind a custom menu option:
var html = HtmlService.createHtmlOutputFromFile(htmlFileName);
when I should have been using the more dynamic:
var html = HtmlService.createTemplateFromFile(htmlFileName).evaluate();
The latter generates a user interface object where the server-side script is executed and everything is included properly when I display the object with showModalDialog() (or showSidebar()).
I just had a complete misunderstanding of how the user interface object was being created, so now all scripting works inside my HTML files.

Same sidebar across webpages

I'm pretty new to web development. What is the best practice in keeping the same sidebar and other elements across web pages on one's site? Do you store the sidebar html and call that? If so, how would one go about doing something like that?

There're many options to handle this problem but I've found easy one using jQuery. Use this if it suits your requirements.
Add the jQuery CDN in your HTML file.
Create a JS file as sidebar.js.
Copy all your HTML code of the sidebar and store as a string variable in a function of the JS file. as
function loadNavbarDiv() {
String navbar_code_str = '<nav><div>...</div></nav>
$('body').append(navbar_code_str);
}
Then in the HTML file, you want to add navigation bar, add folowing code in your <head>
<script src="sidebar.js"></script>
<script>
$(document).ready(function(){
loadNavDiv();
});
</script>
It's working fine for me.
Happy coding!

Here's one way to do it: use "include" files. No JavaScript required. The server does the work, instead of requiring the client to add the content.
SSI, or Server Side Includes, were first developed to allow Web
developers to "include" HTML documents inside other pages. If your Web
server supports SSI, it's easy to create templates for your Web site.
Save the HTML for the common elements of your site as separate files.
For example, your navigation section might be saved as navigation.html
or navigation.ssi.
Use the following SSI tag to include that HTML in each page.
<!--#include virtual="path to file/include-file.html" -->
Use that same code on every page that you want to include the file.
That page also describes some other approaches. But if you know this is called using include files, you can search for it more easily. For example, this article describes includes and how to call them from JavaScript if you must.

As long as you're only coding in html, you will need to copy your html into every page. You can store the css for the sidebar in one and the same file and call that on every page though.
Other scripting languages and frameworks might contain templates (php) or master pages (asp.net) for example which make it possible to use the same code in different pages.

How to get a Script Tag's innerHTML

Alright... I've been searching for an hour now... How does one get the innerHTML of a script tag? Here is what I've been working on...
<script type="text/javascript" src="http://www.google.com" id="externalScript"></script>
<script type="text/javascript">
function getSource()
{document.getElementById('externalScript').innerHTML;
}
</script>
I've been trying to work on a way to call another domain's page source with the script tag. I've seen a working example, but cannot find it for the life of me...

You can't do that. There is no innerHTML....all you can do is pull down the file view XMLHttpRequest to get to its contents....but of course, that is limited by same-origin policy, but script tags are not. Sorry.

actually, there is a way to get the content, but it depends on the remote server letting you get the file without valid headers and still fails a lot of the time just because of those settings. using jQuery since it's the end of my day and I'm out the door....
$.get($('#externalScript').attr('src'), function(data) {
alert(data);
});

I'm guessing you want one of two things:
To make a JavaScript file global (so that other pages can call it)
To get the script that is currently in the file
Both of those can be solved by moving your script to a .js file, and then using the tag
<script src="[path-to-file]"></script>

You can't do this. It would be a massive security problem if you could.
Script content can include any number of things. Consider this: a script loaded from a URL on your bank's website might contain all sorts of things, like your account number, your balance, and other personal information. That script would be loaded by your bank's normal pages to do what they want to do.
Now, I'm an evil hacker, and I suspect you may be a customer of Biggo Bank. So on one of my own pages, I include a <script> tag for that Biggo Bank script. The script may only load if there's a valid Biggo Bank session cookie, but what if there is? What if you visit my hacker site while you're logged in to Biggo Bank in another browser tab? Now my own JavaScript code can read the contents of that script, and your money is now mine :)

You can Use Html Parsers:
jsoup » jsoup: Java HTML Parser
jsoup: Java HTML Parser
jsoup is a Java library for working with real-world HTML. It provides a very convenient API for extracting and manipulating data, using the best of DOM, CSS, and jquery-like methods.
refer this:
http://jsoup.org/