FEX 技术周刊 - 2019/01/21

业界会议

2019 极客公园创新大会
http://if.geekpark.net/
GeekPark IF 2019 —— 看世界的改变、聊创新的本质、谈人和企业持续成长的方法论，希望他们会给你带来些「不一样的输入」，让你看到，你心里那个有可能带来改变的：「WHY NOT」。

深阅读

Facebook open-sources Spectrum 1.0.0 for better mobile image production
https://code.fb.com/developer-tools/spectrum/
As mobile camera hardware rapidly improves, our phones capture and store larger and larger files. Uploading these large files can eat up mobile data; it can take forever for them to load; and, sometimes, the files fail to load at all. To make the upload process more efficient, we developed Spectrum, an image processing library for Android and iOS. With Spectrum, we have improved the reliability and quality of image uploads at a large scale across our apps.

Full-Stack Development in the Era of Serverless Computing
https://medium.com/@dabit3/full-stack-development-in-the-era-of-serverless-computing-c1e49bba8580
We are entering an era where the front end is becoming increasingly more important. Front-end developers are now shipping robust full-stack applications using almost zero back end code. As technology progresses, abstractions get better. As you are about to see, being a front-end developer no longer limits you to only building the front-end of your application. Let me explain.

Augmented Reality and the Browser — An App Experiment
https://hacks.mozilla.org/2019/01/augmented-reality-and-the-browser%e2%80%8a-%e2%80%8aan-app-experiment/
We all want to build the next (or perhaps the first) great Augmented Reality app. But there be dragons! The space is new and not well defined. There aren’t any AR apps that people use every day to serve as starting points or examples. Your new ideas have to compete against an already very high quality bar of traditional 2d apps. And building a new app can be expensive, especially for native app environments. This makes AR apps still somewhat uncharted territory, requiring a higher initial investment of time, talent and treasure.

The world beyond React, Vue & Angular
https://areknawo.com/the-world-beyond-react-vue-angular/
If you’re into web development I’m betting that you’ve heard or read something like “React vs Vue vs Angular” comparison. It’s just so common that you can’t get around it. These MVC frameworks and UI libraries have become so popular that you can compare them to the jQuery level of popularity from a couple of years ago. When you’re building a complex web app or working somewhere where things like that are being made, you have almost definitely met or will meet one of these tools. That’s why in this article I would like to inspire you to explore the vast JS ecosystem and try out some other libraries and, in doing so, broaden your horizons, JavaScript knowledge and meet some new techniques and patterns on the way.

热修复、生态、混合工程，Flutter 产品路线图正式公布
https://zhuanlan.zhihu.com/p/55169974
Flutter 1.0 的发布 对我们来说是一个很重要的起点，长路漫漫，我们仍有很多工作要做。这里我们向大家公开我们的产品路线图（Roadmap）规划，一方面是保持开源项目的透明度，同时开发者们也可以通过我们的工作优先级以制定更适合的工程方案。以下几点是我们今年会着重关注的：核心和基础、易用性、生态系统、移动端之外的支持、动态更新、工具链。

从前后端分离到GraphQL，携程如何用Node实现？
https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247490300&idx=1&sn=5b6230e7d0d1c8120ee4b41e8f71fd35
在携程内部，Nodejs 也是应用广泛，从开发工具到 web 应用，从客户端到服务端，都能见到它的身影。我们也从最初用 Node.js 来完成前后端的架构分离到最近使用 GraphQL 来做微服务，机票部门在 Node.js 的应用探索上越走越宽。

大前端时代安全性如何做
https://segmentfault.com/a/1190000017899193
对于内容公司来说，数据的重要性不言而喻。比如你在做一个线教育平台，题目的数据很重要吧，但是被别人通过爬虫技术全部爬走了？这篇文章分享了在反爬取方面的一些经验。

