FEX 技术周刊 - 2018/07/09

业界会议

2018百度AI开发者大会 http://create.baidu.com/ 人类历史上有太多里程碑式的创新，源起于微不足道的梦想，最终成长为改变世界的力量。而在这个AI时代，每一个梦想都更有机会成为现实，每一位开发者的创新与现实仅有一步之遥。2018年夏天，百度诚邀全球开发者，发现改变世界的力量，让我们一起 Create More。

ArchSummit2018-深圳站 https://sz2018.archsummit.com/ ArchSummit聚焦业界强大的技术成果，秉承“实践第一、案例为主”的原则，展示先进技术在行业中的最佳实践，以及技术在企业转型、发展中的推动作用。旨在帮助技术管理者、CTO、架构师做好技术选型、技术团队组建与管理，并确立技术对于产品和业务的关键作用。

深阅读

Web Components in 2018 https://www.sitepen.com/blog/2018/07/06/web-components-in-2018/ Adoption and hype around Web Components have been extended and undulating. That said, as the Web Component specifications gain better adoption, the need for polyfills should gradually dissolve, keeping them leaner and faster for users. The Shadow DOM allows developers to write simple, scoped CSS which is arguably easier to manage and generally better for performance. Custom Elements give a unified methodology for defining components that can (in theory) get used across codebases and teams.

Vue.js: the good, the meh, and the ugly https://medium.com/@Pier/vue-js-the-good-the-meh-and-the-ugly-82800bbe6684 Moving from React to Vue, two years later. Picking up new frameworks and libraries is exciting but also stressful. Even after some evaluation you never really know what skeletons you’re going to find out down the road. My honeymoon period is long over. After about 2 years of using Vue almost daily I can finally write about it with some perspective. 另附：Building Mobile Apps With Capacitor And Vue.js.

What Is Redux: A Designer’s Guide https://www.smashingmagazine.com/2018/07/redux-designers-guide/ Do you know Redux’s real power is beyond managing the state? Do you want to design with an understanding of how Redux works in mind? Let’s dig deeper into what Redux can do, why it does its things, what the downsides are, and how it relates to design.

React Native: A retrospective from the mobile-engineering team at Udacity https://engineering.udacity.com/react-native-a-retrospective-from-the-mobile-engineering-team-at-udacity-89975d6a8102 The mobile team here at Udacity recently removed the last features in our apps that were written with React Native. We’ve received numerous questions regarding our usage or React Native and why we’ve stopped investing in it. In this post, I hope to answer the majority of the questions we’ve received and give insight into: What is the size & makeup of our particular team? Why did we try React Native in the first place? What was the reason for removing it? What worked? What didn’t? 另附：Would Airbnb Have Fared Better With NativeScript Instead of React Native、Releasing 0.56 · React Native.

前端遇上Go: 静态资源增量更新的新实践 https://tech.meituan.com/fe_and_golang.html 美团金融的业务在过去的一段时间里发展非常快速。在业务增长的同时，我们也注意到，很多用户的支付环境，其实是在弱网环境中的。大家知道，前端能够服务用户的前提是 JavaScript 和 CSS 等静态资源能够正确加载。如果网络环境恶劣，那么我们的静态资源尺寸越大，用户下载失败的概率就越高。根据我们的数据统计，我们的业务中有2%的用户流失与资源加载有关。因此每次更新的代价越小、加载成功率越高，用户流失率也就会越低，从而就能够变相提高订单的转化率。

实施前端微服务化的六七种方式 https://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652975949&idx=1&sn=c36387188283dd4fae52257357541729 微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是，这些前端应 用可以独立运行、独立开发、独立部署。以及，它们应该可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。

科普文：服务器上如何 Node 多版本共存 https://yuque.com/egg/nodejs/node-multi-versioning 很多公司的服务器环境没有做隔离，就是全局安装一个 Node.js Runtime，一般很少升级。nvs / nvm 等可以用来切换版本，但无法同时共存。而且一般服务器不允许你随意升级。因此很多同学都会很痛苦：「都 8012 年了，还是 Node 4.x 甚至 0.x 简直想死！」时至今天，最好的办法就是 Docker。但奈何很多小公司还处于水深火热之中。本文将介绍下我们很早前就使用的一套方案，可以完美解决非 Docker 情况下 Node 多版本共存问题。科普文：为什么不能在服务器上 npm install

W3C重点报告发布，综述2018年发展路线图 https://mp.weixin.qq.com/s/o0EnLmcCX1FvjIe3NbutJA 这份报告整合了W3C近期工作亮点，综述了W3C对现有工作的优化、改进、创新、孵化、研究，以及2018年的发展路线图。W3C在实现对技术和功能的再次核心创新的同时，不断对Web进行扩展以迎接新的机遇和挑战。诸多领域的重大进展都展现着W3C与Web社区的巨大活力。我们可以看到Web新技术的不断成熟和进一步发展。

