FEX 技术周刊 - 2018/11/26

业界会议

第二届 VUE Confhttps://vue.w3ctech.com/

围观下 VUE 的最新实践成果。

深阅读

The State of JavaScript 2018

https://2018.stateofjs.com/

That’s where the State of JavaScript survey comes in: this year, we surveyed over 20,000 JavaScript developers to figure out what they’re using, what they’re happy with, and what they want to learn. And the result is a unique collection of stats and insights that will hopefully help you make your own way through the JavaScript ecosystem. 另附： Most Popular Node.js Frameworks in 2018 、 10 things to learn for becoming a solid full-stack JavaScript developer .

Why React Hooks, and how did we even get here?

https://medium.freecodecamp.org/why-react-hooks-and-how-did-we-even-get-here-aa5ed5dc96af

Hooks have learned from the trade-offs of mixins, higher order components, and render props to bring us new ways to create contained, composable behaviors that can be consumed in a flat and declarative manner.

Experimenting with brain-computer interfaces in JavaScript

https://medium.com/@devdevcharlie/experimenting-with-brain-computer-interfaces-in-javascript-8d6cb891fda8

For the past couple of years, I’ve had a growing interest in neurotechnology. This blog post is about sharing the things I’ve learnt along the way and hopefully help people who want to get started!

Using a headless browser to capture page screenshots

https://bitsofco.de/using-a-headless-browser-to-capture-page-screenshots/

Headless browsers are useful for automating tests of websites as it allows us to navigate to a page and perform actions without having to manually open up a browser and click around. Another great use of headless browsers is to take screenshots of web pages dynamically.

WebSockets - A Conceptual Deep-Dive

https://www.ably.io/concepts/websockets The WebSocket protocol elevated the possibilities of communication over the internet and gave way to a truly realtime web. This article is all about building a deeper understanding of what WebSockets are, how they came to be and what’s actually going on under the hood of applications using WebSockets. This article contains details as per the time of it’s writing.

年终回顾，为你汇总一份「前端技术清单」

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

结合工作体会抽象出了一些前端基础技术能力，并将这段时间学习或产出的一些不错的内容根据这些能力进行整理，形成了一份前端技术清单，包含很多今年不错的文章。

SVG vs Image, SVG vs Iconfont

https://aotu.io/notes/2018/11/23/SVG_vs_Image_vs_iconfont/index.html

SVG vs Image：除开复杂图像，选择 Inline SVG 或者 <img/> 标签的方式引入 SVG，会比使用 独立图像 或 组合图像 (CSS sprite) 的方式更好。SVG vs Iconfont：选择 Inline SVG 或许是一个不错地选择去替代 Iconfont 的使用方式。

Hades：移动端静态分析框架

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

大众点评静态分析框架 Hades，取名源于古希腊神话中的冥王。冥王 Hades 公正无私，能够审视灵魂的是非善恶。Hades 框架支持语义分析能力，我们希望这种能力不仅仅能够去实现一个传统的 Lint 工具，而且能成为创造更多能力的基础，可以帮助我们更轻松地审视代码，理解把控大型项目。

[译]Google Photos Web UI 完善之旅

https://zhuanlan.zhihu.com/p/50280008

几年前我有幸以工程师的身份加入 Google Photos 团队，并参与了 2015 年发布的第一个版本。我所负责的是 Web UI 部分，更精确点来说，我负责了照片的网格布局。我们立下雄心壮志，要做出完美的布局方案：支持全屏自适应、保证原图比例、交互便捷（比如用户可以跳转到指定的位置）、既展现海量图片又保证页面的高性能和高速加载。当时，市面上还没有任何相册产品能实现以上所有效果。据我所知，到目前为止也尚未出现能和 Google Photos 相媲美的产品。特别是在页面布局和图片比例上，大部分产品依然将图片裁剪成正方形以保证布局优美。下面我将会分享我们是如何完成这些挑战，以及 Web 版的 Google Photos 中的一些技术细节。

[译]2019年前端面试都聊啥？

https://mp.weixin.qq.com/s/e-IC588SZPJK2QRBm3KuHA