浏览器往返缓存（Back/Forward cache）问题的分析与解决
https://efe.baidu.com/blog/bfcache-analysis-and-fix/
往返缓存（Back/Forward cache，下文中简称bfcache）是浏览器为了在用户页面间执行前进后退操作时拥有更加流畅体验的一种策略。该策略具体表现为，当用户前往新页面时，将当前页面的浏览器DOM状态保存到bfcache中；当用户点击后退按钮的时候，将页面直接从bfcache中加载，节省了网络请求的时间。但是bfcache的引入，导致了很多问题。

When And How To Use CSS Multi-Column Layout
https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/
The Multi-column Layout spec is often overlooked as we use Grid and Flexbox. In this article Rachel Andrew explains why it is different to other layout methods, and shows some useful patterns and sites which showcase it well. 另附：Web Standards: The What, The Why, And The How.

Creating Accessible SVGs.
https://www.deque.com/blog/creating-accessible-svgs/
There are plenty of reasons to use SVGs today including: Browser support, Code control, File size, Accessibility. Of course, this article will be focusing on accessibility, but it is good to know there are a lot of other benefits to using SVGs.

JavaScript Modules: From IIFEs to CommonJS to ES6 Modules
https://tylermcginnis.com/javascript-modules-iifes-commonjs-esmodules/
I’ve taught JavaScript for a long time to a lot of people. Consistently the most commonly under-learned aspect of the language is the module system. There’s good reason for that. Modules in JavaScript have a strange and erratic history. In this post we’ll walk through that history and you’ll learn modules of the past to better understand how JavaScript modules work today. 另附：Why I’ve stopped exporting defaults from my JavaScript modules.

What if we could verify npm packages?
https://hackernoon.com/what-if-we-could-verify-npm-packages-c2a319cff758
Reproducible steps for identifying unwanted and malicious code.

Porting 30K lines of code from Flow to TypeScript
https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/
We recently ported MemSQL Studio’s 30 thousand lines of JavaScript from using Flow to TypeScript. In this article, I describe why we ported our codebase, how it took place and how it has been working out for us. 附：译文

Why GraphQL is Taking Over APIs
https://webapplog.com/graphql/
In this and following posts I’ll share benefits of GraphQL why it became so popular. 另附：Lucid - A Chrome Developer Tool designed to help engineers debug React-GraphQL applications

Thought Experiment: Flutter in Go
https://divan.github.io/posts/flutter_go/
Flutter is written in Dart – programming language born in a Chrome browser and then escaped to the console land – and that made me think “hey, Flutter could have been easily implemented in Go as well”! Why not? Both Go and Dart were born inside Google (and share some approaches that make them great), both strongly-typed, compiled languages – in a slightly different turn of events, Go could definitely have been a choice for such an ambitious project as Flutter. And Go is much easier to explain to the person who has never been programming before. So let’s pretend Flutter is written in Go already. How would the code look like? 另附：Compiling Go to WebAssembly.

Empowering Data Science with Engineering Education
https://medium.com/airbnb-engineering/empowering-data-science-with-data-engineering-education-ef2acabd3042
Engineering education enables data scientists to better interface with engineering and ensures higher data quality.

Automating Datacenter Operations at Dropbox
https://blogs.dropbox.com/tech/2019/01/automating-datacenter-operations-at-dropbox/
As a company that manages our own infrastructure we need to be able to rapidly install new server capacity and ensure that the equipment entering our production environment is highly reliable. Prior to the creation and implementation of the Pirlo system, engineering personnel at Dropbox manually intervened in most aspects of server/switch provisioning and validation.

Looking Back at Google’s Research Efforts in 2018
https://ai.googleblog.com/2019/01/looking-back-at-googles-research.html
2018 was an exciting year for Google’s research teams, with our work advancing technology in many ways, including fundamental computer science research results and publications, the application of our research to emerging areas new to Google (such as healthcare and robotics), open source software contributions and strong collaborations with Google product teams, all aimed at providing useful tools and services. Below, we highlight just some of our efforts from 2018, and we look forward to what will come in the new year.

