Hello,鸿蒙应用

感觉鸿蒙应用文档很多,初学者看起来有点乱乱的,记录一下快速开发方法。

开发者账号注册

你需要提前注册好华为开发者联盟账号,否则在后续开发调试应用过程中无法完成自动签名、发布等操作

安装IDE

HUAWEI DevEco Studio下载链接:https://developer.huawei.com/consumer/cn/deveco-studio

Hello World

新建Project,在应用中选择第一个模版项目

真机调试

准备好你的华为手机,使用USB数据线连接到电脑。

  • 打开开发者模式
  • 打开“USB调试”开关

基础知识

应用名称修改

  1. 配置文件:src/resources/zh_CN/element/string.json
  2. 修改nameEntryAbility_label对应的value

应用图标修改

  1. 配置文件:src/resources/base/media

入口文件

  1. 配置文件:src/main/module.json5
  2. 查看 srcEntry 指向的文件
  3. 查看onWindowStageCreate方法中加载的页面为入口文件

新建页面

  1. 配置文件:src/resources/base/profile/main_pages.json
  2. 在src/ets/pages目录下新建同名ets文件

页面之间跳转

  1. 在A页面中注册按钮,绑定点击事件,使用router.pushUrl点击即跳转到第二个页面
  2. 在B页面中注册按钮,绑定点击事件,router.back()点击跳回A页面
