FEX 技术周刊 - 2018/11/19

业界会议

Chrome Dev Summit 2018

https://developer.chrome.com/devsummit/

附： Web长列表的救星？谷歌推出Virtual Scroller 、 Highlights from Chrome Dev Summit 2018 、 Building a Faster, Smoother, Capable Web 、 Ready for the next movement 、 Goodbye Electron, Hello Desktop PWAs .

React Conf recap: Hooks, Suspense, and Concurrent Rendering

https://reactjs.org/blog/2018/11/13/react-conf-recap.html

All 28 conference talks are available to stream online .

深阅读

Google - Web.Dev: Let’s build the future of the web.

https://web.dev/

A new site that aims to bring together all of the Web performance expertise Google has as a set of docs packed with actionable guidance and analysis. With actionable guidance and analysis, web.dev helps developers like you learn and apply the web’s modern capabilities to your own sites and apps. 另附： CSS and Network Performance 、 Measure, Optimize & Monitor 、 Google announces .dev top-level domain, open registration in February 、 PageSpeed Insights, now powered by Lighthouse .

Faster async functions and promises

https://v8.dev/blog/fast-async

Asynchronous processing in JavaScript traditionally had a reputation for not being particularly fast. To make matters worse, debugging live JavaScript applications — in particular Node.js servers — is no easy task, especially when it comes to async programming. Luckily the times, they are a-changin’. This article explores how we optimized async functions and promises in V8 (and to some extent in other JavaScript engines as well), and describes how we improved the debugging experience for async code.

HTTP/3

https://daniel.haxx.se/blog/2018/11/11/http-3/

The protocol that’s been called HTTP-over-QUIC for quite some time has now changed name and will officially become HTTP/3. This was triggered by this original suggestion by Mark Nottingham. The QUIC Working Group in the IETF works on creating the QUIC transport protocol. QUIC is a TCP replacement done over UDP. Originally, QUIC was started as an effort by Google and then more of a “HTTP/2-encrypted-over-UDP” protocol.

Which of the 635000 npm modules do I choose?

https://www.coreycleary.me/which-of-the-635000-npm-modules-do-i-choose/

It’s easy to face “analysis paralysis” when choosing npm modules. With so many to choose from, and new ones being touted as “what you really should switch to” it can be overwhelming to pick the right one for your project. And it doesn’t help that so many of these modules do similar (or the same) things. Rather than waste time Googling around, combing through npmjs.org, and wasting more time NOT building your application, it would be great to know which modules to choose when. 另附： 386 Useful Javascript libraries 、 Top 10 Node.js Developer Tools .

Evan You Previews Vue.js 3.0

https://medium.com/vue-mastery/evan-you-previews-vue-js-3-0-ab063dec3547

We can expect Vue 3 to be: Faster, Smaller, Have more maintainable source code, More native-friendly, Easier to use. 另附： Offline-First Vue Apps with Hoodie & Workbox 、 Vue.js 3.0 PPT .

These are the concepts you should know in React.js

https://medium.freecodecamp. org/these-are-the-concepts-you-should-know-in-react-js-after-you-learn-the-basics-ee1d2f4b8030

In the following article, I’m going to discuss 5 concepts that will bring your React skills and knowledge to the next level.

The Power of Web Components

https://hacks.mozilla.org/2018/11/the-power-of-web-components/

另附： Private by Design: How we built Firefox Sync 、 New & Experimental Web Design Tools: Feedback Requested .

Node.js 10 LTS 版本更新了什么？

https://www.yuque.com/egg/nodejs/op1ns5

经过一年多的沉淀后，Node.js 10 终于正式进入 LTS 了，本文将为大家阐述值得关注的特性。 同时，由阿里云团队研发的 Alinode 一直在积极地与上下游协作，已经第一时间支持到了最新的 LTS 版本，只需更新到 alinode-v4.5.0，使用 Node.js 性能平台 的开发者就可以享受到新特性啦！另附： Node.js Offline PDF Documentation 。

