User Alicia Sykes - Stack Overflow

Answer by Alicia Sykes for How can I format telephone numbers in input fields using JavaScript?

2019-04-27T15:52:20Z

There is actually an input type of tel, which will save you a lot of hassle. Using <input type="tel" ... would be the correct approach, and it also allows you to specify a regex to validate the phone number to your specification, using the pattern attribute.

For example:

<input type="tel" >

It is worth noting, that you will still need server-side validation, of course. You should use the same regex on both client, and server.

This is widely supported now, but if you are worried, see this answer.

Answer by Alicia Sykes for Is visual studio standard conformant when it seemingly doesn't elide a copy when calling a function

2025-06-14T23:19:58Z

As mentioned by @StoryTeller - Unslander Monica, that MSVC behavior is non‑conformant, i.e it's a compiler bug

The workaround would be to define a trivial copy constructor (e.g. Foo(const Foo&) = default;). Or, update to the latest MSVC version (C++17)

Since C++17, prvalue temporary materialization is deferred into the direct constructor of the function parameter—so in:

foo(Foo());

there should be only one Foo object constructed, namely foo's param, and therefore only one destructor call

GCC/Clang follow that - your program prints a single ~Foo.

MSVC prints:

~Foo
~Foo

Meaning it creates two instances: one temporary in main, one for foo's parameter.

This breaks the C++17 guarantee: the temporary shouldn't materialize independently - so MSVC is failing to implement the standard's prvalue semantics correctly.

Answer by Alicia Sykes for How to autocomplete brackets in Vim only in some cases

2025-06-14T23:09:36Z

You could get Vim to handle this smartly using an expression mapping, like with pure Bash-like Vimscript. So it checks whether you're inside a string before deciding what to do.

For example::

" Only enable this when editing Rust
autocmd FileType rust inoremap <expr> { s:SmartBrace()

function! s:SmartBrace()
  " get syntax groups at cursor (before the "{")
  let syn = synstack(line('.'), col('.')-1)
  " get their names
  let names = map(syn, 'synIDattr(v:val, "name")')
  " check for string context (contains "string")
  if !empty(filter(names, 'v:val =~# "string"'))
    " inside a string: just insert {} and place cursor inside
    return '{}'.nr2char(27).'i'
  endif
  " not in a string: expand a block with newline
  return '{\<CR>}'.nr2char(27).'ko'
endfunction

So, this should...

inoremap <expr>: inserts code dynamically based on context
synstack() gives syntax IDs under cursor; synIDattr(...,"name") converts them to names
We search for "string" in those names. Ifit matches, we’re inside a string
Inside string: produce {}, escape to normal mode, then i to position cursor inside
Outside string: do your original block expansion, open bracket, newline, close bracket, and go inside

Answer by Alicia Sykes for Error generating Mermaid diagrams with Asciidoctor-pdf and asciidoctor-diagrams

2025-06-14T22:59:47Z

I've faced something similar (well, issues with Chromium on GH Actions). Yours is failing becos the Chromium sandbox isn't correctly setup. So, you have two options: 1. Properly install chrome and configure the sandbox, or 2. Just disable sandbox!

Option 1: Install Chrome + configure sandbox

Install Google Chrome / or Chromium and it's sandbox helper
Copy and set perms on the sandbox helper
Export the env var to point to it
Then run asciidoctor-pdf as normal

Add this before your asciidoctor-pdf step in the workflow:

- name: Setup Chrome sandbox for diagram rendering
  run: |
    apt-get update
    apt-get install -y google-chrome-stable
    CHROME_SANDBOX=$(dirname "$(which google-chrome-stable)")/chrome-sandbox
    sudo chown root:root "$CHROME_SANDBOX"
    sudo chmod 4755 "$CHROME_SANDBOX"
    echo "CHROME_DEVEL_SANDBOX=$CHROME_SANDBOX" >> $GITHUB_ENV

Then your diagram step stays the same:

- name: Convert AsciiDoc to PDF
  run: |
    set -o pipefail
    OUTPUT=$(asciidoctor-pdf -r asciidoctor-diagram -a allow-uri-read -a ./mybook.adoc 2>&1)
    echo "$OUTPUT"
    if echo "$OUTPUT" | grep -i -E "error.*image|could not generate image|failed to generate image"; then
      echo "Error: Image generation failed in asciidoctor-pdf output."
      exit 1
    fi

So, this should ensure that Puppeteer can launch Chrome with a properly permissioned sandbox.

Option 2: Just disable sandbox (less secure, simpler)

This should actually be fine in GH actions runners, and is much easier. You can just bypass the issue with a Puppeteer config.

Create a file puppeteer-config.json with:

{ "args": ["--no-sandbox", "--disable-setuid-sandbox"] }

Tell Asciidoctor Diagram to use it:

- name: Convert AsciiDoc to PDF (no sandbox)
  run: |
    export ASCIIDOCTOR_DIAGRAM_PUPPETEER_CONFIG=./puppeteer-config.json
    OUTPUT=$(asciidoctor-pdf -r asciidoctor-diagram -a allow-uri-read -a ./mybook.adoc 2>&1)
    ...

Or, pass it directly via an attribute in the AsciiDoc command

TL;DR

- name: Setup Chrome sandbox
  run: |
    apt-get update
    apt-get install -y google-chrome-stable
    CHROME_SANDBOX=$(dirname "$(which google-chrome-stable)")/chrome-sandbox
    sudo chown root:root "$CHROME_SANDBOX"
    sudo chmod 4755 "$CHROME_SANDBOX"
    echo "CHROME_DEVEL_SANDBOX=$CHROME_SANDBOX" >> $GITHUB_ENV

- name: Convert AsciiDoc to PDF
  run: |
    set -o pipefail
    OUTPUT=$(asciidoctor-pdf -r asciidoctor-diagram -a allow-uri-read -a ./mybook.adoc 2>&1)
    echo "$OUTPUT"
    if echo "$OUTPUT" | grep -i -E "error.*image|could not generate image|failed to generate image"; then
      echo "Error: Image generation failed in asciidoctor‑pdf output."
      exit 1
    fi

- name: Convert AsciiDoc to PDF (with no-sandbox diagrams)
  env:
    # Tell Puppeteer (used by asciidoctor-diagram) to skip sandbox
    PUPPETEER_ARGS: "--no-sandbox --disable-setuid-sandbox"
  run: |
    set -o pipefail
    OUTPUT=$(asciidoctor-pdf \
      -r asciidoctor-diagram \
      -a allow-uri-read \
      -a ./mybook.adoc 2>&1)
    echo "$OUTPUT"
    if echo "$OUTPUT" | grep -i -E "error.*image|could not generate image|failed to generate image"; then
      echo "Error: Image generation failed in asciidoctor-pdf output."
      exit 1
    fi

Answer by Alicia Sykes for Javascript Logical OR operator in return statement of a function

2022-04-28T20:59:45Z

(title) => !!title || "Title is required"]

This line is saying:

If title is present, return true, otherwise return "Title is required".

Let's break it down...

To start with, the arrow function is just shorthand for:

function xxxx (title) {
  return !!title || "Title is required"];
}

