Getting all canonical IANA ids

While I fully intend to support all IANA time zone ids in my application, when users select a timezone, I want the options to only contain currently canonical zones.

How would I get a list containing only canonical IANA time zone id’s in javascript?

Preferably, I would like a way to achieve this using javascript apis (Intl/Temporal – even if they are not widely available yet), but I’m also interested in how this might be achieved with luxon, dayjs, or other packages.

I am aware of Intl.supportedValuesOf('timeZone'). However, this returns a list of primary time zone identifiers, which

uniquely identify the time zone [and] usually refer to a geographic area anchored by a city…

and as such are a concept distinct from canonical ids, as described in this note:

Note that the attribution of primary identifiers preserves the country code: for example, the IANA database records Atlantic/Reykjavik as an alias for Africa/Abidjan, but because they correspond to different countries (Iceland and Côte d’Ivoire, respectively), they are treated as distinct primary identifiers.

I am also aware of the tzdb package. However, this returns too narrow of a list. It’s rules for grouping are

• if the time zones are in the same country
• if the [DST and non-DST] offsets are the same

which, for example, means that America/Indiana/Indianapolis is grouped under America/New_York, despite being a distinct canonical id.

Getting canonical id for a given valid IANA id

How would I resolve an IANA time zone id to its canonical version (follow link if it is an alias, or return itself if it is already canonical)?

If I could figure this out, I could map the result of Intl.supportedValuesOf('timeZone') and take the distinct values.

This is also necessary to check time zone ids for semantic equality – America/Indianapolis should be considered equivalent to America/Indiana/Indianapolis, but since string equality obviously will fail, I need a way to resolve links.

My research thus far found this approach

function getCanonicalTimezone(ianaId) {
  try {
    const formatter = new Intl.DateTimeFormat('en', { 
      timeZone: ianaId 
    });
    return formatter.resolvedOptions().timeZone;
  } catch (error) {
    throw new Error(`Invalid timezone: ${ianaId}`);
  }
}

However, this doesn’t resolve aliases in every case. For example, Africa/Accra resolves to itself, even though it is an alias of Africa/Abidjan.

Bonus question / rant

Why does Temporal invent this new concept of primary time zone identifiers?

I understand that sometimes an alias is scoped to a country different than the id to which it links (as in the example I quoted), but then if they were intended to be treated differently, why would IANA have created the link relationship? Temporal is very subtly diverging from IANA in their terminology (and therefore behavior), and is setting up all but those who carefully read the documentation to be confused (and I can tell you from my experience over the last few weeks that llms are not up to speed on the distinction). Creating a new standard also has x-framework implications – e.g. in my case our api is not javascript so its lists will not match the front end if the front end is not following IANA standards.

I’m working with Angular forms and I’ve seen different approaches to form submission. Some developers use a (click) handler on a button to handle form submission, while others rely on (ngSubmit) on the element.
Here are two examples:

Common Angular approach:

<form (ngSubmit)="onSubmit()" #form="ngForm">
  <input name="example" ngModel required>
  <button type="submit">Submit</button>
</form>

Alternative approach:

<form>
  <input name="example" ngModel required>
  <button (click)="onSubmit()">Submit</button>
</form>

My Questions

• Are there technical differences between using (click)=”onSubmit()” and (ngSubmit)=”onSubmit()”?

• Can using (click) lead to unexpected behaviors?

Thanks!

I’m working on an Angular application and I’ve seen some developers avoid using (ngSubmit) on forms. Instead, they just add a (click) handler to the submit button, like this:

<form>
  <!-- form fields -->
  <button (click)="onSubmit()">Submit</button>
</form>

instead of a more typical approach :

<form (ngSubmit)="onSubmit()" #form="ngForm">
  <!-- form fields -->
  <button type="submit">Submit</button>
</form>

My questions:

• Is it considered bad practice to use a (click) handler instead of (ngSubmit) on a form?

• What are the downsides of doing so (validation, accessibility, native behavior, etc.)?

• Are there any valid scenarios where using (click) instead of (ngSubmit) makes sense?

It works either way, but I feel like using (click) might bypass Angular’s built-in validation and form behavior. I’d love to get some expert input on this.

