FEX 技术周刊 - 2018/04/02

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

业界会议

中国第四届CSS大会
https://css.w3ctech.com/
码农聚会，期待资料。

GDC - Game Developers Conference 2018
http://www.gdconf.com/conference/index.html
Everything you missed from GDC 2018、Godot is doing well at GDC 2018!

Shoptalk - 2018
https://shoptalk.com/
50 多个国家，8500 余人，300 多家主流媒体，齐聚美国 Shoptalk 2018 大会（全球最大的电商和零售创新会议）。附：突围全球 3 万亿美元市场，Google 如何布局“新零售”

深阅读

V8 release v6.6
https://v8project.blogspot.jp/2018/03/v8-release-66.html
V8 v6.6 is filled with all sorts of developer-facing goodies. This post provides a preview of some of the highlights in anticipation of the release: Code caching after execution; Background compilation; Removal of AST numbering; Asynchronous performance improvements; Array performance improvements…

Google publishes a JavaScript style guide. Here are some key lessons
https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b
Google puts out a style guide for writing JavaScript that lays out (what Google believes to be) the best stylistic practices for writing clean, understandable code. Google and Airbnb have two of the most popular style guides out there. I’d definitely recommend you check out both of them if you spend much time writing JS. The following are thirteen of what I think are the most interesting and relevant rules from Google’s JS Style Guide.

React v16.3.0: New lifecycles and context API
https://reactjs.org/blog/2018/03/29/react-v-16-3.html
In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API. 另附：Update on Async Rendering、Nerv - A blazing fast React alternative, compatible with IE8 and React 16、

Redux - Not Dead Yet!
http://blog.isquaredsoftware.com/2018/03/redux-not-dead-yet/
Some clarification on what’s going on with Redux. I’m a Redux maintainer. There’s been a lot of confusion, claims, and misinformation about Redux going around lately, and I want to help clear things up. Is Redux dead, dying, deprecated, or about to be replaced? No. Are there situations where you don’t need Redux? Sure, but that’s always been true.

ESLint + Prettier For a Consistent React Codebase
https://blog.gojekengineering.com/eslint-prettier-for-a-consistent-react-codebase-eaa673debb1d
In this post I’m going to assume we are building a React app with create-react-app, although most of the concepts here are applicable to any Javascript development.

ES modules: A cartoon deep-dive
https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
Many JavaScript developers know that ES modules have been controversial. But few actually understand how ES modules work. Let’s take a look at what problem ES modules solve and how they are different from modules in other module systems.

你离高效制作动画只差一篇文章的距离
https://isux.tencent.com/articles/efficient-animation.html
看完本文，前端能快速开发一些H5动画，设计师也能高效地制作出合自己心意的动画来让别人高保真还原，希望能给大家带来一点帮助。

前端全栈什么鬼？K型人才什么鬼？
https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247488604&idx=1&sn=1c2f4848d208a55f120199b184845633
今天，我想跟大家谈谈前端工程师进阶方向的问题。关于这个问题市场上的杂音太多，各种误解、误导太多，我想谈谈我的观察和理解，包括全栈、Node 全栈、大前端等，希望对大家有所帮助。

金丝雀发布、滚动发布、蓝绿发布到底有什么差别
https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247487627&idx=1&sn=34d437a1253bdf61857cf2ac513285ac
作为技术人员，大家可能听说过“滚动发布”和“蓝绿发布”等术语，但是很多人并不清楚这些术语背后的原理。本文试图总结当前主流的发布策略，每个的优劣，适用性，让开发人员特别是架构师对现代发布技术有一个更为清晰全面的认识，让大家能够根据自己的企业上下文，对发布策略做出正确的选型和实践。

从抄书到开源之巅：章亦春的程序人生
https://mp.weixin.qq.com/s?__biz=MzA4MTEzNzUwMw==&mid=2654880376&idx=1&sn=e092369e7fb96161172aae23272ac0c8
春哥的编程之旅起于抄书，就算如今已是罕见的编程高手，春哥依然逢人大力推荐他的抄书学编程之法。春哥先后在中国雅虎、淘宝、Cloudflare 就职，但开源世界是他如一的眷念。如今，春哥已全身心投入 OpenResty 的崭新蓝图，期待 OpenResty 未来能在工业界、互联网行业引领“机器编程”革命。很荣幸这次图灵访谈可以对话春哥，让我们来一起了解一下春哥的快意程序人生。

The Future of Web Layout
https://www.youtube.com/watch?v=LUMkgn_xtlg
A webinar discussing new advances in web layout techniques that will impact web designers and developers in the near future.