面试是催生变革和汇聚人才的好方式。作为面试官的你，如果仅仅把面试当成「面试」，那么你只能自我膨胀，最终一无所获。要使一场面试成功，必须对其进行讨论。它必须是一个交换思想的地方。它应该引发人们思考并客观地分析给定的问题。它要能帮助我们理解人们做决策的过程。它要能帮助我们了解一个人对技术和解决问题的热情。它意味着要了解未来可能的同事。所有那些谜题，tricks 或 typeof null 都不能真正称为面试。以下是我们在面试讨论中提出的一些问题。我们希望它可以帮助面试官和面试者准确地看清期望，需求和现实。

Why Angular Made Me Quit Web Dev

https://hackernoon.com/why-angular-made-me-quit-web-dev-f63b83a157af

Angular. Its mere name is a hostile form on the tongue. Pronounce it slowly. /’eŋgjəlɚ/. The throat itself contorts around the hideous alien shape of this word, which means ugly, sharp, and artificial. Test subjects across the globe overwhelmingly associate the same three words with the same three shapes. Here, I will illustrate the various ways in which my psyche was irreversibly traumatized by this pandemonium of demon-droppings, Google’s brainchild: the ANGULAR WEB DEVELOPMENT FRAMEWORK.

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.

Web workers vs Service workers vs Worklets

https://bitsofco.de/web-workers-vs-service-workers-vs-worklets/

Web workers, service workers, and worklets are all scripts that run on a separate thread. So what are the differences between these three types of workers?

Electrode Confippet

https://medium.com/walmartlabs/electrode-confippet-85bafe1c9a42

Electrode , an open sourced platform by WalmartLabs, is used for building powerful web and mobile applications. Electrode Confippet is one of the many modules available in Electrode Web and is used for managing configurations for Node.js applications. In this blog post, we will take a deeper look at Electrode Confippet.

Steal this Dashboard! Every Insights Chart Type in One Dashboard

https://blog.newrelic.com/product-news/steal-this-dashboard/

To illustrate the capabilities of New Relic Insights dashboards, we’ve built one that includes every possible way to visualize your APM data and pageview data—what we call the All Chart Types dashboard. These visualizations, or charts, come in a variety of formats, or widgets, and they are built using New Relic Query Language (NRQL) queries.

Some notes about HTTP/3

https://blog.erratasec.com/2018/11/some-notes-about-http3.html#.W_p2ZGQzanc

HTTP/3 is going to be standardized. As an old protocol guy, I thought I’d write up some comments.

Flutter: the good, the bad and the ugly

https://medium.com/asos-techblog/flutter-vs-react-native-for-ios-android-app-development-c41b4e038db9

Having created my first app using Flutter, I weigh up the technology’s pros and cons against the other big cross-platform development contender — React Native. 另附： Google releases Dart programming language version 2.1, teases Flutter 1.0

Dynamic configuration at Twitter

https://blog.twitter.com/engineering/en_us/topics/infrastructure/2018/dynamic-configuration-at-twitter.html

In this blog post, we will describe ConfigBus, Twitter’s dynamic configuration system. ConfigBus is made up of a database for storing configurations, a pipeline to distribute the configurations to machines in Twitter’s data centers, and APIs and tools to read and update them.

A Pragmatic Approach to Tech Debt Reduction

https://developers.soundcloud.com/blog/a-pragmatic-approach-to-tech-debt-reduction

My SoundCloud team, the Content Team, looks after a large number of legacy systems, along with a number of large systems that are difficult to understand and work with. Topics such as “Tech debt constantly increases development time” and “We have too much tech debt” come up frequently at our team retrospectives. We have just completed a project that was almost exclusively about tech debt reduction. This post is a series of lessons learned about how to engage in this process (and when to decide not to).

The Serverless Sea Change

https://www.infoq.com/articles/serverless-sea-change

Most of the writing on serverless applications either lacks enough detail to understand exactly why serverless has any real advantages over other methods of building software, or is far too in-the-weeds to understand how the particular discussion would be better than an alternate implementation that was not serverless. This article defines and explains how serverless is different from other application architectures and then walks through a “proof” of sorts to show that serverless application architectures, when done properly, are superior to non-serverless architectures. Finally, it concludes with a number of rules of thumb to help architects and developers realize the benefits of serverless.