西安交大提出前端设计图自动转代码新方法

https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247489854&idx=1&sn=4828d5d36c3becdf8b1f46490b5ce708

对于前端工程师来说，开发 GUI 界面极其耗费时间和精力。这种重复、繁琐的工作是否可以交给机器自动化完成，是目前 AI 领域研究人员积极探索的新方向。最近，西安交通大学的人工智能与机器人研究所提出了一种新的方法，可以帮助前端工程师将设计好的 GUI 图自动转换为代码，不仅在简单布局的 GUI 上可以生成非常好的代码，即使在图形元素复杂、样式复杂、空间布局复杂的情况下，生成效果也非常接近真实情况。附论文：https://arxiv.org/pdf/1810.11536.pdf

构建时预渲染：网页首帧优化实践

https://tech.meituan.com/first_contentful_paint_practice.html

自JavaScript诞生以来，前端技术发展非常迅速。移动端白屏优化是前端界面体验的一个重要优化方向，Web 前端诞生了 SSR 、CSR、预渲染等技术。在美团支付的前端技术体系里，通过预渲染提升网页首帧优化，从而优化了白屏问题，提升用户体验，并形成了最佳实践。

JDFlutter - 京东新一代跨平台开发框架

https://mp.weixin.qq.com/s/UhfgfNEdogm7Busr0apAGQ

JDFlutter 可快速集成至现有 Android/iOS 工程，开发者可借助 JDFlutter 平台快速完成 Flutter 业务开发。JDFlutter 平台提供了大多数京东样式 UI 组件库以及丰富的原生 API，可满足复杂业务需求。未来 JDFlutter 会和 JDReact 一起构成京东 ARES 跨端应用开发平台的双引擎！

[译]KaiOS - 下一个 Android

https://mp.weixin.qq.com/s/ecJgcmH8aALA7CmII3XdJA

KaiOS 在印度市场发展迅猛，它已经超越了 iOS 成为了印度第二大移动操作系统，占比 15% 以上。我们海外市场扩张的目光不应无视这个正在崛起的巨人。以下是一篇很好的评论文章，翻译出来方便大家阅读。另附： Redox - a Unix-like Operating System written in Rust 、 iSH - Linux shell for iOS 。

Building a Modern JavaScript Framework

https://www.sitepen.com/blog/2018/11/12/building-a-modern-javascript-framework/

In this talk, James laid down the history of the ArcGIS JavaScript API and why the Dojo Toolkit was chosen as its bedrock. At the time of inception, the Dojo Toolkit provided many appealing features, such as a module system, browser compatibility for APIs, and a uniform surface for handling vector graphics with dojo.gfx. James explained how that in more recent times, the ecosystem has developed and the challenges developers face has also changed in response.

Why Facebook’s api starts with a for loop

https://dev.to/antogarand/why-facebooks-api-starts-with-a-for-loop-1eob

If you ever inspected your requests to big company’s API’s in the browser, you might have noticed some weird javascript before the JSON itself. Why would they waste few bytes to invalidate this JSON?

Faster web

https://codeburst.io/faster-web-c6823830ce72

If Virtual DOM is slow by design, and DOM API is tedious to use, how do we get the faster web?

Delivering Meaning with Previews on Web

https://medium.com/netflix-techblog/delivering-meaning-with-previews-on-web-3cedc0341b9e

Giving members meaning via video previews brings new technical and experiential challenges. It would need to have fast playback, smooth transitions, and minimal friction. The tasks ahead of us were: Optimize the existing homepage to reduce CPU load and network traffic; Integrate video preview playback in existing canvases; Create an intuitive user experience.

elm-ui: Forget CSS and enjoy creating UIs in pure Elm

https://korban.net/posts/elm/2019-11-17-elm-ui-introduction/