Thanks!

I’m trying to make web camera with latency 50-100ms for real-time control purposes. The server is a python script, the client is WebRTC application running in Android Google Chrome, directly connected to the server (There is no switch or router between). No audio stream. It would be good if a frame is displayed as soon as received. Lagging and freezing is OK. The resolution is 1024×578 colorsubsampling=’420′, H.264, 50 FPS. My Android device supports hardware accelerated decoding. Hardware acceleration is on in the browser options.

The smallest latency I’ve achieved is 170 ms. I understand that it is called low latency for real live applications? but Is it possible to reduce latency more? The same application running in Desktop Google Chrome has 100 ms latency which is OK. I suppose that Android Google Chrome has minimum jitter buffer limit higher than Desktop one. Am I right?

My current code for establishing WebRTC connection and streaming the following

    public async runWebRTC() {
        const pc = this.pc;

        pc.addTransceiver('video', {direction: 'recvonly'});

        pc.ontrack = event => {
            this.video.nativeElement.srcObject = event.streams[0];

            pc.getReceivers().forEach(receiver => {
                if (receiver.track.kind === "video") {
                    try {
                        receiver.jitterBufferTarget = 10;
                        receiver.track.contentHint = "motion";
                    } catch (e) {
                    }
                }
            });

        };

        pc.onicecandidate = async e => {
            if (e.candidate === null) {
                const offer = pc.localDescription;
                try {

                    const response = await fetch('/offer', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(offer)
                    });

                    const answer = await response.json();

                    await pc.setRemoteDescription(answer);
                } catch (err) {
                    console.error('Error sending offer:', err);
                }
            }
        };

        // Create an offer to send to the server
        const offer = await pc.createOffer();
        await pc.setLocalDescription(offer);
    }

What can be done on client side to reduce latency?

(Using Next.js/React)

I have a Form with a custom autocomplete that is used to search a list of Users:

<Form action="">
   <button type="submit">Search</button>
   <input name="search" type="text"/>

   <!-- these are generated with a .map() -->
   <div>
      <button type="submit" name="search" value=1>User1</button>
      <button type="submit" name="search" value=2>User2</button>
      <button type="submit" name="search" value=3>User3</button>
   <div>
</Form>

When I search using the <input>, it correctly navigates the page to (for example, if searching ID = 3) /?search=3 which I then use server side.

I want to be able to use these buttons to select an autocomplete suggestion and send it in the Form action. When I click one of the buttons it does append /?search= to the URL but it completely ignores the value of the clicked button.

I’ve tried adding hidden <input> elements but it ends up grabbing all of the button‘s values and trying to use it in the query like: /?search=1,search=2,search=3.

How can I pass just the value of the clicked button to the Form action?

example link https://www.anytimemailbox.com/s/new-york-42-broadway

function main(splash)
  local button = splash:select('div[class="t-disc"]>a')
  assert(button) -- fail
end

But in the F12 developer tool console

>> document.querySelector('div[class="t-disc"]>a') 
<a href="#" onclick="thShowFullServicePlan11(4967);return false;">Full Details</a>

The doc https://splash.readthedocs.io/en/stable/scripting-ref.html#splash-select says

Using splash:select you can get the element that matches your specified CSS selector like using document.querySelector in the browser.

Is there some corner case where splash:select is different from document.querySelector? If so, is there one workaround?

I’m building an audio visualizer in Vue 3 using the Web Audio API. My setup uses Pinia for state management. Each track is an object with an audio property (created via new Audio(...)). The visualizer is a separate component (Visualizer.vue) that connects to the current track’s audio element and draws on a <canvas>.

Problems:

• The audio does not play when I click play.
• The progress bar in my player does not update, even though the
  store’s values are reactive and update correctly.
• The visualizer canvas is rendered, but nothing is drawn (no bars, no
  animation).
• No errors appear in the console.

Link to repo: https://github.com/kubakorniluk/audio-visualizer

Part 1 – Audio not playing

What I’ve tried and checked:

