UPD：问题已经更新了细节和代码，见下文。

警告：这个问题是关于优化矩阵中项目的排列。这不是比较颜色。最初，我决定提供有关我的问题的上下文会有所帮助。我现在后悔这个决定，因为结果恰恰相反：关于颜色的无关紧要的谈论太多，而对实际算法几乎没有。

我为我的孩子准备了一盒 80 支毡尖笔，这让我很恼火，以至于它们没有分类。

我曾经在 Android 上玩过一个叫做 Blendoku 的游戏，你需要这样做：以形成渐变的方式排列颜色，附近的颜色最相似：

像填字游戏一样在交叉线上组织颜色既简单又有趣。但是有了这些草图标记，我就有了一个完整的 2D 网格。更糟糕的是，颜色不是从均匀渐变中提取的。

这让我无法凭直觉对毡尖笔进行分类。我需要用算法来做！

这是我所拥有的：

• 扎实的 JavaScript 知识
• 所有笔的颜色值的平面数组
• 甲功能 distance(color1, color2)，显示一个颜色对是如何相似。它返回一个浮点数0和100where0表示颜色相同。

我所缺少的只是一个算法。

阶乘80是一个 118 位的数字，它排除了暴力破解。

可能有一些方法可以使暴力破解可行：

• 固定几支笔的位置（例如在角落）以减少可能的组合数量；
• 删除包含至少一对非常不同的邻居的分支；
• 找到第一个满意的安排后停止。

但我仍然缺乏一个实际的算法，更不用说一个非暴力的算法了。

PS作业：

• 按相似度对矩阵进行排序- 没有答案。
• 最佳 2D 调色板排列算法——非常相似的问题，没有答案。
• 如何在二维中对颜色进行排序？-- 超过 50% 的单元格已经包含正确组织的颜色；不熟悉的编程语言；没有解释实际的排序解决方案。
• 排序颜色/颜色值——单个平面阵列。

更新

目标

在 8×10 网格中排列一组预定义的 80 种颜色，使颜色形成漂亮的渐变而不会撕裂。

由于以下原因，这个问题没有明确的解决方案，可能的解决方案容易产生不完美的结果和主观性。这是预期的。

请注意，我已经有一个函数可以比较两种颜色并说明它们的相似程度。

色彩空间是 3D

人眼具有三种类型的感受器来区分颜色。人类色彩空间是三维的（三色）。

描述颜色有不同的模型，它们都是三维的：RGB、HSL、HSV、XYZ、LAB、CMY（请注意，CMYK 中的“K”只是必需的，因为彩色墨水并非完全不透明且价格昂贵）。

例如，这个调色板：

...使用极坐标，角度为色调，半径为饱和度。没有第三维（亮度），这个调色板缺少所有明亮和黑暗的颜色：白色、黑色、所有灰色（除了中心的 50% 灰色）和有色灰色。

这个调色板只是 HSL/HSV 色彩空间的一小部分：

不可能在不撕裂渐变的情况下以渐变的方式在 2D …

当探查器将(程序)置于80%的顶部时,我将如何确定我的javascript应用程序中的挂断？我的逻辑是否太复杂,无法进行热点跟踪？我的记忆足迹太大了吗？这通常是什么原因？

更多信息:

• 除了一个canvas标签外,表单上没有元素
• 没有等待通信(xhr)
• http://i.imgur.com/j6mu1.png

零d

每个人都开始使用CSS包含所有样式的单个文件.

• style.css

1D

很快它变得笨重,并决定按页面元素将CSS分组到多个文件中:

• html_elements.css
• header.css
• main-area.css
• footer.css

有些人可能会发现这不够方便,并按功能分组样式:

• typography.css
• layout.css
• sticky-footer.css (包含许多元素的声明,不包含页脚)

2D

当项目有很多CSS时,可能需要同时使用两个分组.CSS文件结构变为二维:

layout/

