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），又称“ 详情 »
如果你更新了最新的 Chrome (大约 >= 73 的部分版本)，发现有些日志没有发送的时候，需要引起注意了。你需要关注是否有一些异常或者警告产生类似 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://xxxx/': Synchronous XHR in page dismissal. 目前还并不能明确具体会在什么版本采用这个策略，当前有可能只是部分版本限制了 至今， Synchronous XHR 都是不被推荐使用的，但是我们还是会在一些特殊场景中使用到，比如页面 unload 或者 beforeunload 用于表示用户离开页面的数据发送。不过不好的消息便是，Chrome 正计划限制这类似的请求。 于是乎我们看到了很多人在最近几天发布了这个问题 传送门 https://stackoverflow.com/questions/55676319/ajax-synchronous-request-failing-in-chrome 目前比较好的解决方式只有 navigator.sendBeacon(), 它不会阻塞 main 详情 »
上一周，新海诚发布了个人的第七部动画电影作品《天气之子》的 PV。 故事梗概如下: 动画《天气之子》是以天气变化混乱的时代为背景，讲述被命运操纵的少年和少女，自己选择生存方式的故事。高中一年级的夏天，帆高从离岛离家出走，来到东京以后发现生存并不容易，生活从拮据变得潦倒，为了维持生活不得不为一家很奇怪的超自然杂志撰稿。而这一切就如同命运的安排一般，连日都在不停的下雨，他在城市的角落遇到了命中注定会遇见的人，她就是阳菜。阳菜拥有不可思议的能力，她能够操纵天气，从那一句“现在开始就要放晴了哦”开始，雨就开始停止，天空变得明媚，街道都洒着美丽的阳光，两人就这样开始相知相识，但是命运的操纵才刚刚开始，二人的恋情又将会走向何处呢？ 在《你的名字》大火之后，时隔三年，新海诚带来了这样一部新的带有点奇幻色彩的电影。 预告一处，大概给人的感觉当然还是原汁原味的新海诚的味道，每一帧都很漂亮，而且又是下雨天。让人不得不想起《言叶之庭》这部作品。当然第一时间，也有网友做了实景对比图: 东京台场 大家都被预告的原声音乐给吸引了，如同新海诚说道，和 RADWIMPS 的再一次合作，双方已经有很好节奏了。不过专辑应该会要到电影快上映的时候才上映。大家又一次期待的 天门 x 详情 »
