小编Tom*_*Tom的帖子

在谷歌浏览器中将表情符号在视觉上水平居中非常困难，因为表情符号右侧似乎有不应该存在的空白。一个例子：

.avatar {
  width: 30px;
  
  padding: 10px;
  background-color: #eee;
  border-radius: 50%;
  
  display: grid;
  justify-items: center;
  align-items: center;
}

<div class="avatar">
  <div>&#x1F436;</div>
</div>

https://codepen.io/tommedema/pen/xxbXBRe

在 MacOS Catalina 10.15.2 上的 Chrome 79.0.3945.79 中，它呈现为：

显然，它在视觉上不是水平居中的。然而，在其他浏览器（如 Safari 和 Firefox 71）中，它是：

关于 Carol 使用 font-size 和 box-sizing 的回答，结果还是一样。我选择了表情符号/文本，以便您可以更清楚地看到表情符号右侧有空格的问题，但仅在 Chrome 上而不是在其他浏览器上：

如果输入选择器未通过严格的相等性检查，标准重新选择选择器将使其记忆值无效并重新计算它：

export const selectEmailsFromComments = createSelector(
  selectComments, // returns an array of comments
  comments => commentsToEmails(comments)
)

由于注释是一个数组而不是原始值，并且 redux 缩减器倾向于创建一个新的状态以避免副作用，因此上面的内容似乎永远不会真正记住，因为返回的注释数组selectComments将始终具有不同的引用。

为了解决这个问题，可以创建一个自定义选择器创建者，例如引入浅层相等检查：

const createShallowEqualSelector = createSelectorCreator(
  defaultMemoize,
  shallowEqual
)

export const selectEmailsFromComments = createShallowEqualSelector(
  selectComments, // returns an array of comments
  comments => commentsToEmails(comments)
)

如果评论确实是简单的对象，并且我们希望在任何评论的 props 发生更改时重新计算电子邮件，则此方法有效。

但是，如果我们只想重新计算电子邮件（例如评论数量发生变化）怎么办？我们如何实现自定义相等性检查？我希望以下内容能够发挥作用：

type ComparisonFunction<B extends object = {}> = (prev: B, next: B, index: number) => boolean

