FEX 技术周刊 - 2018/04/30

微信搜索『FEX』关注我们的公众号，及时获得最新资讯。

业界会议

[报名]FDCon2018 – 前端体验的融合开发之道
https://fdcon.topgeek.org/
第三届中国前端开发者千人峰会，FDCon2018主要面向各行业对前端、移动开发感兴趣的中高端技术人员，聚焦前沿技术及实践经验，旨在帮助参会者了解前端和移动开发领域最新的技术趋势与最佳实践。本次大会的主题是“前端体验的融合开发之道“，重点讲述端的融合和栈的融合。另附：报名 - PHPCon China 2018、GMIC北京 - 全球移动互联网大会

深阅读

Node v10.0.0
https://nodejs.org/en/blog/release/v10.0.0/
Feature Highlights for the Node-ChakraCore release include: V8 6.6; Full support for N-API; Easy getting started with Time-Travel Debugging via a new Visual Studio Code Extension; TTD support for generators and async functions; Support for Inspector protocol; Increased stability and other assorted improvements. 附：The Node.js Project Introduces Latest Release Line: Node.js 10.x, Node v10 Feature Breakdown, Announcing npm@6, The new npm CLI: a year in review; or, what you may have missed, Beyond npm@6: The future of the npm cli.

V8 - Improved code caching
https://v8project.blogspot.com/2018/04/improved-code-caching.html
V8 uses code caching to cache the generated code for frequently-used scripts. Starting with Chrome 66, we are caching more code by generating the cache after top-level execution. This leads to a 20-40% reduction in parse and compilation time during the initial load.

CKEditor 5 v10 Released: A Powerful WYSIWYG Editor Framework
https://ckeditor.com/blog/CKEditor-5-v10.0.0-the-future-of-rich-text-editing-looks-stable/
It has been a long time coming, but after almost 4 years of research, planning and developing, we give you a totally new experience in rich text editing — CKEditor 5. For those who are not familiar with CKEditor 5 yet — it is a powerful framework that enables you to create any kind of text editing solution and include real-time collaborative editing inside.

Writing WebAssembly By Hand
http://blog.scottlogic.com/2018/04/26/webassembly-by-hand.html
This post describes the process of implementing Conway’s Game of Life, it’s something of a classic. You might also want to take a look at this fantastic tutorial which also implements Life in WebAssembly using Rust. 另附：Beta for Qt for WebAssembly

CSS at Scale: LinkedIn’s New Open Source Projects Take on Stylesheet Performance
https://engineering.linkedin.com/blog/2018/04/css-at-scale--linkedins-new-open-source-projects-take-on-stylesh
CSS Blocks is an ergonomic, component-oriented CSS authoring system that compiles to high-performance stylesheets. By combining an opinionated authoring system, build-time analysis and rewriting of templates, and a new type of CSS optimizer, css-blocks breathes new power and ease of use into the technologies and best practices that stylesheet developers already know and love.

Testing Strategies for React and Redux
https://hacks.mozilla.org/2018/04/testing-strategies-for-react-and-redux/
When the Firefox Add-ons team ported addons.mozilla.org to a single page app backed by an API, we chose React and Redux for powerful state management, delightful developer tools, and testability. Achieving the testability part isn’t completely obvious since there are competing tools and techniques. Below are some testing strategies that are working really well for us. 另附：Software Testing Anti-patterns

Nerv实战 - 京东首页改版小结
https://aotu.io/notes/2018/04/24/jdindex_2017/
从 整体开发架构与模式，性能、体验优化的探索，页面可用性的保障等方面对京东首页的开发过程做了 简单的介绍。之所以说简单，是因为短短的篇幅完全无法说完我们在开发期间的故事和感悟：许多问题的解决并不像上面讲的那样水到渠成；除此之外更是有一大堆深夜加班撸串的故事没有地方讲。