How display: contents; Works
https://bitsofco.de/how-display-contents-works/
What happens when you use display: contents? The easiest way to understand what happens when display: contents is used is to imagine the element’s opening and closing tags being omitted from the markup.

w descriptors and sizes: Under the hood
https://beta.observablehq.com/@eeeps/w-descriptors-and-sizes-under-the-hood
If you’re not familiar with srcset, w descriptors, and sizes, the best, shortest guide to what you should put where when you’re just trying to put a dang image on a dang website might be this one, from Jake Archibald. Go! Read it! If you already know your way around the whats and the whys of this markup, you might not know exactly how browsers use it to load images responsively. The mechanics are interesting, and have some confounding side effects.

Introducing Cloud Text-to-Speech powered by DeepMind WaveNet technology
https://cloudplatform.googleblog.com/2018/03/introducing-Cloud-Text-to-Speech-powered-by-Deepmind-WaveNet-technology.html Many Google products (e.g., the Google Assistant, Search, Maps) come with built-in high-quality text-to-speech synthesis that produces natural sounding speech. Developers have been telling us they’d like to add text-to-speech to their own applications, so today we’re bringing this technology to Google Cloud Platform with Cloud Text-to-Speech.

Data Science and the Art of Producing Entertainment at Netflix
https://medium.com/netflix-techblog/studio-production-data-science-646ee2cc21a1
Netflix has released hundreds of Originals and plans to spend $8 billion over the next year on content. Creators of these stories pour their hearts and souls into turning ideas into joy for our viewers. The sublime art of doing this well is hard to describe, but it necessitates a careful orchestration of creative, business and technical decisions. Here we will focus on the latter two — business & technical decisions like planning budgets, finding locations, building sets, and scheduling guest actors that enable the creative act of connecting with viewers.

Building Check-In Queuing & Appointment Scheduling for In-Person Support at Uber
https://eng.uber.com/check-in-queueing/
To create better experiences for driver-partners and improve customer satisfaction, Uber’s Customer Obsession Engineering team built an in-house customer support system, a solution that has led to more streamlined and quicker support ticket resolution through GLHs.

Scheduling Jekyll posts with Netlify and AWS
https://www.nczonline.net/blog/2018/03/scheduling-jekyll-posts-netlify/
This post assumes you already have a site setup on Netlify using a GitHub repository. While I assume the solution works the same for other source code repository types, like BitBucket, I’m not entirely sure. This post also assumes that you have an AWS account.

git log – the Good Parts
https://zwischenzugs.com/2018/03/26/git-log-the-good-parts/
If you’re managing a complex git codebase with multiple developers, then you may well be using a tool like GitHub or BitBucket to delve into the history and figure out branch and merge issues. These GUIs are great for providing a nice user interface for managing pull requests and simple histories and the like, but when the workflow SHTF there’s no substitute for using git log and its relatively little-known flags to really dig into the situation.

UX In Contact Forms: Essentials To Turn Leads Into Conversions
https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/
Form fields are actually the most important tool for user-service interaction, no matter what the form is for — whether a newsletter subscription or a step-by-step form for collecting data. In this article, we’ll take a look at the most common questions of design trainees in our company. Below are FAQs and answers on how to make website forms user-friendly, as well as tips to prevent low user interaction.

Animated Transitions in Mobile Apps
https://uxplanet.org/animated-transitions-in-mobile-apps-412b8e8478e7
Animation is a big part of user experience. When it comes to transitions in mobile apps, there are a lot of things you can communicate very subtly with animation. Send the message, open Settings, check the box, navigate to another page — these are all moments of change. Animating a transition is an excellent way to reinforce the user’s action. In this article, we’ll review the common cases when functional animation can complement the visual design and support interactions.

Slack iPhone Redesign Concept
https://medium.com/sketch-app-sources/slack-iphone-redesign-concept-30a6d1a80365
Current Slack UX pain points and how I propose to fix them.

Polishing GitLab’s UI: A new color system
https://about.gitlab.com/2018/03/29/polishing-gitlabs-ui-a-new-color-system/
We receive a lot of feedback from our users and the broader community. After hearing that there is a perceived lack of consistency and quality in GitLab’s UI, we decided to take a look at our color palette. Aesthetic aspects like this are a fundamental part of the UI. If we don’t get these right, everything else in the UI won’t feel, look, or behave correctly. Like a house, these aesthetics are the foundation upon which everything else is built.

新鲜货

