借助Service Worker和cacheStorage缓存及离线开发

2017年07月12日 by 张 鑫旭 阅读 9007 次, 今日 71 次

html5 manifest缓存技术投入产出比有些低,因此不温不火,本文所要介绍的基于Service Worker和cacheStorage缓存及离线开发,套路非常固定,无侵入,且语言纯正,直接复制粘贴就可以实现缓存和离线功能,纯前端,无需服务器配合。一个看上去很酷的功能只要复制粘贴就可以实现,绝对是成本极低的,小白中的小白也能上手。

阅读全文…

了解JS中的全局对象window.self和全局作用域self

2017年07月6日 by 张 鑫旭 阅读 8555 次, 今日 18 次

在HTML5一些新特性出来之前,全局的self就是个没什么实用价值的半吊子。但是,随着HTML5一些新特性的到来,self开始慢慢登上正式的舞台…

阅读全文…

小tip:JS前端创建html或json文件并浏览器导出下载

2017年07月5日 by 张 鑫旭 阅读 14345 次, 今日 57 次

我们使用JS创建了一个动态的JSON数据,希望可以保存为JSON文件到本机系统,传统做法可能需要复制粘贴,而实际上,我们可以直接使用JS直接创建对应的JSON文件并让浏览器下载,而且代码和原理都出乎意料的简单。

阅读全文…

我是如何实现electron的在线升级热更新功能的?

2017年06月27日 by 张 鑫旭 阅读 12951 次, 今日 58 次

通常electron打包出来的文件都很大,有40~50M,如果每次改动升级都要下载个完整版本,实际上是很烦的。

实际上,只要主线程没有发生变化,我们是可以直接在线热更新我们的electron应用的。

阅读全文…

利用HTML5 Web Audio API给网页JS交互增加声音

2017年06月10日 by 张 鑫旭 阅读 15399 次, 今日 86 次

HTML5 Web Audio API可以让我们无中生有创造声音,而且是各种音调的声音,换句话说,我们通过JavaScript就会创建一个完整的音乐出来,这可能和我们以前的认知有些不一样,例如点击按钮出现一个点击的音效,传统思维可能是需要JS触发一个<audio>音频文件的播放,实际上,并不需要任何额外的资源,十几行JS代码就可以搞定,而这就是本文要介绍的内容。

阅读全文…

-webkit-text-stroke文字描边CSS属性及展开

2017年06月4日 by 张 鑫旭 阅读 16894 次, 今日 123 次

今天,我使用caniuse查看text-stroke兼容性的时候,发现了一件令我震惊的事情,最新版的Firefox以及Edge已经支持text-stroke描边属性了,并且全部都是采用-webkit-私有前缀,这就意味着在不久的将来,要实现文字描边效果,我们就可以使用原生的text-stroke属性,不用担心兼容性问题…

阅读全文…

我对知乎前端相关问题的十问十答

2017年06月2日 by 张 鑫旭 阅读 52982 次, 今日 149 次

之前知乎上有不少同行邀请我回答一些前端相关问题,但是,大家都知道了,要认真回答一个问题是需要大量时间和精力的,对于还在不断学习积累阶段的我,时不时分散原本的精力,打乱自己原本的节奏,实际上是一件不划算的事情。所以我决定选十个比较具有代表性,自己能够驾驭的前端问题统一作答。

阅读全文…

jquery.guide.js新版上线操作向导镂空提示jQuery插件

2017年05月18日 by 张 鑫旭 阅读 9149 次, 今日 27 次

网站上线或者改版的时候,常常会做一个操作向导,告诉用户一些重要操作到了哪里,或者什么地方隐藏了什么好玩的东西,等等,虽然我都是直接关掉的,或者快速跳过,但是对有部分用户而言还是很有用的。

这种提示比较好的交互效果是采用镂空的半透明遮罩,视觉重点一目了然,类似这样……

阅读全文…

小tips:使用canvas在前端实现图片水印合成

2017年05月17日 by 张 鑫旭 阅读 12844 次, 今日 71 次

图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。

随着HTML5发展和现代浏览器的占比越来越高,我们其实也可以在前端直接进行图片的合成。优点在于,响应更快,体验更好;如果是和文字进行合成,我们可以利用客户端字体,视觉展现效果更丰富;同时展示和合成全部都是前端完成,因此更利于维护。

阅读全文…

使用electron构建跨平台Node.js桌面应用经验分享

2017年05月16日 by 张 鑫旭 阅读 15914 次, 今日 59 次

最近,把团队内经常使用的一个基于Node.js制作的小工具给做成了可视化操作的桌面软件,使用的是electron,这里简单分享一下使用electron的一些经验和心得。

阅读全文…