FEX 技术周刊 - 2018/12/17

业界会议

[报名]SEE Conf 2019 - 蚂蚁金服体验科技大会 - 杭州
https://seeconf.antfin.com/

深阅读

A Modern Terminal-Based Development Environment
https://www.sitepen.com/blog/2018/12/12/a-modern-terminal-based-development-environment/
In this article I’ll go over some tools that I find useful in my own terminal based environment. As such, this article will focus on Macs, although most of the tools discussed here are also available on Linux.

19 ways to become a better Node.js developer in 2019
https://medium.com/@me_37286/19-ways-to-become-a-better-node-js-developer-in-2019-ffd3a8fbfe38
I’ve compiled 19 skills and topics you might find valuable in 2019. Please don’t get overwhelmed — neither I nor most other developers are familiar with every single topic. These are just the exciting things on my radar, and the JavaScript horizon is never-ending. 另附：Node.js API and Web Frameworks for 2019、A Recap of Frontend Development in 2018、 The State of the Octoverse: new open source projects in 2018.

Flutter will change everything
https://medium.com/coding-with-flutter/flutter-will-change-everything-and-apple-wont-do-anything-about-it-f495e7087802
I share my thoughts on why Flutter is already a superior technology for front-end development, and will be even more so in the future. Just to be clear: The opinions in this article are entirely my own and not endorsed by Google. More in detail, we’re going to look at: The last 10 years of iPhone history and the Apple ecosystem; What makes Flutter more productive; A direct Flutter-iOS comparison by example. 另附：Flutter will change everything: a follow up.

Is there a cold war between Android and Chrome because of PWAs?
https://medium.com/@firt/is-there-a-cold-war-between-android-and-chrome-because-of-pwas-e50a7471056c
Chrome wants PWAs, but it seems it’s fighting against a wall when trying to integrate them with the Android ecosystem. New APIs and features are great! but if we can’t improve the distribution channel, it’s not a so worthwhile effort. 另附：Flutter will change everything: a follow up.

面向不确定性的软件设计几点思考
https://mp.weixin.qq.com/s?__biz=MzIzOTU0NTQ0MA==&mid=2247488951&idx=1&sn=55485804760e3aff54bfc977176bc4bb
随着软件形态的变化，过去非常高效的系统架构和组织形态遇到了全面的挑战。因为我们所处的环境已经从量变到质变，突破临界点，产生了本质的不同。阿里巴巴就是这个过程中的典型代表。从过去单一的电商业务演变成了复杂的经济体，没有了确定性的业务边界，蓬勃发展的业务不可预测。针对这些问题，我们对软件设计产生了几点基本思考。

百度发布智能小程序开发方案
https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247490098&idx=1&sn=64db463561039ed05843a1ca3cde3375
2018 百度·智能小程序学院首场线下公开课在北京举行，百度官方数据显示，自今年 7 月份百度 AI 开发者大会以来，百度智能小程序月活已经过了 1.5 亿，值得一提的是，智能小程序已经在 GitHub 上开源，百度也即将成立开源联盟，促进小程序生态的发展和建设。

How Does setState Know What to Do?
https://overreacted.io/how-does-setstate-know-what-to-do/
When you call setState in a component, what do you think happens?

Modernizing the Web Playback UI
https://medium.com/netflix-techblog/modernizing-the-web-playback-ui-1ad2f184a5a0
Since 2013, the user experience of playing videos on the Netflix website has changed very little. During this period, teams at Netflix have rolled out amazing video playback features, but the visual design and user controls of the playback UI have remained the same.Over the past two years, the Web UI team has had a long running goal to modernize the user experience of playback for our members. 另附：Implementing the Netflix Media Database.

Better Reusable React Components with the Overrides Pattern
https://medium.com/@dschnr/better-reusable-react-components-with-the-overrides-pattern-9eca2339f646
The solution we came up with is called the “Overrides” pattern. It’s still very much evolving, but we’ve been impressed with the products developers are building with it so far. We wanted to share it with the broader community in hopes that it either inspires other component library authors or at least raises awareness about the current shortcomings in component reusability. Read on to see how it works.

Redefining the Technical Possibilities of CSS
https://noti.st/rachelandrew/Au3wK3/making-things-better-redefining-the-technical-possibilities-of-css#sH5V09N
In this talk, Rachel will look at the things coming into browsers right now which change the way we see web design. CSS subgrids allowing nested grids to use the track definition of their parent; logical properties and values moving the web away from the physical dimensions of a computer screen; screen experiences which behave more like an app, or even paged media, due to scroll snapping and multidimensional control. By understanding the new medium of web design we can start to imagine the future, and even help to shape it.

An Introduction and Guide to the CSS Object Model (CSSOM)
https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/
In this guide, I’m going to go through many of the most important features of the CSSOM, starting with stuff that’s more commonly known, then moving on to some more obscure, but practical, features. 另附：Managing Flow and Rhythm with CSS Custom Properties.

