Navbar not working with Bootstrap 5.1.3 and Jquery 3.6.1

Resolution

If using newer version of 5.1.3 from older Bootstrap, make sure the parameters are correct. There is a change from data-toggle to data-bs-toggle and data-target to data-bs-target. Jquery version should not matter. It does make a difference in the older version.

Root Cause Analysis (RCA)

I do not use javascript much so I jumped from page to page. It is quite frustrating troubleshooting javascript with VS Community 2022 in a Blazor Project. Each item was somewhat new so it was difficult to figure which one was causing the issue.

The source of my problem was that the first navbar used an older version of bootstrap. After finding the new code sample, I did not copy directly and attempted to modify the missing parts. This did not work, then I had to look up what version of bootstrap came with VS 2022. Eventually, my problem was picked from each step.

Reference

https://getbootstrap.com/docs/5.1/components/navbar/

Javascript: Useful script to enable scrollbars

document.documentElement.style.overflow = "auto";


Edit:
Sorry, I posted this primarily for myself. Because for the life of me, I cannot remember this command line.

Javascript - Find elements by the "for" attribute

            function findLableForControl(el) {
                var idVal = el;
                labels = document.getElementsByTagName('label');
                for( var i = 0; i < labels.length; i++ ) {
                    if (labels[i].htmlFor == idVal)
                        return labels[i];
                }
            }

This function is handy when working with C# CheckBoxList (or really any of the C# lists). When creating javascript to manipulate the list, C# does not provide ID to the label, rows, nor columns. Thus to find the label, only the "for" attribute can be used to search.

Reference

http://stackoverflow.com/questions/285522/find-html-label-associated-with-a-given-input/285575

Buggish: Blogger Compose Style removes Script Tags

I was posting a few links to Pinterest which uses a script to modify the link tags to display the images. To do this, I inserted the script into the HTML portion of Blogger.

Although Pinterest says to add this to the end, that only ensures that there are no other scripts that will interfere with Pinterest. The easiest way to check is just to try and see if it breaks. Very rarely do multiple scripts clash, but it can happen. I didn't want the script to be executed on all blog posts (why give them tracking data when I do not have to). So, short story is that I had no problems with this.

At the end, I wanted to add the reference. To do that, I went back to Compose mode and added the link to the site that I pulled some of the info from. When I updated, I noticed that the images were missing. Returning back to blogger, I noticed that the script disappeared which was easily remedied by re-adding the script.

Reference

http://douglastclee.blogspot.com/2014/01/life-wall-bookcase-ideas.html

Complaint: Google Analytics - Demographics and Interest Reports - New Tracking Code

I was playing around with Google Analytics and stumbled across the Demographics and Interest Reports which seemed interesting at first but it brings me to a page to say that I need to make a change to the scripts to have this work.

Why didn't they just give me the proper scripts to begin with? I have the option already enabled. This is quite a hassle even though I know how to do the work. Then again, after trying to follow the instructions I could not find what they needed me to change.

The instructions is to change:

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

To:

ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js'; 

And no where in the script do I have these lines. The code surrounding the lines are not supposed to change but even those are not what the script was provided by Google Analytics. What is provided to me is the follow:

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-xxxxxxx-x', 'xxxxxxxxxxxx.blogspot.com');
  ga('send', 'pageview');

Figuring what the changes are, I could deduce that I change google-analytics.com/ga.js to stats.g.doubleclick.net/dc.js. But then I checked the privacy policy and noticed that that this also required me to update my privacy policy. At this point, this is just too much of a headache so decided not to move forward this change until I figure out what to do about the privacy policy part. Whatever reason for not implementing the change, I find it odd that the instructions to update the script is not correct for me which I would expect from a company like Google.

Release Management