Amazon Redshift and the art of performance optimization in the cloud

https://www.allthingsdistributed.com/2018/11/amazon-redshift-performance-optimization.html

The Amazon Redshift team has delivered remarkable gains using a few simple engineering techniques: Leveraging fleet telemetry; Verifying benchmark claims; Optimizing performance for bursts of user activity.

Slow Software

https://www.inkandswitch.com/slow-software.html

You spend lots of time waiting on your computer. You pause while apps start and web pages load. Spinner icons are everywhere. Hardware gets faster, but software still feels slow. What gives? If you use your computer to do important work, you deserve fast software. Too much of today’s software falls short. At the Ink & Switch research lab we’ve researched why that is, so that we can do better. This article shares we’ve learned.

新鲜货

Node.js - November 2018 Security Releases

https://nodejs.org/en/blog/vulnerability/november-2018-security-releases/

Node.js will release new versions of all supported release lines on, or shortly after, November 27th, 2018 UTC. These releases will incorporate a number of security fixes specific to Node.js, as well as the updates to OpenSSL that were released today, November 20th, 2018. OpenSSL 1.0.2q and 1.1.0j include fixes for previously disclosed low-severity timing vulnerabilities.

GitLab 11.5 released

https://about.gitlab.com/2018/11/22/gitlab-11-5-released/

With 11.5, the Group Security Dashboard pulls together all of the information security personnel need into one place, so folks like CISOs, CIOs, and application security leaders get a specific view designed for them. The group dashboard has a redesigned look and new visualizations, bringing together security information across multiple projects and providing a high-level view while also enabling the ability to drill down into specific reports. With 11.5, we’re starting with SAST reports, and we’ll be adding more to the group dashboard in the future.

Decentralizing Social Interactions with ActivityPub

https://hacks.mozilla.org/2018/11/decentralizing-social-interactions-with-activitypub/

ActivityPub , a W3C standard protocol that describes ways for different social network sites (loosely defined) to talk to and interact with one another. You might remember the heyday of RSS, when a user could subscribe to almost any content feed in the world from any number of independently developed feed readers. ActivityPub aims to do for social network interactions what RSS did for content.

HTM - Hyperscript Tagged Markup

https://github.com/developit/htm

JSX alternative using standard tagged templates, with compiler support. Develop with React/Preact directly in the browser, then compile htm away for production. It’s built using Tagged Templates and the browser’s HTML parser.

nivo

https://github.com/plouc/nivo

nivo provides supercharged React components to easily build dataviz apps, it’s built on top of d3. Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.

Mega Project List

https://github.com/karan/Projects

A list of practical projects that anyone can solve in any programming language ( See solutions ). These projects are divided in multiple categories, and each category has its own folder.

The Google Cemetery

https://gcemetery.co/

List of dead Google products and why they died.

Elementary OS

http://www.daemonology.net/hn-daily/2018-11-17.html

The fast, open, and privacy-respecting replacement for Windows and macOS.

Amp - A complete text editor for your terminal

https://amp.rs/

Amp is inspired by Vim’s modal approach to text editing, which is reflected in several of its default key bindings. That similarity aside, there are several key differences. Above all else, Amp aims to keep things as simple as possible. There are already plenty of highly-configurable editors available. At its core, Amp aims to minimize configuration and provide a great out-of-the-box experience. The following sections describe some of the ideas central to the design of Amp that differentiate it from other options.

nnn - The fastest terminal file manager ever written

https://github.com/jarun/nnn

nnn is probably the fastest and most resource-sensitive file manager you have ever used. It integrates seamlessly with your DE and favourite GUI utilities, has a unique navigate-as-you-type mode with auto-select, disk usage analyzer mode, bookmarks, contexts, application launcher, familiar navigation shortcuts, subshell spawning and much more.

设计

Butterick’s Practical Typography

https://practicaltypography.com/

Typography is the visual component of the written word. Thus, being a publisher of the written word necessarily means being a typographer. This book will make you a better typographer.

Doodle Master

https://github.com/karanchahal/DoodleMaster