Introducing Background Fetch
https://developers.google.com/web/updates/2018/12/background-fetch
So, what if you need to download something that might take a long time, like a movie, podcasts, or levels of a game. That’s what Background Fetch is for. Background Fetch is a web standard implemented behind the Experimental Web Platform features flag in Chrome 71. 另附：Public and private class fields, Quicklink - Faster subsequent page-loads by prefetching in-viewport links during idle time.

Performance Anti-Patterns: Base64 Encoding
https://calendar.perfplanet.com/2018/performance-anti-patterns-base64-encoding/
But why is this an anti-pattern? We’re reducing requests, right? As always, there is a price to pay for inlining content into your HTML or CSS. Base64-encoded files are generally 20-30% larger than if the file were simply downloaded – which, depending on the file size, may alone make the cost too high in the delay to load the page. Secondly, once a file is Base64-encoded and embedded into HTML or CSS they become render blocking -since they must be downloaded before the CSS can be rendered and displayed.

JavaScript growth and third parties
https://speedcurve.com/blog/javascript-growth/
In the early days back in 2010, the amount of first and third party JavaScript was about the same, whereas now third party JavaScript is more than twice that of first party. A possible explanation for this is the greater availability of and reliance on third party JavaScript across the Web. Third party JavaScript is a significant part of today’s websites and should be watched closely. If you don’t have performance budgets setup to watch your site’s use of third party JavaScript, you should do that now.

Cache API 101
https://bitsofco.de/cache-api-101/
The cache API allows us to store these requests and responses locally in the browser. The cache API was created as part of the service worker specification to “allow authors to fully manage their content caches for offline use”. In my tutorial, Going Offline First, I demonstrated how I used the cache API to convert this blog to an offline-first strategy, enabling readers to save articles for offline. If you want to see a real-world use case of cache, I would suggest you watch that. In this article, I want to go over the cache API terminology and how to use the API methods.

Our learnings from adopting GraphQL A Marketing Tech Campaign
https://medium.com/netflix-techblog/our-learnings-from-adopting-graphql-f099de39ae5f
In an earlier blog post, we provided a high-level overview of some of the applications in the Marketing Technology team that we build to enable scale and intelligence in driving our global advertising, which reaches users on sites like The New York Times, Youtube, and thousands of others. In this post, we’ll share our journey in updating our front-end architecture and our learnings in introducing GraphQL into the Marketing Tech system. 另附：Graphcool - GraphQL Backend Development Framework、GraphQL Summit 2018 - Opening Keynote

Open-sourcing PyText for faster NLP development
https://code.fb.com/ai-research/pytext-open-source-nlp-framework/
To make it easier to build and deploy natural language processing (NLP) systems, we are open-sourcing PyText, a modeling framework that blurs the boundaries between experimentation and large-scale deployment. PyText is a library built on PyTorch, our unified, open source deep learning framework.

The Good, the Bad and the Ugly of Enterprise Open Source
https://www.nearform.com/blog/the-good-the-bad-and-the-ugly-of-enterprise-open-source/
This time last month I was at NodeConfEU and was gutted that I had to leave early. But thankfully, all the sessions are available online for my (and your) viewing pleasure. I was looking back over them last week and came across this great discussion on Enterprises, Node.js and open source: the good, the bad and the ugly with Ahmad Nassri (Telus), Paul Savage (NearForm) and Gordon Suttie (EY). 另附：Kafka 团队修改 KSQL 开源许可，怒怼云厂商.

Manifesto for Minimalist Software Engineers
http://minifesto.org/
Pareto’s law states that 80% of the results come from 20% of features (effort) of your application. Bear this in mind when planning the next scrum/delivery. The best engineers are those who can estimate the effort of new requirements and they are the only with enough information to refuse the 80% that is not in the optimal next scope.

新鲜货

Rendora
https://github.com/rendora/rendora
Rendora is a dynamic renderer to provide zero-configuration server-side rendering mainly to web crawlers in order to effortlessly improve SEO for websites developed in modern Javascript frameworks such as React.js, Vue.js, Angular.js, etc… Rendora works totally independently of your frontend and backend stacks. 另附：A crash course on serverless-side rendering with React.js, Next.js and AWS Lambda、Chromium Binary for AWS Lambda.

Firefox 64 Released
https://hacks.mozilla.org/2018/12/firefox-64-released/
Multiple tab selection, CSS Scrollbars, WebVR 1.1 in macOS…

They Scaled YouTube — Now They’ll Shard Everyone with PlanetScale
https://techcrunch.com/2018/12/13/planetscale/
Vitess is a relational data storage system (that horizontally scales MySQL) that helped YouTube overcome a lot of scaling issues and its creators have now launched PlanetScale, a company aiming to “turbocharge MySQL in the cloud” with Vitess.