华为快应用引擎技术架构详解 https://mp.weixin.qq.com/s/JdNJifhpkGzd0VpLZhN6Eg 快应用是一种基于手机硬件平台的新型应用形态，无需安装，即点即用，又兼具原生应用体验（性能、系统整合、交互等）。同时，快应用在诞生之初就在开发规范、能力接入、开发者服务等层面实现了手机厂商间的标准化统一，极大地降低开发者的适配成本。

Get Better Type Checking in JavaScript with the Maybe Type https://blog.bitsrc.io/get-better-type-checking-in-javascript-with-the-maybe-type-e7f70b23b505 Maybe type is a popular abstraction for defining values that may or may not exist. It encapsulates the type checking and guards our code against any error or bugs caused by the missing values. In this post, I will show how to use Maybe and keep your app readable and maintainable. Let’s dive in.

Pointer events with React — The why, how, what? https://medium.com/@wesharehoodies/pointer-events-with-react-the-why-how-what-617a5b51dbb2 Back in the good old days we only had a mouse and listening for events was simple. The web content assumed the user’s pointing device will be a mouse. Nowadays we have many devices which don’t correlate to having a mouse, like phones with touch surface or pens. How can we listen for events if the user doesn’t have a mouse?

Resilient, Declarative, Contextual https://keithjgrant.com/posts/2018/06/resilient-declarative-contextual/ Today I want to take a different tack. I want to look at three key characteristics of CSS that set it apart from conventional programming languages: it’s resilient; it’s declarative; and it’s contextual. Understanding these aspects of the language, I think, is key to becoming proficient in CSS.

Clearfix: A Lesson in Web Development Evolution https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/ The web community has, for the most part, been a spectacularly open place. As such, a lot of the best development techniques happen right out in the open, on blogs and in forums, evolving as they’re passed around and improved. I thought it might be fun (and fascinating) to actually follow this creative exchange all the way through. To take a look at a popular CSS trick, the clearfix, and find out exactly how a web design technique comes to be.

Building a Snipping Tool with Electron, React and Node.js https://quantizd.com/building-a-snipping-tool-with-electron-react-and-node-js/ In this tutorial, I’ll show how to build a snipping tool using desktopCapturer module. We’ll use React for building our application’s user interface and Nodejs as a backend server for uploading snipped images.

A Real-World WebAssembly Benchmark https://pspdfkit.com/blog/2018/a-real-world-webassembly-benchmark/ Rendering PDF documents is a complex task: The format is 25 years old and has many edge cases. It wouldn’t be feasible for us to rewrite the equivalent of 500,000 lines of C++ code to JavaScript, but technologies such as WebAssembly and asm.js allow us to use the same codebase in a browser, delivering a consistent level of high-fidelity rendering and parsing of PDF documents everywhere. Performance of the WebAssembly code has been a focus for us since day one, and it’s amazing to see the entire industry move toward a shared goal: making WebAssembly fast. This starts with optimizing WebAssembly startup time, compiler improvements, and continuous browser upgrades.

How to drop 10 million packets per second https://blog.cloudflare.com/how-to-drop-10-million-packets/ Internally our DDoS mitigation team is sometimes called “the packet droppers”. When other teams build exciting products to do smart things with the traffic that passes through our network, we take joy in discovering novel ways of discarding it. Being able to quickly discard packets is very important to withstand DDoS attacks. Dropping packets hitting our servers, as simple as it sounds, can be done on multiple layers. Each technique has its advantages and limitations. In this blog post we’ll review all the techniques we tried thus far.

A one size fits all database doesn’t fit anyone https://www.allthingsdistributed.com/2018/06/purpose-built-databases-in-aws.html A common question that I get is why do we offer so many database products? The answer for me is simple: Developers want their applications to be well architected and scale effectively. To do this, they need to be able to use multiple databases and data models within the same application.

The Not-So-Dark Art Of Designing Database Indexes: Reflections From An Average Software Engineer https://www.bennadel.com/blog/3467-the-not-so-dark-art-of-designing-database-indexes-reflections-from-an-average-software-engineer.htm What I eventually came to realize, after years of impostor syndrome, was that database index design is simply not that mysterious: If you need to access data quickly, you index it. If the performance of data access isn’t a concern, you don’t index it. That’s 90-percent of what you need to know about database indexing

Rules of optimization http://www.humus.name/index.php?page=News&ID=383 Basically Programming Wisdom (which btw often is a great sources for actual programming wisdom) posted a quote that basically suggested more or less that there’s never a good time to think about performance. Even experts should defer it until later! This is way worse advice than your usual “premature optimization is the root of all evil” tirade. The premature optimization at least addresses something that can be a bit of a problem, i.e. that programmers go ahead and obfuscate code in order to make it faster, without even looking at whether the code had any performance problem to begin with or verifying that the new code actually is any faster, and in the process of doing this introducing bugs and reducing readability.