Next, the !! is a double negation, effectively just the logical not operator twice. The first negation converts the data (whatever it data type it may be) to a boolean. The second negation changes the boolean again to give the desired result.

E.g. !!'hello' --> true, !!0 --> false, !!undefined --> false

The next part is a comparison. The || is OR operator, so if the first half is true / present, then it will be returned, if not, the part after the || will be returned.

E.g. true || 'some text' will return true, whereas false || 'some text' will return some text

Here are some example, try running the snippet to see the outputs

const checkTitle = (title) => !!title || "Title is required"

// 1. No parameters, should print "Title is required"
console.log('Test 1', checkTitle()); 

// 2. Parameter presentbut empty, should print "Title is required"
console.log('Test 2', checkTitle("")); 

// 3. Title present, and valid, should preint 'true'
console.log('Test 3', checkTitle('Hello World!'));

It's not the best code, because it's not super clear, and you usually don't want to mix types like this. It also doesn't check if the title is a valid type, so 123 or true would be accepted as valid.

Answer by Alicia Sykes for How to show the "Repositories contributed to" on github

2025-04-04T18:16:42Z

Quick Answer

USERNAME="Lissy93"
for PAGE in {1..10}; do
  curl -s "https://api.github.com/search/issues?q=author:$USERNAME+type:pr&per_page=100&page=$PAGE" |
    jq -r '.items // [] | .[].repository_url'
done | sort -u | cut -d '/' -f 5,6

This snippet will:

Output just the required [org]/[repo]
Deduplicate contributions to the same repo
Page through results (so you can get more than 1000 repos)

Just paste it into your terminal, update the username, and you should see a list of repos.

Longer Answer

Or take a look at this API endpoint: https://api.github.com/search/issues?q=author:lissy93+type:pr. Since it returns duplicates, a lot of extra info, and is limited to 100 results per page, we need to format that to get a nice list.

JavaScript Example

(async () => {
  const repos = new Set();
  for (let page = 1; page <= 10; page++) {
const res = await fetch(`https://api.github.com/search/issues?q=author:lissy93+type:pr&per_page=100&page=${page}`);
const data = await res.json();
if (!data.items?.length) break;
data.items.forEach(i => {
  const m = i.repository_url.match(/repos\/([^/]+\/[^/]+)/);
  if (m) repos.add(m[1]);
});
  }
  console.log([...repos].sort());
})();

Python Example

import requests

repos = set()
for page in range(1, 11):
    url = f"https://api.github.com/search/issues?q=author:octocat+type:pr&per_page=100&page={page}"
    res = requests.get(url).json()
    for item in res.get("items", []):
        parts = item["repository_url"].split("/")[-2:]
        repos.add("/".join(parts))
    if not res.get("items"):
        break

print("\n".join(sorted(repos)))

Via the GitHub UI

I don't think there's an easy way to do this in the GitHub UI anymore; You can go to the user's profile, under Contribution Activity --> See all activity. But that includes more than just contributions.

Or, there's also github.com/settings/repositories which will show all repositories that you (the authenticated user) have access to (write permissions).

Answer by Alicia Sykes for Error: Cannot resolve type entity i29.DragAndDropModule to symbol

2024-10-23T19:06:13Z

In case anyone whose not using Kendo is facing this issue, then it can commonly be resolved by ensuring that Angular CDK is installed.

npm install @angular/cdk

This is because the drag 'n drop functionality is provided by Angular CDK which interfaces with the HTML 5 Drag and Drop API.

I encountered this while using PrimeNG's PickListModule which used drag and drop, and found the solution in primefaces/primeng#11581

In the future, I expect this to be resolved upstream in most Angular 18+ libraries, so long as you have preserveSymlinks set in your TSConfig's compiler options, like:

"compilerOptions": {
  "preserveSymlinks": true
}

Answer by Alicia Sykes for Reindex a source code in the VSCode

2022-10-28T12:56:54Z

This question is a few years old now, but this is an issue I've seen a lot, and can usually be fixed with one of the following 5 options:

Reload Session

You can reload the current session, with the workbench.action.reloadWindow command:

Open the Command Palette with Ctrl + Shift + P Then type Reload Window

Filter Files being Indexed

For C/C++ projects specificially, sometimes the intellisense indexing can be really slow, and feel like it's not working. One solution for this is to limit what it indexes with something like limitSymbolsToIncludedHeaders, or reduce the amount of parsed files in c_cpp_properties.json

