huzunjie 发布于 08月29, 2023

混沌系统-系统设计的基础原则

混沌系统引言一个系统或流程功能的设计,应该尽量收敛到可靠状态。当多个不可靠状态不断叠加,便会逐渐变成混沌系统 --- 事态变的不可控。导致人们难以理解、分不清是 Feature 还是 Bug。也自然对系统未来的迭代,悄悄地预埋上了随时崩溃的风险。二义性发散问题带来的不可靠经典“二...

阅读全文 »

huzunjie 发布于 08月02, 2023

浏览器与Electron端文件与文件夹打包发送

几个文件文件夹数据交互途径及技术方案及各自的弊端1、点击按钮或菜单项的“选择文件”发送技术原理使用浏览器原生的文件输入框 HTMLInputElement,用户选择文件后可以再 onChange 检测输入框内容变化、从 HTMLInputElement.files 获取FileL...

阅读全文 »

huzunjie 发布于 03月24, 2022

如何在网页上低成本实现一个简单的“护眼模式”

先看个效果默认模式:护眼模式:对于需要长时间盯着屏幕同学,后面这个“护眼模式”相对“默认模式”的亮底,应该算是更舒适、不那么容易引起视觉疲劳的一个选择。在当下,作为Web前端开发者,要在网页上添加这么个护眼模式,其实可能并不需要定制化的去针对暗色调写一套完整皮肤样式。最简单的护眼...

阅读全文 »

huzunjie 发布于 11月21, 2021

跨网页或APP数据文件共享续篇

前言我在前面一篇文章《记一个网页端IM文本编辑器的演进过程 (https://blog.pyzy.net/post/editor.html )》虽然没有提到 DataTransfer,但实际也涉及到了从剪切板(clipboardData)或拖拽元素(dataTransfer)来...

阅读全文 »

huzunjie 发布于 05月13, 2021

记一个网页端IM文本编辑器的演进过程

背景前端项目开发中,为用户输入内容提供一个编辑框是非常常见的基础交互需求。比如博客文章下面的评论区、可视化富文本编辑、在线代码编辑器... 根据不同的业务场景,我们应该做怎么样的调研?怎么决定选型?相关技术点又有哪些?基础效果比如某个历史项目里,有下图这么一个编辑器。通过示意可以...

阅读全文 »

huzunjie 发布于 04月01, 2021

我经常和面试者聊的一个题目

本文背景作为一个Web前端从业者,资深B/S架构的应用开发,通常我们负责的内容都是侧重的浏览器端比较多,即便目前Vue、React等各种框架库流行的年代,核心实现也依然是JS API操作DOM;如果资历更深一些的同学,还会熟知jQuery,更是因为各浏览器API不统一作为其解决的...

阅读全文 »

huzunjie 发布于 02月20, 2021

为基于Electron开发的Mac端本地应用启用别名

背景交代最近在做的一个基于Electron开发的Mac端项目,要进行产品更名。但是如果直接修改编译打包后的应用名称,问题会比较大。首先,类似上图里所有缓存资源、以及涉及鉴权的各种Cookie&Storage ,都是存放在类似/Users/huzunjie/Library/...

阅读全文 »

huzunjie 发布于 02月06, 2021

Web前端剪切板文本分享到文件发送

前言  现在前端富交互能力越来越强,也有很多产品基于前端技术进行离线应用开发或在线应用体验增强;这其中剪切板操作也是一个经常会亮相客串的一个基础能力。今天这篇文章我们就一起整理一下关于剪切板读写操作的一些实践。会包含浏览器端、Electron客户端两种不同的业务场景下,一些具体的...

阅读全文 »

huzunjie 发布于 04月10, 2020

Web前端HEVC播放器实践剖析

序言前面给360视频云团队围绕HEVC前端播放及解密实现了一套基于WebAssembly、WebWorker的通用模块化Web播放器。在LiveVideoStackCon2019深圳的演讲中对其架构设计、核心原理,具体痛点问题的解决方式进行了详细剖析分享。这里整理为一篇技术文章,...

阅读全文 »

huzunjie 发布于 02月27, 2019

纯CSS实现滚动的DOM边框

有时候,我们的产品交互上需要一些特别的效果,比如一个可编辑区域往往会添加一些动态描边效果,那么下面这个可能不失为一个不错的备选方案。废话不说,直接上效果:代码:<!DOCTYPE html><html><head> <meta char...

阅读全文 »