最近家里来了小孩儿,我想在电视上给他们放一些适龄的视频。发现YouTube有一个专门为儿童服务的Kids版块,经过一番摸索,感觉还不错。在这里,我记录下如何使用YouTube Kids。

介绍

YouTube Kids 是一个为儿童设计的免费应用程序,它提供一个更加安全的环境,让儿童浏览YouTube视频。这个应用旨在提供适合儿童观看的内容,同时也给家长控制孩子观看内容的能力。

要求

与YouTube一样

阅读全文 »

最近做网页热键处理,对于事件还是需要温故下。

图形化展示事件派发过程

JS相关方法

  1. 事件绑定当然很简单

    比如使用addEventListener,通过第三个参数控制是否在捕获阶段。如果只是冒泡阶段的话,直接使用onclick等

  2. event对象下有个方法是stopPropagation,字面意思是停止传播,无论是冒泡还是捕获,均可通过该方法来阻止继续传播,结合图也就好理解了

  3. event下还有个preventDefault,但该方法

    • 并不阻止事件的继续传播

    • 会阻止默认行为,比如说a标签的跳转

相关文档

阅读全文 »

xterm.js官方repo中除了浏览器组件/插件外,还有headless组件支持,那么xterm-headless是什么东西呢。

最近在翻看inshellisense时看到其中用到了xterm-headless,研究后理解了headless的作用。这里Mark下。

headless-nodejs支持

首先通过官方介绍也就知道了headless是用在nodejs侧的。即服务端也可以实例化一个terminal的客户端组件,然后操作执行。

注意点

阅读全文 »

IDE style command line auto complete

以下inshellisense简称为is

安装

1
2
3
4
5
6
# 如果还未安装node,推荐nvm方式先安装node
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

nvm install 18
npm install -g @microsoft/inshellisense
npm install -g node-gyp
阅读全文 »

今年油猴脚本用的多些。这里总结下目前的使用情况。

定位

油猴用于强化网页,比如支持网页视频多倍速,网页样式修改,自动化一些操作等

常用脚本

  1. JD Review

    右键-自动评论,获得一点京豆

  2. 中信还款

    进入中信银行页面后,自动进入我的贷款页面,统计当前利息占比等信息。银行网页并不这些信息,而这些才是最重要的。

  3. 视频变速

    有些网页没有开放视频的多倍速变速,因此脚本增加了右键菜单的多倍速切换

  4. 文本选中支持

  5. 工作定制化脚本

    • 比如加载某网页时,自动执行一些选项操作等
阅读全文 »

当使用WebStorm/Visual Studio Code时针对package.json中定义的脚本,我们都可以直接点击debug启动脚本,为什么这样做就可以调试呢,这里粗粒度解释下

IDE下的debug

比如原脚本是 "start": "node app.js",当我们需要调试这个node服务时,点击debug按钮,打印信息如下

1
2
3
4
5
6
7
8
9
10
/Users/alanhe/.nvm/versions/node/v18.16.1/bin/npm run start

> express-demo@0.0.1 start
> node app.js

Debugger listening on ws://127.0.0.1:63206/3fc8664c-10d9-4f99-8ed8-04efd382d9ae
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Example app listening on port http://127.0.0.1:8000!

阅读全文 »

这里罗列下作为前端开发者常用到的npm包

  1. local-web-server

    ws一下,随时起一个web server

  2. whistle

    代理服务

  3. chalk

    console输出彩色化

  4. readline

    终端交互输入

前端代码中经常需要打开新页面,这里总结下做法和遇到的问题

做法

  1. a标签
  2. window.open

两者具体来说window控制会更为精细,比如可以控制窗体宽高等。a标签的话需要DOM下需要创建出a标签元素,只是具体可见不可见就看情况了。a标签相比较更为推荐,因为代表着用户行为驱动的交互形式。

pwa中的行为表现

阅读全文 »

  1. ajv
    校验
0%