FEX 技术周刊 - 2018/02/05
微信搜索『FEX』关注我们的公众号，及时获得最新资讯。
深阅读
ECMAScript 2018: the final feature set
http://2ality.com/2017/02/ecmascript-2018.html
The feature set of ECMAScript 2018 was finalized during the latest TC39 meeting (23-25 January 2018). This blog post describes it.
另附：Optimizing hash tables: hiding the hash code
V8 release v6.5
https://v8project.blogspot.co.uk/2018/02/v8-release-65.html
提升了 webassembly 及数组遍历的性能
React’s new Context API
https://tinyletter.com/kentcdodds/letters/react-s-new-context-api
The first result of that search is showing “Why Not To Use Context”. Doesn’t inspire a whole lot of confidence in the context API. To make things even more concerning, that section says: If you want your application to be stable, don’t use context. It is an experimental API and it is likely to break in future releases of React.
另附：react-contextual - Tiny helper around Reacts new context API
Xi: an editor for the next 20 years
https://www.recurse.com/events/localhost-raph-levien
Xi is a project to build a modern text editor with uncompromising performance. Its thoroughly async, loosely coupled design promises performance and rich extensibility, but creates interesting engineering challenges, requiring advanced algorithms and data structures. In addition to pushing the state of computer science for text handling, the project also seeks to build an open-source community for teaching and learning, and working together to create a joyful editing experience.
A Comprehensive Guide To Product Design
https://www.smashingmagazine.com/2018/01/comprehensive-guide-product-design/
In this article, I’ll focus on the main principles and approaches that will help you to design great products. I’ll start with global things (like what product design is all about) and work down to the individual phases of product design (such as research, ideation, testing and validation).
Sketching in the Browser
https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526
For companies working with design systems, it seems our industry is stuck with design tools that are essentially built for the wrong medium—completely unable to feed our development work back into the next round of design. Luckily, this is all about to change.
ES6 Class Extends 性能分析
https://zhuanlan.zhihu.com/p/33538431
最近在做 hessian 序列化的性能优化，偶然发现 ES6 Class 的继承写法性能不是太好。我本来想通过覆盖 hessian.EncoderV2 的某些方法来做一些优化，但是让我意外的是，优化以后性能反而下降了，于是我尝试将覆盖的代码都注释掉，只保留继承的结构，结果性能仍然是下降的，所以我将矛头指向了 ES6 Class 和 extends 写法上。
Deep-copying in JavaScript
https://dassur.ma/things/deep-copy/
哪种性能最好？
揭秘前端字符的戏精之路
https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651227724&idx=1&sn=0de640c1a8cae680b1dc599b56029ecb
提起文字，大部分人的脑中，都会定式为规整排列的字符。但是林子大了什么鸟都有，世界上可是存在着6800+种文字，难免会飞出来一些诡异的鸟…而号称“万国码”的Unicode，在实现编码与展示的时候，也会不会遇到一些奇葩的事情呢？
腾讯社交网络图片带宽优化技术演进之路
https://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=2653435164&idx=1&sn=70f563a0717b6377d19644264111e6f1
为进一步降低运营带宽成本，减小用户访问流量及提升页面加载速度，社交网络 CDN运维紧跟行业图片优化趋势，创新引入WebP、SharpP、自适应分辨率、Guetzli等图像压缩技术到现网，经过三年多的多部门联合攻关，已逐渐形成一套覆盖全图片类型（JPEG、JPG、PNG、WebP、GIF）多场景的图片压缩运营体系，适用于各类型终端，每年节约外网带宽几百G。
漫谈分布式系统、拜占庭将军问题与区块链
https://mp.weixin.qq.com/s/tngWdvoev8SQiyKt1gy5vw
最近区块链的话题很火。有人想用它改变世界，有人想用它招摇撞骗。但是我们今天只分析技术。从技术的角度看，区块链是一种与分布式系统有关的技术。它与分布式系统的各个概念之间有什么联系？今天本文就借这个机会，跟大家一起讨论一下分布式系统的核心问题和概念。最后，我们将尽量沿着逻辑上前后一贯的思路，讨论一下区块链技术。
分布式系统架构经典资料推荐
https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247487398&idx=1&sn=c769d6cf1fbc0758dfcdf7ea54bd597b
耗子哥推荐的一些分布式系统的基础理论和一些不错的图书和资料。
另附：微服务架构技术栈选型手册
可视化解释压缩算法的工作原理
http://blog.jobbole.com/113505/
无论你使用过很多年的电脑压缩软件还是从没想过这个问题，本文将尝试解释，当你压缩一个文件或传输一段视频时，其中的数据到底发生了什么变化。我们将探寻这些重要问题的答案，在此过程中，也许会提出一些新的问题。
The increasing nature of frontend complexity
https://blog.logrocket.com/the-increasing-nature-of-frontend-complexity-b73c784c09ae
This is a hard time to be a frontend developer. The technology is moving so fast it’s hard to keep up, the ecosystem is fragmented, and there is tremendous pressure for even individuals to meet and exceed the user experience standards set by massive billion-dollar companies.
另附：Challenges for web developers
Stimulus 1.0: A modest JavaScript framework for the HTML you already have
https://m.signalvnoise.com/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have-f04307009130
We write a lot of JavaScript at Basecamp, but we don’t use it to create “JavaScript applications” in the contemporary sense. All our applications have server-side rendered HTML at their core, then add sprinkles of JavaScript to make them sparkle.
10 things I love about Vue
https://medium.com/@dalaidunc/10-things-i-love-about-vue-505886ddaff2
In this blog post, I aim to explore why Vue is the framework for me. I choose it above any other that I have tried. Perhaps you will agree with some of my points, but at the very least I hope to give you some insight into what it is like to develop modern JavaScript applications with Vue.
Efficiently loading inlined JSON data
https://ofs.quip.com/blog/quip-efficiently-loading-inlined-json-data
By giving the JSON data a non-standard type in the
Sharing Code Between Web & Electron Apps
https://slack.engineering/interops-labyrinth-sharing-code-between-web-electron-apps-f9474d62eccc
In maintaining one of the first Electron apps, we’ve navigated this labyrinth in the quest for a more performant, maintainable, and secure hybrid desktop app, and we’d like to help you avoid some of the pitfalls we’ve found along the way.
Debugging JavaScript With A Real Debugger You Did Not Know You Already Have
https://www.smashingmagazine.com/2018/02/javascript-firefox-debugger/
console.log can tell you a lot about your app, but it can’t truly debug your code. For that, you need a full-fledged JavaScript debugger. The new Firefox JavaScript debugger can help you write fast, bug-free code. Here’s how it works.
Please Stop Using Local Storage
https://www.rdegges.com/2018/please-stop-using-local-storage/
Almost every day I stumble across a new website storing sensitive user information in local storage and it bothers me to know that so many developers are opening themselves up to catastrophic security issues by doing so. Let’s have a heart-to-heart and talk about local storage and why you should stop using it to store session data.
Building Secure JavaScript Applications
https://nemethgergely.com/building-secure-javascript-applications/
XSS、CSRF、JWT 等基础知识。
另附：Hacker101 - 免费的 Web 安全视频教程
Modernizing Node.js with idiomatic JavaScript
https://medium.com/the-node-js-collection/modernizing-node-js-with-idiomatic-javascript-f18d984dcf93
JavaScript developers should focus on writing idiomatic, readable and maintainable code and not focus on the compilers underneath.
Wiring The Internet of Things With NODE RED
https://www.youtube.com/watch?v=j9H3t3l1En0
The Internet of Things is not a single choice of technology, approach or philosophy. It brings together multiple platforms, products and protocols, where the whole is greater than the sum of its parts. One of the challenges of IoT is to make it as easy as possible to allow developers to create
12 best practices for user account, authorization and password management
https://cloudplatform.googleblog.com/2018/01/12-best-practices-for-user-account.html
This post will lay out the best practices to ensure you have a safe, scalable, usable account authentication system.
Measuring QUIC vs TCP on mobile and desktop
https://blog.apnic.net/2018/01/29/measuring-quic-vs-tcp-mobile-desktop/
In a recent paper published at the ACM Internet Measurement Conference 2017, we worked to address these issues, and provided a comprehensive evaluation of QUIC’s performance and how it compares with TCP. This post shares some highlights from our study.
The introduction to Reactive Programming you’ve been missing
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
The hardest part of the learning journey is thinking in Reactive. It’s a lot about letting go of old imperative and stateful habits of typical programming, and forcing your brain to work in a different paradigm. I haven’t found any guide on the internet in this aspect, and I think the world deserves a practical tutorial on how to think in Reactive, so that you can get started. Library documentation can light your way after that. I hope this helps you.
Why Create a New Unix Shell?
http://www.oilshell.org/blog/2018/01/28.html
Whenever I announce a new Oil release, some readers are confused by the project. This post, which I’ll update periodically, explains the project’s motivation from several perspectives. Because Unix shell is an old and successful technology, there are many ways of looking at it.
Learn FFmpeg libav the Hard Way
https://github.com/leandromoreira/ffmpeg-libav-tutorial
I was looking for a tutorial/book that would teach me how to start to use FFmpeg as a library (a.k.a. libav) and then I found the “How to write a video player in less than 1k lines” tutorial. Unfortunately it was deprecated, so I decided to write this one.
新鲜货
Indexed Database API 2.0 - W3C Recommendation
https://www.w3.org/TR/2018/REC-IndexedDB-2-20180130/
另：WCAG 2.1 is a Candidate Recommendation、HTML Media Capture is now a W3C Recommendation
Public Review of Java MVC 1.0 Specification is Now Open
https://www.infoq.com/news/2018/01/mvc-1.0-public-review
Public review of JSR-371, Model-View-Controller (MVC) version 1.0 specification, is now open.
Bulma: CSS framework you should consider in 2018
https://matwrites.com/bulma-css-framework-for-2018/
Bulma. Beautiful, lightweight and stylish CSS framework made by Jeremy Thomas. If you haven’t done it already – I encourage you to visit his website – the site just lives in the browser! It’s super-interactive, beautiful and it’s pure CSS!
Announcing TypeScript 2.7
https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/
Stricter class property checks; Definite assignment assertions; Easier ECMAScript module interoperability; unique symbol types and const-named properties; Cleaner output in –watch mode; Prettier –pretty output…
另附：React JavaScript to TypeScript Transform
Schematics — An Introduction
https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2
Schematics is a workflow tool for the modern web; it can apply transforms to your project, such as create a new component, or updating your code to fix breaking changes in a dependency. Or maybe you want to add a new configuration option or framework to an existing project.
Introduction to the Node.js Community Committee and Our Focus for 2018
https://medium.com/the-node-js-collection/introduction-to-the-node-js-community-committee-and-our-focus-for-2018-c6872c1292e4
What’s the Community Committee? Well, that’s what I’ll be discussing in this blog through an overview of why we started and what function we serve within the Node.js community. This blog also covers major initiatives we accomplished in 2017, and what we are hoping to achieve this year.
Hello！umi
https://zhuanlan.zhihu.com/p/33455048
umi 的定位是开发框架，目前包含工具 + 路由，不包含数据和视图。 所以 umi[工具 + 路由] + dva[数据] + antd(-mobile)[视图]，很配哦。另外，umi 目前基于 React，不支持 Vue 和其他框架或者无框架的开发方式。
Introducing URQL (Beta), A Universal React Query Library
https://formidable.com/blog/2018/introducing-urql/
Our goal with urql is to simplify the process of using GraphQL in React apps. There are simpler solutions, but they end up pushing the complexity of handling data storage and caching onto the user.
reas - React as Anything
https://reas.js.org/
A minimalist and highly customizable component system built on top of React and styled-components
styled-components 3.1.0
https://medium.com/styled-components/v3-1-0-such-perf-wow-many-streams-c45c434dbd03
A massive performance boost and streaming server-side rendering support.
React Scope
https://levelup.gitconnected.com/introducing-react-scope-a87d9f5247df
Visualize Your React Components as You Interact With Your App
Testing your npm package before releasing it using Verdaccio + ngrok
https://medium.com/@strapi/testing-your-npm-package-before-releasing-it-using-verdaccio-ngrok-28e2832c850a
In this post, we’re going to explain how to create a public npm registry dedicated for testing your npm package on both your machines and servers before releasing it officially.
Introducing Node Clinic - A performance toolkit for Node.js developers
https://www.nearform.com/blog/introducing-node-clinic-a-performance-toolkit-for-node-js-developers/
One of the problems Node.js developers have to deal with is figuring out why their app is “slow”. There aren’t many tools available to help dig into performance issues so we decided to create some. We’re really happy to announce the open source Node Clinic toolkit and Clinic Doctor tool.
Sockette
https://github.com/lukeed/sockette
Sockette is a tiny (344 bytes) wrapper around WebSocket that will automatically reconnect if the connection is lost!
hyperfine
https://github.com/sharkdp/hyperfine
A command-line benchmarking tool
OpenCensus: A Stats Collection and Distributed Tracing Framework
https://opensource.googleblog.com/2018/01/opencensus.html
google 开源的分布式 tracing 框架
机器学习新框架Propel：使用JavaScript做可微分编程
https://www.jiqizhixin.com/articles/2018-01-22-7
基于 WebGL 和 Tensorflow 的
But what is the Fourier Transform? A visual introduction
https://www.youtube.com/watch?v=spUNpyF58BY
An animated introduction to the Fourier Transform, winding graphs around circles.
Caire
https://github.com/esimov/caire
Caire is a content aware image resize library based on Seam Carving for Content-Aware Image Resizing paper.
Decentralized StatusPage
https://www.dstatuspage.net/
A Decentralized StatusPage with no single point of failure published to IPFS.
Regexper
https://regexper.com/
Regular expressions visualizer
Shotcut
https://www.shotcutapp.com/
Shotcut is a free, open source, cross-platform video editor.
另附：Video editing with Python
Observable is a better way to code
https://beta.observablehq.com/
Discover insights faster and communicate more effectively with interactive notebooks for data analysis, visualization, and exploration.
其它
比尔·盖茨：这本书刷新了我的史上最爱
https://weibo.com/ttarticle/p/show?id=2309404201859484119952
斯蒂芬·平克（Steven Pinker）的《人性中的善良天使》（The Better Angels of Our Nature）是我十年来读过最好的书。如果我只能向人推荐一本书，那就是它了。平克用一丝不苟的调研证明，如今我们生活在人类历史上最和平的年代。我之前从未读到谁对进步做过如此清晰的阐释。但我将不再老说这本书的好话了，因为平克已经超越了自己——他的新书《当下的启蒙》（Enlightenment Now，中文名暂译）比之前那本更棒。
从写作、排版、学术、代码四个方向，挑选适合自己的文本编辑器
https://sspai.com/post/43043
今年是 Microsoft Word 诞生的第 35 年，Vim 面世的第 27 年，即使是相对年轻的 Markdown，也有 12 个年头。但开发者们的创意从未枯竭。针对写作的各类场景，各种需求，通过实作，开发出了形态各异的写作工具。任何工具出现的意义，都是去满足使用者的需求。正如乌尔姆造型学院创立人奥托﹒艾舍所言：将哲学用于思考，将设计用于制作，两者将会通往同一个目的地。在这次盘点中，我们将放开对富文本、Markdown 等语言之间优劣的讨论，也不去争论「谁是最好的写作工具」。
猫眼郑志昊 - 为什么说产品思维已“死”
https://mp.weixin.qq.com/s?__biz=MzA5ODMzMDkzOA==&mid=2661084929&idx=1&sn=f7254f30770f587100b57ff92b5e49d2
如果把创新、创业比喻成一个骑手驾驭一匹马，你会面临三个选择：第一，你要选择一个什么样的赛道？第二，你要选择一匹好马。第三，如何培育我们驾驭这匹马的能力？一个企业与个人的事业选择，常常和他所处的跑道和他选择的人、组织是息息相关的。虽然现在整个行业，很多人强调产品思维（我个人也是产品出身），但我要提醒大家的是：产品已「死」，产业方兴。
另附：锤子科技六年，我的 5 条创业感悟
前沿社的故事：必然性的预言
http://www.geekpark.net/news/226306
「站在未来看现在」的本质，是要看到更多的必然性。我们天天的生活，大多是在因果循环之中——因为我今天在做这样的事，所以明天我可能还要做那样的事；因为这个人（竞争对手或朋友）做了这样的事，所以我也要做这样的事。但是，如果我们能够有机会看到一些未来的必然趋势，再去决定每一个下一步，那将是全新的启发和视角。