"browse": {
  "path": [
    "/usr/include/",
    "/usr/local/include/",
    "${workspaceRoot}/../include",
    "${workspaceRoot}/dir2",
    "${workspaceRoot}/dir3/src/c++"
    ...
  ]
}

Set File Associations

Sometimes the file associations are incorrect, so files are not indexed as expected. This can be fixed by adding something similar to this into your VS Code settings (settings.json):

"intelephense.files.associations": ["*.php", "*.phtml", "*.inc", "*.module", "*.install", "*.theme", ".engine", ".profile", ".info", ".test"]

Rebuild System Index

For Windows users, VS Code uses the system search index, so rebuilding that may help.

Network Drive Setup

If you're project is sourced on a network drive, there's an extra step involved to get indexing working, by mounting to a local drive. This is a known issue (see #4008), which can be resolved by mounting the app from a fixed drive or mapping the network drive to a local drive letter (e.g. if your network drive is located at \\NETWORKPATH\home\USER\REPO\GITREPO, then map it to X:/ on your local machine.

Ensure Intellisense Enabled

Finally, it may seem obvious, but just confirm that Intellisense is actually enabled, with editor.tabCompletion in your settings.json. And if you're searching with results not displaying, ensure there aren't any filters preventing results.

Answer by Alicia Sykes for "Could not find Chromium" when using puppeteer in a Netlify lambda function

2023-07-22T12:17:53Z

A little bit late here, but I was trying to do something similar, and got it working using @Sparticuz/chromium and puppeteer-core.

The docs show how to migrate from chrome-aws-lambda, which does not run on Netlify anymore.

So here's a working example, which takes a ?url=https://example.com param, loads the content in headless chromium, takes a screenshot, and returns it as base64 encoded data. I deployed it to Netlify, and seems to work great.

const puppeteer = require('puppeteer-core');
const chromium = require('@sparticuz/chromium');

exports.handler = async (event, context, callback) => {
  let browser = null;
  let targetUrl = event.queryStringParameters.url;

  if (!targetUrl) {
    callback(null, {
      statusCode: 400,
      body: JSON.stringify({ error: 'URL is missing from queryStringParameters' }),
    });
    return;
  }

  if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
    targetUrl = 'http://' + targetUrl;
  }

  try {
    new URL(targetUrl);
  } catch (error) {
    callback(null, {
      statusCode: 400,
      body: JSON.stringify({ error: 'URL provided is invalid' }),
    });
    return;
  }

  try {
    browser = await puppeteer.launch({
      args: chromium.args,
      defaultViewport: { width: 800, height: 600 },
      executablePath: await chromium.executablePath(),
      headless: chromium.headless,
      ignoreHTTPSErrors: true,
    });

    let page = await browser.newPage();

    // Emulate dark theme
    await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }]);

    // Set navigation timeout
    page.setDefaultNavigationTimeout(8000);

    await page.goto(targetUrl, { waitUntil: 'domcontentloaded' });

    // Ensure the page has some minimal interactivity before taking the screenshot.
    await page.evaluate(() => {
      const selector = 'body';
      return new Promise((resolve, reject) => {
        const element = document.querySelector(selector);
        if (!element) {
          reject(new Error(`Error: No element found with selector: ${selector}`));
        }
        resolve();
      });
    });

    const screenshotBuffer = await page.screenshot();

    const base64Screenshot = screenshotBuffer.toString('base64');

    const response = {
      statusCode: 200,
      body: JSON.stringify({ image: base64Screenshot }),
    };

    callback(null, response);
  } catch (error) {
    callback(null, {
      statusCode: 500,
      body: JSON.stringify({ error: `An error occurred: ${error.message}` }),
    });
  } finally {
    if (browser !== null) {
      await browser.close();
    }
  }
};

Only thing to note, is when I was running this locally (with netlify dev), it was unable to find the path to my Chromium executable, so as a temporary work-around, I switched the executablePath: '/usr/bin/chromium' (for Arch Linux) during dev - I'm sure there's better way though.

I also couldn't get it to respond with the normal resolve methods, which is why I defaulted back to the older callback approach using the third param in the handler. Again, I'm sure there's a better way to do this.

Answer by Alicia Sykes for dockerized Kafka service stuck at producer.send

2023-04-08T13:33:21Z

It looks like your Kafka procucer isn't able to reach the Kafka broker in the Docker network.

Since you've got the Kafka service in your docker-compose, that will act as the hostname within the Docker network.

So it should just be a case of updating the bootstrap_servers=['kafka:9092'] in your producer.py with an environmental variable, so it can be used both within the Docker netowork, and when the script is run outside Docker (w python3 src/producer.py).

# Get env var
kafka_bootstrap_servers = os.environ.get("KAFKA_BOOTSTRAP_SERVERS", "localhost:9092")

# Use in producer
producer = KafkaProducer(bootstrap_servers=kafka_bootstrap_servers, api_version=(0, 10))

Then, under publisher in your docker-compose.yml add:

environment:
   KAFKA_BOOTSTRAP_SERVERS: kafka:9092

Then, when running within the Docker network is will use the environmental variable (KAFKA_BOOTSTRAP_SERVERS), but when running directly it will use the default value (localhost:9092)

Answer by Alicia Sykes for Jquery - Download data in chunks from server and keep appending to a file on client

2023-04-08T13:09:27Z

You'd probably want to use the JS Streams API, which let's you break large resources down into smaller chunks for easier processing.

Here's an (untested) example, based on your initial code.

// Prepare the stream for writing
async function prepareStream(filename) {
  const encoder = new TextEncoder();
  const stream = new WritableStream({
    write(chunk) {
      return encoder.encode(chunk);
    }
  });

  const response = new Response(stream);
  const blob = await response.blob();
  const url = URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.setAttribute('href', url);
  link.setAttribute('download', filename);
  link.setAttribute('target', '_blank');
  link.style.visibility = 'hidden';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);

  return stream.getWriter();
}