Who's responsibility was this issue? For my team, this would appear to be needed from our product team. It is also odd that no one has a checklist to make sure that documentation should be updated since the instructions appear to have been for an older version (here's an example to publish versions for those people who believe version numbers are practically obsolete due to new agile processes). None of the steps after product would really check on this change because it wouldn't exist in the requirements since it was missed. This wouldn't have a chance to be caught until much later in the process like User Acceptance Test (UAT)... possibly System Test (ST) if they did some free-style testing which I find unlikely since most corporations would have the team follow test scripts which would exist since there was no requirement. Also odd is that even after all that, a user like myself should have reported this by the time I got to this (although I am making a huge assumption that this feature has been out for while). But Google typically had something like a "did you find this helpful" and of course, it does not exist for the one time I looked for it.

So even after all that, there is a chance that I have missed a step somewhere. I am not sure where I skipped a step and if it wasn't that intuitive then something at least needs to be improved.

Reference
Instructions to change - https://support.google.com/analytics/answer/2444872?hl=en&utm_id=ad
Policy requirements - https://support.google.com/analytics/answer/2700409
Google Analytics - https://www.google.com/analytics

Coding: JavaScript - Single Var vs Multi Var

I came across an article discussing Single-Var vs Multi-Var declaration for JavaScript. I am almost always for multi-var pattern from experience.

Programming from scratch, I do not particularly care for one pattern over the other. Some argue one looks better than the other. That is a personal preference. Single-Var promoters say it saves space, but most people tab it to the same level as the other variable names which defeats the space saving (unless you compress the file, then maybe there is an argument there). Even then, space is so irrelevant today because either the program is so large that the difference is insignificant or so small that systems today are so advanced that no one will even notice the minuscule delay.

Having to deal with troubleshooting, debugging, and reading through thousands of spaghetti-code, multi-var has so many more advantages. You cannot assume process when debugging or troubleshooting because if you are troubleshooting an issue, you are looking for a problem. On the same note, you cannot assume strict is being used. Also, developers may easily assume others can pick up the code easily or be aware of certain standards but not everyone is like that. You also do not know how many people the code has gone through or even how many companies.

There have been plenty of codes that I had to debug due to a variable not declared properly or even just misspelled. There was a code I had troubleshot because someone used an I instead of l or maybe it was a 1. Who is going to notice an upper-case 'i' to an lower-case 'l' to the number 1 when skimming through hundreds of lines of code?

Another use of declaring multiple vars is also to find where the variables are declared. Sure you can have IDE. But if you find yourself having to troubleshoot in unfamiliar environments, this makes a world of a difference to navigating through code with a simple text editor with a word find (or find word within a library of files). Even if comma-first, you then have to search for both comma-first and with var (in-case it is the first variable in the list or a parameter to a method/function or a different variable on a different block level [scope]).

For any advanced debuggers (I assume advanced developers), the cosmetics of tabs, alignments, etc., is barely a nuisance. At some point, I can read both styles easily without complications even if they were multi-line or single-line or case-insensitive.

So if there was an opinion to be made on this topic, it should be the people who are going to maintain the code after deployment. Developers have a project plan. Troubleshooters are expected to fix the problem yesterday. Time is more valuable to them than developers. No matter how experienced developers are or how mature the procedure may be, errors are human-nature.

Ultimately, either is acceptable. To me single-var would be like the developers leaving the power button in the back of the computer. You don't have to see the button and closer to the power supply which means no extra wires in the case. When was the last time you seen that design (the design did exist for those of you too young to have seen them)?

Reference

Kent Dodds - https://plus.google.com/u/0/114245123507194646768/posts/dnRkxWyQ4fM
Ben Alman - http://benalman.com/news/2012/05/multiple-var-statements-javascript/
Dan Hough - http://danielhough.co.uk/blog/single-var-pattern-rant/

Updates

3/12/2014 - Added two more references which support multi-var patterns. Ben Alman does a good job describing work-arounds to the advantages of single var pattern. Dan Hough does a good job explaining preventing errors and simplifying rafactoring. I like the addition of the refactoring which also expands on code maintenance.

There were a couple posts on the use of 'use strict'. For someone maintaining code, you may not always have access to modify code. Also, there are times working in a corporate environment which you may not even be able to install your choice of IDE or add-ins. Using multi var pattern is much more helpful for programmers supporting old code. Especially with javascript where code can put interjected in out-of place areas or written by untrained programmers like web designers.