• grid-system.css
• header.css
• sidebars.css

look/

• typography/
  • main.css
  • headers.css
  • lists.css
• backgrounds/
  • html_elements.css
  • header.css
  • main-area.css
  • footer.css

好的,这个例子是捏造的,但你确实理解我的意思.

到目前为止,一切都很好.

输入媒体查询

这是我的CSS结构变得有趣的地方.

除了上面描述的2D结构之外,我还必须通过媒体查询来构建我的代码:

• 我的一些风格是通用的(适用于所有地方)
• 有些仅适用于特定屏幕尺寸:
  • 小;
  • 介质;
  • 大;
  • 超大.
• 有些适用于某些屏幕尺寸组:
  • 除了小(非移动风格)以外的一切;
  • 中小型(侧边栏不在侧面)
  • 大和xlarge(你有侧边栏的地方)

我试图通过在现有CSS文件中分散媒体查询样式来克服这个问题.该断点指南针扩展有很大帮助,但样式表变得太乱.在文件结构中没有描绘某种风格时会发现很多痛苦.

我尝试通过媒体查询进行分组,然后按元素和函数进行分组.但是文件结构是二维的,因此无法添加新维度,只能添加另一级别的层次结构.所以,它并不优雅.而且,它非常笨重.

所以我最终得到了一个2D结构,在一个轴上有媒体查询,在另一个轴上有一个丑陋的元素和函数组合.

我对此完全不满意,但我没有想出一个优雅的解决方案.请建议一个.

这就是我想要实现的目标:

页面上有多个dropzones.用户应该能够从他们的操作系统中拖动文件并将其放入dropzones.

Dropzones在拖动过程中会突出显示.有两种视觉上不同类型的突出显示:"目标"(例如,元素以虚线边框勾勒出轮廓)和"悬停"(例如,元素获得明亮的背景).

目标突出显示同时在所有下拉列表中应用/删除:

• 当用户在页面上拖动文件时,应使用目标突出显示突出显示所有下拉区域.
• 当用户在页面外拖动文件,或取消拖放操作或执行拖放操作时,应从所有下拉区域中删除目标突出显示.

悬停突出显示应仅适用于一个dropzone:

• 当用户在dropzone上拖动文件时,应使用悬停突出显示突出显示该dropzone.
• 当用户将文件拖放到该dropzone之外,或取消拖放操作或执行拖放时,应从dropzone中删除目标突出显示.

当用户在dropzone上删除文件时,该文件的名称应该出现在dropzone中.

当用户在dropzones外部的页面上删除文件时,应删除所有突出显示的区域,并且不会发生任何其他情况.具体而言,浏览器不应打开已删除的文件.

解决方案应尽可能优雅:不喜欢使用超时,计数dragenter/ dragleave事件和重新应用突出显示等脏兮兮的黑客行为dragover.

该解决方案应该适用于主流浏览器的最新版本.

这是我到目前为止所取得的成就:尝试1,尝试2.

我成功解决的问题

1. 删除dropzone之外的文件会导致浏览器打开该文件.

   解:

   $(document).on('dragover drop', function (e) {
       e.preventDefault();
   });
   

   Run Code Online (Sandbox Code Playgroud)

2. 将文件拖放到dropzone会生成一个drop事件,其目标等于dropzone的子级而不是dropzone本身.

   解:

   $dropzones.on( 'drop', function (event) {
   
     /* ... */
   
     // Find the dropzone responsible for the event
     $targetDropzone = $(event.target).closest($dropzones);
   
     /* ... */
   });
   

   Run Code Online (Sandbox Code Playgroud)

3. 将文件悬停在dropzone的子节点上会生成多个dragleave事件,使悬停突出显示立即消失(当鼠标光标离开dropzone时,应从dropzone删除悬停突出显示,因此它将绑定到dragleave事件).

   解决方案:使用dragout事件代替dragleave.dragout是jquery.event.dragout插件提供的自定义事件.元素的孩子不会触发此事件.