// Write data to the stream
async function writeDataToFile(writer, data, delimiter) {
  const rows = data.map((obj) => Object.values(obj).join(delimiter));
  const csvContent = rows.join('\n') + '\n';
  await writer.write(csvContent);
}

// Close the stream when finished
async function closeStream(writer) {
  await writer.close();
}

// Example usage
(async () => {
  const delimiter = ',';
  const filename = 'export.csv';
  const writer = await prepareStream(filename);

  // Replace this loop with your API call loop
  for (let i = 0; i < 10; i++) {
    const data = [
      { id: i * 10 + 1, name: 'John', age: 25 },
      { id: i * 10 + 2, name: 'Jane', age: 24 },
    ];

    await writeDataToFile(writer, data, delimiter);
  }

  await closeStream(writer);
})();

Answer by Alicia Sykes for Differentiate between Server Side and Client Side on fetch Sapper

2023-02-09T17:34:05Z

Just an update, for SvelteKit 1.0.0 and later...

The environment module includes the browser property, which returns true if being run client-side.

For example,

import { browser } from '$app/environment';

if (browser) {
  // Running client-side
  // Can use the browser APIs here
} else {
  // Running server-side
  // Can use private env vars here
}

Answer by Alicia Sykes for How do I align text in top left corner of div?

2022-12-14T20:52:12Z

(I'll update my answer with more specific code samples, once you've shared your markup)

Option #1 - Absolute Positioning

.wrapper {
  position: relative;
  min-height: 300px;
  border: 2px dashed red;
}

.top-left {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  border: 2px dashed blue;
}

<div class="wrapper">
  <div class="top-left">[123]</div>
</div>

Option #2 - Flex Layout

.wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  min-height: 300px;
  border: 2px dashed red;
}

.top-left {
  border: 2px dashed blue;
}

<div class="wrapper">
  <div class="top-left">[123]</div>
</div>

Option #3 - Grid Layout

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 200px;
  border: 2px dashed red;
}

.top-left {
  grid-column-start: 1;
  grid-column-end: 1;
  border: 2px dashed blue;
}

.cell {
  border: 2px dashed yellow;
}

<div class="wrapper">
  <div class="top-left">[123]</div>
  <div class="cell">[CELL]</div>
  <div class="cell">[CELL]</div>
  <div class="cell">[CELL]</div>
  <div class="cell">[CELL]</div>
  <div class="cell">[CELL]</div>
  <div class="cell">[CELL]</div>
  <div class="cell">[CELL]</div>
  <div class="cell">[CELL]</div>
</div>

Answer by Alicia Sykes for Compile Error: Assign arrow function to a variable before exporting as module default

2022-12-01T22:40:25Z

For arrow functions, since they're anonymous you'll need to assign it to a variable which you can then export. This example, based on your code should work (but don't forget to fill in the logic within the tasks.map function)

import React from 'react';
import TaskList from './TaskList';

const Tasks = ({ tasks }) => {
  return tasks.map(task => ( ... ));
} 

export default Tasks;

It's caused by the import/no-anonymous-default-export rule, which prevents a module's default export from being unnamed.

Since it's a lint warning, and not a syntatical error, if you were to disable that rule, your existing code would work (but I recommend not doing that!).

This rule is useful, as ensuring that default exports are named helps improve the grepability of the codebase by encouraging the re-use of the same identifier for the module's default export at its declaration site and at its import sites.

Answer by Alicia Sykes for Trying to figure out how to add this javascript

2022-11-28T21:25:44Z

Here's a working snippet. As mentioned by Kinglish (in the comments), the issue is there is no value property in the objects you are looping through it should say customerid instead.

const orderlist = document.getElementById('orderlist');
let orderid = [0];

const loadorders = async() => {
  try {
    const res = await fetch('https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py');
    orderid = await res.json();
    displayorderid(orderid);
  } catch (err) {
    console.error(err);
    console.log(res);
  }
};
const displayorderid = (orderObject) => {
  const htmlString = orderObject
.map((orderObject) => {
  return `
    <li class="orderid">
    <h2>${orderObject.customerid}</h2>
    </li>
    `; //<------- the customerid property exists
})
.join('');
  orderlist.innerHTML = htmlString;
};
loadorders();

body {
  font-family: Georgia, serif;
  background-color: rgb(59, 59, 243);
}

* {
  box-sizing: border-box;
}

h1 {
  color: azure margin-bottom:30px;
}

.container {
  padding: 35px;
  margin: 0 auto;
  max-width: 1000px;
  text-align: center center;
}

#customerslist {
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 15;
}

.Customer {
  list-style-type: none;
  background-color: aquamarine;
  border-radius: 5px;
  padding: 10px 25px;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: ;
  text-align: left;
}

<div class="container">
  <h1>tilaukset</h1>
  <div id="search">
    <input type="text" name="Hakupalkki" id="Hakupalkki" placeholder="Hae tilausta" />
  </div>
  <ul id="orderlist"></ul>
</div>

Answer by Alicia Sykes for Vue js does not bind values to form

2022-09-18T19:14:57Z

Vue 2

Use v-model instead of value

Here's a working example:

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  name: 'memite7760-demo',
  data() {
    return {
      email: '',
      password: '',
    }
  },
})

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>

<div id="app">
  <form>
    <div>
      <label for="email">Email:</label>
      <input type="text" name="email" id="email" v-model="email">
    </div>
    <div>
      <label for="email">Password:</label>
      <input type="password" name="password" id="password" v-model="password">
    </div>
    <button type="submit">Submit</button>
  </form>
  <div>
  Username: {{ email }}, Password: {{ password }}
  </div>
</div>

Vue 3

As pointed out by @tao, you have a small typo: date should be data. He also gives some good advice re imports

Again, here's a working example:

const App = {
  data() {
    return {
      email: 'example@roocket.ir',
      password: '123456'
    }
  }
};

