小编bri*_*out的帖子

SVG：是否可以使用随机或非静态值？

我正在 SVG 中为多边形形状设置动画（因此它可以用作 CSS 中的背景）。我很好奇是否有一种方法可以随机生成一个值来使用，或者其他一些方法，这样动画在每次加载时并不总是从相同的位置开始（不使用外部 SVG 库和不使用 JavaScript）？

这是当前的SVG：

<polygon style="stroke:rgb(255,0,0);fill:transparent;" points="0,0 121.5,150 600,0 ">
    <animate attributeName="points" dur="24s" values="0,20 121.5,150 600,0; 0,100 571.5,150 306.5,0; 0,20 121.5,150 600,0" repeatCount="indefinite" keyTimes="0; 0.5; 1" calcMode="spline" keySplines=".5 0 .5 1; .5 0 .5 1" />
</polygon>

Run Code Online (Sandbox Code Playgroud)

animation svg svg-animate

gok*_*jou

2020 10-25

6
推荐指数

2
解决办法

1169
查看次数

浏览器 console.log 的高级样式

的输出console.log可以设置样式，基础知识在 StackOverflow 问题JavaScript 控制台中的颜色中介绍。

基本造型

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

Run Code Online (Sandbox Code Playgroud)

高级造型

高级样式呢？console.log风格可以走多远？

~~图片呢？使用background-image似乎不起作用。~~

怎么样display: block？好像设置display: block没有效果。

自定义字体怎么样？font-family似乎工作，但如何使用自定义字体？

对于我的用例，我只需要 Chrome 支持。

编辑

我设法实现了图像。诀窍是使用填充来设置图像的大小。例如：

var style = [
  'background-image: url("https://media.giphy.com/media/3o85xoi6nNqJQJ95Qc/giphy.gif")',
  'background-size: contain',
  'background-repeat: no-repeat',
  'color: #000',
  'padding: 20px 20px',
  'line-height: 0px'
  ].join(';');
console.log('%c ', style);

Run Code Online (Sandbox Code Playgroud)

编辑 2

Firefox 在控制台样式中阻止外部图像，但支持 dataURI：https ://bugzil.la/1134512 。此外，Firefox 让您只需display: block输入即可，请参阅Firefox 支持的属性列表。

javascript css devtools google-chrome-devtools console.log

bri*_*out

2020 07-10

6
推荐指数

1
解决办法

429
查看次数

检测 <iframe> 是否正在播放音频

题

我想知道<iframe>我的网站中嵌入的是否正在播放音频。

理想情况下，<iframe>播放音频的“声音”有多大，但这是可选的。

请注意，<iframe>不在同一来源，因此检查<iframe>不是一个选项。

我的具体用例

我是https://www.timer-tab.com/的开发者，时间一到，YouTube 视频就会开始播放。YouTube 视频正在以<iframe>. 我想知道 YouTube<iframe>是否发出任何声音。如果它不发出任何声音，则使用 Web Audio API 播放后备声音。（YouTube<iframe>有时不发出声音。例如，当用户将其 YouTube 音量设置设置为静音时。不幸的是，无法通过postMessageing YouTube获取该信息<iframe>。）

相关问题

检测音频是否在浏览器 Javascript 中播放。

这不是重复的；我的问题专门针对<iframe>音频检测，而相关问题则针对所有音频检测。

javascript audio iframe web-deployment web

bri*_*out

2020 06-05

5
推荐指数

1
解决办法

774
查看次数

打字稿：实现转换器以在运行时访问类型

TSC 将 TS 代码编译为 JS 后，类型被移除，不再可用。

但是，原则上，应该可以通过使用 webpack/typescript/Vite 转换器在运行时使类型可用。

有没有人做到这一点？

type Data = {
  name: string;
  age: number;
};

// How can we implement `getType()`?
console.log(getType<Data>());
// It should print:
// { name: 'string', age: 'number' }

Run Code Online (Sandbox Code Playgroud)

