小编Ada*_*m D的帖子

是否可以制作一个触发PWA"添加到主屏幕"安装横幅的应用内按钮?

我了解到,通过正确制作的Progressive Web App,移动浏览器将显示一个横幅,提示用户在其主屏幕上"安装"该应用.

我一直在寻找一种方法来从应用程序中触发该提示,但一直无法找到任何东西.

是否有一行JavaScript可用于随时调用安装提示横幅?例如,我可以添加到安装按钮中隐藏在帮助屏幕中的东西?

如果某些用户错过了安装横幅提示,则可能很难找到"添加到主屏幕"选项.我想给他们一个按钮,他们可以点击再次提示.

javascript service-worker progressive-web-apps

22
推荐指数
3
解决办法
1万
查看次数

如何从 AudioContext 获取缓冲区/原始数据?

GetUserMedia()我正在尝试使用和API记录并保存来自用户麦克风的声音剪辑AudioContext

我已经能够使用MediaRecorderAPI 执行此操作,但不幸的是,Safari/iOS 不支持这一点,因此我想仅使用 APIAudioContext和来自该 API 的缓冲区来执行此操作。

我从 Google Web 基础知识中获得了本教程的部分功能,但我不知道如何执行他们建议的以下步骤。

var handleSuccess = function(stream) {
    var context = new AudioContext();
    var source = context.createMediaStreamSource(stream);
    var processor = context.createScriptProcessor(1024, 1, 1);

    source.connect(processor);
    processor.connect(context.destination);

    processor.onaudioprocess = function(e) {
        // ******
        // TUTORIAL SUGGESTS: Do something with the data, i.e Convert this to WAV 
        // ******
        // I ASK: How can I get this data in a buffer and then convert it to WAV …
Run Code Online (Sandbox Code Playgroud)

javascript html5-audio web audiocontext

6
推荐指数
1
解决办法
2121
查看次数

如何定义自定义字母顺序以便在go中比较和排序字符串?

在将此标记为重复之前,请先阅读底部

我希望能够按字母顺序排序字符串数组(或基于一个字符串值的结构片),但基于自定义字母或unicode字母.

大多数时候,人们建议使用支持不同预定义语言环境/字母表的collat​​or.(请参阅Java的这个答案),但是对于这些语言环境包中没有的稀有语言/字母表可以做些什么呢?

我想要使​​用的语言在Golangs的整理支持和使用的语言列表中不可用 ,因此我需要能够定义自定义字母或Unicode字符/符文的顺序以进行排序.

其他人建议首先将字符串翻译成英文/ ASCII可排序字母,然后对其进行排序.这就是用JavascriptRuby中的这个解决方案完成的这个解决方案中的类似问题.但是肯定必须有一种更有效的方法来实现Go.

是否可以在Go中创建使用自定义字母/字符集的Collat​​or?这是Func NewFromTable的用途吗?

似乎我应该可以使用重新排序功能,但看起来这还没有在语言中实现?源代码显示了此:

func Reorder(s ...string) Option {
    // TODO: need fractional weights to implement this.
    panic("TODO: implement")
}
Run Code Online (Sandbox Code Playgroud)

如何定义自定义字母顺序以便在go中比较和排序字符串

sorting string algorithm go

6
推荐指数
1
解决办法
615
查看次数

在重新启动时启动 pm2 进程之前等待 mongodb 准备就绪

我在让 pm2 等待 mongodb 准备好之前,在系统重新启动时启动进程时遇到了麻烦。(我使用的是 Ubuntu 16.04 服务器)

在我的 pm2 的 systemd 服务文件中,我有这个,我认为这会让它等到 mongodb 启动后:

[Unit]
Description=PM2 process manager
Documentation=https://pm2.keymetrics.io/
Wants=mongod.service
After=network.target mongod.service

[Service]
Type=forking
Run Code Online (Sandbox Code Playgroud)

但它似乎运行 pm2,因此 node.js 进程在 mongodb 实际上准备在 27017 上侦听之前启动 pm2。我的错误日志显示我的 node.js 脚本在 27017 上找不到 db。但是如果我手动重新启动了这个过程(在 mongodb 有足够的时间准备好之后)它工作得很好。

如何延迟 pm2 启动,或延迟 pm2 启动特定应用程序,直到mongodb 准备好并侦听连接

注意:我尝试添加

ExecStartPost=/bin/sh -c 'while ! /usr/bin/mongo --eval "db.version()" > /dev/null 2>&1; do sleep 0.1; done'

根据我的mongod.service回答:Systemd: Autostart service after mongodb,但这只是阻止了 pm2 启动。

mongodb node.js systemd pm2 ubuntu-16.04

5
推荐指数
1
解决办法
2147
查看次数

在 React 应用程序中映射数组以优化性能的最佳实践

我有一个简单的字典应用程序,我正在制作它返回搜索结果。onChange使用lokiJS内存中的字典数据库查询每个搜索字段的搜索,因此结果非常快。

优化结果的呈现对我来说很重要,这样 50 个左右的过滤搜索结果会随着用户键入和每次击键时发生的查询而不断流动。

这是我到目前为止一直在做的事情:(这是有效的,但它是最好/最快的方法吗?)

数据库的每个(同步)查询都返回一个对象数组,然后我将其映射为如下所示:

queryDB(query) {
  const results = queryLokiJsDB(query);
  const resultsMapped = results.map((mpd) =>
        <dl key={mpd["$loki"]} onClick={() => this.clickFunction(mpd.p, mpd.f)}>
          <dt>{mpd.p} - {mpd.f}</dt> <dd>{mpd.e} <em>{mpd.c}</em></dd>
        </dl>);
  this.setState({ results: ( 
    <div>
      {resultsMapped}
    </div>
  )});
} 
Run Code Online (Sandbox Code Playgroud)

然后,一旦我像这样映射了结果,我将映射的组件添加到状态,然后屏幕会以新的结果呈现。

render() {
  return (
    <div>
      <SearchBarStuff />
      <div className="results-container">
          {this.state.results}
      </div>
    </div>
  );
}
Run Code Online (Sandbox Code Playgroud)

我在刚学习 React 时做了这个,我知道人们认为在 state 中存储组件是非常糟糕的做法

我想知道在性能优化方面的最佳实践是什么(和代码清洁)。我应该将结果数组存储在状态然后渲染然后将它们映射到渲染函数中的组件吗?这会导致任何性能下降吗?

另一个答案说“渲染方法中的一个函数将在每次渲染时创建,这会对性能造成轻微影响。”

为什么以状态存储组件如此糟糕?仅仅是为了代码清晰吗?保持国家小?感谢您的帮助和耐心。

javascript reactjs

5
推荐指数
1
解决办法
3499
查看次数

在 Typescript 中递归修改给定类型/接口的通用方法

我正在努力制作一个泛型,它将递归地修改嵌套递归数据结构中找到的所有元素。这是我的数据结构的示例。使用此递归数据定义,任何帖子都可以有无限数量的评论和回复。

type Post = {
    user: string,
    content: string,
    comments: Comment[],
    reactions: Reaction[],
}

type Comment = {
    user: string,
    content: string,
    replies: Comment[],
}

type Reaction = {
    user: string,
    reaction: "laugh" | "cry" | "smile",
}

Run Code Online (Sandbox Code Playgroud)

我想要的是一个通用包装器,我可以将其与这些数据类型和任何其他数据类型一起使用,将每个字段替换user为其他内容。我可以为顶层做到这一点:

type UserFilled<T> = Omit<"user", T> & { user: { id: string, name: string }}
Run Code Online (Sandbox Code Playgroud)

但这只会改变user《华盛顿邮报》的领域。我还希望它能够爬下来并替换user每个评论的更改字段,如果有更多字段,则用于反应、点赞或任何其他带有 a 的结构user

我已经看到这个关于递归省略某些内容的答案,但我无法使用联合将修改后的属性添加回来,我想知道是否有更直接的方法来做到这一点,同时不仅省略而且替换字段?

例如,使用通用我希望能够做到这一点:

const post: Post = {
    user: "1234",
    content: "this is …
Run Code Online (Sandbox Code Playgroud)

typescript typescript-generics typescript2.0

5
推荐指数
1
解决办法
906
查看次数

有没有办法让 VSCode 显示 .d.ts 文件中未解析类型的错误?

我喜欢在 VSCode 中使用 TypeScript,并看到所有错误自动弹出并带有红色下划线。我什至进行了设置"typescript.tsserver.experimental.enableProjectDiagnostics": true,以便我可以看到任何文件上弹出的任何错误,并使该文件在我的树中变成红色。

但感觉非常缺少的一件事是能够自动标记(作为错误)全局.d.ts类型文件中任何未解析的类型。

.ts目前,如果我在这样的文件中写入内容:

// example.ts

const a: Age | NotADefinedType = "foo";
//             ^ This errors bc it's unresolved 
Run Code Online (Sandbox Code Playgroud)

然后我收到一个错误和一条红色波浪线,表明这是一个未解析的类型。这很棒。

但如果我在文件中使用未解析的类型,.d.ts我不会收到任何错误。例如:

// types.d.ts

type Age = number;
type Quality = Age | NotADefinedType;
//                   ^ I want this to error, but it doesn't 
Run Code Online (Sandbox Code Playgroud)

所有这一切都会变成Qualitytype any,这对于我的代码的其余部分来说可能非常危险。我没有收到任何有关NotADefinedType未解决问题的警告,除非我将鼠标移到 NotADefinedType 上type NotADefinedType = /* unresolved */ any并在快速信息弹出窗口中看到。

有没有办法在文件中打开此类警告,.d.ts以避免意外将类型转换为这些错误any

typescript visual-studio-code vscode-extensions

5
推荐指数
1
解决办法
1712
查看次数

使用 ES 模块系统通过 TypeScript 部署 Firebase 功能时出现问题

我在使用 ES 模块系统部署从 Typescript 编译的 Firebase 函数时遇到问题。

索引.ts

import * as functions from "firebase-functions";
import myGreeting from "./my-greeting";

export const helloWorld = functions.https.onRequest((request, response) => {
  response.send(myGreeting);
});
Run Code Online (Sandbox Code Playgroud)

我的问候语.ts

export default "HELLO WORLD";
Run Code Online (Sandbox Code Playgroud)

tsconfig.json

{
  "compilerOptions": {
    "module": "ES2020",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "moduleResolution": "node",
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "ES2020"
  },
  "compileOnSave": true,
  "include": [
    "src"
  ]
}
Run Code Online (Sandbox Code Playgroud)

包.json

{
  "name": "functions",
  "scripts": {
    "build": "tsc",
    "build:watch": "tsc --watch",
    "serve": "npm run build && firebase emulators:start --only …
Run Code Online (Sandbox Code Playgroud)

node.js firebase typescript google-cloud-functions

5
推荐指数
1
解决办法
416
查看次数

无法在Golang中从MongoDB结果解码ObjectId子值

我正在使用MongoDb Go驱动程序,但无法从结构中解码的JSON中获取ObjectId子值。

注意:我使用的库/ API与此问题不同,因此请不要将其标记为重复。

import (
    "net/http"
    "github.com/go-chi/chi"
    "encoding/json"
    "time"
    "context"
    "go.mongodb.org/mongo-driver/mongo"
    "go.mongodb.org/mongo-driver/mongo/options"
    "go.mongodb.org/mongo-driver/bson"
    "go.mongodb.org/mongo-driver/bson/primitive"
    "fmt"
)
Run Code Online (Sandbox Code Playgroud)

我有一个这样的结构来处理结果

type Contact struct {
    Id  struct {
        ObjId   string  `json:"$oid"`
    } `json:"_id"`
    Name    string `json:"name"`
    Email   string `json:"email"`
    Health  struct {
        Weight  int `json:"weight"`
        Height  int `json:"height"`
    } `json:"health"`    
}
Run Code Online (Sandbox Code Playgroud)

然后我去检索像这样的联系人:

var contacts []Contact
ctx, _ := context.WithTimeout(context.Background(), 30*time.Second)
cursor, err := collection.Find(ctx, bson.M{})
if err != nil {
    panic(err)
}
defer cursor.Close(ctx)
for cursor.Next(ctx) {
    var …
Run Code Online (Sandbox Code Playgroud)

go mongodb

2
推荐指数
1
解决办法
1354
查看次数

测试与 Jest 反应的选择元素

我正在尝试测试 React 组件中 select 元素的功能。

注意:这不是这个问题的重复,因为我没有使用酶,而是尝试简单地使用act()React 的测试实用程序并使用Jest运行测试。

给定一个带有 select 元素的组件,如下所示:

class TestSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            choice: "apples",
        };
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({choice: event.target.value});
    }
    render() {
        return (
            <div>
                <select value={this.state.choice} onChange={this.handleChange}>
                    <option value="apples">apples</option>
                    <option value="oranges">oranges</option>
                </select>
                <h4>You like {this.state.choice}</h4>
            </div>
        );
    }
}
Run Code Online (Sandbox Code Playgroud)

我希望能够像这样测试它:

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils"; …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs jestjs

1
推荐指数
1
解决办法
5689
查看次数