小编Loi*_*ilo的帖子

防止内容扩展网格项

TL; DR:table-layout: fixed CSS网格有什么相似之处吗?


我尝试创建一个带有大型4x3网格的年视图日历,其中包含7x6网格.

日历应填充页面,因此年份网格容器的宽度和高度均为100%.

.year-grid {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}
Run Code Online (Sandbox Code Playgroud)

这是一个有效的例子:https://codepen.io/loilo/full/ryXLpO/

为简单起见,该笔每个月都有31天,周一开始.

我还选择了一个可笑的小字体来演示这个问题:

网格项(=日单元格)非常精简,因为页面上有数百个.一旦日期数字标签变得太大(可以使用左上方的按钮随意使用笔中的字体大小),网格的大小将会增大并超过页面的主体大小.

有什么方法可以防止这种行为吗?

我最初声明我的年度网格在宽度和高度上都是100%,所以这可能是重要的一点,但我找不到任何符合网格的CSS属性.

免责声明:我知道有很简单的方法可以在不使用CSS Grid Layout的情况下设置日历的样式.然而,这个问题更多的是关于该主题的一般知识而不是解决具体的例子.

css css3 grid-layout css-grid

113
推荐指数
3
解决办法
6万
查看次数

使用"色调"混合模式混合两种不透明的颜色

我想实现W3C合成和混合规范中描述的颜色混合.(我在JavaScript中这样做,但语言对于解决我的问题并不重要.)


回想起来:在实现这个问题的答案期间,我意识到这可能会成为一个非常好的独立包.如果您有兴趣,可以从npm获取它.


到目前为止,它的效果非常好,但我想进一步采用这些算法,并增加对alpha通道的支持.感谢SVG合成规范提供了所有必需的公式,这些公式并不太难.

但是现在我坚持实现W3C规范描述为不可分离的混合模式(从Photoshop中已知):色调,饱和度,颜色亮度.

遗憾的是,这些算法在SVG规范中不可用,我不知道如何使用它们.我猜W3C提供的公式的修改版本用于处理我缺少的alpha通道.

为了使我的问题更具视觉效果,我将展示Photoshop为色调混合两种颜色的方式:

Photoshop色调混合两种不透明颜色的例子

这也是我能够使用上述W3C规范中的非alpha算法重现的.

我无法重现的是当我在源和背景颜色上放置较低的alpha时Photoshop给我的结果:

Photoshop色调混合两种颜色的示例,每种颜色具有60%的不透明度

有谁知道如何以编程方式实现该结果?

更新1:更改插图(添加HSVA和RGBA代码)以阐明使用的颜色.

更新2:要检查可能的解决方案,我将附加另外两个Photoshop生成的混合示例:

Photoshop色调混合两种颜色的示例,具有不同的不透明度组合

Photoshop色调混合两种颜色的示例,具有不同的不透明度组合

更新3:事实证明,除了没有关于颜色混合的线索之外,我还搞砸了我的Photoshop设置,使任务更难以解决我的问题.修复了可能的未来路人的示例图像.

algorithm blending colors

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

如何通过REST API更新多个项目的顺序?

我正在开发一个REST API,用于导航菜单项列表,几乎用于学习目的.在此之前,API中的所有内容都非常简单,因为我只需通过经典/collection/{id}内容修改单个项目.

但是现在我想改变存储在order我的数据库字段中的列表项的顺序,当然我不想为每个菜单项做一个请求.

那么这样做的合适方式/常见的最佳做法是什么?

我可以想象在发送的数据中使用id-order键值对发送PUT请求,/collection但是Laravel(我用来构建API)不允许这样做.我当然可以解决这个限制,但我想有明智的理由认为这是不允许的.

另一个想法是发送PUT请求以/collection/{ids}逗号分隔的ID列表,但为此我还必须发送ID及其订单值的键值列表,这看起来非常多余,因为这也有点脏.

那么实际上最好的方法是什么呢?

rest httprequest

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

HTML5音频 - currentTime属性不准确?

我正在玩HTML5 <audio>标签,我注意到一些与该currentTime属性有关的奇怪行为.

我希望播放本地音频文件timeupdate,并通过将currentTime属性与duration属性进行比较,让事件在完成时进行检测.

如果我让歌曲从头到尾播放,这实际上工作得很好 - 歌曲的结尾是正确的.

但是,currentTime手动更改(直接通过JavaScript或使用基于浏览器的音频控件)会导致API不再返回正确的值,currentTime但似乎将其设置为实际播放位置的前几秒.

(这些"几秒钟"前面是基于Chrome,Firefox似乎完全疯了,导致差异变得更大.)

关于这个问题的一个小jsFiddle示例:http://jsfiddle.net/yp3o8cyw/2/

任何人都可以告诉我为什么会发生这种情况 - 或者我是不是正确的API应该做什么?

PS:我刚注意到这实际上只发生在MP3编码的文件中,OGG文件完全没问题.

javascript audio html5 mp3 html5-audio

6
推荐指数
2
解决办法
1899
查看次数

在PHPStorm中设置当前文件的语法

简单的问题:我可以让PHPStorm显示具有特定语法高亮显示的当前文件吗?

甚至可能让IDE记住该特定项目中的特定文件?

背景:我有一个Laravel .env文件,我希望通过突出显示.ini文件来显示,而无需为所有.env文件设置突出显示.

ide syntax-highlighting phpstorm

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

从另一个文件中导出一个 TypeScript 类,而不是在其中定义的

有一段时间我一直试图从我在一个地方编写的一个小库中导出类。我希望每个班级都不知道它们是如何提供给外部的,但到目前为止我无法让它发挥作用。

让我们假设我有课 Foo

// lib/foo.ts
export class Foo {}
Run Code Online (Sandbox Code Playgroud)

和班级 Bar

// lib/bar.ts
export class Bar {}
Run Code Online (Sandbox Code Playgroud)

现在我想让那些通过MyModule命名空间使用包的人可以使用它们,这就是它变得棘手的地方。我不知道如何从定义在其他地方而不是类本身的命名空间中导出现有类。

显然,这不起作用,因为它不是有效的 TypeScript:

// api.ts
import { Foo } from "./lib/foo";
import { Bar } from "./lib/bar";

export namespace MyModule {
    export Foo;

    export namespace MySubModule {
        export Bar;
    }
}
Run Code Online (Sandbox Code Playgroud)

我找到了两种可能的解决方案,但两者都有其缺点。我可以定义一个变量并将类分配给它:

// api.ts
import { Foo as MyFoo } from "./lib/foo";
import { Bar as MyBar } from "./lib/bar";

export namespace MyModule {
    export const Foo = MyFoo;

    export namespace …
Run Code Online (Sandbox Code Playgroud)

module typescript

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