查看详情
确实标题党了，不过还是可以关心一下。最近看到苹果内部公开的一些 PPT,其中覆盖到产品说明，SDK 使用，以及具体的代码展示这些，有差不多十几个 PPT ，虽然只是 PDF ，但是还是觉得这其中有些很重要的 "原则" 值得大家去学习。后面也会提供苹果的 PDF 的下载 参考。 使用表格 其实做类比的时候，表格一直都是最直观的手段去进行对比，而这次表格非常直观的用了单线条去展示，没有混用背景色，非常清楚。 展示代码 代码展示，由于我们知道代码非常多，文字内容多，而 Apple 则采用了全屏贴代码，整张 PPT 都是代码，通过高亮来展示重要内容。 使用代码和文字段落混排的时候，一定要切记代码内容和正文的背景区分； 背景透明 为什么总觉得苹果的 PPT 高大上？其实我们在使用手机或者 笔记本的时候，一定选择去掉背景色或者透明的 PNG ，其实你去搜索谷歌图片的时候在后面加个 xxx png 自然而然就会出现背景透明的图片列表 局部高亮 我们无论是在展示菜单或者列表的时候，我们可以通过设置透明度来强调当前关注的内容。 黑色遮罩 详情 »
查看详情
篮球的夏天 六月初， NBA 迎来了夏天的结局。勇士和猛龙的系列赛，有太多的故事可以说。杜兰特用自己的倔强和坚毅告诉大家，自己不是那个投敌的软蛋。卡哇伊用整个季后赛的坚持和努力，证明去年的夏天，自己不是那个因为各种原因背叛马刺的球员。尤其猛龙和雄鹿的第三场，拖着伤腿打了50分钟，他不是为谁而打球，他只是为了喜欢的这件事情。记得总决赛，卡哇伊接受采访的时候被闻到去年夏天所经历的， 卡哇伊连续说了几个 "hey man"。似乎他有太多的话想对大家说，但是只是全部静静的留在心底，当夺冠那一刻，所谓机器人也难免控制不住情绪。确实很感动。 Man! Last summer man, it's going to a lot. It's going to a lot. Oh I have a great support. I just work hard and work hard. And I 详情 »
查看详情
React.js, Vue.js 的流行不是偶然，现代的工程化体系中离不开组件化的体系。我们充分享受了组件化带来工程效率的提升以及社区的优势。 Web Component是 是一些 W3C 官方定义的一些技术的合集表现，主要是下面三个内容： 自定义元素 Shadow DOM HTML 模板 自定义元素 自定元元素，也就是在 Html 中实实在在的标签，就像 DIV, SPAN ，ARTICLE 一样，我们可以写在我们 HTML 代码中一样。不过他们都是由短线连接表示的。诸如下面这些都可以 <new-slider> <base-player> <photo-dialog> 自定义元素包含自己的语义，行为以及标签内容，并且可以在不同的框架和浏览器使用。 一个简单的元素代码; class MyComponent extends HTMLElement { connectedCallback() { this.innerHTML = `<h1> 详情 »
天渐渐热起来了，有的时候早上起来就闻到空气中夹杂着夏日的气息，至于傍晚，河道两旁的青蛙也自然而然的参与到这个节气中来。 软实力 最近在知乎看到了一篇讨论 《为什么强如『死月』在阿里也只有 p6?》 。其实里面有篇回答是这样的: 实际上，我们在公司的Title叫做“工程师”，所谓工程师，是一种利用技术产生经济效益的岗位，公司去评价一个人的职级，更多是看他的工程价值，也就是能给公司带来的收益。这个收益不一定是直接的营收或者利润，可能有一定的推导关系，比如团队效率、线上质量、技术攻关等等。但是这是不是意味着技术就没用了呢？不是的，越是高级别的工程师，就越依赖深度的技术去解决工程问题。所以你可以认为，技术水平决定了你的天花板。在阿里巴巴，每年总结的时候，除了绩效，还会做人才盘点看每个人的潜力，这时候，技术水平就是主管们非常关注的选项了。 这应该是今年至少第三次谈关于 title 或者叫职责的事情。很多时候，我们总有种“自大”的感觉，觉得自己在这个方向已经很专业，感觉有时候老板都还不如自己，我们在职业成长工程中，所谓专业性，这是自己认为你在前三年职业生涯发展最重要的事情，关注技术的发展，注重自己的产出。然而当我们很多人觉得已经是 高级的 title 的时候，自我已经处于一个非常健康的学习成长和积累的 circle 详情 »
查看详情
最近分享了关于前端测试的一些内容，关于开发如何通过测试来提升效率，常见的测试框架，以及什么的测试指标是我们关心的。 [1] 经常会遇到代码审查时候遭遇到非常多的"同事不理解" [2] 经常会遇到线上产生很多未知的 bug [3] 经常会遇到 Dev 和 测试理解的不一致 那么我们如何避免这样的问题发生？ 作为开发而言，我们关注，代码规范，单元测试，集成测试; 代码规范 单元测试 [11] 通过单元测试确认程序的正确性以及发现问题。 [12] 追求代码覆盖，发现无用代码 使用 Enzyme 测试 React 应用 集成测试 性能测试 [26] 我们关注页面的性能，开发在开发完成后，一定要做性能测试，这是对自己代码负责的表现。而对于线上应用级别，如果存在高并发的情况，我们需要去预估 QPS ，及时和 运维沟通，机器的数量，限流策略等。2/8 法则 可以帮助我们预估应用的 QPS 峰值（ 详情 »
查看详情
很早之前，写过一篇 《使用enzyme 测试你的 React 组件》, 综合叙述了如何利用 Karma + Webpack + Enzyme 进行组件的测试， 从而确保我们的质量。 相对而言，这次会丰富一些，比如组件的 UI 事件以及 redux 引入后的测试。 项目使用 yarn-react-webpack-seed 为案例，你可以在项目里找到源码。 建立测试 安装 karma $ npm install karma karma-chai karma-chrome-launcher karma-coverage karma-jasmine karma-sourcemap-loader jasmine-core karma-webpack --save-dev 安装 enzyme 相关 npm install enzyme redux-mock-store enzyme-adapter-react-16 jasmine-enzyme --save-dev 在项目建立 test 目录，新增 karma.conf.js 然后在 package. 详情 »
查看详情
同步 https://medium.com/@JackPu/how-javascript-detect-the-network-status-42f3a6d85f96 在某些情况下，我们的开发者需要指导是否由于网络中断的原因导致 request 失败。 以及我们需要网络重新连接后，我们需要执行一些代码。 naviagtor.onLine naviagtor.onLine 是一个非常好实用的 API. 它可以告诉开发者现在网络是连接还是断开的状态。并且它已经覆盖了绝大多数现代浏览器。 navigator.onLine caniuse figures 而在比较老的 IE8 浏览器，我们小使用 online 事件进行监听。 document.addEventListenner(‘online’, () => { // todo }); document.addEventListenner(‘offline’, () => { // todo }) 网络心跳检测 然后很早的时候，很多浏览器还不支持 naviagtor.onLine。开发者只能通过 XHR 和 Image 发送心跳轮询来判断是否还处在网络连接的状态。 const pingUrl = ‘https://ipv4.icanhazip.com'; 详情 »
查看详情
一旦看到柳絮开始飘的时候，就觉得帝都的春天算是真的到了时候。这一个多月感觉随着天气的起起伏伏就这么过了。 Don't Go Down 昨日看了巴塞罗那 VS 利物浦的 半决赛，看到第四个球的时候，整个人都懵了。感觉利物浦的那一个球踢懵了巴塞罗那场上的球员，感觉也会让很多球迷粉丝产生阴影。去年稍微早的时候，自己看了巴塞罗那和罗马的系列赛，球队带着三球优势去罗马客场。结果客场翻盘，那个时候很多人都觉得莫名其妙。相比今年，大家觉得准备很充分，充足的休息，足够人员调整，没有双线压力，更重要的是，已经摔过一次，不至于第二次吧。然后事实就是这样，大概一整天似乎都还会受到这样的影响。晚上看到15年做的这张封面。#Don't Go Down# 这是15年阿根廷决赛失利做的图，连续的受挫真的会很打击人的信心，但是似乎这就是命运。然而，我们还是相信几年前的诺坎普奇迹会发生，未来几年还是有机会更向前一步，球队的整容更替，战术的磨练，更加成熟的队长，因为红蓝就是奇迹的颜色。 忽然想起《复仇者联盟4》Tony 对 队长说的那句话: Do u trust me ? I do! Avengers 今年最期待的电影《 详情 »
查看详情
Chrome 75 开始支持 Web Share API - Level 2, 这也就意味着你可以通过 JS 分享 文件，链接或者文本到其他的 App 了。 其实这个需求很早很早，我们的 PM 就开始提了，关于实现，目前比较成熟的是通过 JS Bridge，然后利用 APP 的能力唤起分享面板。但是我们还是无法通过 Chrome 或者 Safari 实现页面内通过 JS 执行唤起分享面板。详情可以见《H5 互动营销》。 canShare() 以及 share() 当然目前这个还是一个处在实验性的 API ，我们还是需要去做一些兼容性判断。分享文件，我们还需要确认这些文件是否处于可分享的状态。可以尝试 Chrome 团队给的代码 const shareData = { files: filesArray }; if (navigator.canShare & 详情 »
查看详情
才开始大家一直在想，什么是移动均线？ 哪里会用到？？ 对于常规的页面，实际上很难说需要到具体到有需要用到 网络宽带的预估，但是对于流媒体或者上传服务时候，这个就很重要了，我们需要根据不同网速情况，做策略上的更改，从而改善体验。 做视频播放的很多童鞋，经常在 Youtube 上看到这么一个仪表盘，界面。 大家会看到网速的实际情况。 如果叫大家来实现，实际上，或许很轻而易举会想到用一个网络资源的请求，和时间来完成做一次除法就OK了。 const start = Date.now() fetch(url, {}).then((result) => { const end = Date.now(); const bw = length / (end - start) * 8000; }) 似乎，这样就可以表示一个当前分片的网速了，但是我们实际上并不会用当前的瞬时值作为一个衡量当前宽带是否满足我们播放某种清晰度的标准。 而 hls.js 巧妙的借鉴了 移动平均 来反映当前网络的一个趋势。 移动平均 移动平均（moving average，MA），又称“ 详情 »