Vue.createApp(App).mount('#app');

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
  <form>
    <div>
      <label for="email">Email:</label>
      <input type="text" name="email" id="email" v-model="email">
    </div>
    <div>
      <label for="email">Password:</label>
      <input type="password" name="password" id="password" v-model="password">
    </div>
    <button type="submit">Submit</button>
  </form>
  Email: {{email}}, Pass: {{password}}
</div>

Answer by Alicia Sykes for I Need Help Randomizing an Tag

2022-09-17T19:27:28Z

The key is to break it down:

Define your list of possible destinations
Select one at random
Grab the DOM element to change
Set the DOM element's href link to your random page

Here's a working example:

const destinations = [
  'my-destination-1.html',
  'my-destination-2.html',
  'my-destination-3.html',
  'my-destination-4.html',
  'my-destination-5.html'
];
 
const randomIndex = Math.floor(Math.random()*destinations.length);

const randomDestination = destinations[randomIndex];

const randomJokeLink = document.getElementById('random-joke-link');

randomJokeLink.setAttribute("href", randomDestination);

<a id="random-joke-link" href="#">Random Joke</a>

Answer by Alicia Sykes for datepicker does not work even after following the same script

2022-09-10T21:57:17Z

Looks like the DOM hasn't finished loading at the time that you're executing your JavaScript.

jQuery has an implementation of the window load event, which is $( document ).ready().

In your example, that would be:

$(document).ready(() => {
  $('.pickupDate').datepicker();
  $('.dropoffDate').datepicker();
  $('.pickupDate').change(() => {
    const date2 = $('.pickupDate').datepicker('getDate', '+1d');
    $('.dropoffDate').datepicker('setDate', date2.getDate() + 1);
  });
});

Also, you probably want to load those external scripts from within your <head> tag. You could also consider downloading them locally using NPM.

Answer by Alicia Sykes for How do I use my existing toggle to also switch between two css sheets?

2022-09-09T16:36:38Z

The easiest method would be to determine the theme based on HTML data attribute, then check which theme is applied in the CSS using html[data-theme='dark'] or html[data-theme='light'].

This can be broken down into several steps:

Apply Styles Based on Data Attribute

You can apply CSS to any given element by targetting data values. In this instance, you'd probably want to apply this value to an upper-most node, like <html>.

In JavaScript, you can change this value with:

document.getElementsByTagName('html')[0].setAttribute('data-theme', 'dark');

Which will update the HTML to look like:

<html data-theme="dark">
...
</html>

That can then be targeted in CSS with:

html[data-theme='light'] {
  --background: #fff;
  --foreground: #000;
}

html[data-theme='dark'] {
  --background: #000;
  --foreground: #fff;
}

Store User Preference

When the user changes theme, store their choice in the browsers local storage, using Window.localStorage, then apply it again next time they visit your site.

// Set
window.localStorage.setItem('theme', 'dark');
// Get
const theme = window.localStorage.theme;

Here's a more detailed tutorial.

Detect User Light / Dark Preference

You can check if the user's OS / browser is set to prefer light or dark mode, and apply that theme on initial page load. This is done using prefers-color-scheme

@media (prefers-color-scheme: dark) {
  --background: #000;
  --foreground: #fff;
}

@media (prefers-color-scheme: light) {
  --background: #fff;
  --foreground: #000;
}

Putting it all Together

Here's a live example, which combines the above points into a runnable code snippet, which you can integrate into your app

const setTheme = () => {
  const newTheme = document.getElementById('theme-selector').value;
  const htmlTag = document.getElementsByTagName('html')[0];
  if (htmlTag.hasAttribute('data-theme')) htmlTag.removeAttribute('data-theme');
  htmlTag.setAttribute('data-theme', newTheme);
  window.localStorage.setItem('theme', newTheme);
}

// Apply previously saved theme, on page load
document.onload = function() {
  const savedTheme = window.localStorage.theme;
  if (savedTheme) {
    document.getElementsByTagName('html')[0].setAttribute('data-theme', savedTheme)
  }
};

html[data-theme='light'] {
  --background: #fff;
  --foreground: #000;
}

html[data-theme='dark'] {
  --background: #000;
  --foreground: #fff;
}


body {
  background: var(--background);
  color: var(--foreground);
}

<label for="theme-selector">Theme</label>
<select id="theme-selector" onchange="setTheme()">
  <option value="light">Light</option>
  <option value="dark">Dark</option>
</select>

If you want to see a real-world example, of how this could scale up for larger code bases, I am using this approach in this app, and the theming is explained in this docs

Answer by Alicia Sykes for How to display current date in in html using javscript (jquery)

2022-09-08T14:55:43Z

Here's a working proof of concept, without using any external libraries. It basically just converts seconds to minutes if it's over 60, minutes to hours if over 60, hours to days if over 24, etc...

/* Given two timestamp, return the difference in text format, e.g. '10 minutes' */
const getTimeDifference = (startTime, endTime) => {
  const msDifference = new Date(endTime).getTime() - new Date(startTime).getTime();
  const diff = Math.abs(Math.round(msDifference / 1000));
  const divide = (time, round) => Math.round(time / round);
  if (diff < 60) return `${divide(diff, 1)} seconds`;
  if (diff < 3600) return `${divide(diff, 60)} minutes`;
  if (diff < 86400) return `${divide(diff, 3600)} hours`;
  if (diff < 604800) return `${divide(diff, 86400)} days`;
  if (diff < 31557600) return `${divide(diff, 604800)} weeks`;
  if (diff >= 31557600) return `${divide(diff, 31557600)} years`;
  return 'unknown';
};

/* Given a timestamp, return how long ago it was, e.g. '10 minutes' */
const getTimeAgo = (dateTime) => {
  const now = new Date().getTime();
  const isHistorical = new Date(dateTime).getTime() < now;
  const diffStr = getTimeDifference(dateTime, now);
  if (diffStr === 'unknown') return diffStr;
  return isHistorical ? `${diffStr} ago` : `in ${diffStr}`;
};