const createCustomEqualSelector = <B extends object = {}>(
  equalFn: ComparisonFunction<B>
) => createSelectorCreator<ComparisonFunction<B>>(defaultMemoize, …

如果我创建一个宽度为100px且高度为100px的矩形然后旋转它,则元素"box"的大小将会增加.

旋转45度,大小约为143x143(从100x100).

有时做cos(angleRad) * currentWidth似乎适合45转,但对于其他更大的角度它不会.

目前我这样做:

var currentRotation = object.rotation;
object.rotation = 0;
var normalizedWidth = object.width;
var normalizedHeight = object.height;
object.rotation = currentRotation;

当然,必须有一种更好,更有效的方式.我应该如何获得显示对象的"标准化"宽度和高度,即未旋转时的尺寸？

我正在研究创建一个使用webGL的Javascript应用程序的可能性.

由于webGL仅在几个浏览器中可用,并且我不想强迫人们使用某个浏览器(直接),我还想提供一个独立的应用程序客户端下载.

是否有可能以某种方式创建一个无边界和独立的"虚假浏览器"客户端,其中我的应用程序嵌入了Linux和Windows？

这将允许我分发一个独立的客户端,而无需修改我的应用程序代码.

由于这个问题涉及三种技术,我想快速介绍它们中的每一种:

• node.js:服务器端的javascript(认为是我的webserver)
• PhoneGap:允许我用HTML/Javascript/CSS编写Android应用程序的框架.
• facebook身份验证:使用everyauth让我的用户使用他们的Facebook帐户登录

目标:我需要我的PhoneGap应用程序使用基于REST的协议与我的服务器通信.许多这些请求只能在用户使用他们的Facebook帐户登录我的服务器时进行.因此,用户需要登录然后转到PhoneGap应用程序的登录状态.

问题:当我为facebook设置everyauth时,我基本上有一个URL,例如domain.com/auth/facebook,它将重定向到Facebook的登录"弹出窗口".当用户接受登录时,服务器将知道,到目前为止一切都很好.问题是

1. 用户现在必须被重定向到某个外部URL,而他应该只是回到PhoneGap应用程序(在登录状态)
2. PhoneGap应用程序不检索身份验证令牌,或者身份验证是否成功,因为登录过程在外部URL domain.com/auth/facebook中完成,而PhoneGap应用程序的HTML存储在手机本身上并从中运行

问题的原因:这个问题出现的原因是它不适用于普通的Web应用程序,是PhoneGap应用程序的HTML文件存储并从手机本身运行,而身份验证通过domain.com/auth/facebook,这被认为是成为一个不同的领域.

建议的方法#1:PhoneGap用户建议我将这个Android-Facebook插件用于PhoneGap.这里的问题是服务器不充当身份验证中间人.因此,用户必须通知服务器他们的认证令牌而不是通常的方法,其中服务器通知用户成功的认证过程和相应的令牌.这似乎是一个严重的漏洞.

我该如何解决这个问题？

（在清楚描述情况时，我将尽量使这个问题简短。如果缺少任何内容，请发表评论。）

情况

• 我正在同一数据中心中运行具有三台服务器的集群
• 为了简化部署，每个服务器运行完全相同的应用程序代码

目标

• 要由一台服务器每分钟运行一个任务（称为任务X）。

在这些条件下

• 群集保持分布式并且高度可用
• 每个服务器保持运行相同的应用程序代码。换句话说，没有诸如“将代码A部署到主服务器并将代码B部署到所有辅助服务器之类的事情。

我不希望区分服务器类型的原因是为了保持高可用性（避免所谓的主服务器宕机），冗余（分布式负载），并避免在需要部署其他服务器的地方创建复杂的部署过程应用程序到不同类型的服务器。

为什么这么难？如果我要添加每5分钟执行一次此任务的代码，则每个服务器都将执行该代码，因为每个服务器都运行相同的应用程序代码。因此，他们需要能够协调每个滴答期间哪个服务器将运行相同的服务器。

我可以使用诸如Apache Kafka或的分布式消息传递机制Redis。如果使用这种机制来协调任务，那么这种“算法”将如何工作？

我向其他人提出了这个问题，他的回答是使用任务队列。但是，这似乎并不能解决问题，因为问题仍然存在：哪个服务器要将任务添加到任务队列中？如果所有服务器都将任务添加到队列中，则将导致重复条目。此外，哪个服务器将执行队列中的下一个任务？所有这些都需要通过集群内的协调来确定，而不必区分不同类型的服务器。

上下文:为了实现完整的"基础架构作为代码",我想编写使用SSL证书请求SSL证书的过程,certbot使用DNS TXT记录验证域,将证书上载到Amazon Certificate Manager(ACM),最后将证书ACM ARN附加到我的Cloudfront发行版.这应该都是通过无服务器框架完成的.

我看到了两个潜在的选择来完成这项工作.

选项1:使用异步javascript文件变量

即serverless.yml我将定义如下条目:

custom:

  domains:
    prod: tommedema.tk

  ssl:
    prod:
      dnsTxtRoot: ${{file(scripts/request-cert.js):cert.dnsTxtRoot}}
      dnsTxtWww: ${{file(scripts/request-cert.js):cert.dnsTxtWww}}
      certArn: ${{file(scripts/request-cert.js):cert.certArn}}

那么资源将使用这些变量,如下所示:

- Type: TXT
  Name: _acme-challenge.www.${{self:custom.domains.${{self:provider.stage}}, ''}}
  TTL: '86400'
  ResourceRecords:
    - ${{self:custom.ssl.${{self:provider.stage}}.dnsTxtWww}}

在哪里scripts/request-cert.js看起来像:

module.exports.cert = () => {
  console.log('running async logic')

  // TODO: run certbot, get DNS records, upload to ACM

  return Promise.resolve({
    dnsTxtRoot: '"LnaKMkgqlIkXXXXXXXX-7PkKvqb_wqwVnC4q0"',
    dnsTxtWww: '"c43VS-XXXXXXXXXWVBRPCXXcA"',
    certArn: 'arn:aws:acm:us-east-1:XXXX95:certificate/XXXXXX'
  })
}

这里的问题是,似乎不可能发送参数request-cert.js,或者让这个脚本知道serverless或options插件参数(因为它不是插件,而是没有上下文的简单脚本).这意味着脚本无法知道部署所针对的阶段和域等,因此它缺少必要的变量以便请求证书.

因此,选项1似乎是不可能的.

选项2:创建一个插件

当然我可以创建一个插件,它将包含所有必需的变量,因为它可以访问serverless …

Typescript 最近引入了一项与 monorepos 配合使用的新功能：引用。通过指定引用，您可以使用构建所有相互依赖的包tsc -b（另请参阅此博客文章）

这似乎非常适合与大型单一存储库一起使用，其中某些软件包是无服务器服务。这些服务通常依赖于 monorepo 的一个或多个包。我在这里创建了一个示例：

https://github.com/tommedema/serverless-mono-example

虽然使用 构建效果很好tsc -b，但问题是无服务器框架需要上传单个工件 .zip（在我的例子中上传到 AWS）。当构建无服务器服务时，就像这个例子一样，只有最近的源文件的编译文件才会被捆绑。

如何将 Typescript 的引用功能与无服务器 Mono 存储库结合使用？

My device (Macbook Pro 2019 16") has a resolution of 3072 x 1920. When entering the realm of CSS, pixel units are "normalized". From my understanding, each CSS pixel is equal to my window.devicePixelRatio in device pixels. In my case, window.devicePixelRatio === 2. If my understanding is correct, this would mean that a CSS grid column with a width of 3072 / 2 = 1536px should take my entire viewport width. Surprisingly this is not the case: the actual …

我们的前端应用程序将用户操作发送到 API 网关后面的 lambda 函数，然后该函数将这些操作存储在 dynamodb 中。

然后，我们使用 dynamodb 流触发一个单独的 lambda 函数，该函数将解析 dynamodb 中的这些操作，并决定用户的操作是否应导致发送任何通知（我们将这些通知事件称为通知事件）。

例如，如果用户在我们的应用程序中发表评论，我们将在 dynamodb 中存储“CREATED_COMMENT”操作，然后该操作将通过 dynamodb 流触发新的 lambda。然后，新的 lambda 可能会创建一个“电子邮件通知事件”，我们可以将其发送给像 customer.io 这样的电子邮件提供商

然而，我们的用户告诉我们，他们收到电子邮件的频率太高，因此我们希望开始发送电子邮件摘要，将一段时间内的多个操作汇总到一封电子邮件中，而不是为每个操作发送一封电子邮件。

我们的想法是使用 AWS EventBridge、Kinesis、Step Functions 甚至 DynamoDB 流之类的工具来重新发送 dynamodb 流操作，然后将新流的事件配置为按电子邮件地址分组，并按例如 10 进行反跳分钟。如果用户随后执行新操作，则该用户的流将继续收集另外 10 分钟的操作，直到该用户在 10 分钟内没有执行任何新操作。一旦发生这种情况，流将“释放”所有收集的操作并调用 lambda 函数。然后，我们的 lambda 函数将生成电子邮件通知事件并将其发送到例如 customer.io。

但是，我们无法在上述任何 AWS 流服务中找到此类分组和去抖刷新配置。对于消化（或汇总）这样常见的事情，是否应该有一种无服务器方法来执行此操作，而无需编写我们自己的排队服务？