PracticalAI
https://github.com/GokuMohandas/practicalAI
Empowering you to use machine learning to get valuable insights from data. Implement basic ML algorithms and deep neural networks with PyTorch. Run everything on the browser without any set up using Google Colab. Learn object-oriented ML to code for products, not just tutorials.

Announcing GitLab Serverless
https://about.gitlab.com/2018/12/11/introducing-gitlab-serverless/
The true value of serverless is best realized via a single-application DevOps experience – that’s why we’re launching GitLab Serverless. GitLab 11.6 users will get access to a new, alpha ‘serverless’ offering that will let you build and manage serverless workloads from within the GitLab UI.

Glider.js
https://nickpiscitelli.github.io/Glider.js/
A blazingly fast, crazy small, fully responsive, mobile-friendly, dependency free, native scrolling list with paging controls!

Ember 3.6 Released
https://www.emberjs.com/blog/2018/12/13/ember-3-6-released.html
The Ember project is releasing version 3.6 of Ember.js, Ember Data, and Ember CLI. Highlights include public API support for ES6 classes and two new RouterService methods.

billboard.js 1.7.0 release!!
https://medium.com/@alberto.park/billboard-js-1-7-0-release-4944a2eb59fe
billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+.

Shapy
https://shapy.app/
Shapy is a gradient shape editor that helps you discover and explore the power of CSS gradients.

JSON Generator
https://next.json-generator.com/
JSON Generator was created in order to help with this. It provides an opportunity generate any data and in any quantity. Edit template, click “Generate” and you’re done.

Pika - earch modern module esm packages on npm
https://www.pikapkg.com/
Find modern packages on npm. Get faster, smaller JavaScript bundles.

deno
https://deno.land/
Deno is a program for executing JavaScript and TypeScript outside of the web browser.

Wolkenkit - A CQRS and event-sourcing framework for JavaScript and Node.js
https://www.wolkenkit.io/
Wolkenkit is a CQRS and event-sourcing framework for JavaScript and Node.js which fits perfectly with domain-driven design (DDD). It provides the technical foundation for your application, including an event-store and a scalable real-time API. This allows you to focus on what’s essential: Solving actual real-world problems in no time. 附：Introducing wolkenkit 3.0

Red Hat contributes etcd, the cornerstone of Kubernetes, to the Cloud Native Computing Foundation
https://www.redhat.com/en/blog/red-hat-contributes-etcd-cornerstone-kubernetes-cloud-native-computing-foundation
Red Hat is thrilled to announce our contribution of etcd, an open source project that is a key component of Kubernetes, and its acceptance into the Cloud Native Computing Foundation (CNCF), a vendor-neutral foundation housed under The Linux Foundation to drive the adoption of cloud native systems. 另附：The History of etcd

react.christmas
https://react.christmas/
There’s a React-themed advent calendar that’s currently live and presenting a bite-sized slice of React wisdom each day.

Winter Bash 2018
https://stackoverflow.blog/2018/12/12/winter-bash-2018-2/
Starting now (December 12, 2018) and going through to January 1, 2019 we are officially in Winter Bash season! The way to earn these special hats is by completing challenges on participating sites.

设计

百度 - 聚焦内容的设计语言
http://mux.baidu.com/958
百度拥有以搜索、Feed双引擎驱动，容纳了 知道、百科、贴吧、地图等等众多产品线的“百度APP”，各产品线又分别拥有亿级用户的独立APP。从内容丰富度和体验流量的复杂性而言，不亚于一座大型城市的交通网络。百度用户体验中心（UXC）为此重构了百度全线移动产品的基础交互框架，并设计了具有包容性和百度独特性的品牌风格、设计语言。在2017-2018年，这个以“聚焦于内容为理念的设计语言”，在内部项目代号“高级感”。高级感在交互及设计层面，最核心的2个理念是：理性布局、极简克制。

Designing for Interaction Modes
https://alistapart.com/article/designing-for-interaction-modes
The best experiences result from designers matching the way the computer behaves with the way our users are thinking, feeling, and interacting. This is what user experience design is all about. And yet, because of pressures, competing priorities, and industry trends, interaction modes are often an afterthought.

Great Interfaces Are Made Of Good Typography
https://blog.marvelapp.com/great-interfaces-made-good-typography/
Digital interfaces make a huge impact in our lives. We frequently use websites or digital applications to accomplish certain goals. Indeed, when interacting with an interface, we are surrounded by typography and our experience is driven by the words and messages we read and understand. In one of his articles, Oliver Reichenstein confirms the importance of typography in all websites with the following statement: “Web Design is 95% Typography.” The purpose of this article is to help designers and developers to understand how to work with typefaces, in order to create great interfaces.

