问:
SASS structure with forward and use
I always used the SASS import file to bring all partials together in a main sass-file. Now im switching to foward and use because import is deprecated. This brings a problem with it i cant solve.

I have the following sass structure:

```<code>main.scss
-base (folder)
-- _helpers.scss
-- _variables.scss
-- _mixins.scss
- views (folder)
-- _frontpage.scss
</code>```

Inside the helper.scss i forward the variables and mixins:

```<code>@forward 'mixins';
@forward 'variables';
</code>```

Inside the main.scss file i bring everything together:

```<code>@use "base/helpers" as h;
@use "views/_frontpage";
</code>```

Now my problem is that i cant use the variables and mixins inside my "view-partiars" how can i bring all these variables and functions into these partials without import them with "use" at the beginning of each "view-partial". Is it possible to delegate them down from the main.scss file?

Title: SASS structure with forward and use

Body:
I always used the SASS import file to bring all partials together in a main sass-file. Now im switching to foward and use because import is deprecated. This brings a problem with it i cant solve.

I have the following sass structure:

main.scss
-base (folder)
-- _helpers.scss
-- _variables.scss
-- _mixins.scss
- views (folder)
-- _frontpage.scss

Inside the helper.scss i forward the variables and mixins:

@forward 'mixins';
@forward 'variables';

Inside the main.scss file i bring everything together:

@use "base/helpers" as h;
@use "views/_frontpage";

Now my problem is that i cant use the variables and mixins inside my "view-partiars" how can i bring all these variables and functions into these partials without import them with "use" at the beginning of each "view-partial". Is it possible to delegate them down from the main.scss file?


来源: stackexchange

问:
Calling function from another component react
I make a onclick callback function in Top_Menu.jsx file and I want to create this function on other component. how can I do this..?

I make a onclick callback function in Top_Menu.jsx file and I want to create this function on other component. how can I do this..?

ContentLicense: CC BY-SA 4.0


问:
Jetpack Compose not updating View when using InputMethodService
You can find a sample project to reproduce the issue on Github

Button click works, but showing/ hiding the "Text" inside Column is not working when using InputMethodService

```<code>@Composable
fun CustomKeyboard(imeService: MyIMEService) {

    var isShow by remember { mutableStateOf(true)}

    Column {

        if(isShow) { Text(text = "Good Luck", color = Color.Green) } // <- not working here!

        Button(onClick = {
            isShow = !isShow
            imeService.doSomethingWith("A")
        }) {
            Text(text = "Test Show/Hide")
        }
    }
}
</code>```

The problem starts after updating savedstate-ktx:1.2.0
for the method setViewTreeSavedStateRegistryOwner().

For easier understanding details of InputMethodService here

```<code>class ComposeKeyboardView(private val imeService: MyIMEService) : AbstractComposeView(imeService) {

    @Composable
    override fun Content() {
        CustomKeyboard(imeService)
    }
}

class MyIMEService : InputMethodService(), LifecycleOwner, ViewModelStoreOwner, SavedStateRegistryOwner {
    override fun onCreateInputView(): View {
        val view = ComposeKeyboardView(this)

        window!!.window!!.decorView.let { decorView ->
            ViewTreeLifecycleOwner.set(decorView, this)
            ViewTreeViewModelStoreOwner.set(decorView, this)
            decorView.setViewTreeSavedStateRegistryOwner(this)
        }
        return view
    }

    fun doSomethingWith(mData: String) {
        currentInputConnection?.commitText(mData, 1)
    }

    private val _lifecycleRegistry: LifecycleRegistry by lazy { LifecycleRegistry(this) }
    private val _store by lazy { ViewModelStore() }

    override fun getLifecycle(): Lifecycle = _lifecycleRegistry

    override fun getViewModelStore(): ViewModelStore = _store

    override val savedStateRegistry: SavedStateRegistry = SavedStateRegistryController.create(this).savedStateRegistry

    private fun handleLifecycleEvent(event: Lifecycle.Event) =
        _lifecycleRegistry.handleLifecycleEvent(event)

    @CallSuper
    override fun onCreate() {
        super.onCreate()
        // You must call performAttach() before calling performRestore(Bundle)
        savedStateRegistry.performAttach(lifecycle)
        savedStateRegistry.performRestore(null)
        handleLifecycleEvent(Lifecycle.Event.ON_CREATE)
    }

    @CallSuper
    override fun onTaskRemoved(rootIntent: Intent?) {
        super.onTaskRemoved(rootIntent)
        stopSelf()
    }

    @CallSuper
    override fun onDestroy() {
        super.onDestroy()
        handleLifecycleEvent(Lifecycle.Event.ON_DESTROY)
    }
}
</code>```

Source: This project is based on Yannick's and Simsim's answer.

Body:
You can find a sample project to reproduce the issue on Github

Button click works, but showing/ hiding the "Text" inside Column is not working when using InputMethodService

@Composable
fun CustomKeyboard(imeService: MyIMEService) {

    var isShow by remember { mutableStateOf(true)}

    Column {

        if(isShow) { Text(text = "Good Luck", color = Color.Green) } // <- not working here!

        Button(onClick = {
            isShow = !isShow
            imeService.doSomethingWith("A")
        }) {
            Text(text = "Test Show/Hide")
        }
    }
}

The problem starts after updating savedstate-ktx:1.2.0
for the method setViewTreeSavedStateRegistryOwner().

For easier understanding details of InputMethodService here

class ComposeKeyboardView(private val imeService: MyIMEService) : AbstractComposeView(imeService) {

    @Composable
    override fun Content() {
        CustomKeyboard(imeService)
    }
}

class MyIMEService : InputMethodService(), LifecycleOwner, ViewModelStoreOwner, SavedStateRegistryOwner {
    override fun onCreateInputView(): View {
        val view = ComposeKeyboardView(this)

        window!!.window!!.decorView.let { decorView ->
            ViewTreeLifecycleOwner.set(decorView, this)
            ViewTreeViewModelStoreOwner.set(decorView, this)
            decorView.setViewTreeSavedStateRegistryOwner(this)
        }
        return view
    }

    fun doSomethingWith(mData: String) {
        currentInputConnection?.commitText(mData, 1)
    }

    private val _lifecycleRegistry: LifecycleRegistry by lazy { LifecycleRegistry(this) }
    private val _store by lazy { ViewModelStore() }

    override fun getLifecycle(): Lifecycle = _lifecycleRegistry

    override fun getViewModelStore(): ViewModelStore = _store

    override val savedStateRegistry: SavedStateRegistry = SavedStateRegistryController.create(this).savedStateRegistry

    private fun handleLifecycleEvent(event: Lifecycle.Event) =
        _lifecycleRegistry.handleLifecycleEvent(event)

    @CallSuper
    override fun onCreate() {
        super.onCreate()
        // You must call performAttach() before calling performRestore(Bundle)
        savedStateRegistry.performAttach(lifecycle)
        savedStateRegistry.performRestore(null)
        handleLifecycleEvent(Lifecycle.Event.ON_CREATE)
    }

    @CallSuper
    override fun onTaskRemoved(rootIntent: Intent?) {
        super.onTaskRemoved(rootIntent)
        stopSelf()
    }

    @CallSuper
    override fun onDestroy() {
        super.onDestroy()
        handleLifecycleEvent(Lifecycle.Event.ON_DESTROY)
    }
}

Source: This project is based on Yannick's and Simsim's answer.


问:
I use PREPO to create Icons for my Apps and now I am getting Error code: 0x00000004 (no mapping for user data read) when I try to start the app
I have used the Prepo App on my MacBook pro for over a year to create icons for my IOS apps without any problems until now. The error page is titled "Prepo quit unexpectedly". When I try to start the app I get a screen with the title "Prepo quit unexpectedly"

screen shot of page displayed after clicking on the Prepo icon

When I click the Reopen button, I get the same Prepo quit unexpectedly error screen again.

After I got the error the first time, I rebooted but that did not solve the problem. I deleted and reinstalled the app and I still got the same error. I upgraded my OS to version Big Sur 11.7.2, deleted the app again and reinstalled it and I continue to get the same error.

The problem details are:

```<code>Process:               Prepo [63060]
Path:                  /Applications/Prepo.app/Contents/MacOS/Prepo
Identifier:            com.wearemothership.prepo
Version:               2.2.7 (15)
App Item ID:           476533227
App External ID:       814998962
Code Type:             X86-64 (Native)
Parent Process:        ??? [1]
Responsible:           Prepo [63060]
User ID:               501

Date/Time:             2022-12-21 10:58:28.002 -0500
OS Version:            macOS 11.7.2 (20G1020)
Report Version:        12
Anonymous UUID:        E2FA4633-7814-3867-481F-A421B375B852

Sleep/Wake UUID:       3769F2A2-F5CE-4C1E-9DF2-319DF9E09C4C

Time Awake Since Boot: 26000 seconds
Time Since Wake:       5900 seconds

System Integrity Protection: enabled

Crashed Thread:        10  Dispatch queue: com.apple.root.default-qos

Exception Type:        EXC_BAD_ACCESS (SIGSEGV)
Exception Codes:       KERN_INVALID_ADDRESS at 0x0000000000000008
Exception Note:        EXC_CORPSE_NOTIFY

Termination Signal:    Segmentation fault: 11
Termination Reason:    Namespace SIGNAL, Code 0xb
Terminating Process:   exc handler [63060]

 VM Regions Near 0x8:
</code>```

your text  __TEXT                      10eb80000-10ed1e000    [ 1656K] r-x/rwx SM=COW   /Applications/Prepo.app/Contents/MacOS/Prepo

Logical CPU:     0
Error Code:      0x00000004 (no mapping for user data read)
Trap Number:     14