• The audio file paths are correct.
• The store’s currentTrack and isPlaying values update as expected.
• The visualizer code runs, but the canvas often stays blank.
• No errors in the browser console.
• Changing the canvas height to a number (not “auto”) doesn’t help.
• I call togglePlay(store.getCurrentTrack.id), nextTrack() and prevTrack() from a buttons in the Player component.

Store overview (tracks.js):

const tracks = ref([])
const currentTrack = ref(null)

...

 const setTracks = async () => {
    const files = import.meta.glob('@/assets/audio/*.wav');

    for (const path in files) {
      const fileModule = await files[path]();

      const audio = new Audio(fileModule.default)

      const track = {
        id: tracks.value.length,
        name: path.split('/').pop(),
        src: fileModule.default,
        audio: audio,
        isPlaying: false,
        volume: 1.0,
        currentTime: {
          total: 0,
          minutes: 0,
          seconds: 0
        },
        duration: {
          total: 0,
          minutes: 0,
          seconds: 0
        },
      }

      tracks.value.push(track);
      
      console.log(`Loaded: ${track.name}`, track);
      
    }

    currentTrack.value = tracks.value[0];

  }

  const setCurrentTrack = (id) => {
    tracks.value.forEach(track => {
      if (track.id === id) {
        track.isPlaying = !track.isPlaying;
      } else {
        track.isPlaying = false;
      }
    })
    currentTrack.value = tracks.value.find(track => track.id === id);
  }

const togglePlay = (id) => {
  const track = tracks.value.find(t => t.id === id);
  if (!track) return;

  // If the clicked track is already playing, pause it
  if (track.isPlaying) {
    track.audio.pause();
    track.isPlaying = false;
  } else {
    // Pause all other tracks
    tracks.value.forEach(t => {
      if (t.id !== id) {
        t.audio.pause();
        t.isPlaying = false;
      }
    });
    // Play the selected track
    track.audio.play();
    track.isPlaying = true;
    currentTrack.value = track;
  }
};

Next & Prev track functions:

 const nextTrack = () => {
    let id = currentTrack.value.id + 1;
    if (id >= tracks.value.length) {
      id = 0;
    }
    setCurrentTrack(id);
    console.log(currentTrack.value.id)
    togglePlay(id);
  }
  const prevTrack = () => {
    let id = currentTrack.value.id - 1;
    if (id < 0) {
      id = tracks.value.length - 1;
    }
    setCurrentTrack(id);
    console.log(currentTrack.value.id)
    togglePlay(id);
  }

Part 2 – Visualizer & Progress bar
The progress bar in Player.vue does not update as the audio plays, even though the store’s currentTime is reactive and updates in the console. The visualizer in Visualizer.vue (using Web Audio API and <canvas>) does not animate or show any bars, even when audio is playing.

What I’ve checked:

• The store’s currentTime and duration objects update correctly
  (confirmed by logging).
• The progress bar’s computed value changes in the console, but the UI
  does not update.
• The visualizer’s code runs, but the canvas remains blank.

Player.vue:

<script setup>
    
    ...

    const progress = computed(() => {
        const track = store.getCurrentTrack;
        if (track && track.duration.total > 0) {
            return (track.currentTime.total / track.duration.total) * 100;
        }
        return 0;
    });
</script>
<template>
    <footer class="player">
        <div class="progress">
            <Visualizer></Visualizer>
            <div class="progress-bar" :style="{ width: progress + '%' }">
                <FontAwesomeIcon 
                    class="progress-bar__icon" 
                    :icon="faCircle" 
                ></FontAwesomeIcon>
            </div>
        </div>
        <div class="settings">
            <div class="controls">
                <span class="controls__time">{{ time }}</span>
                <button class="controls__button" @click="() => store.prevTrack()">
                    <FontAwesomeIcon 
                        class="controls__button--icon" 
                        :icon="faBackwardStep" 
                        style="font-size: 1.5rem"
                    ></FontAwesomeIcon>
                </button>
                <button class="controls__button" @click="() => store.togglePlay(store.getCurrentTrack.id)">
                    <FontAwesomeIcon 
                        class="controls__button--icon" 
                        :icon="checkIsPlaying() ? faPause : faPlay"
                    ></FontAwesomeIcon>
                </button>
                <button class="controls__button" @click="() => store.nextTrack()">
                    <FontAwesomeIcon 
                        class="controls__button--icon" 
                        :icon="faForwardStep" 
                        style="font-size: 1.5rem"
                    ></FontAwesomeIcon>
                </button>
                <span class="controls__time">{{ checkDuration()  }}</span>
            </div>
        </div>
    </footer>
