前端代码效果实时预览的需求实际上是非常常见的，传统做法是这样子的，会新建一个另外的独立页面，专门用来接收传入的前端代码，通过新开窗口或者嵌入iframe页面的方式达到最终效果，然而实际上，对于这个预览效果，如果代码是我们自己控制，而不是全权交给用户编辑的，是没有必要新建一个另外的预览页面，亦或者是在新窗口（新标签页）中浏览的。可以直接在当前页面构建一个文档上下文，实现更加方便快捷的预览。
CSS百分比padding实现比例固定图片自适应布局
2017年08月17日 by 阅读 112144 次, 今日 10 次对于绝大多数都布局，我们并不要求非要比例固定，但是有一种情况例外，那就是图片，因为图片原始尺寸它是固定的。在传统的固定宽度的布局下，我们会通过给图片设定具体的宽度和高度值，来保证我们的图片占据区域稳固；但是在移动端或者在响应式开发情况下，图片最终展现的宽度很可能是不确定的……
SVG <foreignObject>简介与截图等应用
2017年08月4日 by 阅读 79693 次, 今日 12 次SVG图形表现非常给力，但是对于纯粹的文本展示却很吃力，例如希望文字到边缘可以自动换行，结果SVG却很难做到，对于XHTML而言这可以说是天生的理所当然的特性，那有没有什么办法让SVG元素中的文本也如同普通的HTML和CSS那样自动换行呢，有，那就是SVG的<foreignObject>元素！
HTML5 file API加canvas实现图片前端JS压缩并上传
2017年07月30日 by 阅读 152815 次, 今日 15 次很多网站的图片上传功能都会对图片的大小进行限制，尤其是头像上传，限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众，一张原始图片超过2M几乎是标配，此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像，就会遇到因为图片大小限制而不能上传的窘境，不得不对图片进行再处理，而这种体验其实非常不好的。如果可以在前端进行压缩，就不会有这种尺寸限制的问题，自然用户体验就可以大大提升，非常具有价值！
HTML5 indexedDB前端本地存储数据库实例教程
2017年07月20日 by 阅读 72775 次, 今日 7 次HTML5 indexedDB和Web SQL Database都是本地数据库数据存储，Web SQL Database数据库要出来的更早，然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始，就已经注定Web SQL Database数据库是明日黄花。
未来一定是indexedDB的…
借助Service Worker和cacheStorage缓存及离线开发
2017年07月12日 by 阅读 84241 次, 今日 14 次html5 manifest缓存技术投入产出比有些低，因此不温不火，本文所要介绍的基于Service Worker和cacheStorage缓存及离线开发，套路非常固定，无侵入，且语言纯正，直接复制粘贴就可以实现缓存和离线功能，纯前端，无需服务器配合。一个看上去很酷的功能只要复制粘贴就可以实现，绝对是成本极低的，小白中的小白也能上手。
了解JS中的全局对象window.self和全局作用域self
2017年07月6日 by 阅读 49108 次, 今日 7 次在HTML5一些新特性出来之前，全局的self就是个没什么实用价值的半吊子。但是，随着HTML5一些新特性的到来，self开始慢慢登上正式的舞台…
JS前端创建html或json文件并浏览器导出下载
2017年07月5日 by 阅读 142397 次, 今日 12 次我们使用JS创建了一个动态的JSON数据，希望可以保存为JSON文件到本机系统，传统做法可能需要复制粘贴，而实际上，我们可以直接使用JS直接创建对应的JSON文件并让浏览器下载，而且代码和原理都出乎意料的简单。
我是如何实现electron的在线升级热更新功能的？
2017年06月27日 by 阅读 77298 次, 今日 10 次通常electron打包出来的文件都很大，有40~50M，如果每次改动升级都要下载个完整版本，实际上是很烦的。
实际上，只要主线程没有发生变化，我们是可以直接在线热更新我们的electron应用的。
我的应用
我的应用