Qone 正式开源，使 javascript 支持 .NET LINQ
http://div.io/topic/2197
LINQ (语言集成查询) 是 .NET Framework 3.5 版中引入的一项创新功能，可以用 Visual Basic 或 C# 为以下数据源编写 LINQ 查询：SQL Server 数据库、XML 文档、ADO.NET 数据集，以及可枚举的 Objects(即 LINQ to Objects)。腾讯文档公式相关工作、早年的 kmdjs 开发 (uglify2) 和 .NET 开发，所以有了 qone 。qone 是一款让 Web 前端工程师在 javascript 使用 .NET 平台下类似 LINQ 语法的前端库。qone 让 Web 前端工程师通过字符串的形式实现了 LINQ to Objects 的调用（下面统一叫做 qone to objects），Objects即 JSON 组成的 Array。

后端架构师技术图谱
https://github.com/xingshaocheng/architect-awesome/blob/master/README.md
非常适合用 Node 实践全栈的前端同学看看。

专访死马：为什么说Egg.js是企业级Node框架
https://zhuanlan.zhihu.com/p/36240171
自从Node.js问世以来，阿里就是国内跟进Node.js最激进的公司之一。阿里不仅在公司内大范围使用Node.js用作服务端开发，2016年还将他们使用Node做Web开发的经验沉淀下来，推出Egg.js开源项目，号称为企业级框架和应用而生。企业级开发对于框架有着诸多要求，那么Egg.js又是怎么满足这些要求的？

七牛云：工程效率部如何为研发赋能
https://mp.weixin.qq.com/s?__biz=MzA4NTU2MTg3MQ==&mid=2655164024&idx=1&sn=756862073ad7498d80e54da0e6d2ce69
我们的体系主要分三大块：质量管理、工程赋能，以及过程改进。虽然这里有虚线、实线组织，但整体来说是有机的整体。我们不但要做质量，更重要的是在有效率的情况下，如何把质量做到最好。

Canvas: Draw on the web
https://yuque.com/airing/canvas
从零基础开始，到Canvas API，再到基本动画与高级动画的实现，还会介绍视音频的处理、移动应用，最后如果有时间会扩展说一说3D、多人应用、游戏制作等。另附：SpriteJS、WebGL2 Fundamentals、3D models in HTML documents。

阮老师每周分享
http://www.ruanyifeng.com/blog/2018/04/weekly-issue-2.html
这里记录过去一周，我看到的值得分享的东西。长久以来，我一直用各种方式，尝试整理我的收藏夹。最近想到，把它写成文章，共享出来，也许效果更好。感兴趣的可以 RSS 订阅，长期关注。

Under the hood of CSS and JS animations + how to optimize their performance
https://blog.sessionstack.com/how-javascript-works-under-the-hood-of-css-and-js-animations-how-to-optimize-their-performance-db0e79586216
As you surely know, animations play an essential role in the creation of compelling web apps. As users increasingly shift their attention to UX and businesses start realizing the importance of flawless, enjoyable user journeys, web applications become heavier, and feature more dynamic UI. This all requires more complex animations for smoother state transitions throughout the journey of the user.

Replace Animated GIFs with Video
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/
In this article, you’re going to learn how to do what the GIF hosting sites do to keep their bandwidth bills from going through the roof, and convert those giant GIFs into lean and fast video files! You’ll then learn how to properly embed these videos in web pages so they behave just like GIFs. Finally, we’ll talk a little bit about decoding performance for both GIF and video. Before you know it, you’ll be well on your way to shaving megabytes off your GIF-heavy web pages in no time at all!

How to break a Monolith into Microservices
https://martinfowler.com/articles/break-monolith-into-microservices.html
As monolithic systems become too large to deal with, many enterprises are drawn to breaking them down into the microservices architectural style. It is a worthwhile journey, but not an easy one. We’ve learned that to do this well, we need to start with a simple service, but then draw out services that are based on vertical capabilities that are important to the business and subject to frequent change. These services should be large at first and preferably not dependent upon the remaining monolith. We should ensure that each step of migration represents an atomic improvement to the overall architecture. 另附：Introduction to Microservices

MacOS monitoring the open source way
https://blogs.dropbox.com/tech/2018/04/4696/
We eventually landed on 3 open source tools: osquery, Santa, and the OpenBSM/Audit system; with each tool serving a specific purpose: osquery provides periodic snapshots describing changes to the state of a machine; Santa provides real-time process launch events containing details about the executing binary; OpenBSM/Audit is real-time system call monitoring module in the macOS kernel that can provide networking, file operations, administrative events, and other system interactions.

