浏览器环境下的文件读写

群里有人问到如何通过纯前端的方式来读取本地文件再编辑后保存为新文件的问题。类似这种纯前端读写的方式正好在项目开发过程中遇到过,我们是读取一个Markdown文件的模板通过一些信息的修改(如版本,名称,日志)来为产品生产新的帮助文档。以前纯前端实现文件读写要借助于各种浏览器插件(如flash)或者只能寄托于后端,而现在HTML5强大的 File API规范,无疑让浏览器与本地文件的交互变的更加简单。本文将结合示例来演示如大文件读取,监控文件读取进度、大文件保存等的实现过程。

如何实现一个颜色选择器

在开发公司UI组件库的过程中,颜色组件ColorPicker由于时间关系没有去深入研究,看着花花绿绿的色谱图,以为实现起来会很复杂,就直接将一个开源的颜色选择器封装了一下。这大概是半年以前的事了,这篇文章也在我的博客中以草稿形式(只有标题没有内容,当时是做了一个记录,想着后来有时间了去研究,目前这种草稿还有很多😂)存放了半年了。前段时间请教了公司UI同事一些颜色相关的概念,又去搜索了下这方面的知识,收获还是蛮大的,尤其是知乎色彩空间中的 HSL、HSV、HSB 有什么区别?这篇提问中,@Forrest近乎大白话的回答,超赞👍。

炫彩字实现的几种方案

看到这个标题的时候,很多人可能会像我一样,脑海里会一下子跳出CSS3的方案来。的确如此,CSS3是实现渐变文字最简单直接的方案,本站就有很多用CSS3实现的双色水平渐变的文字实例。我这里把描述突然从炫彩字转到了渐变字,两者的概念一样吗?我不知道,可能只是各个行业的叫法不一而已。我所在的行业是为LED显示屏提供云节目制作和发布服务的,行业内把这种文本称之为炫彩字媒体,比如大街上司空见惯的显示屏上写着诸如“欢迎光临”的五彩斑斓的文字。受阻于业务需要,CSS的方案是我们最先Pass掉的,为什么呢?

升级总结:phantomjs在Centos上的安装过程

想着在年前把博客更新升级一下,于是顺手修复了一些已知的BUG,优化了留言模块,升级了nginx,更是为了利于SEO,在webpack的编译中加入了prerender-spa-plugin预渲染模块。经本地window主机测试后,一切OK。这便着手在线上Linux主机中配置,nginx, node, mongod 等的升级一切顺利,但就是在项目中 npm install 的时候卡住了,而且这一卡就是一天多!难道是我安装姿势不对,需要起来重睡? 查看npm报错原因,就出现在本文的主角phantomjs上。

关于phantomjs,无论是在之前的项目中写单元测试,录制UIrecorder测试用例时都遇到过,但仅仅也是遇到而已,只以为仅仅是一个依赖模块,照着文档npm install一下,对其甚至连基本的了解都没有,于是问题就出现了。