/* Update the UI at intervals */
const startTime = new Date();
const timer = setInterval(() => {
  document.getElementById('comment').innerHTML = getTimeAgo(startTime);
}, 1000);

<p id="comment"></p>

Answer by Alicia Sykes for How to Combine Same key JavaScript Object to one Array Dynamically

2022-08-29T16:24:09Z

You can just iterate over your input data's keys. Then if the key already exists in your results you append the new value, otherwise create an array with the first value within your results.

Here's a working demo:

const sample = [
  {
    1: { date: 1638334800, value: 0 },
    2: { date: 1638334800, value: 19.71 },
    nth: { date: 1638334800, value: 19.71 }
  },
  {
    1: { date: 1638334800, value: 0 },
    2: { date: 1638334800, value: 23.77 },
    nth: { date: 1638334800, value: 19.71 }
  }
];

const generateOutput = (inputData) => {
  const results = {};
  inputData.forEach((dataSet) => {
    Object.keys(dataSet).forEach((key) => {
      if (results[key]) {
        results[key].push(dataSet[key]);
      } else {
        results[key] = [dataSet[key]];
      }
    });
  });
  return results;
}

console.log(generateOutput(sample));

Answer by Alicia Sykes for How to capitalize all keys in an array of objects?

2022-08-28T21:50:21Z

It looks like the issue is with your capitalization method.

The following alternative should work:

const capitalizeKey = (key) => key.charAt(0).toUpperCase() + key.slice(1);

Here's a very basic live demo:

const capitalizeObjectKeys = (obj) => {
  if (!obj) return;
  if (Array.isArray(obj)) {
    return obj.map((each) => capitalizeObjectKeys(each))
  }
  const results = {};
  Object.keys(obj).forEach((key) => {
    const newKey = key.charAt(0).toUpperCase() + key.slice(1);
    const objVal = (typeof obj[key] === 'object') ? capitalizeObjectKeys(obj[key]) : obj[key];
    results[newKey] = objVal;
  });
  return results;
};

const sample = [{"id":3,"accountId":6,"title":"ABCDF Copy","versionDto":{"id":3,"entitlementsTemplateId":3,"status":"Draft","entitlementElementsTemplateDto":[{"id":5,"isHeaderCategory":false,"order":1},{"id":6,"isHeaderCategory":false,"order":2}]}}];


const results = capitalizeObjectKeys(sample)

console.log(results);

Answer by Alicia Sykes for Height 100% in CSS does not behave how I expect

2022-08-28T21:42:08Z

The height: 100% attribute's percentage is calculated based on the containing block's height. And if that containing block doesn't have a specified and fixed height, then the percentage is invalid, and behind the scense it will default back to auto (which if the inner has no content, it will be zero).

So, for percentage height to work on an in-flow child, the parent must have a set height.

In your example, just setting a display method to the outer container, and then setting height to fill parent will fix your issue, here's an updated CodePen.

* {
  box-sizing: border-box;
}

.outer {
  background-color: yellow;
  height: 1000px;
  width: 300px;
}

.inner {
  min-height: 500px;
  width: 200px;
  background-color: green;
  display: flex;
}

.inner-inner {
  height: fill;
  width: 100px;
  background-color: aqua;
}

<body>
  <div class="outer">
    <div class="inner">
      <div class="inner-inner"></div>
    </div>
  </div>
</body>

Answer by Alicia Sykes for Copy text to clipboard: Cannot read properties of undefined reading 'writeText'

2022-04-14T18:37:51Z

The use of navigator.clipboard requires a secure origin. So if your dev environment is being served over HTTP, then the clipboard method won't be available.

According to MDN Clipboard docs

This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Maybe you could check if this method is available with window.isSecureContext, and disable the Copy Text button accordingly.

Workaround

The best option is to use HTTPS in your dev environment.

But since you asked for a workaround, here's a (very hacky) working method. Using Document.exec command, which is no longer recommended, in favour of ClipboardAPI.

function unsecuredCopyToClipboard(text) {
  const textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();
  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('Unable to copy to clipboard', err);
  }
  document.body.removeChild(textArea);
}

Usage

You can then just check if !navigator.clipboard and call the fallback method, otherwise continue with the normal navigator.clipboard.writeText(...) function. For example:

const unsecuredCopyToClipboard = (text) => { const textArea = document.createElement("textarea"); textArea.value=text; document.body.appendChild(textArea); textArea.focus();textArea.select(); try{document.execCommand('copy')}catch(err){console.error('Unable to copy to clipboard',err)}document.body.removeChild(textArea)};

/**
 * Copies the text passed as param to the system clipboard
 * Check if using HTTPS and navigator.clipboard is available
 * Then uses standard clipboard API, otherwise uses fallback
*/
const copyToClipboard = (content) => {
  if (window.isSecureContext && navigator.clipboard) {
    navigator.clipboard.writeText(content);
  } else {
    unsecuredCopyToClipboard(content);
  }
};

<button onClick="buttonPress()">➡️ Copy Message to Clipboard</button>

<script type="text/javascript"> const buttonPress = () => { copyToClipboard('Hello World!'); console.log('Clipboard updated 📥\nNow try pasting!'); }; </script>

Answer by Alicia Sykes for Change source on audio end [multiple audios] JS & jQuery

2017-05-13T12:36:33Z

Here's a working JSFiddle

// Plays random song from array
function playNextRandom(){
  const allSongs = [
    "http://www.noiseaddicts.com/samples_1w72b820/281.mp3",
    "http://www.noiseaddicts.com/samples_1w72b820/4939.mp3"
  ];
  const randomIndex = allSongs[Math.floor(Math.random() * allSongs.length)];
  $("audio").src = randomIndex;
}