Announcing the Second Edition of “Refactoring”
https://martinfowler.com/articles/201803-refactoring-2nd-ed.html
During 2015 and early 2016 I wrote a series of essays exploring various circumstances for refactoring, this helped me get a feel for if I should tackle a rewrite, and if so, how. By mid 2016 I was ready to commence the work in anger. [1] If you’ve been wondering why I haven’t been writing as much for martinfowler.com as I used to, it was because my writing energy has been focused on the book since then.

The status of JavaScript libraries & frameworks: 2018 & beyond
https://medium.com/@alberto.park/the-status-of-javascript-libraries-frameworks-2018-beyond-3a5a7cae7513
The nowdays FE dev can be illustrated as agonizing what is the best choice and taking a look of the current & future status will be a good starting point of your consideration. 另附：Javascript Machine Learning Libraries To Use In Your App、20 Node.js modules you need to know、The Future of JavaScript Frameworks Looks Very Fast、24 JavaScript and Node.js Experts to Follow Online.

Dart Sass 1.0.0 is Released
http://sass.logdown.com/posts/7045860-dart-sass-100-is-released
The 1.0.0 stable release indicates that Dart Sass is fully compatible with the Sass language as defined by the sass-spec test suite, and that its npm package is compatible with the Node Sass API, with the exception of source map support which is coming soon.

Mozilla Turns Twenty
https://blog.mozilla.org/blog/2018/03/31/mozilla-turns-twenty/
There is plenty to do going forward to build a healthier internet that has better human experiences. There’s no detailed map — we’ll build that together. We’ll go forwards, sideways, and in circles. It’s an adventure, and probably not for the faint-hearted. But for those who love the adventure, thrive on change, and want to be remembered for building decent values into great products and programs – for us, there’s no better place to be.

Announcing TypeScript 2.8
https://blogs.msdn.microsoft.com/typescript/2018/03/27/announcing-typescript-2-8/
To get a quick glance at what we’re shipping in this release, we put this handy list together to navigate our blog post: Conditional types, Declaration-only emit, @jsx pragma comments, JSX now resolved within factory functions, Granular control on mapped type modifiers, Organize imports, Fixing uninitialized properties.

Gestalt
https://github.com/pinterest/gestalt
Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and developers by enforcing a bunch of fundamental UI components. This common set of components helps raise the bar for UX & accessibility across Pinterest.

react-content-loader
https://github.com/danilowoz/react-content-loader
SVG component to create placeholder loading, like Facebook cards loading.

Popmotion Pose
https://popmotion.io/pose/
A declarative animation library for HTML, SVG and React. CSS simplicity meets Popmotion power.

RecyclerListView
https://github.com/Flipkart/recyclerlistview
High performance listview for React Native and web!

Vue Design System
https://viljamis.com/2018/vue-design-system/
Vue Design System is a set of organized tools, patterns, and practices that work as the foundation for Vue.js application development. What initially started as a quick-n-dirty prototyping tool for a client of mine, has grown into a fully capable systems tool that provides an environment where the pattern library and live application can be perfectly in sync.

Vue CLI 3: A Game Changer For Frontend Development
https://vuejsdevelopers.com/2018/03/26/vue-cli-3/
Vue CLI 3 is a major leap forward in both flexibility and ease of use. It provides your Vue project with instant access to the best build tools from the frontend world, combining them seamlessly with sensible defaults. At the same time, it allows easy configuration and customization to fit your specific needs.

Axe 3.0
https://www.deque.com/blog/axe-3-0-has-arrived/
aXe is an open source rules library for accessibility testing. It was developed to empower developers to take automated accessibility testing into their own hands and to avoid common pitfalls of other automated accessibility tools.

HotKeys.js
http://wangchujiang.com/hotkeys/
A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.

Micron.js
https://webkul.github.io/micron/
a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power

better-xlsx
https://github.com/d-band/better-xlsx
A better xlsx lib for read / write / toTable / from Table

fsm-as-promised
https://github.com/vstirbu/fsm-as-promised
A minimalistic finite state machine library for browser and node implemented using promises.

No Code
https://github.com/kelseyhightower/nocode
No code is the best way to write secure and reliable applications. Write nothing; deploy nowhere. 也是醉了… 另附：is-thirteen，挺神奇的一个库。

The world’s first code-free sparkline typeface
https://aftertheflood.co/projects/sparks/
Displaying charts in text without having to use code
Data can be hard to grasp however visualising it can make comprehension faster. Sparklines are a useful tool, but creating them for the web has always required code and using them in word documents was previously impossible.

A Focus on SVG
https://frontendfoc.us/issues/333
This week we’ve brought together a collection of tools, tips and tutorials on all things SVG.