</template>

tracks.js:

  const setTracks = async () => {
     ...

      //update track duration
      audio.addEventListener("loadedmetadata", (event) => {
        let duration = audio.duration;
        let minutes = Math.floor(duration / 60);
        let seconds = Math.floor(duration % 60);
        track.duration.total = duration;
        track.duration.seconds = seconds;
        track.duration.minutes = minutes;
      });

      // update track position
      audio.addEventListener("timeupdate", (event) => {
        let time = audio.currentTime;
        let minutes = Math.floor(time / 60);
        let seconds = Math.floor(time % 60);
        track.currentTime.total = time;
        track.currentTime.seconds = seconds;
        track.currentTime.minutes = minutes;
      });
      audio.load();

      // Check if metadata is already loaded
      if (audio.readyState >= 1) {
        let duration = audio.duration;
        let minutes = Math.floor(duration / 60);
        let seconds = Math.floor(duration % 60);
        track.duration.seconds = seconds;
        track.duration.minutes = minutes;
      }

      tracks.value.push(track);

       console.log(`Loaded: ${track.name}`, track);
      
    }

    currentTrack.value = tracks.value[0];

  }

As you can in the screen Shedule a call button is not shown properly. Following are the code:

CSS:

.call-btn {
  background-color: #FF00C7;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s;
  font-weight: bold;
  display: inline-block;
  white-space: nowrap;
  min-width: 140px;
  text-align: center;
}

index.html code:

<a href="#call" class="call-btn">Schedule a Call</a>

I think this much code is enough. Thank you in advance

The Ace editor demo shows how you can show autocomplete for JavaScript, like when writing document.querySelector.

I created the most simple demo using the latest version of ace on codepen since this shows you what I’m seeing in my app as well: I can’t autocomplete or get a suggestion for things like document.querySelector or document.addEventListener which are some of the suggestions that do work fine in the ace tryout demo.

Here are two demo’s for you to compare:

• My demo is not suggesting what I need:
  https://codepen.io/goodbytes/pen/KwpGpEw?editors=1111

• While the official demo does suggest what I need: https://mkslanc.github.io/ace-playground/#hello-world

Give it a try by trying to autocomplete document.querySelector

Complete newbie with JavaScript, Dataform and BiqQuery so my current level right now is copy/paste from internet. Now however I have come across a problem I can’t find any suitable tips for.

I have added the package @google-cloud/bigquery to the package.json file, and installed it successfully by clicking “Install packages”:

{
    "dependencies": {
        "@dataform/core": "3.0.0",
        "@google-cloud/bigquery": "8.1.0"
    }
}

To test I have created a simple function in the file includes/columnFunctions.js:

function firstTest() {

    const {BigQuery} = require('@google-cloud/bigquery');
    const bigquery = new BigQuery();
    return "XX";

}

module.exports = { firstTest }

Then calling the function in an SQLX file:

config {type: "view"}


select ${columnFunctions.firstTest()} as X
from ${ref("dummysrc1")}

This returns an error: “Failed to resolve events”

The error is generated by the first statement const {BigQuery} = require('@google-cloud/bigquery'); so I’m suspecting some sort of access or authorization problem, but have no idea where to start looking…

In my web app (based on Hanami 2.2) I have ContentSecurityPolicy enabled to allow inline scripts to run using nonce strategy

config/app.rb

config.actions.content_security_policy[:script_src] = "'self' 'nonce'"

Because of that when the page a loaded in the browser, the CSS and JS tags (included using hanami’s helper methods stylesheet_tag and javascript_tag) in the DOM have a nonce attached (like it can be seen in snippet extracted from the loaded page source)