未解决的问题

1. 无法检测拖动文件离开document或的时刻 …

我的前端是一个基于EmberJS的应用程序.它本质上是完全异步的,所以用Capybara测试它是痛苦和痛苦.另一方面,Ember提供了一个开箱即用的优秀测试套件,使验收测试变得有趣和有效.

通常情况下,使用固定装置或后端模拟验收Ember应用程序.但是对模拟的测试并不能让我满意:

• 它不会揭示后端和前端之间可能的API不一致,竞争条件等.
• 以这种方式测试后端业务逻辑是不可能的.这些测试不是集成测试.
• 最后,验收测试需要持久性,因此您必须在模拟中复制后端行为.这非常繁琐,你有效地最终实现了两个后端.

所以我想测试真正的后端!设置Ember以使用本地后端实例进行测试是微不足道的.但问题是后端将在各个测试甚至测试会话之间保持其状态.

这就是为什么我想在Rails中实现一个特殊的公共API:

• 只有在使用特定标志或env var运行Rails时,API才可用.
• Rails以非测试模式运行,提供正常的API调用,就像在生产中一样.
• 在每次测试之前,前端调用特殊API,告诉Rails这个特定测试需要哪个数据库设置.
• 当收到对特殊API的调用时,Rails会清理数据库并使用请求的数据填充它.例如,要从购物车中测试项目删除,数据库应该在购物车中有三个项目.
• Rails完成API请求,前端开始测试.
• 前端运行测试步骤,使用正常的后端API,就像在生产中一样:登录,创建帖子,评论它们.它还会尝试做一些禁止的事情,例如在未登录时编辑帖子,超出文本长度限制等,并验证后端是否拒绝禁止的操作.
• 当前端运行下一个测试时,它将再次调用特殊API.对于此特定测试,Rails将丢弃先前测试产生的状态并设置新测试状态.

我是一个对Rails有粗略了解的前端开发人员.Factory Girl和Database Cleaner似乎是适合这项工作的工具,但绝对没有关于如何在Rails正常测试环境之外使用它们的信息.我想我需要一个控制器或一个Rails引擎.

所以问题是:如何在Rails中创建一个API,前端可以使用它来告诉Rails使用fixture工厂设置某个数据库状态,而Rails则以非测试模式运行,即提供REST API和没有通过RSpec/Capybara/Cucumber运行？

额外功能:应在前端定义夹具工厂属性,以便将测试代码存储在一个位置.因此,后端应该能够通过特殊API接受夹具工厂属性.默认值仍然可以在后端的代码库中定义.

我相信这可能成为验收/集成测试的最佳实践.如果我设法实现它,我保证发布一个gem.

我正在使用具有错误的VS Code扩展.它已经在GitHub上的pull请求中得到修复,但是存储库似乎被放弃了并且PR没有被合并.

如何直接从GitHub上的特定仓库/分支机构安装扩展程序？

我有一个全局复位,设置font-size和line-height对inherit每一个元素:

* {
  font-size:   inherit;
  line-height: iherit; }

因为html,我明确定义它们:

html {
  font-size:   16px;
  line-height: 1.25em; } /* 16×1.25 = 20 */

注意,这line-height是以相对单位设置的.

因为h1,我定义了不同的字体大小:

h1 {
  font-size: 4em; }

我希望h1继承相关line-height的1.25em.生成的行高应该等于80px(16×4×1.25).

但在现实中h1的line-height保持等于20px(这是相同html的:16×1.25 = 20).

说,我有以下HTML:

<p>foo<br>bar</p>
<h1>foo<br>bar</h1>

结果截图:

http://jsfiddle.net/M3t5y/5/

要解决这个问题,我必须定义h1的line-height明确等于它继承了相同的价值:

h1 {
  font-size:   4em;
  line-height: 1.25em; }