Moving Fast and Securing Things - The SDL at Slack and goSDL
https://slack.engineering/moving-fast-and-securing-things-540e6c5ae58a
For development teams, process can often be antithetical to speed. Ease of deployment and security tend to have an inverse relationship, with some resentment for the security team occasionally mixed in. “SDL” stands for “Security Development Lifecycle”.

Hijack of Amazon’s internet domain service used to reroute web traffic for two hours unnoticed
https://doublepulsar.com/hijack-of-amazons-internet-domain-service-used-to-reroute-web-traffic-for-two-hours-unnoticed-3a6f0dda6a6f
The attackers used BGP — a key protocol used for routing internet traffic around the world — to reroute traffic to Amazon’s Route 53 service, the largest commercial cloud provider who count major websites such as Twitter.com as customers. 另附：BGP leaks and cryptocurrencies

Scaling a High-traffic Rate Limiting Stack With Redis Cluster
https://brandur.org/redis-cluster
Stripe’s rate limiters are built on top of Redis, and until recently, they ran on a single very hot instance of Redis. The server had followers in place for failover, but at any given time, one node was handling every operation. 另附：Yes, I’m Forking Redis。

Parsing JSON is a Minefield
http://seriot.ch/parsing_json.php
I’ll show that JSON is not the easy, idealised format as many do believe. Indeed, I did not find two libraries that exhibit the very same behaviour. Moreover, I found that edge cases and maliciously crafted payloads can cause bugs, crashes and denial of services, mainly because JSON libraries rely on specifications that have evolved over time and that left many details loosely specified or not specified at all.

What Will Programming Look Like In The Future?*
http://highscalability.com/blog/2018/4/25/update-what-will-programming-look-like-in-the-future.html
Humans and AIs working together to produce software better than either can separately. The computer as a creative agent, working in tandem with a human partner, to produce software, in a beautiful act of co-creation. What we need is a manufacturing process that puts software production on an exponential curve. The only conceivable tool we have at the moment to put software on an exponential production curve is AI. That’s the only way software can truly eat the world.

新鲜货

WebDriver is a W3C Proposed Recommendation
https://www.w3.org/blog/news/archives/6985
The Browser Testing and Tools Working Group has published a Proposed Recommendation of WebDriver. WebDriver is a remote control interface that enables introspection and control of user agents. It provides a platform- and language-neutral wire protocol as a way for out-of-process programs to remotely instruct the behavior of web browsers.

GitHub partners with the Fintech Open Source Foundation (FINOS)
https://blog.github.com/2018-04-24-github-partners-with-finos/
We’re proud to announce our membership in the Fintech Open Source Foundation (FINOS)—a newly launched nonprofit foundation promoting open innovation in financial services—along with technical organizations like Red Hat and Nodesource and financial organizations like Citigroup, UBS, and HSBC.

GitLab 10.7 released with open source Web IDE and SAST for Go and C/C++
https://about.gitlab.com/2018/04/22/gitlab-10-7-released/
We are making these tasks easier and more efficient with an amazing Web IDE, more flexible pipelines, additional security testing, and so much more.

RxJS v5.x to v6 Update Guide
https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md
RxJS v6 has arrived! While this is a major version change (from 5.x to 6.x), we’ve put in a lot of work to keep the hard breaking changes to a minimum. In most cases, this allows application and library developers to update incrementally and use RxJS v6 without any modifications to their code.

Announcing Storybook 3.4
https://medium.com/storybookjs/announcing-storybook-3-4-db4d1341dedd
Storybook 3.4 is on the NPM registry, and it’s a big one. It includes:, New framework support: Polymer; Component testing: Storyshots image snapshots, Vue/Angular support; UI improvements: Multiple story hierarchies; Storysource: New addon for component code documentation.

Microsoft makes AI training courses available to the public
https://blogs.microsoft.com/ai/microsoft-professional-program-ai/
Microsoft announced the Microsoft Professional Program in AI, the latest learning track open to the public. The program provides job-ready skills and real-world experience to engineers and others who are looking to improve their skills in AI.