CockroachDB 2.0 Performance Makes Significant Strides
https://www.cockroachlabs.com/blog/2-dot-0-perf-strides/
A three-node, fully-replicated, and multi-active CockroachDB 2.0 cluster achieves a maximum throughput of 16,150 tpmC on a TPC-C dataset. This is a 62% improvement over our 1.1 release. Additionally, the latencies on 2.0 dropped by up to 81% compared to 1.1, using the same workload parameters. That means that our response time improved by 544%. CockroachDB 2.0 will be released in GA in the coming weeks.

Wapp – a single-file web framework by the creator of SQLite
https://wapp.tcl.tk/index.html/doc/trunk/README.md
Wapp is a new framework for writing web applications in TCL, with the following advantages: Very small API → easy to learn and use; A complete application is contained in a single file; Resistant to attacks and exploits…

Kubernetes 1.10: Stabilizing Storage, Security, and Networking
http://blog.kubernetes.io/2018/03/kubernetes-1.10-stabilizing-storage-security-networking.html
This newest version stabilizes features in 3 key areas, including storage, security, and networking. Notable additions in this release include the introduction of external kubectl credential providers (alpha), the ability to switch DNS service to CoreDNS at install time (beta), and the move of Container Storage Interface (CSI) and persistent local volumes to beta. 另附：Creator of Docker, Solomon Hykes, Leaves Docker.Inc、Click - The “Command Line Interactive Controller for Kubernetes”、Cloud Dominated the Decade — Where Will We Be in 2020?

产品及其它

Storyboarder
https://wonderunit.com/storyboarder/
Storyboarder makes it easy to visualize a story as fast you can draw stick figures. Quickly draw to test if a story idea works. Create and show animatics to others. Express your story idea without making a movie. 附：The Art of Storyboarding

Europe needs strong privacy protections to keep the web open and safe
https://webfoundation.org/2018/03/europe-needs-strong-privacy-protections-to-keep-the-web-open-and-safe/
We have joined a group of 28 signatories from across the EU to call on member states to: Finalise and agree on discussions so that talks can begin with the European Parliament to adopt strong privacy protections by the end of 2018. Support provisions that ensure privacy by design and by default in both software and hardware. 这个政策似乎会影响共享代码，附：EU Citizens - Let’s Save Code Share!.

为什么说MVP已死，MAP当道
https://www.uisdc.com/minimum-awesome-product
MAP ：最低完成度但足够能让人惊艳的产品。现在这个时代，当你在考虑一个产品的发展（不管是实体的还是网站，还是 app 等等），你不应该只问自己「这是我能让这个产品可行的最基本的形态么？」这个一开始看起来好像是对的问题，但是当我们抛出以下的问题时你会发现现在都没办法这么做了。MAP 产品到底要做到多好，要看你的目标行业的竞争产品的情况，如果根本就没有什么竞争产品，那么MVP = MAP；如果已经有很多竞争者了，那么 MAP > MVP。

过腻了猫奴狗奴的生活，我想去机器人版的「动物世界」里看看
http://www.geekpark.net/news/227719
Festo 是一家德国的自动化公司，在过去的十几年里，他们陆续推出海鸥、企鹅、蝴蝶、蚂蚁、水母、蜻蜓、袋鼠等多款仿生机器人，涵盖了海洋生物、鸟类、昆虫、哺乳动物等。最近，Festo 又推出两种新型仿生机器人，一个是蝙蝠，另一个是蜘蛛。

傅盛：后互联网时代的商业机会和创新出路
https://mp.weixin.qq.com/s?__biz=MjM5NjgzMzkwMQ==&mid=2653646657&idx=1&sn=eacdf21ff9c57fd83278abf990701ebb
创业是一个非常复杂的课题，甚至于一个混沌的课题。这对创始人来说，尤其认知能力的要求，是极其苛刻的。面对未知的世界，我们永远要像小学生一样，保持好奇；面对新物种新规律，要像海绵一样，保持空杯，不断吸收。如同一位作者形容，每天扑在未知的知识，就像饥饿的人扑在面包上一样。另附：曾鸣：创始人最难迈过的坎是什么？

你愿为“自己无法享用的树荫”去种树吗
https://mp.weixin.qq.com/s?__biz=MjM5ODAyMjg3Ng==&mid=2650751755&idx=1&sn=d6c9edb0462725cfe5d718f35aadcb27
对于科学，我们需要耐得住寂寞，能不在意名利，我们要有足够的耐心，我们需要有人去做那些“吃饱了撑的”无用之事。“科学是神奇的。它是人类发现世界、探知万物——当然也包括了解我们自己的最好途径。”我们最欠缺的，是一种需要代代相传的精神：愿意为自己无法享用的树荫去种树。

– THE END –