The Goal

I receive a weather forecast from the NWS that has a very particular HTML formatting that I want to preserve. A forecast will always change in both its length and its width. I want to scale the font size of the text to always fit onto a mobile screen, even if the text is really small, and the length of each line should be preserved. The formatting of the text should never change (e.g. lines should never wrap).

What the Output Should Look LIke

My Current Solution

My current solution is using an SVG, but I’m not quite getting the formatting i’m looking for.

function getFireWeatherForecast() {
  /* Sample API response */
  return "<h1>Fire Weather Discussion</h1><p>FNUS56 KMFR 252130<br>FWFMFR<p>Fire Weather Forecast for southern Oregon and northern California<br>National Weather Service Medford, OR<br>230 PM PDT Fri Jul 25 2025<p>...RED FLAG WARNING REMAINS IN EFFECT UNTIL 11 PM PDT THIS<br>EVENING FOR ABUNDANT LIGHTNING ON DRY FUELS FOR FIRE WEATHER<br>ZONES 280, 281, 282, 284, 285, 624, AND 625...<p>.DISCUSSION...Another episode of scattered to numerous<br>thunderstorms is expected this evening, focused upon northern <br>California with activity extending into south central Oregon. <br>Storms will be slow-moving and produce rain, but the amount of <br>lightning is expected to exceed critical thresholds. Isolated <br>late day storms are possible for portions of the area Saturday <br>through Monday. The next trough may bring an enhanced risk of<br>thunderstorms during mid-week.</p><h1>Fire Weather Forecast for CAZ282</h1><p>CAZ282-CAZ282-261215-<br>Shasta-Trinity National Forest in Siskiyou County-<br>230 PM PDT Fri Jul 25 2025<p>...RED FLAG WARNING IN EFFECT UNTIL 11 PM PDT THIS EVENING...<p>.Tonight...<br>* Sky/weather...........Mostly cloudy with scattered showers and <br>     thunderstorms until midnight, then partly cloudy. Haze after <br>     midnight. <br>* Min temperature.......45-55. <br>* Max humidity..........85-100 percent valleys and 65-80 percent <br>     ridges. <br>* 20-foot winds......... <br>*     Valleys/lwr slopes...Southeast winds 5 to 10 mph. Gusts up to 25 <br>         mph in the evening. <br>*     Ridges/upr slopes....Southeast winds 6 to 10 mph with gusts to <br>         around 25 mph shifting to the southwest 5 to 6 mph after <br>         midnight. <br>* Mixing Height.....................4000-7200 ft AGL until 2100, <br>     then 100-1600 ft AGL. <br>* Chance of lightning...............44 percent. <br>* Chance of wetting rain (.10 in)...30 percent. <br>* Chance of wetting rain (.25 in)...17 percent. <p>&&<br>                TEMP / HUM   / POP <br>Mount Shasta      51    92    40<br>.EXTENDED...<br>.SUNDAY NIGHT...Mostly clear. Lows 45 to 55. West winds 5 to<br>8 mph. <br>.MONDAY...Mostly clear. Highs 75 to 85. Light winds becoming<br>southwest 5 to 6 mph in the afternoon and evening.<p>";
}

function createForecastSVG(forecast) {
  const SVG_NS = "http://www.w3.org/2000/svg";
  const XHTML_NS = "http://www.w3.org/1999/xhtml";

  // 1. SVG shell
  const svg = document.createElementNS(SVG_NS, "svg");
  svg.setAttribute("preserveAspectRatio", "xMinYMin meet");

  // 2. foreignObject
  const foreignObject = document.createElementNS(SVG_NS, "foreignObject");
  svg.appendChild(foreignObject);

  // 3. XHTML <div> that actually holds the text
  const div = document.createElementNS(XHTML_NS, "div");
  div.innerHTML = forecast;
  foreignObject.appendChild(div);

  // 4. Measure content size once the browser has rendered a frame
  requestAnimationFrame(() => {
    const forecastWidth = div.scrollWidth;
    const forecastHeight = div.clientHeight;

    foreignObject.setAttribute("width", `${forecastWidth}px`);
    foreignObject.setAttribute("height", `${forecastHeight}px`);
    svg.setAttribute(
      "viewBox",
      `0 0 ${forecastWidth} ${forecastHeight}`
    );
  });

  return svg;
}