Timsort — the fastest sorting algorithm you’ve never heard of https://hackernoon.com/timsort-the-fastest-sorting-algorithm-youve-never-heard-of-36b28417f399 Timsort: A very fast , O(n log n), stable sorting algorithm built for the real world — not constructed in academia.

Kubernetes 1.11: a look from inside Google https://cloudplatform.googleblog.com/2018/07/kubernetes-1-11-a-look-from-inside-Google.html With the release of 1.11, let’s take a look at the core Kubernetes work that Google is driving, as well as some of the innovation we’ve built on Kubernetes’ foundations in the last three months.

Democratizing APIs with Natural Language Interfaces https://www.microsoft.com/en-us/research/blog/democratizing-apis-with-natural-language-interfaces/ We have been studying natural language interfaces to APIs (NL2APIs). Different from general-purpose NLIs like virtual assistants, we examined how to build NLIs for individual web APIs, for example, the API to a calendar service. Such NL2APIs have the potential to democratize APIs by helping users communicate with software systems. They can also address the scalability issue of general-purpose virtual assistants by allowing for distributed development.

新鲜货

Announcing npm.community https://blog.npmjs.org/post/175587538995/announcing-npmcommunity I am pleased to announce that npm is transitioning its public issue trackers from GitHub to a Discourse site at npm.community. This will allow us to give the community a single place to report bugs that impact npm, regardless if they’re on the website, in the command line tool or in the registry itself.

Let’s celebrate Hugo’s 5th birthday https://gohugo.io/news/lets-celebrate-hugos-5th-birthday/ How a side project became one of the most popular frameworks for building websites.

Office UI Fabric https://developer.microsoft.com/en-us/fabric The official front-end framework for building experiences that fit seamlessly into Office and Office 365.

Rogue https://github.com/alidcastano/rogue SSR for React that’s invisible (zero configuration!) and quick (no Webpack!)

React From Zero https://github.com/kay-is/react-from-zero A simple (99% ES2015 less) tutorial for React. Everything runs in the browser without a manual pre-compilation. 另附：Formik - Build forms in React, without the tears.

Rete.js https://github.com/retejs/rete Rete is a modular framework for visual programming. Rete allows you to create node-based editor directly in the browser. You can define nodes and workers that allow users to create instructions for processing data in your editor without a single line of code.

pdfshift https://pdfshift.io/?tab=javascript Convert HTML to PDF online with PDFShift’s lightning-fast and powerful API

LayoutIt! https://www.layoutit.com/grid CSS Grid Layout Interface Builder

WebSub https://www.w3.org/TR/websub/#abstract WebSub provides a common mechanism for communication between publishers of any kind of Web content and their subscribers, based on HTTP web hooks. Subscription requests are relayed through hubs, which validate and verify the request. Hubs then distribute new and updated content to subscribers when it becomes available. WebSub was previously known as PubSubHubbub.

GoAccess - Visual Web Log Analyzer https://goaccess.io/ GoAccess is an open source real-time web log analyzer and interactive viewer that runs in a terminal in *nix systems or through your browser. It provides fast and valuable HTTP statistics for system administrators that require a visual server report on the fly.

youtube-dl https://github.com/rg3/youtube-dl Command-line program to download videos from YouTube.com and other video sites.

GCFS - A FUSE file system based on Google Drive https://github.com/harababurel/gcsf GCSF is a virtual filesystem that allows users to mount their Google Drive account locally and interact with it as a regular disk partition. You can find out more in this paper.

Language Graph https://akr.am/languages/ A graph of programming languages connected through compilers. This project shows a graph where the nodes are programming languages and the edges are compilers. The graph is drawn using Cytoscape.js, particularly the CoSE layout module.The data for the list of compilers is sourced from the compilers.js module.

termtosvg https://github.com/nbedos/termtosvg A Linux terminal recorder written in Python that renders your command line sessions as standalone SVG animations.

设计

Timeline 2.0 — Interaction Design for Sketch https://medium.com/sketch-app-sources/timeline-2-0-interaction-design-for-sketch-f6fc0a852c8a Design Interactions and Export Code, Directly in Sketch.

“MVP vs. MDP” and the winner is… https://uxdesign.cc/mvp-vs-mdp-and-the-winner-is-a754ba0ce55f MDP - Stands for Minimum Desirable Product or someone even says Minimum Delightful Product.MVP - Stands for Minimum Viable Product.

