王叨叨 发布的文章
给博客加上Service Worker
随着 Web 的快速发展，用户对站点的体验期望值越来越高，前端工程师有时候为了几十毫秒的速度优化而费劲心思，消耗大量时间。想要让自己的产品在无数产品中脱颖而出，就必须提升产品的性能和体验。在时间成本高昂的今天，响应速度的提升是开发者不得不面对的话题。
前端工程师有很多性能优化的手段，包括 CDN、CSS Sprite、文件的合并压缩、异步加载、资源缓存等等。其实我们绝大部分情况是在干一件事情，那就是尽量降低一个页面的网络请求成本从而缩短页面加载资源的时间并降低用户可感知的延时。当然减少用户可感知的延时也不仅仅是在网络请求成本层面，还有浏览器渲染效率，代码质量等等。
我们这里要讲到的是一个叫做 Service Worker 的东东。
前端架构的核心
任何一栋建筑都需要稳固的基础、四面墙体和一个屋顶。这些要素都是必不可少的。基础支撑着墙体，墙体支撑着屋顶，而屋顶保证你安全并且免受风吹雨淋之苦。如果一名建筑师不能提供上述要素，那么他必定是不称职的。作为前端架构师，我们在构建新网站时也承担着相似的责任。我们必须驾驭必要的工具和流程，而这两者正是成功构建网站的要素。
前端架构是一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效，可持续的工作流。
2018年终总结
前端架构设计开篇
最近在读《前端架构设计》，整书只有148页，薄薄的一本，但是看起来还是很有份量的。这本书展示了一名成熟的前端架构师对前端开发全面而深刻的理解。作者结合自己在Red Hat公司的项目实战经历，探讨了前端架构原则和前端架构的核心内容，包括工作流程、测试流程和文档记录，以及作为前端架构师所要承担的具体开发工作，包括HTML、JavaScript和CSS等。从豆瓣等评论来说，褒贬不一，但是个人感觉读一读还是很有必要的，取其精华去其糟粕即可。
transform导致模糊bug
项目中用到了弹窗居中，有些弹出正常，有些弹出就模糊。这就比较奇怪了，一样的样式，为啥会出不同的结果呢？
css水平居中是有很多办法的，项目里面用的是这样的居中方式：
position: absolute;
left: 50%;
transform: translateX(-50%);然后一点一点的去掉样式，定位到是transform导致的！用搜索引擎查了下，果然不止我一个人有问题，看来有解决方案了。
原来出现模糊的原因是因为元素的高度、宽度中有奇数， 使用类似translate(-50%,-50%)之后，相当于宽度、高度除以2的效果，会出现 0.5px。像素就是最小的单位了，要么1，2，3，要么就是0，没有小数。
好在这个项目里面的弹出层宽度是可以设置宽度的，看了下这个模糊的弹出，设置的宽度是865px，好吧，那就改改宽度解决问题！但是，如果是不定高度垂直居中呢？这就比较棘手了，不能用这个方案了，所以transform对于居中不是一个好的解决方案，在实际项目中应该尽量避免此方案！
所以，如果考虑兼容就老老实实的用table + table-cell方式去居中，不考虑兼容的话使用flex方式去居中！
Typecho插入视频
比较水的一篇文章，没有什么技术含量，直接使用HTML5的video标签：
<video src="视频地址" width="100%" height="440" controls="controls"></video>Web Developer in 2018
Office文档的在线查看
有时候博客上面要分享一些文档之类的，不仅仅可以下载，还需要在线预览。就像我要分享VUE的那个PPT，之前是放在SlideShare上面的，后来被墙了，只能放在国内的MySlide，但是有些问题就是转换之后效果没了，或者文字错位了，这个是不能忍受的。
后来查了查Office他爹，其实早在之前就做了Office文档的在线查看编辑的功能，只不过不知道！
2018广联达用户体验部团建之乌兰布统
乌兰布统景区位于内蒙古自治区赤峰市克什克腾旗西南部，曾是清朝皇家木兰围场区，乌兰布统为蒙语，汉语的意思为红色的坛形山，实指大、小红山，是木兰围场的一部分 。