Creating UIs with CSS is rarely as straightforward as you expect. A few weeks ago I wanted to make the navigation on my site responsive, having it switch from a row of links to a hamburger slideout menu. Seems like a reasonable thing to do with CSS, right? Not really. As often happens, I tried a few reasonable things – they didn’t work. I started searching for solutions – most involved JavaScript.

Braces to Pixels

https://alistapart.com/article/braces-to-pixels

Doesn’t CSS seem like magic? Well, in this third installment of “URL to Interactive” we’ll look at the journey that your browser goes through to take your CSS from braces to pixels. As a bonus, we’ll also quickly touch on how end-user interaction affects this process. We have a lot of ground to cover, so grab a cup of <insert your favorite drink’s name here> , and let’s get going.

How we use Storybook for documentation and code reviews

https://medium.com/redmart-engineering/how-we-use-storybook-for-documentation-and-code-reviews-550a522543f1

Storybook is a tool for organising such a component library. We also use it for other purposes like documenting component states and communicating changes in PRs.

How Druid enables analytics at Airbnb

https://medium.com/airbnb-engineering/druid-airbnb-data-platform-601c312f2a4c

Realtime and batch analytics at Airbnb and the role Druid plays in our analytics system architecture.

NGINX and the “Power of Two Choices” Load-Balancing Algorithm

https://www.nginx.com/blog/nginx-power-of-two-choices-load-balancing-algorithm/

New use cases sometimes require new load‑balancing algorithms, and in NGINX Plus R16 and open source NGINX 1.15.1 we added a new method that is particularly suitable for distributed load balancers: an implementation of the “power of two choices” algorithm.

The C++ Build Process Explained

https://github.com/green7ea/cpp-compilation/blob/master/README.md

The C++ build process is built on top of the C build process which was hacked together in 1972 on a PDP-7 with at most 144 KB of RAM. Honestly, I’m surprised it aged so well. The exact linking process in C and C++ isn’t standard, it’s up to each compiler to make things work. Most compilers behave in the same way with small differences but we’ll be focusing on the GNU tools to keep things simple.

Vim in the Future

https://emily.st/2018/11/13/vim-in-the-future/

There is something of a tradition of programmers writing posts about Vim. Many proselytize, and others are narratives of discovery. What I want to contribute to the conversation about Vim, in this late year of 2018, is what role it still plays in a world that is technologically rushing by. I’m going to tell you more about Vim, why I use it, and how I use it, so that I can say why it might still be worthwhile looking at—or not.

Nine years of Go

https://blog.golang.org/9years

Today marks the ninth anniversary of the day we open-sourced our initial sketch of Go. On each anniversary we like to take time to reflect on what has happened over the past year. The past 12 months have been a breakout year for the Go language and community. 附： Participate in the 2018 Go User Survey 、 Lorca - Build cross-platform modern desktop apps in Go + HTML5 .

新鲜货

The State of the Octoverse: top programming languages of 2018

https://blog.github.com/2018-11-15-state-of-the-octoverse-top-programming-languages/

At the core of every technology on GitHub is a programming language. In this year’s Octoverse report, we published a brief analysis of which ones were best represented or trending on GitHub. In this post, we’ll take a deeper dive into why—and where—top programming languages are popular. 附： AI-assisted coding comes to Java with Visual Studio IntelliCode .

Introducing a Web Component and Data API for Quick, Draw!

https://opensource.googleblog.com/2018/11/introducing-web-component-and-data-api-for-quick-draw.html

Over the past couple years, the Creative Lab in collaboration with the Handwriting Recognition team have released a few experiments in the realm of “doodle” recognition. First, in 2016, there was Quick, Draw!, which uses a neural network to guess what you’re drawing. Since Quick, Draw! launched we have collected over 1 billion drawings across 345 categories. In the wake of that popularity, we open sourced a collection of 50 million drawings giving developers around the world access to the data set and the ability to conduct research with it.