Webkit - Visualizing Layers in Web Inspector
https://webkit.org/blog/8262/visualizing-layers-in-web-inspector/
Recent releases of Safari Technology Preview contain a new experimental feature for Web Inspector: the Layers tab. Building upon the legacy Layers sidebar, this tab introduces a 3D visualization of the inspected page’s compositing layers, to provide developers with a more hands-on (and hopefully fun!) way to understand where layers are being generated and in what order they will render. 另附：Web Inspector Styles Sidebar Improvements

Permit - An unopinionated authentication library for building Node.js APIs.
https://github.com/ianstormtaylor/permit
Permit makes it easy to add an authentication layer to any Node.js API. It can be used with any of the popular server frameworks (eg. Express, Koa, Hapi, Fastify) and it can be used for any type of API (eg. REST, GraphQL, etc.) due to its simple, unopinionated design.

PKIjs
https://github.com/PeculiarVentures/PKI.js
Public Key Infrastructure (PKI) is the basis of how identity and key management is performed on the web today. PKIjs is a pure JavaScript library implementing the formats that are used in PKI applications. It is built on WebCrypto (Web Cryptography API) and aspires to make it possible to build native web applications that utilize X.509 and the related formats on the web without plug-ins.

TypeORM
http://typeorm.io/#/
TypeORM is an ORM that can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native and Electron platforms and can be used with TypeScript and JavaScript (ES5, ES6, ES7). Its goal is to always support the latest JavaScript features and provide additional features that help you to develop any kind of application that uses databases - from small applications with a few tables to large scale enterprise applications with multiple databases.

TOAST UI Calendar
https://github.com/nhnent/tui.calendar
A JavaScript schedule calendar with full featured. Now your service just got the customizable calendar. 另附：Day.js，a minimalist JavaScript library for modern browsers with a largely Moment.js-compatible API.

Unstated
https://github.com/jamiebuilds/unstated
State so simple, it goes without saying. 附：Easy State Management in React Using Unstated

Tone.js
https://tonejs.github.io/
Tone.js is a framework for creating interactive music in the browser. It provides advanced scheduling capabilities, synths and effects, and intuitive musical abstractions built on top of the Web Audio API.

react-circle
https://github.com/zzarcon/react-circle
Renders a svg circle + progress

Introducing calidation
https://medium.com/@selbekk/introducing-calidation-7d9a79453f7
Although form validation is boring af, it’s also one of the most important improvements to your user experience. Get ready to be mildly impressed!

Electrode
http://www.electrode.io/
Electrode is a platform for building universal React/Node.js applications with standardized structure, best practices, and modern technologies baked in. Electrode Native is a mobile platform that simplifies development and streamlines the integration of React Native components into existing mobile applications.

iOS Dev Directory
https://iosdevdirectory.com/
The iOS Dev Directory is a comprehensive list of blogs & sites covering iOS development. Whether it’s about coding, design, marketing or anything in between, if a blog or site is related to iOS development it should be listed here.

Flask 1.0 Released
https://www.palletsprojects.com/blog/flask-1-0-released/
Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja and has become one of the most popular Python web application frameworks. 可看看有哪些值得 Node 框架借鉴的.

Go’s New Brand
https://blog.golang.org/go-brand
I am delighted to announce the launch of Go’s new look and logo. 另附：Awesome Go: 1400+ Go Links, Libraries and Tools

Practical Jokes in the Browser
http://mediatemple.net/blog/tips/practical-jokes-browser/
I know April Fool’s Day is at the beginning of this month, but hey, now you’ve got a year to prepare. Not to mention a gool ol’ practical joke can be done anytime. Fair warning on this stuff… you gotta be tasteful. Putting someone’s stapler in the jello is pretty hilarious unless it’s somehow a family heirloom, or it’s someone who’s been the target of a little too much office prankery to the point it isn’t funny anymore. Do good. Have fun.

设计

What I have learned at Google as a designer
https://medium.com/google-design/what-i-learned-at-google-as-a-designer-7e3a12b7a82e
A running list of learnings & insights from my ongoing journey as a Googler. 另附：What happened Gmail

Working Together: How Designers And Developers Can Communicate To Create Better Projects
https://www.smashingmagazine.com/2018/04/working-together-designers-developers/
A good relationship starts with the ability for all of us to take a step back from our strongly held opinions, listen to our colleagues, and learn to compromise. We can then choose tools and workflows which help to support that understanding that we are all on the same team, all trying to do a great job, and all have important viewpoints and experience to bring to the project. 另附：design systems will only work if we improve the way we work together