// Executed when document has loaded    
$(document).ready(function(){    

  // Append audio element
  const audioElement = document.createElement("audio");
  audioElement.controls = true;
  audioElement.setAttribute("id", "au");
  document.body.appendChild(audioElement);
        
  // Append Audio source
  const audioSource = document.createElement("source");
  audioSource.src = "http://www.noiseaddicts.com/samples_1w72b820/4927.mp3"
  audioElement.appendChild(audioSource);
  audioElement.play()
  audioSource.setAttribute("onended", "playNextRandom");

})

Answer by Alicia Sykes for cannot clear Interval within if query

2022-08-06T12:28:04Z

You need to put the ( y > 3) check within the countdown function. Currently it'll only be executed once, and at the end.

Here's a working example:

let y = 1;

const countdown = () => {
  y += 0.5;
  console.log(y);
  if( y >= 3) {
    clearInterval(timerId);
  }
}

const timerId = setInterval(countdown, 500);

Answer by Alicia Sykes for Vue not rendering fetched html

2022-07-16T14:15:54Z

You're approaching this in the traditional JavaScript way of manipulating the DOM directly. In Vue, we set state which can then be rendered by your template.

Instead:

Create a data attribute to store your state
Under methods, write a function to fetch your data, then update the components data
Call your function in the components created hook
In you're template render the results
- Don't forget to check it's present first, with v-if
- You can use v-for to iterate over, and render lists

Here's a working demo

I don't have access to your API endpoint, so for demo purposes, am just using the GitHub API, to fetch and render a list of all repos in the Vue.js organization.

Here's what it looks like:

Vue.config.devtools = false;
    Vue.config.productionTip = false;
    new Vue({
      el: '#app',
      name: 'dbzx10299-demo',
  data() {
    return {
      loaded: false,
      response: null,
    }
  },
  methods: {
    fetchData() {
      const demoEndpoint = 'https://api.github.com/orgs/vuejs/repos';
      fetch(demoEndpoint)
      .then(response => response.json())
      .then(data => {
        this.response = data;
        this.loaded = true;
      })
    },
  },
  mounted() {
    this.fetchData();
  },
    })

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>

<div id="app">
<div class="hello">
  <h2>Vue Repo List - Data fetching example</h2>
  <div v-if="!loaded">Loading...</div>
  <ul v-else>
    <li v-for="(repo, index) in response" :key="index">
      <a :href="repo.html_url" :title="repo.description" target="_blank">
        {{ repo.name }}
      </a>
      <i>★ {{ repo.stargazers_count }}</i>
    </li>
  </ul>
</div>
</div>

How to manage multiple versions of the same NPM dependency?

2017-07-01T10:37:56Z

Situation

I've written a bunch of D3.js charts using the latest version of D3 (4.9.1).

However I also need to include the occasional C3.js chart in my app, problem is- C3 requires D3 v3.5.0.

What I've considered so far