document.getElementById("forecastForm").addEventListener("submit", async (formSubmitEvent) => {
  formSubmitEvent.preventDefault();

  const fireWeatherForecast = getFireWeatherForecast();

  // Write the output text to the page
  let forecastWrapper = document.getElementById("forecast-card");

  forecastWrapper.innerHTML = ""; // clear previous forecast
  const svg = createForecastSVG(fireWeatherForecast);
  forecastWrapper.appendChild(svg);
  forecastWrapper.style.visibility = "visible";
});

#forecast-card {
  /* Positioning inner content styles */
  visibility: hidden;
  display: block;
  overflow-x: scroll;
  overflow-y: scroll;

  /* Styling for the look of the card */
  margin: 2rem auto 0 auto;
  background: rgba(30, 32, 35, 0.8);
  padding: 1.5rem;

  /* HTML content related styles */
  font-family: monospace;
  font-size: 0.5rem;
  color: #e1e1e1;
  white-space: pre; /* Preserve exact formatting */
}

.forecast-card svg {
  max-width: 100%;
  display: inline-block;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" rel="stylesheet"/>

<form id="forecastForm" class="block" action="#">
  <div class="button-group">
    <button id="coordinates-submit" class="button" type="submit">Submit</button>
  </div>
</form>

<!-- SVG will be injected into this div -->
<div id="forecast-card" class="content"></div>

Current Issues

• Lines wrap
• The height of the card doesn’t match the height of the text (the card height is longer)

On a laptop, when you scroll around on a webpage, after you let go of the scrollbar, the webpage will continue scrolling for a short amount of time.
The scrolling will gradually slow down to a stop after you let go, as if the scrolling is slippery.
In my opinion, this is nice if you need to quickly scroll somewhere.

Although, in my case this is annoying. I’m making a paint editor where you can scroll to change brush size. It would be much nicer for the user if the scrolling immediately stopped.

So, I’m wondering if there’s a way to sense when the scrolling actually stops, or to prevent the behaviour of it on an element. Intrestingly, when holding CTRL it does the desired effect.

I have tried using preventDefault() but that seems to throw an error. Also, if this is possible with just CSS, mention it!

Example code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="scrolled_element" style="height: 100px; overflow-y: scroll;">
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
        Scroll me! <br>
    </div>
    Scrolling: <span id="scrolling"></span>
    <script>
        let scrolling;
        const scrollingHTML = document.querySelector("#scrolling");
        document.querySelector("#scrolled_element").addEventListener("wheel", e => {
            scrolling = true;
        }, {passive: true});
        setInterval(() => {
            scrollingHTML.innerHTML = scrolling;
            scrolling = false;
        }, 50);
    </script>
</body>
</html>

I’m tempted to pick up an old project of mine which already has a whole lot of the code needed for data flow analysis, SSA and concretizing a variables value at any point P in the program. It uses type inference to statically derive values for computable variables.

Since I could just use babel to generate AST for any JS/TS Code, I’d just need to adapt the CFG conversion, data flow and interpretation. Also my type system might be too improvised, but I think it would be a fun exercise to write an abstract interpreter for my favorite language.

Is this something the JS ecosystem needs. I’d only invest the effort if there’s an actual use for it.

Are there any available abstract interpreters for ES6/TS?

What problems would an abstract JavaScript/Typescript interpreter solve that aren’t covered by modern JS/TS compilers?

I have a paper formally describing the algorithms needed and would implement these algorithms in an attempt to fully cover abstract interpretation of a CFG and concretization of values.

My implementation was roughly based on these papers, albeit there’s still a lot of work to do in order to fully cover all possible paths of a CFG.

https://ics.uci.edu/~lopes/teaching/inf212W12/readings/rep-analysis-soft.pdf

https://dl.acm.org/doi/10.1145/512950.512973

I’m tempted to pick up an old project of mine which already has a whole lot of the code needed for data flow analysis, SSA and concretizing a variables value at any point P in the program. It uses type inference to statically derive values for computable variables.

Since I could just use babel to generate AST for any JS/TS Code, I’d just need to adapt the CFG conversion, data flow and interpretation. Also my type system might be too improvised, but I think it would be a fun exercise to write an abstract interpreter for my favorite language.

Is this something useful for the JS world and worth the implementation effort?

Are there any available abstract interpreters for ES6/TS?

I have a paper formally describing the algorithms needed and would attempt to implement the described approaches of abstractly interpreting a CFG and concretizing values.

If you’re interested in software analysis, you might find these papers useful to read.

https://ics.uci.edu/~lopes/teaching/inf212W12/readings/rep-analysis-soft.pdf

https://dl.acm.org/doi/10.1145/512950.512973

I’m trying to create independent modules in JavaScript where I can add new functionality without modifying the original class.
My simplified version:

class adminMenu extends contextMenu {
    handleContextMenu(event) {
        if (fileManager.WindowElement.classList.contains('visible')){
            return;
        }
        super.handleContextMenu?.(event);
        this.showOptions();
    }
}

//and in other file:
class fileManager {
    show() {}
    hide() {}

}

And if I don’t include fileManager in a particular project, parts of adminMenu become useless. This doesn’t seem ideal because it results in redundant or unnecessary code when I don’t need certain functionality.

What I want is to structure my modules so that when I include a file (e.g., containing fileManager), it can modify how adminMenu.handleContextMenu() behaves without modifying adminMenu directly.

It seems like there must be a cleaner, more modular approach. For example, in GSAP, after importing a module, we can simply do:gsap.registerPlugin(moduleName); but I’m unsure how to implement something like this in my case.

i want setup a paypal donation button in my website,
about oncomplete: there is no example anywhere.
could u tell me how to get that data after payment and how to send the custom message immitted by user (cm) to a PHP script?

   <body>
     <div id="paypal-donate-button-container"></div>
    
      <script>
       PayPal.Donation.Button({
           env: 'sandbox',
           hosted_button_id: 'YOUR_SANDBOX_HOSTED_BUTTON_ID',
           // business: 'YOUR_EMAIL_OR_PAYERID',
           image: {
               src: 'https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif',
               title: 'PayPal - The safer, easier way to pay online!',
               alt: 'Donate with PayPal button'
           },
           onComplete: function (params) {
               // Your onComplete handler
           },
       }).render('#paypal-donate-button-container');
    </script>
    </body>

• tx Transaction ID for the transaction
• st Transaction status
• amt Transaction amount
• cc Currency code
• cm Custom message
• item_number Purpose configured for the transaction
• item_name Program
  selected by the donor during the transaction

I have an array of “shift times” and “absence times”, and I’m trying to to subtract the absence time from the corresponding shift time via nested loop, to return the available shift times minus any absence time.

For example

• there’s an absence that starts at 09:00 and finishes at 09:30 and
• the first shift time starts at 08:00 and finishes at 10:00.

The code subtracts the absence from the shift time and returns these two items:

1. starts at 08:00 and finishes at 09:00
2. starts at 09:30 and finishes at 10:00

I wonder if there is a simpler way to subtract the absences from the shifts times, but I’ve been trying to do so without success.

Also, my code does not returns the correct output. At this moment, the code retrurns:

[
  { start_time: '08:00', finish_time: '09:00' },
  { start_time: '09:30', finish_time: '10:00' },
  { start_time: '10:30', finish_time: '11:00' },
  { start_time: '12:30', finish_time: '16:00' },
  { start_time: '17:00', finish_time: '17:30' }
]

but the results should look like this:

[
  { start_time: '08:00', finish_time: '09:00' },
  { start_time: '09:30', finish_time: '10:00' },
  { start_time: '10:30', finish_time: '11:00' },
  { start_time: '12:30', finish_time: '16:00' },
  { start_time: '17:00', finish_time: '17:30' },
  { start_time: '19:00', finish_time: '20:00' }
]

My code is here:

const arranged_shifts = [{
    'start_time'  : '08:00',
    'finish_time' : '10:00'
},
{
    'start_time'  : '10:30',
    'finish_time' : '16:00'
},
{
    'start_time'  : '17:00',
    'finish_time' : '18:00'
},
{
    'start_time'  : '19:00',
    'finish_time' : '20:00'
}];

const absences = [{
    'start_time'  : '09:00',
    'finish_time' : '09:30'
},
{
    'start_time'  : '11:00',
    'finish_time' : '12:30'
},
{
    'start_time'  : '17:30',
    'finish_time' : '18:00'
}
];

const available_times = [],
         add_time        = (start_time, finish_time) => {
    available_times.push({
        'start_time'  : start_time,
        'finish_time' : finish_time
    });
};

const get_time_difference = (a_time, b_time) => {
    return Date.parse('1970/01/01 ' + a_time) - Date.parse('1970/01/01 ' + b_time);
};

absences_loop : for (const absence of absences){
    shift_loop : for (const arranged_shift of arranged_shifts){
        const start_time_difference  = get_time_difference(arranged_shift.start_time, absence.start_time),
                    finish_time_difference = get_time_difference(arranged_shift.finish_time, absence.finish_time);

        if (start_time_difference === 0 && finish_time_difference > 0){
            add_time(absence.finish_time, arranged_shift.finish_time);
    }
        else if (start_time_difference < 0 && finish_time_difference > 0){
            add_time(arranged_shift.start_time, absence.start_time);
            add_time(absence.finish_time, arranged_shift.finish_time)
        }
        else if (finish_time_difference === 0 && start_time_difference < 0){
            add_time(arranged_shift.start_time, absence.start_time);
        }
  }
}

console.log(available_times);

I am trying to use EWS API to set OOF on a webmail account hosted on OVH (Hosted) Exchange.

I am getting 401 status code every time whereas my email and password are good.

When trying here : https://testconnectivity.microsoft.com/tests/EwsTask/input
It works well with the same credentials when I check “Ignored SSl”

Any idea please ?

Here is my code

import {
  ExchangeService,
  ExchangeVersion,
  Uri,
  OofSettings,
  TimeWindow,
  OofReply,
  WebCredentials,
  DateTime,
} from 'ews-javascript-api';

function createExchangeService(username: string, password: string) {
  const exch = new ExchangeService(ExchangeVersion.Exchange2016);
  exch.Credentials = new WebCredentials(username, password);
  exch.Url = new Uri(`https://${process.env.MAIL_HOST}/EWS/Exchange.asmx`);
  return exch;
}

try {
    const exch = createExchangeService(username, password);

    const oofSettings = await exch.GetUserOofSettings(username);
    res.json({
      status: oofSettings.State,
      internalReplyMessage: oofSettings.InternalReply?.Message || '',
      externalReplyMessage: oofSettings.ExternalReply?.Message || '',
      externalAudience: oofSettings.ExternalAudience,
      scheduledStartDateTime: oofSettings.Duration?.StartTime,
      scheduledEndDateTime: oofSettings.Duration?.EndTime,
    });
  } catch (err: any) {
    console.error('Error getting OOF settings', err);
  }

Thank you

Can someone check if this is a visual studio error or if I made a mistake somewhere?

Desired scenario: first request in each of .http files is login request.
Other requests consume the token from the login request variable.

http-client.env.json:

{
  "$shared": {
      "login": "<login>",
      "pass": "<pass>" 
  },
  "local": {
    "host": "<url:localhost>"
  },
  "dev": {
    "host": "<url:dev>"
  }
}

MyRequests.http:

### Run Login before next queries. 
// @name login
POST {{host}}/api/auth/login HTTP/1.1
Content-Type: application/json

{
    "Login": "{{login}}", 
    "Password": "{{pass}}"
}

### GET current-user
GET {{host}}/api/todos
Authorization: Bearer {{login.response.body.$.token}}

Error:

(2,25): error HTTP0012: Unable to evaluate expression 'login.response.body.$.token'.

Everything works if I use constants directly in the .http file for login-password instead of environment variables.

In general, the goal is to store the login and password in a separate file that is not under source control, but without using like Azure or others.

So I have a web form that compares a date of loss to different other dates for validation. Most work such as the lessThan and greater than. However, one that will not work is equal. When it says that the DateOfLoss (DOL) cannot be less than the effective date it also includes the actual effective date. For our purposes, the DOL Can be the same as the effective date so I tried the following:

{
  "name": "dateofloss-can-be-equal-to-effective-date",
  "conditions": {
    "all": [
      {
        "fact": "DateOfLoss",
        "operator": "equal",
        "value": {
          "value": {

            "fact": "EffectiveDate"
          }
        }
  }
    ]
  },
  "event": {
    "type": "date-of-loss-can-be-equal-to-effective-date",
    "params": {
      "message": "The Date of Loss can be equal to the policy effective date.",
      "instructions": ""
    }
  }
},

And when we try DateOfLoss Cannot be greaterThan the Expiration date it does Not include the ExpirationDate in the error and it needs to. I tried equal with this one also and it does not work. What am I missing? This is new to me and I have tried to figure this out. Thanks in advance.

{
  "name": "dateofloss-cannot-be-same-as-expiration-date",
  "conditions": {
    "all": [
      {
        "fact": "DateOfLoss",
        "operator": "equal",
        "value": {
          "fact": "ExpirationDate"
        }
      }
    ]
  },
  "event": {
    "type": "date-of-loss-cannot-be-same-as-expiration-date",
    "params": {
      "message": "The Date of Loss cannot be the same as the policy expiration date.",
      "instructions": ""
    }
  }
},

around 2017 I wrote a SSE (PHP) script and the javascipt code. Worked fine with PHP-5 + HTTP/1 and the firefox of that era.

Same code now it does not work with Firefox-140 esr or latest Chrome with PHP-8.2 + HTTP/2. I have time-out after 60 seconds.

Also tried the simplest SSE example from lucidar.me, zip. If I remove the while loop something that I think it’s bad, it’s working. In that case the JavaScript makes requests every 5 seconds. I think this defeats the purpose of SSE.

The code with while works fine with curl but not with browsers.

My implementation and the rational of SSE is that the server decides when to send the data, not the client. Right?

It changed something in JavaScript I guess, in browsers, or I miss something? It’s the HTTP/2 the problem?

The code works with curl like that (while version)

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache, no-transform');
header('X-Accel-Buffering: no');
header('Access-Control-Allow-Origin: *');
set_time_limit(0);
@ini_set('zlib.output_compression', 0);
@ob_implicit_flush(true);

// Loop until the client close the stream
while (true) {

  // Echo time
  $time = date('r');
  echo "data: The server time is: {$time}nn";
 
  // Flush buffer (force sending data to client)
  @ob_flush();
  flush();

  // Wait 2 seconds for the next message / event
  sleep(2);
}
?>

I am trying some things out regarding the reporting API. I have set up a simple HTML page that registers a ReportingObserver like so:

const reportObserver = new ReportingObserver((reports) => alert(JSON.stringify(reports)),
                                             { buffered: true });
reportObserver.observe();

This page also contains an image tag like this:

<img src="https://other.mydomain/image.png">

This page is requested by the browser as https://main.mydomain/test.html. The CSP headers of this page are set such that the request to the image is not blocked. For this the Content-Security-Policy header of the HTML page contains img-src 'self' https://other.mydomain/.

Now I block the loading of the image with the following headers returned by the image:

Access-Control-Allow-Origin: https://other.mydomain/
Cross-Origin-Resource-Policy: same-origin

The browser reports that the image cannot be loaded since the origins do not match, which is correct. However, nothing is reported via the ReportingObserver in the web page.

I also tried to have the violation report sent to an endpoint on my server. For this, the response for the image also contains the following headers:

Report-To: {"group":"default","max_age":10886400,"endpoints":[{"url":"https://main.mydomain/reports"}]}
Reporting-Endpoints: default=https://main.mydomain/reports

But nothing is being posted to this endpoint regarding this violation.

I am testing this using Google Chrome, starting it from the command line with the command line option --short-reporting-delay to make sure that reports are sent quickly after an incident occurs. In the test webpage I also generate other violations and those are being sent to the reporting endpoint and are also caught by the ReportingObserver.

Is it actually possibly to have a report generated when there is a mismatch in origin upon a request? If it is possible, what am I missing?

This is the part of the code in the Django + JavaScript Todo App that is responsible for deleting a note. I need a csrftoken for this, but the JS is showing me an error in the console. What did I do wrong and how can I fix it?

    Uncaught ReferenceError: getCSRFToken is not defined
    at HTMLButtonElement.<anonymous> (main.js:100:30)

    const delUrl = document.body.dataset.delNoteUrl;
  
    deleteBtn.addEventListener("click", (e) => {
      e.preventDefault();
  
      if (e.target.classList.contains("delete-btn")) {
        const parentLi = e.target.closest(".todo__note");
        const noteId = parentLi.getAttribute("data-id");

        fetch(`${delUrl}/${noteId}`, {
            method: "POST",
            headers: {
              "X-CSRFToken": getCSRFToken(),
            },
          })
            .then((response) => response.json())
            .then((data) => {
              if (data.status == "success") {
                parentLi.remove();
              }
            });
      }
    });```

Here is HTML, if need.

<ul class="todo__list">
  {% for note in notes %}
  <li class="todo__note flex" data-id="{{ note.id }}">
    <div>
      <input type="checkbox" />
      <span>{{ note.text }}</span>
    </div>
    <div class="delete__edit">
      <button class="edit-btn" id="editBtn">
        <img src="{% static 'images/edit.svg' %}" alt="" />
      </button>
      <button class="delete-btn" id="deleteBtn">
        <img src="{% static 'images/delete.svg' %}" alt="" />
      </button>
    </div>
  </li>
  {% endfor %}
</ul>

I am using the theia sticky sidebar, but this is Jquery Dependend plugin. But it also have a vanilla JS version in CDN. But not working without Jquery. How can I use it without Jquery? and will get same functionality. I tried in many ways, but it always requires Jquery. But I do not want to use Jquery, cause my website is without Jquery Dependency.

Here is my approach.

$(document).ready(function() {
  $('.leftSidebar, .content, .rightSidebar')
    .theiaStickySidebar({
      additionalMarginTop: 30
    });
});

.content {
  width: 50%;
  float: left;
  position: relative;
}

.leftSidebar {
  width: 25%;
  float: left;
  padding: 0 30px 0 0;
  position: relative;
}

.rightSidebar {
  width: 25%;
  float: right;
  padding: 0 0 0 30px;
  position: relative;
}

<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/theia-sticky-sidebar.min.js"></script>
<div class="header">
  <div class="wrapper wrapperThreeColumns">
    <div class="leftSidebar">
      <div class="theiaStickySidebar">
        <div class="box">
          <h2>Left Sidebar</h2>

          <p>
            Gloriatur neglegentur ea mel. Eu pro option moderatius, elitr nonumy molestiae
            ad nam.
          </p>
        </div>
      </div>
    </div>

    <div class="content box">
      <div class="theiaStickySidebar">
        <h2>Content</h2>

        <p>
          Lorem ipsum dolor sit amet, ei vix dicit possim. Pro principes urbanitas ei, his no
          omittam inimicus, qui apeirian honestatis philosophia ei.
        </p>
      </div>
    </div>

    <div class="rightSidebar">
      <div class="theiaStickySidebar">
        <div class="box">
          <h2>Right Sidebar</h2>

          <p>
            Decore aliquando has in, mel exerci inermis an. Phaedrum consequat cum ex, harum
            legere ad qui.
          </p>
        </div>
      </div>
    </div>
  </div>

Since I can do *ngif on both why even use ng-container and just use div everywhere instead? I know it has something to do with the dom not being as cluttered but I actually want to know if that is true and how a bigger dom impacts the app.