// Page A
        Button() {
          Text('Next')
            .fontSize(30)
            .fontColor('#FFFFFF')
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .backgroundColor('#409EFF')
        .width('40%')
        .height('5%')
        .onClick(() => {
          router.pushUrl({url: 'pages/Second'}).then(() => {
            console.info('Jumping to second page')
          }).catch((err) => {
            console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
          })

// Page B

        Button() {
          Text('Back')
            .fontSize(25)
            .fontColor('#FFFFFF')
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Normal)
        .backgroundColor('#409EFF')
        .width('40%')
        .height('5%')
        .onClick(() => {
          router.back()
        })

常见问题

真机运行报错Failure[MSG_ERR_INSTALL_FAILED_NO_BUNDLE_SIGNATURE]

解决:单击Open signing configs 或 通过File -> Project Structure -> Signing Config 重新登录

Element Plus 下拉框懒加载

需求背景

常见的需求中经常有下拉框作为搜索的条件之一,我们需要先调接口拉取数据供用户进行选择。当遇到数据量大,或考虑到随着时间推移,数据量会变得庞大的情况,通常接口会采取分页设计。

最佳实践

  1. 默认先只拉取第一页数据,供用户选择
  2. 当用户滚动至数据末尾,拉取下一页数据(数据懒加载)
  3. 支持关键词搜索
  4. 支持一键清空

实现细节

Vue项目我们团队基本上统一使用Element UI / Element Plus,本次针对 Element Plus的Select组件实现了公共方法 – 自定义指令完成懒加载。(Vue 3适用)

使用

// 引入
import vLoadMore from "@/utils/loadMore"

// 绑定指令
<el-select v-load-more="loadMoreData"></el-select>

原理

基于Element Plus Select组件滚动区域,监听滚动是否到达底部

懒加载逻辑

当元素内容的总高度 – 已滚动的高度 <= 元素的可见区域高度,代表当前滚动位置已经接近或到达底部,此时调用父组件传入回调方法即可。

初始状态

滚动到底部

Element Plus Select组件滚动区域选择

当页面中只用到一个下拉框,你可以直接使用类名定位。

当页面中有多个下拉框,上面的方法会导致数据错乱。查看Select DOM可以发现,不同的下拉框记录了不同的control id

而control id可以定位到对应的下拉框。举例:平台选择器的control id是”el-id-6389-3″,对应的下拉框DOM id也是”el-id-6389-3″

因此,我们可以利用以上属性定位到Select组件的实际滚动区域。

代码

/* Element Plus
   Select组件 自定义指令-触底加载更多
   使用:
       1. 页面中引入
       ```
        import vLoadMore from "@/utils/loadMore"
       ```
       2. 绑定自定义指令
       ```
       <el-select v-load-more="loadMoreData"></el-select>
       ```
 */
const vLoadMore = {
    mounted(el, binding) {
        const child = el.querySelector('.el-select__input')
        const id = child.getAttribute('aria-controls')
        const popper = document.getElementById(id)
        const SELECT_DOM = popper.parentElement

        SELECT_DOM.addEventListener('scroll', function () {
            const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
            if (CONDITION) {
                binding.value()
            }
        })
    }
}

export default vLoadMore

macOS部署Comfy UI

安装Python

brew install python

安装PyTorch

pip install torch torchvision torchaudio
// or
python3 -m pip install torch torchvision torchaudio

克隆Comfy UI仓库

git clone https://github.com/comfyanonymous/ComfyUI
cd ComfyUI

安装依赖

pip install -r requirements.txt

运行Comfy UI

python main.py
// or
python3 main.py

下载模型

liblibhuggingface下载模型后,放在Comfy UI仓库 models/checkpoints 目录下,即可选择模型,运行工作流出图。

离开页面时调接口

场景:当前页面正在执行异步任务,当用户点击导航栏或直接关闭页面时,需调接口取消任务,减少资源浪费。

问题:如果在beforeunload事件中调ajax 请求,则会出现浏览器cancel掉请求的情况。

解决:使用sendBeacon方法,适用于发送少量数据到服务器。

Navigator.sendBeacon()

这个方法主要用于满足统计和诊断代码的需要,这些代码通常尝试在卸载(unload)文档之前向 Web 服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而,对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在 unload 事件处理器中产生的异步 XMLHttpRequest

Vue 3代码如下

<script setup>
import { onBeforeUnmount, onMounted } from 'vue';

// 取消任务的API函数
function cancelTask() {
  navigator.sendBeacon('/api/cancel-task', JSON.stringify({ task: 'taskId' }));
}

onMounted(() => {
  // 添加 beforeunload 事件监听器
  window.addEventListener('beforeunload', cancelTask);
});

onBeforeUnmount(() => {
  // 组件卸载前移除监听器
  window.removeEventListener('beforeunload', cancelTask);
});
</script>

domain 的自言自语 2404

云原生

Deep dive into Linux Networking and Docker — Bridge, vETH and IPTables | by Farhan Ali Khan | techlog | Medium

开发

十分钟弄懂 k8s Operator 应用的制作流程 – 知乎 (zhihu.com)

Redis——由分布式锁造成的重大事故 – 掘金 (juejin.cn)

记一次因@Async引发的程序bug (qq.com)

仰望大佬

网络

STUN (RFC 3489) vs. STUN (RFC 5389/5780) | NETMANIAS

[译] NAT 穿透是如何工作的:技术原理及企业级实践(Tailscale, 2020) (arthurchiao.art)

吃瓜

【腾讯】云计算史诗级二翻车来了 (qq.com)

对于用户的补偿,也非常迷,即使我拿出带有 RequestId 的截图,客服也认为不受影响,不进行赔付。

A person who creates cute, high-quality logos related to IT such as ‘Bluesky’, ‘Python’, ‘Vim’, ‘404’, and ‘Nurupo’ appears, and the Bluesky and React official sites immediately implement the logos, causing an explosive excitement. – GIGAZINE

domain 的自言自语 2403

开发

Innodb中的事务隔离级别和锁的关系 – 美团技术团队 (meituan.com)

全网都在说一个错误的结论 (qq.com)

X 上的 Alex Xu:“Why is 𝐑𝐞𝐝𝐢𝐬 so 𝐟𝐚𝐬𝐭? There are 3 main reasons: 1. Redis is a RAM-based data store. RAM access is at least 1000 times faster than random disk access. 2. Redis leverages IO multiplexing and single-threaded execution loop for execution efficiency. https://t.co/U1KX1GXFRt” / X (twitter.com)

k8s 还会丢事件?- 1 (qq.com)

网络

Tailscale 的 TLS 证书过期,网站挂了 90 分钟! (qq.com)

尽管 Tailscale 因 TLS 证书过期导致了90分钟的服务中断,但这恰恰凸显了它的一大优势——多数用户几乎没有受到影响。Tailscale 的分布式架构使得用户端的连接不依赖于中心节点始终在线。这种弹性设计是 Tailscale 区别于传统 VPN 的关键所在。短暂的中心服务中断并不能否定 Tailscale 的价值,反而凸显了其良好的容错性。

事实上我也希望未来的智能家居能做成这样,不要云端宕机,家居也瘫痪。

RFC4193 IPv6 Generator (cd34.com)

[ RouterOS 折腾手记 ] 9.RouterOS配置IPv6 – 哔哩哔哩 (bilibili.com)

如果你的 PPPoE 宽带访问部分因特网服务异常或缓慢 – V2EX

请检查 PPPoE 接口的 IPv6 TCP MSS adjust 是否正确。
对于 MTU 1492, IPv6 的 TCP MSS 应为 1432.

对于 RouterOS, PPP profile 中的 change-tcp-mss=yes 可能不会对 IPv6 正确生效。
对于 RouterOS, 可以使用如下命令对 IPv6 的 TCP MSS 做正确的 adjust.
/ipv6 firewall mangle add out-interface=pppoe-out1 protocol=tcp tcp-flags=syn action=change-mss new-mss=1432 chain=forward tcp-mss=1433-65535

最好是在防火墙 mangle 表中对出网流量进行 MSS 钳制。这里作者提到,虽然邻居发现里面可以指定 MTU,但是会影响到内网设备(例如巨帧)。

RA 中宣告的 MTU 应当是 link / 三层口的 MTU, 而不是路由器所有接口 MTU 中最小的那个。直接向下联口宣告最保守的小 MTU 是对 IPv6 相关协议设计的错误理解和 RFC 的错误实现,不然如果我要用 ULA 地址跨三层访问内网 PMTU 9000 的 CIFS 存储,也用 1492 的 MTU 这显然不合理。

按 RFC, 针对中间路径 MTU 比源端小这个场景,应当依靠 PMTUD. 但是现网中大量对 RFC 的错误实现和比相关 RFC 更早出现的屎山,导致了 PMTUD 的可用性与可靠性问题。(其实这就是 ICMP 中 C 的用例之一,但是很多网络工程师乃至所谓架构师只看到了其中的 echo (ping))

没有 IP 路由器高兴在数据面参与 TCP 的事情( IPv6 路由器不参与 fragment 也是对这一“IP 路由尽可能纯粹化”的思想的推广和贯彻),TCP MSS adjust/clamp 的施加是作为 PMTUD 失效时的兜底,IPv4 尚有中间路由器帮忙 fragment 作为兜底,IPv6 的中间路由器就只能通过帮忙 adjust/clamp 照顾 TCP 了。

Automatically re-resolve DNS in Wireguard – Installing and Using OpenWrt / Network and Wireless Configuration – OpenWrt Forum
WireGuard 仅在启动时会解析 Peer Endpoint 域名,如果 IP 变化并且 DDNS 记录刷新后,已启动的接口不会自动刷新 IP 变化的 Peer Endpoint。在 Linux 上 wireguard-tools 提供了 reresolve-dns.sh 脚本来帮助解决这个问题,它会解析 DNS 并使用 wg 命令更新变化的 Endpoint。我们可以定时运行这个脚本,具体可以参考 WireGuard – ArchWiki (archlinux.org)。在 OpenWRT 上,则可以使用 /usr/bin/wireguard_watchdog 脚本,其检测不活动的 Peer 并进行刷新,具体参见 [OpenWrt Wiki] WireGuard extras

安全

liblzma / xz 被植入后门,Jia Tan 是何方神圣 (qq.com)

xz-utils后门漏洞 CVE-2024-3094 分析 (qq.com)

SSL 证书 关于免费 SSL 证书策略调整通知-产品公告-文档中心-腾讯云 (tencent.com)
鹅厂的免费证书也调整成 3 个月有效了。

威联通NAS出现严重安全问题 建议立即断网 (qq.com)

Linux

zypper yzpper question. – English / Applications – openSUSE Forums

Effective Null Pointer Check Elimination Utilizing Hardware Trap

香橙派诚意之作 — 香橙派5 Pro (qq.com)

移动端

https://lineageos.org/Sunsetting-LineageOS-18.1/

仰望大佬

一间木屋 – 家居 – Chiphell – 分享与交流用户体验

使用 FFmpeg 将内嵌字幕文件渲染到视频上

最近有需要在即时通讯软件上传输视频文件,但是多数聊天软件在预览视频时,通常都不支持加载内嵌的字幕文件。考虑到要发给非技术型用户,能让对方直接在移动端预览,而不是跳转使用外部播放器会更方便一下。

一番搜索下来发现官方文档里给出了这种场景下的案例:

ffmpeg -i input.mkv -filter_complex "[0:v][0:s]overlay[v]" -map "[v]" -map 0:a <output options> output.mkv

这里稍加修改,然后加上硬件编解码来加速重编码:

.\ffmpeg-6.1.1-full_build-shared\bin\ffmpeg.exe -hwaccel cuda -i <input-video-path> -filter_complex "[0:v][0:s]overlay[v]" -map "[v]" -map 0:a -c:v hevc_nvenc -preset slow -profile:v main10 -pix_fmt p010le <output-video-path>

引用

HowToBurnSubtitlesIntoVideo – FFmpeg

cuda – Understanding pixel format and profile when encoding 10-bit video in ffmpeg with nvenc – Super User

video – How to use GPU to accelerate the processing speed of ffmpeg filter? – Stack Overflow

Filter complex through CUDA hevc_cuvid with FFMPEG input 4k hevc, help needed – Graphics / Linux / Linux – NVIDIA Developer Forums

GPU-accelerated video processing with ffmpeg – Stack Overflow

audio – FFmpeg error when using –filter-complex with nvenc codec “Filter amerge has an unconnected output” – Super User

openSUSE Leap 下编译安装 Python 所需依赖

使用 pyenv 编译安装 Python 时报错,文档中看起来没有 openSUSE 下的依赖安装指引,而且 Zypper 里也没有等价于 build-dep 的子命令,只好自己安装了。

必选的依赖:

sudo zypper in libopenssl-devel

可选的:

sudo zypper in libbz2-devel libffi-devel readline-devel sqlite3-devel tk-devel xz-devel

如果安装 lzma-devel 会自动转为 xz-devel,具体见引用中的回答。

引用

Setup and building (python.org)

Issue: Installing R on openSUSE Leap 15.0: “liblzma library and headers are required” – Stack Overflow

domain 的自言自语 2402

开发

再有人问你如何实现订单到期关闭,就把这篇文章发给他! (qq.com)

分布式事务,这一篇就够了 | 小米信息部技术团队 (xiaomi-info.github.io)

网络

Windows 11 Insider Preview 26063.1 (24H2) 支持MLO,但 (qq.com)

异数OS 2017 DPDK 峰会观后感-CSDN博客
作者在yds_086 – 博客园 (cnblogs.com)

cloudflare/pingora: A library for building fast, reliable and evolvable network services. (github.com)

如何構建 Pingora 以將 Cloudflare 連線至網際網路代理

Inside NGINX: Designed for Performance & Scalability

家庭影院入门 第3集 困难难度【考拉上校】_哔哩哔哩_bilibili

移动端

介绍 | 存储空间隔离 (rikka.app)

domain 的自言自语 2401

云原生

Kubernetes 基础教程 | 云原生资料库 (jimmysong.io)

序言 · Kubernetes 中文指南——云原生应用架构实战手册 (jimmysong.io)

CKA

CKA.md (github.com)

CKA考试经验总结 – 简书 (jianshu.com)

【助力CKA全球认证】奔走相告!kubernetes管理员实训课火热开启!!!_云容器_华为云论坛 (huaweicloud.com)

华为 kubernetes管理员实训课_哔哩哔哩_bilibili

K8S其实很简单-CKA/CKAD报名和考试技巧 (qq.com)

2023年CKA考试真题及注意事项 – jiayou111 – 博客园 (cnblogs.com)

K8S CKA认证考试经验分享 – 掘金 (juejin.cn)

自考CKA体验总结 – 掘金 (juejin.cn)

【從題目中學習k8s】-【後記】CKA證照 – iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 (ithome.com.tw)

CKA考题解析-CSDN博客

K8S认证工程师(CKA)考试必过指南 – 知乎 (zhihu.com)

CKAD

yuyicai/cka-ckad-exam-experience: cka and ckad exam experience,cak和ckad考试经验 (github.com)

dgkanatsios/CKAD-exercises: A set of exercises to prepare for Certified Kubernetes Application Developer exam by Cloud Native Computing Foundation (github.com)

CKAD 1. Core Concepts (13%)考题答案_ckad考试内容-CSDN博客

CKS

CKS考试学习笔记 by 2022.12-2023.01 – huss – 博客园 (cnblogs.com)

CKS真题分析-2023年度_cks考题-CSDN博客

Linux

Linux Signal及Golang中的信号处理 (colobu.com)

Graceful restart in Golang – Gregory Trubetskoy (grisha.org)

算法

【数据结构与算法】蓄水池抽样算法(Reservoir Sampling) – gonghr – 博客园 (cnblogs.com)