如何在网页上低成本实现一个简单的“护眼模式”
先看个效果默认模式：护眼模式：对于需要长时间盯着屏幕同学，后面这个“护眼模式”相对“默认模式”的亮底，应该算是更舒适、不那么容易引起视觉疲劳的一个选择。在当下，作为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...
gifEditor 反馈收集
本文章用于收集 https://gif.pyzy.net/ 的建议和反馈。有任何建议或期望，可以留言，或邮件给 huzunjie@pyzy.net 。 有意打赏我们的GIF编辑器是否长久服务下去，取决于大家的支持和鼓励。如果碰巧帮到你了，可以：...
Chimee --- 一套可扩展的H5视频播放器解决方案
Chimee是一款H5播放器，她支持MP4、M3U8、FLV等多种媒体格式，同时它也帮我们解决了大部分的兼容性、差异化问题，包括全屏、自动播放、内联播放、直播解码等常见媒体播放需求。