<html lang='en'>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
    <meta charset='UTF-8'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <meta name="csrf-param" content="_csrf_token"><meta name="csrf-token" content="4111c46fb6a45da9dfea2ccd8521256f7f1c3852fbedc890d2ed56dc4111b7c9">
    <link href="/assets/app.css" type="text/css" rel="stylesheet" nonce="iWzsbPAkiB//CnB0">
  </head>
  <body>
    ...
    ....
    <script src="/assets/app.js" type="text/javascript" nonce="iWzsbPAkiB//CnB0"></script>
   </body>
</html>

Now I have a page on which I have a simple form containing two text-fields.
The form needs to be submitted through jQuery AJAX API and the response needs to render JS code defined in following file.

app/templates/home/create.js.haml

%script{ nonce: content_security_policy_nonce }
  :plain
    alert("Hello");

This is similar to how a JS response is rendered in Rails as illustrated with file app/views/users/create.js.erb at https://guides.rubyonrails.org/v6.0/working_with_javascript_in_rails.html#server-side-concerns .

Note that the nonce set on the script tag in js.haml file above should be the same as set on the <script src="/assets/app.js" tag when the page containing form was loaded. That’s because for generating nonce I am using a request’s session-id.

When the form is submitted through AJAX, the Request contains following values for mentioned headers