Operable Software
https://ferd.ca/operable-software.html
Operability and observability sure have led to a lot of blog posts around the web lately, and so this is my take on it. In this post, I’ll cover views on simplicity and complexity, how people actually approach their systems and form mental models of them, and how we should rather structure things if we want to make systems both observable and operable. Or put differently, how to start approaching Operator Experience.

新鲜货

SEE Conf & D2 会议资料
https://www.yuque.com/d2forum/content
https://www.yuque.com/seeconf/content

The future of TypeScript on ESLint
https://eslint.org/blog/2019/01/future-typescript-eslint
Several members of the ESLint team have been working on improving TypeScript compatibility over the past couple of years. That work focused mainly on the TypeScript parser, typescript-eslint-parser (and partly on eslint-plugin-typescript, which was not maintained by the ESLint team but had been maintained by Nicholas and James until recently). The Typescript parser would undoubtedly become the centerpiece of the TypeScript-in-ESLint story going forward; as such, we wanted to make sure that it would be properly maintained.

Animating URLs with Javascript and Emojis
http://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/
You can use emoji (and other graphical unicode characters) in URLs. And wow is it great. But no one seems to do it. Why? Perhaps emoji are too exotic for normie web platforms to handle? Or maybe they are avoided for fear of angering the SEO gods?

Modern publications with Gatsby & Ghost
https://www.gatsbyjs.org/blog/2019-01-14-modern-publications-with-gatsby-ghost/
There has been a lot of progress around static site generators, front end frameworks and API-centric infrastructure in recent years. At Ghost, we’ve been building open source technology for modern publishing for over 5 years and as a developer-centric team, the momentum around static sites didn’t go unnoticed.

Scratch 3.0’s new programming blocks, built on Blockly
https://developers.googleblog.com/2019/01/scratch-30s-new-programming-blocks.html
Blockly is a library that makes it easy for developers to add block programming to their apps. By 2015, many of the web’s visual coding activities were built on Blockly, through groups like Code.org, App Inventor, and MakeCode. Today, Blockly is used by thousands of developers to build apps that teach kids how to code.

Storybook 4.1: Need for Speed
https://medium.com/storybookjs/storybook-4-1-need-for-speed-b05fd5f1e83d
Up to 300% faster, compatibility, convenience.

Anime.js 3.0
https://animejs.com/
Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

AlaSQL
https://github.com/agershun/alasql
AlaSQL - is an open source SQL database for JavaScript with a strong focus on query speed and data source flexibility for both relational data and schemaless data. It works in the web browser, Node.js, and mobile apps.

wpk
https://github.com/wpk-cli/wpk
a friendly, intuitive, intelligent, and unofficial CLI for webpack

code-to-graph
https://github.com/crubier/code-to-graph
Transforms code (JS) into graphs (graphviz, mermaid flowchart, …).

Count the number of people around you by monitoring wifi signals
https://github.com/schollz/howmanypeoplearearound
howmanypeoplearearound calculates the number of people in the vicinity using the approximate number of smartphones as a proxy (since ~70% of people have smartphones nowadays). A cellphone is determined to be in proximity to the computer based on sniffing WiFi probe requests. Possible uses of howmanypeoplearearound include: monitoring foot traffic in your house with Raspberry Pis, seeing if your roommates are home, etc.

Writing an OS in Rust (Second Edition)
https://os.phil-opp.com/
This blog series creates a small operating system in the Rust programming language. Each post is a small tutorial and includes all needed code, so you can follow along if you like. Latest post: Introduction to Paging. 另附：Announcing Rust 1.32.0.

设计