Body:
I have used the Prepo App on my MacBook pro for over a year to create icons for my IOS apps without any problems until now. The error page is titled "Prepo quit unexpectedly". When I try to start the app I get a screen with the title "Prepo quit unexpectedly"

screen shot of page displayed after clicking on the Prepo icon

When I click the Reopen button, I get the same Prepo quit unexpectedly error screen again.

After I got the error the first time, I rebooted but that did not solve the problem. I deleted and reinstalled the app and I still got the same error. I upgraded my OS to version Big Sur 11.7.2, deleted the app again and reinstalled it and I continue to get the same error.

The problem details are:

Process:               Prepo [63060]
Path:                  /Applications/Prepo.app/Contents/MacOS/Prepo
Identifier:            com.wearemothership.prepo
Version:               2.2.7 (15)
App Item ID:           476533227
App External ID:       814998962
Code Type:             X86-64 (Native)
Parent Process:        ??? [1]
Responsible:           Prepo [63060]
User ID:               501

Date/Time:             2022-12-21 10:58:28.002 -0500
OS Version:            macOS 11.7.2 (20G1020)
Report Version:        12
Anonymous UUID:        E2FA4633-7814-3867-481F-A421B375B852

Sleep/Wake UUID:       3769F2A2-F5CE-4C1E-9DF2-319DF9E09C4C

Time Awake Since Boot: 26000 seconds
Time Since Wake:       5900 seconds

System Integrity Protection: enabled

Crashed Thread:        10  Dispatch queue: com.apple.root.default-qos

Exception Type:        EXC_BAD_ACCESS (SIGSEGV)
Exception Codes:       KERN_INVALID_ADDRESS at 0x0000000000000008
Exception Note:        EXC_CORPSE_NOTIFY

Termination Signal:    Segmentation fault: 11
Termination Reason:    Namespace SIGNAL, Code 0xb
Terminating Process:   exc handler [63060]

 VM Regions Near 0x8:

your text  __TEXT                      10eb80000-10ed1e000    [ 1656K] r-x/rwx SM=COW   /Applications/Prepo.app/Contents/MacOS/Prepo

Logical CPU:     0
Error Code:      0x00000004 (no mapping for user data read)
Trap Number:     14


问:
std::bad_alloc error trying to run gatsby dev server on a Docker container
I'm trying to run a newly created gatsby app's dev server in a Docker container. I created the app using gatsby-starter-blog (https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog/). My Docker configuration is as follows:

Dockerfile

```<code>FROM node:lts-alpine

EXPOSE 8000

RUN \
  apk add --no-cache python3 make g++ && \
  apk add vips-dev fftw-dev --update-cache \
  --repository http://dl-3.alpinelinux.org/alpine/edge/community \
  --repository http://dl-3.alpinelinux.org/alpine/edge/main \
 && rm -fR /var/cache/apk/*

RUN apk add automake autoconf libtool nasm

RUN npm install -g gatsby-cli

WORKDIR /app

COPY ./package.json ./package-lock.json /app
RUN npm install

COPY . /app
CMD ["gatsby", "develop", "-H", "0.0.0.0", "--verbose"]
</code>```

docker-compose.yml

```<code>version: '3'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8000:8000"
    volumes:
      - /app/node_modules
      - .:/app
    environment:
      - NODE_ENV=development
      - GATSBY_WEBPACK_PUBLICPATH=/

</code>```

.dockerignore

```<code>.cache/
*cache*

</code>```

But when I run docker compose up --build I get the following error:

```<code>[+] Building 12.8s (13/13) FINISHED
 => [internal] load build definition from Dockerfile                                                                                0.0s
 => => transferring dockerfile: 32B                                                                                0.0s
 => [internal] load .dockerignore                                                                                0.0s
 => => transferring context: 56B                                                                                0.0s
 => [internal] load metadata for docker.io/library/node:lts-alpine                                                                                1.1s
 => [internal] load build context                                                                                1.7s
 => => transferring context: 4.18MB                                                                                1.6s
 => [1/8] FROM docker.io/library/node:lts-alpine@sha256:a136ed7b0df71082cdb171f36d640ea3b392a5c70401c642326acee767b8c540                                     0.0s
 => CACHED [2/8] RUN   apk add --no-cache python3 make g++ &&   apk add vips-dev fftw-dev --update-cache   --repository http://dl-3.alpinelinux.org/alpine/  0.0s
 => CACHED [3/8] RUN apk add automake autoconf libtool nasm                                                                                0.0s
 => CACHED [4/8] RUN npm install -g gatsby-cli                                                                                0.0s
 => CACHED [5/8] WORKDIR /app                                                                                0.0s
 => CACHED [6/8] COPY ./package.json ./package-lock.json /app                                                                                0.0s
 => CACHED [7/8] RUN npm install                                                                                0.0s
 => [8/8] COPY . /app                                                                                6.9s
 => exporting to image                                                                                3.0s
 => => exporting layers                                                                                3.0s
 => => writing image sha256:a216d00a614b1695c521585fda41fbca38c8b625dcd6fec89e2059419d56e3d4                                                                 0.0s
 => => naming to docker.io/library/gatsby-starter-blog-web                                                                                0.0s

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
[+] Running 2/2
 ⠿ Network gatsby-starter-blog_default  Created                                                                                0.1s
 ⠿ Container gatsby-starter-blog-web-1  Created                                                                                4.7s
Attaching to gatsby-starter-blog-web-1
gatsby-starter-blog-web-1  | ╔════════════════════════════════════════════════════════════════════════╗
gatsby-starter-blog-web-1  | ║                                                                        ║
gatsby-starter-blog-web-1  | ║   Gatsby collects anonymous usage analytics                            ║
gatsby-starter-blog-web-1  | ║   to help improve Gatsby for all users.                                ║
gatsby-starter-blog-web-1  | ║                                                                        ║
gatsby-starter-blog-web-1  | ║   If you'd like to opt-out, you can use `gatsby telemetry --disable`   ║
gatsby-starter-blog-web-1  | ║   To learn more, checkout https://gatsby.dev/telemetry                 ║
gatsby-starter-blog-web-1  | ║                                                                        ║
gatsby-starter-blog-web-1  | ╚════════════════════════════════════════════════════════════════════════╝
^[[56;162Rgatsby-starter-blog-web-1  | verbose set gatsby_log_level: "verbose"
verbose set gatsby_executing_command: "develop"
verbose loading local command from:
gatsby-starter-blog-web-1  | /app/node_modules/gatsby/dist/commands/develop.js
verbose running command: develop
gatsby-starter-blog-web-1  |
gatsby-starter-blog-web-1  | verbose Transition to "initializing"

gatsby-starter-blog-web-1  |  ERROR #11903  API.TYPESCRIPT.COMPILATION
gatsby-starter-blog-web-1  |
gatsby-starter-blog-web-1  | There was an unhandled error during compilation for /app. Please run the command
gatsby-starter-blog-web-1  |  with the --verbose flag again.
gatsby-starter-blog-web-1  | std::bad_alloc
gatsby-starter-blog-web-1  |

gatsby-starter-blog-web-1  |
gatsby-starter-blog-web-1  |   Error: std::bad_alloc
gatsby-starter-blog-web-1  |
not finished compile gatsby files - 0.136s
gatsby-starter-blog-web-1  |
gatsby-starter-blog-web-1 exited with code 1
</code>```

Why am I getting a std::bad_alloc error? How can I fix this?

I tried adding the .cache folder to .Dockerignore and see if that makes the problem go away but without success.

Body:
I'm trying to run a newly created gatsby app's dev server in a Docker container. I created the app using gatsby-starter-blog (https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog/). My Docker configuration is as follows:

Dockerfile

FROM node:lts-alpine

EXPOSE 8000

