FEX 技术周刊 - 2017/12/18
微信搜索『FEX』关注我们的公众号，及时获得最新资讯。
业界会议
D2 2017 - 匠心
http://d2forum.alibaba-inc.com/
年度前端网友见面会，今年增加了工程师文化、前端发展相关话题。附：参会体验
Google Developer Day China 2017
http://www.google.cn/intl/zh-CN/events/developerdays2017china/
主题涵盖 Android、移动网络、Firebase、机器学习、云服务、AR/VR、设计以及更多。
深阅读
The State of JavaScript 2017
https://stateofjs.com/2017/introduction/
另附：A recap of front-end development in 2017、Interesting Web Application Development Trends in 2018、11 Vue.js Component Libraries You Should Know In 2018
2017 Year in review: Software across the stack
https://code.facebook.com/posts/874627342705873/2017-year-in-review-software-across-the-stack/
This week we’re publishing a series of posts looking back at the technologies and advancements Facebook engineers introduced in 2017. Read our previous posts from this week about data centers, connectivity, and building immersive experiences.
React - Improving the Repository Infrastructure
https://reactjs.org/blog/2017/12/15/improving-the-repository-infrastructure.html
As we worked on React 16, we revamped the folder structure and much of the build tooling in the React repository. Among other things, we introduced projects such as Rollup, Prettier, and Google Closure Compiler into our workflow. People often ask us questions about how we use those tools. In this post, we would like to share some of the changes that we’ve made to our build and test infrastructure in 2017, and what motivated them.
JavaScript code coverage
https://v8project.blogspot.jp/2017/12/javascript-code-coverage.html
Earlier this year, we added native support for JavaScript code coverage to V8. The initial release in version 5.9 provided coverage at function granularity (showing which functions have been executed), which was later extended to support coverage at block granularity in 6.2 (likewise, but for individual expressions).
The Current State of Implementation and Planning for ESModules
https://medium.com/the-node-js-collection/the-current-state-of-implementation-and-planning-for-esmodules-a4ecb2aac07a
ESModules have been shipping in Node.js since version 8.9.0, you need to use the flag —-experimental-modules to utilize it. Parts of our implementation have been controversial and received push back from the community. As the implementation of ESM has a number of moving parts, including how we plan to support interoperability, the Node.js TSC thought it would be a good idea to get our current design decisions on paper to share with the general community.
REST is the new SOAP
https://medium.com/@pakaldebonchamp/rest-is-the-new-soap-97ff6c09896d
For decades, about every programming language has functioned with the same workflow: sending inputs to a callable, and getting results or errors as output. This worked well. Quite well. With Rest, this has turned into an insane work of mapping apples to oranges, and praising HTTP specifications to better violate them minutes later.
Internet protocols are changing
https://blog.apnic.net/2017/12/12/internet-protocols-changing/
Significant changes to the core Internet protocols are underway. While they are intended to be compatible with the Internet at large (since they won’t get adoption otherwise), they might be disruptive to those who have taken liberties with undocumented aspects of protocols or made an assumption that things won’t change.
Node.js 中遇到含空格 URL 的神奇“Bug”——小范围深入 HTTP 协议
https://zhuanlan.zhihu.com/p/31966196
本文探索基于了一个有空格非正常的 URI 通过 CURL 或者其它一些客户端请求时，Node.js 出现的 Bug 状态。
表格边框你知多少
https://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=2653434985&idx=1&sn=b33f2b159b1f8317163f9f6ef17cb12f
table之间的边框存在共用问题，自然而然就存在冲突。既然存在冲突，那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时，如何让浏览器按照自己意愿渲染冲突边框。在这篇文章中都有介绍，以及对表格的边框渲染原理进行了深度的剖析
Why VSCode is better than Atom?
http://teahour.fm/2017/12/12/why-vscode-is-better-than-atom.html
VSCode Team 的一线开发人员 Peng Lyu 分享为什么 VScode 比 Atom 快这么多？
Understanding CSS Layout And The Block Formatting Context
https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/
In this article, I’ll explain what a BFC is through examples which are likely to be familiar to you. I’ll then show you a new value of display, that really only makes sense once you understand what a BFC is and why you might need one.
Atomic Design with React
https://cheesecakelabs.com/blog/atomic-design-react/
Atomic Design helps to build consistent, solid and reusable design systems. Plus, in the world of React, Vue and frameworks that stimulate the componentization, Atomic Design is used unconsciously; but when used in the right way, it becomes a powerful ally for developers.
Design Systems and CSS Grid
https://24ways.org/2017/design-systems-and-css-grid/
From prototyping this new grid and components in CSS Grid, I’ve found it a fantastic way to reimagine how we can create a layout or grid system for our sites. It gives us options to create the same layouts in differing ways that could suit a project and its needs. 另附：Why Design Systems Fail
Scaling design: The start of system thinking
https://about.gitlab.com/2017/12/12/gitlab-design-library/
How we began the process of introducing a design system to GitLab. Scaling design within an application is a struggle. Design systems help alleviate problems that arise with scaling by making it easier to find inconsistent interactions or conflicting messaging. However, it can be extremely difficult to introduce a new system to teams that are already functioning without one. Here’s how we got started.
A TOUR OF CONTAINERD 1.0
https://blog.docker.com/2017/12/containerd-ga-features-2/
Containerd is used by Docker, Kubernetes CRI, and a few other projects but this is a post for people who may not know what containerd actually does within these platforms. I would like to do more posts on the feature set and design of containerd in the future but for now, we will start with the basics. 另附：Kubernetes 1.9 and a look inside the Kubernetes project
Building Services at Airbnb, Part 1
https://medium.com/airbnb-engineering/building-services-at-airbnb-part-1-c4c1d8fa811b
In this post, we share what we have designed and built to scale the development of services — using the same number engineer-hours to build more backend services that are more robust, performant, and easier to maintain.
Netflix: What Happens When You Press Play?
http://highscalability.com/blog/2017/12/11/netflix-what-happens-when-you-press-play.html
Netflix seems so simple. Press play and video magically appears. Easy, right? Not so much. Given our discussion in the What is Cloud Computing? chapter, you might expect Netflix to serve video using AWS. Press play in a Netflix application and video stored in S3 would be streamed from S3, over the internet, directly to your device.
Server-side I/O Performance: Node vs. PHP vs. Java vs. Go
https://www.toptal.com/back-end/server-side-io-performance-node-php-java-go
In this article, we’ll be comparing Node, Java, Go, and PHP with Apache, discussing how the different languages model their I/O, the advantages and disadvantages of each model, and conclude with some rudimentary benchmarks. If you’re concerned about the I/O performance of your next web application, this article is for you.
High-level Problems with Git and How to Fix Them
https://gregoryszorc.com/blog/2017/12/11/high-level-problems-with-git-and-how-to-fix-them/
In this post, I’ll be talking about some high-level, high-impact problems with Git and possible solutions for them. My primary goal of this post is to foster positive change in Git and the services around it. The staging area is a feature that should not be enabled in the default Git configuration. Branches and Remotes Management is Complex and Time-Consuming. Forks aren’t the Model You are Looking For.
新鲜货
Introducing rUXt: Visualizing Real User Experience Data for 1.2 million Websites
https://calendar.perfplanet.com/2017/introducing-ruxt-visualizing-real-user-experience-data-for-1-2-million-websites/
HTTP Archive provides an amazing trove of data for synthetic monitoring data for the top Alexa websites. We introduce Real User Experience Tool (rUXt) – a tool to visualize the UX data from the perspective of real users.
Walt - Alternative Syntax for WebAssembly
https://github.com/ballercat/walt
WAlt is an alternative syntax for WebAssembly text format. It’s an experiment for using JavaScript syntax to write to as ‘close to the metal’ as possible. It’s JavaScript with rules. .walt files compile directly to WebAssembly binary format. 另附：asm-dom - A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications).
HTML 5.2 IS NOW A W3C RECOMMENDATION
https://www.w3.org/blog/news/archives/6696
附：new features
Cake Browser
http://cakebrowser.com/
附其 CEO 的宣言 Make the Web Great Again
CKEditor 4.8 released
https://ckeditor.com/blog/CKEditor-4.8-released/
CKEditor 4.8 comes with plenty of new features - including pasting images from Microsoft Word, clipboard enhancements for Microsoft Edge and a brand new Balloon Toolbar plugin.
PostHTML
https://github.com/posthtml/posthtml
PostHTML is a tool for transforming HTML/XML with JS plugins. PostHTML itself is very small. It includes only a HTML parser, a HTML node tree API and a node tree stringifier. 开发这个类库的公司 http://theprotein.io/ 蛮有意思的 Imagine the revolution in the product creation, Synchronize UI design and its source code in the background
CSSPIN
https://webkul.github.io/csspin/
CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code
Popmotion
https://github.com/popmotion/popmotion
A functional, reactive motion library.
billboard.js
https://github.com/naver/billboard.js/
Re-usable, easy interface JavaScript chart library based on D3 v4+
Microbundle
https://github.com/developit/microbundle
The zero-configuration bundler for tiny modules, powered by Rollup.
Neutrino
https://github.com/mozilla-neutrino/neutrino-dev
Create and build modern JavaScript applications with zero initial configuration. Neutrino combines the power of webpack with the simplicity of presets. 附：Neutrino: Releasing v8
React-Form
https://github.com/react-tools/react-form
A powerful and lightweight form library for React.
Node.js meets OpenCV’s Deep Neural Networks — Fun with Tensorflow and Caffe
https://medium.com/@muehler.v/node-js-meets-opencvs-deep-neural-networks-fun-with-tensorflow-and-caffe-ff8d52a0f072
In this tutorial we are going to learn how to load pretrained models from Tensorflow and Caffe with OpenCV’s DNN module and we will dive into two examples for object recognition with Node.js and OpenCV.
FishShell
https://fishshell.com/
fish is a smart and user-friendly command line shell for macOS, Linux, and the rest of the family. 另附：Microsoft adds an OpenSSH Client to Windows 10.
Homebrew 1.4
https://brew.sh/2017/12/11/homebrew-1.4.0/
Today I’d like to announce Homebrew 1.4.0. The most significant change since 1.3.0 is that Homebrew filters environment variables.
Joy: A New Go to JavaScript Compiler
https://mat.tm/joy/
Translate idiomatic Go into concise Javascript that works in every browser. Use Go’s type system and world-class tooling to build large web applications with confidence.
AlphaGo Teach - Discover new and creative ways of playing Go
https://alphagoteach.deepmind.com/
This tool provides analysis of 6,000 of the most popular opening sequences from the recent history of Go, using data from 231,000 human games and 75 games AlphaGo played against human players.
Learn Anything White Paper
https://github.com/learn-anything/learn-anything/wiki/White-Paper
We are trying to create an Open Source Website that searches through an open database of Interactive Maps focused on learning in a linear way. It leverages all of world’s knowledge in a unique way. It takes the Wikipedia model of curating knowledge but applies it to curating links in a meaningful and visual way.
Exercism
http://exercism.io/
Exercism is still a prototype, and we are always experimenting with the basic feature set. The goal is to develop a V1 of the product from scratch using everything that we’ve learned building and using the prototype. The V1 will be built using well-known frameworks and conventions to minimize the barrier to contributing.
Photopea
https://blog.photopea.com/creating-photopea.html
Photopea is an advanced image editor, which evolved for more than four years. In terms of complexity, it can be placed next to Adobe Photoshop or GNU GIMP.
The Decentralized Web Primer
https://www.gitbook.com/book/flyingzumwalt/decentralized-web-primer/details
This primer contains a series of Tutorials explaining IPFS, Merkle Trees and the Decentralized Web.
产品及其它
Design Principles
https://principles.design/
This site is an open source resource created to help us understand and write Design Principles. Design Principles are a set of considerations that form the basis of any good product.
技术焦虑的减法与解法
https://mp.weixin.qq.com/s/Ccvg2SjaoZN9d2ydSjUmxA
杨建荣 - DBAplus社群联合发起人：作为一个IT人，我们势必都会有技术焦虑，如何脱离油腻的技术生活，让自己有一个清晰的规划，今天就和大家简单聊聊我的想法。赞：最勇敢的事情不是辞职，而是趁着年轻用所有的精力来充实自己的人生！
为什么美团总是看起来四处受敌
http://www.geekpark.net/news/225027
设计就是分类，如果按照这个方法论对中国互联网整个产业进行分类，可以分为两类：A类是供给和履约在线上，B类是供给和履约在线下。在这其中，B类又可以分为：以SKU为中心的供给B1和以Location为中心的服务B2。B2是2012年到现在为止中国互联网竞争最激烈的领域。
傅盛：生物学思维给我的四个启示
https://mp.weixin.qq.com/s?__biz=MjM5NjgzMzkwMQ==&mid=2653646444&idx=1&sn=aa5260ff03208b3f85f06ee3128816cc
相比物理学等自然科学，生物学更深刻地揭示了世界的底层规律，其思想放之四海而皆准。它向我们展示了一个可能我们自己都并不了解的真实世界。这个世界看上去生机勃勃，其实背后的规律，冰冷，残酷。进化论真正的价值在于，让我们意识到每个人的自我，都会认为自己是特殊的；如果不是认为自己特殊，就不会因为自己遇到了一些挫折而感觉受到了伤害。其实这都是因为你自己的、以自我为中心的幻象。生物学的思维模型给带来了四个很重要的思考启示：第一，混沌。第二，理性。第三，过程。第四，反脆弱。另附搜狗的王小川从生命的复杂性中所得到的启发：是什么让搜狗活到今天
