小编Dan*_*515的帖子

在阅读了关于browserify vs webpack的数百行之后,以及几个如何处理这两行我决定去webpack.这是因为我喜欢将所有内容捆绑到js文件中的主要原因.

我有一个角度项目已经工作,我想重构它为webpack.问题？我的项目使用角度1.4.7,ng-animate和普通javascript(ES5),所有教程和手册都适用于ES6.我不想那么重构我的项目.怎么走？我想要一个每个角度模块的例子:工厂,指令,控制器等.非常感谢

我正处于一种情况,我想做一些dom节点大小计算(渲染的DOM节点的顶部,底部和大小属性)

我现在正在做的,componentDidUpdate方法是调用findDOMNode:

 componentDidUpdate() {
        var node = ReactDOM.findDOMNode(this);

        this.elementBox = node.getBoundingClientRect();
        this.elementHeight = node.clientHeight;
        // Make calculations and stuff
}

这工作正常,但我有点担心性能,并做出最佳实践.有几个地方讨论使用refproperty而不是findDOMNode,但是所有这些都是针对子dom元素的,在我的情况下我只想要我的组件的根DOM节点.

使用ref的替代方案可能如下所示:

render(){
   return (
            <section // container
                ref={(n) => this.node = n}>
                 // Stuff
            </section>
}
 componentDidUpdate() {

        this.elementBox = this.node.getBoundingClientRect();
        this.elementHeight = this.node.clientHeight;
        // Make calculations and stuff
}

老实说,将ref回调附加到我的根dom节点只是为了得到它的引用对我来说感觉不对.

什么被认为是这种情况下的最佳做法？哪一个有更好的表现？

I have a project built with SolidJS, typescript and Vite. I already have a service worker working using vite PWA plugin, using the generate service worker strategy. Now I want to add notifications using firebase cloud messaging (FCM) and their documentation instructs you to create a very simple file that is meant to be bundled as a service worker. This presents a challenge because Vite is not really meant to be used with several entry-points, which is somewhat required to …

我正在使用Zod，我想为用户输入定义一种架构，该架构具有一个带有默认值的可选字段。但是，我不可能使运行时行为与推断的类型相匹配。我想要的是该字段是可选的，并且当未提供或未定义时，使用默认值。如果我想要这种行为，我不能在生成的类型中使该字段可选，并且如果我设法使其在生成的类型中可选，那么它将在运行时不会获得默认值。

我用代码来解释一下：

import { Timestamp } from 'firebase/firestore';
import { z } from 'zod';

export const someSchema = z.object({
  id: z.string(),
  timestamp: z.instanceof(Timestamp),
  type: z.enum(['fever', 'constipation']),
  notes: z.string().optional().default(''),
});

export const someInput = someSchema
  .omit({ id: true })
  .merge(
    z.object({
      timestamp: z
        .date()
        .optional()
        .default(() => new Date()),
    }),
  )
  .partial({
    notes: true,
  });

export const schemaArray = z.array(someSchema);

export type Schema = z.infer<typeof someSchema>;
export type SchemaInput = z.infer<typeof someInput>; // <- Here I expect timestamp to …

在 redux-toolkit 文档中，他们建议您创建以下定义，以便在使用 useSelector 挂钩时具有正确的类型：

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

这将使您不必键入具有根状态的所有选择器。

然而，当需要定义记忆选择器时，createSelector没有关于如何做类似事情的说明。有没有任何快捷方式，或者我必须手动输入每个记忆的选择器？

我有一个接受字符串的函数，它应该调用另一个只接受两个枚举值的函数。

如何将字符串类型缩小为与枚举兼容的类型？我尝试使用 object.values 但打字稿似乎不喜欢我尝试的任何方式。

这是一个小例子

export enum A {
  a = "a",
  b = "b",
  c = "c",
}

export enum X {
  x = "x",
  y = "y",
  z = "z",
}

export const T = { ...A, ...X } as const;

function foo(t: string): X | A {
  if (Object.values(X).includes(t as X)) {
    return t
  }
  if(Object.values(A).includes(t)){
    return t
  }
  return X.x
}

当然，我可以编写一个类型保护函数，但这对我来说只是作弊，因为我必须手动注意函数代码是否正确，并且它有效地正确地将字符串缩小到其中一个枚举中。所以这就是我想避免的：

function isXorA (t: string): t is X | A {
    if (Object.values(X).includes(t as X)) …

我正在尝试使用 GITHUB 的 V4 API 来获取我分配的问题及其标签和参考文献的列表。

一段时间后，我收到了您可以在下面看到的查询，它完全按照我想要的方式工作。

然而，有一个问题：它包含很多我不感兴趣的空节点。例如，如果我想获取所有存在问题的 CrossReferencedEvent，我将在时间轴边缘数组上得到很多空节点，因为其他事件：LabeledEvent、ReferencedEvent、AssignedEvent 等。

如何过滤掉这些事件，以便只获取我感兴趣的事件？这是 graphql 的限制吗？我是否被迫在本地删除无用的节点？这是我目前的查询

{
  search(query: "assignee:danielo515", type: ISSUE, last: 100) {
    edges {
      node {
        ... on Issue {
          number
          title
          state
          timeline(first: 10) {
            edges {
              node {
                ... on CrossReferencedEvent {
                   source{
                    ... on Issue {
                      title
                      number
                    }
                  }
                }
              }
            }
          }
          labels(last: 10) {
            nodes {
              name
              color
            }
          }
          repository {
            name
          }
        }
      }
    }
  }
}

我可以做的一项改进是，在查询部分添加is:issue. 这会 。将所有空节点保存在根边缘数组中，但我不知道如何对嵌套时间轴执行相同的操作。

提前致谢

我有一个小但很有趣的开发应用程序.这是一个快速的实验,可以学习更多有关redux和反应的知识,并且我认为应用程序已经足够成熟,可以开始学习优化.

我做了一些纯粹的组件优化,但它们并没有改善首次加载的时间,所以我继续前进.我尝试的下一个优化是使用react懒惰来加载一些我第一次不需要的组件.例如,我有一个错误组件,我只需要显示一个不太可能的错误,所以这就是我所做的,并且令人惊讶(并且根据灯塔)所有的第一次指标(第一次交互的时间,第一次到第一次)有意义的油漆等)变得更糟.

以下是尝试使用react lazy之前的报告的屏幕截图:

正如你所看到的,从性能的角度来看,没有太多改进,但是当我试图学习现代反应时,无论如何我试过了.这是我能够使用反应懒惰拆分一个组件的最佳方法:

如你所见,更糟糕的是.它检测到的问题并不都与缓存策略有关,这里它们是:

似乎主线程越来越忙于解析所有的javascript.这对我来说没有意义,因为转到Chrome开发工具并检查网络请求的详细信息(在性能选项卡上),并行下载生成的捆绑包.但是,两个版本上的bundle几乎都是相同的大小,除了应用程序的拆分版本有5个块而不是2个:

没有代码拆分的第一个捆绑

URL
bundle.js
Duration
45.62 ms
Request Method
GET
Priority
High
Mime Type
application/javascript
Encoded Data
6.5 KB
Decoded Body
31.0 KB

第一捆与反应懒惰分裂

URL
bundle.js
Duration
28.63 ms
Request Method
GET
Priority
High
Mime Type
application/javascript
Encoded Data
7.1 KB
Decoded Body
33.7 KB

首先下载的块:

Network request
URL
0.chunk.js
Duration
255.83 ms
Request Method
GET
Priority
High
Mime Type
application/javascript
Encoded Data
579 KB
Decoded Body
2.7 MB

反应懒惰分裂的第一个块(标记为5但实际上是第一个):

URL
5.chunk.js
Duration
276.40 …

我知道您可以使用带有 fetch 模块的ansible 将文件从远程服务器复制到本地。。您甚至可以使用与您从中获取的节点相关的一些变量来命名该文件。我想要做的是在复制该文件后替换该文件上的某些字符串，最好使用库存变量。这可能吗？有没有不涉及后处理 bash 脚本的解决方法？

我只是按照说明向我的react-i18next实例添加正确的类型，如下所述： https: //react.i18next.com/latest/typescript#create-a-declaration-file

但是，在创建上述react-i18next.d.ts文件后，我开始收到有关模块未导出成员的错误react-i18next，例如 useTranslation 挂钩：

Module '"react-i18next"' has no exported member 'useTranslation'.ts(2305)

react-i18next.d.ts这是我的文件的内容

// import the original type declarations
import 'react-i18next';
// import all namespaces (for the default language, only)
import translation from 'locales/en/translation.json';
import toast from 'locales/en/toasts.json';

// react-i18next versions lower than 11.11.0
declare module 'react-i18next' {
  // and extend them!
  interface Resources {
    translation: typeof translation;
    toast: typeof toast;
  }
}

declare module 'react-i18next' {
  // and extend them!
  interface CustomTypeOptions { …

我有一个awk脚本,我用它来计算一些事务完成所需的时间.该脚本获取每个事务的唯一ID,并存储每个事务的最小和最大时间戳.然后它计算差异,最后显示超过60秒的结果.

使用数千(200k)时效果非常好,但在现实世界中使用时需要更多时间.我测试了几次,处理大约2800万行需要大约15分钟.我可以考虑这种良好的性能还是可以改进它？

我对任何建议持开放态度.

这里有完整的代码

zgrep -E "\(([a-z0-9]){15,}:" /path/to/very/big/log |  awk '{
gsub("[()]|:.*","",$4); #just removing ugly chars
++cont
min=$4"min" #name for maximun value of current transaction
max=$4"max" #same as previous, just for readability 
split($2,secs,/[:,]/) #split hours,minutes and seconds
seconds = 3600*secs[1] + 60*secs[2] + secs[3] #turn everything into seconds
if(arr[min] > seconds || arr[min] == 0)
  arr[min]=seconds
if(arr[max] < seconds)
   arr[max]=seconds
dif=arr[max] - arr[min]
if(dif > 60)
  result[$4] = dif
}
END{
for(x in result)
   print x" - "result[x]
print ":Processed …

我有一个CSS3动画，我想同时以正常和反向顺序使用。我想通过切换两个类来触发动画。基本上是使元素增长的动画，我也想用它来缩小元素。

基本上是：

• 添加扩展类：执行动画
• 删除展开的类，添加折叠的类：反向执行动画

第一部分正常工作，但是，如果我尝试对两个类使用相同的动画，则动画将停止工作，不会发生任何事情。

div {
  max-height: 1em;
  width: 50px;
  background-color: red;
  color: white;
  text-align: center;
  border-radius: 30px;
  padding: 1em 0;
}

.expanded {
  animation: expand 2s;
  background-color: blue;
}

.collapsed {
  background-color: red;
  //animation: expand 2s reverse; // Uncomment and all animations stop working
}

@keyframes expand {
  0% {
    max-height: 1em;
  }
  50% {
    max-height: 1em;
  }
  100% {
    max-height: 200px;
  }
}

这是一个简单的jsfiddle演示了这一点：https ://jsfiddle.net/danielo515/jxLcoocs/6/

编辑：

正如@LGSon所建议的，对于本示例，使用transition属性会更简单，但是我需要使用动画，因为我正在运行多个动画，并且需要能够延迟其中的某些部分。