Fix: javascript location.hash throttling issue with IFrame

I had implemented a simple (and most importantly working in older browsers too) way of communication between an IFrame and its parent page via location.replace(“#” + hash), which doesn’t add entries to history like location.hash=… does, and the onhashchange event, when I noticed Edge-Chromium was throwing a “Throttling navigation to prevent the browser from hanging.” error and the lon/lat fields I had on my test page wheren’t updating anymore when I was dragging quickly for a while my location picker marker on an OpenLayers map. If I released the marker and tried after a sec it was starting working again.

     

since the URL shown in the error message redirects to some page that has permission denied, I looked up a discussion that explained the “–disable-ipc-flooding-protection” Chromium switch to turn off that protection, however I was not having any loop in my code that was mentioned in that discussion as probable cause.
https://stackoverflow.com/questions/55925936/angular-7-throttling-navigation-to-prevent-the-browser-from-hanging

On Firefox there was a similar error but with other message:

Searching about it I read about the “debouncing” concept (to avoid flooding some API with consequtive requests too fast/often) at

https://stackoverflow.com/questions/45236692/angular-and-observale-how-to-avoid-multiple-requests-to-api-within-a-given-time

and

https://stackoverflow.com/questions/35991867/angular-2-using-observable-debounce-with-http-get

And ended up finding a simple implementation of it at

https://medium.com/@griffinmichl/implementing-debounce-in-javascript-eab51a12311e

that I adapted to run in older browsers (like IE11) too:

function debounce(func, wait) {
  var timeout;
  return function() {
    var context = this;
    var args = arguments;
    clearTimeout(timeout); //clear previous scheduled execution if still pending
    timeout = setTimeout(function() { func.apply(context, args); }, wait);
  }
}

function setLocationHash(hash) {
    window.location.replace("#" + hash); //don’t set window.location.hash directly, adds entries to browser history
}

setLocationHashDebounced = debounce(setLocationHash, 20);
    //this will make sure any setLocationHash calls that occur within 20msec replace any pending ones (all are timed to execute in steps of 20msec)

//…

function markersUpdated(otherLocations) { //callback
    theOtherLocations = otherLocations;
    if (theOtherLocations.length > 0) {
        var hash = theOtherLocations[0].toString();
        setLocationHashDebounced(hash);
    }
}

function hashChanged() {
    var hash = window.location.hash.substring(1);
    if (hash.length > 0) {
        var hashParts = hash.split(‘,’);
        if (hashParts.length >= 2){
            var location = [hashParts[0], hashParts[1]]; //[lon, lat]
            map_addOtherMarker(location); //Note: this will just move selected marker if existing and otherLocations.length = _maxOtherLocations > 0
             if (hashParts.length >= 3 && hashParts[2] == "zoom")
                 zoomToLocation(location);
        }
    }
}

HowTo: Copy effective-computed CSS style for specific HTML paragraph

I’m in the process of setting up a temporary landing page for the trafilm project, where I need apart from showing the trafilm logo to also show some text description about the project, till I set up an instance of MonoX Social CMS for it, like the one in ClipFlair’s Community website (ClipFlair Social).

Since ClipFlair Social has some nice text styling, I decided to borrow the style of one of its home page paragraphs, using Firefox web browser’s developer tools (accessible via F12 key).

Being at the Inspector tab of the dev tools (which is the default when they first open), using the “Pick element” tool (first one on the dev tools pane’s toolbar on the left), I select the paragraph that looks nicely styled and I go to the Computed tab at the Style view, then press CTR+A to select all computed style CSS declarations for that paragraph element and press CTRL+C or right click and select Copy to copy them to the clipboard.

If pasted (CTRL+V) in some text editor like Window’s Notepad that looks like a big ugly line, since they contain Unix-style line-endings, that is LF (linefeed) and not Windows-style ones (CRLF, Carriage Return + Line Feed), but editors like Wordpad or Notepad++ can show them nicely and even convert line endings from Unix to Windows and vice-versa if you wish so (e.g. in Notepad++ the respective actions are at Edit / EOL Conversion menu).

So, this is the copied Computed CSS style for that paragraph:

border-bottom-color: #333;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: #333;
border-left-style: none;
border-left-width: 0px;
border-right-color: #333;
border-right-style: none;
border-right-width: 0px;
border-top-color: #333;
border-top-style: none;
border-top-width: 0px;
color: #333;
cursor: default;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;

As you can see, it has lots of stuff that isn’t needed, unless you want to be sure your style doesn’t get affected by style of parent elements. In my case I decided to trim it down a bit:

color: #333;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;

Adding around the text above (which is represented by the CSS comment /* … */ below) a CSS selector to wrap those declarations in order to make a proper CSS rule-set:

p {

/* … */

}

and passing to CSS LINT tool to help us clean up the CSS we get no errors, but several warnings:

For example, as explained at W3Schools.com, in CSS one can use shorthand margin and padding properties:

The margin property is a shorthand property for the following individual margin properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

…so one wonders why Firefox Dev Tools don’t spit those out with that order and give them in bottom, left, right and top order instead.

Also instead of 0px, one is suggested to always write 0 instead, since zero will always be zero irrespective of the CSS units used for it (at least for the currently available CSS unit systems that is). This is merely to save in bandwidth I think, since 0px is better, suggesting to anyone modifying this value in the future they’d better use “px” [pixels] instead of say “pt” [points]).