Accept */*
Content-Type application/x-www-form-urlencoded; charset=UTF-8

and the Response contains following values for mentioned headers

Content-Security-Policy base-uri 'self';child-src 'self';connect-src 'self';default-src 'none';font-src 'self';form-action 'self';frame-ancestors 'self';frame-src 'self';img-src 'self' https: data:;media-src 'self';object-src 'none';script-src 'self' 'nonce-iWzsbPAkiB//CnB0';style-src 'self' 'unsafe-inline' https:

Content-Type application/javascript; charset=utf-8

and the Response’s body contains following

<script nonce='iWzsbPAkiB//CnB0'>
alert("Hello");
</script>

But that inline script doesn’t execute. In browser’s console I see following error

Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “script-src 'self' 'nonce-iWzsbPAkiB//CnB0'”

Despite the identical nonce in the inline script why it is not executing?

If I change my CSP policy to following (the easiest and frequently seen suggested for the problem I am facing)

config.actions.content_security_policy[:script_src] = "'self' 'unsafe-inline'"

and update app/templates/home/create.js.haml in following manner

:plain
  alert("Hello");

then when I submit form, the response’s body contains

alert("Hello");

and it does gets executed prompting an alert. But using ‘unsafe-inline’ is as good as have no CSP policy set. So I don’t prefer it.

Also if I update the create.js.haml code to following

:javascript
  alert("Hello");

then the response’s body contains

<script>
alert("Hello");
</script>

and for it I see following error in browser’s console:

Uncaught SyntaxError: expected expression, got '<'

In this case why the script didn’t executed?

I found various posts related to my problem few of which I have listed below but trying out solutions based on them didn’t worked for me.

How to execute inline scripts retrieved from a JQuery Ajax request when content security is enabled in php

Inline Javascript not executed

‘self’ scripts being blocked from loading, but when I use the nonce they work?

Injected script doesn’t execute even with script tags “fixed” up

https://security.stackexchange.com/q/240353

https://manikandanmv.wordpress.com/2008/09/26/how-to-execute-the-scripts-in-ajax-responsehtml-with-scripts/

https://webdeveloper.com/community/138830-run-javascript-after-ajax-load/

https://www.sitepoint.com/community/t/basic-javascript-not-working-after-ajax-call/224091

https://support.google.com/tagmanager/thread/35871504/how-to-include-nonce-attribute-in-custom-script?hl=en

I am struggling since hours to get past the problem but nothing I find seems to be helping out.

Thanks.

The task is to create a fully dynamic and independent component (Tooltip) that could be programmatically rendered/destroyed in a certain place in the DOM (Dashboard) by a non-host component (Calendar). It is a tooltip shown on hover inside of Calendar (or over the calendar to be precise). It can’t be added to the DOM as a child of Calendar though due to certain CSS limitations with position: fixed + overflow: auto.

Here’s the basic structure I want:

<app-dashboard>
  <app-whatever>
    <app-random>
      <app-calendar>I programmatically add a tooltip to my distant ancestor on hover</app-calendar>
    </app-random>
  </app-whatever>

  <app-tooltip>I am programmatically rendered and destroyed</app-tooltip>
<app-dashboard>

After searching the internet and the docs, I now think I have to use createComponent() inside Calendar component.

I’ve tried to use the standalone createComponent() function as well as viewContainer.createComponent(). The latter doesn’t allow to set a host element.

The former allows for that, but it has another issue: when I destroy Tooltip using this.tooltipInstance.destroy(), it deletes the host element too.

Here’s my setup:

<app-dashboard>
  <app-wrapper>
    <app-section>
      <app-calendar>I programmatically add a tooltip to my distant ancestor on hover</app-calendar>
    </app-section>
  </app-wrapper>

  <!-- I am wiped out out on mouse leave :( -->
  <div class="event-tooltip-host">
    <app-tooltip>I am programmatically rendered and destroyed</app-tooltip>
  </div>
<app-dashboard>

eventMouseEnter({ event, el }) {
  this.tooltipInstance = createComponent(TooltipComponent, {
    environmentInjector: this.injector,
    hostElement: document.querySelector('.event-tooltip-host')!,
    bindings: [inputBinding('event', () => event), inputBinding('element', () => el)]
  })

  this.appRef.attachView(this.tooltipInstance.hostView)
  this.tooltipInstance.changeDetectorRef.detectChanges()
}

eventMouseLeave() {
  this.appRef.detachView(this.tooltipInstance.hostView)
  this.tooltipInstance.destroy()
}

It appears impossible to fully control dynamic rendering of a component back and forth from within a totally random component.

My backup plan is to do it from Dashboard component via some app-level actions which I can listen to in any component, but I would really expect Angular to have a better way to do it.

So, the question is how do I avoid destroying the wrapper, <div class="event-tooltip-host">, and only destroy <app-tooltip>?

How do I get my discord token from the console? I want to be able to run a script and get the token out.

I’ve tried googling, but the solutions are always outdated.

I’m developing a Chrome extension that stores vocabs into a vocabulary list in chrome.storage.local. My extension currently uses about 2MB of storage (well below the 10MB limit – then i added unlimitedStorage in the permission, still doesnt work), but I’m running into a strange issue:

Currently i have 2692 items in the list. When I add a new item, it appears in the list, and I can see it when i print the entire list: It has 2693 items in the list
After a while (usually 10seconds to 1 minute), the newly added word disappears from the list and from storage.somehow its just gone
The storage usage remains around 2MB, so I don’t think I’m hitting the quota. And i already added unlimitedStorage “permissions”: [“storage”,”unlimitedStorage”,],

I don’t see any errors in the console, and the word is definitely being saved initially. I did not made any change that could have called issue for a while – It has been working and adding fine for like 4~5 months until recently.
I’ve checked my code and confirmed that:

I always use chrome.storage.local.get and chrome.storage.local.set to read and write the vocab list.
I don’t intentionally delete or filter out items after adding them.
The issue happens even if I only have one tab open.

I have a React ViteJS project deployed on Netlify and working fine with the subdomain. Recently thought of adding a custom domain and added Netlify Name Servers to custom DNS in Namecheap.
Let’s say it’s project-name.netlify.app and new domain is mysite.xyz.

I want to redirect the subdomain visitors to the new domain. tried adding a _redirects to the public folder (/public/_redirects).

In the _redirects file, I’ve added the following,

# Redirect only when accessed via Netlify subdomain
/*  https://www.mysite.xyz/:splat  301!  Host=project-name.netlify.app

this seems not working even though the build logs shows as 1 redirect rules processed.
But when I remove the Host=project-name.netlify.app, the browser shows an error page with too many redirects.

tried adding redirect to the netlify.toml too. but neither works. My netlify.toml file is as follows,

[functions]
  directory = "netlify/functions"

[[redirects]]
  from = "/*"
  to = "https://mysite.xyz/:splat"
  status = 301
  force = true
  conditions = { Host = "project-name.netlify.app" }

didn’t add both the _redirects and [[redirects]] in netlify.toml together as it’s not recommended.

Both project-name.netlify.app and mysite.xyz loads the site fine!

How do I solve this redirect issue?