I can do this manually using the following: Right-click on the video player, copy debug info, paste into text editor, and Ctrl+F for "addocid".

What is the best way to do this automatically?

By modifying an ad accelerator I found, I can reliably detect when a pre-roll ad is playing:

function handleVideoAd() {
	const video = document.querySelector('video');
	const adElement = document.querySelector('.video-ads.ytp-ad-module');
	if (video && adElement && adElement.children.length > 0) {
		alert('advertisement found!')
	}
}

function initializeAdHandling() {
	handleVideoAd();
	const observer = new MutationObserver(handleVideoAd);
	observer.observe(document.body, { childList: true, subtree: true });
}
initializeAdHandling()

If I had the video ID, I could then open the video in a new tab using something like:

window.open('https://www.youtube.com/watch?v=adVideoID');

However, I am at a bit of a loss as to how to extract the ad video ID itself.

In the browser inspector, the only places I can find the ad video ID are:

1. Within the URL for ytp-cued-thumbnail-overlay-image
2. As adVideoId within var ytInitialPlayerResponse, which itself is within <script nonce="rwc3vYf3vRLEyNQKsJOgig">, where rwc3vYf3vRLEyNQKsJOgig changes with every video.

What would be the best way to extract the advertisement video ID?

Apologies for if I'm going about this the wrong way. I am (very!) new to JavaScript, but interested in learning. Please let me know if I've broken any community rules, or committed any other sort of faux pas. Thanks! :)

I have created this app for javascript beginners. Users can attempt daily quiz and see the explanation after each answer. Also providing the frequently used code snippets, you can download beautiful images of code snippets and quiz. Please provide your feedback.

Fedify is an ActivityPub server framework in TypeScript & JavaScript. It aims to eliminate the complexity and redundant boilerplate code when building a federated server app, so that you can focus on your business logic and user experience.

The key features it provides currently are:

• Type-safe objects for Activity Vocabulary (including some vendor-specific extensions)
• WebFinger client and server
• HTTP Signatures
• Middleware for handling webhooks
• NodeInfo protocol
• Node.js, Deno, and Bun support

If you're curious, take a look at the Fedify website! There's comprehensive docs, a demo, a tutorial, example code, and more.

Hi there,

I have written an article on implementing server-side caching that ensures your app stays fast as you scale.

I’ve used ExpressJS for the API server, and React for the frontend.

Hope this helps someone!

I have a function as such:

export type SendMessageParams = {
  chatSession?: ChatSession,
  // ... other params ...
};

const sendMessage = async ({
  chatSession,
  // ... other params ...
}: SendMessageParams): Promise<void> => {
  // await chatSession?.sendMessage()
  // somewhere in implementation
};

export default sendMessage;

ChatSession is from @google/generative-ai.

I'd like to mock it in my test file as such:

let defaultParams: SendMessageParams;

beforeEach(() => {
  jest.mock('@google/generative-ai', () => ({
    ChatSession: {
      sendMessage: async (content: string) => content,
    },
  }));
  defaultParams = {
    chatSession: new ChatSession('', ''),
    // ... other params ...
  };
});

afterEach(() => {
  jest.clearAllMocks();
});

it('should send message', async () => {
  // await sendMessage();
});

