查看详情

《天气之子》前期无剧透影评帖

新海诚 导演的新作《天气之子》还是如期在19号全日上映。 在《你的名字》大火之后，这一部作品压力会显然大很多，毕竟你的名字之后越来越多的人开始和宫崎骏进行比较。如同《秒速五厘米》后新海诚的作品自己都会担心画质的问题，但是导演真的很厉害，无论是之后的《言叶之庭》 的下雨天还是《你的名字》 的陨石，都还是给了自己非常大的惊喜感觉。所以对于新作，自己还是会非常期待新的画面，当然音乐依旧是非常让人期待的，再次和 RAWINDS 的合作，以及听完部分 OST 自己也打消了疑虑。由于内地还未定档，大家可以看下海外的 tweet ，话说新电影有《你的名字》的彩蛋。由于取景大多都还是在东京，因此肯定少不了圣地巡礼，不过国内还是等电影上映吧。 大意是：在创造了一个热门作品之后，下一部作品会比预期变得困难很多，但实际上我看到它真的很棒，《天气之子》真的很有趣，如果你还没有看到它，请一定去看看！ 大意是： 看完《天气之子》，就个人而言无疑是一部杰作。有利有弊，这也是我第一次在动画电影里哭了三次，如果有时间和兴趣，不要错过。 非常开心可以看到《天气之子》，已经无法用言语去表达， 详情 »

查看详情

使用 JS 获取视频 Codec

如果第一次接触 Media Source ，大家都会注意到有一个关于 视频 codecs 的指定。 var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) { var mediaSource = new MediaSource(); //console.log(mediaSource.readyState); // closed video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', sourceOpen); } else { console.error('Unsupported MIME type or codec: ', 详情 »

查看详情

技术人员如何做出苹果风格的 PPT

确实标题党了，不过还是可以关心一下。最近看到苹果内部公开的一些 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 详情 »

查看详情

Web Components

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 详情 »

查看详情

Web 前端测试指南

最近分享了关于前端测试的一些内容，关于开发如何通过测试来提升效率，常见的测试框架，以及什么的测试指标是我们关心的。 [1] 经常会遇到代码审查时候遭遇到非常多的"同事不理解" [2] 经常会遇到线上产生很多未知的 bug [3] 经常会遇到 Dev 和 测试理解的不一致 那么我们如何避免这样的问题发生？ 作为开发而言，我们关注，代码规范，单元测试，集成测试; 代码规范 单元测试 [11] 通过单元测试确认程序的正确性以及发现问题。 [12] 追求代码覆盖，发现无用代码 使用 Enzyme 测试 React 应用 集成测试 性能测试 [26] 我们关注页面的性能，开发在开发完成后，一定要做性能测试，这是对自己代码负责的表现。而对于线上应用级别，如果存在高并发的情况，我们需要去预估 QPS ，及时和 运维沟通，机器的数量，限流策略等。2/8 法则 可以帮助我们预估应用的 QPS 峰值（ 详情 »

查看详情

使用 Enzyme 进行 React 组件测试进阶

很早之前，写过一篇 《使用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. 详情 »

查看详情

使用 JavaScript 探测网络状态

同步 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 今年最期待的电影《 详情 »