Web High Level Shading Language

https://webkit.org/blog/8482/web-high-level-shading-language/

This article is introducing a new graphics shading language for the Web named Web High Level Shading Language (WHLSL, pronounced “whistle”). The language is insprired by HLSL, the dominant shading language for graphics app developers. It extends HLSL for the Web platform to be safe and secure. It’s easy to read and write, and is well-specified using formal techniques.

The Writable Files API: Simplifying local file access

https://developers.google.com/web/updates/2018/11/writable-files

The writable files API is designed to increase interoperability of web applications with native applications, making it possible for users to choose files or directories that a web app can interact with on the native file system, and without having to use a native wrapper like Electron to ship your web app.

MongoDB Mobile

https://www.mongodb.com/products/mobile

MongoDB Mobile brings the power of MongoDB and the document model to your device. Same database, same access patterns – from IoT, iOS, and Android mobile devices to your backend.

Elasticsearch 6.5.0 Released

https://www.elastic.co/blog/elasticsearch-6-5-0-released

Cross-Cluster Replication, Minimal Snapshots, SQL / ODBC, JDK 11 & G1GC, Search Use Cases, Security and Audit Logging.

Amazon Corretto

https://aws.amazon.com/fr/corretto/

Amazon Corretto is a no-cost, multiplatform, production-ready distribution of the Open Java Development Kit (OpenJDK). Corretto comes with long-term support that will include performance enhancements and security fixes. Amazon runs Corretto internally on thousands of production services and Corretto is certified as compatible with the Java SE standard. With Corretto, you can develop and run Java applications on popular operating systems, including Amazon Linux 2, Windows, and macOS. Amazon Corretto 8 is in Preview.

Retoggle

https://retoggle.debuggable.io/

Retoggle is a collection of React hooks which provides UI toggles to manipulate your component state from outside.

react-beautiful-dnd

https://github.com/atlassian/react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React.

rawact

https://github.com/sokra/rawact

A babel plugin which compiles React.js components into native DOM instructions to eliminate the need for the react library at runtime.

tiptap

https://github.com/heyscrumpy/tiptap

A renderless and extendable rich-text editor for Vue.js. 另附： Slate: A Framework for Building Rich Browser-Based Text Editors

urlite

https://github.com/QubitProducts/urlite

A very small, fast, dependency free url parser and formatter for nodejs and the web.

execa

https://github.com/sindresorhus/execa

A better child_process .

A web-based mission control framework by NASA

https://nasa.github.io/openmct/

Open MCT is a next-generation mission operations data visualization framework developed by NASA Ames Research Center in Silicon Valley in collaboration with the Jet Propulsion Laboratory, as part of NASA’s Advanced Multi-mission Operations System. Web-based, for desktop and mobile.

TensorSpace.js

https://tensorspace.org/

Neural network 3D visualization framework, build interactive and intuitive model in browsers, support pre-trained deep learning models from TensorFlow, Keras, TensorFlow.js.

Introducing Chartify: Easier chart creation in Python for data scientist

https://labs.spotify.com/2018/11/15/introducing-chartify-easier-chart-creation-in-python-for-data-scientists/

Have you ever been frustrated with the complicated experience of making charts in Python? We have, so we created Chartify, an open-source Python library that wraps Bokeh to make it easier for data scientists to create charts.

Rain sound generator. Visual simulation of rain, online

https://rainbowhunt.me/

效果蛮真实的。另附： Google Earth for live radios

A 3D Town Created with Emojis and CSS Transforms

https://codepen.io/GeorgePark/pen/MqVoYP

This pen shows how pure CSS can be used to create an animated 3D emoji town.

Squoosh

https://squoosh.app/

Google 开源发布的一款专门用来压缩图片的 在线服务 ，支持 JPG、PNG、WebP 等格式的极限压缩。附： 把超强的在线图片压缩 Squoosh! 工具做成应用在电脑上使用 .