The Illusion of Control in Web Design
http://alistapart.com/article/the-illusion-of-control-in-web-design
We all want to build robust and engaging web experiences. We scrutinize every detail of an interaction. We spend hours getting the animation swing just right. We refactor our JavaScript to shave tiny fractions of a second off load times. We control absolutely everything we can, but the harsh reality is that we control less than we think.

The Front-End Design Checklist
https://codeburst.io/the-front-end-design-checklist-4dd15828fad
An Exhaustive List of all the Elements which Web Designers and Front-End Developers need to take into Consideration to Facilitate their Collaboration.

Many Faces of Graphic Design: What Graphic Designers Do
https://uxplanet.org/many-faces-of-graphic-design-what-graphic-designers-do-b73a0e611115
Seeing the steady interest in the issues on graphic design on Quora, we have collected the most popular questions here for our readers. They cover the following questions: What is graphic design? What are the creative directions of graphic design? Is graphic design art? Why is graphic design important? What skills are needed to reach success in graphic design?

Seven best practices for inclusive product design
https://medium.com/@Pinterest_Engineering/seven-best-practices-for-inclusive-product-design-9476c61f1e17
We’re building a product for everyone, because the best Pinterest is inclusive and easily usable for people with all levels of abilities. That’s why today we’re sharing our learnings and best practices we developed over the last year as we redesigned Pinterest to be more accessible for people who are blind and visually impaired. 另附：Building a more inclusive way to search

产品及其它

How To Drive Change as a Software Engineer
http://www.lihaoyi.com/post/HowToDriveChangeasaSoftwareEngineer.html
You have an idea. Your boss is indifferent, your team-mates apprehensive, and that other team whose help you need are dubious. You are an individual-contributor with no direct-reports. You still think it’s a good idea, but cannot make it happen alone. What next? 另附：Managing a Fully Remote Dev Team - Interview With CTO of Zapier

MIT Researchers Have Developed a ‘System for Dream Control’
https://motherboard.vice.com/en_us/article/ywxjvg/steel-ball-control-dreams-dormio-mit-hypnagogia
So far Horowitz has tested the device on 8 subjects and found that it is able to reliably maximize the amount of time users spend suspended between wakefulness and sleep, as well as shape the content of the microdreams they experience. In other words, these MIT researchers have developed a low cost device that allows users to interface with sleep.

Why it took a long time to build that tiny link preview on Wikipedia
https://blog.wikimedia.org/2018/04/20/why-it-took-a-long-time-to-build-that-tiny-link-preview-on-wikipedia/
The history of page previews.

Stack Overflow Isn’t Very Welcoming. It’s Time for That to Change
https://stackoverflow.blog/2018/04/26/stack-overflow-isnt-very-welcoming-its-time-for-that-to-change/
As of last week, we’re prioritizing this and staffing it with talented employees from our Executive, Community, Data, Design, Research, and Engineering teams. We’re listening to our community and those sharing their experiences. In any case, here are some areas we’re planning to focus on first: Let’s shift from “don’t be an asshole” to “be welcoming.”; Let’s do something about comments; Let’s make it easier for new users to succeed; Let’s stop judging users for not knowing things…

凯叔：对自己狠的人，身边都是蓝海
https://mp.weixin.qq.com/s?__biz=MzUyMDQ5NzI5Mg==&mid=2247494957&idx=1&sn=3d4b693774c0bc2059befa71077e788f
搭建模型：寻找“第一性原理”；找到极致点：把产品打造成工艺品；场景：不为场景打造出来的产品与垃圾无异；时间成本：资本不能催化的往往才是你的核心竞争力；交互：交互方式本身就是内容；营销：营销永远在前面；迭代：当你觉得产品完成了的时候，它就死了。

95后只会吃鸡和点外卖？看看互联网生活方式数据怎么说
https://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=2653435423&idx=1&sn=8a2dc59a379b2a829655c615119ca286
随着95后的成长，兴趣圈子的文化逐渐蔓延为年轻群体主流文化，互联网行业如何理解？为此，酷鹅用户研究院（微信ID：kueclub）特展开系列研究，本期将深入解析95后互联网生活方式。

– THE END –