混沌系统-系统设计的基础原则
混沌系统引言一个系统或流程功能的设计，应该尽量收敛到可靠状态。当多个不可靠状态不断叠加，便会逐渐变成混沌系统 --- 事态变的不可控。导致人们难以理解、分不清是 Feature 还是 Bug。也自然对系统未来的迭代，悄悄地预埋上了随时崩溃的风险。二义性发散问题带来的不可靠经典“二...
浏览器与Electron端文件与文件夹打包发送
几个文件文件夹数据交互途径及技术方案及各自的弊端1、点击按钮或菜单项的“选择文件”发送技术原理使用浏览器原生的文件输入框 HTMLInputElement，用户选择文件后可以再 onChange 检测输入框内容变化、从 HTMLInputElement.files 获取FileL...
如何在网页上低成本实现一个简单的“护眼模式”
先看个效果默认模式：护眼模式：对于需要长时间盯着屏幕同学，后面这个“护眼模式”相对“默认模式”的亮底，应该算是更舒适、不那么容易引起视觉疲劳的一个选择。在当下，作为Web前端开发者，要在网页上添加这么个护眼模式，其实可能并不需要定制化的去针对暗色调写一套完整皮肤样式。最简单的护眼...
跨网页或APP数据文件共享续篇
前言我在前面一篇文章《记一个网页端IM文本编辑器的演进过程 （https://blog.pyzy.net/post/editor.html ）》虽然没有提到 DataTransfer，但实际也涉及到了从剪切板（clipboardData）或拖拽元素（dataTransfer）来...
记一个网页端IM文本编辑器的演进过程
背景前端项目开发中，为用户输入内容提供一个编辑框是非常常见的基础交互需求。比如博客文章下面的评论区、可视化富文本编辑、在线代码编辑器... 根据不同的业务场景，我们应该做怎么样的调研？怎么决定选型？相关技术点又有哪些？基础效果比如某个历史项目里，有下图这么一个编辑器。通过示意可以...
我经常和面试者聊的一个题目
本文背景作为一个Web前端从业者，资深B/S架构的应用开发，通常我们负责的内容都是侧重的浏览器端比较多，即便目前Vue、React等各种框架库流行的年代，核心实现也依然是JS API操作DOM；如果资历更深一些的同学，还会熟知jQuery，更是因为各浏览器API不统一作为其解决的...
为基于Electron开发的Mac端本地应用启用别名
背景交代最近在做的一个基于Electron开发的Mac端项目，要进行产品更名。但是如果直接修改编译打包后的应用名称，问题会比较大。首先，类似上图里所有缓存资源、以及涉及鉴权的各种Cookie&Storage ，都是存放在类似/Users/huzunjie/Library/...
Web前端剪切板文本分享到文件发送
前言 现在前端富交互能力越来越强，也有很多产品基于前端技术进行离线应用开发或在线应用体验增强；这其中剪切板操作也是一个经常会亮相客串的一个基础能力。今天这篇文章我们就一起整理一下关于剪切板读写操作的一些实践。会包含浏览器端、Electron客户端两种不同的业务场景下，一些具体的...
Web前端HEVC播放器实践剖析
序言前面给360视频云团队围绕HEVC前端播放及解密实现了一套基于WebAssembly、WebWorker的通用模块化Web播放器。在LiveVideoStackCon2019深圳的演讲中对其架构设计、核心原理，具体痛点问题的解决方式进行了详细剖析分享。这里整理为一篇技术文章，...
纯CSS实现滚动的DOM边框
有时候，我们的产品交互上需要一些特别的效果，比如一个可编辑区域往往会添加一些动态描边效果，那么下面这个可能不失为一个不错的备选方案。废话不说，直接上效果：代码：<!DOCTYPE html><html><head> <meta char...