When I run npm run test, I get the error saying:

 FAIL  tests/logic/actions/sendMessage.test.ts
  ● should send message

    ReferenceError: fetch is not defined

      43 |   const sendMessageInner = async (messages: Message[]) => {
      44 |     setMessageListState(messages);
    > 45 |     const result = await chatSession?.sendMessage(content);
         |                    ^
      46 |     const responseText = result?.response.text();
      47 |     if (responseText) {
      48 |       const responseMessage: Message = {

      at makeRequest (node_modules/@google/generative-ai/dist/index.js:246:9)
      at generateContent (node_modules/@google/generative-ai/dist/index.js:655:28)
      at node_modules/@google/generative-ai/dist/index.js:890:25
      at ChatSession.sendMessage (node_modules/@google/generative-ai/dist/index.js:909:9)
      at sendMessageInner (src/logic/actions/sendMessage.ts:45:20)
      at src/logic/actions/sendMessage.ts:72:7
      at sendMessage (src/logic/actions/sendMessage.ts:59:3)
      at Object.<anonymous> (tests/logic/actions/sendMessage.test.ts:44:3)

...which hints that chatSession.sendMessage method still uses the real implementation instead of mock.

I'd like to know why this happens and what the solution would be.

Thanks in advance.

Environment

• Node 20.11.0 (lts/iron)
• Jest 29.7.0
• @google/generative-ai 0.5.0 (if relevant)

cross-posted from: https://programming.dev/post/12807878

This new version provides an easy path to migrate from ESLint and Prettier. It also introduces machine-readable reports for the formatter and the linter, new linter rules, and many fixes.

Lets say I have a simple JS library. Most of the JS code is inside an object named after the library with the properties being the method functions. Some of these method functions require other method functions (Example, methodC() requires methodA()).

const myLibrary = {
   methodA: function() {...},
   methodB: functiom() {...},
   methodC: function() {...},
   methodD: function() {...}
}

How would I split these methods up into modules and split up this code into multiple files to make it a standard file structure for a NPM package. Currently all of the code is in one large JS file, and it could be broken down into modules. I would like to keep it all in the one object myLibrary like most NPM packages which when used, have the following syntax...

myLibrary.methodB(true, true);

Were all the methods are contained inside a object.

Any help will be most appreciated.

Hi there 👋, I’m Gerard, founder of Latitude.

I have written an article on how I approached building an open-source data tool. I had doubts about Python vs JavaScript, but I’m happy with the path I chose.

Would love it if you guys give me any feedback!

Hi! I'm hoping someone can point me to best practices in regards to API cookies, NextJS, and SSR.

What I'm encountering is that I'm calling an external API that is trying to set some cookies on the browser. This works when the call is made directly from the browser to the API. However, if the API call is made from the SSR function, then the cookie data never makes it to the browser.

In this way the cookie is thrown away and never sent for follow-up requests.

What is the best way to handle these API cookies when using SSR? Is there a way to have NextJS pass them back to the browser or remember them for subsequent calls. Any advice, links, or videos would be very helpful.

Many times when I’ve tried to write some code in Node.js using ES modules I’ve found myself reaching for __dirname and then looking up how to replace it. Now Node.js, Deno and Bun support import.meta.dirname. Check out the article for more detail.

cross-posted from: https://lemm.ee/post/27328794

A twist of Tic Tac Toe inspired by VSauce written in React + JS.

I will happily accept contributions, if you're interested you can check for any open issues or create your own!

Hello all,

My company is looking into building a new app from scratch based on Next.js with a few modules on the side (batch jobs, utility services, etc.)

Our current monorepo has been started over 4 years ago with Yarn Classic + Lerna and I was wondering what is the current consensus for building a monorepo, considering that the landscape has evolved greatly since then (npm now supports workspaces, pnpm has gained in popularity, Yarn has been re-engineered and multiple build systems have been released)

I would greatly appreciate if you have some comparison between package managers and build systems you could link to.

Official docs say it's for

Packages that are only needed for local development and testing.

Umm, okay. Not 100% clear there. Some articles mention things like ESLint or Jest (k, I'm onboard there) but others mention Babel or WebPack. I get that you don't need WebPack libraries to be loaded in the browser but how the hell do you bundle up your code without it? When you use npm ci or npm install you'll get all dependencies but isn't it good practice (in a CICD environment) to use --omit=dev or --only=prod?

We need to exert more pressure on apple and eu to not remove PWAs. Every signature counts, please sign and share EU has already started a preliminary investigation on this http://archive.today/2024.02.26-223134/https://www.ft.com/content/d2f7328c-5851-4f16-8f8d-93f0098b6adc