q - Text as Data

https://github.com/harelba/q

q is a command line tool that allows direct execution of SQL-like queries on CSVs/TSVs (and any other tabular text files). q treats ordinary files as database tables, and supports all SQL constructs, such as WHERE, GROUP BY, JOINs etc. It supports automatic column name and column type detection, and provides full support for multiple encodings.

设计

Use Case For Augmented Reality In Design

https://www.smashingmagazine.com/2018/11/use-case-for-augmented-reality-in-design/

Ever since Pokémon Go brought augmented reality into consumers’ line of sight, marketers and developers have been looking for a way to hone AR’s power for their own purposes. If there ever was a time to jump on this game-changing bandwagon, it’s now. AR provides spatial and facial mapping technologies that will not only delight your users, but will improve the overall experience of interacting with your app’s brand. 附： Facebook - A Content Strategist’s Journey Into Social VR .

UX Trends I Observed at Google as a Mobile UX Lead

https://medium.com/google-design/10-ux-trends-at-google-6cac31deaea5

This is a running list of insights from partnering with over 150 web development teams over the past 2 years. 另附： Web Design Inspiration: 9 Web Interfaces with Catchy Graphics 、 Mobile App Design Trends Of 2019: Revamp Your App Identity .

Design thinking: A guide to design better UX components

https://uxplanet.org/design-thinking-designing-better-ux-components-459ecfdbcec8

A thorough process of designing UX components or a product. Explained through an example of a date range filter.

产品及其它

The Art Institute of Chicago Has Put 50,000 High-Res Images from Their Collection Online

https://kottke.org/18/11/the-art-institute-of-chicago-has-put-50000-high-res-images-from-their-collection-online

The Art Institute of Chicago recently unveiled a new website design. As part of their first design upgrade in 6 years, they have placed more than 52,000 high-resolution images from their collection online , available to all comers without restriction.

掘金 - 不如我们从头来过

https://juejin.im/post/5bedaad5e51d45728f1074d8

期待掘金可以度过寒冬，成功打造出中国最大的开发者社区。

写作、排版、分发，这可能就是你在找的一站式文字处理平台：Zine

https://sspai.com/post/48285

在竞争者甚众的写作应用领域，能够坚持运营长达 5 年之久的 Zine，必定有着其独一无二的魅力。也许我将它局限在写作领域，太过于狭隘了，实际上，Zine 还是一款强大的创作 工具 、排版工具，更全面的定义可能是它是一款小型杂志制作工具。不能你对什么感兴趣，都可以将它做成一本 Zine。你喜欢读书写笔记，那就做一本关于读书感悟的 Zine；你是吃货搜寻达人，那就做一本美食 Zine；你和家人相亲相爱，那就做一本家庭摄影 Zine；不管你教书、养花、辩论、旅游、画画、外语……，你都可以把你的奇思妙想做成一本 Zine。

松鼠的11年果壳梦

https://www.huxiu.com/article/271339.html

科学研究的殿堂很高深，但从大众文化的角度看，科学的文化也可以很有趣。看硬核科幻小说的人没有多少，但看科幻大片的呢？俯视果壳近十年的运营节奏，最关键的是踩准了两个窗口节点，第一个是科学兴趣社区带来的原始用户注入，第二个是在微博和微信端初期时坚决果断的投入，获得了大量粉丝。果壳现在正经历的就是果壳获取用户第三个关键的节点，丰富娱乐化形式，开拓新战场。

魏杰 - 中国经济的现状和未来走势

https://mp.weixin.qq.com/s?__biz=MzA3NzgyNDA0MA==&mid=2649605774&idx=1&sn=edee1cda53ab0e4e20069c1eabddacb8

魏杰在湖畔大学关于中国宏观经济最新走势的演讲，信息量很大，看懂经济能帮助我更好地看懂未来。也深深佩服国家的高明之处，希望这次危机能顺利度过。

– THE END –