Forking C3 to update it to the latest version of D3 (it's not really feasible though)
Using a different package manager, such as Yarn
Just forgetting about C3.... (don't want to do this, as it will involve a lot of re-work!)
Specifying a URL of an older version in the bower.json. However, I still was not able to reference to just that version for C3, and the latest for everything else.
```
 "d3": "^4.9.1",
 "d3-3.5.0": "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"
```

Question

Is it possible to manage multiple versions of the same dependency, cleanly? And if not, what would be a sensible work-around?

Answer by Alicia Sykes for PHP timezone ahead or behind?

2013-08-27T15:58:23Z

Greenwich Mean Time
Well if your using time(), it's in GMT as it is the Unix timestamp that's been counting seconds since the Unix Epoch (January 1 1970 00:00:00 GMT).

Gulp watch not called from within Nodemon

2015-07-20T19:02:27Z

So I have my Gulp file as below.

The 'watch' block seems to work absolutely fine, and do what is expected. Nodemon works in the way that it detects file changes and refreshes the server, that works too.

But I can't for the life of me get Nodemon to call the 'watch' method when a file changes.

On line 81, the .on('start' is called succesfully from nodemon, but the code inside the 'watch' method is never executed.

var gulp    = require('gulp');
var gutil   = require('gulp-util');      // For logging stats and warnings
var jshint  = require('gulp-jshint');    // For checking JavaScript for warnings
var concat  = require('gulp-concat');    // For joining together multiple files
var uglify  = require('gulp-uglify');    // For minimising files
var coffee  = require('gulp-coffee');    // For compiling coffee script into js
var cofLint = require('gulp-coffeelint');// For checking coffee script for errors
var less    = require('gulp-less');      // For compiling Less into CSS
var cssLint = require('gulp-csslint');   // For checking the awesomeness of css
var minCss  = require('gulp-minify-css');// For minifying css
var uncss   = require('gulp-uncss');     // For deleting unused CSS rules
var footer  = require('gulp-footer');    // For adding footer text into files
var nodemon = require('gulp-nodemon');   // For the super cool instant refreshing server
var bSync   = require('browser-sync');   // Syncs the place between multiple browsers for dev
var es      = require('event-stream');   // For working with streams rather than temp dirs

var sourcePath  = "sources";
var destPath    = "public";
var jsFileName  = "all.min.js";
var cssFileName = "all.min.css";
var footerText  = "";


/* JavaScript Tasks */
gulp.task('scripts',  function(){
    var jsSrcPath = sourcePath + '/javascript/**/*';
    var jsResPath = destPath + '/javascript';

    var jsFromCs = gulp.src(jsSrcPath+'.coffee')// Get all coffee script
        .pipe(cofLint())                        // Check CS for errors or warnings
        .pipe(cofLint.reporter())               // Output the error results
        .pipe(coffee());                        // Convert coffee to vanilla js

    var jsFromPlain = gulp.src(jsSrcPath+'.js');// get all vanilla JavaScript

   return es.merge(jsFromCs, jsFromPlain)       // Both js from cs and vanilla js
       .pipe(jshint())                          // Check js errors or warnings
       .pipe(jshint.reporter('jshint-stylish')) // Print js errors or warnings
       .pipe(concat(jsFileName,{newLine: ';'})) // Concatenate all files together
       .pipe(uglify())                          // Minify JavaScript
       .pipe(footer(footerText))                // Add footer to script
       .pipe(gulp.dest(jsResPath));             // Save to destination
});

/* CSS Tasks */
gulp.task('styles',  function(){
    var cssSrcPath = sourcePath + '/styles/**/*';
    var cssResPath = destPath + '/stylesheet';

    var cssFromLess = gulp.src(cssSrcPath+'.less')  // Get all Less code
        .pipe(less());                              // Convert Less to CSS

    var cssFromVanilla = gulp.src(cssSrcPath+'.css');// Get all CSS

    return es.merge(cssFromLess, cssFromVanilla)    // Combine both CSS
        .pipe(cssLint())                            // Check CSS for errors or warnings
        .pipe(cssLint.reporter())                   // And output the results
        .pipe(concat(cssFileName))                  // Concatenate all files together
        .pipe(minCss({compatibility: 'ie8'}))       // Minify the CSS
        .pipe(gulp.dest(cssResPath));               // Save to destination
});


/* Configure files to watch for changes */
gulp.task('watch', function() {
    gulp.watch(sourcePath+'/**/*.{js,coffee}', ['scripts']);
    gulp.watch(sourcePath+'/**/*.{css,less}',  ['styles']);
});

/* Start Nodemon */
gulp.task('demon', function () {
    nodemon({
        script: './bin/www',
        ext: 'js coffee css less html',
        env: { 'NODE_ENV': 'development'}
    })
        .on('start', ['watch'])//TODO: ERROR: watch is never called, even though start is called
        .on('change', ['watch'])
        .on('restart', function () {
            console.log('restarted!');
        });
});


/* Default Task */
gulp.task('default', ['demon']);

Any suggestions why this may be happening? Is there something wrong with my Gulp file?

(and yes, I know the code is a little over-commented, I work with apprentices and they like English better than code ;)

Comment by Alicia Sykes on Is visual studio standard conformant when it seemingly doesn't elide a copy when calling a function

2025-06-23T19:56:23Z

@Fedor tested and can confirm this does not occour in 17.14. So, once out then update and issue should be resolved.

Comment by Alicia Sykes on Cache Invalidation — Is there a General Solution?

2025-03-24T12:46:37Z

I love that you aced cache invalidation, but totally failed on the naming things. Just to prove Phill Karlton's point!

Comment by Alicia Sykes on Copy text to clipboard: Cannot read properties of undefined reading 'writeText'

2023-07-09T13:53:33Z

@bpGusar Locally-delivered resources are also considered secure, as there's no opportunity for an external actor to use a MITM attack :) See the When is a context considered secure? section in the MDN docs for more info.

Comment by Alicia Sykes on Why does docker-compose up get stuck starting when I give the container access to my GPU?

2023-04-10T18:28:49Z

Sorry, should have said that I just used Nvidia as an example - you'd need to put your actual GPU runtime info in there.

Comment by Alicia Sykes on Why does docker-compose up get stuck starting when I give the container access to my GPU?

2023-04-09T17:19:45Z

Have you tried specifying the runtime in your compose? (e.g. runtime: nvidia and also maybe the NVIDIA_VISIBLE_DEVICES=all env var). Can you share some more detailed logs too (use the docker-compose logs command)

Comment by Alicia Sykes on Binary array present in response is being converted to string in react

2023-04-09T17:11:15Z

Axios doesn't convert byte arrays to strings. So it sounds like it could just be a missing content type header (e.g. application/octet-stream for binary).

Comment by Alicia Sykes on Redux Dispatch Is Looping When Success is true in state

2023-04-08T13:55:33Z

Just splitting your success state into a separate states (e.g. addNoteSuccess and getNotesSuccess) for each action in your Redux slice, should fix this, by letting you listen specifically for one action in your useEffect.

Comment by Alicia Sykes on How to type Firestore queries in Firestore for NodeJS

2023-04-08T13:18:51Z

Could you create a custom utility that handles the type conversion on retrieved Firestore query data?

Comment by Alicia Sykes on Jquery - Download data in chunks from server and keep appending to a file on client

2023-04-08T13:10:07Z

Why is this tagged with jQuery?

Comment by Alicia Sykes on JavaScript/CSS. Determine content dimensions before rendering, to see if it will overflow container dimensions

2023-01-30T23:56:14Z

You don't need to create new elements, all the overflow capabilities should be able to be handled with proper CSS.

Comment by Alicia Sykes on JavaScript/CSS. Determine content dimensions before rendering, to see if it will overflow container dimensions

2023-01-30T15:07:20Z

This should be possible to do with just pure CSS, no need for the JS. If you can share the rest of your code, that'd help us write an answer. But it's probably going to be using flexbox, and flex wrap to make use of available space

Comment by Alicia Sykes on Unexpected Output from Array() Method

2023-01-30T15:03:11Z

The output is abcabcabc (so abc 3x times) - which is expected, because your passing in 3

Comment by Alicia Sykes on How to focus on input field loaded from component in Svelte?

2023-01-01T00:37:49Z

@mikemaccana - ref just short for reference, but it's commonly used in this context so for the sake of an example should be fine.

Comment by Alicia Sykes on on:keydown event with Enter Key in svelte

2023-01-01T00:27:08Z

This should be the accepted answer - very clearly described, and after testing against your scenario seems to work perfectly.

Comment by Alicia Sykes on How to add docker volume for zipkin server

2022-12-15T23:22:05Z

Use --volume to mount your own file or directory to where the log files are