So we clean up this CSS into (pay attention to the order of values in margin and padding shorthand declarations, which is top, right, bottom, left, that is clockwise starting from the top side of the HTML elements targeted via the CSS rule selector, which is a paragram – p – in our case):

p {

   color: #333;
  font-family: "Open Sans",sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  margin: 0 0 20px 0;
  padding: 0 0 10px 0;

}

Pasting at CSS LINT online tool again we get no warnings anymore (apart from no errors):

One might also remove the redundant space chars at the end of each line that Firefox places when copy-pasting the style declarations. Notepad++ can do it via Edit / Blank Operations / Trim Trailing Space menu command:

Fix: Re-enable ClickOnce deployment at Mozilla Firefox

When you try to run a ClickOnce Windows application from Mozilla Firefox, on some machines you may see it try to save a .application (ClickOnce deployment manifest) instead of running the ClickOnce application installer/updater/launcher.

To fix that issue you can open Firefox add-ons dialog and search among available to download/install add-ons for "net framework assistant". From the results list select to install "Microsoft .NET Framework Assistant" (version 1.3.1 shown at the screenshot below).

You can try the ClickOnce installation process with ClipFlair‘s WebCapture tool.

Gotcha: must set document.location.hash only at end of page in Mozilla

I just came across a different behaviour between IE and Mozilla Firefox: scripts at the former seem to execute after the page has fully rendered, while the later they seem to execute when they’re met by the page parser or something like that.

The HTML script tag has a defer attribute for running scripts after page has rendered, but that is available only for script tags that load an external script, not for embedded scripts in the HTML page. So this seems like one of those different interpretations that usually plague "standards". 

So, at the following JSP code, I was creating a table of student entries with a named anchor (bookmark) at each of the entries (each named per student id), so that when coming back from another page to that one I could tell it to scroll down to a given student automatically.

The issue was that if I placed the script that set document.location.hash to the student id, then at IE it worked OK, but at Mozilla Firefox it just moved to the top of the page even though the URL at the address bar of the browser had the hash entry (e.g. #55555) at the end and would scroll down correctly if I pressed Refresh button there.

Moving the script to the end of the page made it work for both IE and Mozilla Firefox. Don’t you love HTML’s "debug everywhere"?

 

<%@ page contentType="text/html" session="true" pageEncoding="UTF-8" %>

<%
response.setHeader("Cache-Control", "no-cache, no-store"); //HTTP 1.1
response.setHeader("Pragma", "no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", -1); //prevents caching at the proxy server
%>

…

<%@ page import="javax.portlet.*" %>
<%@ page import="java.util.ResourceBundle" %>

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>

<%
  RenderRequest renderRequest = (RenderRequest) request.getAttribute("javax.portlet.request");
  RenderResponse renderResponse = (RenderResponse) request.getAttribute("javax.portlet.response");
          
…

  String studentId = (String)renderRequest.getAttribute(Constants.JSP_RENDER_STUDENTID);
  if (studentId == null) studentId = "";
…

  <%
       for(int i = 0; i < proposalsCount_supervisor; i++) {
        IProposalListItem proposal = proposals_supervisor.getProposalListItem(i); 
   %>
  <a name="<%=proposal.getStudentId()%>"></a>
   <div class="dissertation_subsection<%=(i%2)%>">

     <div>
     ….

   <%}%>

….

<script type="text/javascript"> <%– MAKE SURE THIS IS PLACED AT THE END, ELSE IT WON’T WORK AT MOZILLA –%>
document.location.hash="<%=studentId%>"; //scroll to previously examined student
<%– alert(document.location.hash); –%>
</script>