RUN \
  apk add --no-cache python3 make g++ && \
  apk add vips-dev fftw-dev --update-cache \
  --repository http://dl-3.alpinelinux.org/alpine/edge/community \
  --repository http://dl-3.alpinelinux.org/alpine/edge/main \
 && rm -fR /var/cache/apk/*

RUN apk add automake autoconf libtool nasm

RUN npm install -g gatsby-cli

WORKDIR /app

COPY ./package.json ./package-lock.json /app
RUN npm install

COPY . /app
CMD ["gatsby", "develop", "-H", "0.0.0.0", "--verbose"]

docker-compose.yml

version: '3'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8000:8000"
    volumes:
      - /app/node_modules
      - .:/app
    environment:
      - NODE_ENV=development
      - GATSBY_WEBPACK_PUBLICPATH=/

.dockerignore

.cache/
*cache*

But when I run docker compose up --build I get the following error:

[+] Building 12.8s (13/13) FINISHED
 => [internal] load build definition from Dockerfile                                                                                0.0s
 => => transferring dockerfile: 32B                                                                                0.0s
 => [internal] load .dockerignore                                                                                0.0s
 => => transferring context: 56B                                                                                0.0s
 => [internal] load metadata for docker.io/library/node:lts-alpine                                                                                1.1s
 => [internal] load build context                                                                                1.7s
 => => transferring context: 4.18MB                                                                                1.6s
 => [1/8] FROM docker.io/library/node:lts-alpine@sha256:a136ed7b0df71082cdb171f36d640ea3b392a5c70401c642326acee767b8c540                                     0.0s
 => CACHED [2/8] RUN   apk add --no-cache python3 make g++ &&   apk add vips-dev fftw-dev --update-cache   --repository http://dl-3.alpinelinux.org/alpine/  0.0s
 => CACHED [3/8] RUN apk add automake autoconf libtool nasm                                                                                0.0s
 => CACHED [4/8] RUN npm install -g gatsby-cli                                                                                0.0s
 => CACHED [5/8] WORKDIR /app                                                                                0.0s
 => CACHED [6/8] COPY ./package.json ./package-lock.json /app                                                                                0.0s
 => CACHED [7/8] RUN npm install                                                                                0.0s
 => [8/8] COPY . /app                                                                                6.9s
 => exporting to image                                                                                3.0s
 => => exporting layers                                                                                3.0s
 => => writing image sha256:a216d00a614b1695c521585fda41fbca38c8b625dcd6fec89e2059419d56e3d4                                                                 0.0s
 => => naming to docker.io/library/gatsby-starter-blog-web                                                                                0.0s

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
[+] Running 2/2
 ⠿ Network gatsby-starter-blog_default  Created                                                                                0.1s
 ⠿ Container gatsby-starter-blog-web-1  Created                                                                                4.7s
Attaching to gatsby-starter-blog-web-1
gatsby-starter-blog-web-1  | ╔════════════════════════════════════════════════════════════════════════╗
gatsby-starter-blog-web-1  | ║                                                                        ║
gatsby-starter-blog-web-1  | ║   Gatsby collects anonymous usage analytics                            ║
gatsby-starter-blog-web-1  | ║   to help improve Gatsby for all users.                                ║
gatsby-starter-blog-web-1  | ║                                                                        ║
gatsby-starter-blog-web-1  | ║   If you'd like to opt-out, you can use `gatsby telemetry --disable`   ║
gatsby-starter-blog-web-1  | ║   To learn more, checkout https://gatsby.dev/telemetry                 ║
gatsby-starter-blog-web-1  | ║                                                                        ║
gatsby-starter-blog-web-1  | ╚════════════════════════════════════════════════════════════════════════╝
^[[56;162Rgatsby-starter-blog-web-1  | verbose set gatsby_log_level: "verbose"
verbose set gatsby_executing_command: "develop"
verbose loading local command from:
gatsby-starter-blog-web-1  | /app/node_modules/gatsby/dist/commands/develop.js
verbose running command: develop
gatsby-starter-blog-web-1  |
gatsby-starter-blog-web-1  | verbose Transition to "initializing"

gatsby-starter-blog-web-1  |  ERROR #11903  API.TYPESCRIPT.COMPILATION
gatsby-starter-blog-web-1  |
gatsby-starter-blog-web-1  | There was an unhandled error during compilation for /app. Please run the command
gatsby-starter-blog-web-1  |  with the --verbose flag again.
gatsby-starter-blog-web-1  | std::bad_alloc
gatsby-starter-blog-web-1  |

gatsby-starter-blog-web-1  |
gatsby-starter-blog-web-1  |   Error: std::bad_alloc
gatsby-starter-blog-web-1  |
not finished compile gatsby files - 0.136s
gatsby-starter-blog-web-1  |
gatsby-starter-blog-web-1 exited with code 1

Why am I getting a std::bad_alloc error? How can I fix this?

I tried adding the .cache folder to .Dockerignore and see if that makes the problem go away but without success.


问:
AWS Lightsail add a DNS record without prefix
I'm trying to add a DNS record from Lightsail on AWS to verify it for Sendinblue email services.

Sendinblue asks to add a TXT record to this url: "mywebsite.com" but Lightsail doesn't seem to let me do that:

How can I add this kind of txt record?


问:
How to add or generate a missing keyframe at the beginning of converted video in FFMPEG?
There is a MP4 file representing a downloaded stream transmission from which I want to extract a program that starts after the beginning and ends before end of this MP4 file. I cut the unwanted parts off by two simple ffmpeg 'conversions'. In the first step, I cut off the tail:

```<code>ffmpeg -i stream_record.mp4 -c copy -t 1:26:33.15 cut_record.mp4
</code>```

The second step is to cut off the unwanted beginning, but here I run into problems. E.g. after

```<code>ffmpeg -i cut_record.mp4 -c copy -ss 02:36 final_record.mp4
</code>```

I quite often get a file with no video in the beginning (up to 6 seconds), only audio is playing. This is because after skipping the time specified in -ss option there is no keyframe in the video stream and it takes up to those 6 seconds to find the first one. Unfortunately, my desired part of the downloaded stream quite seldom starts with a keyframe, and I must keep some part of the video preceding my program to maintain video integrity in the beginning of the file.

Is there a method in FFMPEG to add something (e.g. black rectangle) as the first keyframe right at the start of the copied video stream? I mean, other than completely recoding the video stream (I would like to keep the -c copy parameter in the process)?

I could probably achieve the desired result using Openshot Editor - but it recodes the video and audio, takes relatively long time and consumes much CPU and memory resources.

Body:
There is a MP4 file representing a downloaded stream transmission from which I want to extract a program that starts after the beginning and ends before end of this MP4 file. I cut the unwanted parts off by two simple ffmpeg 'conversions'. In the first step, I cut off the tail:

ffmpeg -i stream_record.mp4 -c copy -t 1:26:33.15 cut_record.mp4

The second step is to cut off the unwanted beginning, but here I run into problems. E.g. after

ffmpeg -i cut_record.mp4 -c copy -ss 02:36 final_record.mp4

I quite often get a file with no video in the beginning (up to 6 seconds), only audio is playing. This is because after skipping the time specified in -ss option there is no keyframe in the video stream and it takes up to those 6 seconds to find the first one. Unfortunately, my desired part of the downloaded stream quite seldom starts with a keyframe, and I must keep some part of the video preceding my program to maintain video integrity in the beginning of the file.

Is there a method in FFMPEG to add something (e.g. black rectangle) as the first keyframe right at the start of the copied video stream? I mean, other than completely recoding the video stream (I would like to keep the -c copy parameter in the process)?

I could probably achieve the desired result using Openshot Editor - but it recodes the video and audio, takes relatively long time and consumes much CPU and memory resources.


问:
How to get the current time in tm struct in c++?
What functions can I use to get the local time in a tm struct, which I can then pass to the _mkgmtime() function?

I tried using an example from cppreference, but the localtime() function is considered insecure, and the program won't compile because of that.


问:
how to use HashMap in Entity - Springboot
have Entity:

```<code>@Data
@Setter(value = AccessLevel.NONE)
@Entity
public class League {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "league")
    private long id;

    private int leagueRound;

    @OneToMany
    private List<Club> leagueTeams;

    @ElementCollection
    @CollectionTable(name = "league_fixtures_maping",
            joinColumns = {@JoinColumn(name = "league_id", referencedColumnName = "id")})
    @MapKeyColumn(name = "round_number")
    @Column(name = "games")
    private HashMap<Integer, List<Game>> leagueFixtures;

    // standard getters and setters

</code>```

Integer is number of Round in leagueFixtures.
List it's list of Games(two Teams, scores etc) of oneRound.

but anytime I try to start App, I got error: Failed to initialize JPA EntityManagerFactory: java.util.HashMap collection type not supported for property: pl.com.k1313.g4g.domain.league.League.leagueFixtures

how to properly use Map in my case?

Body:
have Entity:

@Data
@Setter(value = AccessLevel.NONE)
@Entity
public class League {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "league")
    private long id;

    private int leagueRound;

    @OneToMany
    private List<Club> leagueTeams;

    @ElementCollection
    @CollectionTable(name = "league_fixtures_maping",
            joinColumns = {@JoinColumn(name = "league_id", referencedColumnName = "id")})
    @MapKeyColumn(name = "round_number")
    @Column(name = "games")
    private HashMap<Integer, List<Game>> leagueFixtures;

    // standard getters and setters

Integer is number of Round in leagueFixtures.
List it's list of Games(two Teams, scores etc) of oneRound.

but anytime I try to start App, I got error: Failed to initialize JPA EntityManagerFactory: java.util.HashMap collection type not supported for property: pl.com.k1313.g4g.domain.league.League.leagueFixtures

how to properly use Map in my case?


问:
Can i save one property of c# objcet into two fields of document in MongoDB?
For example I have class:

```<code>public class User
{
    public string Name { get; set; } = "Bob";
    public int Age { get; set; } = 33;
}
</code>```

Can I save Name prop into two fields like

```<code> {
    "Name": "Bob",
    "_sortingName": "bob",
    "Age": 33
}
</code>```

My idea save sorting fields in lower case set index on it and sort by them. I want to avoid following:

```<code> "$addFields" :
             {
                 "_tempSortName" :
                 {
                     "$toLower" : "$Name"
                 }
              }
</code>```

Add some attribute to sorting field and save them in proper way.

Body:
For example I have class:

public class User
{
    public string Name { get; set; } = "Bob";
    public int Age { get; set; } = 33;
}

Can I save Name prop into two fields like

 {
    "Name": "Bob",
    "_sortingName": "bob",
    "Age": 33
}

My idea save sorting fields in lower case set index on it and sort by them. I want to avoid following:

 "$addFields" :
             {
                 "_tempSortName" :
                 {
                     "$toLower" : "$Name"
                 }
              }

Add some attribute to sorting field and save them in proper way.


问:
Javascript - My values aren't comparing properly, any ideas why?
I am trying to get a div that will become fixed when it is hit by the top of the screen and lose the fixed positioning when it hits the footer. I've tried to find the top and bottom of the div, the top of the screen and the top of the footer. I then compare the values but it does not work as expected. None of the value comparisons work at the expected time. Could anyone tell me where I am going wrong?

(I logged the values so I could see if it was working as expected.)
...

```<code>        $(window).scroll(function () {                  // assign scroll event listener

        const elem = $('.sidebar-section');
        const sidebar = elem[0].getBoundingClientRect();
        var sidebarTop = sidebar.top;
        var sidebarBottom = sidebar.bottom;

        const footerElem = document.getElementById("footer");
        const footer = footerElem.getBoundingClientRect();
        var footerTop = footer.top;

        var currentScroll = $(window).scrollTop(); // get current position
        console.log("siderbar " + sidebarBottom);
        console.log("footer " + footerTop);
        console.log("currentScroll " + currentScroll);
        if (currentScroll >= sidebarTop) {           // apply position: fixed if you
            $('.sidebar-section').css({                      // scroll to that element or below it
                position: 'fixed',
                top: '96px',
                left: '5%',
                width: 'auto'
            });
        } else if (sidebarBottom >= footerTop) {           // If the bottom of the div hits the footer in changes positioning
            console.log(hit);
            $('.sidebar-section').css({
                position: 'absolute',
                top: 'unset',
                bottom: '0',
            });
        } else {                                   // apply position: static
            $('.sidebar-section').css({                      // if you scroll above it
                position: 'static'
            });
        }

    });
</code>```

Body:
I am trying to get a div that will become fixed when it is hit by the top of the screen and lose the fixed positioning when it hits the footer. I've tried to find the top and bottom of the div, the top of the screen and the top of the footer. I then compare the values but it does not work as expected. None of the value comparisons work at the expected time. Could anyone tell me where I am going wrong?

(I logged the values so I could see if it was working as expected.)
...

        $(window).scroll(function () {                  // assign scroll event listener

        const elem = $('.sidebar-section');
        const sidebar = elem[0].getBoundingClientRect();
        var sidebarTop = sidebar.top;
        var sidebarBottom = sidebar.bottom;

        const footerElem = document.getElementById("footer");
        const footer = footerElem.getBoundingClientRect();
        var footerTop = footer.top;

        var currentScroll = $(window).scrollTop(); // get current position
        console.log("siderbar " + sidebarBottom);
        console.log("footer " + footerTop);
        console.log("currentScroll " + currentScroll);
        if (currentScroll >= sidebarTop) {           // apply position: fixed if you
            $('.sidebar-section').css({                      // scroll to that element or below it
                position: 'fixed',
                top: '96px',
                left: '5%',
                width: 'auto'
            });
        } else if (sidebarBottom >= footerTop) {           // If the bottom of the div hits the footer in changes positioning
            console.log(hit);
            $('.sidebar-section').css({
                position: 'absolute',
                top: 'unset',
                bottom: '0',
            });
        } else {                                   // apply position: static
            $('.sidebar-section').css({                      // if you scroll above it
                position: 'static'
            });
        }

    });


问:
How to save Mapbox routes or requests URL in Django Model
I have an html page with a form and Mapbox. Below is a picture of what it looks like.

I want the user to fill out a form and then plot a route on the map (see screenshot). Both the data of this form and the route itself were saved to the database, what would I use this route in the future.

When filling out the form on the left, everything is successfully saved to the database. But I have a question, how to save the routes that I build on the Mapbox map. I checked through the Network in the browser inspector, and the API itself creates the Mapbox request. I'm even thinking about how to save this Request URL, so that I can parse it later.

But here's how to save it to my table... For example I have a table Route and the columns are id, latitude and longitude.

Perhaps tell me in which direction to think, tk. I broke my head that how to pull this data.

Maybe some project code will help you.

django views.py:

```<code>def getForm(request):
    form = RouteForm()
    if request.method == 'POST':
        form = RouteForm(request.POST)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('home')
    return render(request, 'routes_form/route_form.html', {'form': form})
</code>```

This question is rather for those who have worked with Mapbox or know something about it.

P.S. I'm still just learning and I just don't understand some things yet, but I tried to google something to the maximum.

Body:
I have an html page with a form and Mapbox. Below is a picture of what it looks like.

I want the user to fill out a form and then plot a route on the map (see screenshot). Both the data of this form and the route itself were saved to the database, what would I use this route in the future.

When filling out the form on the left, everything is successfully saved to the database. But I have a question, how to save the routes that I build on the Mapbox map. I checked through the Network in the browser inspector, and the API itself creates the Mapbox request. I'm even thinking about how to save this Request URL, so that I can parse it later.

But here's how to save it to my table... For example I have a table Route and the columns are id, latitude and longitude.

Perhaps tell me in which direction to think, tk. I broke my head that how to pull this data.

Maybe some project code will help you.

django views.py:

def getForm(request):
    form = RouteForm()
    if request.method == 'POST':
        form = RouteForm(request.POST)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('home')
    return render(request, 'routes_form/route_form.html', {'form': form})

This question is rather for those who have worked with Mapbox or know something about it.

P.S. I'm still just learning and I just don't understand some things yet, but I tried to google something to the maximum.


问:
Juggl.io CSS not updating - cytoscape.js
super noob here!
Trying to update the css of a obsydian plugin named juggl.io as shown here: https://juggl.io/Features/Styling/CSS+Styling

Wanted just to make arrows bigger, so i took the code from https://js.cytoscape.org/#style/edge-line and came up with:

`

```<code>var cy = cytoscape({

  container: document.getElementById('cy'), // container to render in

  elements: [ // list of graph elements to start with
    { // node a
      data: { id: 'a' }
    },
    { // node b
      data: { id: 'b' }
    },
    { // edge ab
      data: { id: 'ab', source: 'a', target: 'b' }
    }
  ],

  style: [ // the stylesheet for the graph
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },

    {
      selector: 'edge',
      style: {
        'width': 333,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle',
        'target-arrow-scale': '99'
        'arrow-scale': 99
        'curve-style': 'bezier'
      }
    }
  ],

  layout: {
    name: 'grid',
    rows: 1
  }

});
</code>```

`

however nothing seems to change...

My goal is to make the arrows at the end of the edge look much bigger.

Body:
super noob here!
Trying to update the css of a obsydian plugin named juggl.io as shown here: https://juggl.io/Features/Styling/CSS+Styling

Wanted just to make arrows bigger, so i took the code from https://js.cytoscape.org/#style/edge-line and came up with:

`

var cy = cytoscape({

  container: document.getElementById('cy'), // container to render in

  elements: [ // list of graph elements to start with
    { // node a
      data: { id: 'a' }
    },
    { // node b
      data: { id: 'b' }
    },
    { // edge ab
      data: { id: 'ab', source: 'a', target: 'b' }
    }
  ],

  style: [ // the stylesheet for the graph
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },

    {
      selector: 'edge',
      style: {
        'width': 333,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle',
        'target-arrow-scale': '99'
        'arrow-scale': 99
        'curve-style': 'bezier'
      }
    }
  ],

  layout: {
    name: 'grid',
    rows: 1
  }

});

`

however nothing seems to change...

My goal is to make the arrows at the end of the edge look much bigger.


问:
Groovy throws error when "_-"are being used before root node while generating XML using XML markup builder .How to resolve it
While generating an XML from JSON I need to use "_-"before root node name due to naming convention rules but MarkupBuilder throws an error in groovy scripting. How can I resolve it?

input is JSON

```<code>{"x": "efgw343", "y": "Ywth"}
</code>```

**THE CODE I used is **

```<code>import com.sap.gateway.ip.core.customdev.util.Message;
import java.util.HashMap;
import groovy.json.JsonSlurper ;
import groovy.json.*

def Message processData(Message message) {

    def step = new JsonSlurper().parseText(message.getBody(java.lang.String))
def writer = new StringWriter()
def xmlRequest = new groovy.xml.MarkupBuilder(writer)
xmlRequest.mkp.xmlDeclaration(version: "1.0", encoding: "utf-8")
xmlRequest._-bbc(xmlns:"urn:xyz.com"){
           I_A(step.x)
           I_B(step.y)
}
message.setBody(writer.toString())
return message
}
</code>```

the Output I am expecting is

```<code><?xml version='1.0' encoding='utf-8'?>
<_-bbc xmlns='urn:xyz.com'>
  <I_A>efgw343</I_A>
  <I_B>Ywth</I_B>
</_-bbc>
</code>```

THE ERROR MESSAGE I am getting is

```<code>groovy.lang.MissingPropertyException: No such property: _ for class: groovy.xml.MarkupBuilder
Possible solutions: mkp
    at groovyide_com.processData(groovyide_com:21)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at com.groovyide.ExecutorService$1.run(ExecutorService.java:144)
Error:
TypeError: Cannot convert undefined or null to object
</code>```

Can anyone help in resolving this? Because this would reduce our code's length drastically.

Body:
While generating an XML from JSON I need to use "_-"before root node name due to naming convention rules but MarkupBuilder throws an error in groovy scripting. How can I resolve it?

input is JSON

{"x": "efgw343", "y": "Ywth"}

**THE CODE I used is **

import com.sap.gateway.ip.core.customdev.util.Message;
import java.util.HashMap;
import groovy.json.JsonSlurper ;
import groovy.json.*

def Message processData(Message message) {

    def step = new JsonSlurper().parseText(message.getBody(java.lang.String))
def writer = new StringWriter()
def xmlRequest = new groovy.xml.MarkupBuilder(writer)
xmlRequest.mkp.xmlDeclaration(version: "1.0", encoding: "utf-8")
xmlRequest._-bbc(xmlns:"urn:xyz.com"){
           I_A(step.x)
           I_B(step.y)
}
message.setBody(writer.toString())
return message
}

the Output I am expecting is

<?xml version='1.0' encoding='utf-8'?>
<_-bbc xmlns='urn:xyz.com'>
  <I_A>efgw343</I_A>
  <I_B>Ywth</I_B>
</_-bbc>

THE ERROR MESSAGE I am getting is

groovy.lang.MissingPropertyException: No such property: _ for class: groovy.xml.MarkupBuilder
Possible solutions: mkp
    at groovyide_com.processData(groovyide_com:21)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at com.groovyide.ExecutorService$1.run(ExecutorService.java:144)
Error:
TypeError: Cannot convert undefined or null to object

Can anyone help in resolving this? Because this would reduce our code's length drastically.


问:
Unable to call methods of Unity Game from Android Application
I have created a Unity Game and I integrated Unity Game with my native android application.
So the problem is with method call. Actullay I have created some methods in Unity and trying to access that from Android but Sometimes the Method get call but sometimes it is not.
Ex.

Unity Methods - Spawner.cs

```<code> void spawnClouds(string val)
    {
        Controller.isSpawning = true;
        StartCoroutine(spawn());
    }
    void stopClouds(string val)
    {
        Controller.isSpawning = false;
    }
</code>```

Calling from Android

```<code>public static void startGame() {
    UnityPlayer.UnitySendMessage("Spawner", "spawnClouds", "");
}

public static void stopGame() {
    UnityPlayer.UnitySendMessage("Spawner", "stopClouds", "");
}
</code>```

But In similar way, I am trying to execute
Unity Method - Player.cs

```<code>void movePlayer(string val1)
    {
        print("Player Moved with value "+val1);
        ...
    }
</code>```

From  Android

```<code>public static void makeMove(float position, float totalScale) {
    float val = position * 100 / totalScale;
    val = (float) Math.ceil(val);
    if (val < 0) {
        UnityPlayer.UnitySendMessage("Player", "movePlayer", String.valueOf(0));
    } else if (val > 100) {
        UnityPlayer.UnitySendMessage("Player", "movePlayer", String.valueOf(100));
    } else {
        UnityPlayer.UnitySendMessage("Player", "movePlayer", String.valueOf(val));
    }
}
</code>```

This is not working.
No idea what's going on here.
Help.

Body:
I have created a Unity Game and I integrated Unity Game with my native android application.
So the problem is with method call. Actullay I have created some methods in Unity and trying to access that from Android but Sometimes the Method get call but sometimes it is not.
Ex.

Unity Methods - Spawner.cs

 void spawnClouds(string val)
    {
        Controller.isSpawning = true;
        StartCoroutine(spawn());
    }
    void stopClouds(string val)
    {
        Controller.isSpawning = false;
    }

Calling from Android

public static void startGame() {
    UnityPlayer.UnitySendMessage("Spawner", "spawnClouds", "");
}

public static void stopGame() {
    UnityPlayer.UnitySendMessage("Spawner", "stopClouds", "");
}

But In similar way, I am trying to execute
Unity Method - Player.cs

void movePlayer(string val1)
    {
        print("Player Moved with value "+val1);
        ...
    }

From  Android

public static void makeMove(float position, float totalScale) {
    float val = position * 100 / totalScale;
    val = (float) Math.ceil(val);
    if (val < 0) {
        UnityPlayer.UnitySendMessage("Player", "movePlayer", String.valueOf(0));
    } else if (val > 100) {
        UnityPlayer.UnitySendMessage("Player", "movePlayer", String.valueOf(100));
    } else {
        UnityPlayer.UnitySendMessage("Player", "movePlayer", String.valueOf(val));
    }
}

This is not working.
No idea what's going on here.
Help.


问:
Text input doesnt work inside Bootstrap popover
I have the following HTML to open a popup. Here the button works fine. It is clickable, but not an input. The text input seems to have a hidden disabled=true, but it's not.

What could be the problem?

const pop = new bootstrap.Popover(document.querySelector('[data-bs-toggle="popover"]'));```
<pre class="snippet-code-html lang-html prettyprint-override"><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<img src="https://via.placeholder.com/100"
  data-bs-toggle="popover"
  data-bs-offset="0,14"
  data-bs-placement="top"
  data-bs-html="true"
  data-bs-content="<div class='input-group-sm'>
  <input type='text' class='form-control' placeholder='https://...'/>
  <button class='btn btn-primary'>Save</button></div>"
>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script></code>```

Body:
I have the following HTML to open a popup. Here the button works fine. It is clickable, but not an input. The text input seems to have a hidden disabled=true, but it's not.

What could be the problem?

const pop = new bootstrap.Popover(document.querySelector('[data-bs-toggle="popover"]'));

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<img src="https://via.placeholder.com/100"
  data-bs-toggle="popover"
  data-bs-offset="0,14"
  data-bs-placement="top"
  data-bs-html="true"
  data-bs-content="

  <input type='text' class='form-control' placeholder='https://...'/>
  <button class='btn btn-primary'>Save</button>
"
>


问:
Imageview with different position/scale from preview to simulator
I am trying to add buttons and text up in background image but either the imageview is shifting down or the textview&buttons are shifting down. I think the screenshot explains the problem itself.

Screenshot of problem

EDIT: Tried to add both red underlined lines to code to see if it helps but it didnt.


问:
How to read file content to variable in Tupfile (windows)
I am experimenting with the tup build system and now try to make the tup-over-maven build file.
I want to extract the project version from the POM file and use it to specify output files like this:

```<code>: pom.xml |> $(mvn) help:evaluate -Dexpression=project.version -q -DforceStdout > .version |> .version
set project_version = **???? must be content of .version file ????**
: |> $(mvn) package |> target/global-config-$(project_version).jar  target/global-config-$(project_version)-sources.jar | $(temp_outputs)
</code>```

Is this possible?
The environment is Windows, so backtick is not an option.

Body:
I am experimenting with the tup build system and now try to make the tup-over-maven build file.
I want to extract the project version from the POM file and use it to specify output files like this:

: pom.xml |> $(mvn) help:evaluate -Dexpression=project.version -q -DforceStdout > .version |> .version
set project_version = **???? must be content of .version file ????**
: |> $(mvn) package |> target/global-config-$(project_version).jar  target/global-config-$(project_version)-sources.jar | $(temp_outputs)

Is this possible?
The environment is Windows, so backtick is not an option.


问:
Menu items are invisible when opening menu - angular material
When I click to open the menu, the child menus are invisible, if I scroll or change the browser's zoom they appear by themselves.

Does anyone know how to solve this problem?


问:
I can't add the image path
I want to add the image code from a different query to another query, but it didn't work no matter what I did.

THESE ARE SEPARATE CODES WORKING PROPERLY

This is the working code I want to add:

```<code>import React from 'react'
import styled from 'styled-components'
import { Flex, Skeleton, Text } from '@pancakeswap/uikit'
import Balance from 'components/Balance'
import { useTranslation } from 'contexts/Localization'

interface TopFarmPoolProps {
  title: string
  percentage: number
  index: number
  visible: boolean
}

const StyledWrapper = styled(Flex)<{ index: number }>`
  position: relative;
`

const AbsoluteWrapper = styled(Flex)<{ visible: boolean; index: number; topOffset: string }>`
  position: absolute;
  top: ${({ topOffset }) => topOffset};
  opacity: ${({ visible }) => (visible ? 1 : 0)};
  margin-top: ${({ visible }) => (visible ? 0 : `50%`)};
  transition: opacity, margin-top, 0.4s ease-out;
  flex-direction: column;

  ${({ index, theme }) =>
    index > 0
      ? `
         ${theme.mediaQueries.sm} {
           height: 80px;
           top: 0;
           padding-left: 16px;
           border-left: 1px ${theme.colors.inputSecondary} solid;
         }
       `
      : `padding-right: 16px;`}
`

const TopFarmPool: React.FC<TopFarmPoolProps> = ({ title, percentage, index, visible }) => {
  const { t } = useTranslation()

  const topOffset = () => {
    if (index >= 0 && index < 2) {
      return '0px'
    }

    if (index >= 2 && index < 3) {
      return '80px'
    }

    return '160px'
  }

  return (
    <StyledWrapper index={index}>
      <AbsoluteWrapper index={index} visible={visible} topOffset={topOffset()}>
        {title ? (
          <Text bold mb="8px" fontSize="12px" color="secondary">
            {title}
          </Text>
        ) : (
          <Skeleton width={80} height={12} mb="8px" />
        )}
        {percentage ? (
          <Balance lineHeight="1.1" fontSize="16px" bold unit="%" value={percentage} />
        ) : (
          <Skeleton width={60} height={16} />
        )}
        {percentage ? (
          <Text fontSize="16px" color="textSubtle">
            {t('APR')}
          </Text>
        ) : (
          <Skeleton width={30} height={16} mt="4px" />
        )}
      </AbsoluteWrapper>
    </StyledWrapper>
  )
}

export default TopFarmPool

</code>```

This is the other working code where I get the image path.

```<code>import React from 'react'
import { TokenPairImage, ImageProps } from '@pancakeswap/uikit'
import { mainnetTokens } from 'config/constants/tokens'

const CakeVaultTokenPairImage: React.FC<Omit<ImageProps, 'src'>> = (props) => {
  const primaryTokenSrc = `/images/tokens/${mainnetTokens.cake.address}.svg`

  return <TokenPairImage primarySrc={primaryTokenSrc} secondarySrc="/images/tokens/autorenew.svg" {...props} />
}

export default CakeVaultTokenPairImage
</code>```

THIS IS THE CODE PAGE I WANTED TO ADD, BUT IT WAS NOT SUCCESSFUL.
I tried this way and I get an error.

```<code>import React from 'react'
import styled from 'styled-components'
import { Flex, Skeleton, Text } from '@pancakeswap/uikit'
import Balance from 'components/Balance'
import { useTranslation } from 'contexts/Localization'
import { TokenPairImage, ImageProps } from '@pancakeswap/uikit'
import { mainnetTokens } from 'config/constants/tokens'

interface TopFarmPoolProps {
  title: string
  percentage: number
  index: number
  visible: boolean
}

const StyledWrapper = styled(Flex)<{ index: number }>`
  position: relative;
`

const AbsoluteWrapper = styled(Flex)<{ visible: boolean; index: number; topOffset: string }>`
  position: absolute;
  top: ${({ topOffset }) => topOffset};
  opacity: ${({ visible }) => (visible ? 1 : 0)};
  margin-top: ${({ visible }) => (visible ? 0 : `50%`)};
  transition: opacity, margin-top, 0.4s ease-out;
  flex-direction: column;

  ${({ index, theme }) =>
    index > 0
      ? `
         ${theme.mediaQueries.sm} {
           height: 80px;
           top: 0;
           padding-left: 16px;
           border-left: 1px ${theme.colors.inputSecondary} solid;
         }
       `
      : `padding-right: 16px;`}
`

const TopFarmPool: React.FC<TopFarmPoolProps> = ({ title, percentage, index, visible }) => {
  const { t } = useTranslation()

  const topOffset = () => {
    if (index >= 0 && index < 2) {
      return '0px'
    }

    if (index >= 2 && index < 3) {
      return '80px'
    }

    return '160px'
  }

  return (
    <StyledWrapper index={index}>
      <AbsoluteWrapper index={index} visible={visible} topOffset={topOffset()}>

      // THIS IS WHERE I WANT TO EXECUTE THE CODE. //
     <TokenPairImage primarySrc={primaryTokenSrc} secondarySrc="/images/tokens/autorenew.svg" {...props} />

        {title ? (
          <Text bold mb="8px" fontSize="12px" color="secondary">
            {title}
          </Text>
        ) : (
          <Skeleton width={80} height={12} mb="8px" />
        )}
        {percentage ? (
          <Balance lineHeight="1.1" fontSize="16px" bold unit="%" value={percentage} />
        ) : (
          <Skeleton width={60} height={16} />
        )}
        {percentage ? (
          <Text fontSize="16px" color="textSubtle">
            {t('APR')}
          </Text>
        ) : (
          <Skeleton width={30} height={16} mt="4px" />
        )}
      </AbsoluteWrapper>
    </StyledWrapper>
  )
}

export default TopFarmPool

</code>```

Title: I can't add the image path

Body:
I want to add the image code from a different query to another query, but it didn't work no matter what I did.

THESE ARE SEPARATE CODES WORKING PROPERLY

This is the working code I want to add:

import React from 'react'
import styled from 'styled-components'
import { Flex, Skeleton, Text } from '@pancakeswap/uikit'
import Balance from 'components/Balance'
import { useTranslation } from 'contexts/Localization'

interface TopFarmPoolProps {
  title: string
  percentage: number
  index: number
  visible: boolean
}

const StyledWrapper = styled(Flex)<{ index: number }>`
  position: relative;
`

const AbsoluteWrapper = styled(Flex)<{ visible: boolean; index: number; topOffset: string }>`
  position: absolute;
  top: ${({ topOffset }) => topOffset};
  opacity: ${({ visible }) => (visible ? 1 : 0)};
  margin-top: ${({ visible }) => (visible ? 0 : `50%`)};
  transition: opacity, margin-top, 0.4s ease-out;
  flex-direction: column;

  ${({ index, theme }) =>
    index > 0
      ? `
         ${theme.mediaQueries.sm} {
           height: 80px;
           top: 0;
           padding-left: 16px;
           border-left: 1px ${theme.colors.inputSecondary} solid;
         }
       `
      : `padding-right: 16px;`}
`

const TopFarmPool: React.FC<TopFarmPoolProps> = ({ title, percentage, index, visible }) => {
  const { t } = useTranslation()

  const topOffset = () => {
    if (index >= 0 && index < 2) {
      return '0px'
    }

    if (index >= 2 && index < 3) {
      return '80px'
    }

    return '160px'
  }

  return (

  )
}

export default TopFarmPool

This is the other working code where I get the image path.

import React from 'react'
import { TokenPairImage, ImageProps } from '@pancakeswap/uikit'
import { mainnetTokens } from 'config/constants/tokens'

const CakeVaultTokenPairImage: React.FC<Omit<ImageProps, 'src'>> = (props) => {
  const primaryTokenSrc = `/images/tokens/${mainnetTokens.cake.address}.svg`

  return <TokenPairImage primarySrc={primaryTokenSrc} secondarySrc="/images/tokens/autorenew.svg" {...props} />
}

export default CakeVaultTokenPairImage

THIS IS THE CODE PAGE I WANTED TO ADD, BUT IT WAS NOT SUCCESSFUL.
I tried this way and I get an error.

import React from 'react'
import styled from 'styled-components'
import { Flex, Skeleton, Text } from '@pancakeswap/uikit'
import Balance from 'components/Balance'
import { useTranslation } from 'contexts/Localization'
import { TokenPairImage, ImageProps } from '@pancakeswap/uikit'
import { mainnetTokens } from 'config/constants/tokens'

interface TopFarmPoolProps {
  title: string
  percentage: number
  index: number
  visible: boolean
}

const StyledWrapper = styled(Flex)<{ index: number }>`
  position: relative;
`

const AbsoluteWrapper = styled(Flex)<{ visible: boolean; index: number; topOffset: string }>`
  position: absolute;
  top: ${({ topOffset }) => topOffset};
  opacity: ${({ visible }) => (visible ? 1 : 0)};
  margin-top: ${({ visible }) => (visible ? 0 : `50%`)};
  transition: opacity, margin-top, 0.4s ease-out;
  flex-direction: column;

  ${({ index, theme }) =>
    index > 0
      ? `
         ${theme.mediaQueries.sm} {
           height: 80px;
           top: 0;
           padding-left: 16px;
           border-left: 1px ${theme.colors.inputSecondary} solid;
         }
       `
      : `padding-right: 16px;`}
`

const TopFarmPool: React.FC<TopFarmPoolProps> = ({ title, percentage, index, visible }) => {
  const { t } = useTranslation()

  const topOffset = () => {
    if (index >= 0 && index < 2) {
      return '0px'
    }

    if (index >= 2 && index < 3) {
      return '80px'
    }

    return '160px'
  }

  return (

  )
}

export default TopFarmPool


问:
Need to save a file twice before Vite HMR and vitejs/plugin-react update changes
I am setting up a boilerplate using React and Vite to build the frontend of my Electron application, the boilerplate is almost done I just need to add hot reloading to the React app. The issue that I am having is that when I change a file and save it the change is detected by the HMR (change detections IS logged to the terminal) but it is not updated in the browser (even if refreshing the page) until I save it a second time without even changing anything.

I installed the vitejs/plugin-react plugin as it is required for HMR with React but it still gives this issue.

enter image description here


问:
Amazon Cognito (with AWS Amplify + React): Best way to make signups possible only through one-time signup links?
I am writing a web application that will have users outside of my company, but should not have a general "sign up" page. The flow that I am trying to build:

We send new users (customers who have signed a contract with us) a single-use link (e.g. service.com/signup?uuid=[uuid])

The link leads to a page where they set their password. This completes their account creation.

The email for the account is already defined, and connected to the link that was sent to them. For this reason, an email confirmation should not be necessary.

There is also a value for each account called "role", which is not user-facing. When we define a new user, we define a new "role" with it. The UUID of sign-up link is connected to both an email address and a "role".

My current implementation works like this:

One of our existing internal databases has a table of uuids and their corresponding emails and roles. When we want to create a new user, we add a new row with their email and "role". This triggers an invite email that includes the signup link.

The web application, which is written with React + AWS Amplify, shows a signup page built with Amplify's Authenticator UI for React. Custom JS prefills the email field and makes it not editable.

The user sets their password, and behind the scenes React calls a Lambda function to get the email address and role associated with that link. The new account is created with the email, role, and provide password. The user doesn't see any UI related to the "role" because it is only for internal use.

I am aware that this may not be the wisest way to do this. I have a feeling that new accounts should be created by us via Cognito first, and the user should be sent a link to set a password for their already-created account. I don't know the best way to do this, though, especially if I would like to keep the ability to make the signup process more complex (e.g. requiring 2FA, so the user needs to provide a phone number as well as a password and then verify it).

There are several ways I can think of approaching this set of problems, but I feel like my knowledge of AWS is not developed enough to have an instinct for the "correct" way. Is there something I should be doing differently?


问:
Python tkinter installation failing initial test
I'm trying to get off the ground with tkinter, running Python 3.11.0 on Windows 11.

Tkinter and ttk are supposed to come packaged with Python 3.1 and up.
Nevertheless, when I run the test for a successful installation, Python simply hangs.

I'm in my VS Code codespace in Harvard's GitHub container for registrants in the course CS50P, so I didn't have to download Python, am just using what's provided. I would have thought everything there was up to date, but maybe a manual installation of tkinter is needed?

Code lines below pasted from the TkDocs Tutorial, page on installing tkinter:

```<code>$ python
Python 3.11.0 (main, Nov 29 2022, 18:19:24) [GCC 11.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import tkinter
>>> tkinter._test()

</code>```

Expected result (from TkDocs Tutorial): "This should pop up a small window; the first line at the top of the window should say, "This is Tcl/Tk version 8.6".

Actual result: No tkinter window pops up as expected, yet neither is there an error message to say "No module named tkinter". Just a static cursor at the bottom of my code. To get out, I have to terminate Python with Ctrl + z.

Suggestions from python Tkinter not working:

```<code>$ py -m pip install tkinter
bash: py: command not found
CS50P/project/ $ pip install tkinter
Defaulting to user installation because normal site-packages is not writeable
ERROR: Could not find a version that satisfies the requirement tkinter (from versions: none)
ERROR: No matching distribution found for tkinter
</code>```

What, then, are the steps? TkDocs Tutorial assumes all will be well and gives no further help with this problem.

Body:
I'm trying to get off the ground with tkinter, running Python 3.11.0 on Windows 11.

Tkinter and ttk are supposed to come packaged with Python 3.1 and up.
Nevertheless, when I run the test for a successful installation, Python simply hangs.

I'm in my VS Code codespace in Harvard's GitHub container for registrants in the course CS50P, so I didn't have to download Python, am just using what's provided. I would have thought everything there was up to date, but maybe a manual installation of tkinter is needed?

Code lines below pasted from the TkDocs Tutorial, page on installing tkinter:

$ python
Python 3.11.0 (main, Nov 29 2022, 18:19:24) [GCC 11.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import tkinter
>>> tkinter._test()

Expected result (from TkDocs Tutorial): "This should pop up a small window; the first line at the top of the window should say, "This is Tcl/Tk version 8.6".

Actual result: No tkinter window pops up as expected, yet neither is there an error message to say "No module named tkinter". Just a static cursor at the bottom of my code. To get out, I have to terminate Python with Ctrl + z.

Suggestions from python Tkinter not working:

$ py -m pip install tkinter
bash: py: command not found
CS50P/project/ $ pip install tkinter
Defaulting to user installation because normal site-packages is not writeable
ERROR: Could not find a version that satisfies the requirement tkinter (from versions: none)
ERROR: No matching distribution found for tkinter

What, then, are the steps? TkDocs Tutorial assumes all will be well and gives no further help with this problem.


问:
Facebook Marketing API - Get Creatives and Ads data
I would like to grab the URL of the ad image along with other information.

The ad ID generated from /ads or /adcreatives is not the same as the one generated from the /insights URL.

How can I link the ad image to its respective information?


问:
SAS/ACCESS ODBC: Problem viewing tables with 'libname odbc'
```<code>libname Bi odbc  datasrc=Reporting schema=dbo
user= "XXXX" password="XXXX";
</code>```

using this code Im able to create the library successfully but unable to see/view the tables

Body:
libname Bi odbc  datasrc=Reporting schema=dbo
user= "XXXX" password="XXXX";

using this code Im able to create the library successfully but unable to see/view the tables


问:
Please how do I add maxFiles properly to this code? I have tried a billion different things, but it just does not work with the dropzone
```<code>import { FC } from 'react';
import { useDropzone } from 'react-dropzone';
import { FileIcon } from 'assets/icons';

import Typography from '../Typography';

import { TMultipleDropzoneProps } from './types';
import styles from './MultipleDropzone.module.scss';

const MultipleDropzone: FC<TMultipleDropzoneProps> = ({ title, onDrop }) => {
  const { getRootProps, getInputProps, open, isDragAccept, isFocused, isDragReject } = useDropzone({
    accept: { 'image/*': ['.jpeg', '.png'], 'video/mp4': ['.mp4', '.MP4'] },
    onDrop,
    noClick: true,
    noKeyboard: true,
    maxFiles: 3,
  });

  const accept = isDragAccept ? 1 : 0;
  const focused = isFocused ? 1 : 0;
  const rejected = isDragReject ? 1 : 0;

  // This is used for warning in console for camel-case attributes to the DOM element and to make it boolean

  return (
    <div className={styles.wrapper}>
      <div
        onClick={open}
        className={styles.container}
        {...getRootProps({ accept, focused, rejected })}
      >
        <input {...getInputProps({})} />
        {rejected === 1 && (
          <div className={styles.error}>
            Some files were rejected because they did not meet the requirements.
          </div>
        )}

        <div className={styles.container__content}>
          <Typography>{title}</Typography>
        </div>
        <button onClick={open} className={styles.icon}>
          <FileIcon />
        </button>
      </div>
    </div>
  );
};

export default MultipleDropzone;

</code>```

the type file:

```<code>export type TMultipleDropzoneProps = {
  title: string;
  onDrop: (e: any, a: any) => void;
  isFileUploaded: boolean;
  maxFiles?: number;

};

</code>```

the modal I am using it in:

```<code>import { useContext, useState } from 'react';

import { ModalContext } from 'context/Modal';
import { FileExtended } from 'types/global/file';
import { useAppDispatch, useAppSelector } from 'hooks';
import { NewPostTextArea, MultipleDropzone, Typography, Button } from 'components';
import { createActivityPost } from 'store/slices/activitiesSlice/activitiesThunks';
import { CloseCircleIcon } from 'assets/icons';

import { TImages } from './types';
import styles from './NewPost.module.scss';

const NewPost = () => {
  const { closeModal } = useContext(ModalContext);
  const [images, setImages] = useState<TImages[]>([]);
  const [description, setDescription] = useState<string>('');

  const dispatch = useAppDispatch();
  const { userData } = useAppSelector((state) => state.auth);

  const createPost = () => {
    const post = {
      user_id: userData?.id as number,
      description: description,
      content_url: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg',
      content_type: 'string',
    };

    closeModal();

    if (description.trim()) {
      dispatch(createActivityPost(post));
    }
  };

  const isFileUploaded = images.length > 0;

  const onDrop = (acceptedFiles: FileExtended[], maxFiles: number) => {
    acceptedFiles.forEach((file) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        setImages((prev) => [
          ...prev,
          {
            id: Date.now(),
            type: file.type,
            src: e.target && e.target.result,
            file: file,
            description: file.name,
          },
        ]);
      };
      reader.readAsDataURL(file);
    });

    let modifiedAcceptedFiles = acceptedFiles;
    if (acceptedFiles.length > maxFiles) {
      // If the number of files exceeds the maxFiles limit,
      // slice the extra files off the array and show an error message
      modifiedAcceptedFiles = acceptedFiles.slice(0, maxFiles);
    }
  };

  const removeImage = (id: number) => {
    setImages(images.filter((image) => image.id !== id));
  };

  const imageFiles = images.map((image) => {
    return (
      <div key={image.id} className={styles.container__main__case__box}>
        <CloseCircleIcon
          onClick={() => removeImage(image.id)}
          className={styles.container__main__case__box_close}
        />
        {image.type.includes('video') ? (
          <video src={image.src as string} autoPlay loop />
        ) : (
          <img src={image.src as string} alt={image.description} />
        )}
      </div>
    );
  });

  return (
    <div className={styles.container}>
      <Typography className={styles.container__head}>New Post</Typography>
      <div className={styles.container__description}>
        <NewPostTextArea value={description} setValue={setDescription} />
      </div>
      <div className={styles.container__main}>
        <Typography className={styles.container__main__head}>{images.length} items</Typography>
        <div className={styles.container__main__case}>{imageFiles}</div>
      </div>
      <MultipleDropzone
        onDrop={onDrop}
        title='Please attach your files here (Max 3)'
        isFileUploaded={isFileUploaded}
      />
      <div className={styles.container__footer}>
        <Button className={styles.container__footer_close} onClick={closeModal}>
          Close
        </Button>
        <Button type='submit' className={styles.container__footer_submit} onClick={createPost}>
          Create
        </Button>
      </div>
    </div>
  );
};

export default NewPost;

</code>```

I tried adding maxFiles to every single component, I also tried adding it to the onDrop component. New to React ( 1 week) and I am slowly losing my sanity. I will never forgive Zuckerberg for this apparition he has brought upon coderkin. Even chatGPT could not help my case.

Body:
import { FC } from 'react';
import { useDropzone } from 'react-dropzone';
import { FileIcon } from 'assets/icons';

import Typography from '../Typography';

import { TMultipleDropzoneProps } from './types';
import styles from './MultipleDropzone.module.scss';

const MultipleDropzone: FC<TMultipleDropzoneProps> = ({ title, onDrop }) => {
  const { getRootProps, getInputProps, open, isDragAccept, isFocused, isDragReject } = useDropzone({
    accept: { 'image/*': ['.jpeg', '.png'], 'video/mp4': ['.mp4', '.MP4'] },
    onDrop,
    noClick: true,
    noKeyboard: true,
    maxFiles: 3,
  });

  const accept = isDragAccept ? 1 : 0;
  const focused = isFocused ? 1 : 0;
  const rejected = isDragReject ? 1 : 0;

  // This is used for warning in console for camel-case attributes to the DOM element and to make it boolean

  return (

        <input {...getInputProps({})} />
        {rejected === 1 && (

            Some files were rejected because they did not meet the requirements.

        )}

          <Typography>{title}</Typography>

        <button onClick={open} className={styles.icon}>
          <FileIcon />
        </button>

  );
};

export default MultipleDropzone;

the type file:

export type TMultipleDropzoneProps = {
  title: string;
  onDrop: (e: any, a: any) => void;
  isFileUploaded: boolean;
  maxFiles?: number;

};

the modal I am using it in:

import { useContext, useState } from 'react';

import { ModalContext } from 'context/Modal';
import { FileExtended } from 'types/global/file';
import { useAppDispatch, useAppSelector } from 'hooks';
import { NewPostTextArea, MultipleDropzone, Typography, Button } from 'components';
import { createActivityPost } from 'store/slices/activitiesSlice/activitiesThunks';
import { CloseCircleIcon } from 'assets/icons';

import { TImages } from './types';
import styles from './NewPost.module.scss';

const NewPost = () => {
  const { closeModal } = useContext(ModalContext);
  const [images, setImages] = useState<TImages[]>([]);
  const [description, setDescription] = useState<string>('');

  const dispatch = useAppDispatch();
  const { userData } = useAppSelector((state) => state.auth);

  const createPost = () => {
    const post = {
      user_id: userData?.id as number,
      description: description,
      content_url: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg',
      content_type: 'string',
    };

    closeModal();

    if (description.trim()) {
      dispatch(createActivityPost(post));
    }
  };

  const isFileUploaded = images.length > 0;

  const onDrop = (acceptedFiles: FileExtended[], maxFiles: number) => {
    acceptedFiles.forEach((file) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        setImages((prev) => [
          ...prev,
          {
            id: Date.now(),
            type: file.type,
            src: e.target && e.target.result,
            file: file,
            description: file.name,
          },
        ]);
      };
      reader.readAsDataURL(file);
    });

    let modifiedAcceptedFiles = acceptedFiles;
    if (acceptedFiles.length > maxFiles) {
      // If the number of files exceeds the maxFiles limit,
      // slice the extra files off the array and show an error message
      modifiedAcceptedFiles = acceptedFiles.slice(0, maxFiles);
    }
  };

  const removeImage = (id: number) => {
    setImages(images.filter((image) => image.id !== id));
  };

  const imageFiles = images.map((image) => {
    return (

        <CloseCircleIcon
          onClick={() => removeImage(image.id)}
          className={styles.container__main__case__box_close}
        />
        {image.type.includes('video') ? (
          <video src={image.src as string} autoPlay loop />
        ) : (

        )}

    );
  });

  return (

      <Typography className={styles.container__head}>New Post</Typography>

        <NewPostTextArea value={description} setValue={setDescription} />

        <Typography className={styles.container__main__head}>{images.length} items</Typography>

{imageFiles}

      <MultipleDropzone
        onDrop={onDrop}
        title='Please attach your files here (Max 3)'
        isFileUploaded={isFileUploaded}
      />

        <Button className={styles.container__footer_close} onClick={closeModal}>
          Close
        </Button>
        <Button type='submit' className={styles.container__footer_submit} onClick={createPost}>
          Create
        </Button>

  );
};

export default NewPost;

I tried adding maxFiles to every single component, I also tried adding it to the onDrop component. New to React ( 1 week) and I am slowly losing my sanity. I will never forgive Zuckerberg for this apparition he has brought upon coderkin. Even chatGPT could not help my case.


问:
Stock Availability toggle liquid
I have a store with an availability show hide toggle set to hide by default but i'd like to change the default to show. I have tried editing the below code but can seem to get it right. Any help would be greatly appreciated.</p>
```<code><div class="filter-group filter-group--availability">
      <div class="filter-toggle filter-toggle--inline">
        <span class="filter-toggle__group-label">{{ 'collections.filtering.out_of_stock_label' | t }}</span>
        <div class="filter-toggle__options">

          <label class="filter-toggle__input-label">
            <input class="filter-toggle__input"
              id="Filter-{{ filter.param_name }}-1"
              type="radio"
              name="{{ filter.param_name }}"
              value="2"
    {% if filter.active_values != empty and filter.active_values.first.value == '2' %}checked{% endif %}>

            <span class="filter-toggle__input-label-text">{{ 'collections.filtering.show_label' | t }}</span>
          </label>
          <label class="filter-toggle__input-label" id="second-filter-btn">
            <input class="filter-toggle__input"
              id="Filter-{{ filter.param_name }}-2"
              type="radio"
              name="{{ filter.param_name }}"
              value="1"
              {% if filter.active_values == empty %}checked{% endif %}>
              <span class="filter-toggle__input-label-text">{{ 'collections.filtering.hide_label' | t }}</span>
          </label>
        </div>
      </div>
    </div>
</code>```

Title: Stock Availability toggle liquid

Body:
I have a store with an availability show hide toggle set to hide by default but i'd like to change the default to show. I have tried editing the below code but can seem to get it right. Any help would be greatly appreciated.

        {{ 'collections.filtering.out_of_stock_label' | t }}

            <input class="filter-toggle__input"
              id="Filter-{{ filter.param_name }}-1"
              type="radio"
              name="{{ filter.param_name }}"
              value="2"
    {% if filter.active_values != empty and filter.active_values.first.value == '2' %}checked{% endif %}>

            {{ 'collections.filtering.show_label' | t }}

            <input class="filter-toggle__input"
              id="Filter-{{ filter.param_name }}-2"
              type="radio"
              name="{{ filter.param_name }}"
              value="1"
              {% if filter.active_values == empty %}checked{% endif %}>
              {{ 'collections.filtering.hide_label' | t }}


问:
Firebase Error, application offline (on WebSDK)
I just create an example for test Firebase Analytics, I worked before with storage capabilities and every works fine.

This is my code:

```<code><button id="test">Press Me</button>

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js';
  import {
    getAnalytics,
    logEvent
  } from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-analytics.js';

  // Your web app's Firebase configuration
  const firebaseConfig = await fetch('../firebaseConfig.json')
    .then((response) => response.json());

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);

  // Initialize Analytics and get a reference to the service
  const analytics = getAnalytics(app);

  const test = document.getElementById('test');

  test.addEventListener('click', () => {
    console.log('click', analytics);
    logEvent(analytics, 'select_content', {
      content_type: 'image',
      content_id: 'P12453'
    });
  });
</script>
</code>```

My Firebase config includes elements below

```<code>{
  "apiKey": "xxxx",
  "authDomain": "yyyyy.firebaseapp.com",
  "projectId": "test-firebase-yyyy",
  "storageBucket": "yyyyy.appspot.com",
  "messagingSenderId": "123456789",
  "appId": "1:123465789:web:qazwsxedc",
  "measurementId": "G-qwerty"
}
</code>```

But it throws next error:

FirebaseError: Installations: Could not process request. Application
offline. (installations/app-offline).

Someone could tell me why ? or where to search? As I mention before storage and cloudstore are working fine.

Thank you.

Body:
I just create an example for test Firebase Analytics, I worked before with storage capabilities and every works fine.

This is my code:

<button id="test">Press Me</button>

My Firebase config includes elements below

{
  "apiKey": "xxxx",
  "authDomain": "yyyyy.firebaseapp.com",
  "projectId": "test-firebase-yyyy",
  "storageBucket": "yyyyy.appspot.com",
  "messagingSenderId": "123456789",
  "appId": "1:123465789:web:qazwsxedc",
  "measurementId": "G-qwerty"
}

But it throws next error:

FirebaseError: Installations: Could not process request. Application
offline. (installations/app-offline).

Someone could tell me why ? or where to search? As I mention before storage and cloudstore are working fine.

Thank you.


问:
How to detect Wi-Fi connect event?
I would like to write a service using Python that triggers when the host device connects to a Wi-Fi network. How do I detect this?

My current solution is to use Task Scheduler on Windows and some amalgamation of cron and ifconfig on *nix. I would strongly prefer a cross-platform (Linux, Windows, MacOS) approach, and I imagine this is done better with Python code than shell scripts or something.

But feel free to give a platform-specific answer.

Title: How to detect Wi-Fi connect event?


问:
Create Templating variable using groupby in label_values
Running below query in prometheus produces results, How can I (is it possible to) create a templating variable in Grafana using similar query with label_values ?

```<code>group by (label_application_service_name) (kube_namespace_labels)
</code>```

Something like

```<code>label_values(groupby (label_application_service_name) (kube_namespace_labels), ServiceName)
</code>```

Thanks in Advance.

Body:
Running below query in prometheus produces results, How can I (is it possible to) create a templating variable in Grafana using similar query with label_values ?

group by (label_application_service_name) (kube_namespace_labels)

Something like

label_values(groupby (label_application_service_name) (kube_namespace_labels), ServiceName)

Thanks in Advance.


问:
How to remove that gray background
This happens everytime with my VSCode, can anyone help me get rid of that gray background color in the className

enter image description here

Title: How to remove that gray background


问:
JS: How to share static class properties between imports
so I am running into this problem while I am converting some old js to new es6 imports (used in the browser).

The problem:
The static properties of a class are not shared between the various imports in different files.
(Even though they are bundled into one file eventually (using Vite)).

A simplified version of the code:

// scripts.ts (will be three-shaked, compiled and bundled using Vite)
// This file will be loaded in a simple index.html
import Base from "./Base";
import Form from "./Form";

window.Base = Base;
window.Form = Form;

document.addEventListener("DOMContentLoaded", () => {
  Base.setRoot("myroot");

  console.log(Base.root); // 'myroot'
  Form.logRoot(); //  'default', but expected 'myroot'
});
```
<pre class="lang-js prettyprint-override"><code>// base.ts
export default class Base {
  static root: "default"

  static setRoot(root) {
    this.root = root;
  }
}
</code>```

// form.ts
import Base from "./Base"

export default class Form {
  static logRoot() {
    // attempt 1
    console.log(Base.root); // doesn't work

    // attempt 2
    console.log(window.Base.root); // works, but undesirable: TS throws error that window.Base is undefined
  }
}
```

The question:
So how can I share the static properties of this Base class between the various imports, without having to pull it from window.Base?

Perhaps a little background:
These classes used to be just two global var objects, that got bundled together, without using any imports or anything. Thus the state of the vars would be shared because they basically just lived on the window.

Body:
so I am running into this problem while I am converting some old js to new es6 imports (used in the browser).

The problem:
The static properties of a class are not shared between the various imports in different files.
(Even though they are bundled into one file eventually (using Vite)).

A simplified version of the code:

// scripts.ts (will be three-shaked, compiled and bundled using Vite)
// This file will be loaded in a simple index.html
import Base from "./Base";
import Form from "./Form";

window.Base = Base;
window.Form = Form;

document.addEventListener("DOMContentLoaded", () => {
  Base.setRoot("myroot");

  console.log(Base.root); // 'myroot'
  Form.logRoot(); //  'default', but expected 'myroot'
});

// base.ts
export default class Base {
  static root: "default"

  static setRoot(root) {
    this.root = root;
  }
}

// form.ts
import Base from "./Base"

export default class Form {
  static logRoot() {
    // attempt 1
    console.log(Base.root); // doesn't work

    // attempt 2
    console.log(window.Base.root); // works, but undesirable: TS throws error that window.Base is undefined
  }
}

The question:
So how can I share the static properties of this Base class between the various imports, without having to pull it from window.Base?

Perhaps a little background:
These classes used to be just two global var objects, that got bundled together, without using any imports or anything. Thus the state of the vars would be shared because they basically just lived on the window.