Order Out of Chaos: Patterns of Organization for Writing on the Job http://alistapart.com/article/order-out-of-chaos-patterns-of-organization-for-writing-on-the-job Given the endless variety of writing situations, there is no such thing as a single organization solution. But saying that “advice varies widely depending on the situation” doesn’t tell the whole story. There are flexible patterns and principles that can guide you in finding, customizing, and creating structures for your goals. The key thing to remember is that structure affects meaning. The sequence of information, the categories you use, the emphasis you imply through your hierarchy—all of these decisions impact how well your audience understands what you write. Your ideal structure should therefore reinforce what you mean to say.

Design Principles That Help You Shape The Best User Experience https://blog.marvelapp.com/design-principles-help-shape-best-user-experience/ Every product has an ultimate goal — to help people solve certain problems. When designing a product, you need to keep user experience in mind, you don’t want to create a product that is more complicated than the actual problem the users have. There are some principles to follow when designing a product. It could be an app, a website or a physical product. These principles would help you shape better user experience.

Better Research, Better Design, Better Results https://www.smashingmagazine.com/2018/07/better-research-design-results/ Most web professionals like to see their influence felt in web design projects as early as possible, in order to make sure what they have to say gets heard. Yet often SEOs and content marketers are asked to step in post-launch when the design work is more or less complete. However, there are very real benefits, ranging from better UX to lower costs to using SEO-focused data such as keyword research as a springboard for design and development, rather than having to turn to it further down the line.

Mobile App Design Best Practices and Mistakes https://www.toptal.com/designers/mobile/mobile-app-design-mistakes The most common mistakes span from failing to maintain consistency throughout the lifespan of an app to difficulty attracting users in the first place. It’s challenging to design an app with intuitive simplicity without it becoming repetitive and boring. An app has to offer pleasing design and UX details without losing sight of a greater purpose. Most apps live and die in the first few days, so following some basic mobile app design best practices and avoiding the most common mistakes will help designers create apps that live past that 90-day mark.

Dribbble’s Sarah Kuehnle - Community is everything https://www.invisionapp.com/blog/dribbble-design-chat/ In case you haven’t noticed, we at InVision are huge Dribbble fans. The invite-only social platform for designers launched in 2009 and has since become the best place to share illustrations, animations, wireframes, photography, and other creative work.

产品及其它

EU copyright law https://juliareda.eu/eu-copyright-reform/ Italy Wikipedia shuts down in protest at EU copyright law、Spanish Wikipedia also shuts down in protest at proposed EU copyright law、Latest Text Of EU Copyright Directive Shows It’s Even Worse Than Expected: Must Be Stopped、Controversial copyright law rejected by EU parliament

Tim Berners-Lee’s Solid is a platform designed to re-decentralize the web https://www.vanityfair.com/news/2018/07/the-man-who-created-the-world-wide-web-has-some-regrets The idea is simple: re-decentralize the Web. Working with a small team of developers, he spends most of his time now on Solid, a platform designed to give individuals, rather than corporations, control of their own data. “There are people working in the lab trying to imagine how the Web could be different. How society on the Web could look different. What could happen if we give people privacy and we give people control of their data,” Berners-Lee told me. “We are building a whole eco-system.”

Founder to CEO https://docs.google.com/document/d/1ZJZbv4J6FZ8Dnb0JuMhJxTnwl-dwqx5xl0s65DE3wO8/edit# I coach tech startup CEOs (and tech investors) in Silicon Valley, most of whom are young technical founders. They include the CEOs of Coinbase, ClearBit, AngelList, CoinList, TrustToken, Bolt, Shogun, Speechify, etc. In my coaching, I found several things: Becoming a great CEO requires training; For a founding CEO, there is precious little time to get that training, especially if her company is succeeding; While there are many books out there with excellent and relevant knowledge for the founding CEO, there is no single book that is a compendium of all the things she needs to learn; My mentees and I repeatedly solve the same core issues together. In this book, I have simply written down the solutions that we came up with. And hopefully it will serve as a compendium so that you can become a great CEO in the very little time you have to do so.

知乎：成则得到，败则贴吧 https://mp.weixin.qq.com/s?__biz=MzI2NTY4MDg1NA==&mid=2247492644&idx=1&sn=06cc0eaf762f4faed07e876eb667af66 作为中国最大的知识分享社区，知乎从10年创业以来，一直受到大家的关注。但是，虽然有良好的社区氛围，知乎的商业化之路却一直十分坎坷，无论是知乎live，还是读书会，包括最近的超级会员，似乎都没有达到预期效果，反而频频受到用户的质疑。知乎的商业化之路为何如此困难，它的前路又在哪里？今天，我想站在一个旁观者的角度，来试着聊这样几个问题：为什么知乎要积极的探索商业化？知乎的商业化变现的难点在哪里？超级会员究竟应该会走向何方？

– THE END –