小编The*_*ith的帖子

似乎flex div中的内容会影响其有关flex-grow属性的计算大小.难道我做错了什么？

在下面提供的小提琴中,你会看到一个数字键盘.除底行外,所有行都包含3个数字.那行应该是'0'是2个数字的宽度,因此flex-grow: 2':'(冒号)是1个数字的大小,因此flex-grow: 1.

我在这里错过了什么吗？

'0'的右侧应与其上方的8,5和2对齐.有点过了.

.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.button#number0 {
    flex-grow: 2;
}

.button#colon {
    flex-grow: 1;
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div …

刚试过Yarn,确实它速度很快.在yarn加载的控制台中运行后package.json,它安装了所有内容.然后我开始npm dedupe期待没有什么事情发生,因为纱线是如此优化,但它删除了大量的东西.有一些纱线相当于npm dedupe？

加成:

正如我在下面的评论中所指出的,我认为也许yarn install --flat可能是npm dedupe等同的,因为Yarn文档将其描述为"安装一个且只有一个版本的软件包".所以我一起玩--flat,有几件事需要注意:

1. 当树导致多个版本的请求时,它将提示您选择要安装的软件包版本.我可以想象这对于大型项目来说是一项艰巨的任务.我刚刚为我提示的每个软件包选择了最新版本,您可以想象,尝试运行该应用程序会导致cannot find module错误.
2. 我做了一个npm dedupe 后跑了yarn install --flat,它仍然导致了大量的删除.这对我来说是一个惊喜.

所以我认为它npm dedupe正在做一些其他的魔术,我只是对我不需要关注的过程天真.也许最好只留下树而忘记--flat并dedupe完全忘记.

我刚刚升级到最新版本的Chrome(49.0.2623.87).我注意到一个轻微的功能缺失.

如果我在打开控制台的情况下检查页面,并且我调整了浏览器的大小,则在Chrome的右上角,Chrome用于显示浏览器视口大小的小指示.现在已经不见了.我怎样才能找回来？

我刚刚开始使用Jest,我已经成功编写了测试DOM的单元测试.我有一个可以在屏幕上输入内容的库,所以我可以测试一下.在某些情况下,我的图书馆会吐出一个console.warn或多个,而不是抛出错误console.log.是否可以使用Jest来测试这些控制台消息是否正在发生？

GraphQL是ORM吗？好像是这样.在一天结束时,它需要查询数据库以获取信息.你需要给它一个模式(就像一个ORM).根据我的理解,在前端你传递了你想要的细节,而后端的GraphQL将只为你提供所需的信息.

我从传统的ORM中看到的唯一区别,例如Sequelize或ActiveRecord,是GraphQL将只为您提供您想要的东西,使其非常具有吸引力和灵活性.我怀疑无论发生什么事情都会让你得到一些低效的查询(ORM常见).那么GraphQL只是一个ORM,可以让您在要求和接收时获得100%的灵活性吗？

如果我想发布Google表格电子表格,以便将其嵌入到iframe中的页面上,我会手动执行以下操作:

1. 导航到Google云端硬盘
2. 打开电子表格
3. 文件>发布到Web>嵌入>将生成的iframe链接复制到html文件中

如何使用前端的JavaScript通过Google表格API以编程方式实现上述目标？我正在我的应用程序中动态生成电子表格,并希望在创建后立即将它们嵌入到页面中.

创建工作表后,我可以动态创建具有必要属性的iframe元素(工作表ID等).这引发了一个错误.从这个问题来看,它看起来像一张表需要有一个published: true属性或东西,但这需要使用Drive API - 我试图避免这种情况.这是可能的处理只能通过Sheets API？

最近，npm发布了npm audit命令。当您npm i通知任何漏洞时，它将自动运行。我有一个简单的依赖树，如下所示：

package A
package B
  package B dependency
package C

我package.json的dependencies字段中包括A，B和C。B需要它自己的依赖关系，npm警告说它具有漏洞。我的问题是，如何覆盖该package B dependency版本以使用最新版本？我已经读过，这要么是工作，shrinkwrap.json要么是手动编辑，package-lock.json但是我找不到任何具体的示例来说明如何做。

我确实看到Yarn支持中的resolutions字段package.json，但是我没有使用Yarn。有没有办法通过npm开箱即用来完成此任务？

我附上了一个GIF动画来说明这种奇怪的行为.从本质上讲,我的问题是,Chrome是否控制台治疗var和let不同在同一范围内使用时？您会注意到,在声明/分配变量后,如果您尝试在控制台中输入该变量的名称,Chrome会自动为您自动填充,显示包含您输入内容的下拉列表.使用lets时,情况并非如此.这是一个错误,功能,还是我在JavaScript var和letJavaScript中缺少的东西？

注意:我很清楚let生命和死亡在直接范围内.

用Object.freezeJavaScript 调用构造函数的原型有什么问题吗？

我只是在想，既然原型是在所有实例之间共享的，那么也许我可以通过冻结它来确保没人重写原型中的任何内容，因为重写原型上的内容会影响每个实例。因此，例如，如下所示：

function MyConstructor() {
  // Stuff
}

MyConstructor.prototype = {
  method1() {
    // more stuff
  },
  method2() {
    // even more stuff
  },
  someArray: ['some', 'values'],
  someValue: 'value'
}

Object.freeze(MyConstructor.prototype);

这是场景...我向DOM添加了一个元素，该元素的初始类具有0的不透明度，然后添加了一个类以触发不透明度过渡到1-一个很好的简单淡入。代码如下所示：

.test {
  opacity: 0;
  transition: opacity .5s;
}

.test.show {
  opacity: 1;
}

const el = document.createElement('div')
el.textContent = 'Hello world!'
el.className = 'test' // <div class="test">Hello world!</div>
document.body.appendChild(el)

现在要触发淡入，我只需将show类添加到元素中：

setTimeout(() => {
  el.classList.add('show')
}, 10)

我使用的是setTimeout，因为如果不这样做，则将立即添加该类，并且不会发生淡入。它将最初在屏幕上可见，没有过渡。因此，我一直以来将10ms用于setTimeout，并且一直有效……直到现在。我遇到了需要将其设置为20ms的情况。有点脏 有人知道是否有安全的时间使用吗？我是否缺少有关DOM在这里的工作方式的信息？我知道我需要给浏览器一些时间来确定布局和绘画（因此setTimeout），但是要花多少时间呢？我感谢任何见识！

reduce在JavaScript中尝试时,我没有得到预期的结果:

let x = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

x.reduce((a,b) => a.length + b.length, []);

简单吧？这是我期望发生的事情,一步一步:

----------------------------------------------------------------
| callback | a (accumulator) | b (currentValue) | return value |
----------------------------------------------------------------
| 1st run  | 0               | 3                | 3            |
----------------------------------------------------------------
| 2nd run  | 3               | 3                | 6            |
----------------------------------------------------------------
| 2nd run  | 6               | 3                | 9            |
----------------------------------------------------------------

我到底得到了什么？NaN.在英语中,如果我理解正确,迭代器首先会查看我给它的初始值(空数组作为第二个参数reduce),并由参数表示a.我的代码显示了.length添加的两个参数的简单.我在哪里错了？

为什么一个人比另一个更受欢迎？

[].map.call(...)

Array.prototype.map.call(...)

在jsPerf中进行快速测试显示Array.prototype方式更高效,尽管我在某处读到jsPerf结果可能是欺骗性的.不是在这里讨论jsPerf,而只是寻找一些有关为什么一个人比另一个更受欢迎的见解.谢谢!