然后line-height变得正确: …

我已成功使用美丽的Susy网格系统来创建类似于WebDesignerWall.com的响应式布局:

我未能实现的是position:fixed侧边栏.

当页面滚动并保持在同一位置时,这样的侧边栏不会滚动.这非常方便(无论如何,你实际上无法将更多内容放入侧边栏,因为它会在狭窄的窗口中混乱页面顶部).

每当我申请position:fixed专栏时,我的布局都会变得疯狂: 彩色块被声明为三列宽,但在position:fixed应用于侧栏时会进一步伸展.

我认为问题是侧边栏的宽度是相对的,即以百分比设置.由于position:fixed,宽度是根据浏览器窗口的宽度而不是其容器来测量的(尽管我将容器设置为position:relative).

问题是:如何在对其容器而不是视口测量其宽度的同时将列固定到窗口？

也许用JS来修复元素的位置是可能的？

PS我已经尝试了width: inherit解决方案,但它对我的情况没有任何帮助.

我有一排任意宽度的项目。它们在容器内居中（注意红色容器左右两侧的空白）：

有时容器会小于所有项目的宽度：

发生这种情况时，我希望最后的项目像这样包装到下一行：

对我来说非常重要的是每一行的内容必须左对齐，但整个网格必须居中：

最初，我尝试用 FlexBox 实现它。经过很多挫折和头发拉扯，我了解到这在 FlexBox 中是不可能的：https ://stackoverflow.com/a/32811002/901944

同一页面上的另一个答案建议使用 CSS 网格而不是 flexbox。

CSS grid 产生的结果略有不同，但这也适合我：

这是使其工作的代码：

.red-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
  justify-content: center;
}

该代码包含了很多的关键词，我不明白：grid-template-columns，repeat，auto-fit，minmax和max-content。我尝试阅读它们并失败了。没有任何指南和 API 文档明确解释这种特定组合的工作原理。MDN 文档太短而且含糊不清。

我特别纠结的是这个210px神奇的数字。为什么有必要？（呃，我知道这是必要的，因为规范是如何设计的，但这并不能帮助我理解。）

我的网格中项目的大小是任意的，所以我不能使用固定值。此外，设置此固定值会使结果略有偏差：小项目会增长，而大项目会溢出容器。

我本质上想要的是：

  grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));

但该规则被浏览器认为是错误的。

我偶然发现了这个答案，它解释了在这种情况下规范禁止使用两者min-content和max-content一起使用。答案的建议解决方案是……使用 Flexbox！

循环已关闭。我回到了我开始的地方，希望我现在头上的头发又少了一轮。

如何在左对齐每行内容的同时使网格居中，项目具有任意宽度？

为了您的方便，这里有一个样板：https ://jsbin.com/vuguhoj/edit?html,css, output

可以通过拖动右下角来调整容器的大小。

PS 不display: inline，float: left请。 …

我正在构建一个相对直接的comment-list组件.我想传递可评论的模型(比如说a Post)并让组件负责创建,编辑和删除注释.现在我传递了各种各样的动作,而且非常脆弱.

如何在组件集成测试中创建Ember Data模型的真实实例？

我的直接想法是导入模型然后.create({})它,但错误use this.store.createRecord() instead

/* jshint expr:true */
import { assert } from 'chai';
import { describeComponent, it } from 'ember-mocha';
import hbs from 'htmlbars-inline-precompile';
import Post from 'ownersup-client/post/model';

describeComponent( 'comment-list', 'Integration: CommentListComponent', {
    integration: true
  },
  function() {
    it('renders all of the comments', function() {
      const model = Post.create({ title: 'title' });
      model.get('comments').createRecord({ body: 'One Comment' })

      this.render(hbs`{{comment-list model=model}}`);

      assert.lengthOf(this.$('.comment-list-item'), 1);
    });
  }
);

有人有什么想法？