在编译类型中，类型Data是已知的，因此应该可以（尽管不容易）实现一个转换器，使该类型在运行时可用。

这将启用大量用例，例如 IO 验证。

对于我的用例，我不需要诸如泛型之类的高级类型。我只需要类型：对象、数组、字符串、数字和日期。

上下文：我正在构建一个 RPC 实现（https://github.com/brillout/wildcard-api）。

编辑：我不是在寻找像zod这样的东西，你用 zod 定义一个架构，然后推断 TypeScript 类型。我的用户直接使用 TypeScript 定义他们的类型，我需要在运行时知道这些类型。所以我确实需要一个编译时转换器。

typescript

bri*_*out

2021 07-26

5
推荐指数

1
解决办法

133
查看次数

获取动态 `import()` 的导入路径作为 TypeScript 字符串类型

使用 TypeScript 可以实现以下功能吗？

const mod = await import('./path/to/module')
// Is it possible to implement a utility type "ImportPath" that extracts
// the import path? Here the type of modImportPath would be './path/to/module'.
type modImportPath = ImportPath<typeof mod>

Run Code Online (Sandbox Code Playgroud)

语境

我是vite-plugin-ssr的作者，我希望能够从以下内容推断页面 ID。

// The vite-plugin-ssr user provides the app's routes
const routes = [
  {
    // How to infer the page's ID `LandingPage` from this dynamic import?
    Page: () => import('./pages/LandingPage'),
    route: '/'
  },
  {
    // How to infer the page's …

Run Code Online (Sandbox Code Playgroud)

typescript

bri*_*out

2022 10-05

5
推荐指数

1
解决办法

319
查看次数

bash中的后缀别名

后缀别名是我考虑切换到ZSH但我想坚持使用bash的唯一原因.那么在bash中可能有类似后缀别名的东西吗？

对于那些不知道后缀别名是什么的人,在ZSH中有以下内容

$ alias -s cpp=vi
$ filename.cpp

Run Code Online (Sandbox Code Playgroud)

将运行vi与filename.cpp作为第一个参数.

请注意,像xdg-open或gnome-open这样的东西是不够的.我希望bash在输入文件名时执行命令.

完成对我来说非常重要.因此,如果输入文件名的开头,那么当按下TAB键时,如果完成文件名的其余部分将会很好.

unix linux bash zsh

bri*_*out

2017 03-31

4
推荐指数

1
解决办法

1478
查看次数

如何在Firefox中专门禁用HTML5应用程序缓存

由于Firefox在使用HTML5应用程序缓存时提示用户存储数据,因此我想在Firefox中禁用它以避免提示通知.

一种方法是提供两个不同的HTML文件:一个用于Firefox,<html>另一个用于其他浏览器<html manifest=...>.

但出于效率目的,我想提供一个静态文件.

那么如何<html manifest=...>在Firefox中提供文件时禁用应用程序缓存？

firefox html5 web-applications application-cache

bri*_*out

2011 09-06

3
推荐指数

1
解决办法

1635
查看次数

HTML中显示高效的毫秒数

目标:找到以CPU效率最高的方式在HTML中显示当前的毫秒数.

我目前的解决方案在笔记本电脑上占用高达10%的CPU计算量.我目前的解决方案:http://dev.timerintab.appspot.com/test/ms

我的最终目标是在计时器上显示毫秒数.

更新
我改变了试验取为间隔的参数:http://dev.timerintab.appspot.com/test/ms?interval=x其中x是在毫秒的时间间隔.
可以注意到,与16ms的间隔相比,100ms的间隔产生视觉差异:
http ://dev.timerintab.appspot.com/test/ms？interval = 100
http://dev.timerintab.appspot.com/test/ms？interval = 16
我甚至可以注意到20ms和16ms间隔之间的差异.

html javascript html5 dom canvas

bri*_*out

2014 11-14

2
推荐指数

1
解决办法

1927
查看次数