The Doodle Master seeks to turn your UI mockups into real code. Currently this repository just serves to demonstrate a Proof Of Concept of Artificially Intelligent Design Tools. The demo supports the detection of 4 classes of UI components: TextViews, Headers, ImageViews, Buttons.

Art vs. Design – A Timeless Debate

https://www.toptal.com/designers/creative-direction/art-vs-design

Spend any amount of time working among professional designers and you learn that equating art with design is a surefire way to stir the pot and hear bold statements like: “Design is not art. Design has to function.”; “Art is meant to provoke thought and emotions, but it doesn’t solve problems.”; “Artists primarily work off instinct, whereas designers employ a methodical, data-driven process.” Unfortunately, the designer vs. artist discussion often deteriorates into ranting and raving. Lines are drawn, battle flags are raised, and productive dialogue becomes impossible.

Understand your future role, be a product designer

https://uxplanet.org/understand-your-future-role-be-a-product-designer-dc3ad0e70f5f

The word “product designer” is not a new word at all but we don’t know when and to whom we have to use this word. We have to get our knowledge by collaborating with other designers who are in the same field and use these types of processes to explain and come to an understanding of what standards have to be put together to create a better environment to the future product designers to get established and create a better experience to the users. 另附： 10 skills that make a great designer .

Minimalism vs. Maximalism: Which Trend Fits Best for E-Commerce Websites?

https://blog.marvelapp.com/minimalism-vs-maximalism-which-trend-fits-best-for-e-commerce-websites/

Minimalism and Maximalism are two polar opposites, the Yin and Yang, two concepts that tie into every aspect or known field of work including literature, art, scientific researches, and media. More recently, these two elements have become rather essential and relevant to the business and commerce industry with many applications in marketing and advertising sectors.

产品及其它

AI Artist Gives “Perfect” TED Talk As Cyborg

https://www.artnome.com/news/2018/11/15/ai-artist-gives-perfect-ted-talk-as-cyborg

In an effort to help people better understand AI, we at Artnome are doing a series of interviews with artists who are exploring AI’s potential through art. In this post, we speak with artist Alexander Reben, whose work focuses on human/machine collaboration using emerging technologies. He sees these technologies as new tools for expression, and most recently trained an AI to give a TED Talk through a robotic mask on stage.

微软亚研院的二十年：一所一流研究院的自身修养和边界突破

https://www.geekpark.net/news/235273

从微软的弹药库、智囊团、中国互联网的「黄埔军校」，再到开放技术的平台，从闭环走向开放，二十年，微软亚洲研究院除了力主科研，也在探索自身角色的边界，以及寻找一所一流研究院的定义。

中型创业公司陷阱

https://mp.weixin.qq.com/s?__biz=MjM5ODIyMTE0MA==&mid=2650971794&idx=1&sn=6366a5abe73299e76f4cd1d6e70cb572

作为管理者需要不断的去识别团队不必要做的事情，并且要把这些不必要做的事情砍掉或者优化，把资源投入能提高业绩的事情上来，然后你可能发现，公司不需要那么多人，尤其是不需要那么多所谓的管理者。如果你的主要收入来自销售，那么就把销售的事情做到极致，而不是非要去搞线下活动。哪怕你线下活动能做出花样来，又能怎么样呢？另附： 创业中的快与慢 。

2018，创业黄金时代结束的一年

https://mp.weixin.qq.com/s?__biz=MzI2NDk5NzA0Mw==&mid=2247525721&idx=1&sn=e274a0348e7b990ce347aee05f4fb5a9

在宏观环境去杠杆的大背景下，沙滩上的裸泳者越来越多。P2P爆雷、长租公寓爆雷、九鼎跌落，币圈也没钱了……融资变得艰难，风口转瞬即逝，投资狂潮造就的创业公司高估值，没有获得二级市场的广泛认可，估值倒挂的现象直接导致大量公司因融资问题难以为继。36氪通过问卷调查等形式采访了100多位创业者，聆听他们真实的故事。若干年后我们再回首，2018将成为中国新商业的里程碑——全民创业10年大潮，影响中国商业和社会形态至深；在高速增长的另一面，则是狂欢之后的狼狈。另附： 王慧文 - 觉得公司值钱，有的时候只是种妄念 、 美团方法论 。

– THE END –