Why Yin Yang is the most meaningful design in the world
https://uxdesign.cc/why-yin-yang-is-the-most-meaningful-design-in-the-world-1488d6738fd
A design should tell a story so that users can easily connect to what it represents. People today easily overlook the true meaning of a logo. I firmly believe that there is no better way to represent harmony, a balance between good and bad than Yin-Yang. 另附：日本的设计水平为什么那么高、Demystifying UX Research and the Science of Design、Modality Is the One UX Concept That Most Designers Don’t Fully Understand

Instagram Concept: Allowing For More Self-Curated Content
https://blog.prototypr.io/instagram-concept-allowing-for-more-self-curated-content-40df4397f091
While Instagram began as a way to instantly share snapshots of life, it has matured to be much more than that. With its drastic changes over the years, it has become a far-reaching platform for all: businesses accounts, personal accounts, content creators, content seekers, and many more. Nonetheless, the question is: Is Instagram the best it could be at this moment? Focusing on the Explore Page, I thought of ideas to better the experience for all users.

10 Most Awesome Hi-fi Prototypes of 2018
https://blog.prototypr.io/10-most-awesome-hi-fi-prototypes-of-2018-35527725e0a3
另附：Our favorite UX initiatives this year、A Collection of 10 Inspiring & Refreshing Banking and FinTech UI/UX Designs、2019 UI and UX Design Trends、What’s the best book on modern UI/UX.

产品及其它

The State of Technology at the End of 2018
https://stratechery.com/2018/the-state-of-technology-at-the-end-of-2018/
This article is a bit of an annual tradition: in mid-December I summarize the state of technology,and appropriately enough, this year’s edition coincides with a tech executive testifying in front of Congress.

How Sketch Took on Adobe by Making a Faster, Leaner, Cheaper Image Editor
https://producthabits.com/how-sketch-took-on-adobe-by-making-a-faster-leaner-cheaper-image-editor/
Since launching in a private beta in 2008, Sketch has amassed a relatively small but fanatically loyal following. Designed to be as lightweight and responsive as possible, Sketch lacks many of the bells and whistles favored by design industry heavyweight Adobe and its industry-leading product, Illustrator, but has positioned itself as the go-to tool for user interface (UI) designers and other creative professionals working in demanding, highly specialized industries. 另附：Who wins the fight between Figma and Adobe XD?.

JIRA is an antipattern
https://techcrunch.com/2018/12/09/jira-is-an-antipattern/
Simply ceasing to treat JIRA as the primary map and model of project completion undercuts a great deal of its implicit antipatternness. Use it for tracking iterative development and bug fixes, by all means. It’s very good at that. But it is a tool deeply ill-suited to be the map of a project’s overall vision or infrastructure, and it is never the source of truth — the source of truth is always the running code. In software, as in art, the micro work and the macro vision should always be informed by one another. Let JIRA map the micro work; but let good old-fashioned plain language describe the macro vision, and try to pay more attention to it. 另附：Why You Should Never, Ever Use Quora.

千万不要忽视小城青年丨下沉市场消费切片
https://mp.weixin.qq.com/s?__biz=MzUyMDQ5NzI5Mg==&mid=2247501197&idx=1&sn=cbb679ac5dd54da062d2f81a4a6f4f0b
为什么说下沉市场潜力无限？这片蓝海中是什么样的消费人群？他们的消费习惯有什么不同？复旦大学MBA、EMBA授课教授孙金云博士和他的团队走访了三个典型的下沉市场，通过深度调研和抽样问卷，带来关于下沉市场消费人群的洞察。

解读张小龙2018年会语录
https://mp.weixin.qq.com/s?__biz=MjM5NzYxMzk4MQ==&mid=2649331265&idx=1&sn=b0bb5dd3b056f92426156a3644f781f7
最喜欢这个观点：善良比聪明更重要，AI可以比你更聪明，但是你比AI更善良。

上半场是互联网的主场，下半场是传统业的回归
https://mp.weixin.qq.com/s?__biz=MzIxNTAzNzU0Ng==&mid=2654615395&idx=1&sn=b8b81fb6dd995e4c21f13052d23b28a0
过去的二十年，互联网发展的第一个阶段，所有企业的价值源泉是流量。今天所有互联网领先的企业，从淘宝、微信、到谷歌，都是基于流量产生的巨大价值。但是，我们已经能感受到简单的流量效应已经无法再带动社会继续产生巨大的价值创新。流量为王之后，我们需要新的玩法。这个游戏规则，曾鸣将其定义为“协同效应”，这将是未来任何企业竞争的价值源泉。协同效应的本质是相对于工业时代比较传统的、封闭的、线性的供应链管理体制，整个社会用一种多角色、大规模、实时的社会化协同方式，基于网络来创造新的价值。这种价值创造，就是协同效应。

– THE END –