原来日本设计还能这么萌！53岁老顽童的“脑洞之作”风靡日本！
https://www.uisdc.com/brain-hole-works
平淡无奇的红绿灯，摇身一变竟然变成了枫叶的形状？绿、黄、红三色正好对应不同季节下枫叶的颜色，有了它就算一路碰到红灯，情绪也不会暴躁咯。那些乘电梯永远不看脚下的小孩，银杏落叶铺成的电梯，足够吸引你的目光了吧？这玩意儿可比「注意脚下」的标语好使多了。以上这些脑洞大开的设计全都来自于日本GOES公司创始人前田贤刚，他是个53岁的老顽童，低调到日站君只能找到他的这么一张小照片。虽然公司总共就5个人，但却和资生堂、奥林巴斯、加拿大观光局等大客户都合作过。看了他们的作品之后，或许会颠覆你对日本设计的认知。

看起来很高大上的设计思维到底是什么？
https://www.uisdc.com/what-is-design-thinking
提到设计思维，我们大部分时间会把它理解成「用设计师的思维去设计」，但其实它并非一种思维，而是一种方法论。Interaction Design Foundation 把「设计思维」（DesignThinking）定义为一种可反复使用的模式，并要遵循「以人为本」的核心去了解用户，挑战老旧的思想和重新定义问题所在，并通过五个程序：共情（Empathise）、确定（Define）、形成概念（Ideate）、原型（Prototype）、测试（Test）来找出适当的解决方案。

UX in the Age of Personalization
https://alistapart.com/article/emerging-ux-role-in-personalization
In this piece, we will take a more detailed look at the UX practitioner’s emerging role in personalization design: from influencing technology selection, to data modeling, to page-level implementation. And it’s high time we did.

10 frameworks to help you measure success in design
https://uxdesign.cc/how-to-measure-success-in-design-f63f96a0c541
In the following, I put together 10 frameworks about metric settings that I’ve seen being used or discussed in the industry. I’ll start with the popular business-oriented metrics, moving on to experience-oriented ones, and end with the lesser-known-yet-important social impact metrics. Hopefully, these can serve as inspirations for product teams to draft a meaningful story of success.

6 Interesting Augmented Reality Concepts
https://uxplanet.org/6-interesting-concepts-for-ar-experiences-359193eb1ad5
In this article, I want to share a few innovative & inspiring examples of AR experiences. All concepts that you find below have something in common — they deliver real value to users either by simplifying the routine operations or by creating entirely new experiences.

产品及其它

Re-decentralizing the Web, for good this time
https://ruben.verborgh.org/articles/redecentralizing-the-web/
Originally designed as a decentralized network, the Web has undergone a significant centralization in recent years. In order to regain freedom and control over the digital aspects of our lives, we should understand how we arrived at this point and how we can get back on track. This chapter explains the history of decentralization in a Web context, and details Tim Berners-Lee’s role in the continued battle for a free and open Web. The challenges and solutions are not purely technical in nature, but rather fit into a larger socio-economic puzzle, to which all of us are invited to contribute. Let us take back the Web for good, and leverage its full potential as envisioned by its creator. 另附：万维网之父：30年以来，世界如何失去最初的互联网精神？

Beyond the interface
https://thomasbyttebier.be/blog/brands-beyond-the-interface
As much as sameness in digital is real, it shouldn’t be too much of a problem. Standardization of interfaces does bring clear consumer advantages. On top of that, digital has brought brands an extremely rich means of expression. This goes way beyond the interface. Brands should take full advantage of this by creating memorable digital experiences. A powerful way to reach memorability is by evoking feelings.

王慧文：很少人知道自己在愚昧之巅
https://mp.weixin.qq.com/s/h16rUrKHXUNyH8u-ND4Mvw
美团，相信很多人都在用，但这家公司身上有哪些你平常看不到的更深层的东西？这些东西又能给我们带来哪些不一样的启发呢？极客公园创始人张鹏和美团联合创始人、高级副总裁王慧文展开了一次深刻的对话，对这些问题进行了回答。透过这次对话，让我们看懂美团到底是一个什么样的组织，又正在创造什么样的价值。

– THE END –